pengjun
2 years ago
10 changed files with 370 additions and 26 deletions
-
22src/components/customerOrg/customerOrgTree.vue
-
17src/components/menuPage/MenuPageEdit.vue
-
240src/components/menuPage/MenuPageSet.vue
-
1src/router/index.js
-
14src/store/index.js
-
5src/utlis/tree.js
-
2src/views/Home.vue
-
2src/views/menuPage/menuPage.vue
-
57src/views/user-list/Role.vue
-
36src/views/user-list/UserList.vue
@ -0,0 +1,240 @@ |
|||
<template> |
|||
<div> |
|||
<div style="margin:2px 2px 5px 2px;display: flex;justify-content:space-between;"> |
|||
<div> |
|||
<el-input placeholder="输入关键字进行过滤" v-model="filterText" size="small" /> |
|||
</div> |
|||
<div v-show="isRole"> |
|||
<el-button @click="btnSubmit" size="small">提交</el-button> |
|||
</div> |
|||
</div> |
|||
<div style="overflow: scroll;height:600px;"> |
|||
<el-tree :data="menuInfoView" :props="customerOrg.treeprops" |
|||
node-key="id" :filter-node-method="filterNode" show-checkbox |
|||
default-expand-all |
|||
:default-expanded-keys="customerOrg.defaultExpandedKeys" |
|||
@check-change="handleCheckChange" highlight-current ref="customerOrgTree"/> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { mapState, mapMutations } from "vuex"; |
|||
import { getapi, postapi, putapi, deletapi } from "@/api/api"; |
|||
import { tcdate,arrayExistObj } from "../../utlis/proFunc"; |
|||
import { getTreeNode, getTreeAllChildIdsByNode, getTreeAllChildIdsById, getTreePids } from "../../utlis/tree"; |
|||
|
|||
|
|||
export default { |
|||
components: {}, |
|||
props:["params"], // params = { opra: role/user 用户/角色, idVal: roleId/userId} |
|||
data() { |
|||
return { |
|||
menuInfoView:[], //显示菜单 |
|||
menuInfoSet:[], //设置菜单 |
|||
checkedKeys:[], //勾选的菜单节点ID |
|||
filterText:'' |
|||
}; |
|||
}, |
|||
|
|||
computed: { |
|||
...mapState(["window", "dataTransOpts", "customerOrg" ]), |
|||
|
|||
// 是否角色 |
|||
isRole(){ |
|||
let ret = true |
|||
if(this.params && this.params.opra == "user"){ |
|||
ret = false |
|||
} |
|||
return ret |
|||
}, |
|||
|
|||
}, |
|||
|
|||
//创建组件后 |
|||
created() { |
|||
}, |
|||
|
|||
//挂载组件完成 |
|||
mounted() { |
|||
|
|||
}, |
|||
|
|||
methods: { |
|||
...mapMutations(["setData"]), |
|||
|
|||
// 初始化数据，获取菜单列表树信息 及角色的授权菜单 |
|||
initData(roleOrUser_Id) { |
|||
getapi("/api/app/menuinfo/getmenuinfotreelist").then((res) => { |
|||
if(res.code != -1){ |
|||
this.menuInfoView = res.data |
|||
tcdate(this.menuInfoView); |
|||
// 如果不是角色，则不允许编辑权限 |
|||
if(!this.isRole){ |
|||
this.setTreeDisabled(this.menuInfoView,"treeChildren") |
|||
} |
|||
if(this.isRole){ |
|||
return getapi(`/api/app/rolemenuinfo/getrolemenuinfolist?RoleId=${roleOrUser_Id}`) // |
|||
}else{ |
|||
return getapi(`/api/app/menuinfo/getmymenuinfolistinuser?UserId=${roleOrUser_Id}`) |
|||
} |
|||
} |
|||
}).then(res =>{ |
|||
if(res && res.code != -1){ |
|||
// 勾选赋值 |
|||
this.menuInfoSet = res.data |
|||
this.setCheckedKeys() |
|||
} |
|||
}).catch(err =>{ |
|||
console.log(err) |
|||
}); |
|||
}, |
|||
|
|||
// 用户只允查看权限，暂不允许修权限 |
|||
setTreeDisabled(tree,childrenNodeName){ |
|||
tree.forEach(e => { |
|||
e.disabled = true |
|||
if(e[childrenNodeName]) this.setTreeDisabled(e[childrenNodeName],childrenNodeName) |
|||
}); |
|||
}, |
|||
|
|||
// 初始设置菜单勾选 |
|||
setCheckedKeys(){ |
|||
this.checkedKeys = [] |
|||
if(!this.isRole){ |
|||
this.menuInfoSet.forEach(e => { |
|||
e.menuInfoId = e.id |
|||
}); |
|||
} |
|||
this.menuInfoSet.forEach(e => { |
|||
// 无下级节点时，勾选；有下级节点时，所有下级节点全部勾选时，才勾选 |
|||
let node = getTreeNode(this.menuInfoView, "treeChildren", "id", e.menuInfoId) |
|||
if(node.treeChildren){ |
|||
//获取所有下级节点值 |
|||
let menuInfoIds = getTreeAllChildIdsByNode(node, "treeChildren", "id") |
|||
let count = 0 |
|||
menuInfoIds.forEach(item => { |
|||
let lfind = arrayExistObj(this.menuInfoSet,"menuInfoId",item) |
|||
if(lfind > -1) count++ |
|||
}); |
|||
if(menuInfoIds.length == count) this.checkedKeys.push(e.menuInfoId) |
|||
}else{ |
|||
this.checkedKeys.push(e.menuInfoId) |
|||
} |
|||
}); |
|||
this.$refs["customerOrgTree"].setCheckedKeys(this.checkedKeys); |
|||
}, |
|||
|
|||
//提交按钮（保存角色权限） |
|||
btnSubmit(){ |
|||
let body = { |
|||
roleId:this.dataTransOpts.tableS.adp_roles.id, |
|||
menuInfoIds:[] |
|||
} |
|||
|
|||
this.menuInfoSet.forEach(e => { |
|||
if(e.menuInfoId) body.menuInfoIds.push(e.menuInfoId) |
|||
}); |
|||
|
|||
|
|||
postapi('/api/app/rolemenuinfo/setrolemenuinfo',body).then(res =>{ |
|||
if(res.code != -1){ |
|||
console.log('操作成功！') |
|||
} |
|||
}) |
|||
|
|||
}, |
|||
|
|||
//勾选节点 |
|||
handleCheckChange(data, checked, indeterminate) { |
|||
console.log('data, checked, indeterminate,this.menuInfoSet',data, checked, indeterminate,this.menuInfoSet); |
|||
let lfind = 0,count = 0 |
|||
if(checked){ |
|||
// 获取所有上级节点 |
|||
let pids = getTreePids(this.menuInfoView, "treeChildren", "parentId", "id", data.id) |
|||
pids.push(data.id) //添加自身节点 |
|||
pids.forEach(e => { |
|||
if(e){ |
|||
lfind = arrayExistObj(this.menuInfoSet,'menuInfoId',e) |
|||
if(lfind == -1) this.menuInfoSet.push({ menuInfoId:e }) |
|||
} |
|||
}); |
|||
}else if(!indeterminate){ |
|||
// 取消授权时 |
|||
lfind = arrayExistObj(this.menuInfoSet,'menuInfoId',data.id) |
|||
if(lfind > -1) this.menuInfoSet.splice(lfind,1) |
|||
// 如果有下级节点，则取消所有下级节点的授权 |
|||
// let node = getTreeNode(this.menuInfoView, "treeChildren", "id", data.id) |
|||
// if(node.treeChildren){ |
|||
// let childs = getTreeAllChildIdsByNode(node, "treeChildren", "id") |
|||
// childs.forEach(id => { |
|||
// lfind = arrayExistObj(this.menuInfoSet,'menuInfoId',id) |
|||
// if(lfind > -1) this.menuInfoSet.splice(lfind,1) |
|||
// }); |
|||
// } |
|||
|
|||
// 所有平级节点都被取消时，上级节点也应取消 |
|||
let parentIds = getTreePids(this.menuInfoView, "treeChildren", "parentId", "id", data.id) |
|||
parentIds.forEach(e => { |
|||
if(e){ |
|||
let pNode = getTreeNode(this.menuInfoView, "treeChildren", "id", e) |
|||
count = pNode["treeChildren"].length |
|||
pNode["treeChildren"].forEach(item => { |
|||
lfind = arrayExistObj(this.menuInfoSet,'menuInfoId',item.id) |
|||
if(lfind == -1) count-- |
|||
}); |
|||
if(count == 0){ |
|||
lfind = arrayExistObj(this.menuInfoSet,'menuInfoId',e) |
|||
if(lfind > -1) this.menuInfoSet.splice(lfind,1) |
|||
} |
|||
} |
|||
}); |
|||
} |
|||
console.log('this.menuInfoSet',this.menuInfoSet) |
|||
}, |
|||
|
|||
//树过滤 |
|||
filterNode(value, data) { |
|||
//console.log(value,data) |
|||
if (!value) return true; |
|||
return data['displayName'].indexOf(value) !== -1 || data['simpleCode'].indexOf(value.toUpperCase()) !== -1; |
|||
} |
|||
}, |
|||
|
|||
watch: { |
|||
// 刷新菜单 |
|||
"dataTransOpts.refresh.role_menu_info.M":{ |
|||
immediate:true, |
|||
handler(newVal, oldVal) { |
|||
let roleOrUser_Id |
|||
if(this.isRole){ |
|||
roleOrUser_Id = this.dataTransOpts.tableS.adp_roles.id |
|||
}else{ |
|||
roleOrUser_Id = this.dataTransOpts.tableS.adp_users.id |
|||
} |
|||
console.log(`watch ${this.isRole ? '角色':'用户'} 权限 newVal:${newVal} oldVal:${oldVal} registerCheckId: ${roleOrUser_Id}`); |
|||
|
|||
this.initData(roleOrUser_Id) |
|||
} |
|||
}, |
|||
|
|||
"customerOrg.treeCurrentNodekey"(newVal,oldVal){ |
|||
//console.log('watch:customerOrg.treeCurrentNodekey',newVal,oldVal) |
|||
if(newVal && newVal != oldVal){ |
|||
this.$nextTick(() => { |
|||
this.$refs['customerOrgTree'].setCurrentKey(newVal); |
|||
}) |
|||
} |
|||
}, |
|||
|
|||
"filterText"(newVal,oldVal){ //过滤菜单 |
|||
this.$refs['customerOrgTree'].filter(newVal); |
|||
} |
|||
}, |
|||
|
|||
}; |
|||
</script> |
|||
<style scoped> |
|||
@import "../../assets/css/global.css"; |
|||
@import "../../assets/css/global_table.css"; |
|||
|
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue