细节修改

src/views/data/InforList.vue

@@ -6,8 +6,8 @@
         <div class="input">
           <img src="../../img/search.png" />
           <input type="text" name="" id="" placeholder="请输入要搜索的资料名" />
-          <button>搜索</button>
         </div>
+        <button>搜索</button>
       </div>
    <!--    <div class="searchBox">
         <div class="search_inside">
@@ -354,6 +354,7 @@ export default {
     display: flex;
     align-items: center;
     margin-left: 16px;
+    border: 1px  solid #ccc;
     img {
       width: 28px;
       height: 28px;

src/views/data/UploadLink.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="upload_Link">
-    <span><b>经销商</b></span>
-    <span><b>针对论坛及其他平台链接上传</b></span>
+   <!--  <span><b>经销商</b></span> -->
+    <span>针对论坛及其他平台链接上传</span>
     <div class="contentHead">
       <span>上传平台</span>
       <select name="" id="">
@@ -60,37 +60,15 @@
               {{ obj.articleLink }}
             </td>
             <td class="operationStyle">
-              <span @click="toggleModal">编辑</span>
-              <span
-                @click="
-                  toggleModal2();
-                  nowIndex = index;
-                "
-                >删除</span
-              >
+              <span @click="toggleModal(index)">编辑</span>
+              <span @click="toggleModal2(index)">删除</span>
               <!-- 弹窗： 确定删除？ -->
-              <div class="modal-backdrop" v-show="showModal2">
-                <div class="modal">
-                  <div class="modal-body">
-                    <div class="bodyRow">确定删除？</div>
-                  </div>
-                  <div class="modal-footer">
-                    <button
-                      type="button"
-                      class="btn-confirm"
-                      @click="
-                        toDel(nowIndex);
-                        closeme2();
-                      "
-                    >
-                      确定
-                    </button>
-                    <button type="button" class="btn-close" @click="closeme2">
-                      取消
-                    </button>
-                  </div>
-                </div>
-              </div>
+              <deleteModal
+                @dataDel="toDel"
+                @hide_modal="closeme2"
+                :showModalFlag="showModal2"
+                :chooseItemIndex="nowIndex"
+              ></deleteModal>
             </td>
           </tr>
         </tbody>
@@ -109,9 +87,9 @@
     </div>
     <div class="pageBottom">
       <div class="fileOperation">
-        <span class="operationStyle">导入模板</span>
+        <span class="operationStyle xiahuaxian">导入模板</span>
         <button @click="toggleModal3()">导入</button>
-        <button>导出</button>
+        <button @click="toggleModal4()">导出</button>
       </div>
       <TablePage
         :currentPage="currentPage"
@@ -145,7 +123,7 @@
           <div class="bodyRow">资料名称无法匹配，请修改后重新导入</div>
           <div class="bodyRow">成功{{ 1 }}条，失败{{ 1 }}条</div>
         </div>
-        <div class="modal-footer" style="position: relative; top: 95px;">
+        <div class="modal-footer" style="position: relative; top: 95px">
           <button type="button" class="btn-confirm" @click="closeme4()">
             确定
           </button>
@@ -161,6 +139,7 @@
 <script>
 import Modal from "../../components/Modal";
 import TablePage from "../../components/TablePage";
+import deleteModal from "../data/components/UploadLinkModalDelete";
 export default {
   props: {
     isManufacturer: {
@@ -171,15 +150,17 @@ export default {
   components: {
     Modal,
     TablePage,
+    deleteModal,
   },
   data() {
     return {
+      nowIndex: 0,
+      /* modal */
       feedbackTimeLimit: 6,
       showModal: false,
       showModal2: false,
       showModal3: false,
       showModal4: false,
-      sonConsfirmFlag: false,
       // 表格配置
       sum: 240, // 一共有多少条数据
       pageSize: 20, // 每页展示的数据
@@ -268,6 +249,7 @@ export default {
           },
         },
       ],
+      modalData: {}, //17:44
     };
   },
   computed: {
@@ -284,14 +266,19 @@ export default {
       alert("展示详情");
     },
     /*toggleModal：点击编辑后弹窗； toggleModal2：点击删除后弹窗； toggleModal3：点击导入后弹窗；  */
-    toggleModal: function () {
+    toggleModal: function (i) {
       this.showModal = !this.showModal;
+      this.modalData = this.tableData[i];
+      console.log("INtoggleModal", this.modalData);
     },
     closeme: function () {
       this.showModal = !this.showModal;
     },
-    toggleModal2: function () {
+    toggleModal2: function (i) {
       this.showModal2 = !this.showModal2;
+      this.nowIndex = i;
+      this.modalData = this.tableData[i];
+      console.log("INtoggleModal2", this.modalData, this.nowIndex);
     },
     closeme2: function () {
       this.showModal2 = !this.showModal2;
@@ -320,8 +307,7 @@ export default {
       (this.username = ""), (this.age = "");
     }, */
     toDel: function (n) {
-      console.log("inToDel:", n, this.sonConsfirmFlag);
-      // if (this.sonConsfirmFlag) {
+      console.log("inToDel:", n);
       //清空数据
       if (n == -2) {
         this.tableData = "";
@@ -334,13 +320,8 @@ export default {
           obj[key] = "";
         });
       }
-      // }
-      //  this.sonConsfirmFlag = false;
+      this.showModal2 = !this.showModal2;
     },
-    /*    toDel2: function (flag) {
-      this.sonConsfirmFlag = flag;
-      console.log("inToDel2:", this.sonConsfirmFlag);
-    }, */
     getIndex: function (index) {
       console.log("inGetIndex", index);
     },
@@ -404,7 +385,7 @@ export default {
 .table_gray {
   background-color: #00549f;
 }
-.tableBox table{
+.tableBox table {
   border-collapse: collapse;
   border: 0px;
 }
@@ -478,6 +459,9 @@ export default {
   display: flex;
   justify-content: space-around;
 }
+.xiahuaxian{
+  text-decoration: underline;
+}
 .operationStyle span {
   color: #0000ff;
 }
@@ -487,7 +471,7 @@ export default {
   margin: 10px;
   align-items: center;
 }
-.fileOperation button{
+.fileOperation button {
   border-radius: 4px;
 }
 .timeLimitStyle {
@@ -568,7 +552,7 @@ export default {
   position: relative;
   left: 266px;
 } */
-.pageBottom{
+.pageBottom {
   display: flex;
   justify-content: space-between;
   align-items: center;

src/views/data/UploadLinks.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="upload_Link_Distributor">
-    <span><b>厂商链接上传</b></span>
+  <!--   <span><b>厂商链接上传</b></span> -->
     <div class="Head">
       <div class="search HeadLeft">
         <div class="input">

src/views/data/components/UploadLinkModalDelete.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="modal-backdrop" v-show="showModalFlag">
+    <div class="modal">
+      <div class="modal-body">
+        <div class="bodyRow">确定删除？</div>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn-confirm" @click="sonDataDel">
+          确定
+        </button>
+        <button type="button" class="btn-close" @click="closeme2">取消</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    showModalFlag: {
+      type: Boolean,
+      default: true,
+    },
+    chooseItemIndex: {
+      type: Number,
+      default: 0
+    },
+  },
+  data() {
+    return {
+      itemIndex:0,
+    };
+  },
+  methods: {
+    closeme2: function () {
+      this.$emit("hide_modal");
+    },
+    sonDataDel: function () {
+      this.itemIndex=this.chooseItemIndex;
+      this.$emit("dataDel",this.itemIndex);
+    },
+  },
+  mounted() {},
+};
+</script>
+
+<style scoped lang="less">
+.modal-backdrop {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.3);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.modal {
+  background-color: #ffffff;
+  box-shadow: 2px 2px 20px 1px;
+  overflow-x: auto;
+  display: flex;
+  flex-direction: column;
+  width: 500px;
+  border-radius: 0px;
+  height: 230px;
+}
+.modal-footer {
+  border-top: 1px solid #eee;
+  position: relative;
+  top: 124px;
+  left: 232px;
+  width: 208px;
+  display: flex;
+  justify-content: space-between;
+  padding: 0px;
+}
+.modal-footer button {
+  border-radius: 4px;
+  margin-left: 0px;
+  width: 80px;
+  font-size: 14px;
+}
+
+.modal-footer button:nth-child(1) {
+  background-color: #0056a0;
+}
+.modal-footer button:nth-child(2) {
+  background-color: #eeeeee;
+}
+.modal-body {
+  position: relative;
+  top: 64px;
+  margin-left: 50px;
+  padding: 0px;
+}
+.btn-close,
+.btn-confirm {
+  margin-left: 16px;
+  width: 56px;
+  height: 36px;
+  border: none;
+  cursor: pointer;
+}
+.btn-close {
+  color: #313131;
+  background-color: gray;
+}
+.btn-confirm {
+  color: #fff;
+  background-color: #2d8cf0;
+}
+.bodyRow {
+  font-size: 16px;
+  font-family: Arial;
+}
+</style>