上传资料&&上传记录

src/App.vue

@@ -97,6 +97,7 @@ export default {
   margin: 0;
   list-style: none;
   color: #333;
+  font-size: 12px;
 }
 button{
   border: none;
@@ -112,6 +113,21 @@ button{
     cursor: pointer;
   }
 }
+.current_button{
+  background-color: #0056A0;
+  height: 30px;
+  width: 58px;
+  line-height: 30px;
+  text-align: center;
+  color: #fff;
+  font-weight: 400px;
+  font-family: Arial;
+  margin-left: 18px;
+  font-size: 14px;
+  &:hover{
+    cursor: pointer;
+  }
+}
 #app {
   background-color: #eeeeee;
   height: 100%;

src/components/LoginInfo.vue

@@ -38,8 +38,10 @@ export default {};
             width: 30px;
             height: 30px;
             img{
-                width: 30px;
-                height: 30px;
+                // width: 30px;
+                // height: 30px;
+                width: 24px;
+                height: 24px;
             }
         }
         .user_name{

src/tableConfig/uploadinfo.js

@@ -1,4 +1,30 @@
-const AREASLIST = ['全区', '北区', '南区', '东区', '自定义分组'];
+const AREASLIST = [
+    {
+        sign: 'all',
+        area: '全区',
+        checked: false
+    },
+    {
+        sign: 'n',
+        area: '北区',
+        checked: false
+    },
+    {
+        sign: 's',
+        area: '南区',
+        checked: false
+    },
+    {
+        sign: 'e',
+        area: '东区',
+        checked: false
+    },
+    {
+        sign: 'self',
+        area: '自定义分组',
+        checked: false
+    }
+]
 const MATERIALTIMESLIST = ['2021/03', '2021/04'];
 const TABLEHEADS = ['序号', '经销商名称', 'DLR Code', '所属区域', '筛选'];
 const TABLEHEADSTYLES = {

src/views/data/UploadInfor.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="upload_record">
+  <div class="upload_infor">
     <form>
       <div class="dataName">
         <span>资料名称</span><input type="text" class="inputStyle focusStyle" v-model="inforName" @focus="hideTip" @blur="checkName()">
@@ -27,10 +27,10 @@
         <p>权限设置</p>
         <div class="addByArea">
           <span>按区域添加</span>
-          <div v-for="(area, index) in areaList" :key="index">
-            <input type="checkbox" value=""><span>{{area}}</span>
+          <div v-for="(item, index) in areaList" :key="index">
+            <input type="checkbox" :value="item.sign" v-model="checkedBoxList"><span>{{item.area}}</span>
           </div>
-          <button @click="addByArea">添加</button>
+          <button @click.prevent="addByArea">添加</button>
         </div>
         <div class="addByCustomize">
           <span>自定义添加</span>
@@ -39,8 +39,8 @@
             <option value="BMW"/>
             <option value="Ford"/>
             <option value="Volvo"/>
-            </datalist>
-          <button>添加</button>
+          </datalist>
+          <button @click.prevent="addBySelf">添加</button>
         </div>
         <div class="addByGroup">
           <span>按小组添加</span>
@@ -56,7 +56,7 @@
               </ul>
             </div>
           </div>
-          <button>添加</button>
+          <button @click.prevent="addByGroup">添加</button>
         </div>
       </div>
     </form>
@@ -85,7 +85,8 @@
     </div>
     <div class="uploadFile">
       <p>附件</p>
-      <input type="file" name="fileName" id="fileInput">
+      <p class="fileDes">{{fileDes}}</p>
+      <label for="fileInput" @change="getFileInfo">导入<input type="file" name="fileName" id="fileInput"></label>
     </div>
     <button @click="submit" class="submitBtn">提交</button>
   </div>
@@ -125,9 +126,12 @@ export default {
       inforDes: '',
       materialTime: '',
       scope: '',
+      checkedBoxList: [], // 多选框选中的值
       addByCustomize: '',
+      addGroupList: [], // 添加的小组
       addFlag: [true, true, true, true, true, true], // 长度等于groupList.length
       optionFlag: false, // 是否展示按小组添加的选择栏
+      fileDes: '', // 上传的文件名
       // 表格配置
       sum: 240, // 一共有多少条数据
       pageSize: 20, // 每页展示的数据
@@ -176,7 +180,11 @@ export default {
     },
     // 点击按区域添加button
     addByArea: function() {
-      console.log()
+      console.log(this.checkedBoxList);
+    },
+    // 自定义添加
+    addBySelf: function() {
+      console.log(this.addByCustomize);
     },
     // 按小组添加，增加小组
     addGroup: function(index) {
@@ -189,6 +197,16 @@ export default {
       this.addFlag.splice(index, 1, true);
       // 删除数据
     },
+    // 点击按按小组添加按钮
+    addByGroup: function() {
+      this.addFlag.forEach((item, index) => {
+        if(!item) {
+          this.addGroupList.push(this.groupList[index]);
+        }
+      });
+      console.log(JSON.parse(JSON.stringify(this.addGroupList)));
+      this.optionFlag = false;
+    },
     // 筛选
     changeIcon: function(i) {
       this.imgFlag.splice(i,1,!this.imgFlag[i]);
@@ -240,6 +258,7 @@ export default {
         console.log(this.tableData);
         const file = document.getElementById('fileInput').value;
         console.log(file);
+        // console.log(document.getElementById('fileInput').files[0].name);
       }
     },
     // 接口请求
@@ -257,13 +276,18 @@ export default {
       // })
       // console.log(this.inforName, this.inforDes, this.materialTime, this.scope, this.addByCustomize, File.size);
       // console.log(FileList.);
+    },
+    // 获取文件名
+    getFileInfo: function() {
+      this.fileDes = document.getElementById('fileInput').files[0].name
+      console.log(this.fileDes);
     }
   }
 }
 </script>
 
 <style scoped lang="less">
-.upload_record{
+.upload_infor{
   form{
     border: 1px solid #ccc;
     padding: 10px;
@@ -417,9 +441,21 @@ export default {
       height: 20px;
       line-height: 20px;
     }
-    input{
+    .fileDes{
+      width: 100px;
+      overflow: hidden;
+    }
+    label{
       height: 30px;
       line-height: 30px;
+      width: 56px;
+      background-color: #0056a0;
+      color: #fff;
+      text-align: center;
+      font-size: 14px;
+      input{
+        display: none;
+      }
     }
   }
   .submitBtn{

src/views/data/UploadRecord.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="upload_record">
+    <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="ASC">按时间降序</option>
+        <option value="DESC">按时间升序</option>
+      </select>
+    </div>
+    <div class="table">
+      <Table
+        :tableData='data'
+      >
+      </Table>
+    </div>
+  </div>
+</template>
+
+<script>
+import Count from '../../components/Count';
+import Table from './components/UploadRecordTable'
+export default {
+  components: {
+    Count,
+    Table
+  },
+  data() {
+    return {
+      inputValue: '请输入要搜索的资料名',
+      order: '', // 排序方式
+      sum: '100', // 表格总数据
+      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'}
+      ],
+    }
+  },
+  methods: {
+    focusInput: function() {
+      this.inputValue = '';
+    },
+    search: function() {
+      console.log(this.inputValue);
+      this.inputValue = '请输入要搜索的资料名'
+    },
+    sort: function(){
+      // ASC降序
+      console.log(this.order);
+    }
+  },
+  mounted() {
+  }
+}
+</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;
+    p{
+      margin: 0 5px 0 15px;
+    }
+  }
+}
+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/UploadRecordTable.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="table">
+    <table>
+        <thead>
+            <tr>
+                <td>资料名称</td>
+                <td >素材时间</td>
+                <td>经销商范围</td>
+                <td>下载量</td>
+                <td>上传时间</td>
+                <td>操作</td>
+            </tr>
+        </thead>
+        <tbody>
+            <tr v-for="(obj, index) in tableData" :key="index" :class="{ table_gray: index%2 === 0 }">
+                <td>{{obj.name}}</td>
+                <td>{{obj.time1}}</td>
+                <td>{{obj.range}}</td>
+                <td><span>{{obj.download1}}</span>/<span>{{obj.download2}}</span></td>
+                <td>{{obj.time2}}</td>
+            </tr>
+        </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+export default {
+    props: {
+        // 表数据
+        tableData: {
+            type: Array,
+            default: () => {
+                return []
+            }
+        }
+    },
+    mounted() {
+    },
+    data() {
+        return {
+        }
+    }
+};
+</script>
+
+<style scoped lang="less">
+.table{
+    background-color: #fff;
+    border-collapse:collapse;
+    border:none;
+    width: 100%;
+    td{
+        border: 1px solid #ccc;
+    }
+        span{
+            &:hover{
+                cursor: pointer;
+            }
+        }
+}
+.table_gray{
+    background: #f5f5f5;
+}
+</style>