菜单管理功能加强，新增功能项：是否隐藏菜单（某些页面不需要显示在左侧菜单栏中），是否缓存菜单（可解决切换Tab重新渲染的问题，使用该功能必须填写组件名称，且必须与组件中的name一致）

2019-08-27 15:56:06 +08:00
parent a138fbc6b6
commit b0830fba37
22 changed files with 52 additions and 27 deletions
--- a/src/views/components/Editor.vue
+++ b/src/views/components/Editor.vue
@@ -17,6 +17,7 @@ import { mapGetters } from 'vuex'
 import E from 'wangeditor'
 import { getToken } from '@/utils/auth'
 export default {
+  name: 'Editor',
  data() {
    return {
      headers: {
--- a/src/views/generator/generator.vue
+++ b/src/views/generator/generator.vue
@@ -80,7 +80,6 @@ import initData from '@/mixins/initData'
 import { update, get } from '@/api/genConfig'
 import { generator } from '@/api/generator'
 export default {
-  name: 'Generator',
  mixins: [initData],
  props: {
    name: {
--- a/src/views/generator/index.vue
+++ b/src/views/generator/index.vue
@@ -43,6 +43,7 @@ import initData from '@/mixins/initData'
 import { parseTime } from '@/utils/index'
 import Generator from './generator'
 export default {
+  name: 'Generator',
  components: { Generator },
  mixins: [initData],
  data() {
--- a/src/views/monitor/log/errorLog.vue
+++ b/src/views/monitor/log/errorLog.vue
@@ -42,6 +42,7 @@ import { parseTime } from '@/utils/index'
 import { getErrDetail } from '@/api/log'
 import Search from './search'
 export default {
+  name: 'ErrorLog',
  components: { Search },
  mixins: [initData],
  data() {
--- a/src/views/monitor/log/index.vue
+++ b/src/views/monitor/log/index.vue
@@ -38,6 +38,7 @@ import initData from '@/mixins/initData'
 import { parseTime } from '@/utils/index'
 import Search from './search'
 export default {
+  name: 'Log',
  components: { Search },
  mixins: [initData],
  created() {
--- a/src/views/monitor/redis/index.vue
+++ b/src/views/monitor/redis/index.vue
@@ -58,6 +58,7 @@ import checkPermission from '@/utils/permission' // 权限判断函数
 import initData from '@/mixins/initData'
 import { del, delAll } from '@/api/redis'
 export default {
+  name: 'Redis',
  mixins: [initData],
  data() {
    return {
--- a/src/views/monitor/sql/index.vue
+++ b/src/views/monitor/sql/index.vue
@@ -5,6 +5,7 @@
 import { mapGetters } from 'vuex'
 import elFrame from '@/components/iframe/index'
 export default {
+  name: 'Sql',
  components: { elFrame },
  computed: {
    ...mapGetters([
--- a/src/views/system/dept/index.vue
+++ b/src/views/system/dept/index.vue
@@ -73,6 +73,7 @@ import { del } from '@/api/dept'
 import { parseTime } from '@/utils/index'
 import eForm from './form'
 export default {
+  name: 'Dept',
  components: { eForm, treeTable },
  mixins: [initData, initDict],
  data() {
--- a/src/views/system/dict/index.vue
+++ b/src/views/system/dict/index.vue
@@ -81,6 +81,7 @@ import { del } from '@/api/dict'
 import dictDetail from '../dictDetail/index'
 import eForm from './form'
 export default {
+  name: 'Dict',
  components: { dictDetail, eForm },
  mixins: [initData],
  data() {
--- a/src/views/system/job/index.vue
+++ b/src/views/system/job/index.vue
@@ -82,6 +82,7 @@ import { del } from '@/api/job'
 import { parseTime } from '@/utils/index'
 import eForm from './form'
 export default {
+  name: 'Job',
  components: { eForm },
  mixins: [initData, initDict],
  data() {
--- a/src/views/system/menu/form.vue
+++ b/src/views/system/menu/form.vue
@@ -1,24 +1,21 @@
 <template>
-  <el-dialog :visible.sync="dialog" :close-on-click-modal="false" :before-close="cancel" :title="isAdd ? '新增菜单' : '编辑菜单'" append-to-body width="600px">
+  <el-dialog :visible.sync="dialog" :close-on-click-modal="false" :before-close="cancel" :title="isAdd ? '新增菜单' : '编辑菜单'" append-to-body width="585px">
    <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="80px">
      <el-form-item label="菜单图标">
        <el-popover
          placement="bottom-start"
-          width="460"
+          width="450"
          trigger="click"
          @show="$refs['iconSelect'].reset()">
          <IconSelect ref="iconSelect" @selected="selected" />
-          <el-input slot="reference" v-model="form.icon" style="width: 460px;" placeholder="点击选择图标" readonly>
+          <el-input slot="reference" v-model="form.icon" style="width: 450px;" placeholder="点击选择图标" readonly>
            <svg-icon v-if="form.icon" slot="prefix" :icon-class="form.icon" class="el-input__icon" style="height: 32px;width: 16px;" />
            <i v-else slot="prefix" class="el-icon-search el-input__icon"/>
          </el-input>
        </el-popover>
      </el-form-item>
      <el-form-item label="菜单名称" prop="name">
-        <el-input v-model="form.name" placeholder="名称" style="width: 460px;"/>
-      </el-form-item>
-      <el-form-item label="菜单排序" prop="sort">
-        <el-input-number v-model.number="form.sort" :min="0" :max="999" controls-position="right" style="width: 460px;"/>
+        <el-input v-model="form.name" placeholder="名称" style="width: 450px;"/>
      </el-form-item>
      <el-form-item label="内部菜单">
        <el-radio-group v-model="form.iframe" size="mini">
@@ -38,14 +35,20 @@
          <el-radio-button label="false">否</el-radio-button>
        </el-radio-group>
      </el-form-item>
+      <el-form-item label="菜单排序" prop="sort">
+        <el-input-number v-model.number="form.sort" :min="0" :max="999" controls-position="right" style="width: 177px;"/>
+      </el-form-item>
      <el-form-item label="链接地址" prop="path">
-        <el-input v-model="form.path" placeholder="菜单路径" style="width: 460px;"/>
+        <el-input v-model="form.path" placeholder="链接地址" style="width: 177px;"/>
      </el-form-item>
      <el-form-item v-if="form.iframe === 'false'" label="组件路径">
-        <el-input v-model="form.component" placeholder="菜单路径" style="width: 460px;"/>
+        <el-input v-model="form.component" placeholder="菜单路径"/>
+      </el-form-item>
+      <el-form-item v-if="form.iframe === 'false'" label="组件名称">
+        <el-input v-model="form.componentName" placeholder="匹配组件内Name字段"/>
      </el-form-item>
      <el-form-item label="上级类目">
-        <treeselect v-model="form.pid" :options="menus" style="width: 460px;" placeholder="选择上级类目" />
+        <treeselect v-model="form.pid" :options="menus" style="width: 450px;" placeholder="选择上级类目" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
@@ -71,7 +74,7 @@ export default {
  data() {
    return {
      loading: false, dialog: false, menus: [],
-      form: { name: '', sort: 999, path: '', component: '', iframe: 'false', roles: [], pid: 0, icon: '', cache: false, hidden: false },
+      form: { name: '', sort: 999, path: '', component: '', componentName: '', iframe: 'false', roles: [], pid: 0, icon: '', cache: false, hidden: false },
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' }
@@ -134,7 +137,7 @@ export default {
    resetForm() {
      this.dialog = false
      this.$refs['form'].resetFields()
-      this.form = { name: '', sort: 999, path: '', component: '', iframe: 'false', roles: [], pid: 0, icon: '', cache: false, hidden: false }
+      this.form = { name: '', sort: 999, path: '', component: '', componentName: '', iframe: 'false', roles: [], pid: 0, icon: '', cache: false, hidden: false }
    },
    selected(name) {
      this.form.icon = name
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -27,38 +27,39 @@
    <!--表单组件-->
    <eForm ref="form" :is-add="isAdd"/>
    <!--表格渲染-->
-    <tree-table v-loading="loading" :data="data" :expand-all="expand" :columns="columns" size="small">
-      <el-table-column prop="icon" label="图标" align="center" width="80px">
+    <tree-table v-loading="loading" :data="data" :expand-all="expand" :columns="columns" :height="height" size="small">
+      <el-table-column prop="icon" label="图标" align="center" width="60px">
        <template slot-scope="scope">
          <svg-icon :icon-class="scope.row.icon" />
        </template>
      </el-table-column>
-      <el-table-column prop="sort" align="center" width="100px" label="排序">
+      <el-table-column prop="sort" align="center" label="排序">
        <template slot-scope="scope">
          <el-tag>{{ scope.row.sort }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true" prop="path" label="链接地址"/>
-      <el-table-column :show-overflow-tooltip="true" prop="component" label="组件路径"/>
-      <el-table-column prop="iframe" width="100px" label="内部菜单">
+      <el-table-column :show-overflow-tooltip="true" prop="componentName" label="组件名称"/>
+      <el-table-column :show-overflow-tooltip="true" prop="component" label="组件路径" width="130px"/>
+      <el-table-column prop="iframe" label="内部菜单">
        <template slot-scope="scope">
          <span v-if="!scope.row.iframe">是</span>
          <span v-else>否</span>
        </template>
      </el-table-column>
-      <el-table-column prop="iframe" width="100px" label="是否缓存">
+      <el-table-column prop="iframe" label="是否缓存">
        <template slot-scope="scope">
          <span v-if="scope.row.cache">是</span>
          <span v-else>否</span>
        </template>
      </el-table-column>
-      <el-table-column prop="iframe" width="100px" label="是否隐藏">
+      <el-table-column prop="iframe" label="是否隐藏">
        <template slot-scope="scope">
          <span v-if="scope.row.hidden">是</span>
          <span v-else>否</span>
        </template>
      </el-table-column>
-      <el-table-column prop="createTime" label="创建日期">
+      <el-table-column prop="createTime" label="创建日期" width="135px">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
@@ -92,6 +93,7 @@ import { del } from '@/api/menu'
 import { parseTime } from '@/utils/index'
 import eForm from './form'
 export default {
+  name: 'Menu',
  components: { treeTable, eForm },
  mixins: [initData],
  data() {
@@ -99,14 +101,16 @@ export default {
      columns: [
        {
          text: '名称',
-          value: 'name'
+          value: 'name',
+          width: 140
        }
      ],
-      delLoading: false, expand: true
+      delLoading: false, expand: true, height: 625
    }
  },
  created() {
    this.$nextTick(() => {
+      this.height = document.documentElement.clientHeight - 200
      this.init()
    })
  },
@@ -148,7 +152,7 @@ export default {
      this.isAdd = false
      const _this = this.$refs.form
      _this.getMenus()
-      _this.form = { id: data.id, component: data.component, name: data.name, sort: data.sort, pid: data.pid, path: data.path, iframe: data.iframe.toString(), roles: [], icon: data.icon, cache: data.cache, hidden: data.hidden }
+      _this.form = { id: data.id, component: data.component, componentName: data.componentName, name: data.name, sort: data.sort, pid: data.pid, path: data.path, iframe: data.iframe.toString(), roles: [], icon: data.icon, cache: data.cache, hidden: data.hidden }
      _this.dialog = true
    },
    changExpand() {
--- a/src/views/system/permission/index.vue
+++ b/src/views/system/permission/index.vue
@@ -27,7 +27,7 @@
    <!--表单组件-->
    <eForm ref="form" :is-add="isAdd"/>
    <!--表格渲染-->
-    <tree-table v-loading="loading" :data="data" :expand-all="expand" :columns="columns" size="small">
+    <tree-table v-loading="loading" :data="data" :expand-all="expand" :height="height" :columns="columns" size="small">
      <el-table-column prop="createTime" label="创建日期">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
@@ -62,6 +62,7 @@ import { del } from '@/api/permission'
 import { parseTime } from '@/utils/index'
 import eForm from './form'
 export default {
+  name: 'Permission',
  components: { treeTable, eForm },
  mixins: [initData],
  data() {
@@ -76,11 +77,12 @@ export default {
          value: 'alias'
        }
      ],
-      delLoading: false, expand: true
+      delLoading: false, expand: true, height: 625
    }
  },
  created() {
    this.$nextTick(() => {
+      this.height = document.documentElement.clientHeight - 200
      this.init()
    })
  },
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -133,6 +133,7 @@ import { parseTime } from '@/utils/index'
 import eForm from './form'
 import { editPermission, editMenu, get } from '@/api/role'
 export default {
+  name: 'Role',
  components: { eForm },
  mixins: [initData],
  data() {
--- a/src/views/system/timing/index.vue
+++ b/src/views/system/timing/index.vue
@@ -114,6 +114,7 @@ import { del, updateIsPause, execution, add, edit } from '@/api/timing'
 import { parseTime } from '@/utils/index'
 import Log from './log'
 export default {
+  name: 'Timing',
  components: { Log },
  mixins: [initData],
  data() {
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -103,6 +103,7 @@ import { getDepts } from '@/api/dept'
 import { parseTime, downloadFile } from '@/utils/index'
 import eForm from './form'
 export default {
+  name: 'User',
  components: { eForm },
  mixins: [initData, initDict],
  data() {
--- a/src/views/tools/aliPay/index.vue
+++ b/src/views/tools/aliPay/index.vue
@@ -35,6 +35,7 @@ import Config from './config'
 import ToPay from './toPay'
 import '@/styles/description.scss'
 export default {
+  name: 'AliPay',
  components: { Config, ToPay },
  data() {
    return {
--- a/src/views/tools/email/index.vue
+++ b/src/views/tools/email/index.vue
@@ -28,6 +28,7 @@ import Config from './config'
 import Send from './send'
 import '@/styles/description.scss'
 export default {
+  name: 'Email',
  components: { Config, Send },
  data() {
    return {
--- a/src/views/tools/picture/index.vue
+++ b/src/views/tools/picture/index.vue
@@ -99,6 +99,7 @@ import { mapGetters } from 'vuex'
 import { del, delAll } from '@/api/picture'
 import { getToken } from '@/utils/auth'
 export default {
+  name: 'Pictures',
  mixins: [initData],
  data() {
    return {
--- a/src/views/tools/qiniu/index.vue
+++ b/src/views/tools/qiniu/index.vue
@@ -27,6 +27,7 @@ import Config from './config'
 import List from './list'
 import '@/styles/description.scss'
 export default {
+  name: 'Qiniu',
  components: { Config, List },
  data() {
    return {
--- a/src/views/tools/swagger/index.vue
+++ b/src/views/tools/swagger/index.vue
@@ -5,6 +5,7 @@
 import { mapGetters } from 'vuex'
 import elFrame from '@/components/iframe/index'
 export default {
+  name: 'Swagger',
  components: { elFrame },
  computed: {
    ...mapGetters([