<template>
|
<flex-layout direction="row" no-bg class="page-wrapper">
|
<template #header>
|
<my-card title="权限组列表" class="w320">
|
<template #card-tools>
|
<div>
|
<el-button
|
class="card-tools"
|
size="small"
|
type="primary"
|
:disabled="!isCanEdit"
|
circle
|
@click="showAddPermit"
|
>
|
<svg-icon icon-class="add"></svg-icon>
|
</el-button>
|
<el-button
|
class="card-tools"
|
size="small"
|
type="primary"
|
:disabled="getToolsState || !isCanEdit"
|
circle
|
@click="showEidtPermit"
|
>
|
<svg-icon icon-class="edit2"></svg-icon>
|
</el-button>
|
<el-button
|
class="card-tools"
|
size="small"
|
type="danger"
|
:disabled="getToolsState || !isCanEdit"
|
circle
|
@click="confirmDelGroup"
|
>
|
<svg-icon icon-class="delete"></svg-icon>
|
</el-button>
|
</div>
|
</template>
|
<baoji-group-list
|
ref="groupList"
|
@handle-click="groupListClick"
|
:list="powergrouplist"
|
></baoji-group-list>
|
</my-card>
|
</template>
|
<div class="flex-page-content">
|
<context-box title="用户-权限树">
|
<div class="power-user-tree">
|
<div class="power-content power-content-user">
|
<el-transfer
|
v-model="user.value"
|
:titles="['未添加用户', '已添加用户']"
|
:button-texts="['移除', '添加']"
|
:data="user.data"
|
:filterable="true"
|
@change="userChange"
|
class="transfer-width320 transfer-left"
|
>
|
</el-transfer>
|
</div>
|
<div class="power-tree-wrapper w320" style="overflow-y: auto; background-color: #153953;">
|
<el-tree
|
ref="powerTree"
|
:data="powerTreeData.map(v=>({...v, disabled: true}))"
|
show-checkbox
|
:disabled="true"
|
node-key="id"
|
highlight-current
|
>
|
</el-tree>
|
</div>
|
</div>
|
</context-box>
|
</div>
|
<!-- 添加权限组 -->
|
<el-dialog
|
title="添加权限组"
|
width="480px"
|
v-model="addGroup.show"
|
:close-on-click-modal="false"
|
top="0"
|
class="dialog-center"
|
:modal-append-to-body="false"
|
>
|
<div class="params-container">
|
<el-form size="small" label-position="top" class="params-dialog">
|
<div class="table-layout">
|
<div class="table-row">
|
<div class="table-cell">
|
<el-form-item label="权限组名称">
|
<el-input v-model="addGroup.permit_group_name"></el-input>
|
</el-form-item>
|
</div>
|
</div>
|
<div class="table-row">
|
<div class="table-cell">
|
<div
|
class="dialog-tree-container h400"
|
style="overflow-y: auto"
|
>
|
<el-tree
|
ref="addPowerTree"
|
:data="powerTreeData"
|
show-checkbox
|
node-key="id"
|
highlight-current
|
>
|
</el-tree>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="form-footer">
|
<el-button @click="addGroupOk">确定</el-button>
|
</div>
|
</el-form>
|
</div>
|
</el-dialog>
|
<!-- 编辑包机组 -->
|
<el-dialog
|
title="修改权限树"
|
width="480px"
|
v-model="editGroup.show"
|
:close-on-click-modal="false"
|
top="0"
|
class="dialog-center"
|
:modal-append-to-body="false"
|
>
|
<div class="params-container">
|
<el-form size="small" label-position="top" class="params-dialog">
|
<div class="table-layout">
|
<div class="table-row">
|
<div class="table-cell">
|
<div
|
class="dialog-tree-container h400"
|
style="overflow-y: auto"
|
>
|
<el-tree
|
ref="editPowerTree"
|
:data="powerTreeData"
|
show-checkbox
|
node-key="id"
|
highlight-current
|
>
|
</el-tree>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="form-footer">
|
<el-button @click="editGroupOk">确定</el-button>
|
</div>
|
</el-form>
|
</div>
|
</el-dialog>
|
</flex-layout>
|
</template>
|
|
<script setup name="powerMager">
|
import MyCard from "./MyCard.vue";
|
import FlexLayout from "@/components/FlexLayout";
|
import BaojiGroupList from "./BaojiGroupList";
|
import ContextBox from "@/components/ContentBox";
|
import isHasPermit from "@/utils/isHasPermit";
|
import { ref, reactive, nextTick, computed, onMounted } from "vue";
|
import { useUserStore } from '@/store/user';
|
import { storeToRefs } from 'pinia';
|
import useElement from '@/hooks/useElement.js';
|
const userStore = useUserStore();
|
const { permits } = storeToRefs(userStore);
|
const { $loading, $confirm, $message } = useElement();
|
|
import {
|
getPermitGroupList,
|
getPermitList,
|
getPermitGroupInfo,
|
addPermitGroup,
|
deletePermitGroup,
|
permitGroupUser,
|
userSearchCSAll2,
|
} from "@/api/user";
|
|
const isCanEdit = ref(isHasPermit("query_permit", permits.value));
|
const activeName = ref("power-group-user");
|
const powerInfo = reactive({
|
permit_group_name: "",
|
permit_group_id: "",
|
});
|
const powergrouplist = ref([]);
|
const user = reactive({
|
data: [],
|
value: [],
|
added: [],
|
});
|
const addGroup = reactive({
|
show: false,
|
permit_group_name: "",
|
});
|
const editGroup = reactive({
|
show: false,
|
permit_group_name: "",
|
});
|
|
const powerTree = ref();
|
const groupList = ref();
|
const editPowerTree = ref();
|
const addPowerTree = ref();
|
|
const powerTreeData = [
|
{
|
id: "query_permit",
|
label: "查询权限",
|
},
|
{
|
id: 'control_permit',
|
label: "控制权限",
|
},
|
{
|
id: 'add_station_permit',
|
label: "添加坫点信息权限",
|
},
|
{
|
id: 'bind_idcard_permit',
|
label: "绑定电子卡权限",
|
}
|
];
|
|
const powerNames = ref([]);
|
const powersData = ref([]);
|
|
function initData() {
|
user.data = [];
|
user.value = [];
|
user.added = [];
|
|
powerInfo.permit_group_id = "";
|
powerInfo.permit_group_name = "";
|
|
console.log('initData', groupList.value.activeKey, BaojiGroupList, '=============');
|
|
groupList.value.activeKey = "";
|
|
powerTree.value.setCheckedKeys([]);
|
|
}
|
|
function searchGroup() {
|
initData();
|
|
getPermitGroupList().then((res) => {
|
let data = [];
|
if (res.code && res.data) {
|
data = res.data2.map((item) => {
|
item.txt = item.permitGroupName;
|
item.key = item.permitGroupId;
|
return item;
|
});
|
}
|
// 设置权限组
|
powergrouplist.value = data.filter((item) => {
|
if (item.key != 100002 && item.key > 100) {
|
return item;
|
}
|
});
|
}).catch((error) => {
|
console.log(error);
|
});
|
}
|
|
function groupListClick(item) {
|
// 设置查询的值
|
powerInfo.permit_group_id = item.permitGroupId;
|
powerInfo.permit_group_name = item.permitGroupName;
|
// userSearchCSAll2Fn();
|
getUserPermits();
|
}
|
|
function userSearchCSAll2Fn() {
|
userSearchCSAll2().then((res) => {
|
console.log(res);
|
})
|
.catch((error) => {
|
console.log(error);
|
});
|
}
|
|
function getUserPermits(status) {
|
let data = {
|
permitGroupId: powerInfo.permit_group_id,
|
};
|
getPermitGroupInfo(data).then((res) => {
|
let resdata = res;
|
if (resdata.code == 1 && resdata.data) {
|
// 未添加
|
let usersNotAdded = resdata.data2.usersNotAdded.map((item) => {
|
item.key = item.uid;
|
item.label = item.uname;
|
item.disabled = !isCanEdit;
|
return item;
|
});
|
let usersAdded = [];
|
let added = [];
|
// 已添加
|
resdata.data2.usersAdded.forEach((list) => {
|
list.key = list.uid;
|
list.label = list.uname;
|
list.disabled = !isCanEdit;
|
usersNotAdded.push(list);
|
added.push(list);
|
usersAdded.push(list.uid);
|
});
|
user.data = usersNotAdded;
|
user.value = usersAdded;
|
user.added = added;
|
// 权限
|
let _powersData = [];
|
let data = [];
|
data = resdata.data2.permits.filter((item) => {
|
return item.permitItemValue == 1;
|
}).map((item) => {
|
return item.permitItemName;
|
});
|
_powersData = resdata.data2.permits.map((item) => {
|
return item;
|
});
|
if (status == 1) {
|
editPowerTree.value.setCheckedKeys(data);
|
} else {
|
powerTree.value.setCheckedKeys(data);
|
}
|
powersData.value = _powersData;
|
}
|
});
|
|
}
|
|
function showAddPermit() {
|
// 显示面板
|
addGroup.show = true;
|
// 初始化面板的值
|
addGroup.permit_group_name = "";
|
nextTick(() => {
|
addPowerTree.value.setCheckedKeys([]);
|
});
|
}
|
|
function setPowerNames() {
|
getPermitList().then((res) => {
|
if (res.code == 1 && res.data) {
|
powerNames.value = res.data2.map((item) => {
|
return item.permitItemName;
|
});
|
}
|
}).catch((error) => {
|
console.log(error);
|
});
|
}
|
|
function checkPowerGroup(value) {
|
let rs = {
|
code: 1,
|
message: "",
|
};
|
|
// 为空检测
|
if (value == "") {
|
rs.code = 0;
|
rs.message = "权限组名称不能为空";
|
return rs;
|
}
|
|
// 遍历包机组列表获取是否重名
|
for (let i = 0; i < powergrouplist.value.length; i++) {
|
let _data = powergrouplist.value[i];
|
if (value == _data.txt) {
|
rs.code = 0;
|
rs.message = value + "已存在";
|
break;
|
}
|
}
|
return rs;
|
}
|
|
function addGroupOk() {
|
let permit_group_name = addGroup.permit_group_name;
|
let checkedRs = checkPowerGroup(permit_group_name);
|
if (checkedRs.code == 0) {
|
$message(checkedRs.message);
|
return;
|
}
|
let searchParams = getAddParams();
|
// 请求后台
|
addPermitGroup(searchParams, "POST")
|
.then((res) => {
|
if (res.code === 1 && res.data) {
|
addGroup.show = false;
|
$message.success("添加成功");
|
searchGroup();
|
} else {
|
$message.error(rs.msg);
|
}
|
})
|
.catch((error) => {
|
console.log(error);
|
});
|
}
|
|
function getAddParams(status) {
|
let checkedKeys = [];
|
let permit_group_id = 0;
|
let permit_group_name = addGroup.permit_group_name;
|
if (status) {
|
checkedKeys = editPowerTree.value.getCheckedKeys();
|
permit_group_id = powerInfo.permit_group_id;
|
permit_group_name = powerInfo.permit_group_name;
|
} else {
|
checkedKeys = addPowerTree.value.getCheckedKeys();
|
}
|
return powerNames.value.map((item) => {
|
let tmp = {
|
num: 0,
|
permitGroupId: permit_group_id,
|
permitGroupName: permit_group_name,
|
permitItemName: item,
|
permitItemValue: 0,
|
};
|
// item存在被选择的权限中
|
if (checkedKeys.indexOf(item) != -1) {
|
tmp.permitItemValue = 1;
|
}
|
return tmp;
|
});
|
}
|
|
function showEidtPermit() {
|
// 显示面板
|
editGroup.show = true;
|
nextTick(() => {
|
getUserPermits(1);
|
});
|
}
|
|
function editGroupOk() {
|
let searchParams = getAddParams(true);
|
// 请求后台
|
addPermitGroup(searchParams, "PUT")
|
.then((res) => {
|
// let rs = res.data;
|
if (res.code === 1 && res.data) {
|
editGroup.show = false;
|
$message.success("修改成功");
|
searchGroup();
|
} else {
|
$message.error(rs.msg);
|
}
|
})
|
.catch((error) => {
|
console.log(error);
|
});
|
}
|
|
function confirmDelGroup() {
|
let name = powerInfo.permit_group_name;
|
$confirm("删除" + name, () => {
|
delGroup();
|
})
|
}
|
|
function delGroup () {
|
let searchParams = {
|
permitGroupId: powerInfo.permit_group_id,
|
};
|
// 请求后台
|
deletePermitGroup(searchParams)
|
.then((res) => {
|
if (res.code == 1 && res.data) {
|
$message.success("删除成功");
|
searchGroup();
|
} else {
|
$message.error(rs.msg);
|
}
|
})
|
.catch((error) => {
|
console.log(error);
|
});
|
}
|
|
function getUserListByUIds(UIds, type) {
|
let userList = type == "left" ? user.added : user.data;
|
let result = [];
|
for (let i = 0; i < UIds.length; i++) {
|
let UId = UIds[i];
|
for (let k = 0; k < userList.length; k++) {
|
let user = userList[k];
|
if (user.uid == UId) {
|
if (type == "left") {
|
result.push({
|
permitGroupId: powerInfo.permit_group_id,
|
num: user.ubaojiUsr,
|
uid: user.uid,
|
});
|
} else {
|
result.push({
|
num: user.ubaojiUsr,
|
permitGroupId: powerInfo.permit_group_id,
|
uid: user.uid,
|
});
|
}
|
|
break;
|
}
|
}
|
}
|
return result;
|
}
|
|
function userChange (list, type, values) {
|
let userList = getUserListByUIds(values, type);
|
let obj = {
|
operationFlag: "",
|
};
|
// 根据类型确定事件
|
switch (type) {
|
case "left":
|
obj.operationFlag = "-1";
|
break;
|
case "right":
|
obj.operationFlag = "1";
|
break;
|
}
|
addUser(obj, userList);
|
}
|
|
function addUser (obj, list) {
|
// 添加、移除用户
|
permitGroupUser(obj, list)
|
.then((res) => {
|
if (res.code == 1) {
|
// 提示信息
|
$message({
|
type: "success",
|
message: res.msg,
|
});
|
} else {
|
// 提示信息
|
$message({
|
type: "error",
|
message: res.msg,
|
});
|
}
|
// 查询已添加的用户
|
getUserPermits();
|
})
|
.catch((error) => {
|
console.log(error);
|
});
|
}
|
|
const getToolsState = computed(() => {
|
// 根据选中的状态确定包机组列表工具栏的状态
|
return powerInfo.permit_group_id == "" ? true : false;
|
});
|
|
onMounted(() => {
|
// 设置powerNames
|
setPowerNames();
|
// 查询所有的权限组
|
searchGroup();
|
});
|
|
</script>
|
|
<style scoped lang="less">
|
.page-wrapper {
|
padding: 10px;
|
}
|
:deep(.flex-layout-body) {
|
margin-left: 10px;
|
border: 1px solid #0ff;
|
border-radius: 6px;
|
}
|
:deep(.el-transfer-panel) {
|
font-size: 16px;
|
background: #153953;
|
border: none;
|
padding: 18px 12px;
|
color: #fff;
|
display: flex;
|
flex-direction: column;
|
// border: 0.05rem solid #EBEEF5;
|
border-radius: 0.2rem;
|
overflow: hidden;
|
vertical-align: middle;
|
width: 320px;
|
max-height: 100%;
|
box-sizing: border-box;
|
position: relative;
|
.el-transfer-panel__header.el-transfer-panel__header {
|
height: 2rem;
|
line-height: 2rem;
|
background: #F5F7FA;
|
margin: 0;
|
padding-left: 0.75rem;
|
border: 0 none;
|
box-sizing: border-box;
|
color: #000;
|
|
background-color: #00253f;
|
border-bottom: none;
|
border-radius: 4px;
|
}
|
.el-transfer-panel__body.el-transfer-panel__body {
|
flex: 1;
|
border: 0 none;
|
.el-transfer-panel__filter{
|
text-align: center;
|
margin: 12px;
|
padding: 0;
|
border: 1px solid #0ff;
|
border-radius: 16px;
|
box-sizing: border-box;
|
display: flex;
|
width: auto;
|
.el-input__wrapper {
|
background: transparent;
|
box-shadow: none;
|
}
|
.el-input__inner {
|
height: 1.6em;
|
width: 100%;
|
font-size: 16px;
|
display: inline-block;
|
-webkit-box-sizing: border-box;
|
box-sizing: border-box;
|
// background-color: #214865;
|
border: 0 none;
|
color: #00fefe;
|
}
|
}
|
}
|
.el-checkbox__label.el-checkbox__label {
|
display: inline-block;
|
padding-left: 24px;
|
line-height: 12px;
|
font-size: 14px;
|
font-weight: 400;
|
color: #03d2d8;
|
span {
|
color: inherit;
|
}
|
}
|
}
|
:deep(.transfer-width320) {
|
height: 100%;
|
display: flex;
|
justify-content: left;
|
|
.el-transfer__buttons {
|
width: 150px;
|
align-self: center;
|
display: inline-block;
|
vertical-align: middle;
|
padding: 0 1.5rem;
|
.el-button {
|
width: 100%;
|
color: #002740 !important;
|
background-color: #1ccfe5 !important;
|
border-color: #1ccfe5 !important;
|
margin-left: 0;
|
&:first-child {
|
margin-bottom: 10px;
|
}
|
&.is-disabled:hover,
|
&.is-disabled {
|
background-color: #1a98a6 !important;
|
border-color: #1a98a6 !important;
|
}
|
}
|
}
|
}
|
:deep(.el-transfer-panel__list) {
|
flex: 1;
|
overflow-y: auto;
|
margin: 0;
|
padding: 0.3rem 0;
|
list-style: none;
|
/* height: 12.3rem; */
|
overflow: auto;
|
box-sizing: border-box;
|
}
|
|
.w320 {
|
width: 320px;
|
}
|
.flex-page-content {
|
margin-left: 8px;
|
margin-right: 8px;
|
height: 100%;
|
}
|
|
.tab-pane-content {
|
height: 100%;
|
overflow-y: auto;
|
}
|
|
.dialog-tree-container {
|
background-color: #ffffff;
|
}
|
|
.power-user-tree {
|
display: flex;
|
flex-direction: row;
|
height: 100%;
|
}
|
|
.power-content {
|
flex: 1;
|
overflow-y: auto;
|
}
|
|
.power-content-user {
|
padding: 0 8px 8px 8px;
|
}
|
</style>
|
