改变tab栏需求

src/components/tabLeft.vue

@@ -2,9 +2,9 @@
 <template>
     <div class="left">
       <ul>
-        <li :class="{active:ind===index}" v-for="(item, index) in tabList" :key="index" @click="skip(index)">
+        <li :class="{active:ind===item.id}" v-for="(item, index) in tabList" :key="index" @click="skip(item.id)">
           <i class="el-icon-edit"></i>
-          {{ item }}
+          {{ item.name }}
         </li>
       </ul>
     </div>
@@ -23,12 +23,12 @@ export default {
   data () {
     return {
       tabList: [
-        '藏品登记',
-        '入库管理',
-        '出库管理',
-        '藏品总账',
-        '藏品盘核',
-        '藏品注销'
+        { name: '藏品登记', id: 0 },
+        { name: '藏品总账', id: 3 },
+        { name: '入库管理', id: 1 },
+        { name: '出库管理', id: 2 },
+        { name: '藏品盘核', id: 4 },
+        { name: '藏品注销', id: 5 }
       ]
     }
   },

src/components/tabLeft3.vue

@@ -23,8 +23,8 @@ export default {
   data () {
     return {
       tabList: [
-        '统计报表',
-        '馆藏数量'
+        '库房设置',
+        '统计报表'
       ]
     }
   },

src/components/tabLeft4.vue

@@ -2,9 +2,9 @@
 <template>
     <div class="left">
       <ul>
-        <li :class="{active:ind===index}" v-for="(item, index) in tabList" :key="index" @click="skip(index)">
+        <li :class="{active:ind===item.id}" v-for="(item, index) in tabList" :key="index" @click="skip(item.id)">
           <i class="el-icon-edit"></i>
-          {{ item }}
+          {{ item.name }}
         </li>
       </ul>
     </div>
@@ -23,10 +23,8 @@ export default {
   data () {
     return {
       tabList: [
-        '库房设置',
-        '数据字典',
-        '用户管理',
-        '系统日志'
+        { name: '用户管理', id: 2 },
+        { name: '系统日志', id: 1 }
       ]
     }
   },

src/router/index.js

@@ -182,12 +182,6 @@ const router = new VueRouter({
 
         // 系统管理
         {
-          name: 'system0',
-          path: 'system0',
-          meta: { myInd: 4 },
-          component: () => import('@/views/system/system0.vue')
-        },
-        {
           name: 'system1',
           path: 'system1',
           meta: { myInd: 4 },
@@ -198,12 +192,6 @@ const router = new VueRouter({
           path: 'system2',
           meta: { myInd: 4 },
           component: () => import('@/views/system/system2.vue')
-        },
-        {
-          name: 'system3',
-          path: 'system3',
-          meta: { myInd: 4 },
-          component: () => import('@/views/system/system3.vue')
         }
       ]
     }

src/utils/request.js

@@ -1,8 +1,8 @@
 import axios from 'axios'
 // export const baseURL = '666初始地址'
 const service = axios.create({
-  // baseURL: 'http://192.168.0.135:8006',
-  baseURL: '',
+  baseURL: 'http://192.168.0.135:8006',
+  // baseURL: '',
   timeout: 5000
 })
 

src/views/layout/index.vue

@@ -17,7 +17,7 @@
                @mouseenter='isShow = index'
                >
             <li v-for="(val, ind) in item.son" :key="ind"
-                @click="skip(item,ind)">{{ val }}</li>
+                @click="skip(item,val.id)">{{ val.name }}</li>
           </ul>
         </a>
         </div>
@@ -66,28 +66,28 @@ export default {
           name: '馆藏管理',
           push: '/layout/holding',
           son: [
-            '藏品登记',
-            '入库管理',
-            '出库管理',
-            '藏品总账',
-            '藏品盘核',
-            '藏品注销'
+            { name: '藏品登记', id: 0 },
+            { name: '藏品总账', id: 3 },
+            { name: '入库管理', id: 1 },
+            { name: '出库管理', id: 2 },
+            { name: '藏品盘核', id: 4 },
+            { name: '藏品注销', id: 5 }
           ]
         },
         {
-          name: '征集品管理',
+          name: '征集管理',
           push: '/layout/collect',
-          son: ['征集品总账', '征集品提用', '征集品注销']
+          son: [{ name: '征集品总账', id: 0 }, { name: '征集品提用', id: 1 }, { name: '征集品注销', id: 2 }]
         },
         {
           name: '馆藏统计',
           push: '/layout/statistics',
-          son: ['统计报表', '馆藏数量']
+          son: [{ name: '库房设置', id: 0 }, { name: '统计报表', id: 1 }]
         },
         {
           name: '系统管理',
           push: '/layout/system',
-          son: ['库房设置', '数据字典', '用户管理', '系统日志']
+          son: [{ name: '用户管理', id: 2 }, { name: '系统日志', id: 1 }]
         }
       ]
     }

src/views/statistics/statistics0.vue

@@ -7,10 +7,67 @@
         <el-breadcrumb separator="/">
           <el-breadcrumb-item to="">首页</el-breadcrumb-item>
           <el-breadcrumb-item to="">馆藏统计</el-breadcrumb-item>
-          <el-breadcrumb-item id="mytitle">统计报表</el-breadcrumb-item>
+          <el-breadcrumb-item id="mytitle">库房设置</el-breadcrumb-item>
         </el-breadcrumb>
       </div>
-      <div class="conten"></div>
+      <div class="conten">
+        <div class="conten_left">
+          <div class="btn">
+            <el-button type="primary">新建库区</el-button>
+            <el-button type="danger">删除</el-button>
+          </div>
+          <div class="title">
+            <i class="el-icon-arrow-down" v-if="0"></i>
+            <i class="el-icon-arrow-up" v-else></i>
+            <span>一号库区</span>
+            <i class="el-icon-plus tiny"></i>
+            <i class="el-icon-edit tiny"></i>
+          </div>
+          <ul class="area">
+            <li>库房A 编号：000668</li>
+            <li>库房A 编号：000668</li>
+          </ul>
+        </div>
+        <div class="conten_right">
+          <div class="title">
+            <b>库房A</b>
+            <span>仓库编号：000668</span>
+            <i class="el-icon-plus"></i>
+            <i class="el-icon-edit"></i>
+            <i class="el-icon-delete"></i>
+          </div>
+          <!-- 表格 -->
+          <div class="table">
+          <el-table
+            :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
+            :data="tableData"
+            border
+            style="width: 100%"
+          >
+            <el-table-column prop="name" label="货架编号" width="150"></el-table-column>
+            <el-table-column prop="name" label="货架名称" width="150"></el-table-column>
+            <el-table-column prop="name" label="行数" width="100"></el-table-column>
+            <el-table-column prop="name" label="列数" width="100"></el-table-column>
+            <el-table-column prop="address" label="备注"></el-table-column>
+            <el-table-column label="操作" width="140">
+              <template #default>
+                  <i class="el-icon-edit"></i>
+                  <i class="el-icon-delete"></i>
+              </template>
+            </el-table-column>
+          </el-table>
+          </div>
+          <!-- 分页器 -->
+          <div class="paging">
+            <el-pagination
+              background
+              layout="prev, pager, next,sizes,jumper"
+              :total="30"
+            >
+            </el-pagination>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -18,13 +75,25 @@
 <script>
 import TabList from '@/components/tabLeft3.vue'
 export default {
-  name: 'statistics0',
+  name: 'system0',
   // import引入的组件需要注入到对象中才能使用
   components: { TabList },
   data () {
     // 这里存放数据
     return {
-
+      // 表格数据
+      tableData: [
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }
+      ]
     }
   },
   // 监听属性 类似于data概念
@@ -71,8 +140,97 @@ export default {
   }
   .conten {
     flex: 1;
+    display: flex;
     background-color: #fff;
     margin: 20px 20px 40px;
+    padding: 30px 60px 0;
+    .conten_left {
+      width: 380px;
+      height: 650px;
+      border: 1px solid #ccc;
+      margin-right: 30px;
+      .btn {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 80px;
+      }
+      .title {
+        display: flex;
+        align-items: center;
+        height: 55px;
+        background-color: #f2f2f2;
+        color: black;
+        & > span {
+          margin: 0 170px 0 20px;
+        }
+        & > i {
+          cursor: pointer;
+          font-size: 30px;
+        }
+        .tiny {
+          margin: 0 10px;
+          font-size: 24px;
+          color: #a5acb3;
+        }
+      }
+      .area {
+        color: black;
+        li {
+          cursor: pointer;
+          width: 100%;
+          height: 33px;
+          line-height: 33px;
+          text-align: center;
+        }
+        li:hover {
+          color: #1890ff;
+        }
+        .active {
+          color: #1890ff;
+        }
+      }
+    }
+    .conten_right {
+      position: relative;
+      .table{
+        max-height: 500px;
+        overflow: auto;
+        i {
+          cursor: pointer;
+          font-size: 24px;
+          color: black;
+          margin-left: 15px;
+        }
+      }
+      .paging{
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        bottom: 20px;
+      }
+      flex: 1;
+      height: 650px;
+      border: 1px solid #ccc;
+      .title{
+        height: 75px;
+        color: black;
+        display: flex;
+        align-items: center;
+        &>b{
+          font-size: 24px;
+          margin: 0 20px;
+        }
+        &>span {
+          margin-right: 20px;
+        }
+        &>i {
+          cursor: pointer;
+          font-size: 24px;
+          margin: 0 10px;
+        }
+      }
+    }
   }
 }
 </style>

src/views/statistics/statistics1.vue

@@ -7,7 +7,7 @@
         <el-breadcrumb separator="/">
           <el-breadcrumb-item to="">首页</el-breadcrumb-item>
           <el-breadcrumb-item to="">馆藏统计</el-breadcrumb-item>
-          <el-breadcrumb-item id="mytitle">馆藏数量</el-breadcrumb-item>
+          <el-breadcrumb-item id="mytitle">统计报表</el-breadcrumb-item>
         </el-breadcrumb>
       </div>
       <div class="conten"></div>

src/views/system/system0.vue

@@ -1,233 +0,0 @@
-<template>
-  <div class="system0">
-    <TabList />
-    <div class="right">
-      <div class="top">
-        <el-breadcrumb separator="/">
-          <el-breadcrumb-item to="">首页</el-breadcrumb-item>
-          <el-breadcrumb-item to="">系统管理</el-breadcrumb-item>
-          <el-breadcrumb-item id="mytitle">库房设置</el-breadcrumb-item>
-        </el-breadcrumb>
-      </div>
-      <div class="conten">
-        <div class="conten_left">
-          <div class="btn">
-            <el-button type="primary">新建库区</el-button>
-            <el-button type="danger">删除</el-button>
-          </div>
-          <div class="title">
-            <i class="el-icon-arrow-down" v-if="0"></i>
-            <i class="el-icon-arrow-up" v-else></i>
-            <span>一号库区</span>
-            <i class="el-icon-plus tiny"></i>
-            <i class="el-icon-edit tiny"></i>
-          </div>
-          <ul class="area">
-            <li>库房A 编号：000668</li>
-            <li>库房A 编号：000668</li>
-          </ul>
-        </div>
-        <div class="conten_right">
-          <div class="title">
-            <b>库房A</b>
-            <span>仓库编号：000668</span>
-            <i class="el-icon-plus"></i>
-            <i class="el-icon-edit"></i>
-            <i class="el-icon-delete"></i>
-          </div>
-          <!-- 表格 -->
-          <div class="table">
-          <el-table
-            :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
-            :data="tableData"
-            border
-            style="width: 100%"
-          >
-            <el-table-column prop="name" label="货架编号" width="150"></el-table-column>
-            <el-table-column prop="name" label="货架名称" width="150"></el-table-column>
-            <el-table-column prop="name" label="行数" width="100"></el-table-column>
-            <el-table-column prop="name" label="列数" width="100"></el-table-column>
-            <el-table-column prop="address" label="备注"></el-table-column>
-            <el-table-column label="操作" width="140">
-              <template #default>
-                  <i class="el-icon-edit"></i>
-                  <i class="el-icon-delete"></i>
-              </template>
-            </el-table-column>
-          </el-table>
-          </div>
-          <!-- 分页器 -->
-          <div class="paging">
-            <el-pagination
-              background
-              layout="prev, pager, next,sizes,jumper"
-              :total="30"
-            >
-            </el-pagination>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import TabList from '@/components/tabLeft4.vue'
-export default {
-  name: 'system0',
-  // import引入的组件需要注入到对象中才能使用
-  components: { TabList },
-  data () {
-    // 这里存放数据
-    return {
-      // 表格数据
-      tableData: [
-        {
-          date: '2016-05-03',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        },
-        {
-          date: '2016-05-02',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        }
-      ]
-    }
-  },
-  // 监听属性 类似于data概念
-  computed: {},
-  // 监控data中的数据变化
-  watch: {},
-  // 方法集合
-  methods: {},
-  // 生命周期 - 创建完成（可以访问当前this实例）
-  created () {},
-  // 生命周期 - 挂载完成（可以访问DOM元素）
-  mounted () {},
-  beforeCreate () {}, // 生命周期 - 创建之前
-  beforeMount () {}, // 生命周期 - 挂载之前
-  beforeUpdate () {}, // 生命周期 - 更新之前
-  updated () {}, // 生命周期 - 更新之后
-  beforeDestroy () {}, // 生命周期 - 销毁之前
-  destroyed () {}, // 生命周期 - 销毁完成
-  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
-}
-</script>
-<style lang='less' scoped>
-//@import url(); 引入公共css类
-.system0 {
-  /deep/#mytitle > span {
-    font-weight: 800;
-  }
-  display: flex;
-  .right {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    .top {
-      padding-left: 35px;
-      display: flex;
-      align-items: center;
-      box-shadow: 1px 1px 10px 1px;
-      margin-left: 2px;
-      height: 40px;
-      background-color: #fff;
-    }
-  }
-  .conten {
-    flex: 1;
-    display: flex;
-    background-color: #fff;
-    margin: 20px 20px 40px;
-    padding: 30px 60px 0;
-    .conten_left {
-      width: 380px;
-      height: 650px;
-      border: 1px solid #ccc;
-      margin-right: 30px;
-      .btn {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        height: 80px;
-      }
-      .title {
-        display: flex;
-        align-items: center;
-        height: 55px;
-        background-color: #f2f2f2;
-        color: black;
-        & > span {
-          margin: 0 170px 0 20px;
-        }
-        & > i {
-          cursor: pointer;
-          font-size: 30px;
-        }
-        .tiny {
-          margin: 0 10px;
-          font-size: 24px;
-          color: #a5acb3;
-        }
-      }
-      .area {
-        color: black;
-        li {
-          cursor: pointer;
-          width: 100%;
-          height: 33px;
-          line-height: 33px;
-          text-align: center;
-        }
-        li:hover {
-          color: #1890ff;
-        }
-        .active {
-          color: #1890ff;
-        }
-      }
-    }
-    .conten_right {
-      position: relative;
-      .table{
-        max-height: 500px;
-        overflow: auto;
-        i {
-          cursor: pointer;
-          font-size: 24px;
-          color: black;
-          margin-left: 15px;
-        }
-      }
-      .paging{
-        position: absolute;
-        left: 50%;
-        transform: translateX(-50%);
-        bottom: 20px;
-      }
-      flex: 1;
-      height: 650px;
-      border: 1px solid #ccc;
-      .title{
-        height: 75px;
-        color: black;
-        display: flex;
-        align-items: center;
-        &>b{
-          font-size: 24px;
-          margin: 0 20px;
-        }
-        &>span {
-          margin-right: 20px;
-        }
-        &>i {
-          cursor: pointer;
-          font-size: 24px;
-          margin: 0 10px;
-        }
-      }
-    }
-  }
-}
-</style>

src/views/system/system1.vue

@@ -6,7 +6,7 @@
         <el-breadcrumb separator="/">
           <el-breadcrumb-item to="">首页</el-breadcrumb-item>
           <el-breadcrumb-item to="">系统管理</el-breadcrumb-item>
-          <el-breadcrumb-item id="mytitle">数据字典</el-breadcrumb-item>
+          <el-breadcrumb-item id="mytitle">系统日志</el-breadcrumb-item>
         </el-breadcrumb>
       </div>
       <div class="conten">

src/views/system/system3.vue

@@ -1,141 +0,0 @@
-<template>
-  <div class="system3">
-    <TabList :ind='3'/>
-    <div class="right">
-      <div class="top">
-        <el-breadcrumb separator="/">
-          <el-breadcrumb-item to="">首页</el-breadcrumb-item>
-          <el-breadcrumb-item to="">系统管理</el-breadcrumb-item>
-          <el-breadcrumb-item id="mytitle">系统日志</el-breadcrumb-item>
-        </el-breadcrumb>
-      </div>
-      <div class="conten">
-        <div class="middle">
-          <div class="select">
-            <span>操作：</span>
-            <el-input
-              v-model="operation"
-              placeholder="请输入"
-              style="width: 217px"
-            ></el-input>
-            <el-button style="margin-left: 20px">查询</el-button>
-          </div>
-          <!--表格 -->
-          <div class="table">
-            <el-table
-              :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
-              :data="tableData"
-              border
-              style="width: 100%"
-            >
-              <el-table-column prop="date" label="账号" width="200">
-              </el-table-column>
-              <el-table-column prop="name" label="操作模块" width="300">
-              </el-table-column>
-              <el-table-column prop="address" label="事件">
-              </el-table-column>
-              <el-table-column prop="name" label="操作时间" width="300">
-              </el-table-column>
-            </el-table>
-          </div>
-
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import TabList from '@/components/tabLeft4.vue'
-export default {
-  name: 'system3',
-  // import引入的组件需要注入到对象中才能使用
-  components: { TabList },
-  data () {
-    // 这里存放数据
-    return {
-      operation: '',
-      // 表格数据
-      tableData: [
-        {
-          date: '2016-05-03',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        },
-        {
-          date: '2016-05-02',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        }
-      ]
-
-    }
-  },
-  // 监听属性 类似于data概念
-  computed: {},
-  // 监控data中的数据变化
-  watch: {},
-  // 方法集合
-  methods: {
-
-  },
-  // 生命周期 - 创建完成（可以访问当前this实例）
-  created () {},
-  // 生命周期 - 挂载完成（可以访问DOM元素）
-  mounted () {},
-  beforeCreate () {}, // 生命周期 - 创建之前
-  beforeMount () {}, // 生命周期 - 挂载之前
-  beforeUpdate () {}, // 生命周期 - 更新之前
-  updated () {}, // 生命周期 - 更新之后
-  beforeDestroy () {}, // 生命周期 - 销毁之前
-  destroyed () {}, // 生命周期 - 销毁完成
-  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
-}
-</script>
-<style lang='less' scoped>
-//@import url(); 引入公共css类
-.system3 {
-    /deep/#mytitle>span{
-    font-weight: 800;
-  }
-  display: flex;
-  .right {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    .top {
-      padding-left: 35px;
-      display: flex;
-      align-items: center;
-      box-shadow: 1px 1px 10px 1px;
-      margin-left: 2px;
-      height: 40px;
-      background-color: #fff;
-    }
-  }
-
-   .conten {
-    flex: 1;
-    background-color: #fff;
-    margin: 20px 20px 40px;
-      .middle {
-        width: 100%;
-        height: 100%;
-        background-color: #fff;
-        .select {
-          color: black;
-          padding: 30px 0 0 0;
-          & > span {
-            margin-left: 30px;
-          }
-        }
-        .table {
-          max-height: 640px;
-          overflow: auto;
-          padding: 24px;
-        }
-      }
-    }
-
-}
-</style>