参数设置子路由&&上传资料页面修改

src/components/Table.vue

@@ -3,7 +3,7 @@
     <table class="table">
         <thead>
             <tr :style="tableHeadStyle">
-                <td v-for="(item, index) in tableHeader" :key="index">{{ item }}</td>
+                <td v-for="(item, index) in tableHeader" :key="index" :style="tableHeadStyle">{{ item }}</td>
             </tr>
         </thead>
         <tbody>
@@ -107,6 +107,7 @@ export default {
         background-color: #fff;
         border-collapse:collapse;
         border:none;
+        width: 100%;
         td{
             border: 1px solid #ccc;
         }

src/router/index.js

@@ -12,6 +12,18 @@ import InforList from '../views/data/InforList.vue'
 import AccountIndex from '../views/account/AccountIndex.vue'
 // 参数设置
 import ParameterIndex from '../views/parameter/ParameterIndex.vue'
+// 车系车型
+import CarSeries from '../views/parameter/CarSeries'
+// 平台模块
+import PlatformModule from '../views/parameter/PlatformModule'
+//内容分类1
+import ContentCategory1 from '../views/parameter/ContentCategory1'
+//内容分类2
+import ContentCategory2 from '../views/parameter/ContentCategory2'
+// 媒体平台
+import MediaPlatform  from '../views/parameter/MediaPlatform'
+// 链接上传
+import LinkUpload  from '../views/parameter/LinkUpload'
 
 Vue.use(VueRouter)
 
@@ -43,7 +55,38 @@ const routes = [
   },
   {
     path: '/parameterIndex',
-    component: ParameterIndex
+    component: ParameterIndex,
+    children: [
+      {
+        path: '',
+        component: CarSeries,
+        redirect: 'carSeries'
+      },
+      {
+        path: 'carSeries',
+        component: CarSeries
+      },
+      {
+        path: 'platformModule',
+        component: PlatformModule
+      },
+      {
+        path: 'contentCategory1',
+        component: ContentCategory1
+      },
+      {
+        path: 'contentCategory2',
+        component: ContentCategory2
+      },
+      {
+        path: 'mediaPlatform',
+        component: MediaPlatform
+      },
+      {
+        path: 'linkUpload',
+        component: LinkUpload
+      }
+    ]
   }
 ]
 

src/tableConfig/parameter.js

@@ -0,0 +1,36 @@
+const TAG = [
+    {
+        num: 1,
+        title: '车系车型',
+        path: 'carSeries'
+    },
+    {
+        num: 2,
+        title: '平台模块',
+        path: 'platformModule'
+    },
+    {
+        num: 3,
+        title: '内容分类1',
+        path: 'contentCategory1'
+    },
+    {
+        num: 4,
+        title: '内容分类2',
+        path: 'contentCategory2'
+    },
+    {
+        num: 5,
+        title: '媒体平台',
+        path: 'mediaPlatform'
+    },
+    {
+        num: 6,
+        title: '链接上传',
+        path: 'linkUpload'
+    }
+]
+
+module.exports = {
+    TAG
+}

src/tableConfig/uploadinfo.js

@@ -0,0 +1,32 @@
+const AREASLIST = ['全区', '北区', '南区', '东区', '自定义分组'];
+const RANGESLIST = ['共通', '部分'];
+const MATERIALTIMESLIST = ['2021/03', '2021/04'];
+const TABLEHEADS = ['序号', '经销商名称', '结案材料审核', '所属区域', '筛选'];
+const TABLEHEADSTYLES = {
+    background: '#8D9092',
+    height: '30px',
+    color: '#fff'
+};
+const OPERATIONS = [
+    {
+        name: '查看',
+        function: () => {
+          alert(1)
+        }
+    }
+];
+const TRSSTYLE =  {
+    width: '20%',
+    height: '30px'
+};
+const GROUPLISTS = ['第一小组', '第二小组', '第三小组', '第四小组', '第五小组', '第六小组'];
+module.exports = {
+    AREASLIST,
+    RANGESLIST,
+    MATERIALTIMESLIST,
+    TABLEHEADS,
+    TABLEHEADSTYLES,
+    OPERATIONS,
+    TRSSTYLE,
+    GROUPLISTS
+}

src/views/data/UploadInfor.vue

@@ -39,7 +39,8 @@
         <div class="addByGroup">
           <span>按小组添加</span>
           <select name="" id="">
-            <option value="">请选择</option>
+            <option>请选择</option>
+            <option v-for="(group, index) in groupList" :key="index" :value="group">{{group}}</option>
           </select>
           <button>添加</button>
         </div>
@@ -66,6 +67,10 @@
         @jump_page='jumpPage'
       />
     </div>
+    <div class="uploadFile">
+      <p>附件</p>
+      <input type="file" :v-model="fileValue" name="fileName" @change='changeFile()'>
+    </div>
     <button @click="submit" class="submitBtn">提交</button>
   </div>
 </template>
@@ -74,6 +79,7 @@
 import UpLoadTable from '../../components/Table';
 import Count from '../../components/Count';
 import Tablepage from '../../components/TablePage';
