菜单管理功能加强,新增功能项:是否隐藏菜单(某些页面不需要显示在左侧菜单栏中),是否缓存菜单(可解决切换Tab重新渲染的问题)

This commit is contained in:
dqjdda
2019-08-27 14:20:34 +08:00
parent 14aa13e718
commit a138fbc6b6
6 changed files with 42 additions and 14 deletions

View File

@@ -5,4 +5,5 @@ const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, { module.exports = merge(prodEnv, {
NODE_ENV: '"development"', NODE_ENV: '"development"',
BASE_API: '"http://localhost:8000"' BASE_API: '"http://localhost:8000"'
// BASE_API: '"https://api.auauz.net"'
}) })

View File

@@ -37,7 +37,7 @@
"simple-drawing-board": "^2.0.1", "simple-drawing-board": "^2.0.1",
"vue": "2.5.17", "vue": "2.5.17",
"vue-count-to": "1.0.13", "vue-count-to": "1.0.13",
"vue-router": "3.0.2", "vue-router": "^3.1.2",
"vuex": "3.0.1", "vuex": "3.0.1",
"wangeditor": ">=3.0.0", "wangeditor": ">=3.0.0",
"xlsx": "^0.11.16" "xlsx": "^0.11.16"

View File

@@ -1,7 +1,7 @@
<template> <template>
<section class="app-main"> <section class="app-main">
<transition name="fade-transform" mode="out-in"> <transition name="fade-transform" mode="out-in">
<keep-alive :include="cachedViews"> <keep-alive :exclude="cachedViews">
<router-view :key="key"/> <router-view :key="key"/>
</keep-alive> </keep-alive>
</transition> </transition>

View File

@@ -1,6 +1,6 @@
<template> <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="600px">
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px"> <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="80px">
<el-form-item label="菜单图标"> <el-form-item label="菜单图标">
<el-popover <el-popover
placement="bottom-start" placement="bottom-start"
@@ -20,11 +20,25 @@
<el-form-item label="菜单排序" prop="sort"> <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-number v-model.number="form.sort" :min="0" :max="999" controls-position="right" style="width: 460px;"/>
</el-form-item> </el-form-item>
<el-form-item label="内部菜单" prop="iframe"> <el-form-item label="内部菜单">
<el-radio v-model="form.iframe" label="false"></el-radio> <el-radio-group v-model="form.iframe" size="mini">
<el-radio v-model="form.iframe" label="true" ></el-radio> <el-radio-button label="false"></el-radio-button>
<el-radio-button label="true"></el-radio-button>
</el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="链接地址"> <el-form-item label="是否缓存">
<el-radio-group v-model="form.cache" size="mini">
<el-radio-button label="true"></el-radio-button>
<el-radio-button label="false"></el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="是否隐藏">
<el-radio-group v-model="form.hidden" size="mini">
<el-radio-button label="true"></el-radio-button>
<el-radio-button label="false"></el-radio-button>
</el-radio-group>
</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: 460px;"/>
</el-form-item> </el-form-item>
<el-form-item v-if="form.iframe === 'false'" label="组件路径"> <el-form-item v-if="form.iframe === 'false'" label="组件路径">
@@ -57,7 +71,7 @@ export default {
data() { data() {
return { return {
loading: false, dialog: false, menus: [], loading: false, dialog: false, menus: [],
form: { name: '', sort: 999, path: '', component: '', iframe: 'false', roles: [], pid: 0, icon: '' }, form: { name: '', sort: 999, path: '', component: '', iframe: 'false', roles: [], pid: 0, icon: '', cache: false, hidden: false },
rules: { rules: {
name: [ name: [
{ required: true, message: '请输入名称', trigger: 'blur' } { required: true, message: '请输入名称', trigger: 'blur' }
@@ -65,8 +79,8 @@ export default {
sort: [ sort: [
{ required: true, message: '请输入序号', trigger: 'blur', type: 'number' } { required: true, message: '请输入序号', trigger: 'blur', type: 'number' }
], ],
iframe: [ path: [
{ required: true, message: '请选择菜单类型', trigger: 'blur' } { required: true, message: '请输入地址', trigger: 'blur' }
] ]
} }
} }
@@ -120,7 +134,7 @@ export default {
resetForm() { resetForm() {
this.dialog = false this.dialog = false
this.$refs['form'].resetFields() this.$refs['form'].resetFields()
this.form = { name: '', sort: 999, path: '', component: '', iframe: 'false', roles: [], pid: 0, icon: '' } this.form = { name: '', sort: 999, path: '', component: '', iframe: 'false', roles: [], pid: 0, icon: '', cache: false, hidden: false }
}, },
selected(name) { selected(name) {
this.form.icon = name this.form.icon = name

View File

@@ -46,6 +46,18 @@
<span v-else></span> <span v-else></span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="iframe" width="100px" 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="是否隐藏">
<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="创建日期">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span> <span>{{ parseTime(scope.row.createTime) }}</span>
@@ -136,7 +148,7 @@ export default {
this.isAdd = false this.isAdd = false
const _this = this.$refs.form const _this = this.$refs.form
_this.getMenus() _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 } _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.dialog = true _this.dialog = true
}, },
changExpand() { changExpand() {

View File

@@ -156,8 +156,6 @@ export default {
parseTime, parseTime,
checkPermission, checkPermission,
beforeInit() { beforeInit() {
this.$refs.permission.setCheckedKeys([])
this.$refs.menu.setCheckedKeys([])
this.showButton = false this.showButton = false
this.url = 'api/roles' this.url = 'api/roles'
const sort = 'level,asc' const sort = 'level,asc'
@@ -165,6 +163,9 @@ export default {
const value = query.value const value = query.value
this.params = { page: this.page, size: this.size, sort: sort } this.params = { page: this.page, size: this.size, sort: sort }
if (value) { this.params['blurry'] = value } if (value) { this.params['blurry'] = value }
// 清空权限与菜单的选中
this.$refs.permission.setCheckedKeys([])
this.$refs.menu.setCheckedKeys([])
return true return true
}, },
subDelete(id) { subDelete(id) {