静态页初步完工

src/components/tabLeft2.vue

@@ -0,0 +1,65 @@
+
+<template>
+    <div class="left">
+      <ul>
+        <li :class="{active:ind===index}" v-for="(item, index) in tabList" :key="index" @click="skip(index)">
+          <i class="el-icon-edit"></i>
+          {{ item }}
+        </li>
+      </ul>
+    </div>
+
+</template>
+
+<script>
+export default {
+  components: {},
+  props: {
+    ind: {
+      type: Number,
+      default: 0
+    }
+  },
+  data () {
+    return {
+      tabList: [
+        '征集品总账',
+        '征集品提用',
+        '征集品注销'
+      ]
+    }
+  },
+  methods: {
+    skip (index) {
+      this.$router.push(`/layout/collect${index}`).catch(() => {})
+    }
+  }
+}
+</script>
+<style lang='less' scoped>
+  .left {
+    width: 220px;
+    min-width: 130px;
+    height: 868px;
+    background-color: #fff;
+    box-shadow: 1px 1px 10px 1px;
+    ul {
+      li {
+        cursor: pointer;
+        color: black;
+        font-size: 16px;
+        height: 60px;
+        display: flex;
+        align-items: center;
+        i {
+          margin: 0 18px;
+        }
+      }
+      li:hover{
+        background:#e6f7ff ;
+      }
+      .active {
+        background:#e6f7ff ;
+      }
+    }
+  }</style>

src/components/tabLeft3.vue

@@ -0,0 +1,64 @@
+
+<template>
+    <div class="left">
+      <ul>
+        <li :class="{active:ind===index}" v-for="(item, index) in tabList" :key="index" @click="skip(index)">
+          <i class="el-icon-edit"></i>
+          {{ item }}
+        </li>
+      </ul>
+    </div>
+
+</template>
+
+<script>
+export default {
+  components: {},
+  props: {
+    ind: {
+      type: Number,
+      default: 0
+    }
+  },
+  data () {
+    return {
+      tabList: [
+        '统计报表',
+        '馆藏数量'
+      ]
+    }
+  },
+  methods: {
+    skip (index) {
+      this.$router.push(`/layout/statistics${index}`).catch(() => {})
+    }
+  }
+}
+</script>
+<style lang='less' scoped>
+  .left {
+    width: 220px;
+    min-width: 130px;
+    height: 868px;
+    background-color: #fff;
+    box-shadow: 1px 1px 10px 1px;
+    ul {
+      li {
+        cursor: pointer;
+        color: black;
+        font-size: 16px;
+        height: 60px;
+        display: flex;
+        align-items: center;
+        i {
+          margin: 0 18px;
+        }
+      }
+      li:hover{
+        background:#e6f7ff ;
+      }
+      .active {
+        background:#e6f7ff ;
+      }
+    }
+  }</style>

src/router/index.js

@@ -141,6 +141,16 @@ const router = new VueRouter({
           path: 'collect0',
           meta: { myInd: 2 },
           component: () => import('@/views/collect/collect0.vue')
+        }, {
+          name: 'collect1',
+          path: 'collect1',
+          meta: { myInd: 2 },
+          component: () => import('@/views/collect/collect1.vue')
+        }, {
+          name: 'collect2',
+          path: 'collect2',
+          meta: { myInd: 2 },
+          component: () => import('@/views/collect/collect2.vue')
         },
 
         // 馆藏统计
@@ -150,6 +160,12 @@ const router = new VueRouter({
           meta: { myInd: 3 },
           component: () => import('@/views/statistics/statistics0.vue')
         },
+        {
+          name: 'statistics1',
+          path: 'statistics1',
+          meta: { myInd: 3 },
+          component: () => import('@/views/statistics/statistics1.vue')
+        },
 
         // 系统管理
         {

src/views/collect/collect0.vue

@@ -1,31 +1,44 @@
+<!--  -->
 <template>
-<div class='collect'>
-  征集品管理
-</div>
+  <div class="collect0">
+    <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>
+    </div>
+  </div>
 </template>
 
 <script>
+import TabList from '@/components/tabLeft2.vue'
 export default {
-  name: 'collect',
-  components: {},
+  name: 'collect0',
+  // import引入的组件需要注入到对象中才能使用
+  components: { TabList },
   data () {
+    // 这里存放数据
     return {
 
     }
   },
+  // 监听属性 类似于data概念
   computed: {},
+  // 监控data中的数据变化
   watch: {},
+  // 方法集合
   methods: {
 
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created () {
-
-  },
+  created () {},
   // 生命周期 - 挂载完成（可以访问DOM元素）
-  mounted () {
-
-  },
+  mounted () {},
   beforeCreate () {}, // 生命周期 - 创建之前
   beforeMount () {}, // 生命周期 - 挂载之前
   beforeUpdate () {}, // 生命周期 - 更新之前
@@ -37,5 +50,29 @@ export default {
 </script>
 <style lang='less' scoped>
 //@import url(); 引入公共css类
-
+.collect0 {
+    /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;
+  }
+}
 </style>

src/views/collect/collect1.vue

@@ -0,0 +1,78 @@
+<!--  -->
+<template>
+  <div class="collect1">
+    <TabList :ind='1'/>
+    <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>
+    </div>
+  </div>
+</template>
+
+<script>
+import TabList from '@/components/tabLeft2.vue'
+export default {
+  name: 'collect1',
+  // import引入的组件需要注入到对象中才能使用
+  components: { TabList },
+  data () {
+    // 这里存放数据
+    return {
+
+    }
+  },
+  // 监听属性 类似于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类
+.collect1 {
+    /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;
+  }
+}
+</style>

src/views/collect/collect2.vue

@@ -0,0 +1,78 @@
+<!--  -->
+<template>
+  <div class="collect2">
+    <TabList :ind='2'/>
+    <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>
+    </div>
+  </div>
+</template>
+
+<script>
+import TabList from '@/components/tabLeft2.vue'
+export default {
+  name: 'collect2',
+  // import引入的组件需要注入到对象中才能使用
+  components: { TabList },
+  data () {
+    // 这里存放数据
+    return {
+
+    }
+  },
+  // 监听属性 类似于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类
+.collect2 {
+    /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;
+  }
+}
+</style>

src/views/layout/index.vue

@@ -76,12 +76,12 @@ export default {
         {
           name: '征集品管理',
           push: '/layout/collect',
-          son: ['collect1', 'collect2', 'collect3']
+          son: ['征集品总账', '征集品提用', '征集品注销']
         },
         {
           name: '馆藏统计',
           push: '/layout/statistics',
-          son: ['statistics1', 'statistics2', 'statistics3']
+          son: ['统计报表', '馆藏数量']
         },
         {
           name: '系统管理',

src/views/statistics/statistics0.vue

@@ -1,31 +1,44 @@
+<!--  -->
 <template>
-<div class='statistics'>
-  馆藏统计
-</div>
+  <div class="statistics0">
+    <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>
+    </div>
+  </div>
 </template>
 
 <script>
+import TabList from '@/components/tabLeft3.vue'
 export default {
-  name: 'statistics',
-  components: {},
+  name: 'statistics0',
+  // import引入的组件需要注入到对象中才能使用
+  components: { TabList },
   data () {
+    // 这里存放数据
     return {
 
     }
   },
+  // 监听属性 类似于data概念
   computed: {},
+  // 监控data中的数据变化
   watch: {},
+  // 方法集合
   methods: {
 
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created () {
-
-  },
+  created () {},
   // 生命周期 - 挂载完成（可以访问DOM元素）
-  mounted () {
-
-  },
+  mounted () {},
   beforeCreate () {}, // 生命周期 - 创建之前
   beforeMount () {}, // 生命周期 - 挂载之前
   beforeUpdate () {}, // 生命周期 - 更新之前
@@ -37,5 +50,29 @@ export default {
 </script>
 <style lang='less' scoped>
 //@import url(); 引入公共css类
-
+.statistics0 {
+    /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;
+  }
+}
 </style>

src/views/statistics/statistics1.vue

@@ -0,0 +1,78 @@
+<!--  -->
+<template>
+  <div class="statistics1">
+    <TabList :ind='1'/>
+    <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>
+    </div>
+  </div>
+</template>
+
+<script>
+import TabList from '@/components/tabLeft3.vue'
+export default {
+  name: 'statistics1',
+  // import引入的组件需要注入到对象中才能使用
+  components: { TabList },
+  data () {
+    // 这里存放数据
+    return {
+
+    }
+  },
+  // 监听属性 类似于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类
+.statistics1 {
+    /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;
+  }
+}
+</style>

src/views/system/system2.vue

@@ -1,5 +1,8 @@
 <template>
   <div class="system2">
+    <!-- 点击新增的弹出层 -->
+    <System2Add :dialogFormVisible.sync='dialogFormVisible'/>
+
     <TabList :ind='2'/>
     <div class="right">
       <div class="top">
@@ -19,7 +22,7 @@
               style="width: 217px"
             ></el-input>
 
-            <span>账号：</span>
+            <span>账号角色：</span>
             <el-select v-model="role" placeholder="请选择">
               <el-option
                 v-for="item in source"
@@ -31,7 +34,7 @@
             </el-select>
 
             <el-button style="margin-left: 20px">查询</el-button>
-            <el-button type="primary" >新增</el-button>
+            <el-button type="primary" @click="dialogFormVisible=true">新增</el-button>
           </div>
           <!--表格 -->
           <div class="table">
@@ -41,15 +44,15 @@
               border
               style="width: 100%"
             >
-              <el-table-column prop="date" label="账号" width="180">
+              <el-table-column prop="date" label="账号" width="200">
               </el-table-column>
-              <el-table-column prop="name" label="账号角色" width="180">
+              <el-table-column prop="name" label="账号角色" width="200">
               </el-table-column>
               <el-table-column prop="address" label="手机号">
               </el-table-column>
-              <el-table-column prop="name" label="状态" width="180">
+              <el-table-column prop="name" label="状态" width="200">
               </el-table-column>
-              <el-table-column label="操作" width="180">
+              <el-table-column label="操作" width="200">
                 <template #default>
                   <el-button type="text">修改</el-button>
                   <el-button type="text">停用</el-button>
@@ -66,14 +69,16 @@
 </template>
 
 <script>
+import System2Add from './system2_add.vue'
 import TabList from '@/components/tabLeft4.vue'
 export default {
   name: 'system2',
   // import引入的组件需要注入到对象中才能使用
-  components: { TabList },
+  components: { TabList, System2Add },
   data () {
     // 这里存放数据
     return {
+      dialogFormVisible: false,
       userName: '',
       role: '',
       // 多选数据

src/views/system/system2_add.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="system2_add">
+    <el-dialog title="新增用户" :visible="dialogFormVisible" @close="cancel()">
+      <el-form :model="form" label-width="150px" :rules="rules" ref="ruleForm">
+        <el-form-item label="账号：" prop="userName">
+          <el-input v-model="form.userName" placeholder="请输入" style="width:300px"></el-input>
+        </el-form-item>
+        <el-form-item label="密码：" prop="passWord">
+          <el-input v-model="form.passWord" placeholder="请输入" style="width:300px"></el-input>
+        </el-form-item>
+        <el-form-item label="角色：" prop="region">
+          <el-select v-model="form.region" placeholder="请选择" style="width:300px">
+            <el-option
+              v-for="item in source"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="手机号码：" prop="mobile">
+          <el-input v-model="form.mobile" placeholder="请输入" style="width:300px"></el-input>
+        </el-form-item>
+        <el-form-item label="是否启用：">
+            <el-radio v-model="form.start" label="1">是</el-radio>
+            <el-radio v-model="form.start" label="2">否</el-radio>
+        </el-form-item>
+
+      </el-form>
+      <div class="btn">
+        <el-button type="primary">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'system2_add',
+  props: {
+    dialogFormVisible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  components: {},
+  data () {
+    // 这里存放数据
+    return {
+      form: {
+        userName: '',
+        passWord: '',
+        region: '选项1',
+        mobile: '',
+        start: '1'
+      },
+      // 多选数据
+      source: [
+        {
+          value: '选项1',
+          label: '黄金糕'
+        },
+        {
+          value: '选项2',
+          label: '双皮奶'
+        }
+      ],
+      rules: {
+        userName: [
+          { required: true, message: '不能为空', trigger: 'blur' }
+        ],
+        passWord: [{ required: true, message: '不能为空', trigger: 'blur' }],
+        mobile: [
+          { required: true, message: '不能为空', trigger: 'blur' },
+          { pattern: /^1[3-9]\d{9}$/, message: '请输入合法手机号', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {
+    cancel () {
+      this.$emit('update:dialogFormVisible', false)
+    }
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created () {},
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted () {},
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  beforeDestroy () {}, // 生命周期 - 销毁之前
+  destroyed () {}, // 生命周期 - 销毁完成
+  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+<style lang='less' scoped>
+.btn{
+  width: 230px;
+  display: flex;
+  justify-content: space-between;
+  margin-left: 180px;
+}
+/deep/.el-dialog{
+  width: 35%;
+}
+</style>

src/views/system/system3.vue

@@ -10,6 +10,36 @@
         </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>
@@ -24,6 +54,20 @@ export default {
   data () {
     // 这里存放数据
     return {
+      operation: '',
+      // 表格数据
+      tableData: [
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }
+      ]
 
     }
   },
@@ -69,11 +113,29 @@ export default {
       background-color: #fff;
     }
   }
-  .conten {
+
+   .conten {
     flex: 1;
     background-color: #fff;
     margin: 20px 20px 40px;
-    padding: 30px 60px 0;
-  }
+      .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>