|
|
|
@ -1,37 +1,70 @@ |
|
|
|
<template> |
|
|
|
<el-dialog |
|
|
|
class="sl-menu-item" |
|
|
|
width="500px" |
|
|
|
class="sl-menu-item custom-role-dialog" |
|
|
|
width="800px" |
|
|
|
:title="!dataForm.id ? buttons.add :buttons.edit " |
|
|
|
:close-on-click-modal="false" |
|
|
|
:visible.sync="visible"> |
|
|
|
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" |
|
|
|
label-width="80px"> |
|
|
|
<el-form-item :label="buttons.roleName||'角色名称'" prop="roleName"> |
|
|
|
<el-input style="width: 150px" v-model="dataForm.roleName"></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item :label="buttons.remark||'备注'" prop="remark"> |
|
|
|
<el-input style="width: 150px" v-model="dataForm.remark" placeholder="备注"></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item size="mini" :label="buttons.authorize||'授权'"> |
|
|
|
<el-row> |
|
|
|
<el-col class="down-tree" :span="14"> |
|
|
|
<el-tree |
|
|
|
:data="menuList" |
|
|
|
:props="menuListTreeProps" |
|
|
|
node-key="menuId" |
|
|
|
ref="menuListTree" |
|
|
|
:default-expand-all="false" |
|
|
|
show-checkbox> |
|
|
|
</el-tree> |
|
|
|
<div class="form-section"> |
|
|
|
<el-row :gutter="20"> |
|
|
|
<el-col :span="12"> |
|
|
|
<el-form-item :label="buttons.roleName||'角色名称'" prop="roleName"> |
|
|
|
<el-input style="width: 100%" v-model="dataForm.roleName" placeholder="请输入角色名称"></el-input> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
<el-col :span="12"> |
|
|
|
<el-form-item :label="buttons.remark||'备注'" prop="remark"> |
|
|
|
<el-input style="width: 100%" v-model="dataForm.remark" placeholder="请输入备注信息"></el-input> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="auth-section"> |
|
|
|
<el-form-item size="mini" :label="buttons.authorize||'权限授权'"> |
|
|
|
<el-row> |
|
|
|
<el-col :span="24"> |
|
|
|
<el-input |
|
|
|
placeholder="输入菜单或按钮名称进行过滤" |
|
|
|
v-model="filterText" |
|
|
|
clearable |
|
|
|
prefix-icon="el-icon-search" |
|
|
|
@keyup.enter.native.stop |
|
|
|
class="filter-input"> |
|
|
|
</el-input> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
<el-row> |
|
|
|
<el-col class="down-tree" :span="24"> |
|
|
|
<el-tree |
|
|
|
:data="menuList" |
|
|
|
:props="menuListTreeProps" |
|
|
|
node-key="menuId" |
|
|
|
ref="menuListTree" |
|
|
|
:default-expand-all="false" |
|
|
|
:filter-node-method="filterNode" |
|
|
|
@check="handleTreeCheck" |
|
|
|
show-checkbox> |
|
|
|
<span class="custom-tree-node" slot-scope="{ node, data }" style="display: flex; align-items: center; width: 100%;"> |
|
|
|
<span style="margin-right: 20px; white-space: nowrap;">{{ node.label }}</span> |
|
|
|
<span v-if="data.buttonList && data.buttonList.length > 0" style="flex: 1; overflow-x: auto;"> |
|
|
|
<el-checkbox-group v-model="data.checkedButtons" @change="handleButtonChange(data)" @click.native.stop style="display: inline-block;"> |
|
|
|
<el-checkbox v-for="btn in data.buttonList" :key="btn.menuId" :label="Number(btn.menuId)">{{ btn.name }}</el-checkbox> |
|
|
|
</el-checkbox-group> |
|
|
|
</span> |
|
|
|
</span> |
|
|
|
</el-tree> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
|
|
|
|
</el-form-item> |
|
|
|
</el-form-item> |
|
|
|
</div> |
|
|
|
</el-form> |
|
|
|
<span slot="footer" class="dialog-footer"> |
|
|
|
<el-button @click="visible = false">{{ buttons.close || '关闭' }}</el-button> |
|
|
|
<el-button type="primary" @click="dataFormSubmit()">{{ buttons.submit || '确定' }}</el-button> |
|
|
|
<el-button type="primary" @click="visible = false">{{ buttons.close || '关闭' }}</el-button> |
|
|
|
</span> |
|
|
|
</el-dialog> |
|
|
|
</template> |
|
|
|
@ -45,6 +78,7 @@ export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
visible: false, |
|
|
|
filterText: '', |
|
|
|
menuList: [], |
|
|
|
menuListTreeProps: { |
|
|
|
label: 'name', |
|
|
|
@ -80,8 +114,82 @@ export default { |
|
|
|
tempKey: -666666 // 临时key, 用于解决tree半选中状态项不能传给后台接口问题. # 待优化 |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
watch: { |
|
|
|
filterText(val) { |
|
|
|
this.$refs.menuListTree.filter(val); |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
filterNode(value, data) { |
|
|
|
if (!value) return true; |
|
|
|
let matchButton = data.buttonList && data.buttonList.some(btn => btn.name.indexOf(value) !== -1); |
|
|
|
return data.name.indexOf(value) !== -1 || matchButton; |
|
|
|
}, |
|
|
|
processMenuTree(treeList) { |
|
|
|
for (let i = 0; i < treeList.length; i++) { |
|
|
|
let node = treeList[i] |
|
|
|
this.$set(node, 'buttonList', []) |
|
|
|
this.$set(node, 'checkedButtons', []) |
|
|
|
if (node.children && node.children.length > 0) { |
|
|
|
let normalChildren = [] |
|
|
|
for (let child of node.children) { |
|
|
|
if (child.type === 2) { |
|
|
|
node.buttonList.push(child) |
|
|
|
} else { |
|
|
|
normalChildren.push(child) |
|
|
|
} |
|
|
|
} |
|
|
|
node.children = normalChildren |
|
|
|
this.processMenuTree(node.children) |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
populateCheckedButtons(treeList, checkedIds, treeCheckedKeys) { |
|
|
|
for (let node of treeList) { |
|
|
|
if (checkedIds.includes(Number(node.menuId))) { |
|
|
|
if (!node.children || node.children.length === 0) { |
|
|
|
treeCheckedKeys.push(Number(node.menuId)) |
|
|
|
} |
|
|
|
} |
|
|
|
if (node.buttonList && node.buttonList.length > 0) { |
|
|
|
node.checkedButtons = node.buttonList |
|
|
|
.filter(btn => checkedIds.includes(Number(btn.menuId))) |
|
|
|
.map(btn => Number(btn.menuId)) |
|
|
|
} |
|
|
|
if (node.children) { |
|
|
|
this.populateCheckedButtons(node.children, checkedIds, treeCheckedKeys) |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
handleTreeCheck(data, checkedInfo) { |
|
|
|
let isChecked = checkedInfo.checkedKeys.includes(data.menuId) |
|
|
|
this.toggleButtons(data, isChecked) |
|
|
|
}, |
|
|
|
toggleButtons(node, isChecked) { |
|
|
|
if (isChecked) { |
|
|
|
node.checkedButtons = node.buttonList ? node.buttonList.map(b => Number(b.menuId)) : [] |
|
|
|
} else { |
|
|
|
node.checkedButtons = [] |
|
|
|
} |
|
|
|
if (node.children) { |
|
|
|
node.children.forEach(child => this.toggleButtons(child, isChecked)) |
|
|
|
} |
|
|
|
}, |
|
|
|
handleButtonChange(data) { |
|
|
|
if (data.checkedButtons.length > 0) { |
|
|
|
this.$refs.menuListTree.setChecked(data.menuId, true, false) |
|
|
|
} |
|
|
|
}, |
|
|
|
getAllCheckedButtons(treeList, result) { |
|
|
|
for (let node of treeList) { |
|
|
|
if (node.checkedButtons && node.checkedButtons.length > 0) { |
|
|
|
result.push(...node.checkedButtons) |
|
|
|
} |
|
|
|
if (node.children) { |
|
|
|
this.getAllCheckedButtons(node.children, result) |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
init(id) { |
|
|
|
this.getFunctionButtonList() |
|
|
|
this.dataForm.id = id || 0 |
|
|
|
@ -90,7 +198,9 @@ export default { |
|
|
|
method: 'get', |
|
|
|
params: this.$http.adornParams() |
|
|
|
}).then(({data}) => { |
|
|
|
this.menuList = treeDataTranslate(data, 'menuId') |
|
|
|
let treeData = treeDataTranslate(data, 'menuId') |
|
|
|
this.processMenuTree(treeData) |
|
|
|
this.menuList = treeData |
|
|
|
}).then(() => { |
|
|
|
this.visible = true |
|
|
|
this.$nextTick(() => { |
|
|
|
@ -114,10 +224,10 @@ export default { |
|
|
|
console.log(data.role.menuIdList) |
|
|
|
let x1 = data.role.menuIdList.map(Number) |
|
|
|
console.log(x1) |
|
|
|
let treeCheckedKeys = [] |
|
|
|
this.populateCheckedButtons(this.menuList, x1, treeCheckedKeys) |
|
|
|
this.$nextTick(() => { |
|
|
|
for (let x1Element of x1) { |
|
|
|
this.$refs.menuListTree.setChecked(x1Element, true, false) |
|
|
|
} |
|
|
|
this.$refs.menuListTree.setCheckedKeys(treeCheckedKeys) |
|
|
|
}) |
|
|
|
} |
|
|
|
}) |
|
|
|
@ -134,14 +244,14 @@ export default { |
|
|
|
dataFormSubmit() { |
|
|
|
this.$refs['dataForm'].validate((valid) => { |
|
|
|
if (valid) { |
|
|
|
// let temp = { |
|
|
|
// readOnly: 'N', |
|
|
|
// canDelete: 'N', |
|
|
|
// canModified: 'N', |
|
|
|
// fullControl: 'N', |
|
|
|
// menuId: this.tempKey |
|
|
|
// } |
|
|
|
// let menusList = [].concat(this.$refs.menuListTree.getCheckedNodes(), [temp], this.$refs.menuListTree.getHalfCheckedNodes()) |
|
|
|
let buttonIds = [] |
|
|
|
this.getAllCheckedButtons(this.menuList, buttonIds) |
|
|
|
let treeKeys = this.$refs.menuListTree.getCheckedKeys() |
|
|
|
let halfKeys = this.$refs.menuListTree.getHalfCheckedKeys() |
|
|
|
let finalMenuIds = [...new Set([...treeKeys, ...halfKeys, ...buttonIds])] |
|
|
|
if (this.tempKey) { |
|
|
|
finalMenuIds.push(this.tempKey) |
|
|
|
} |
|
|
|
this.$http({ |
|
|
|
url: this.$http.adornUrl(`/sys/role/${!this.dataForm.id ? 'save' : 'update'}`), |
|
|
|
method: 'post', |
|
|
|
@ -149,8 +259,7 @@ export default { |
|
|
|
'roleId': this.dataForm.id || undefined, |
|
|
|
'roleName': this.dataForm.roleName, |
|
|
|
'remark': this.dataForm.remark, |
|
|
|
'menuIdList': [].concat(this.$refs.menuListTree.getCheckedKeys(), [this.tempKey], this.$refs.menuListTree.getHalfCheckedKeys()) |
|
|
|
// 'menuIdList': menusList |
|
|
|
'menuIdList': finalMenuIds |
|
|
|
}) |
|
|
|
}).then(({data}) => { |
|
|
|
if (data && data.code === 0) { |
|
|
|
@ -186,13 +295,51 @@ export default { |
|
|
|
</script> |
|
|
|
<style lang="scss"> |
|
|
|
|
|
|
|
.down-tree { |
|
|
|
|
|
|
|
height: 300px; |
|
|
|
|
|
|
|
display: block; |
|
|
|
|
|
|
|
overflow-y: scroll; |
|
|
|
|
|
|
|
.custom-role-dialog { |
|
|
|
.el-dialog__body { |
|
|
|
padding: 20px 30px; |
|
|
|
} |
|
|
|
.form-section { |
|
|
|
margin-bottom: 10px; |
|
|
|
} |
|
|
|
.auth-section { |
|
|
|
border-top: 1px solid #ebeef5; |
|
|
|
padding-top: 20px; |
|
|
|
} |
|
|
|
.filter-input { |
|
|
|
margin-bottom: 15px; |
|
|
|
} |
|
|
|
.down-tree { |
|
|
|
height: 400px; |
|
|
|
display: block; |
|
|
|
overflow-y: auto; |
|
|
|
border: 1px solid #ebeef5; |
|
|
|
border-radius: 4px; |
|
|
|
padding: 10px; |
|
|
|
background-color: #fafafa; |
|
|
|
} |
|
|
|
.el-tree { |
|
|
|
background-color: transparent; |
|
|
|
} |
|
|
|
.custom-tree-node { |
|
|
|
.el-checkbox { |
|
|
|
margin-right: 15px; |
|
|
|
} |
|
|
|
.el-checkbox__label { |
|
|
|
padding-left: 5px; |
|
|
|
color: #606266; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
/* 优化树形节点高度和样式 */ |
|
|
|
.el-tree-node__content { |
|
|
|
height: auto; |
|
|
|
min-height: 36px; |
|
|
|
padding-top: 4px; |
|
|
|
padding-bottom: 4px; |
|
|
|
} |
|
|
|
.el-tree-node__content:hover { |
|
|
|
background-color: #f0f7ff; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
fengyuan_yang
2 weeks ago