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