luobinjie
3 months ago
7 changed files with 1080 additions and 3 deletions
-
579src/components/menuPage/directorManaMenuEdit.vue
-
251src/components/menuPage/directorManaMenuSet.vue
-
114src/components/menuPage/directorManaMenuTree.vue
-
6src/router/index.js
-
8src/store/index.js
-
91src/views/menuPage/directorManaMenu.vue
-
34src/views/user-list/Role.vue
@ -0,0 +1,579 @@ |
|||
<template> |
|||
<div |
|||
:style=" |
|||
'display: flex;height:' + |
|||
(window.pageHeight < 600 ? 480 : window.pageHeight - 100) + |
|||
'px;' |
|||
" |
|||
> |
|||
<div |
|||
:style=" |
|||
'width:' + |
|||
(window.pageWidth - 200 - 110 - 50 - 14) + |
|||
'px;background-color: #fff; border-radius: 8px;padding: 15px;' |
|||
" |
|||
> |
|||
<!--overflow-y: scroll;height:200px;--> |
|||
<el-form |
|||
ref="form" |
|||
:model="form" |
|||
label-width="85px" |
|||
:rules="rules" |
|||
size="medium" |
|||
> |
|||
<el-row> |
|||
<el-col :span="8"> |
|||
<el-form-item label="上级节点" prop="parentId"> |
|||
<el-cascader |
|||
v-model="form.parentId" |
|||
:options="dataTransOpts.tableM.directorManaMenu_info" |
|||
:props="{ |
|||
checkStrictly: true, |
|||
expandTrigger: 'hover', |
|||
...customerOrg.treeprops, |
|||
}" |
|||
:show-all-levels="false" |
|||
clearable |
|||
filterable |
|||
disabled |
|||
:style=" |
|||
'width:' + Math.floor((window.pageWidth - 620) / 3) + 'px;' |
|||
" |
|||
> |
|||
</el-cascader> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="节点名称" prop="displayName"> |
|||
<el-input |
|||
class="enterToTab" |
|||
v-model="form.displayName" |
|||
placeholder="请输入节点名称" |
|||
/> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="菜单图标" prop="iconName"> |
|||
<el-input |
|||
class="enterToTab" |
|||
v-model="form.iconName" |
|||
placeholder="请输入菜单图标" |
|||
/> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="8"> |
|||
<el-form-item label="样式名称" prop="styleName"> |
|||
<el-input |
|||
class="enterToTab" |
|||
v-model="form.styleName" |
|||
placeholder="请输入样式名称" |
|||
/> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="排序" prop="displayOrder"> |
|||
<el-input |
|||
type="number" |
|||
class="enterToTab" |
|||
v-model="form.displayOrder" |
|||
placeholder="请输入排序值" |
|||
/> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="启用" prop="isActive"> |
|||
<!-- |
|||
<el-radio v-model="form.isActive" label="Y">启用</el-radio> |
|||
<el-radio v-model="form.isActive" label="N">停用</el-radio> |
|||
--> |
|||
<el-checkbox |
|||
v-model="form.isActiveBox" |
|||
@change="changeBox('isActive')" |
|||
/> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="24"> |
|||
<el-form-item label="路由地址" prop="routeUrl"> |
|||
<el-input |
|||
class="enterToTab" |
|||
v-model="form.routeUrl" |
|||
placeholder="请输入路由地址" |
|||
maxlength="100" |
|||
show-word-limit |
|||
/> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="5"> |
|||
<el-form-item label="创建人员"> |
|||
<el-input v-model="form.creatorName" size="small" disabled /> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="7"> |
|||
<el-form-item label="创建时间"> |
|||
<el-date-picker |
|||
v-model="form.creationTime" |
|||
type="datetime" |
|||
size="small" |
|||
style="width: 100%" |
|||
disabled |
|||
/> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="5"> |
|||
<el-form-item label="修改人员"> |
|||
<el-input v-model="form.lastModifierName" size="small" disabled /> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="7"> |
|||
<el-form-item label="修改时间"> |
|||
<el-date-picker |
|||
v-model="form.lastModificationTime" |
|||
type="datetime" |
|||
size="small" |
|||
style="width: 100%" |
|||
disabled |
|||
/> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
</el-form> |
|||
</div> |
|||
<!-- 按钮区域 --> |
|||
<div style="margin-left: 10px; position: absolute; top: 0; right: 0"> |
|||
<div class="btnList" v-show="checkPagePriv(pagePriv.privs, '新增节点')"> |
|||
<el-button |
|||
type="primary" |
|||
@click="btnAdd('form', '')" |
|||
class="commonbutton" |
|||
>新增节点</el-button |
|||
> |
|||
</div> |
|||
<div class="btnList" v-show="checkPagePriv(pagePriv.privs, '新增子节点')"> |
|||
<el-button |
|||
type="primary" |
|||
@click="btnAdd('form', 'child')" |
|||
class="commonbutton" |
|||
>新增子节点</el-button |
|||
> |
|||
</div> |
|||
<div class="btnList" v-show="checkPagePriv(pagePriv.privs, '保存')"> |
|||
<el-button |
|||
type="success" |
|||
@click="btnSubmit('form')" |
|||
class="commonbutton" |
|||
>保存</el-button |
|||
> |
|||
</div> |
|||
<div class="btnList" v-show="checkPagePriv(pagePriv.privs, '删除')"> |
|||
<el-button type="danger" @click="btnDel('form')" class="deleteButton" |
|||
>删除</el-button |
|||
> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { mapState, mapMutations } from "vuex"; |
|||
import { getapi, postapi, putapi, deletapi } from "@/api/api"; |
|||
import { |
|||
getPagePriv, |
|||
checkPagePriv, |
|||
tcdate, |
|||
objCopy, |
|||
deepCopy, |
|||
arrayExistObj, |
|||
} from "../../utlis/proFunc"; |
|||
import { getTreeNode, getTreePids } from "../../utlis/tree"; |
|||
|
|||
export default { |
|||
components: {}, |
|||
props: ["id"], |
|||
data() { |
|||
return { |
|||
pagePriv: { |
|||
routeUrlorPageName: "menuPage", //当前页面归属路由或归属页面权限名称 |
|||
privs: [], // 页面权限 |
|||
}, |
|||
isActiveBox: false, |
|||
customerOrgEditStyle: "height:400px;", |
|||
|
|||
form: { |
|||
displayName: "", |
|||
routeUrl: "", |
|||
iconName: "", |
|||
parentId: "", |
|||
styleName: "", |
|||
creatorName: "", |
|||
lastModifierName: "", |
|||
lastModificationTime: "", |
|||
lastModifierId: "", |
|||
creationTime: "", |
|||
creatorId: "", |
|||
id: "", |
|||
isActive: "Y", |
|||
displayOrder: "", |
|||
isActiveBox: true, |
|||
}, //初始化 单位 记录 目前新增与更新是一致 |
|||
formInit: {}, |
|||
rules: { |
|||
displayName: [ |
|||
{ required: true, message: "请输入节点名称", trigger: "blur" }, |
|||
], |
|||
}, |
|||
isshow: false, |
|||
}; |
|||
}, |
|||
|
|||
created() { |
|||
//获取用户当前页面的权限 |
|||
let userPriv = window.sessionStorage.getItem("userPriv"); |
|||
if (userPriv) |
|||
this.pagePriv.privs = deepCopy( |
|||
getPagePriv(this.pagePriv.routeUrlorPageName) |
|||
); |
|||
|
|||
// 保留初始化数据 |
|||
this.formInit = deepCopy(this.form); |
|||
console.log("this.formInit", this.formInit); |
|||
}, |
|||
|
|||
//挂载完成 |
|||
mounted() { |
|||
// 表单中 回车 代替 tab |
|||
this.enterToTab(); |
|||
}, |
|||
|
|||
computed: { |
|||
...mapState(["window", "dict", "dataTransOpts", "customerOrg"]), |
|||
|
|||
editWidth() { |
|||
return ( |
|||
this.window.pageWidth - this.window.pageMarginWidth - 200 - 120 - 20 |
|||
); |
|||
}, |
|||
}, |
|||
methods: { |
|||
...mapMutations(["setData"]), |
|||
checkPagePriv, |
|||
|
|||
changeBox(type) { |
|||
//赋值 |
|||
if (this.form[type + "Box"]) { |
|||
this.form[type] = "Y"; |
|||
} else { |
|||
this.form[type] = "N"; |
|||
} |
|||
}, |
|||
|
|||
//获取表单（菜单与界面）信息 |
|||
initFormData(id) { |
|||
if (!id) { |
|||
this.form = deepCopy(this.formInit); |
|||
return; |
|||
} |
|||
postapi("/api/app/DirectorMenuInfo/GetDirectorMenuInfo", { |
|||
directorMenuInfoId: id, |
|||
}).then((res) => { |
|||
if (res.code != -1) { |
|||
// this.form = res.data; |
|||
objCopy(res.data, this.form); |
|||
if (res.data.isActive == "Y") { |
|||
this.form.isActiveBox = true; |
|||
} else { |
|||
this.form.isActiveBox = false; |
|||
} |
|||
console.log("deepCopy(this.form)", deepCopy(this.form)); |
|||
console.log("this.form", this.form, res.data); |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
//更新 获取单位树节点数据(局部刷新) |
|||
getCustomerOrgTree(oprType, body) { |
|||
// getapi("/api/app/customerorg/getbycodeall").then((res) => { |
|||
// //customerOrgTree = res.data; |
|||
// console.log("res.data", res.data); |
|||
// this.setData({ key: "customerOrg.customerOrgTree", value: res.data }); |
|||
// tcdate(this.dataTransOpts.tableM.directorManaMenu_info); |
|||
// }); |
|||
switch (oprType) { |
|||
case "insert": |
|||
let node = { |
|||
id: body.id, |
|||
displayName: body.displayName, |
|||
parentId: body.parentId, |
|||
}; |
|||
|
|||
if (body.parentId) { |
|||
let pNode = getTreeNode( |
|||
this.dataTransOpts.tableM.directorManaMenu_info, |
|||
"treeChildren", |
|||
"id", |
|||
body.parentId |
|||
); |
|||
if (!pNode.treeChildren) this.$set(pNode, "treeChildren", []); |
|||
//pNode.treeChildren = [] |
|||
pNode.treeChildren.push(node); |
|||
} else { |
|||
this.dataTransOpts.tableM.directorManaMenu_info.push(node); |
|||
} |
|||
this.customerOrg.directorDefaultExpandedKeys = []; |
|||
if (body.parentId) { |
|||
this.customerOrg.directorDefaultExpandedKeys.push(body.parentId); |
|||
} |
|||
this.customerOrg.directorDefaultExpandedKeys.push(body.id); |
|||
this.customerOrg.directorTreeCurrentNodekey = body.id; |
|||
//console.log("this.customerOrg.directorTreeCurrentNodekey",this.customerOrg.directorTreeCurrentNodekey); |
|||
break; |
|||
|
|||
// "id": "3a0c5101-a6a6-e48a-36ec-33e7567a99e6", |
|||
// "displayName": "神豚集团", |
|||
// "parentId": null, |
|||
// "code": "00001", |
|||
// "treeChildren": [ |
|||
|
|||
case "update": |
|||
let node2 = getTreeNode( |
|||
this.dataTransOpts.tableM.directorManaMenu_info, |
|||
"treeChildren", |
|||
"id", |
|||
body.id |
|||
); |
|||
node2.displayName = body.displayName; |
|||
break; |
|||
|
|||
case "delete": |
|||
let lfind = -1; |
|||
let pids = getTreePids( |
|||
this.dataTransOpts.tableM.directorManaMenu_info, |
|||
"treeChildren", |
|||
"parentId", |
|||
"id", |
|||
body |
|||
); |
|||
//tree, childNodeName, pidName, idName, idVal getTreeNode(this.dataTransOpts.tableM.directorManaMenu_info, "treeChildren", "id", body); |
|||
console.log("pids", pids, body); |
|||
if (!pids || pids.length < 2) { |
|||
lfind = arrayExistObj( |
|||
this.dataTransOpts.tableM.directorManaMenu_info, |
|||
"id", |
|||
body |
|||
); |
|||
if (lfind > -1) |
|||
this.dataTransOpts.tableM.directorManaMenu_info.splice(lfind, 1); |
|||
} else { |
|||
let node3 = getTreeNode( |
|||
this.dataTransOpts.tableM.directorManaMenu_info, |
|||
"treeChildren", |
|||
"id", |
|||
pids[0] |
|||
); |
|||
//console.log('node3',node3) |
|||
lfind = arrayExistObj(node3.treeChildren, "id", body); |
|||
if (lfind > -1) node3.treeChildren.splice(lfind, 1); |
|||
} |
|||
break; |
|||
default: |
|||
break; |
|||
} |
|||
}, |
|||
|
|||
//提交 |
|||
btnSubmit(formName) { |
|||
let body = {}; |
|||
// console.log("vuex data", this.customerOrg.customerOrgRd); |
|||
this.$refs[formName].validate((valid, fields) => { |
|||
if (!valid) { |
|||
this.$message.warning({ |
|||
showClose: true, |
|||
message: fields[Object.keys(fields)[0]][0].message, |
|||
}); |
|||
return false; |
|||
} |
|||
|
|||
body = deepCopy(this.form); |
|||
delete body.creatorId; |
|||
delete body.lastModifierId; |
|||
delete body.creatorName; |
|||
delete body.creationTime; |
|||
delete body.lastModifierName; |
|||
delete body.lastModificationTime; |
|||
|
|||
if (typeof body.parentId === "string") { |
|||
if (!body.parentId || body.parentId.length < 1) { |
|||
body.parentId = null; |
|||
} |
|||
} else { |
|||
if (body.parentId && body.parentId.length > 0) { |
|||
body.parentId = body.parentId[body.parentId.length - 1]; |
|||
} else { |
|||
body.parentId = null; |
|||
} |
|||
} |
|||
|
|||
// console.log("body", body, "this.form", this.form); |
|||
|
|||
if (!this.form.id) { |
|||
//id为空则新增 |
|||
postapi( |
|||
`/api/app/DirectorMenuInfo/CreatetDirectorMenuInfo`, |
|||
body |
|||
).then((res) => { |
|||
if (res.code == 1) { |
|||
console.log("创健 操作成功"); |
|||
//this.setData({ key: "customerOrg.customerOrgRd", value: res }); |
|||
objCopy(res.data, this.form); |
|||
this.getCustomerOrgTree("insert", res.data); |
|||
// //this.$message.success('操作成功') |
|||
} |
|||
}); |
|||
} else { |
|||
body.directorMenuInfoId = body.id; |
|||
delete body.parentId; |
|||
delete body.id; |
|||
//id不为空则编辑 |
|||
postapi( |
|||
`/api/app/DirectorMenuInfo/UpdateDirectorMenuInfo`, |
|||
body |
|||
).then((res) => { |
|||
if (res.code == 1) { |
|||
console.log("更新 操作成功"); |
|||
this.getCustomerOrgTree("update", this.form); |
|||
// //this.$message.success('操作成功') |
|||
} |
|||
}); |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
//新增节点 |
|||
async btnAdd(formName, isChild) { |
|||
if (isChild) { |
|||
if (!this.form.id) { |
|||
this.$message.warning({ |
|||
showClose: true, |
|||
message: "请先选择上级节点", |
|||
}); |
|||
return; |
|||
} |
|||
let parentForm = deepCopy(this.form); |
|||
|
|||
console.log("parentForm", parentForm); |
|||
this.form = Object.assign({}, this.formInit, { |
|||
parentId: parentForm.id, |
|||
routeUrl: parentForm.routeUrl, |
|||
}); |
|||
console.log("this.form", this.form); |
|||
} else { |
|||
this.form = Object.assign({}, this.formInit); |
|||
} |
|||
await this.$refs[formName].resetFields(); |
|||
}, |
|||
|
|||
//删除 |
|||
btnDel(formName) { |
|||
if (!this.form.id) { |
|||
this.$message.warning({ |
|||
showClose: true, |
|||
message: "请先选中要删除的节点", |
|||
}); |
|||
return; |
|||
} |
|||
//复制待删除的节点 |
|||
//let node = deepCopy(getTreeNode(this.dataTransOpts.tableM.directorManaMenu_info,"treeChildren","id",this.customerOrg.customerOrgRd.id)); |
|||
|
|||
this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", { |
|||
confirmButtonText: "是", |
|||
cancelButtonText: "否", |
|||
type: "warning", |
|||
}) |
|||
.then(() => { |
|||
//console.log('{patientRegisterIds}',{patientRegisterIds}) |
|||
return postapi(`/api/app/DirectorMenuInfo/DeleteDirectorMenuInfo`, { |
|||
directorMenuInfoId: this.form.id, |
|||
}); |
|||
}) |
|||
.then((res) => { |
|||
if (res.code != -1) { |
|||
console.log("删除 操作成功"); |
|||
this.getCustomerOrgTree("delete", this.form.id); |
|||
this.dataTransOpts.tableS.directorManaMenu_info.id = ""; |
|||
setTimeout(() => { |
|||
this.dataTransOpts.refresh.directorManaMenu_info.S++; |
|||
}, 20); |
|||
this.$refs[formName].resetFields(); |
|||
// //this.$message.success('操作成功') |
|||
} |
|||
}) |
|||
.catch((err) => { |
|||
if (err == "cancel") { |
|||
console.log("已取消删除"); |
|||
} else { |
|||
this.$message.error({ |
|||
showClose: true, |
|||
message: "操作失败，原因：" + err, |
|||
}); |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
//回车替代 tab 键 |
|||
enterToTab() { |
|||
this.$nextTick(() => { |
|||
let inputs = document.querySelectorAll("form input"); //用数组可以读取多个标签的元素 //.inline-input |
|||
//console.log('inputs',inputs); |
|||
// 为每个输入框添加键盘事件监听器 |
|||
inputs.forEach((input, i) => { |
|||
input.addEventListener("keydown", (event) => { |
|||
// 如果按下的是回车键 |
|||
// console.log('data-ismultiline',input.getAttribute('data-ismultiline')); |
|||
|
|||
if (event.keyCode === 13) { |
|||
// 阻止回车键的默认行为（换行） |
|||
event.preventDefault(); |
|||
|
|||
// 跳至下一个输入框 |
|||
for (let j = i + 1; j < inputs.length; j++) { |
|||
if (inputs[j].getAttribute("disabled") != "disabled") { |
|||
inputs[j].focus(); |
|||
break; |
|||
} |
|||
} |
|||
} |
|||
}); |
|||
}); |
|||
}); |
|||
}, |
|||
}, |
|||
|
|||
watch: { |
|||
//人员ID未切换换时 也可以强制刷新数据 |
|||
"dataTransOpts.refresh.directorManaMenu_info.S": { |
|||
// immediate: true, // 立即执行在 组件的 created 前面，如有用到 本组件的参数时，不推荐使用 |
|||
handler(newVal, oldVal) { |
|||
console.log( |
|||
`watch 菜单与页面 newVal:${newVal} oldVal:${oldVal} menuInfoId: ${this.dataTransOpts.tableS.directorManaMenu_info.id}` |
|||
); |
|||
this.initFormData(this.dataTransOpts.tableS.directorManaMenu_info.id); |
|||
}, |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style scoped> |
|||
@import "../../assets/css/global_form.css"; |
|||
|
|||
.btnList { |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.btnClass { |
|||
width: 110px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,251 @@ |
|||
<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 && checkPagePriv(pagePriv.privs,'提交')"> |
|||
<el-button @click="btnSubmit" class="commonbutton" style="width:60px">提交</el-button> |
|||
</div> |
|||
</div> |
|||
<div style="overflow: scroll;height:450px;"> |
|||
<el-tree :data="menuInfoView" :props="customerOrg.treeprops" |
|||
node-key="id" :filter-node-method="filterNode" show-checkbox |
|||
default-expand-all |
|||
:default-expanded-keys="customerOrg.directorDefaultExpandedKeys" |
|||
@check-change="handleCheckChange" highlight-current ref="customerOrgTree" size="small"/> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { mapState, mapMutations } from "vuex"; |
|||
import { getapi, postapi, putapi, deletapi } from "@/api/api"; |
|||
import { getPagePriv,checkPagePriv, deepCopy,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 { |
|||
pagePriv:{ |
|||
routeUrlorPageName:'MenuInfoSet', //当前页面归属路由或归属页面权限名称 |
|||
privs:[] // 页面权限 |
|||
}, |
|||
menuInfoView:[], //显示菜单 |
|||
menuInfoSet:[], //设置菜单 |
|||
checkedKeys:[], //勾选的菜单节点ID |
|||
filterText:'' |
|||
}; |
|||
}, |
|||
|
|||
computed: { |
|||
...mapState(["window", "dialogWin", "dataTransOpts", "customerOrg" ]), |
|||
|
|||
// 是否角色 |
|||
isRole(){ |
|||
let ret = true |
|||
if(this.params && this.params.opra == "user"){ |
|||
ret = false |
|||
} |
|||
return ret |
|||
}, |
|||
|
|||
}, |
|||
|
|||
//创建组件后 |
|||
created() { |
|||
//获取用户当前页面的权限 |
|||
let userPriv = window.sessionStorage.getItem('userPriv') |
|||
if(userPriv) this.pagePriv.privs = deepCopy(getPagePriv(this.pagePriv.routeUrlorPageName)) |
|||
}, |
|||
|
|||
//挂载组件完成 |
|||
mounted() { |
|||
|
|||
}, |
|||
|
|||
methods: { |
|||
...mapMutations(["setData"]),checkPagePriv, |
|||
|
|||
// 初始化数据，获取菜单列表树信息 及角色的授权菜单 |
|||
initData(roleOrUser_Id) { |
|||
postapi("/api/app/DirectorMenuInfo/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 postapi(`/api/app/RoleDirectorMenuInfo/GetRoleDirectorMenuInfoList`,{ |
|||
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.directorMenuInfoId = e.id |
|||
}); |
|||
} |
|||
this.menuInfoSet.forEach(e => { |
|||
// 无下级节点时，勾选；有下级节点时，所有下级节点全部勾选时，才勾选 |
|||
let node = getTreeNode(this.menuInfoView, "treeChildren", "id", e.directorMenuInfoId) |
|||
if(node.treeChildren){ |
|||
//获取所有下级节点值 |
|||
let menuInfoIds = getTreeAllChildIdsByNode(node, "treeChildren", "id") |
|||
let count = 0 |
|||
menuInfoIds.forEach(item => { |
|||
let lfind = arrayExistObj(this.menuInfoSet,"directorMenuInfoId",item) |
|||
if(lfind > -1) count++ |
|||
}); |
|||
if(menuInfoIds.length == count) this.checkedKeys.push(e.directorMenuInfoId) |
|||
}else{ |
|||
this.checkedKeys.push(e.directorMenuInfoId) |
|||
} |
|||
}); |
|||
this.$refs["customerOrgTree"].setCheckedKeys(this.checkedKeys); |
|||
}, |
|||
|
|||
//提交按钮（保存角色权限） |
|||
btnSubmit(){ |
|||
let body = { |
|||
roleId:this.dataTransOpts.tableS.adp_roles.id, |
|||
directorMenuInfoIds:[] |
|||
} |
|||
|
|||
this.menuInfoSet.forEach(e => { |
|||
if(e.menuInfoId) body.directorMenuInfoIds.push(e.menuInfoId) |
|||
}); |
|||
|
|||
|
|||
postapi('/api/app/RoleDirectorMenuInfo/SetRoleDirectorMenuInfo',body).then(res =>{ |
|||
if(res.code != -1){ |
|||
console.log('操作成功！') |
|||
this.dialogWin.directorMenuPageSet = false |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
//勾选节点 |
|||
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_director_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.directorDefaultExpandedKeys"(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"; |
|||
@import "../../assets/css/global_tree.css"; |
|||
@import "../../assets/css/global_button.css"; |
|||
|
|||
</style> |
|||
@ -0,0 +1,114 @@ |
|||
<template> |
|||
<div> |
|||
<!-- <div style="margin:2px 2px 2px 2px;"> |
|||
<el-input placeholder="输入关键字进行过滤" v-model="filterText" size="small" /> |
|||
</div> --> |
|||
<div |
|||
:style="'overflow: scroll;height:' + (window.pageHeight < 600 ? 480 : window.pageHeight - 110) + 'px;background-color: #fff;margin-top: 10px;'"> |
|||
<el-tree :data="dataTransOpts.tableM.directorManaMenu_info" :props="customerOrg.treeprops" node-key="id" :filter-node-method="filterNode" |
|||
:default-expanded-keys="customerOrg.directorDefaultExpandedKeys" @node-click="treeclick" highlight-current |
|||
ref="customerOrgTree"> |
|||
<span class="custom-tree-node" slot-scope="{ node, data }"> |
|||
<div> |
|||
<span class="treeicons"> |
|||
<!-- <i |
|||
class="el-icon-document-remove" |
|||
v-if="data.parentId == null" |
|||
></i> --> |
|||
<img style="width:20px;height:20px;vertical-align: sub;" src="@/assets/images/order.png" |
|||
v-if="!data.parentId" /> |
|||
</span> |
|||
<span :class="!data.parentId ? 'maxtitle' : 'mintitle'">{{ node.label }}</span> |
|||
</div> |
|||
</span> |
|||
</el-tree> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { mapState, mapMutations } from "vuex"; |
|||
import { getapi, postapi, putapi, deletapi } from "@/api/api"; |
|||
import { tcdate } from "../../utlis/proFunc"; |
|||
|
|||
|
|||
export default { |
|||
components: {}, |
|||
data() { |
|||
return { |
|||
filterText: '', |
|||
}; |
|||
}, |
|||
//<el-tree :data="$store.state.customerOrg.customerOrgTree" :props="$store.state.customerOrg.treeprops" @node-click="treeclick"></el-tree> |
|||
computed: { |
|||
...mapState(["window", "dataTransOpts", "customerOrg"]), |
|||
|
|||
treeHeight() { |
|||
let temp = this.window.pageHeaderHeight + this.window.pageMarginHeight + this.window.cardHeaderHeight + 32 + 20 |
|||
return this.window.pageHeight < 600 ? (600 - temp) : (this.window.pageHeight - temp) |
|||
} |
|||
}, |
|||
|
|||
//创建组件后 |
|||
created() { |
|||
}, |
|||
|
|||
//挂载组件完成 |
|||
mounted() { |
|||
//获取体检单位列表树信息 |
|||
this.getMenuInfoTree(); |
|||
}, |
|||
|
|||
methods: { |
|||
...mapMutations(["setData"]), |
|||
|
|||
//获取体检单位列表树信息 |
|||
getMenuInfoTree() { |
|||
postapi("/api/app/DirectorMenuInfo/getmenuinfotreelist").then((res) => { |
|||
if (res.code != -1) { |
|||
this.dataTransOpts.tableM.directorManaMenu_info = res.data |
|||
tcdate(this.dataTransOpts.tableM.directorManaMenu_info); |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
//点击树节点 |
|||
treeclick(data) { |
|||
this.dataTransOpts.tableS.directorManaMenu_info.id = data.id; |
|||
setTimeout(() => { |
|||
this.dataTransOpts.refresh.directorManaMenu_info.S++ |
|||
}, 20); |
|||
}, |
|||
|
|||
//树过滤 |
|||
filterNode(value, data) { |
|||
//console.log(value,data) |
|||
if (!value) return true; |
|||
return data['displayName'].indexOf(value) !== -1 || data['simpleCode'].indexOf(value.toUpperCase()) !== -1; |
|||
} |
|||
}, |
|||
|
|||
watch: { |
|||
"customerOrg.directorTreeCurrentNodekey"(newVal, oldVal) { |
|||
//console.log('watch:customerOrg.directorTreeCurrentNodekey',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_tree.css"; |
|||
|
|||
:deep .el-tree-node>.el-tree-node__children { |
|||
overflow: visible; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,91 @@ |
|||
<template> |
|||
<div class="box"> |
|||
<div> |
|||
<div class="middlebox"> |
|||
<div class="contenttitle"> |
|||
权限管理 / |
|||
<span class="contenttitleBold" |
|||
>菜单与页面</span |
|||
> |
|||
</div> |
|||
</div> |
|||
<div style="display: flex;margin-top: 7px;"> |
|||
<!-- 菜单树组件 --> |
|||
<div :style="'width: 208px; height:' +(window.pageHeight < 600 ? 480 : window.pageHeight - 110) +'px;background-color: #fff; border-radius: 8px'"> |
|||
<MenuPageTree /> |
|||
</div> |
|||
<div style="flex: 1;"> |
|||
<!-- 单位详情 录入与编辑 --> |
|||
<div :style="'height:' +(window.pageHeight < 600 ? 480 : window.pageHeight - 100) +'px;margin-left: 15px;position: relative;'"> |
|||
<MenuPageEdit /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { mapState } from "vuex"; |
|||
import MenuPageEdit from "../../components/menuPage/directorManaMenuEdit.vue"; |
|||
import MenuPageTree from "../../components/menuPage/directorManaMenuTree.vue"; |
|||
export default { |
|||
components: { |
|||
MenuPageTree, |
|||
MenuPageEdit, |
|||
}, |
|||
data() { |
|||
return { |
|||
tabChoosed: "1", |
|||
}; |
|||
}, |
|||
|
|||
created() { }, |
|||
|
|||
//挂载完成 |
|||
mounted() { }, |
|||
|
|||
computed: { |
|||
...mapState(["customerOrg", "window"]), |
|||
}, |
|||
methods: {}, |
|||
}; |
|||
</script> |
|||
<style scoped> |
|||
@import "../../assets/css/global_button.css"; |
|||
@import "../../assets/css/global_dialog.css"; |
|||
@import "../../assets/css/global_table.css"; |
|||
@import "../../assets/css/global_form.css"; |
|||
@import "../../assets/css/global_input.css"; |
|||
@import "../../assets/css/global.css"; |
|||
.box { |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
:deep .el-form-item { |
|||
margin-bottom: 14px; |
|||
} |
|||
/* el-dialog的头部样式 */ |
|||
:deep .el-dialog__header { |
|||
padding: 11px 20px 11px; |
|||
} |
|||
/* el-dialog的主体样式 */ |
|||
:deep .el-dialog__body { |
|||
padding: 0px 20px 0px; |
|||
} |
|||
/* el-divider样式 */ |
|||
:deep .el-divider--horizontal { |
|||
margin: 0px 0 12px; |
|||
} |
|||
/* el-dialog的底部样式 */ |
|||
:deep .el-dialog__footer { |
|||
padding: 0px 20px 14px; |
|||
} |
|||
.seachinput { |
|||
width: 250px; |
|||
margin-right: 110px; |
|||
} |
|||
:deep .seachinput .el-select { |
|||
width: 100%; |
|||
} |
|||
</style> |
|||
|
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue