update

components/search-bar.vue

@@ -0,0 +1,69 @@
+<template>
+  <el-card>
+    <el-form :model="selects" size="mini" :inline="true">
+      <el-form-item label="培训批次" v-if="display('planBatch')">
+        <el-select v-model="selects.planBatch" placeholder="">
+          <!-- <el-option :label="" :value=""></el-option> -->
+        </el-select>
+      </el-form-item>
+      <el-form-item label="年度计划" v-if="display('plan')">
+        <el-select v-model="selects.plan" placeholder="">
+          <!-- <el-option :label="" :value=""></el-option> -->
+        </el-select>
+      </el-form-item>
+      <el-form-item label="期" v-if="display('term')">
+        <el-select v-model="selects.term" placeholder="">
+          <!-- <el-option :label="" :value=""></el-option> -->
+        </el-select>
+      </el-form-item>
+      <el-form-item label="批次" v-if="display('batch')">
+        <el-select v-model="selects.batch" placeholder="">
+          <!-- <el-option :label="" :value=""></el-option> -->
+        </el-select>
+      </el-form-item>
+      <el-form-item label="班级" v-if="display('classes')">
+        <el-select v-model="selects.classes" placeholder="">
+          <!-- <el-option :label="" :value=""></el-option> -->
+        </el-select>
+      </el-form-item>
+    </el-form>
+  </el-card>
+</template>
+
+<script>
+import _ from 'lodash';
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'search-bar',
+  props: {
+    allow: { type: Array, default: () => [] }, //type:'planBatch', 'plan', 'term', 'batch', 'classes'
+  },
+  components: {},
+  data: function() {
+    return {
+      selects: {},
+      allowed: [],
+    };
+  },
+  created() {},
+  methods: {
+    display(type) {
+      return _.find(this.allow, f => f == type);
+    },
+  },
+  // watch: {
+  //   planBatch,
+  // },
+  computed: {
+    ...mapState(['user', 'planBatch', 'plan', 'term', 'batch', 'classes']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

config/menu-config.js

@@ -3,7 +3,6 @@ export const center = [
     //选择年度,期数,班级
     path: '/',
     name: '主页',
-    module: 'center',
   },
   {
     path: '',
@@ -11,7 +10,7 @@ export const center = [
     module: 'center',
     children: [
       {
-        path: '/newPlan/index',
+        path: '/train/batch/index',
         name: '培训批次',
         module: 'center',
       },
@@ -77,7 +76,7 @@ export const center = [
         ],
       },
       {
-        path: '/lesson/index',
+        path: '/setting',
         name: '系统邮箱设置',
         module: 'center',
       },
@@ -130,14 +129,15 @@ export const center = [
     //班主任只有这个
     path: '',
     name: '培训管理',
-    module: 'center',
+    module: 'center|director',
     children: [
       //针对当前默认期数(可选择,根据当前日期过滤出进行的期数),进行管理
       //针对自己班=>自己所有带的班,可以选
       {
         //班主任不需要
-        path: '/leave/index',
-        name: '班级设置(显示当前期所有班级,针对某班,可以设置非常用问卷,班级备注:特殊班级,详表添加备注,以便之后单独设置,剩下非常用问卷设置)',
+        //(显示当前期所有班级,针对某班,可以设置非常用问卷,班级备注:特殊班级,详表添加备注,以便之后单独设置,剩下非常用问卷设置)
+        path: '/newPlan/classes/index',
+        name: '班级设置',
         module: 'center',
       },
       {
@@ -150,7 +150,7 @@ export const center = [
         //班主任针对自己班 管理员针对期
         path: '/leave/index',
         name: '通知',
-        module: 'center',
+        module: 'center|director',
       },
       {
         //班主任针对自己班,不要排班,排寝;班主任有 增,删(针对退出,不一定是物理删除),改 功能
@@ -158,32 +158,32 @@ export const center = [
         //优秀学员权限给班长,班主任查看
         path: '/student/index',
         name: '学生管理',
-        module: 'center',
+        module: 'center|director',
       },
       {
         //班主任针对自己班, 打印表:证书;名签;课表(需要老师签到);学生签到表;
         path: '/student/index',
         name: '报表打印(范围不限于班)',
-        module: 'center',
+        module: 'center|director',
       },
       {
         path: '/leave/index',
         name: '请假查看',
-        module: 'center',
+        module: 'center|director',
       },
       {
         path: '/leave/index',
         name: '考勤管理',
-        module: 'center',
+        module: 'center|director',
       },
       {
         //班主任针对自己班,管理员看所有的
         path: '/leave/index',
         name: '学生成绩查看',
-        module: 'center',
+        module: 'center|director',
       },
       //班主任针对自己班,管理员看所有的
-      { path: '/statistics/question/index', name: '问卷统计', module: 'center' },
+      { path: '/statistics/question/index', name: '问卷统计', module: 'center|director' },
     ],
   },
   {

layout/admin/admin-menu.vue

@@ -1,48 +1,35 @@
 <template>
   <div id="admin-menu" style="background-color: rgb(0, 20, 42);">
-    <scroll-bar>
-      <div class="logo">
-        <img src="https://img.alicdn.com/tfs/TB13UQpnYGYBuNjy0FoXXciBFXa-242-134.png" width="40" />
-        <span class="site-name">ADMIN LITE</span>
-      </div>
-      <el-menu
-        mode="vertical"
-        :show-timeout="200"
-        background-color="#00142a"
-        text-color="hsla(0, 0%, 100%, .65)"
-        active-text-color="#409EFF"
-        :unique-opened="true"
-      >
-        <span v-for="(item, index) in menu" :key="index">
-          <!-- <span v-if="`${item.role}` === `${user.role}` || !item.role"> -->
-          <!--  v-if="`${item.role}` === `${user.role}`" -->
-          <span v-if="!item.children" :to="item.path" :key="item.name">
-            <el-menu-item :index="item.path" @click="selectMenu(item.path, item.module)">
-              <i v-if="item.icon" :class="item.icon"></i>
-              <span v-if="item.name" slot="title">{{ item.name }}</span>
-            </el-menu-item>
-          </span>
-
-          <el-submenu v-else :index="item.name || item.path" :key="item.name">
-            <template slot="title">
-              <i v-if="item && item.icon" :class="item.icon"></i>
-              <span v-if="item && item.name" slot="title">{{ item.name }}</span>
-            </template>
-            <template v-for="(child, childIndex) in item.children">
-              <div :key="childIndex" v-if="!child.hidden">
-                <el-menu-item :index="item.path + child.path" @click="selectMenu(item.path + child.path, item.module)">
-                  <span v-if="child && child.name" slot="title">{{ child.name }}</span>
-                </el-menu-item>
-              </div>
-            </template>
-          </el-submenu>
-        </span>
-      </el-menu>
-    </scroll-bar>
+    <el-row>
+      <el-col :span="24">
+        <div class="logo">
+          <img src="https://img.alicdn.com/tfs/TB13UQpnYGYBuNjy0FoXXciBFXa-242-134.png" width="40" />
+          <span class="site-name">ADMIN LITE</span>
+        </div>
+      </el-col>
+      <el-col :span="24">
+        <template>
+          <el-menu
+            mode="vertical"
+            :show-timeout="200"
+            background-color="#00142a"
+            text-color="hsla(0, 0%, 100%, .65)"
+            active-text-color="#409EFF"
+            :unique-opened="true"
+            :default-active="defualtActive"
+          >
+            <scroll-bar>
+              <menu-item :menus="menu"></menu-item>
+            </scroll-bar>
+          </el-menu>
+        </template>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
+import menuItem from './menu/menu-item.vue';
 import * as menus from '@frame/config/menu-config';
 import scrollBar from './scrollBar.vue';
 import _ from 'lodash';
@@ -51,6 +38,7 @@ export default {
   props: {},
   components: {
     scrollBar,
+    menuItem,
   },
   data: () => ({
     menu: [],
@@ -60,15 +48,34 @@ export default {
     project_modules() {
       return process.env.VUE_APP_MODULE;
     },
+    defualtActive() {
+      return this.$route.path;
+    },
   },
   mounted() {
     let arr = _.get(menus, this.project_modules, []);
-    this.$set(this, `menu`, arr);
+    let r = this.filterMenu(_.cloneDeep(arr), this.project_modules);
+    this.$set(this, `menu`, r);
   },
   methods: {
     selectMenu(path, modules) {
       if (this.project_modules === modules) this.$router.push({ path: path });
     },
+    filterMenu(menus, umod) {
+      let nm = menus.map(menu => {
+        //mod 不存在:检查下面每一子项是否有限制
+        //mod 存在:检查是否符合要求,符合,检查子项;不符合,略过
+        let mod = _.get(menu, 'module');
+        if ((mod && mod.includes(umod)) || !mod) {
+          let children = _.get(menu, 'children');
+          if (children) {
+            menu.children = this.filterMenu(children, umod);
+          }
+          return menu;
+        }
+      });
+      return _.compact(nm);
+    },
   },
 };
 </script>
@@ -110,24 +117,5 @@ export default {
     width: 100% !important;
     border: none;
   }
-  .el-submenu .el-menu-item {
-    min-width: 16rem !important;
-    padding-left: 3rem !important;
-    background-color: #000c17 !important;
-    &:hover {
-      color: #fff !important;
-    }
-  }
-  .el-menu-item,
-  .el-submenu .el-menu-item {
-    &.is-active {
-      background-color: #188fff !important;
-      color: #fff !important;
-    }
-  }
-  .el-submenu__title i {
-    font-size: 1rem;
-    color: rgba(255, 255, 255, 0.65);
-  }
 }
 </style>

layout/admin/detail-frame.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="detail-frame" :style="`height:${heights}px`">
     <el-scrollbar style="height:100%">
-      <el-card style="background:rgb(231, 224, 235);border-radius: 60px;" shadow="hover">
+      <el-card style="background-image: linear-gradient(315deg, #CCF, transparent);border-radius: 60px;" shadow="hover">
         <el-row>
           <el-col :span="24" class="title">
             <span v-if="returns">

layout/admin/list-frame.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="list-frame" :style="`height:${heights}px`">
     <el-scrollbar style="height:100%">
-      <el-card style="background:rgb(231, 224, 235);border-radius: 60px;" shadow="hover">
+      <el-card style="background-image: linear-gradient(315deg, #CCF, transparent);border-radius: 60px;" shadow="hover">
         <el-row>
           <el-col :span="21" class="title">
             <span v-if="returns">

layout/admin/menu/menu-item.vue

@@ -0,0 +1,67 @@
+<template>
+  <div id="menu-item">
+    <template v-for="(item, index) in menus">
+      <!-- 没有子菜单情况 -->
+      <template v-if="!item.children">
+        <el-menu-item :index="item.path" @click="selectMenu(item.path, item.module)" :key="index">
+          <i v-if="item.icon" :class="item.icon"></i>
+          <span v-if="item.name" slot="title">{{ item.name }}</span>
+        </el-menu-item>
+      </template>
+      <template v-else>
+        <el-submenu :index="item.name || item.path" :key="item.name">
+          <template slot="title">
+            <i v-if="item && item.icon" :class="item.icon"></i>
+            <span v-if="item && item.name">{{ item.name }}</span>
+          </template>
+          <menu-item :menus="item.children"></menu-item>
+        </el-submenu>
+      </template>
+    </template>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'menu-item',
+  props: {
+    menus: { type: Array, require: true },
+  },
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {
+    selectMenu(path, modules) {
+      this.$router.push({ path: path });
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.el-submenu .el-menu-item {
+  min-width: 16rem !important;
+  padding-left: 3rem !important;
+  background-color: #000c17 !important;
+  &:hover {
+    color: #fff !important;
+  }
+}
+.el-submenu__title i {
+  font-size: 1rem;
+  color: rgba(255, 255, 255, 0.65);
+}
+.el-menu-item,
+.el-submenu .el-menu-item {
+  &.is-active {
+    background-color: #188fff !important;
+    color: #fff !important;
+  }
+}
+</style>