|
|
|
@ -18,8 +18,10 @@ |
|
|
|
</CustomTable> |
|
|
|
<pagination /> |
|
|
|
<!--弹出框内容--> |
|
|
|
<el-dialog |
|
|
|
width="80%" |
|
|
|
<el-drawer |
|
|
|
ref="roleDrawer" |
|
|
|
direction="rtl" |
|
|
|
size="90%" |
|
|
|
:before-close="crud.cancelCU" |
|
|
|
:visible="crud.status.editor > 0" |
|
|
|
:title="crud.status.title" |
|
|
|
@ -33,14 +35,15 @@ |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="功能权限："> |
|
|
|
<el-table |
|
|
|
ref="menuList" |
|
|
|
:data="menuList" |
|
|
|
ref="permissions" |
|
|
|
:data="permissions" |
|
|
|
border |
|
|
|
fit |
|
|
|
height="680" |
|
|
|
highlight-current-row |
|
|
|
row-key="permission.id" |
|
|
|
:default-expand-all="true" |
|
|
|
:tree-props="{children: 'children', hasChildren: 'hasChildren'}" |
|
|
|
style="width: 99%;" |
|
|
|
> |
|
|
|
<el-table-column label="菜单名称" width="400"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
@ -63,15 +66,27 @@ |
|
|
|
</el-table> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
<div slot="footer" class="dialog-footer"> |
|
|
|
<el-button @click="crud.cancelCU"> |
|
|
|
取 消 |
|
|
|
</el-button> |
|
|
|
<el-button type="primary" @click="crud.submitCU"> |
|
|
|
确 认 |
|
|
|
</el-button> |
|
|
|
</div> |
|
|
|
</el-dialog> |
|
|
|
<el-row :gutter="20"> |
|
|
|
<el-col :span="4" :offset="2"> |
|
|
|
<el-select v-model="showMode" @change="changeShowMode"> |
|
|
|
<el-option |
|
|
|
v-for="(item, index) in showModes" |
|
|
|
:key="index" |
|
|
|
:label="item" |
|
|
|
:value="index" |
|
|
|
/> |
|
|
|
</el-select> |
|
|
|
</el-col> |
|
|
|
<el-col :span="4" :offset="14"> |
|
|
|
<el-button type="primary" @click="crud.submitCU"> |
|
|
|
确 认 |
|
|
|
</el-button> |
|
|
|
<el-button @click="crud.cancelCU"> |
|
|
|
取 消 |
|
|
|
</el-button> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
</el-drawer> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
@ -98,7 +113,7 @@ const defaultForm = form({ |
|
|
|
id: null, |
|
|
|
roleName: '', |
|
|
|
roleCode: '', |
|
|
|
menuOptionIds: {} |
|
|
|
resourcePermissionIds: {} |
|
|
|
}) |
|
|
|
|
|
|
|
export default { |
|
|
|
@ -107,7 +122,7 @@ export default { |
|
|
|
mixins: [defaultCrud, defaultForm, header()], |
|
|
|
data() { |
|
|
|
return { |
|
|
|
menuList: [], |
|
|
|
permissions: [], |
|
|
|
colConfigs: [ |
|
|
|
{ prop: 'roleName', label: '角色名称', align: 'center' }, |
|
|
|
{ prop: 'roleCode', label: '角色代码', align: 'center' }, |
|
|
|
@ -126,7 +141,9 @@ export default { |
|
|
|
{ required: true, message: '请输入角色代码', trigger: 'blur' } |
|
|
|
] |
|
|
|
}, |
|
|
|
checkedIds: new Set() |
|
|
|
checkedIds: new Set(), |
|
|
|
showMode: 0, |
|
|
|
showModes: ['合并所有', '展开所有', '全部勾选', '取消勾选'] |
|
|
|
} |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
@ -135,7 +152,7 @@ export default { |
|
|
|
methods: { |
|
|
|
// 新增与编辑前做的操作 |
|
|
|
[CRUD.HOOK.afterToCU]() { |
|
|
|
this.clearChecked(this.menuList) |
|
|
|
this.clearChecked(this.permissions) |
|
|
|
this.checkedIds.clear() |
|
|
|
}, |
|
|
|
// 编辑框打开后做的操作 |
|
|
|
@ -144,18 +161,55 @@ export default { |
|
|
|
}, |
|
|
|
// 提交前的验证 |
|
|
|
[CRUD.HOOK.afterValidateCU]() { |
|
|
|
this.form.menuOptionIds = Array.from(this.checkedIds) |
|
|
|
this.form.resourcePermissionIds = Array.from(this.checkedIds) |
|
|
|
}, |
|
|
|
/** |
|
|
|
* 改变展示方式 |
|
|
|
*/ |
|
|
|
changeShowMode(val) { |
|
|
|
switch (val) { |
|
|
|
case 0: |
|
|
|
this.permissions.forEach(row => { |
|
|
|
setTimeout(() => { |
|
|
|
this.$refs.permissions.toggleRowExpansion(row, false) |
|
|
|
}, 1000) |
|
|
|
}) |
|
|
|
break |
|
|
|
case 1: |
|
|
|
this.permissions.forEach(row => { |
|
|
|
setTimeout(() => { |
|
|
|
this.$refs.permissions.toggleRowExpansion(row, true) |
|
|
|
}, 1000) |
|
|
|
}) |
|
|
|
break |
|
|
|
case 2: |
|
|
|
this.permissions.forEach(row => { |
|
|
|
row.checked = true |
|
|
|
row.indeterminate = false |
|
|
|
this.handleCheckAllChange(row, true) |
|
|
|
}) |
|
|
|
break |
|
|
|
case 3: |
|
|
|
this.permissions.forEach(row => { |
|
|
|
row.checked = false |
|
|
|
row.indeterminate = false |
|
|
|
this.handleCheckAllChange(row, false) |
|
|
|
}) |
|
|
|
break |
|
|
|
default: |
|
|
|
break |
|
|
|
} |
|
|
|
}, |
|
|
|
// 获取菜单树 |
|
|
|
getAllMenu() { |
|
|
|
getTree().then(data => { |
|
|
|
this.menuList = data |
|
|
|
this.permissions = data |
|
|
|
}) |
|
|
|
}, |
|
|
|
getRoleMenuList(roleId) { |
|
|
|
getPermissionsByRoleId(roleId).then(data => { |
|
|
|
data = data.map(row => row.resourcePermissionId) |
|
|
|
this.menuList.forEach(permission => { |
|
|
|
this.permissions.forEach(permission => { |
|
|
|
if (permission.children.length > 0) { |
|
|
|
this.echoChildren(permission.children, data) |
|
|
|
} else { |
|
|
|
@ -167,10 +221,12 @@ export default { |
|
|
|
handleCheckAllChange(val, checked) { |
|
|
|
// 有下级去处理下级 |
|
|
|
if (val.children.length > 0) { |
|
|
|
if (checked) { |
|
|
|
this.checkedIds.add(val.resourcePermissions[0].id) |
|
|
|
} else { |
|
|
|
this.checkedIds.delete(val.resourcePermissions[0].id) |
|
|
|
if (val.resourcePermissions.length) { |
|
|
|
if (checked) { |
|
|
|
this.checkedIds.add(val.resourcePermissions[0].id) |
|
|
|
} else { |
|
|
|
this.checkedIds.delete(val.resourcePermissions[0].id) |
|
|
|
} |
|
|
|
} |
|
|
|
this.findChildren(val.children, checked) |
|
|
|
} else { |
|
|
|
@ -186,7 +242,7 @@ export default { |
|
|
|
} |
|
|
|
// 处理上级 |
|
|
|
if (val.permission.pid !== 0) { |
|
|
|
this.findParent(this.menuList, val.permission.pid) |
|
|
|
this.findParent(this.permissions, val.permission.pid) |
|
|
|
} |
|
|
|
val.indeterminate = false |
|
|
|
}, |
|
|
|
@ -205,7 +261,7 @@ export default { |
|
|
|
val.indeterminate = checkedLength > 0 && checkedLength < length |
|
|
|
// 处理上级 |
|
|
|
if (val.permission.pid !== 0) { |
|
|
|
this.findParent(this.menuList, val.permission.pid) |
|
|
|
this.findParent(this.permissions, val.permission.pid) |
|
|
|
} |
|
|
|
}, |
|
|
|
findChildren(list, checked) { |
|
|
|
@ -250,7 +306,7 @@ export default { |
|
|
|
} |
|
|
|
// 如果还有上级，继续操作 |
|
|
|
if (result.permission.pid !== 0) { |
|
|
|
this.findParent(this.menuList, result.permission.pid) |
|
|
|
this.findParent(this.permissions, result.permission.pid) |
|
|
|
} |
|
|
|
} else if (result.children.length > 0) { |
|
|
|
this.findParent(result.children, pid) |
|
|
|
@ -281,8 +337,8 @@ export default { |
|
|
|
} |
|
|
|
}, |
|
|
|
// 递归清空菜单和选项 |
|
|
|
clearChecked(menuList) { |
|
|
|
menuList.forEach(permission => { |
|
|
|
clearChecked(permissions) { |
|
|
|
permissions.forEach(permission => { |
|
|
|
permission.checked = false |
|
|
|
permission.indeterminate = false |
|
|
|
permission.resourcePermissions.forEach(options => { |
|
|
|
|
