上传记录页查看详情

src/views/data/UploadRecord.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="upload_record">
+    <div v-if="!isShowDetail">
     <div class="search">
       <div class="input">
         <img src="../../img/search.png">
@@ -21,6 +22,9 @@
     <div class="table">
       <Table
         :tableData='data'
+        @download='download'
+        @delet='delet'
+        @detail='detail'
       >
       </Table>
     </div>
@@ -30,18 +34,24 @@
       @change_page='changePage'
       @jump_page='jumpPage'
     ></TablePage>
+    </div>
+    <div v-else>
+      <Detail></Detail>
+    </div>
   </div>
 </template>
 
 <script>
 import Count from '../../components/Count';
-import Table from './components/UploadRecordTable'
-import TablePage from '../../components/TablePage'
+import Table from './components/UploadRecordTable';
+import TablePage from '../../components/TablePage';
+import Detail from './components/UploadRecordDetail';
 export default {
   components: {
     Count,
     Table,
-    TablePage
+    TablePage,
+    Detail
   },
   data() {
     return {
@@ -51,18 +61,21 @@ 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'}
+        {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'}
       ],
     }
   },
   computed:{
-  // 表格总页数
-  totalPage() {
-    return Math.ceil(this.sum/this.pageSize);
+    // 表格总页数
+    totalPage() {
+      return Math.ceil(this.sum/this.pageSize);
+    },
+    isShowDetail() {
+      return (this.$route.query && this.$route.query.id) ? true : false
     }
   },
   methods: {
@@ -99,6 +112,16 @@ export default {
       }
       console.log(this.currentPage);
     },
+    download: function(i) {
+      console.log(i);
+    },
+    delet: function(i) {
+      console.log(i);
+    },
+    detail: function(i) {
+      let id = this.data[i].id || i
+      this.$router.push({ query: { id: id } });
+    }
   },
   mounted() {
   }

src/views/data/components/RecordDetailTable.vue

@@ -0,0 +1,71 @@
+<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>
+    </table>
+  </div>
+</template>
+
+<script>
+export default {
+    props: {
+        // 表数据
+        tableData: {
+            type: Array,
+            default: () => {
+                return []
+            }
+        }
+    },
+    mounted() {
+    },
+    data() {
+        return {
+        }
+    }
+};
+</script>
+
+<style scoped lang="less">
+.table_template{
+    text-align: center;
+    max-height: 300px;
+    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;
+          }
+        }
+    }
+}
+.table_gray{
+    background: #f5f5f5;
+}
+</style>

src/views/data/components/UploadRecordDetail.vue

@@ -0,0 +1,373 @@
+<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">
+            <p style="width: 65px">素材时间：</p>
+            <p>{{ dataObj.time1 }}</p>
+          </div>
+          <div class="range">
+            <p style="width: 75px">经销商范围：</p>
+            <p style="margin-right: 10px">{{ dataObj.range }}</p>
+            <p>
+              可查看经销商<span @click="showTable">{{ dataObj.sum }}</span
+              >家
+            </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 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: {},
+  components: {
+    Table,
+    Count,
+    TablePage,
+  },
+  mounted() {},
+  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: ''
+    };
+  },
+  computed: {
+    // 表格总页数
+    totalPage() {
+      return Math.ceil(this.sum / this.pageSize);
+    },
+  },
+  methods: {
+    showTable: function () {
+      this.isShowTable = !this.isShowTable;
+    },
+    hidTable: function () {
+      this.isShowTable = false;
+    },
+    seletByArea: function() {
+        console.log(this.optionValue);
+    },
+    // 获取某一页面的数据，展示在表格
+    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);
+    },
+    // 导出文件
+    downloadExcel: function() {
+        console.log('导出下载记录');
+    }
+  },
+};
+</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;
+      }
+      .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>

src/views/data/components/UploadRecordTable.vue

@@ -26,9 +26,9 @@
           </td>
           <td style="width: 15%">{{ obj.time2 }}</td>
           <td style="width: 25%" class="operation">
-            <span>下载</span>
-            <span>删除</span>
-            <span>查看详情></span>
+            <span @click="download(index)">下载</span>
+            <span @click="delet(index)">删除</span>
+            <span @click="detail(index)">查看详情></span>
           </td>
         </tr>
       </tbody>
@@ -51,6 +51,17 @@ export default {
   data() {
     return {};
   },
+  methods: {
+    download: function(i) {
+      this.$emit('download', i);
+    },
+    delet: function(i) {
+      this.$emit('delet', i);
+    },
+    detail: function(i) {
+      this.$emit('detail', i);
+    }
+  }
 };
 </script>