xuhuajiao
/
yxk-electronic-archives
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

菜单管理

master
xuhuajiao 2 years ago
parent
f7b177bf78
commit
05ca9770ba
1 changed files with 84 additions and 23 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 107
      src/views/system/menu/index.vue

107
src/views/system/menu/index.vue
View File

@ -15,7 +15,7 @@
<span class="dialog-right-top" />
<span class="dialog-left-bottom" />
<div class="setting-dialog">
<el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="80px">
<el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="100px">
<el-row>
<el-form-item label="菜单类型" prop="type">
<el-radio-group v-model="form.type" size="mini" style="width: 178px">
@ -34,8 +34,8 @@
@show="$refs['iconSelect'].reset()"
>
<IconSelect ref="iconSelect" @selected="selected" />
<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: 30px;width: 16px;" />
<el-input slot="reference" v-model="form.icon" style="width: 560px;" placeholder="点击选择图标" readonly>
<svg-icon v-if="form.icon" slot="prefix" :icon-class="form.icon" class="el-input__icon" style="height: 30px; width: 16px;" />
<i v-else slot="prefix" class="el-icon-search el-input__icon" />
</el-input>
</el-popover>
@ -43,7 +43,7 @@
</el-row>
<el-row>
<!-- <el-col :span="8"> -->
<el-form-item v-show="form.type.toString() !== '2'" label="外链菜单" prop="iFrame" style="width: 180px; margin-right: 0;">
<el-form-item v-show="form.type.toString() !== '2'" class="menu-radio" label="外链菜单" prop="iFrame">
<el-radio-group v-model="form.iFrame" size="mini">
<el-radio-button label="true">是</el-radio-button>
<el-radio-button label="false">否</el-radio-button>
@ -51,7 +51,7 @@
</el-form-item>
<!-- </el-col>
<el-col :span="8"> -->
<el-form-item v-show="form.type.toString() !== '2'" label="菜单可见" prop="hidden" style="width: 180px; margin-right: 0;">
<el-form-item v-show="form.type.toString() !== '2'" class="menu-radio" label="菜单可见" prop="hidden">
<el-radio-group v-model="form.hidden" size="mini">
<el-radio-button label="false">是</el-radio-button>
<el-radio-button label="true">否</el-radio-button>
@ -59,7 +59,7 @@
</el-form-item>
<!-- </el-col>
<el-col :span="8"> -->
<el-form-item v-show="form.type.toString() === '1'" label="菜单缓存" prop="cache" style="width: 180px; margin-right: 0;">
<el-form-item v-show="form.type.toString() === '1'" class="menu-radio" label="菜单缓存" prop="cache">
<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>
@ -67,28 +67,28 @@
</el-form-item>
<!-- </el-col> -->
</el-row>
<el-form-item v-if="form.type.toString() !== '2'" label="菜单名称" prop="title">
<el-input v-model="form.title" :style=" form.type.toString() === '0' ? 'width: 580px' : 'width: 225px'" placeholder="菜单标题" />
<el-form-item v-if="form.type.toString() !== '2'" label="菜单名称" prop="title" :class="form.type.toString() === '0'?'menu-is-row':'menu-is-item'">
<el-input v-model="form.title" placeholder="请输入" />
</el-form-item>
<el-row>
<el-form-item v-if="form.type.toString() === '2'" label="按钮名称" prop="title">
<el-input v-model="form.title" placeholder="按钮名称" style="width:580px;" />
<el-row v-if="form.type.toString() === '2'">
<el-form-item label="按钮名称" prop="title">
<el-input v-model="form.title" placeholder="请输入" style="width:560px;" />
</el-form-item>
</el-row>
<el-form-item v-show="form.type.toString() !== '0'" label="权限标识" prop="permission">
<el-input v-model="form.permission" :disabled="form.iFrame.toString() === 'true'" placeholder="权限标识" />
<el-form-item v-if="form.type.toString() !== '0'" label="权限标识" prop="permission">
<el-input v-model="form.permission" :disabled="form.iFrame.toString() === 'true'" placeholder="请输入" />
</el-form-item>
<el-form-item v-if="form.type.toString() !== '2'" label="路由地址" prop="path">
<el-input v-model="form.path" placeholder="路由地址" />
<el-input v-model="form.path" placeholder="请输入" />
</el-form-item>
<el-form-item label="菜单排序" prop="menuSort">
<el-form-item label="排序" prop="menuSort">
<el-input-number v-model.number="form.menuSort" :min="0" :max="999" controls-position="right" />
</el-form-item>
<el-form-item v-show="form.iFrame.toString() !== 'true' && form.type.toString() === '1'" label="组件名称" prop="componentName">
<el-input v-model="form.componentName" placeholder="匹配组件内Name字段" />
</el-form-item>
<el-form-item v-show="form.iFrame.toString() !== 'true' && form.type.toString() === '1'" label="组件路径" prop="component">
<el-input v-model="form.component" placeholder="组件路径" />
<el-input v-model="form.component" placeholder="请输入" />
</el-form-item>
<el-row>
<el-form-item label="上级类目" prop="pid">
@ -96,8 +96,9 @@
v-model="form.pid"
:options="menus"
:load-options="loadMenus"
style="width: 450px;"
placeholder="选择上级类目"
style="width: 560px;"
placeholder="请选择"
@input="changePid"
/>
</el-form-item>
</el-row>
@ -204,16 +205,40 @@ export default {
del: ['admin', 'menu:del']
},
rules: {
type: [
{ required: true, message: '菜单类型不可为空', trigger: 'change' }
],
// icon: [
// { required: true, message: '菜单图标不可为空', trigger: 'change' }
// ],
iFrame: [
{ required: true, message: '请选择是否为外链菜单', trigger: 'change' }
],
hidden: [
{ required: true, message: '请选择菜单是否可见', trigger: 'change' }
],
cache: [
{ required: true, message: '请选择菜单是否缓存', trigger: 'change' }
],
title: [
{ required: true, message: '请输入标题', trigger: 'blur' }
{ required: true, message: '菜单名称不可为空', trigger: 'blur' }
],
path: [
{ required: true, message: '请输入地址', trigger: 'blur' }
{ required: true, message: '路由地址不可为空', trigger: 'blur' }
],
menuSort: [
{ required: true, message: '菜单排序不可为空', trigger: 'blur' }
],
pid: [
{ required: true, message: '上级类目不可为空', trigger: 'input' }
]
}
}
},
methods: {
changePid() {
this.$refs.form.validateField('pid')
},
// 新增与编辑前做的操作
[CRUD.HOOK.afterToCU](crud, form) {
this.menus = []
@ -268,8 +293,44 @@ export default {
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-input-number .el-input__inner {
text-align: left;
<style lang="scss" scoped>
// ::v-deep .el-input-number .el-input__inner {
// text-align: left;
// }
::v-deep .el-dialog {
.el-dialog__body {
.el-form-item{
margin-right: 5px;
&:nth-child(odd){
margin-right: 5px;
}
&.menu-radio{
width: 228px;
margin-right: 0;
.el-form-item__content{
width: 126px;
}
}
&.menu-is-row{
.el-form-item__content{
width: 560px;
}
}
&.menu-is-item{
.el-form-item__content{
width: 225px;
}
}
}
}
}
::v-deep .el-dialog .el-dialog__body .el-form-item.is-error {
.vue-treeselect__control{
border-color: #ed4a41 !important;
}
}
</style>
Write Preview
Loading…
Cancel
Save