open-source/eladmin-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
dqjdda
2019-08-27 15:56:06 +08:00
parent a138fbc6b6
commit b0830fba37
22 changed files with 52 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/views/system/menu/form.vue
View File

@@ -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