+import { AREASLIST, RANGESLIST, MATERIALTIMESLIST, TABLEHEADS,TABLEHEADSTYLES, OPERATIONS, TRSSTYLE, GROUPLISTS } from '../../tableConfig/uploadinfo';
 export default {
   props:{
     isManufacturer: {
@@ -93,33 +99,22 @@ export default {
       materialTime: '',
       range: '',
       addByCustomize: '',
+      fileValue: '',
       // 表格配置
       sum: 240, // 一共有多少条数据
       pageSize: 20, // 每页展示的数据
       discolor: false, // 是否隔行变色
       currentPage: 1,
-      areaList: ['全区', '北区', '南区', '东区', '自定义分组'],
-      materialTimeList: ['2020-03', '2020-04'],
-      rangeList: ['1', '2', '3'],
-      tableHeader: ['序号', '经销商名称', 'DLR Code', '所属区域', '筛选'],
+      areaList: AREASLIST, // 按区域添加
+      groupList: GROUPLISTS, // 按小组添加
+      materialTimeList: MATERIALTIMESLIST, // 素材时间
+      rangeList: RANGESLIST, // 经销商范围
+      tableHeader: TABLEHEADS, // 表头
       tableData: [{name: '北京博瑞',code: 'L020',area: '东区'},{name: 'a',code: 'a',area: 'N'},{name: 'a',code: 'a',area: 'N'}],
-      tableHeadStyle: {
-        background: '#848484',
-        height: '30px',
-        color: '#fff'
-      },
-      operation: [
-        {
-          name: '查看',
-          function: () => {
-            this.showDetail();
-          }
-        }
-      ],
-      trStyle: {
-        width: '200px',
-        height: '30px'
-      }
+      tableHeadStyle: TABLEHEADSTYLES, // 表头样式
+      operation: OPERATIONS, // 操作
+      trStyle: TRSSTYLE // 表格tr样式
+      // 文件
     }
   },
   computed:{
@@ -156,17 +151,34 @@ export default {
       console.log(this.currentPage);
     },
     submit: function() {
-      console.log(this.totalPage);
-      this.sum = this.sum + 1;
-      console.log(this.inforName, this.inforDes, this.materialTime, this.range, this.addByCustomize);
-    } 
+      // this.$http({
+      //   method: 'post',
+      //   url: '/auth/checkSign',
+      //   data: {
+      //     token: token
+      //   }
+      // }).then(() => {
+      //   console.log(res);
+      // }).catch((err) => {
+      //   console.log(err);
+      // })
+      // console.log(this.inforName, this.inforDes, this.materialTime, this.range, this.addByCustomize, File.size);
+      // console.log(FileList.);
+    },
+    //
+    changeFile(){
+      console.log(123);
+    }
   }
 }
 </script>
 
 <style scoped lang="less">
 .upload_record{
-  padding: 12px 30px;
+  form{
+    border: 1px solid #ccc;
+    padding: 10px;
+  }
   .inforDes{
     margin: 10px 0 0 0;
     span{
@@ -239,6 +251,21 @@ export default {
     display: flex;
     justify-content: flex-end;
   }
+  .uploadFile{
+    display: flex;
+    margin-top: 35px;
+    height: 30px;
+    align-items: center;
+    p{
+      margin-right: 20px;
+      height: 20px;
+      line-height: 20px;
+    }
+    input{
+      height: 30px;
+      line-height: 30px;
+    }
+  }
   .submitBtn{
     margin-top: 50px;
   }

src/views/parameter/CarSeries.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="car_series">
+      车型车系
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+    }
+  },
+  mounted() {
+  }
+}
+</script>
+
+<style scoped lang="less">
+
+</style>

src/views/parameter/ContentCategory1.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="car_series">
+      内容分类1
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+    }
+  },
+  mounted() {
+  }
+}
+</script>
+
+<style scoped lang="less">
+
+</style>

src/views/parameter/ContentCategory2.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="car_series">
+      内容分类2
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+    }
+  },
+  mounted() {
+  }
+}
+</script>
+
+<style scoped lang="less">
+
+</style>

src/views/parameter/LinkUpload.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="car_series">
+      链接上传
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+    }
+  },
+  mounted() {
+  }
+}
+</script>
+
+<style scoped lang="less">
+
+</style>

src/views/parameter/MediaPlatform.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="car_series">
+      媒体平台
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+    }
+  },
+  mounted() {
+  }
+}
+</script>
+
+<style scoped lang="less">
+
+</style>

src/views/parameter/ParameterIndex.vue

@@ -1,14 +1,68 @@
-<template>
-  <div class="upload_record">
-    <h1>参数设置</h1>
-  </div>
-</template>
-
-<script>
-export default {
-}
-</script>
-
-<style scoped lang="less">
-
-</style>
+<template>
+  <div class="parameter_index">
+    <div class="parameter_tag">
+      <div
+        class="tag"
+        v-for="(tag, index) in tagslist" :key="index"
+        :class="{selected: '/parameterIndex/' + tag.path === childRouter}"
+      >
+        <router-link :to="'/parameterIndex/' + tag.path" tag="li" class="title">{{tag.title}}</router-link>
+      </div>
+    </div>
+    <div class="parameter_table">
+      <router-view/>
+    </div>
+  </div>
+</template>
+
+<script>
+import { TAG } from '../../tableConfig/parameter';
+// import CarSeries from './CarSeries';
+export default {
+  components:{
+    // CarSeries
+  },
+  data() {
+    return {
+      tagslist: TAG
+    }
+  },
+  computed: {
+    childRouter: function() {
+      return this.$route.path
+    }
+  },
+  methods: {
+  },
+  mounted() {
+  }
+}
+</script>
+
+<style scoped lang="less">
+.parameter_index{
+  .parameter_tag{
+    display: flex;
+    justify-content: space-around;
+    border: 1px solid #ccc;
+    padding: 10px;
+    .tag{
+      width: 90px;
+      height: 30px;
+      background-color: #848484;
+      line-height: 30px;
+      text-align: center;
+      border-radius: 5px;
+      &:hover{
+        cursor: pointer;
+      }
+      li{
+        color: #fff;
+      }
+    }
+    .selected{
+      background-color: #0056A0;
+    }
+  }
+}
+</style>

src/views/parameter/PlatformModule.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="car_series">
+      平台模块
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+    }
+  },
+  mounted() {
+  }
+}
+</script>
+
+<style scoped lang="less">
+
+</style>