处理接口问题

src/App.vue

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

src/views/data/UploadInfor.vue

@@ -127,7 +127,7 @@
       /></label>
     </div>
     <button @click="submit" class="submitBtn">提交</button>
-    <TipModal 
+    <TipModal
         :tipFlag='tipModalFlag'
         :tipText='tipModalText'
         @close_tip_modal='closeTipModal'
@@ -398,16 +398,16 @@ export default {
     getAllDlr: function (data = {}) {
       this.$http({
         method: "post",
-        url: "/sys/agent/selectAgentInfoList",
+        url: "/sys/agent/selectAgentInfoPage",
         data: data,
       })
         .then((res) => {
           if (res.data && res.data.code === 200) {
-            console.log(res, 'allres');
             this.dlrList = [];
-            this.AllDlr = res.data.data;
-            let resData = JSON.parse(JSON.stringify(res.data.data));
-            console.log(resData);
+            let dealerList = res.data.data;
+            dealerList.forEach((item)=>{this.AllDlr.push(item.id)})
+            console.log(this.AllDlr)
+            let resData = this.AllDlr;
             resData.forEach((item) => {
               // 获取自定义下拉框的值
               this.dlrList.push(item.dlrName);

src/views/data/UploadRecord.vue

@@ -1,272 +1,271 @@
-<template>
-  <div class="upload_record">
-    <div v-if="!isShowDetail">
-      <div class="search">
-        <div class="input">
-          <img src="../../img/search.png" />
-          <input type="text" @focus="focusInput" v-model="inputValue" />
-        </div>
-        <div class="current_button" @click="search">搜索</div>
-      </div>
-      <div class="sort">
-        <Count :sum="sum" />
-        <p>排序</p>
-        <select v-model="order" @change="sort">
-          <option value="">按时间降序</option>
-          <option value="DESC">按时间升序</option>
-        </select>
-      </div>
-      <div class="table">
-        <Table
-          :tableData="tableData"
-          @download="download"
-          @delet="delet"
-          @detail="detail"
-        >
-        </Table>
-      </div>
-      <TablePage
-        :currentPage="currentPage"
-        :totalPage="totalPage"
-        @change_page="changePage"
-        @jump_page="jumpPage"
-      ></TablePage>
-    </div>
-    <div v-else>
-      <Detail
-        :detailData='detailData'
-      ></Detail>
-    </div>
-  </div>
-</template>
-
-<script>
-import Count from "../../components/Count";
-import Table from "./components/UploadRecordTable";
-import TablePage from "../../components/TablePage";
-import Detail from "./components/UploadRecordDetail";
-export default {
-  components: {
-    Count,
-    Table,
-    TablePage,
-    Detail,
-  },
-  data() {
-    return {
-      inputValue: "请输入要搜索的资料名",
-      order: "", // 排序方式
-      sum: 100, // 表格总数据
-      currentPage: 1,
-      pageSize: 20,
-      tableData: [],
-      detailData: {}
-    };
-  },
-  computed: {
-    // 表格总页数
-    totalPage() {
-      return Math.ceil(this.sum / this.pageSize);
-    },
-    isShowDetail() {
-      return this.$route.query && this.$route.query.tag ? true : false;
-    },
-  },
-  methods: {
-    focusInput: function () {
-      this.inputValue = "";
-    },
-    search: function () {
-      console.log(this.inputValue);
-      let data = {};
-      if (this.inputValue !== "请输入要搜索的资料名") {
-        data = {
-          informationName: this.inputValue,
-        };
-      }
-      this.getFirmsUploadList(data);
-      this.inputValue = "请输入要搜索的资料名";
-    },
-    sort: function () {
-      // ASC降序
-      let asc = this.order === "DESC" ? false : true;
-      let data = {
-        asc: asc,
-      };
-      this.getFirmsUploadList(data);
-    },
-    changePage: function (page) {
-      this.currentPage = page;
-      console.log(page);
-    },
-    // 点击上一页，下一页，首页，尾页
-    jumpPage: function (item) {
-      switch (item) {
-        case 1:
-          this.currentPage = 1;
-          break;
-        case 2:
-          this.currentPage = this.currentPage - 1;
-          break;
-        case 3:
-          this.currentPage = this.currentPage + 1;
-          break;
-        case 4:
-          this.currentPage = this.totalPage;
-          break;
-      }
-      console.log(this.currentPage);
-    },
-    download: function (i) {
-      let id = this.tableData[i].id;
-      let dataObj = {
-        agentId: id
-        // informationName:
-      }
-      this.selectInformationAgentList(dataObj);
-    },
-    delet: function (i) {
-      let id = this.tableData[i].id;
-      this.deleteInformationInfo(id);
-      setTimeout(() => {
-        this.getFirmsUploadList();
-      }, 2000)
-    },
-    detail: function (i) {
-      this.detailData = this.tableData[i];
-      this.$router.push({ query: { tag: 'detail' } });
-    },
-    // 上传记录列表接口
-    getFirmsUploadList: function (data = {}) {
-      this.$http({
-        method: "post",
-        url: "/firmsUploadList",
-        data: data,
-      })
-        .then((res) => {
-          console.log(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);
-        });
-    },
-    // 下载资料接口
-    selectInformationAgentList: function (data) {
-      return new Promise((resolve, reject) => {
-        this.$http({
-          url: '/selectInformationAgentList',
-          method: "post",
-          data: data,
-          // 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);
-          });
-      });
-    },
-    // 删除记录接口
-    deleteInformationInfo: function (dataId) {
-      this.$http({
-        method: "post",
-        url: "/deleteInformationInfo",
-        data: {
-          id: dataId,
-        },
-      })
-        .then((res) => {
-          if(res.data && res.data.code === 200){
-            alert('删除成功');
-          }else{
-            console.log(res.message)
-          }
-        })
-        .catch((err) => {
-          console.log(err);
-        });
-    },
-  },
-  created() {
-    this.getFirmsUploadList();
-  },
-};
-</script>
-
-<style scoped lang="less">
-.upload_record {
-  .search {
-    border: 1px solid #ccc;
-    padding: 10px;
-    display: flex;
-    align-items: center;
-    .input {
-      background-color: #fff;
-      border: 1px solid #ccc;
-      padding: 2px;
-      display: flex;
-      img {
-        width: 28px;
-        height: 28px;
-        border: 1px solid #ccc;
-      }
-      input {
-        background-color: #fff;
-        border: 1px solid #ccc;
-        margin-left: 3px;
-        color: #555;
-        font-size: 12px;
-      }
-    }
-  }
-  .sort {
-    display: flex;
-    justify-content: flex-end;
-    margin-top: 10px;
-    height: 30px;
-    p {
-      margin: 10px 5px 0 15px;
-      text-align: center;
-      height: 20px;
-    }
-    select {
-      border: 1px solid #ccc;
-      font-size: 12px;
-      height: 30px;
-    }
-  }
-}
-input {
-  outline: none;
-  border: 1px solid #ccc;
-}
-input:focus {
-  animation: shadowAni 200ms linear forwards;
-}
-@keyframes shadowAni {
-  0% {
-    border-color: #cccccc;
-    box-shadow: inset 0px 0px 0 #ccc;
-  }
-  100% {
-    border-color: #75b9f0;
-    box-shadow: 0px 0px 5px #75b9f0;
-  }
-}
-</style>
+<template>
+  <div class="upload_record">
+    <div v-if="!isShowDetail">
+      <div class="search">
+        <div class="input">
+          <img src="../../img/search.png" />
+          <input type="text" @focus="focusInput" v-model="inputValue" />
+        </div>
+        <div class="current_button" @click="search">搜索</div>
+      </div>
+      <div class="sort">
+        <Count :sum="sum" />
+        <p>排序</p>
+        <select v-model="order" @change="sort">
+          <option value="">按时间降序</option>
+          <option value="DESC">按时间升序</option>
+        </select>
+      </div>
+      <div class="table">
+        <Table
+          :tableData="tableData"
+          @download="download"
+          @delet="delet"
+          @detail="detail"
+        >
+        </Table>
+      </div>
+      <TablePage
+        :currentPage="currentPage"
+        :totalPage="totalPage"
+        @change_page="changePage"
+        @jump_page="jumpPage"
+      ></TablePage>
+    </div>
+    <div v-else>
+      <Detail
+        :detailData='detailData'
+      ></Detail>
+    </div>
+  </div>
+</template>
+
+<script>
+import Count from "../../components/Count";
+import Table from "./components/UploadRecordTable";
+import TablePage from "../../components/TablePage";
+import Detail from "./components/UploadRecordDetail";
+export default {
+  components: {
+    Count,
+    Table,
+    TablePage,
+    Detail,
+  },
+  data() {
+    return {
+      inputValue: "请输入要搜索的资料名",
+      order: "", // 排序方式
+      sum: 100, // 表格总数据
+      currentPage: 1,
+      pageSize: 20,
+      tableData: [],
+      detailData: {}
+    };
+  },
+  computed: {
+    // 表格总页数
+    totalPage() {
+      return Math.ceil(this.sum / this.pageSize);
+    },
+    isShowDetail() {
+      return this.$route.query && this.$route.query.tag ? true : false;
+    },
+  },
+  methods: {
+    focusInput: function () {
+      this.inputValue = "";
+    },
+    search: function () {
+      console.log(this.inputValue);
+      let data = {};
+      if (this.inputValue !== "请输入要搜索的资料名") {
+        data = {
+          informationName: this.inputValue,
+        };
+      }
+      this.getFirmsUploadList(data);
+      this.inputValue = "请输入要搜索的资料名";
+    },
+    sort: function () {
+      // ASC降序
+      let asc = this.order === "DESC" ? false : true;
+      let data = {
+        asc: asc,
+      };
+      this.getFirmsUploadList(data);
+    },
+    changePage: function (page) {
+      this.currentPage = page;
+      console.log(page);
+    },
+    // 点击上一页，下一页，首页，尾页
+    jumpPage: function (item) {
+      switch (item) {
+        case 1:
+          this.currentPage = 1;
+          break;
+        case 2:
+          this.currentPage = this.currentPage - 1;
+          break;
+        case 3:
+          this.currentPage = this.currentPage + 1;
+          break;
+        case 4:
+          this.currentPage = this.totalPage;
+          break;
+      }
+      console.log(this.currentPage);
+    },
+    download: function (i) {
+      let id = this.tableData[i].id;
+      let dataObj = {
+        informationId: id
+      }
+      this.selectInformationAgentList(dataObj);
+    },
+    delet: function (i) {
+      let id = this.tableData[i].id;
+      this.deleteInformationInfo(id);
+      setTimeout(() => {
+        this.getFirmsUploadList();
+      }, 2000)
+    },
+    detail: function (i) {
+      this.detailData = this.tableData[i];
+      this.$router.push({ query: { tag: 'detail' } });
+    },
+    // 上传记录列表接口
+    getFirmsUploadList: function (data = {}) {
+      this.$http({
+        method: "post",
+        url: "/firmsUploadList",
+        data: data,
+      })
+        .then((res) => {
+          console.log(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);
+        });
+    },
+    // 下载资料接口
+    selectInformationAgentList: function (data) {
+      return new Promise((resolve, reject) => {
+        this.$http({
+          url: '/dealerDownload',
+          method: "post",
+          data: data,
+          // 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);
+          });
+      });
+    },
+    // 删除记录接口
+    deleteInformationInfo: function (dataId) {
+      this.$http({
+        method: "post",
+        url: "/deleteInformationInfo",
+        data: {
+          id: dataId,
+        },
+      })
+        .then((res) => {
+          if(res.data && res.data.code === 200){
+            alert('删除成功');
+          }else{
+            console.log(res.message)
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    },
+  },
+  created() {
+    this.getFirmsUploadList();
+  },
+};
+</script>
+
+<style scoped lang="less">
+.upload_record {
+  .search {
+    border: 1px solid #ccc;
+    padding: 10px;
+    display: flex;
+    align-items: center;
+    .input {
+      background-color: #fff;
+      border: 1px solid #ccc;
+      padding: 2px;
+      display: flex;
+      img {
+        width: 28px;
+        height: 28px;
+        border: 1px solid #ccc;
+      }
+      input {
+        background-color: #fff;
+        border: 1px solid #ccc;
+        margin-left: 3px;
+        color: #555;
+        font-size: 12px;
+      }
+    }
+  }
+  .sort {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 10px;
+    height: 30px;
+    p {
+      margin: 10px 5px 0 15px;
+      text-align: center;
+      height: 20px;
+    }
+    select {
+      border: 1px solid #ccc;
+      font-size: 12px;
+      height: 30px;
+    }
+  }
+}
+input {
+  outline: none;
+  border: 1px solid #ccc;
+}
+input:focus {
+  animation: shadowAni 200ms linear forwards;
+}
+@keyframes shadowAni {
+  0% {
+    border-color: #cccccc;
+    box-shadow: inset 0px 0px 0 #ccc;
+  }
+  100% {
+    border-color: #75b9f0;
+    box-shadow: 0px 0px 5px #75b9f0;
+  }
+}
+</style>

src/views/data/components/UploadRecordDetail.vue

@@ -1,378 +1,384 @@
-<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>{{ detailData.informationName }}</p>
-        </div>
-        <div class="detail">
-          <p style="width: 65px">上传时间：</p>
-          <p>{{ detailData.filePulishTime }}</p>
-        </div>
-        <div class="multiDetail">
-          <div class="time">
-            <p style="width: 65px">素材时间：</p>
-            <p>{{ detailData.fileUploadDate }}</p>
-          </div>
-          <div class="range">
-            <p style="width: 75px">经销商范围：</p>
-            <p style="margin-right: 10px">
-              {{ detailData.accountScope === 1 ? "共通" : "部分" }}
-            </p>
-            <p>
-              可查看经销商<span @click="showTable">{{
-                detailData.totalCount
-              }}</span
-              >家
-            </p>
-          </div>
-        </div>
-        <div class="detail">
-          <p style="width: 65px">资料描述：</p>
-          <p>{{ detailData.fileDiscription }}</p>
-        </div>
-        <div class="files">
-          <p style="width: 65px">附件：</p>
-          <div class="filesName">
-            <p
-              v-for="(item, index) in filesList"
-              :key="index"
-              @click="downloadFile(index)"
-            >
-              {{ item.fileName }}
-            </p>
-          </div>
-        </div>
-      </div>
-      <div class="table" v-show="isShowTable">
-        <div class="table_option">
-          <select @change="seletByArea" v-model="optionValue">
-            <option value="" selected>全区</option>
-            <option value="s">南区</option>
-            <option value="n">北区</option>
-            <option value="e">东区</option>
-            <option value="self">自定义分组</option>
-          </select>
-          <div class="hidTable" @click="hidTable">
-            <img src="../../../img/crossMark.png" />
-          </div>
-        </div>
-        <div class="count">
-          <Count :sum="sum"></Count>
-        </div>
-        <Table :tableData="tableData"> </Table>
-        <TablePage
-          :totalPage="totalPage"
-          :currentPage="currentPage"
-          @change_page="changePage"
-          @jump_page="jumpPage"
-        ></TablePage>
-      </div>
-    </div>
-    <div class="download">
-      <p class="download_record">下载记录</p>
-      <div class="btn">
-        <div class="current_button" @click="downloadExcel">导出</div>
-      </div>
-      <p class="tip">点击导出，查看该资料下载记录</p>
-    </div>
-  </div>
-</template>
-
-<script>
-import Table from "./RecordDetailTable";
-import Count from "../../../components/Count";
-import TablePage from "../../../components/TablePage";
-export default {
-  props: {
-    detailData: {
-      type: Object,
-      default: () => {
-        return {};
-      },
-    },
-  },
-  components: {
-    Table,
-    Count,
-    TablePage,
-  },
-  mounted() {
-    let id = this.detailData['id'];
-    let data = {informationId: id};
-    console.log(this.detailData, 11);
-    this.selectInformationFileList(data);
-  },
-  data() {
-    return {
-      isShowTable: false,
-      sum: 100, // 表格总数据
-      currentPage: 1,
-      pageSize: 20,
-      tableData: [],
-      optionValue: "",
-      filesList: []
-    };
-  },
-  computed: {
-    // 表格总页数
-    totalPage() {
-      return Math.ceil(this.sum / this.pageSize);
-    },
-  },
-  methods: {
-    showTable: function () {
-      this.isShowTable = !this.isShowTable;
-      let id = this.detailData["id"];
-      let  dataObj= {
-          informationId: id,
-        };
-      this.getDlrData(dataObj);
-    },
-    hidTable: function () {
-      this.isShowTable = false;
-    },
-    seletByArea: function () {
-      console.log(this.optionValue, 111);
-      let dataObj = {
-        localArea: ['东区', '南区']
-      }
-      this.getDlrData(dataObj); 
-    },
-    // 获取某一页面的数据，展示在表格
-    changePage: function (page) {
-      this.currentPage = page;
-      console.log(page);
-    },
-    // 点击上一页，下一页，首页，尾页
-    jumpPage: function (item) {
-      switch (item) {
-        case 1:
-          this.currentPage = 1;
-          break;
-        case 2:
-          this.currentPage = this.currentPage - 1;
-          break;
-        case 3:
-          this.currentPage = this.currentPage + 1;
-          break;
-        case 4:
-          this.currentPage = this.totalPage;
-          break;
-      }
-      console.log(this.currentPage);
-    },
-    // 下载附件
-    downloadFile: function (i) {
-      console.log(i);
-      let dataObj = {
-        fileId: this.filesList[i]['id'],
-        informationId: this.detailData['id'],
-        agentId: this.filesList[i]['informationId']
-      }
-      console.log(dataObj);
-      this.dealerDownload(dataObj);
-    },
-    // 导出文件
-    downloadExcel: function () {
-      let id = this.detailData["id"];
-      let data = {
-        informationId: id
-      }
-      this.exportTem(data);
-    },
-    // 导出   接口
-    exportTem: function (data) {
-      return new Promise((resolve, reject) => {
-        this.$http({
-          url: "/export",
-          method: "post",
-          data: data,
-          // 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 = "下载记录.xlsx";
-            document.body.appendChild(link);
-            link.click();
-            document.body.removeChild(link);
-          })
-          .catch((err) => {
-            reject(err);
-          });
-      });
-    },
-    // 分页获取所有进销商信息接口
-    getDlrData: function (dataObj={}) {
-      this.$http({
-        method: "post",
-        url: "/sys/agent/selectAgentInfoPage",
-        data: dataObj
-      })
-        .then((res) => {
-          if (res.data && res.data.code === 200) {
-            console.log(res.data.data);
-            this.tableData = res.data.data;
-            this.sum = res.data.count;
-          } else {
-            console.log(res);
-          }
-        })
-        .catch((err) => {
-          console.log(err);
-        });
-    },
-    // 文件详情  接口
-    selectInformationFileList(data) {
-      this.$http({
-        method: "post",
-        url: "/selectInformationFileList",
-        data: data
-      })
-        .then((res) => {
-          if (res.data && res.data.code === 200) {
-            this.filesList = res.data.data; 
-            console.log(res.data.data , '文件');
-          } else {
-            console.log(res);
-          }
-        })
-        .catch((err) => {
-          console.log(err);
-        });
-    },
-    // 文件下载接口
-    dealerDownload: function(data) {
-      this.$http({
-        method: "post",
-        url: "/dealerDownload",
-        data: data
-      })
-        .then((res) => {
-          if (res.data && res.data.code === 200) {
-            this.filesList = res.data.data; 
-            console.log(res.data.data , '文件下载');
-          } else {
-            console.log(res);
-          }
-        })
-        .catch((err) => {
-          console.log(err);
-        });
-    }
-  },
-};
-</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;
-          min-height: 50px;
-          display: flex;
-        }
-        .range {
-          display: flex;
-          // width: 268px;
-          min-height: 50px;
-          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;
-      }
-      .hidTable {
-        width: 41px;
-        height: 26px;
-        padding-left: 15px;
-        img {
-          width: 26px;
-          height: 26px;
-        }
-      }
-    }
-  }
-  .download {
-    padding: 10px;
-    .download_record {
-      font-size: 14px;
-    }
-    .btn {
-      margin: 20px 50px 10px;
-    }
-    .tip {
-      margin-left: 68px;
-    }
-  }
-}
-</style>
+<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>{{ detailData.informationName }}</p>
+        </div>
+        <div class="detail">
+          <p style="width: 65px">上传时间：</p>
+          <p>{{ detailData.filePulishTime }}</p>
+        </div>
+        <div class="multiDetail">
+          <div class="time">
+            <p style="width: 65px">素材时间：</p>
+            <p>{{ detailData.fileUploadDate }}</p>
+          </div>
+          <div class="range">
+            <p style="width: 75px">经销商范围：</p>
+            <p style="margin-right: 10px">
+              {{ detailData.accountScope === 1 ? "共通" : "部分" }}
+            </p>
+            <p>
+              可查看经销商<span @click="showTable">{{
+                detailData.totalCount
+              }}</span
+              >家
+            </p>
+          </div>
+        </div>
+        <div class="detail">
+          <p style="width: 65px">资料描述：</p>
+          <p>{{ detailData.fileDiscription }}</p>
+        </div>
+        <div class="files">
+          <p style="width: 65px">附件：</p>
+          <div class="filesName">
+            <p
+              v-for="(item, index) in filesList"
+              :key="index"
+              @click="downloadFile(index)"
+            >
+              {{ item.fileName }}
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="table" v-show="isShowTable">
+        <div class="table_option">
+          <select @change="seletByArea" v-model="optionValue">
+            <option value="" selected>全区</option>
+            <option value="s">南区</option>
+            <option value="n">北区</option>
+            <option value="e">东区</option>
+            <option value="self">自定义分组</option>
+          </select>
+          <div class="hidTable" @click="hidTable">
+            <img src="../../../img/crossMark.png" />
+          </div>
+        </div>
+        <div class="count">
+          <Count :sum="sum"></Count>
+        </div>
+        <Table :tableData="tableData"> </Table>
+        <TablePage
+          :totalPage="totalPage"
+          :currentPage="currentPage"
+          @change_page="changePage"
+          @jump_page="jumpPage"
+        ></TablePage>
+      </div>
+    </div>
+    <div class="download">
+      <p class="download_record">下载记录</p>
+      <div class="btn">
+        <div class="current_button" @click="downloadExcel">导出</div>
+      </div>
+      <p class="tip">点击导出，查看该资料下载记录</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import Table from "./RecordDetailTable";
+import Count from "../../../components/Count";
+import TablePage from "../../../components/TablePage";
+export default {
+  props: {
+    detailData: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  components: {
+    Table,
+    Count,
+    TablePage,
+  },
+  mounted() {
+    let id = this.detailData['id'];
+    let data = {informationId: id};
+    console.log(this.detailData, 11);
+    this.selectInformationFileList(data);
+  },
+  data() {
+    return {
+      isShowTable: false,
+      sum: 100, // 表格总数据
+      currentPage: 1,
+      pageSize: 20,
+      tableData: [],
+      optionValue: "",
+      filesList: []
+    };
+  },
+  computed: {
+    // 表格总页数
+    totalPage() {
+      return Math.ceil(this.sum / this.pageSize);
+    },
+  },
+  methods: {
+    showTable: function () {
+      this.isShowTable = !this.isShowTable;
+      let id = this.detailData["id"];
+      let  dataObj= {
+          informationId: id,
+        };
+      this.getDlrData(dataObj);
+    },
+    hidTable: function () {
+      this.isShowTable = false;
+    },
+    seletByArea: function () {
+      console.log(this.optionValue, 111);
+      let dataObj = {
+        localArea: ['东区', '南区']
+      }
+      this.getDlrData(dataObj);
+    },
+    // 获取某一页面的数据，展示在表格
+    changePage: function (page) {
+      this.currentPage = page;
+      console.log(page);
+    },
+    // 点击上一页，下一页，首页，尾页
+    jumpPage: function (item) {
+      switch (item) {
+        case 1:
+          this.currentPage = 1;
+          break;
+        case 2:
+          this.currentPage = this.currentPage - 1;
+          break;
+        case 3:
+          this.currentPage = this.currentPage + 1;
+          break;
+        case 4:
+          this.currentPage = this.totalPage;
+          break;
+      }
+      console.log(this.currentPage);
+    },
+    // 下载附件
+    downloadFile: function (i) {
+      console.log(i);
+      let dataObj = {
+        fileId: this.filesList[i]['id'],
+        informationId: this.filesList[i]['informationId'],
+        //agentId: this.filesList[i]['agentId'] 如果是厂商下载不传agentId
+      }
+      console.log(dataObj);
+      this.dealerDownload(dataObj);
+    },
+    // 导出文件
+    downloadExcel: function () {
+      let id = this.detailData["id"];
+      let data = {
+        informationId: id
+      }
+      this.exportTem(data);
+    },
+    // 导出   接口
+    exportTem: function (data) {
+      return new Promise((resolve, reject) => {
+        this.$http({
+          url: "/export",
+          method: "post",
+          data: data,
+          // 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 = "下载记录.xlsx";
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+          })
+          .catch((err) => {
+            reject(err);
+          });
+      });
+    },
+    // 分页获取所有进销商信息接口
+    getDlrData: function (dataObj={}) {
+      this.$http({
+        method: "post",
+        url: "/sys/agent/selectAgentInfoPage",
+        data: dataObj
+      })
+        .then((res) => {
+          if (res.data && res.data.code === 200) {
+            console.log(res.data.data);
+            this.tableData = res.data.data;
+            this.sum = res.data.count;
+          } else {
+            console.log(res);
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    },
+    // 文件详情  接口
+    selectInformationFileList(data) {
+      this.$http({
+        method: "post",
+        url: "/selectInformationFileList",
+        data: data
+      })
+        .then((res) => {
+          if (res.data && res.data.code === 200) {
+            this.filesList = res.data.data;
+            console.log(res.data.data , '文件');
+          } else {
+            console.log(res);
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    },
+    // 文件下载接口
+    dealerDownload: function(data) {
+      this.$http({
+        method: "post",
+        url: "/dealerDownload",
+        data: data
+      })
+        .then((res) => {
+          if (res.data.code === 200) {
+            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);
+          } else {
+            console.log(res);
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    }
+  },
+};
+</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;
+          min-height: 50px;
+          display: flex;
+        }
+        .range {
+          display: flex;
+          // width: 268px;
+          min-height: 50px;
+          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;
+      }
+      .hidTable {
+        width: 41px;
+        height: 26px;
+        padding-left: 15px;
+        img {
+          width: 26px;
+          height: 26px;
+        }
+      }
+    }
+  }
+  .download {
+    padding: 10px;
+    .download_record {
+      font-size: 14px;
+    }
+    .btn {
+      margin: 20px 50px 10px;
+    }
+    .tip {
+      margin-left: 68px;
+    }
+  }
+}
+</style>

vue.config.js

@@ -3,7 +3,8 @@ module.exports = {
     devServer: {
         proxy: {
             '/api':{
-                target:"http://8.136.230.133:8080",//这里设置你要访问的域名（或IP+端口）
+                // target:"http://8.136.230.133:8080",//这里设置你要访问的域名（或IP+端口）
+                target:"http://192.168.2.122:8080",//这里设置你要访问的域名（或IP+端口）
                 changeOrigin:true,
                 pathRewrite:{
                     '^/api': '/'