上传记录接口

src/views/data/UploadRecord.vue

@@ -33,7 +33,9 @@
       ></TablePage>
     </div>
     <div v-else>
-      <Detail></Detail>
+      <Detail
+        :detailData='detailData'
+      ></Detail>
     </div>
   </div>
 </template>
@@ -58,6 +60,7 @@ export default {
       currentPage: 1,
       pageSize: 20,
       tableData: [],
+      detailData: {}
     };
   },
   computed: {
@@ -128,6 +131,7 @@ export default {
     },
     detail: function (i) {
       let id = this.tableData[i].id || i;
+      this.detailData = this.tableData[i];
       this.$router.push({ query: { id: id } });
     },
     // 上传记录列表接口
@@ -151,19 +155,29 @@ export default {
     },
     // 下载资料接口
     selectInformationAgentList: function (dataId) {
-      this.$http({
-        method: "post",
-        url: "/selectInformationAgentList",
-        data: {
-          id: dataId,
-        },
-      })
-        .then((res) => {
-          console.log(res);
+      return new Promise((resolve, reject) => {
+        this.$http({
+          url: '/selectInformationAgentList',
+          method: "post",
+          data: {id: dataId},
+          responseType: 'blob'
         })
-        .catch((err) => {
-          console.log(err);
-        });
+          .then((res) => {
+            console.log(res);
+            resolve(res);
+            let link = document.createElement("a");
+            link.href = window.URL.createObjectURL(new Blob([res.data]));
+            link.target = "_blank";
+            //文件名和格式
+            link.download = "文件模板.zip";
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+          })
+          .catch((err) => {
+            reject(err);
+          });
+      });
     },
     // 删除记录接口
     deleteInformationInfo: function (dataId) {

src/views/data/components/RecordDetailTable.vue

@@ -16,9 +16,9 @@
           :class="{ table_gray: index % 2 === 0 }"
         >
           <td>{{ index + 1 }}</td>
-          <td>{{ obj.DLR }}</td>
-          <td>{{ obj.name }}</td>
-          <td>{{ obj.area }}</td>
+          <td>{{ obj.dlrCode }}</td>
+          <td>{{ obj.dlrName }}</td>
+          <td>{{ obj.localArea }}</td>
         </tr>
       </tbody>
     </table>
@@ -36,7 +36,8 @@ export default {
       },
     },
   },
-  mounted() {},
+  mounted() {
+  },
   data() {
     return {};
   },

src/views/data/components/UploadRecordDetail.vue

@@ -7,36 +7,41 @@
       <div class="content_datail">
         <div class="detail">
           <p style="width: 65px">资料名称：</p>
-          <p>{{ dataObj.name }}</p>
+          <p>{{ detailData.informationName }}</p>
         </div>
         <div class="detail">
           <p style="width: 65px">上传时间：</p>
-          <p>{{ dataObj.time2 }}</p>
+          <p>{{ detailData.filePulishTime }}</p>
         </div>
         <div class="multiDetail">
           <div class="time">
             <p style="width: 65px">素材时间：</p>
-            <p>{{ dataObj.time1 }}</p>
+            <p>{{ detailData.fileUploadDate }}</p>
           </div>
           <div class="range">
             <p style="width: 75px">经销商范围：</p>
-            <p style="margin-right: 10px">{{ dataObj.range }}</p>
+            <p style="margin-right: 10px">
+              {{ detailData.accountScope === 1 ? "共通" : "部分" }}
+            </p>
             <p>
-              可查看经销商<span @click="showTable">{{ dataObj.sum }}</span
+              可查看经销商<span @click="showTable">{{
+                detailData.totalCount
+              }}</span
               >家
             </p>
           </div>
         </div>
         <div class="detail">
           <p style="width: 65px">资料描述：</p>
-          <p>{{ dataObj.desc }}</p>
+          <p>{{ detailData.fileDiscription }}</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)"
+              v-for="(item, index) in detailData.files"
+              :key="index"
+              @click="downloadFile(index)"
             >
               {{ item.name }}
             </p>
@@ -45,7 +50,7 @@
       </div>
       <div class="table" v-show="isShowTable">
         <div class="table_option">
-          <select @change="seletByArea" v-model='optionValue'>
+          <select @change="seletByArea" v-model="optionValue">
             <option value="" selected>全区</option>
             <option value="s">南区</option>
             <option value="n">北区</option>
@@ -53,7 +58,7 @@
             <option value="self">自定义分组</option>
           </select>
           <div class="hidTable" @click="hidTable">
-              <img src="../../../img/crossMark.png">
+            <img src="../../../img/crossMark.png" />
           </div>
         </div>
         <div class="count">
@@ -83,140 +88,30 @@ import Table from "./RecordDetailTable";
 import Count from "../../../components/Count";
 import TablePage from "../../../components/TablePage";
 export default {
-  props: {},
+  props: {
+    detailData: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
   components: {
     Table,
     Count,
     TablePage,
   },
-  mounted() {},
+  mounted() {
+    console.log(this.detailData);
+  },
   data() {
     return {
-      dataObj: {
-        name: "雷克萨斯ES上市",
-        time1: "2021/04",
-        range: "共通",
-        time2: "2021/03/10 18:19",
-        sum: 200,
-        desc: "资料包内海报，主要针对此次新款车型上市卖点进行宣传。",
-        files: [
-          {
-            id: "111",
-            name: "宣传活动海报合集",
-          },
-          {
-            id: "222",
-            name: "宣传活动海报合集2",
-          },
-        ],
-      },
       isShowTable: false,
       sum: 100, // 表格总数据
       currentPage: 1,
       pageSize: 20,
-      tableData: [
-        {
-          DLR: "L0201",
-          name: "经销商名称",
-          area: "所属区域",
-        },
-        {
-          DLR: "L0201",
-          name: "经销商名称",
-          area: "所属区域",
-        },
-        {
-          DLR: "L0201",
-          name: "经销商名称",
-          area: "所属区域",
-        },
-        {
-          DLR: "L0201",
-          name: "经销商名称",
-          area: "所属区域",
-        },
-        {
-          DLR: "L0201",
-          name: "经销商名称",
-          area: "所属区域",
-        },
-        {
-          DLR: "L0201",
-          name: "经销商名称",
-          area: "所属区域",
-        },
-        {
-          DLR: "L0201",
-          name: "经销商名称",
-          area: "所属区域",
-        },
-        {
-          DLR: "L0201",
-          name: "经销商名称",
-          area: "所属区域",
-        },
-        {
-          DLR: "L0201",
-          name: "经销商名称",
-          area: "所属区域",
-        },
-        {
-          DLR: "L0201",
-          name: "经销商名称",
-          area: "所属区域",
-        },
-        {
-          DLR: "L0201",
-          name: "经销商名称",
-          area: "所属区域",
-        },
-        {
-          DLR: "L0201",
-          name: "经销商名称",
-          area: "所属区域",
-        },
-        {
-          DLR: "L0201",
-          name: "经销商名称",
-          area: "所属区域",
-        },
-        {
-          DLR: "L0201",
-          name: "经销商名称",
-          area: "所属区域",
-        },
-        {
-          DLR: "L0201",
-          name: "经销商名称",
-          area: "所属区域",
-        },
-        {
-          DLR: "L0201",
-          name: "经销商名称",
-          area: "所属区域",
-        },
-        {
-          DLR: "L0201",
-          name: "经销商名称",
-          area: "所属区域",
-        },
-        {
-          DLR: "L0201",
-          name: "经销商名称",
-          area: "所属区域",
-        },
-        {
-          DLR: "L0201",
-          name: "经销商名称",
-          area: "所属区域",
-        },
-        {
-          DLR: "L0201",
-          name: "经销商名称",
-          area: "所属区域",
-        },
-      ],
-      optionValue: ''
+      tableData: [],
+      optionValue: "",
     };
   },
   computed: {
@@ -228,13 +123,15 @@ export default {
   methods: {
     showTable: function () {
       this.isShowTable = !this.isShowTable;
+      let id = this.detailData['id'];
+      this.getDlrData(id)
     },
     hidTable: function () {
       this.isShowTable = false;
     },
-    seletByArea: function() {
-        console.log(this.optionValue);
-        this.selectInformationFileList();
+    seletByArea: function () {
+      console.log(this.optionValue);
+      this.selectInformationFileList();
     },
     // 获取某一页面的数据，展示在表格
     changePage: function (page) {
@@ -260,42 +157,78 @@ export default {
       console.log(this.currentPage);
     },
     // 下载附件
-    downloadFile: function(i) {
-        this.selectInformationFileList(i)
+    downloadFile: function (i) {
+      this.selectInformationFileList(i);
     },
     // 导出文件
-    downloadExcel: function() {
-        this.downloadTemplate('id');
+    downloadExcel: function () {
+      let id = this.detailData['id'];
+      this.exportTem(id);
     },
     // 下载文件接口
-    selectInformationFileList: function(id) {
+    selectInformationFileList: function (id) {
       this.$http({
-        method: 'post',
-        url: '/selectInformationFileList',
+        method: "post",
+        url: "/selectInformationFileList",
         data: {
-          id: id
-        }
-      }).then((res) => {
-        console.log(res);
-      }).catch((err) => {
-        console.log(err);
+          id: id,
+        },
       })
-    }
+        .then((res) => {
+          console.log(res);
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    },
+    // 导出模板
+    exportTem: function (i) {
+      return new Promise((resolve, reject) => {
+        this.$http({
+          url: '/export',
+          method: "post",
+          data: {id: i},
+          responseType: 'blob'
+        })
+          .then((res) => {
+            console.log(res);
+            resolve(res);
+            let link = document.createElement("a");
+            link.href = window.URL.createObjectURL(new Blob([res.data]));
+            link.target = "_blank";
+            //文件名和格式
+            link.download = "文件模板.zip";
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+          })
+          .catch((err) => {
+            reject(err);
+          });
+      });
+    },
+    // 分页获取所有进销商信息接口
+    getDlrData: function (id) {
+      this.$http({
+        method: "post",
+        url: "/sys/agent/selectAgentInfoPage",
+        data: {
+          informationId: id,
+        },
+      })
+        .then((res) => {
+          if (res.data && res.data.code === 200) {
+            this.tableData = res.data.data;
+            this.sum = res.data.count;
+          } else {
+            console.log(res);
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    },
   },
-  // 导出模板
-  downloadTemplate: function(i) {
-    this.$http({
-      method: 'post',
-      url: '/downloadTemplate',
-      data: {
-        id: i
-      }
-    }).then((res) => {
-      console.log(res)
-    }).catch((err) => {
-      console.log(err);
-    })
-  }
 };
 </script>
 
@@ -327,15 +260,17 @@ export default {
         display: flex;
       }
       .multiDetail {
-        display: flex;
+        // display: flex;
         min-height: 50px;
         .time {
-          width: 126px;
+          // width: 126px;
+          min-height: 50px;
           display: flex;
         }
         .range {
           display: flex;
-          width: 268px;
+          // width: 268px;
+          min-height: 50px;
           span {
             color: #0056a0;
             margin: 0 10px;
@@ -379,9 +314,9 @@ export default {
         width: 41px;
         height: 26px;
         padding-left: 15px;
-        img{
-            width: 26px;
-            height: 26px;
+        img {
+          width: 26px;
+          height: 26px;
         }
       }
     }

src/views/data/components/UploadRecordTable.vue

@@ -19,7 +19,7 @@
         >
           <td style="width: 20%">{{ obj.informationName }}</td>
           <td style="width: 10%">{{ obj.filePulishTime }}</td>
-          <td style="width: 10%">{{ obj.accountScope === 1 ? "共同" : "部分" }}</td>
+          <td style="width: 10%">{{ obj.accountScope === 1 ? "共通" : "部分" }}</td>
           <td style="width: 10%">
             <span>{{ obj. totalCount }}</span
             >/<span style="color: #A30014">{{ obj.downloadCount }}</span>