<template>
|
<div style="width: 100%; height: 100%; display: flex; overflow: hidden">
|
<div class="role-tree-left flex-col">
|
<div class="title"><i class="el-icon-user"></i>PDA用户列表</div>
|
<el-scrollbar class="el-role-list">
|
<el-tree
|
:data="tree"
|
@node-click="nodeClick"
|
node-key="userId"
|
:default-expanded-keys="openKeys"
|
:expand-on-click-node="false"
|
style="padding: 5px 0; margin-right: 2px"
|
>
|
<template #default="{ data }">
|
<div class="action-group">
|
<div class="action-text">
|
{{ data.userName }}
|
</div>
|
</div>
|
</template>
|
</el-tree>
|
</el-scrollbar>
|
</div>
|
<div
|
style="
|
height: calc(100vh - 6.5rem);
|
flex: 1;
|
overflow: hidden;
|
background-color: white;
|
"
|
class="role-tree-right flex-col"
|
>
|
<div class="title">
|
<div><i class="el-icon-folder-opened"></i>菜单权限</div>
|
<el-button type="primary" @click="save">保存</el-button>
|
</div>
|
<el-scrollbar class="el-role-list" style="height: 100%">
|
<el-tree
|
@check-change="leftCheckChange"
|
@check="nodeCheck"
|
:data="roleTree"
|
:show-checkbox="false"
|
style="padding: 15px"
|
node-key="id"
|
default-expand-all
|
:expand-on-click-node="false"
|
>
|
<template #default="{ data }">
|
<div class="action-group">
|
<div
|
class="action-text"
|
:style="{ width: (4 - data.lv) * 18 + 150 + 'px' }"
|
>
|
<el-checkbox v-model="data.checked">{{
|
// data.text + (data.isApp ? "(app)" : "")
|
data.menuName
|
}}</el-checkbox>
|
</div>
|
</div>
|
</template>
|
</el-tree>
|
</el-scrollbar>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { defineComponent, ref, reactive, getCurrentInstance } from "vue";
|
import http from "@/../src/api/http.js";
|
import { ElMessage } from "element-plus";
|
// import { lv } from "element-plus/es/locale";
|
export default defineComponent({
|
setup() {
|
const selectId = ref(-1);
|
const checked = ref(false);
|
const tree = reactive([]);
|
const list = reactive([]);
|
const roles = reactive([]);
|
const roleList = reactive([]);
|
const roleTree = reactive([]);
|
const openKeys = reactive([]);
|
|
const leftCheckChange = (node, selected) => {
|
node.actions.forEach((x, index) => {
|
x.checked = selected;
|
});
|
};
|
const nodeCheck = (node, data) => {
|
let rootData = roleList.find((x) => {
|
return x.id === node.pid;
|
});
|
if (rootData && rootData.actions.length) {
|
rootData.actions[0].checked =
|
node.actions.some((x) => {
|
return x.checked;
|
}) ||
|
data.halfCheckedNodes.some((x) => {
|
return x.id === node.pid;
|
});
|
}
|
};
|
const actionChange = (data, ck) => {
|
ck =
|
data.actions.filter((x) => {
|
return x.checked;
|
}).length == data.actions.length;
|
data.leftCk = ck;
|
};
|
|
const load = () => {
|
const url = "api/Sys_PDAAuth/GetChildUser";
|
http.post(url, {}, true).then((result) => {
|
if (!result.status) return;
|
list.splice(0);
|
list.push(...result.data.data);
|
list.forEach((x,index) => {
|
x.lv = index;
|
x.children = [];
|
tree.push(x);
|
});
|
tree.forEach((x) => {
|
openKeys.push(x.userId);
|
})
|
});
|
};
|
const nodeClick = (node, selected) => {
|
selectId.value = node.userId;
|
getUserRole(node);
|
};
|
const getUserRole = (item) => {
|
selectId.value = item.userId;
|
roleList.forEach((x) => {
|
x.checked = false;
|
});
|
let url = `/api/Sys_PDAAuth/GetUserTreePDAAuth?userId=${item.userId}`;
|
http.post(url, {}, true).then((result) => {
|
if (!result.status) return;
|
result.data.data.forEach((item) => {
|
let sourceItem = roleList.find((f) => f.id == item.id);
|
if (!sourceItem) return;
|
sourceItem.checked = true;
|
});
|
});
|
};
|
const getCurrentTreePermission = () => {
|
let url = "/api/Sys_PDAAuth/GetCurrentPDAAuth";
|
http.post(url, {}, true).then((result) => {
|
if (!result.status) return;
|
roleList.splice(0);
|
roleList.push(...result.data.data);
|
roleList.forEach((x,index) => {
|
x.lv = index;
|
roleTree.push(x);
|
});
|
});
|
};
|
const save = () => {
|
if (selectId.value <= 0) {
|
return ElMessage({ message: '请选择用户', type: 'error' });
|
}
|
let padAuths = [];
|
roleList.forEach((x) => {
|
padAuths.push(x);
|
});
|
let url = `api/Sys_PDAAuth/SavePDAAuth?userId=${selectId.value}`;
|
http.post(url, padAuths.map(({ lv, ...item }) => item), true).then((result) => {
|
return ElMessage({ message: '保存成功', type: 'success' });
|
});
|
};
|
|
load();
|
getCurrentTreePermission();
|
return {
|
list,
|
nodeClick,
|
checked,
|
tree,
|
selectId,
|
openKeys,
|
getUserRole,
|
roles,
|
roleList,
|
getCurrentTreePermission,
|
leftCheckChange,
|
nodeCheck,
|
roleTree,
|
actionChange,
|
save,
|
};
|
},
|
});
|
</script>
|
<style lang="less" scoped>
|
.flex-col {
|
display: flex;
|
flex-direction: column;
|
}
|
|
.role-tree-left {
|
border: 1px solid #f2f2f2;
|
background: #fff;
|
width: 230px;
|
margin-right: 10px;
|
|
.title {
|
i {
|
margin-left: 10px;
|
}
|
}
|
}
|
|
.title {
|
display: flex;
|
|
i {
|
margin-left: 10px;
|
}
|
|
div {
|
flex: 1;
|
}
|
}
|
|
.action-group {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
label {
|
float: left;
|
}
|
|
.action-text {
|
line-height: 33px;
|
|
label {
|
margin-right: 5px;
|
}
|
}
|
}
|
|
.title {
|
padding: 10px;
|
background: rgb(246 250 255);
|
font-weight: bold;
|
font-size: 14px;
|
letter-spacing: 2px;
|
}
|
|
.el-role-list {
|
flex: 1;
|
height: 0;
|
overflow-x: hidden;
|
}
|
|
.role-tree-left ::v-deep(.el-tree-node__content) {
|
cursor: pointer;
|
height: auto;
|
padding: 5px;
|
margin: 2px 10px;
|
font-size: 15px;
|
}
|
|
.role-tree-left ::v-deep(.el-tree-node__content:hover) {
|
background: #f4f4f4;
|
border-radius: 20px;
|
}
|
|
.role-tree-left ::v-deep(.is-current > .el-tree-node__content:first-child) {
|
background: #f2f2f2;
|
border-radius: 20px;
|
}
|
|
.role-tree-right ::v-deep(.el-tree-node__content) {
|
margin-bottom: 5px;
|
height: auto;
|
}
|
|
.role-tree-right ::v-deep(.el-checkbox__label) {
|
position: relative;
|
top: 2px;
|
}
|
</style>
|
|
