<template>
|
<zt-dialog ref="dialog" @confirm="formSubmit" append-to-body>
|
<el-form :model="dataForm" ref="dataForm" :disabled="dataForm.disabled" label-width="120px">
|
<el-form-item prop="type" :label="$t('menu.type')">
|
<zt-dict v-model="dataForm.type" dict="menu_type" :excluded="[$dict.MenuType.PLATFORM]" :radio="true" :disabled="!!dataForm.id"></zt-dict>
|
</el-form-item>
|
|
<zt-form-item prop="name" :label="$t('menu.name')" rules="required">
|
<el-input v-model="dataForm.name" :placeholder="$t('menu.name')"></el-input>
|
</zt-form-item>
|
<zt-form-item :label="$t('menu.parentName')" prop="pid" rules="required" v-show="!$equalsIgnoreType(dataForm.type, $dict.MenuType.SYSTEM)">
|
<zt-combo-tree v-model="dataForm.pid" :datas="menuList"/>
|
</zt-form-item>
|
<el-form-item v-if="$equalsIgnoreType(dataForm.type, menuType)" prop="url" :label="$t('menu.url')">
|
<el-input v-model="dataForm.url" :placeholder="$t('menu.url')"></el-input>
|
</el-form-item>
|
<el-form-item prop="sort" :label="$t('menu.sort')">
|
<el-input-number v-model="dataForm.sort" controls-position="right" :min="0" :label="$t('menu.sort')"></el-input-number>
|
</el-form-item>
|
<!-- <el-form-item prop="showMenu" label="是否显示">-->
|
<!-- <el-radio v-model="dataForm.showMenu" label='0'>否</el-radio>-->
|
<!-- <el-radio v-model="dataForm.showMenu" label='1'>是</el-radio>-->
|
<!-- </el-form-item>-->
|
<zt-form-item label="是否显示" prop="showMenu">
|
<el-radio-group v-model="dataForm.showMenu">
|
<el-radio :label="1">是</el-radio>
|
<el-radio :label="0">否</el-radio>
|
</el-radio-group>
|
</zt-form-item>
|
<el-form-item prop="params" label="菜单参数">
|
<el-input v-model="dataForm.params"></el-input>
|
</el-form-item>
|
<el-form-item v-show="!$equalsIgnoreType(dataForm.type, $dict.MenuType.SYSTEM)" prop="permissions" :label="$t('menu.permissions')">
|
<el-input v-model="dataForm.permissions" :placeholder="$t('menu.permissionsTips')"></el-input>
|
</el-form-item>
|
<el-form-item v-if="$equalsIgnoreType(dataForm.type, menuType) || $equalsIgnoreType(dataForm.type, $dict.MenuType.SYSTEM)" prop="icon" :label="$t('menu.icon')" class="icon-list">
|
<el-popover v-model="iconListVisible" ref="iconListPopover" placement="bottom-start" trigger="click" popper-class="mod-sys__menu-icon-popover">
|
<div class="mod-sys__menu-icon-inner">
|
<div class="mod-sys__menu-icon-list">
|
<el-button
|
v-for="(item, index) in iconList"
|
:key="index"
|
@click="iconListCurrentChangeHandle(item)"
|
:class="{ 'is-active': dataForm.icon === item }">
|
<svg class="icon-svg" aria-hidden="true"><use :xlink:href="`#${item}`"></use></svg>
|
</el-button>
|
</div>
|
</div>
|
</el-popover>
|
<el-input v-model="dataForm.icon" v-popover:iconListPopover :readonly="true" :placeholder="$t('menu.icon')"></el-input>
|
</el-form-item>
|
<el-form-item prop="remark" :label="$t('menu.remark')">
|
<el-input v-model="dataForm.remark"></el-input>
|
</el-form-item>
|
</el-form>
|
</zt-dialog>
|
</template>
|
|
<script>
|
import {getIconList} from '../../../utils'
|
export default {
|
data() {
|
return {
|
menuList: [],
|
iconList: [],
|
iconListVisible: false,
|
dataForm: {
|
id: '',
|
type: this.$dict.MenuType.MENU,
|
name: '',
|
pid: '0',
|
showMenu:1,
|
url: '',
|
permissions: '',
|
sort: 0,
|
icon: '',
|
remark: ''
|
},
|
showMenuList:[{name:'显示',value:1},{name:'隐藏',value:0}]
|
}
|
},
|
computed: {
|
menuType() {
|
if (this.$dict && this.$dict.MenuType) {
|
return this.$dict.MenuType.MENU;
|
}
|
return '';
|
},
|
menuTypePLATFORM() {
|
if (this.$dict && this.$dict.MenuType) {
|
return this.$dict.MenuType.PLATFORM;
|
}
|
return '';
|
},
|
menuTypeSYSTEM() {
|
if (this.$dict && this.$dict.MenuType) {
|
return this.$dict.MenuType.SYSTEM;
|
}
|
return '';
|
}
|
},
|
watch: {
|
'dataForm.type'(val) {
|
this.$refs['dataForm'].clearValidate()
|
}
|
},
|
methods: {
|
equalsIgnoreType(data1, data2) {
|
console.log(data1,data2,'data1, data2data1, data2')
|
// alert('data1:'+data1+'data2:'+data2)
|
if (typeof data1 === 'boolean') {
|
data1 = data1 ? 1 : 0
|
}
|
if (data1 === 'true') {
|
data1 = 1
|
}
|
if (data1 === 'false') {
|
data1 = 0
|
}
|
if (typeof data2 === 'boolean') {
|
data2 = data2 ? 1 : 0
|
}
|
if (data2 === 'true') {
|
data2 = 1
|
}
|
if (data2 === 'false') {
|
data2 = 0
|
}
|
return (data1 + '') === (data2 + '')
|
},
|
init() {
|
this.iconList = getIconList()
|
this.getMenuList()
|
console.log(this.$dict.MenuType.MENU,"this.$dict.MenuType.MENU")
|
console.log(this.$dict.MenuType.PLATFORM,"this.$dict.MenuType.PLATFORM")
|
},
|
// 获取菜单列表
|
async getMenuList() {
|
let res = await this.$http.get('/sys/menu/treeWithoutButtons')
|
this.menuList = res.data
|
},
|
// 获取信息
|
async getInfo() {
|
let res = await this.$http.get(`/sys/menu/${this.dataForm.id}`)
|
this.dataForm = {
|
...this.dataForm,
|
...res.data
|
}
|
},
|
// 图标, 选中
|
iconListCurrentChangeHandle(icon) {
|
this.dataForm.icon = icon
|
this.iconListVisible = false
|
},
|
// 表单提交
|
async formSubmit() {
|
if (this.$equalsIgnoreType(this.dataForm.type, this.$dict.MenuType.SYSTEM)) {
|
this.dataForm.pid = '0'
|
this.dataForm.parentName = '一级菜单'
|
}
|
let res = await this.$http[!this.dataForm.id ? 'post' : 'put']('/sys/menu', this.dataForm)
|
if (res.success) {
|
this.$refs.dialog.close()
|
await this.$tip.success()
|
this.$emit('refreshDataList')
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.mod-sys__menu {
|
.icon-list {
|
.el-input__inner,
|
.el-input__suffix {
|
cursor: pointer;
|
}
|
}
|
&-icon-popover {
|
width: 458px;
|
overflow: hidden;
|
}
|
&-icon-inner {
|
width: 478px;
|
max-height: 258px;
|
overflow-x: hidden;
|
overflow-y: auto;
|
}
|
&-icon-list {
|
width: 458px;
|
padding: 0;
|
margin: -8px 0 0 -8px;
|
> .el-button {
|
padding: 8px;
|
margin: 8px 0 0 8px;
|
> span {
|
display: inline-block;
|
vertical-align: middle;
|
width: 18px;
|
height: 18px;
|
font-size: 18px;
|
}
|
}
|
}
|
}
|
</style>
|
