fix:修复部分bug
This commit is contained in:
xiongchengqiang
parent
6c958c1363
commit
d8c0694830
@ -106,7 +106,7 @@ export default {
|
||||
},
|
||||
// 删除
|
||||
handleDelete (id) {
|
||||
this.$confirm(`确定对[id=${id}]进行[删除]操作?`, '提示', {
|
||||
this.$confirm(`确定删除该菜单吗？该菜单下面所有内容都将被删除。`, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
|
||||
@ -1,19 +1,41 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:title="!dataForm.id ? '新增' : '编辑'"
|
||||
:title="!dataForm.id ? '新增菜单' : '编辑菜单'"
|
||||
:close-on-click-modal="false"
|
||||
:visible.sync="visible">
|
||||
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="handleConfirm()" label-width="80px">
|
||||
:visible.sync="visible"
|
||||
>
|
||||
<el-form
|
||||
:model="dataForm"
|
||||
:rules="dataRule"
|
||||
ref="dataForm"
|
||||
@keyup.enter.native="handleConfirm()"
|
||||
label-width="80px"
|
||||
>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-radio-group v-model="dataForm.type">
|
||||
<el-radio v-for="(type, index) in dataForm.typeList" :label="index" :key="index">{{ type }}</el-radio>
|
||||
<el-radio
|
||||
v-for="(type, index) in dataForm.typeList"
|
||||
:label="index"
|
||||
:key="index"
|
||||
>{{ type }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item :label="dataForm.typeList[dataForm.type] + '名称'" prop="name">
|
||||
<el-input v-model="dataForm.name" :placeholder="dataForm.typeList[dataForm.type] + '名称'"></el-input>
|
||||
<el-input
|
||||
maxlength="20"
|
||||
show-word-limit
|
||||
clearable
|
||||
v-model="dataForm.name"
|
||||
:placeholder="dataForm.typeList[dataForm.type] + '名称'"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="上级菜单" prop="parentName">
|
||||
<el-popover ref="menuListPopover" placement="bottom-start" trigger="click">
|
||||
<el-form-item v-if="dataForm.type !== 0" label="上级菜单" prop="parentName">
|
||||
<el-popover
|
||||
v-model="visiblePopover"
|
||||
ref="menuListPopover"
|
||||
placement="bottom-start"
|
||||
trigger="click"
|
||||
>
|
||||
<el-tree
|
||||
:data="menuList"
|
||||
:props="menuListTreeProps"
|
||||
@ -22,41 +44,69 @@
|
||||
@current-change="menuListTreeCurrentChangeHandle"
|
||||
:default-expand-all="true"
|
||||
:highlight-current="true"
|
||||
:expand-on-click-node="false">
|
||||
</el-tree>
|
||||
:expand-on-click-node="false"
|
||||
></el-tree>
|
||||
</el-popover>
|
||||
<el-input v-model="dataForm.parentName" v-popover:menuListPopover :readonly="true" placeholder="点击选择上级菜单" class="menu-list__input"></el-input>
|
||||
<el-input
|
||||
v-model="dataForm.parentName"
|
||||
v-popover:menuListPopover
|
||||
:readonly="true"
|
||||
placeholder="点击选择上级菜单"
|
||||
class="menu-list__input"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="dataForm.type === 1" label="菜单路由" prop="url">
|
||||
<el-input v-model="dataForm.url" placeholder="菜单路由"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="dataForm.type !== 0" label="授权标识" prop="perms">
|
||||
<el-input v-model="dataForm.perms" placeholder="多个用逗号分隔, 如: user:list,user:create"></el-input>
|
||||
<el-form-item v-if="dataForm.type === 1" label="菜单URL" prop="url">
|
||||
<el-input
|
||||
type="textarea"
|
||||
maxlength="100"
|
||||
show-word-limit
|
||||
v-model="dataForm.url"
|
||||
placeholder="菜单URL"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="dataForm.type !== 2" label="排序号" prop="orderNum">
|
||||
<el-input-number v-model="dataForm.orderNum" controls-position="right" :min="0" label="排序号"></el-input-number>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-if="dataForm.type !== 2" label="菜单图标" prop="icon">
|
||||
<el-row>
|
||||
<el-col :span="22">
|
||||
<el-popover ref="iconListPopover" placement="bottom-start" trigger="click" popper-class="mod-menu__icon-popover">
|
||||
<el-popover
|
||||
ref="iconListPopover"
|
||||
placement="bottom-start"
|
||||
trigger="click"
|
||||
popper-class="mod-menu__icon-popover"
|
||||
>
|
||||
<div class="mod-menu__icon-inner">
|
||||
<div class="mod-menu__icon-list">
|
||||
<el-button
|
||||
v-for="(item, index) in iconList"
|
||||
:key="index"
|
||||
@click="iconActiveHandle(item)"
|
||||
:class="{ 'is-active': item === dataForm.icon }">
|
||||
:class="{ 'is-active': item === dataForm.icon }"
|
||||
>
|
||||
<icon-svg :name="item"></icon-svg>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-popover>
|
||||
<el-input v-model="dataForm.icon" v-popover:iconListPopover :readonly="true" placeholder="菜单图标名称" class="icon-list__input"></el-input>
|
||||
<el-input
|
||||
v-model="dataForm.icon"
|
||||
v-popover:iconListPopover
|
||||
:readonly="true"
|
||||
placeholder="菜单图标名称"
|
||||
class="icon-list__input"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="2" class="icon-list__tips">
|
||||
<el-tooltip placement="top" effect="light">
|
||||
<div slot="content">全站推荐使用SVG Sprite, 详细请参考:<a href="//github.com/daxiongYang/renren-fast-vue/blob/master/src/icons/index.js" target="_blank">icons/index.js</a>描述</div>
|
||||
<div slot="content">
|
||||
全站推荐使用SVG Sprite, 详细请参考:
|
||||
<a
|
||||
href="//github.com/daxiongYang/renren-fast-vue/blob/master/src/icons/index.js"
|
||||
target="_blank"
|
||||
>icons/index.js</a>描述
|
||||
</div>
|
||||
<i class="el-icon-warning"></i>
|
||||
</el-tooltip>
|
||||
</el-col>
|
||||
@ -71,175 +121,174 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { treeDataTranslate } from '@/utils'
|
||||
import Icon from '@/icons'
|
||||
import { apiSysMenuSelect, apiSysMenuInfo, apiSysMenuConfirm } from '@/api/api_sys'
|
||||
import { treeDataTranslate } from '@/utils'
|
||||
import Icon from '@/icons'
|
||||
import { apiSysMenuSelect, apiSysMenuInfo, apiSysMenuConfirm } from '@/api/api_sys'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
var validateUrl = (rule, value, callback) => {
|
||||
if (this.dataForm.type === 1 && !/\S/.test(value)) {
|
||||
callback(new Error('菜单URL不能为空'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
return {
|
||||
visible: false,
|
||||
dataForm: {
|
||||
id: 0,
|
||||
type: 1,
|
||||
typeList: ['目录', '菜单', '按钮'],
|
||||
name: '',
|
||||
parentId: 0,
|
||||
parentName: '',
|
||||
url: '',
|
||||
perms: '',
|
||||
orderNum: 0,
|
||||
icon: '',
|
||||
iconList: []
|
||||
},
|
||||
dataRule: {
|
||||
name: [{ required: true, message: '菜单名称不能为空', trigger: 'blur' }],
|
||||
parentName: [{ required: true, message: '上级菜单不能为空', trigger: 'change' }],
|
||||
url: [{ validator: validateUrl, trigger: 'blur' }]
|
||||
},
|
||||
menuList: [],
|
||||
menuListTreeProps: {
|
||||
label: 'name',
|
||||
children: 'children'
|
||||
},
|
||||
apiType: '' // api类型
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.iconList = Icon.getNameList()
|
||||
},
|
||||
methods: {
|
||||
init (id) {
|
||||
this.handleGetSysMenuSelect()
|
||||
if (id) {
|
||||
this.dataForm.id = id || 0
|
||||
this.apiType = '/update'
|
||||
this.handleEdit()
|
||||
} else { // 新增
|
||||
this.apiType = '/save'
|
||||
}
|
||||
},
|
||||
// 获取下拉选择的菜单列表
|
||||
handleGetSysMenuSelect () {
|
||||
apiSysMenuSelect({}).then(res => {
|
||||
this.menuList = treeDataTranslate(res.menuList, 'menuId')
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].resetFields()
|
||||
this.menuListTreeSetCurrentNode()
|
||||
})
|
||||
})
|
||||
},
|
||||
// 编辑
|
||||
handleEdit () {
|
||||
apiSysMenuInfo({}, `/${this.dataForm.id}`).then(res => {
|
||||
this.dataForm.id = res.menu.menuId
|
||||
this.dataForm.type = res.menu.type
|
||||
this.dataForm.name = res.menu.name
|
||||
this.dataForm.parentId = res.menu.parentId
|
||||
this.dataForm.url = res.menu.url
|
||||
this.dataForm.perms = res.menu.perms
|
||||
this.dataForm.orderNum = res.menu.orderNum
|
||||
this.dataForm.icon = res.menu.icon
|
||||
this.menuListTreeSetCurrentNode()
|
||||
})
|
||||
},
|
||||
// 提交
|
||||
handleConfirm () {
|
||||
this.$refs['dataForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
let params = {
|
||||
'menuId': this.dataForm.id || undefined,
|
||||
'type': this.dataForm.type,
|
||||
'name': this.dataForm.name,
|
||||
'parentId': this.dataForm.parentId,
|
||||
'url': this.dataForm.url,
|
||||
'perms': this.dataForm.perms,
|
||||
'orderNum': this.dataForm.orderNum,
|
||||
'icon': this.dataForm.icon
|
||||
}
|
||||
apiSysMenuConfirm(params, this.apiType).then(res => {
|
||||
if (res && res.code === 0) {
|
||||
this.$message({
|
||||
message: '操作成功',
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$message.error(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 菜单树选中
|
||||
menuListTreeCurrentChangeHandle (data, node) {
|
||||
this.dataForm.parentId = data.menuId
|
||||
this.dataForm.parentName = data.name
|
||||
},
|
||||
// 菜单树设置当前选中节点
|
||||
menuListTreeSetCurrentNode () {
|
||||
this.$refs.menuListTree.setCurrentKey(this.dataForm.parentId)
|
||||
this.dataForm.parentName = (this.$refs.menuListTree.getCurrentNode() || {})['name']
|
||||
},
|
||||
// 图标选中
|
||||
iconActiveHandle (iconName) {
|
||||
this.dataForm.icon = iconName
|
||||
export default {
|
||||
data () {
|
||||
var validateUrl = (rule, value, callback) => {
|
||||
if (this.dataForm.type === 1 && !/\S/.test(value)) {
|
||||
callback(new Error('菜单URL不能为空'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
return {
|
||||
visible: false,
|
||||
visiblePopover: false,
|
||||
dataForm: {
|
||||
id: 0,
|
||||
type: 1,
|
||||
typeList: ['目录', '菜单', '按钮'],
|
||||
name: '',
|
||||
parentId: 0,
|
||||
parentName: '',
|
||||
url: '',
|
||||
orderNum: 0,
|
||||
icon: '',
|
||||
iconList: []
|
||||
},
|
||||
dataRule: {
|
||||
name: [{ required: true, message: '菜单名称不能为空', trigger: 'blur' }],
|
||||
parentName: [{ required: true, message: '上级菜单不能为空', trigger: 'change' }],
|
||||
url: [{ validator: validateUrl, trigger: 'blur' }]
|
||||
},
|
||||
menuList: [],
|
||||
menuListTreeProps: {
|
||||
label: 'name',
|
||||
children: 'children'
|
||||
},
|
||||
apiType: '' // api类型
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.iconList = Icon.getNameList()
|
||||
},
|
||||
methods: {
|
||||
init (id) {
|
||||
this.handleGetSysMenuSelect()
|
||||
this.dataForm.id = id || 0
|
||||
if (id) {
|
||||
this.apiType = '/update'
|
||||
this.handleEdit()
|
||||
} else { // 新增
|
||||
this.apiType = '/save'
|
||||
}
|
||||
},
|
||||
// 获取下拉选择的菜单列表
|
||||
handleGetSysMenuSelect () {
|
||||
apiSysMenuSelect({}).then(res => {
|
||||
this.menuList = treeDataTranslate(res.menuList, 'menuId')
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].resetFields()
|
||||
this.menuListTreeSetCurrentNode()
|
||||
})
|
||||
})
|
||||
},
|
||||
// 编辑
|
||||
handleEdit () {
|
||||
apiSysMenuInfo({}, `/${this.dataForm.id}`).then(res => {
|
||||
this.dataForm.id = res.menu.menuId
|
||||
this.dataForm.type = res.menu.type
|
||||
this.dataForm.name = res.menu.name
|
||||
this.dataForm.parentId = res.menu.parentId
|
||||
this.dataForm.url = res.menu.url
|
||||
this.dataForm.orderNum = res.menu.orderNum
|
||||
this.dataForm.icon = res.menu.icon
|
||||
this.menuListTreeSetCurrentNode()
|
||||
})
|
||||
},
|
||||
// 提交
|
||||
handleConfirm () {
|
||||
this.$refs['dataForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
let params = {
|
||||
'menuId': this.dataForm.id || undefined,
|
||||
'type': this.dataForm.type,
|
||||
'name': this.dataForm.name,
|
||||
'parentId': this.dataForm.parentId,
|
||||
'url': this.dataForm.url,
|
||||
'orderNum': this.dataForm.orderNum,
|
||||
'icon': this.dataForm.icon
|
||||
}
|
||||
apiSysMenuConfirm(params, this.apiType).then(res => {
|
||||
if (res && res.code === 0) {
|
||||
this.$message({
|
||||
message: '操作成功',
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$message.error(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 菜单树选中
|
||||
menuListTreeCurrentChangeHandle (data, node) {
|
||||
this.dataForm.parentId = data.menuId
|
||||
this.dataForm.parentName = data.name
|
||||
this.visiblePopover = false
|
||||
},
|
||||
// 菜单树设置当前选中节点
|
||||
menuListTreeSetCurrentNode () {
|
||||
this.$refs.menuListTree.setCurrentKey(this.dataForm.parentId)
|
||||
this.dataForm.parentName = (this.$refs.menuListTree.getCurrentNode() || {})['name']
|
||||
},
|
||||
// 图标选中
|
||||
iconActiveHandle (iconName) {
|
||||
this.dataForm.icon = iconName
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.mod-menu {
|
||||
.menu-list__input,
|
||||
.icon-list__input {
|
||||
> .el-input__inner {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
.icon-list__tips {
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
color: #e6a23c;
|
||||
.mod-menu {
|
||||
.menu-list__input,
|
||||
.icon-list__input {
|
||||
> .el-input__inner {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
.icon-list__tips {
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
color: #e6a23c;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user