链接上传页面修改，详情页面

src/App.vue

@@ -36,7 +36,7 @@ export default {
     return {
       navTitle1: ' > 数据管理',
       navTitle2: '',
-      isManufacturer: 'manufacturer', // distributor 经销商 manufacturer 厂商
+      isManufacturer: 'distributor', // distributor 经销商 manufacturer 厂商
     }
   },
   methods: {

src/components/Modal2.vue

@@ -6,9 +6,7 @@
         <h3>编辑</h3>
       </div> -->
       <div class="modal-body">
-        <div class="bodyRow">
-          确认删除？
-        </div>
+        <div class="bodyRow">确认删除？</div>
       </div>
       <div class="modal-footer">
         <button type="button" class="btn-confirm" @click="confirm">确认</button>
@@ -21,16 +19,29 @@
 <script>
 export default {
   name: "Modal",
-  props: {},
+  props: {
+    itemIndex: {
+      type: Number,
+      default: -1,
+    },
+  },
   data() {
-    return {};
+    return {
+      confirmFlag: {
+        type: Boolean,
+        default: false,
+      },
+    };
   },
   methods: {
     closeSelf() {
       this.$emit("closeme2");
+      this.confirmFlag = false;
     },
     confirm() {
-      this.$emit("del");
+      this.confirmFlag = true;
+      this.$emit("del", this.itemIndex);
+      this.confirmFlag = false;
     },
   },
 };

src/views/data/InforList.vue

@@ -1,8 +1,7 @@
 <template>
-  <div class="upload_record">
-    <h1>资料列表</h1>
-    <div class="record">
-      <div>上传记录</div>
+  <div>
+    <div class="upload_record" v-if="initialPage">
+      <h1>资料列表</h1>
       <div class="searchBox">
         <div class="search_inside">
           <span><img src="" alt="" /></span>
@@ -33,15 +32,41 @@
         <button>确定</button>
       </div>
       <div class="tableD">
-        <UpLoadTable
-          :trStyle="trStyle"
-          :tableHeader="tableHeaderD"
-          :tableData="tableData"
-          :tableHeadStyle="tableHeadStyle"
-          :operation="operation"
-          :discolor="discolor"
-          :flag="false"
-        />
+        <div class="table_template">
+          <table class="table">
+            <thead>
+              <tr :style="tableHeadStyle">
+                <td
+                  v-for="(item, index) in tableHeaderD"
+                  :key="index"
+                  :style="tableHeadStyle"
+                >
+                  {{ item }}
+                </td>
+              </tr>
+            </thead>
+            <tbody>
+              <tr
+                v-for="(obj, index) in tableData"
+                :key="index"
+                :class="{ table_gray: !discolor && index % 2 === 0 }"
+              >
+                <!--  <td :style="trStyle" v-if="flag">{{ index + 1 }}</td> -->
+                <td v-for="(item, index) in obj" :key="index" :style="trStyle">
+                  {{ item }}
+                </td>
+                <td v-if="operation" :style="trStyle" class="operationStyle">
+                  <span
+                    v-for="(operationObj, i) in operation"
+                    :key="i"
+                    @click="operationObj.function(index)"
+                    >{{ operationObj.name }}
+                  </span>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
       </div>
       <div class="pageD">
         <TablePage
@@ -52,25 +77,48 @@
         />
       </div>
     </div>
+    <div v-else>
+      <Detail></Detail>
+    </div>
+    <!-- <div v-show="!initialPage">
+      详情页面
+      <div><span>资料名称</span><span>{{}}</span></div>
+      <div><span>上传时间</span><span>{{}}</span></div>
+      <div>
+        <div><span>车系</span><span>{{}}</span></div>
+        <div><span>车型</span><span>{{}}</span></div>
+      </div>
+      <div>
+        <div><span>素材时间</span><span>{{}}</span></div>
+        <div><span>经销商范围</span><span>{{}}</span></div>
+      </div>
+      <div><span>资料描述</span><span>{{}}</span></div>
+      <span>附件</span>
+    </div> -->
   </div>
 </template>
 
 <script>
 import TablePage from "../../components/TablePage";
-import UpLoadTable from "../../components/Table";
+import Detail from './components/UploadLinkDetail';
 export default {
   props: {
     isManufacturer: {
       type: String,
       default: "distributor",
     },
+    detailVisible: {
+      type: Boolean,
+      default: true,
+    },
   },
   components: {
     TablePage,
-    UpLoadTable,
+    Detail,
   },
   data() {
     return {
+      initialPage: this.detailVisible,
       tableHeaderD: [
         "资料名称",
         "时间类型",
@@ -88,7 +136,7 @@ export default {
             this.downloadPost();
           },
         },
-     /*    {
+        /*    {
           name: "反馈",
           function: () => {
             this.feedback();
@@ -124,7 +172,7 @@ export default {
           feedback: "未反馈",
         },
         {
-          name: "a，续航可达400公里",
+          name: "续航可达400公里",
           time: "2021/04",
           spread: "传播类型1",
           uploadTime: "",
@@ -151,13 +199,14 @@ export default {
     },
   },
   methods: {
-    showDetail: () => {
-      alert("展示详情");
+    showDetail: function () {
+      //alert("展示详情");
+      this.initialPage = !this.initialPage;
     },
     feedback: () => {
       alert("反馈");
     },
-    download: () => {
+    download: function () {
       alert("下载");
     },
     // 获取某一页面的数据，展示在表格
@@ -194,6 +243,7 @@ export default {
         this.addByCustomize
       );
     },
+    //下载文件
     downloadPost: function (config) {
       console.log(config);
       return new Promise((resolve, reject) => {
@@ -220,8 +270,7 @@ export default {
       });
     },
   },
-  mounted() {
-  }
+  mounted() {},
 };
 </script>
 
@@ -245,4 +294,28 @@ export default {
   width: 400px;
   justify-content: space-between;
 }
+/* 查看详情样式 */
+.table_template {
+  text-align: center;
+  .table {
+    background-color: #fff;
+    border-collapse: collapse;
+    border: none;
+    width: 100%;
+    td {
+      border: 1px solid #ccc;
+    }
+    span {
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}
+.table_gray {
+  background: #f5f5f5;
+}
+.operationStyle span {
+  color: #0000ff;
+}
 </style>

src/views/data/UploadLink.vue

@@ -61,8 +61,35 @@
             </td>
             <td class="operationStyle">
               <span @click="toggleModal">编辑</span>
-              <!-- <span @click="del(index)">删除</span> -->
-              <span @click="toggleModal2">删除</span>
+              <!-- <span @click="toDel(index)">删除</span> -->
+              <span
+                @click="
+                  toggleModal2();
+                  getIndex(index);nowIndex=index
+                "
+                >删除</span
+              >
+              <!--       <Modal2
+                v-show="showModal2"
+                v-on:closeme2="closeme2"
+                v-on:del="toDel2"
+                :itemIndex="index"
+              ></Modal2> -->
+              <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>
             </td>
           </tr>
         </tbody>
@@ -74,22 +101,20 @@
       :dataset_title="tableData.articleTitle"
       @update="editTitle"
     ></Modal>
+    <div class="timeLimitStyle">
+      <span>仅可对上传时间为{{ feedbackTimeLimit }}个月内的资料进行反馈</span>
+    </div>
     <div class="fileOperation">
       <span class="operationStyle">导入模板</span>
       <button>导入</button>
       <button>导出</button>
     </div>
-    <Modal2
-      v-show="showModal2"
-      v-on:closeme2="closeme2"
-      v-on:del="del"
-    ></Modal2>
   </div>
 </template>
 
 <script>
 import Modal from "../../components/Modal";
-import Modal2 from "../../components/Modal2";
+/* import Modal2 from "../../components/Modal2"; */
 export default {
   props: {
     isManufacturer: {
@@ -99,12 +124,14 @@ export default {
   },
   components: {
     Modal,
-    Modal2,
+    /*     Modal2, */
   },
   data() {
     return {
+      feedbackTimeLimit: 6,
       showModal: false,
       showModal2: false,
+      sonConsfirmFlag: false,
       // 表格配置
       sum: 240, // 一共有多少条数据
       pageSize: 20, // 每页展示的数据
@@ -223,12 +250,12 @@ export default {
     toggleModal2: function () {
       this.showModal2 = !this.showModal2;
     },
-    closeme2: function () {
+     closeme2: function () {
       this.showModal2 = !this.showModal2;
     },
     editTitle: function (val) {
       this.dataset_title = new Array(val);
-      console.log("Link:", this.dataset_title);
+      console.log("inEditTitle:", this.dataset_title);
     },
     /*     add: function () {
       this.myData.push({
@@ -237,20 +264,30 @@ export default {
       });
       (this.username = ""), (this.age = "");
     }, */
-    del: function (n) {
-      this.showModal2 = !this.showModal2;
-      //清空数据
-      if (n == -2) {
-        this.tableData = "";
-      }
-      //清空某一项数据
-      {
-        let obj = this.tableData[n];
-        console.log(obj);
-        Object.keys(obj).forEach((key) => {
-          obj[key] = "";
-        });
-      }
+    toDel: function (n) {
+      console.log("inToDel:", n, this.sonConsfirmFlag);
+     // if (this.sonConsfirmFlag) {
+        //清空数据
+        if (n == -2) {
+          this.tableData = "";
+        }
+        //清空某一项数据
+        {
+          let obj = this.tableData[n];
+          console.log(obj);
+          Object.keys(obj).forEach((key) => {
+            obj[key] = "";
+          });
+        }
+     // }
+    //  this.sonConsfirmFlag = false;
+    },
+    /*    toDel2: function (flag) {
+      this.sonConsfirmFlag = flag;
+      console.log("inToDel2:", this.sonConsfirmFlag);
+    }, */
+    getIndex: function (index) {
+      console.log("inGetIndex", index);
     },
   },
 };
@@ -364,4 +401,67 @@ export default {
   margin: 10px;
   align-items: center;
 }
+.timeLimitStyle {
+  padding: 10px;
+}
+
+.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: #eeeeee;
+  box-shadow: 2px 2px 20px 1px;
+  overflow-x: auto;
+  display: flex;
+  flex-direction: column;
+  border-radius: 16px;
+  width: 1030px;
+}
+.modal-header {
+  border-bottom: 1px solid #eee;
+  color: #313131;
+  justify-content: space-between;
+  padding: 15px;
+  display: flex;
+}
+.modal-footer {
+  border-top: 1px solid #eee;
+  justify-content: center;
+  padding: 15px;
+  display: flex;
+}
+.modal-body {
+  position: relative;
+  padding: 20px 150px 20px 150px;
+}
+.btn-close,
+.btn-confirm {
+  border-radius: 8px;
+  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 {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
 </style>

src/views/data/components/UploadLinkDetail.vue

@@ -0,0 +1,175 @@
+<template>
+  <div class="record_detail">
+    <div class="title">
+      <p class="data_detail">数据详情</p>
+    </div>
+    <div class="content">
+      <div class="content_datail">
+        <div class="detail">
+          <p style="width: 65px">资料名称：</p>
+          <p>{{ dataObj.name }}</p>
+        </div>
+        <div class="detail">
+          <p style="width: 65px">上传时间：</p>
+          <p>{{ dataObj.time2 }}</p>
+        </div>
+        <div class="multiDetail">
+          <div class="time">
+            <span style="width: 65px">车系：</span>
+            <span>{{ dataObj.time1 }}</span>
+          </div>
+          <div class="range">
+            <p style="width: 75px">车型：</p>
+            <p style="margin-right: 10px">雷克萨斯</p>
+          </div>
+        </div>
+        <div class="multiDetail">
+          <div class="time">
+            <span style="width: 65px">素材时间：</span>
+            <span>{{ dataObj.time1 }}</span>
+          </div>
+          <div class="range">
+            <p style="width: 75px">经销商范围：</p>
+            <p style="margin-right: 10px">{{ dataObj.range }}</p>
+          </div>
+        </div>
+        <div class="detail">
+          <p style="width: 65px">资料描述：</p>
+          <p>{{ dataObj.desc }}</p>
+        </div>
+        <div class="files">
+          <p style="width: 65px">附件：</p>
+          <div class="filesName">
+            <p
+                v-for="(item, index) in dataObj.files" :key="index"
+                @click="downloadFile(index)"
+            >
+              {{ item.name }}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {},
+  components: {
+  },
+  mounted() {},
+  data() {
+    return {
+      dataObj: {
+        name: "雷克萨斯ES上市",
+        time1: "2021/04",
+        range: "共通",
+        time2: "2021/03/10 18:19",
+        sum: 200,
+        desc: "资料包内海报，主要针对此次新款车型上市卖点进行宣传。",
+        files: [
+          {
+            id: "111",
+            name: "宣传活动海报合集",
+          }
+        ],
+      },
+      
+    };
+  },
+  computed: {
+    // 表格总页数
+    totalPage() {
+      return Math.ceil(this.sum / this.pageSize);
+    },
+  },
+  methods: {
+    // 下载附件
+    downloadFile: function(i) {
+        console.log(i);
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+.record_detail {
+  .title {
+    border-top: 1px solid #ccc;
+    .data_detail {
+      padding-left: 10px;
+      font-size: 14px;
+      font-weight: bolder;
+      height: 30.8px;
+      vertical-align: bottom;
+      display: table-cell;
+    }
+  }
+  .content {
+    display: flex;
+    // justify-content: ;
+    border: 1px solid #ccc;
+    padding: 20px;
+    .content_datail {
+      width: 420px;
+      height: 390px;
+      padding: 20px 30px 0;
+      .detail {
+        width: 100%;
+        min-height: 50px;
+        display: flex;
+      }
+      .multiDetail {
+        display: flex;
+        min-height: 50px;
+        .time {
+          width: 126px;
+          display: flex;
+        }
+        .range {
+          display: flex;
+          width: 268px;
+          span {
+            color: #0056a0;
+            margin: 0 10px;
+            &:hover {
+              cursor: pointer;
+            }
+          }
+        }
+      }
+      .files {
+        display: flex;
+        .filesName {
+          p {
+            color: #0056a0;
+          }
+        }
+      }
+    }
+    .table {
+      width: 568px;
+      height: 390px;
+      background-color: #fff;
+      padding: 10px;
+      .table_option {
+        height: 28px;
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        select {
+          width: 144px;
+          height: 28px;
+          border: 1px solid #ccc;
+          color: #555;
+        }
+      }
+      .count {
+        display: flex;
+        justify-content: flex-end;
+      }
+    }
+  }
+}
+</style>