mirrors/pig-ui
1
0
Fork 0
mirror of https://gitee.com/log4j/pig-ui.git synced 2024-12-31 09:12:10 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

♻️ 重构代码:支持菜单级联选中功能

Browse Source
This commit is contained in:
lishangbu 2018-10-24 22:23:35 +08:00
parent 40ab216ac2
commit 4ab92abe20
1 changed files with 133 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

244
src/views/admin/role/index.vue
View File

@ -106,7 +106,7 @@
</el-dialog> </el-dialog>
<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogPermissionVisible"> <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogPermissionVisible">
<el-tree class="filter-tree" :data="treeData" :default-checked-keys="checkedKeys" check-strictly node-key="id" highlight-current :props="defaultProps" show-checkbox ref="menuTree" :filter-node-method="filterNode" default-expand-all> <el-tree class="filter-tree" :data="treeData" :default-checked-keys="checkedKeys" :check-strictly="false" node-key="id" highlight-current :props="defaultProps" show-checkbox ref="menuTree" :filter-node-method="filterNode" default-expand-all>
</el-tree> </el-tree>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button type="primary" @click="updatePermession(roleId, roleCode)">更 新</el-button> <el-button type="primary" @click="updatePermession(roleId, roleCode)">更 新</el-button>
@ -125,13 +125,13 @@ import {
permissionUpd, permissionUpd,
fetchRoleTree, fetchRoleTree,
fetchDeptTree fetchDeptTree
} from "@/api/role"; } from '@/api/role'
import { fetchTree } from "@/api/menu"; import { fetchTree } from '@/api/menu'
import { mapGetters } from "vuex"; import { mapGetters } from 'vuex'
import waves from "@/directive/waves/index.js"; // 水波纹指令 import waves from '@/directive/waves/index.js' // 水波纹指令
export default { export default {
name: "table_role", name: 'table_role',
directives: { directives: {
waves waves
}, },
@ -140,9 +140,10 @@ export default {
treeData: [], treeData: [],
treeDeptData: [], treeDeptData: [],
checkedKeys: [], checkedKeys: [],
menuIds: '',
defaultProps: { defaultProps: {
children: "children", children: 'children',
label: "name" label: 'name'
}, },
list: null, list: null,
total: null, total: null,
@ -164,206 +165,227 @@ export default {
roleName: [ roleName: [
{ {
required: true, required: true,
message: "角色名称", message: '角色名称',
trigger: "blur" trigger: 'blur'
}, },
{ {
min: 3, min: 3,
max: 20, max: 20,
message: "长度在 3 到 20 个字符", message: '长度在 3 到 20 个字符',
trigger: "blur" trigger: 'blur'
} }
], ],
roleCode: [ roleCode: [
{ {
required: true, required: true,
message: "角色标识", message: '角色标识',
trigger: "blur" trigger: 'blur'
}, },
{ {
min: 3, min: 3,
max: 20, max: 20,
message: "长度在 3 到 20 个字符", message: '长度在 3 到 20 个字符',
trigger: "blur" trigger: 'blur'
} }
], ],
roleDesc: [ roleDesc: [
{ {
required: true, required: true,
message: "角色标识", message: '角色标识',
trigger: "blur" trigger: 'blur'
}, },
{ {
min: 3, min: 3,
max: 20, max: 20,
message: "长度在 3 到 20 个字符", message: '长度在 3 到 20 个字符',
trigger: "blur" trigger: 'blur'
} }
] ]
}, },
statusOptions: ["0", "1"], statusOptions: ['0', '1'],
rolesOptions: undefined, rolesOptions: undefined,
dialogFormVisible: false, dialogFormVisible: false,
dialogDeptVisible: false, dialogDeptVisible: false,
dialogPermissionVisible: false, dialogPermissionVisible: false,
dialogStatus: "", dialogStatus: '',
textMap: { textMap: {
update: "编辑", update: '编辑',
create: "创建", create: '创建',
permission: "分配权限" permission: '分配权限'
}, },
tableKey: 0, tableKey: 0,
tableKey: 0,
roleManager_btn_add: false, roleManager_btn_add: false,
roleManager_btn_edit: false, roleManager_btn_edit: false,
roleManager_btn_del: false, roleManager_btn_del: false,
roleManager_btn_perm: false roleManager_btn_perm: false
}; }
}, },
created() { created() {
this.getList(); this.getList()
this.roleManager_btn_add = this.permissions["sys_role_add"]; this.roleManager_btn_add = this.permissions['sys_role_add']
this.roleManager_btn_edit = this.permissions["sys_role_edit"]; this.roleManager_btn_edit = this.permissions['sys_role_edit']
this.roleManager_btn_del = this.permissions["sys_role_del"]; this.roleManager_btn_del = this.permissions['sys_role_del']
this.roleManager_btn_perm = this.permissions["sys_role_perm"]; this.roleManager_btn_perm = this.permissions['sys_role_perm']
}, },
computed: { computed: {
...mapGetters(["elements", "permissions"]) ...mapGetters(['elements', 'permissions'])
}, },
methods: { methods: {
getList() { getList() {
this.listLoading = true; this.listLoading = true
fetchList(this.listQuery).then(response => { fetchList(this.listQuery).then(response => {
this.list = response.data.records; this.list = response.data.records
this.total = response.data.total; this.total = response.data.total
this.listLoading = false; this.listLoading = false
}); })
}, },
handleSizeChange(val) { handleSizeChange(val) {
this.listQuery.limit = val; this.listQuery.limit = val
this.getList(); this.getList()
}, },
handleCurrentChange(val) { handleCurrentChange(val) {
this.listQuery.page = val; this.listQuery.page = val
this.getList(); this.getList()
}, },
handleCreate() { handleCreate() {
this.resetTemp(); this.resetTemp()
this.dialogStatus = "create"; this.dialogStatus = 'create'
this.dialogFormVisible = true; this.dialogFormVisible = true
}, },
handleUpdate(row) { handleUpdate(row) {
getObj(row.roleId).then(response => { getObj(row.roleId).then(response => {
this.form = response.data; this.form = response.data
this.form.deptName = row.deptName; this.form.deptName = row.deptName
this.form.roleDeptId = row.roleDeptId; this.form.roleDeptId = row.roleDeptId
this.dialogFormVisible = true; this.dialogFormVisible = true
this.dialogStatus = "update"; this.dialogStatus = 'update'
}); })
}, },
handlePermission(row) { handlePermission(row) {
fetchRoleTree(row.roleCode) fetchRoleTree(row.roleCode)
.then(response => { .then(response => {
this.checkedKeys = response.data; this.checkedKeys = response.data
return fetchTree(); return fetchTree()
}) })
.then(response => { .then(response => {
this.treeData = response.data; this.treeData = response.data
this.dialogStatus = "permission"; this.checkedKeys = this.resolveAllLeafNodeId(this.treeData, this.checkedKeys, [])
this.dialogPermissionVisible = true; this.dialogStatus = 'permission'
this.roleId = row.roleId; this.dialogPermissionVisible = true
this.roleCode = row.roleCode; this.roleId = row.roleId
}); this.roleCode = row.roleCode
})
},
/**
* 解析出所有的叶子节点id
* @param json 待解析的json串
* @param idArr 原始节点数组
* @param temp 临时存放节点id的数组
* @return 叶子节点id数组
*/
resolveAllLeafNodeId(json, idArr, temp) {
for (let i = 0; i < json.length; i++) {
const item = json[i]
// 存在子节点，递归遍历;不存在子节点，将json的id添加到临时数组中
if (item.children && item.children.length !== 0) {
this.resolveAllLeafNodeId(item.children, idArr, temp)
} else {
temp.push(idArr.filter(id => id === item.id))
}
}
return temp
}, },
handleDept() { handleDept() {
fetchDeptTree().then(response => { fetchDeptTree().then(response => {
this.treeDeptData = response.data; this.treeDeptData = response.data
this.dialogDeptVisible = true; this.dialogDeptVisible = true
}); })
}, },
filterNode(value, data) { filterNode(value, data) {
if (!value) return true; if (!value) return true
return data.label.indexOf(value) !== -1; return data.label.indexOf(value) !== -1
}, },
getNodeData(data) { getNodeData(data) {
this.dialogDeptVisible = false; this.dialogDeptVisible = false
this.form.roleDeptId = data.id; this.form.roleDeptId = data.id
this.form.deptName = data.name; this.form.deptName = data.name
console.log(data); console.log(data)
}, },
handleDelete(row) { handleDelete(row) {
delObj(row.roleId).then(response => { delObj(row.roleId).then(response => {
this.dialogFormVisible = false; this.dialogFormVisible = false
this.getList(); this.getList()
this.$notify({ this.$notify({
title: "成功", title: '成功',
message: "删除成功", message: '删除成功',
type: "success", type: 'success',
duration: 2000 duration: 2000
}); })
}); })
}, },
create(formName) { create(formName) {
const set = this.$refs; const set = this.$refs
set[formName].validate(valid => { set[formName].validate(valid => {
if (valid) { if (valid) {
addObj(this.form).then(() => { addObj(this.form).then(() => {
this.dialogFormVisible = false; this.dialogFormVisible = false
this.getList(); this.getList()
this.$notify({ this.$notify({
title: "成功", title: '成功',
message: "创建成功", message: '创建成功',
type: "success", type: 'success',
duration: 2000 duration: 2000
}); })
}); })
} else { } else {
return false; return false
} }
}); })
}, },
cancel(formName) { cancel(formName) {
this.dialogFormVisible = false; this.dialogFormVisible = false
this.$refs[formName].resetFields(); this.$refs[formName].resetFields()
}, },
update(formName) { update(formName) {
const set = this.$refs; const set = this.$refs
set[formName].validate(valid => { set[formName].validate(valid => {
if (valid) { if (valid) {
this.dialogFormVisible = false; this.dialogFormVisible = false
putObj(this.form).then(() => { putObj(this.form).then(() => {
this.dialogFormVisible = false; this.dialogFormVisible = false
this.getList(); this.getList()
this.$notify({ this.$notify({
title: "成功", title: '成功',
message: "修改成功", message: '修改成功',
type: "success", type: 'success',
duration: 2000 duration: 2000
}); })
}); })
} else { } else {
return false; return false
} }
}); })
}, },
updatePermession(roleId, roleCode) { updatePermession(roleId, roleCode) {
permissionUpd(roleId, this.$refs.menuTree.getCheckedKeys().join(',')).then(() => { this.menuIds = ''
this.dialogPermissionVisible = false; this.menuIds = this.$refs.menuTree.getCheckedKeys().join(',').concat(',').concat(this.$refs.menuTree.getHalfCheckedKeys().join(','))
permissionUpd(roleId, this.menuIds).then(() => {
this.dialogPermissionVisible = false
fetchTree() fetchTree()
.then(response => { .then(response => {
this.treeData = response.data; this.treeData = response.data
return fetchRoleTree(roleCode); return fetchRoleTree(roleCode)
}) })
.then(response => { .then(response => {
this.checkedKeys = response.data; this.checkedKeys = response.data
this.$notify({ this.$notify({
title: "成功", title: '成功',
message: "修改成功", message: '修改成功',
type: "success", type: 'success',
duration: 2000 duration: 2000
}); })
}); })
}); })
}, },
resetTemp() { resetTemp() {
this.form = { this.form = {
@ -371,8 +393,8 @@ export default {
roleName: undefined, roleName: undefined,
roleCode: undefined, roleCode: undefined,
roleDesc: undefined roleDesc: undefined
};
} }
} }
}; }
}
</script> </script>