提示模态框

src/components/TipModal.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="tip_modal" v-if="tipFlag" @mousewheel="mousewheel">
+    <div class="modal_content">
+      <div class="img"><img src="../img/crossMark.png" @click="closeModal"/></div>
+      <p>{{ tipText }}</p>
+      <div class="button">
+        <div class="current_button" @click="closeModal">确定</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    tipFlag: {
+      type: Boolean,
+      default: false,
+    },
+    tipText: {
+      type: String,
+      default: "删除成功!!!",
+    },
+  },
+  data() {},
+  methods: {
+    mousewheel: function (e) {
+      e.preventDefault();
+    },
+    closeModal: function() {
+        this.$emit('close_tip_modal');
+    }
+  },
+};
+</script>
+
+<style scoped lang="less">
+.tip_modal {
+  position: fixed;
+  left: 0;
+  top: 0;
+  height: 100vh;
+  width: 100vw;
+  background-color: rgba(127, 127, 127, 0.7);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .modal_content {
+    width: 400px;
+    height: 200px;
+    background-color: #fff;
+    transform: translateY(-150px);
+    .img {
+      background-color: #0056a0;
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      height: 40px;
+      padding-right: 15px;
+      img {
+        width: 30px;
+        height: 30px;
+        &:hover {
+          cursor: pointer;
+        }
+      }
+    }
+    p {
+      font-size: 16px;
+      margin-left: 50px;
+      margin-top: 30px;
+    }
+    .button {
+      margin-top: 50px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+}
+</style>

src/views/data/UploadInfor.vue

@@ -127,6 +127,11 @@
       /></label>
     </div>
     <button @click="submit" class="submitBtn">提交</button>
+    <TipModal 
+        :tipFlag='tipModalFlag'
+        :tipText='tipModalText'
+        @close_tip_modal='closeTipModal'
+    />
   </div>
 </template>
 
@@ -134,7 +139,8 @@
 import UpLoadTable from "./components/UploadInforTable";
 import Count from "../../components/Count";
 import Tablepage from "../../components/TablePage";
-import { AREASLIST, GROUPLISTS } from "./uploadinfo";
+import TipModal from "../../components/TipModal"
+import { AREASLIST } from "./uploadinfo";
 export default {
   props: {
     isManufacturer: {
@@ -146,6 +152,7 @@ export default {
     UpLoadTable,
     Count,
     Tablepage,
+    TipModal
   },
   watch: {},
   data() {
@@ -170,12 +177,13 @@ export default {
       pageSize: 20, // 每页展示的数据
       currentPage: 1,
       areaList: AREASLIST, // 按区域添加
-      groupList: GROUPLISTS, // 按小组添加
+      groupList: [], // 按小组添加
       localMonth: "",
       tableData: [], // 表格显示的数据
       AllDlr: [], // 所有进销商数据
       imgFlag: new Array(20).fill(true), // 筛选栏用添加图片还是删除图片
-      // 文件
+      tipModalFlag: false,
+      tipModalText: ''
     };
   },
   computed: {
@@ -262,6 +270,10 @@ export default {
       this.imgFlag.splice(i, 1, !this.imgFlag[i]);
       // 筛选后的数据
     },
+    // 关闭提示框
+    closeTipModal: function() {
+      this.tipModalFlag = false;
+    },
     // 获取某一页面的数据，展示在表格
     changePage: function (page) {
       this.currentPage = page;
@@ -341,7 +353,7 @@ export default {
         .uploadFile("/firmsUpload", paramData)
         .then((res) => {
           if (res.data && res.data.code === 200) {
-            alert("上传成功");
+            this.tipModalFlag = true;
           } else {
             alert("上传失败，请重试");
             console.log(res);

src/views/data/demo.vue

@@ -0,0 +1,29 @@
+<template>
+<!-- 使用tip模态框demo -->
+  <TipModal
+    :tipFlag="tipModalFlag"
+    :tipText="tipModalText"
+    @close_tip_modal="closeTipModal"
+  />
+</template>
+<script>
+import TipModal from "../../components/TipModal";
+export default {
+  components: {
+    TipModal,
+  },
+  data() {
+    return {
+      tipModalFlag: false,
+      tipModalText: "",
+    };
+  },
+  methods: {
+    closeTipModal: function () {
+      this.tipModalFlag = false;
+    },
+  },
+//   使用时 this.tipModalText = '删除成功' 
+// this.tipModalFlag = true;
+};
+</script>

src/views/data/uploadinfo.js

@@ -25,8 +25,6 @@ const AREASLIST = [
         checked: false
     }
 ]
-const GROUPLISTS = ['第一小组', '第二小组', '第三小组', '第四小组', '第五小组', '第六小组'];
 module.exports = {
     AREASLIST,
-    GROUPLISTS,
 }