数据管理

src/App.vue

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

src/views/data/UploadInfor.vue

@@ -54,6 +54,7 @@
               type="checkbox"
               :value="item.sign"
               v-model="checkedBoxList"
+              @click="clickCheckbox(index)"
             /><span>{{ item.area }}</span>
           </div>
           <button @click.prevent="addByArea">添加</button>
@@ -121,9 +122,11 @@
     </div>
     <div class="uploadFile">
       <p>附件</p>
-      <p class="fileDes">{{ fileDes }}</p>
+      <div class="fileDes">
+        <p v-for="(item, index) in fileDes" :key="index">{{ item }}</p>
+      </div>
       <label for="fileInput" @change="getFileInfo($event)"
-        >导入<input type="file" name="fileName" id="fileInput"
+        >导入<input type="file" name="fileName" id="fileInput" multiple
       /></label>
     </div>
     <button @click="submit" class="submitBtn">提交</button>
@@ -161,7 +164,7 @@ export default {
       addGroupList: [], // 添加的小组
       addFlag: [true, true, true, true, true, true], // 长度等于groupList.length
       optionFlag: false, // 是否展示按小组添加的选择栏
-      fileDes: "", // 上传的文件名
+      fileDes: [], // 上传的文件名
       file: "", //上传的文件
       // 表格配置
       sum: 240, // 一共有多少条数据
@@ -207,6 +210,18 @@ export default {
     showOption() {
       this.optionFlag = !this.optionFlag;
     },
+    // 保证多选框全区和其他的多选框互斥
+    clickCheckbox(i) {
+      let list = this.checkedBoxList;
+      let include = list.indexOf('all');
+      if(i===0) {
+        this.checkedBoxList = [];
+        return
+      } 
+      if (include >= 0){
+        this.checkedBoxList.splice(0, 1)
+      }
+    },
     // 点击按区域添加button
     addByArea: function () {
       console.log(JSON.parse(JSON.stringify(this.checkedBoxList)));
@@ -295,7 +310,10 @@ export default {
     // 提交接口
     submitRequest: function () {
       let paramData = new FormData();
-      paramData.append("file", this.file);
+      this.file.forEach((item) => {
+        console.log(item , 1111111);
+        paramData.append("file", this.item);
+      })
       paramData.append("dataName", this.inforName);
       paramData.append("dataDesc", this.inforDes);
       paramData.append("sourceTime", this.materialTime);
@@ -349,9 +367,11 @@ export default {
     },
     // 获取文件名
     getFileInfo: function (event) {
-      this.fileDes = document.getElementById("fileInput").files[0].name;
-      this.file = event.target.files[0];
-      console.log(this.fileDes, this.file);
+      this.file = event.target.files;
+      this.fileDes = [];
+      this.file.forEach((item) => {
+        this.fileDes.push(item.name);
+      })
     },
     // 获取当前的月份
     getLocalMonth: function () {

src/views/data/UploadLinks.vue

@@ -1,159 +1,91 @@
 <template>
-  <div class="upload_Link_Distributor">
-  <!--   <span><b>厂商链接上传</b></span> -->
-    <div class="Head">
-      <div class="search HeadLeft">
+  <div class="upload_links">
+    <div class="header">
+      <div class="search">
         <div class="input">
           <img src="../../img/search.png" />
           <input
             type="text"
             @focus="focusInput"
             v-model="inputValue"
+            class="inputFocus"
           />
         </div>
+        <div class="area">
+          <p>所属区域</p>
+          <select v-model="areaValue">
+            <option value="">请选择</option>
+            <option v-for="(item, index) in areaLists" :key="index">
+              {{ item.area }}
+            </option>
+          </select>
+        </div>
+        <div class="time">
+          <p>请选择时间段</p>
+          <input type="date" v-model="startTime" />
+          <span>至</span>
+          <input type="date" v-model="endTime" />
+        </div>
+        <div class="current_button" @click="search">搜索</div>
       </div>
-      <div class="HeadCenter">
-        <span>所属区域</span>
-        <select name="" id="">
-          <option value="">请选择</option>
-          <option value="">汽车之家</option>
-        </select>
-      </div>
-      <div class="HeadRight">
-        <span>选择时间段</span>
-        <input type="datetimeNew" name="beginTime" placeholder="开始时间" />
-        <span>至</span>
-        <input type="datetimeNew" name="endTime" placeholder="结束时间" />
-      </div>
-      <div class="current_button" @click="search">确定</div>
     </div>
-    <div class="tableTitle"><b>针对论坛及其他平台链接上传</b></div>
-    <div class="tableBox">
-      <table class="distributorLinkTable">
-        <thead class="theadStyle">
-          <tr class="tableHeadStyle1">
-            <td style="width: 1069px">基础信息</td>
-            <td>论坛传播情况汇总</td>
-          </tr>
-          <tr class="tableHeadStyle2">
-            <td v-for="(item, index) in tableHeader" :key="index">
-              {{ item }}
-            </td>
-          </tr>
-        </thead>
-        <tbody class="bodyStyle">
-          <tr
-            class="bodyContent tableHeadStyle2"
-            v-for="(obj, index) in tableData"
-            :key="index"
-            :class="{ table_gray: !discolor && index % 2 === 0 }"
-          >
-            <td v-if="flag">{{ index + 1 }}</td>
-            <td v-for="(item, i) in obj" :key="i">{{ item }}</td>
-          </tr>
-        </tbody>
-      </table>
+    <div class="count">
+      <p>针对论坛及其它平台链接上传</p>
+      <Count :sum="sum" />
     </div>
-    <div class="pageBottom">
-      <button>导出</button>
-      <TablePage
-        :currentPage="currentPage"
-        :totalPage="totalPage"
-        @change_page="changePage"
-        @jump_page="jumpPage"
-      ></TablePage>
+    <div class="tableBox">
+      <Table :tableData="tableData"></Table>
     </div>
+
+    <TablePage
+      :currentPage="currentPage"
+      :totalPage="totalPage"
+      @change_page="changePage"
+      @jump_page="jumpPage"
+    ></TablePage>
   </div>
 </template>
 
 <script>
+import { AREASLIST } from "./uploadinfo";
 import TablePage from "../../components/TablePage";
+import Count from "../../components/Count";
+import Table from "./components/UploadLinksTable";
 export default {
-  props: {
-    isManufacturer: {
-      type: String,
-      default: "distributor",
-    },
-  },
   components: {
     TablePage,
+    Count,
+    Table,
   },
   data() {
     return {
       inputValue: "DLR Code / 经销商",
-      // 表格配置
-      sum: 240, // 一共有多少条数据
-      pageSize: 20, // 每页展示的数据
-      discolor: false, // false是隔行变色
+      sum: 120,
       currentPage: 1,
-      tableHeader: [
-        "NO.",
-        "DLR Code",
-        "经销商名称",
-        "所属区域",
-        "发布日期",
-        "资料名称",
-        "反馈日期",
-        "车系",
-        "车型",
-        "发布平台",
-        "发布版块",
-        "项目分类",
-        "内容分类1",
-        "内容分类2",
-        "标题",
-      ],
+      pageSize: 20,
       tableData: [
         {
           code: "L2021",
           name: "雷克萨斯ES上市",
-          area: "雷克萨斯ES",
-          date: "2021/03/04",
-          dataName: "雷克萨斯ES",
+          area: "北区",
+          time: "2021/03/04",
+          dataName: "雷克萨斯ES上市",
           feedbackTime: "2021/03/04",
           carSeries: "雷克萨斯ES",
           carType: "ES雷克萨斯",
-          releaseMedia: "S雷克萨斯",
-          releasePlate: "东区",
+          releaseMedia: "汽车之家",
+          releasePlate: "ES论坛",
           projectClass: "东区",
-          contentClass1: "ES雷克萨斯",
-          contentClass2: "ES雷克萨斯",
-          articleTitle: "S雷克萨斯",
-        },
-        {
-          code: "L2021",
-          name: "雷克萨斯ES上市",
-          area: "雷克萨斯ES",
-          date: "2021/03/04",
-          dataName: "雷克萨斯ES",
-          feedbackTime: "2021/03/04",
-          carSeries: "雷克萨斯ES",
-          carType: "ES雷克萨斯",
-          releaseMedia: "S雷克萨斯",
-          releasePlate: "东区",
-          projectClass: "东区",
-          contentClass1: "ES雷克萨斯",
-          contentClass2: "ES雷克萨斯",
-          articleTitle: "S雷克萨斯",
-        },
-        {
-          code: "L2021",
-          name: "雷克萨斯ES上市",
-          area: "雷克萨斯ES",
-          date: "2021/03/04",
-          dataName: "雷克萨斯ES",
-          feedbackTime: "2021/03/04",
-          carSeries: "雷克萨斯ES",
-          carType: "ES雷克萨斯",
-          releaseMedia: "S雷克萨斯",
-          releasePlate: "东区",
-          projectClass: "东区",
-          contentClass1: "ES雷克萨斯",
-          contentClass2: "ES雷克萨斯",
-          articleTitle: "S雷克萨斯",
+          contentClass: "产品",
+          contentClass2: "活动",
+          articleTitle: "雷克萨斯全新ES上市",
+          articleLink: "http://localhost:8080/#/uploadLinks",
         },
       ],
-      flag: true,
+      areaLists: AREASLIST,
+      areaValue: "",
+      startTime: "",
+      endTime: "",
     };
   },
   computed: {
@@ -163,15 +95,25 @@ export default {
     },
   },
   methods: {
+    // 当焦点在选择框时，清空选择框
     focusInput: function () {
       this.inputValue = "";
     },
     search: function () {
-      console.log(this.inputValue);
+      let data= {
+        page: this.currentPage,
+        pageSize: this.pageSize,
+        code: this.inputValue,
+        area: this.areaValue,
+        startTime: this.startTime,
+        endTime: this.areaValue
+      }
+      this.firmsLinkUpload(data);
       this.inputValue = "DLR Code / 经销商";
     },
-    getIndex: function (index) {
-      console.log("inGetIndex", index);
+    changePage: function (page) {
+      this.currentPage = page;
+      console.log(page);
     },
     // 点击上一页，下一页，首页，尾页
     jumpPage: function (item) {
@@ -189,173 +131,130 @@ export default {
           this.currentPage = this.totalPage;
           break;
       }
-      console.log(this.currentPage);
+      let data= {
+        page: this.currentPage
+      }
+      this.firmsLinkUpload(data);
     },
-    changePage: function (page) {
-      this.currentPage = page;
-      console.log(page);
+    // 获取表格数据
+    firmsLinkUpload: function (data) {
+      this.$http({
+        method: "post",
+        url: "/firmsLinkUpload",
+        data: data,
+      })
+        .then((res) => {
+          console.log(res);
+        })
+        .catch((err) => {
+          console.log(err);
+        });
     },
   },
+  created() {
+    this.firmsLinkUpload();
+  },
 };
 </script>
 
 <style scoped lang="less">
-.Head {
-  height: 55px;
-  display: flex;
-  align-items: center;
-}
-.Head span {
-  margin-right: 15px;
-}
-.tableBox {
-  width: 1030px;
-  overflow: auto;
-  text-align: center;
-}
-.tableBox table {
-  border-collapse: collapse;
-  border: none;
-}
-.table_gray {
-  background-color: #00549f;
-}
-.tableBox td {
-  border: 1px solid #ccc;
-  border-bottom: 0px;
-  border-right: 0px;
-}
-.tableBox table td {
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-}
-// 表头样式
-.theadStyle tr td {
-  color: white;
-  background-color: #8d9092;
-}
-.tableHeadStyle1 {
-  background: #848484;
-  color: #fff;
-  display: flex;
-  align-items: center;
-}
-.tableHeadStyle1 td {
-  width: 100%;
-}
-/* .tableHeadStyle1 td:nth-child(1) {
-  border-right: 0px;
-  border-bottom: 0px;
-} */
-/* .tableHeadStyle1 td:nth-child(2) {
-  border-right: 0px;
-  border-bottom: 0px;
-} */
-.tableHeadStyle2 {
-  background: #848484;
-  color: #fff;
-  display: flex;
-  align-items: center;
-}
-.tableHeadStyle2 td {
-  width: 60px;
-}
-.tableHeadStyle2 td:nth-child(10) {
-  width: 100px;
-}
-.tableHeadStyle2 td:nth-child(11) {
-  width: 100px;
-}
-.tableHeadStyle2 td:nth-child(12) {
-  width: 100px;
-}
-.tableHeadStyle2 td:nth-child(2) {
-  width: 100px;
-}
-.tableHeadStyle2 td:nth-child(3) {
-  width: 100px;
-}
-.bodyStyle {
-  display: block;
-  background-color: #fff;
-}
-/* .bodyStyle tr:nth-child(1) {
-  border-top: 0px;
-} */
-.bodyContent td {
-  background-color: #fff;
-  height: 20px;
-}
-.bodyContent td:last-child {
-  color: #027db4;
-}
-
-/* 搜索栏 */
-.search {
-  padding: 10px 15px 10px 10px;
-  display: flex;
-  align-items: center;
-  .input {
-    background-color: #fff;
-    padding: 2px;
-    display: flex;
-    img {
-      width: 16px;
-      height: 16px;
-      border: 1px solid #ccc;
-      border-radius: 4px;
+.upload_links {
+  .header {
+    padding: 10px;
+    border: 1px solid #ccc;
+    .search {
+      display: flex;
+      align-items: center;
+      .input {
+        background-color: #fff;
+        border: 1px solid #ccc;
+        padding: 2px;
+        display: flex;
+        img {
+          width: 22px;
+          height: 22px;
+          border: 1px solid #ccc;
+        }
+        input {
+          background-color: #fff;
+          border: 1px solid #ccc;
+          margin-left: 3px;
+          color: #555;
+          font-size: 12px;
+          height: 18px;
+        }
+      }
     }
-    input {
-      background-color: #fff;
-      border: 0px solid #ccc;
-      padding-left: 4px;
-      color: #555;
-      font-size: 12px;
+    .area {
+      margin-left: 20px;
+      display: flex;
+      height: 28px;
+      line-height: 28px;
+      select {
+        margin-left: 10px;
+        height: 28px;
+        width: 120px;
+        font-size: 12px;
+        color: #555;
+        border: 1px solid #ccc;
+        option {
+          font-size: 12px;
+          border: 1px solid #ccc;
+        }
+      }
+    }
+    .time {
+      display: flex;
+      margin-left: 20px;
+      p {
+        height: 28px;
+        line-height: 28px;
+        margin-right: 10px;
+      }
+      input {
+        height: 26px;
+        padding: 0;
+        outline: none;
+        border: 1px solid #ccc;
+        margin-right: 10px;
+      }
+      span {
+        height: 28px;
+        line-height: 28px;
+        margin-right: 10px;
+      }
     }
   }
+  .count {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 5px;
+    p {
+      margin-top: 10px;
+      font-weight: 600;
+    }
+  }
+  .tableBox {
+    width: 1030px;
+    overflow: auto;
+    text-align: center;
+  }
 }
-.current_button {
-  width: 58px;
-  height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 4px;
-}
-.HeadCenter span {
-  padding: 10px;
-}
-.HeadCenter select {
-  width: 80px;
-  margin-right: 15px;
-}
-.HeadRight span {
-  padding: 10px;
-}
-.HeadRight input {
-  margin-right: 15px;
-  padding-left: 4px;
-}
-.tableTitle {
-  margin-bottom: 4px;
-}
-.distributorLinkTable {
-  height: 600px;
-}
-.distributorLinkTable td {
-  height: 36px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0px 10px;
+.inputFocus {
+  outline: none;
+  border: 1px solid #ccc;
 }
-.pageBottom{
-  display: flex;
-  justify-content: space-between;
+.inputFocus:focus {
+  animation: shadowAni 200ms linear forwards;
 }
-.pageBottom button{
-  border-radius: 4px;
-  width: 80px;
+@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/UploadRecord.vue

@@ -14,8 +14,7 @@
       <Count :sum='sum'/>
       <p>排序</p>
       <select v-model="order" @change="sort">
-        <option value="">按时间排序</option>
-        <option value="ASC">按时间降序</option>
+        <option value="">按时间降序</option>
         <option value="DESC">按时间升序</option>
       </select>
     </div>
@@ -61,11 +60,11 @@ export default {
       currentPage: 1,
       pageSize: 20,
       data: [
-        {name:'雷克萨斯ES上市', time1:'2021/04',range: '共通', download1: 50, download2: 25, time2: '2021/03/10 18:19'},
-        {name:'雷克萨斯ES上市', time1:'2021/04',range: '共通', download1: 50, download2: 25, time2: '2021/03/10 18:19'},
-        {name:'雷克萨斯ES上市', time1:'2021/04',range: '共通', download1: 50, download2: 25, time2: '2021/03/10 18:19'},
-        {name:'雷克萨斯ES上市', time1:'2021/04',range: '共通', download1: 50, download2: 25, time2: '2021/03/10 18:19'},
-        {name:'雷克萨斯ES上市', time1:'2021/04',range: '共通', download1: 50, download2: 25, time2: '2021/03/10 18:19'}
+        {informationName:'雷克萨斯ES上市', filePulishTime:'2021/04',accountScope: '共通', download1: 50, downloadCount: 25, fileUploadDate: '2021/03/10 18:19'},
+        {informationName:'雷克萨斯ES上市', filePulishTime:'2021/04',accountScope: '共通', download1: 50, downloadCount: 25, fileUploadDate: '2021/03/10 18:19'},
+        {informationName:'雷克萨斯ES上市', filePulishTime:'2021/04',accountScope: '共通', download1: 50, downloadCount: 25, fileUploadDate: '2021/03/10 18:19'},
+        {informationName:'雷克萨斯ES上市', filePulishTime:'2021/04',accountScope: '共通', download1: 50, downloadCount: 25, fileUploadDate: '2021/03/10 18:19'},
+        {informationName:'雷克萨斯ES上市', filePulishTime:'2021/04',accountScope: '共通', download1: 50, downloadCount: 25, fileUploadDate: '2021/03/10 18:19'}
       ],
     }
   },
@@ -84,11 +83,21 @@ export default {
     },
     search: function() {
       console.log(this.inputValue);
+      let data = {
+        name: this.inputValue,
+        asc: true
+      }
+      this.getFirmsUploadList(data);
       this.inputValue = '请输入要搜索的资料名'
     },
     sort: function(){
       // ASC降序
-      console.log(this.order);
+      let asc = this.order === 'DESC' ? false : true;
+      let data = {
+        name: this.inputValue,
+        asc: asc
+      }
+      this.getFirmsUploadList(data);
     },
     changePage: function(page) {
       this.currentPage = page;
@@ -113,17 +122,58 @@ export default {
       console.log(this.currentPage);
     },
     download: function(i) {
-      console.log(i);
+      this.selectInformationAgentList(i);
     },
     delet: function(i) {
-      console.log(i);
+      this.deleteInformationInfo(i);
     },
     detail: function(i) {
       let id = this.data[i].id || i
       this.$router.push({ query: { id: id } });
+    },
+    // 上传记录列表接口
+    getFirmsUploadList: function(data) {
+      this.$http(({
+        methods: 'post',
+        url: '/firmsUploadList',
+        data: data
+      })).then((res) => {
+        console.log(res);
+      }).catch((err) => {
+        console.log(err);
+      })
+    },
+    // 下载资料接口
+    selectInformationAgentList: function(dataId) {
+      this.$http({
+        methods: 'post',
+        url: '/selectInformationAgentList',
+        data: {
+          id: dataId
+        }
+      }).then((res) => {
+        console.log(res);
+      }).catch((err) => {
+        console.log(err);
+      })
+    },
+    // 删除记录接口
+    deleteInformationInfo: function(dataId) {
+      this.$http({
+        method: 'post',
+        url: '/deleteInformationInfo',
+        data: {
+          dataId: dataId
+        }
+      }).then((res) => {
+        console.log(res);
+      }).catch((err) => {
+        console.log(err);
+      })
     }
   },
-  mounted() {
+  created() {
+    this.getFirmsUploadList();
   }
 }
 </script>
@@ -166,6 +216,8 @@ export default {
     }
     select{
       border: 1px solid #ccc;
+      font-size: 12px;
+      height: 30px;
     }
   }
 }

src/views/data/components/RecordDetailTable.vue

@@ -1,71 +1,73 @@
 <template>
   <div class="table_template">
     <table class="table">
-        <thead>
-            <tr>
-                <td>No.</td>
-                <td>DLR Code</td>
-                <td>经销商范围</td>
-                <td>所属区域</td>
-            </tr>
-        </thead>
-        <tbody>
-            <tr v-for="(obj, index) in tableData" :key="index" :class="{ table_gray: index%2 === 0 }">
-                <td>{{ index + 1 }}</td>
-                <td>{{obj.DLR}}</td>
-                <td>{{obj.name}}</td>
-                <td>{{obj.area}}</td>
-            </tr>
-        </tbody>
+      <thead>
+        <tr>
+          <td>No.</td>
+          <td>DLR Code</td>
+          <td>经销商范围</td>
+          <td>所属区域</td>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-for="(obj, index) in tableData"
+          :key="index"
+          :class="{ table_gray: index % 2 === 0 }"
+        >
+          <td>{{ index + 1 }}</td>
+          <td>{{ obj.DLR }}</td>
+          <td>{{ obj.name }}</td>
+          <td>{{ obj.area }}</td>
+        </tr>
+      </tbody>
     </table>
   </div>
 </template>
 
 <script>
 export default {
-    props: {
-        // 表数据
-        tableData: {
-            type: Array,
-            default: () => {
-                return []
-            }
-        }
+  props: {
+    // 表数据
+    tableData: {
+      type: Array,
+      default: () => {
+        return [];
+      },
     },
-    mounted() {
-    },
-    data() {
-        return {
-        }
-    }
+  },
+  mounted() {},
+  data() {
+    return {};
+  },
 };
 </script>
 
 <style scoped lang="less">
-.table_template{
-    text-align: center;
-    max-height: 300px;
+.table_template {
+  text-align: center;
+  max-height: 300px;
+  overflow: auto;
+  .table {
+    background-color: #fff;
+    border-collapse: collapse;
+    border: none;
+    width: 100%;
     overflow: auto;
-    .table{
-        background-color: #fff;
-        border-collapse:collapse;
-        border:none;
-        width: 100%;
-        overflow: auto;
-        td{
-            border: 1px solid #ccc;
-            width: 25%;
-            height: 29px;
-        }
-        thead{
-          td{
-            background-color: #8d9092;
-            color: #fff;
-          }
-        }
+    td {
+      border: 1px solid #ccc;
+      width: 25%;
+      height: 29px;
+    }
+    thead {
+      td {
+        background-color: #8d9092;
+        color: #fff;
+      }
     }
+  }
 }
-.table_gray{
-    background: #f5f5f5;
+.table_gray {
+  background: #f5f5f5;
 }
 </style>

src/views/data/components/UploadLinksTable.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="table">
+    <table>
+      <thead>
+        <tr>
+          <td colspan="7">基础信息</td>
+          <td colspan="8">论坛传播情况汇总</td>
+        </tr>
+        <tr>
+          <td>NO.</td>
+          <td>DLR Code</td>
+          <td>经销商名称</td>
+          <td>所属区域</td>
+          <td>发布日期</td>
+          <td>资料名称</td>
+          <td>反馈日期</td>
+          <td>车系</td>
+          <td>车型</td>
+          <td>发布平台</td>
+          <td>发布版块</td>
+          <td>项目分类</td>
+          <td>内容分类1</td>
+          <td>内容分类2</td>
+          <td>标题</td>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-for="(obj, index) in tableData"
+          :key="index"
+          :class="{ table_gray: index % 2 === 0 }"
+        >
+          <td style="width: 80px">{{ index + 1 }}</td>
+          <td>{{ obj.code }}</td>
+          <td style="width: 180px">{{ obj.name }}</td>
+          <td>{{ obj.area }}</td>
+          <td>{{ obj.time }}</td>
+          <td style="width: 180px">{{ obj.dataName }}</td>
+          <td>{{ obj.feedbackTime }}</td>
+          <td>{{ obj.carSeries }}</td>
+          <td>{{ obj.carType }}</td>
+          <td>{{ obj.releaseMedia }}</td>
+          <td>{{ obj.releasePlate }}</td>
+          <td>{{ obj.projectClass }}</td>
+          <td>{{ obj.contentClass }}</td>
+          <td>{{ obj.contentClass2 }}</td>
+          <td style="width: 240px">
+              <a :href="obj.articleLink" class="blueStyle">{{ obj.articleTitle}}</a>
+            </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    // 表数据
+    tableData: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  mounted() {},
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+
+<style scoped lang="less">
+.table {
+  background-color: #fff;
+  width: 100%;
+  margin-top: 5px;
+  text-align: center;
+  table {
+    width: 1800px;
+    border-collapse: collapse;
+    border: none;
+    thead {
+      td {
+        background: #8d9092;
+        height: 36px;
+        color: #fff;
+        border: 1px solid #ccc;
+      }
+    }
+    tbody {
+      tr {
+        background: #fff;
+      }
+      td {
+        height: 36px;
+        border: 1px solid #ccc;
+        width: 120px;
+      }
+      .operation {
+        span {
+          color: #00f;
+          margin: 0 20px;
+          &:hover {
+            cursor: pointer;
+          }
+        }
+      }
+    }
+  }
+}
+.table_gray {
+  background: #f5f5f5 !important;
+}
+.blueStyle{
+    color: #0056a0;
+    text-decoration: none;
+}
+</style>

src/views/data/components/UploadRecordDetail.vue

@@ -234,6 +234,7 @@ export default {
     },
     seletByArea: function() {
         console.log(this.optionValue);
+        this.selectInformationFileList();
     },
     // 获取某一页面的数据，展示在表格
     changePage: function (page) {
@@ -260,13 +261,41 @@ export default {
     },
     // 下载附件
     downloadFile: function(i) {
-        console.log(i);
+        this.selectInformationFileList(i)
     },
     // 导出文件
     downloadExcel: function() {
-        console.log('导出下载记录');
+        this.downloadTemplate('id');
+    },
+    // 下载文件接口
+    selectInformationFileList: function(id) {
+      this.$http({
+        method: 'post',
+        url: '/selectInformationFileList',
+        data: {
+          id: id
+        }
+      }).then((res) => {
+        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>
 

src/views/data/components/UploadRecordTable.vue

@@ -17,14 +17,14 @@
           :key="index"
           :class="{ table_gray: index % 2 === 0 }"
         >
-          <td style="width: 20%">{{ obj.name }}</td>
-          <td style="width: 10%">{{ obj.time1 }}</td>
-          <td style="width: 10%">{{ obj.range }}</td>
+          <td style="width: 20%">{{ obj.informationName }}</td>
+          <td style="width: 10%">{{ obj.filePulishTime }}</td>
+          <td style="width: 10%">{{ obj.accountScope }}</td>
           <td style="width: 10%">
             <span>{{ obj.download1 }}</span
-            >/<span style="color: #A30014">{{ obj.download2 }}</span>
+            >/<span style="color: #A30014">{{ obj.downloadCount }}</span>
           </td>
-          <td style="width: 15%">{{ obj.time2 }}</td>
+          <td style="width: 15%">{{ obj.fileUploadDate }}</td>
           <td style="width: 25%" class="operation">
             <span @click="download(index)">下载</span>
             <span @click="delet(index)">删除</span>