修改app权限流程
This commit is contained in:
parent
4d28426ed1
commit
7bb48e1052
|
|
@ -19,8 +19,9 @@ enum Api {
|
||||||
getEmployessServiceTags = '/services/serviceTag/serviceTag/getEmployessServiceTags',
|
getEmployessServiceTags = '/services/serviceTag/serviceTag/getEmployessServiceTags',
|
||||||
queryTreeListForRole = '/employessPermission/nuAppEmployessPermission/queryTreeList',
|
queryTreeListForRole = '/employessPermission/nuAppEmployessPermission/queryTreeList',
|
||||||
queryRolePermission = '/employessPermission/nuAppEmployessPermission/queryEmployessPermission',
|
queryRolePermission = '/employessPermission/nuAppEmployessPermission/queryEmployessPermission',
|
||||||
saveRolePermission = '/employessPermission/nuAppEmployessPermission/saveRolePermission',
|
saveRolePermissionList = '/employessPermission/nuAppEmployessPermission/saveRolePermissionList',
|
||||||
queryDataRule = '/employessPermission/nuAppEmployessPermission/queryDataRule',
|
queryDataRule = '/employessPermission/nuAppEmployessPermission/queryDataRule',
|
||||||
|
qyList = '/nuBaseInfo/nuBaseInfo/qyPemissionList',
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -40,6 +41,7 @@ export const getImportUrl = Api.importExcel;
|
||||||
* @param params
|
* @param params
|
||||||
*/
|
*/
|
||||||
export const list = (params) => defHttp.get({ url: Api.list, params });
|
export const list = (params) => defHttp.get({ url: Api.list, params });
|
||||||
|
export const qyList = (params) => defHttp.get({ url: Api.qyList, params });
|
||||||
export const getEmployessServiceTags = (params) => defHttp.get({ url: Api.getEmployessServiceTags, params });
|
export const getEmployessServiceTags = (params) => defHttp.get({ url: Api.getEmployessServiceTags, params });
|
||||||
export const getEmployeesList = (params) => defHttp.get({ url: Api.getEmployeesList, params });
|
export const getEmployeesList = (params) => defHttp.get({ url: Api.getEmployeesList, params });
|
||||||
|
|
||||||
|
|
@ -108,7 +110,7 @@ export const queryRolePermission = (params) => defHttp.get({ url: Api.queryRoleP
|
||||||
/**
|
/**
|
||||||
* 保存角色权限
|
* 保存角色权限
|
||||||
*/
|
*/
|
||||||
export const saveRolePermission = (params) => defHttp.post({ url: Api.saveRolePermission, params });
|
export const saveRolePermissionList = (params) => defHttp.post({ url: Api.saveRolePermissionList, params });
|
||||||
/**
|
/**
|
||||||
* 查询角色数据规则
|
* 查询角色数据规则
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
|
|
@ -1,56 +1,67 @@
|
||||||
<template>
|
<template>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<BasicDrawer v-bind="$attrs" @register="registerDrawer" width="650px" destroyOnClose showFooter>
|
<BasicDrawer v-bind="$attrs" @register="registerDrawer" width="650px" destroyOnClose showFooter>
|
||||||
<template #title>
|
<template #title>
|
||||||
角色标签配置
|
区域标签配置
|
||||||
<a-dropdown>
|
|
||||||
<Icon icon="ant-design:more-outlined" class="more-icon" />
|
|
||||||
<template #overlay>
|
|
||||||
<a-menu @click="treeMenuClick">
|
|
||||||
<a-menu-item key="checkAll">选择全部</a-menu-item>
|
|
||||||
<a-menu-item key="cancelCheck">取消选择</a-menu-item>
|
|
||||||
<div class="line"></div>
|
|
||||||
<a-menu-item key="openAll">展开全部</a-menu-item>
|
|
||||||
<a-menu-item key="closeAll">折叠全部</a-menu-item>
|
|
||||||
<div class="line"></div>
|
|
||||||
<a-menu-item key="relation">层级关联</a-menu-item>
|
|
||||||
<a-menu-item key="standAlone">层级独立</a-menu-item>
|
|
||||||
</a-menu>
|
|
||||||
</template>
|
|
||||||
</a-dropdown>
|
|
||||||
</template>
|
</template>
|
||||||
<BasicTree
|
|
||||||
ref="treeRef"
|
<div>
|
||||||
checkable
|
<a-card v-for="(itemNu,index) in qyDataList" :key="index" style="margin-bottom:14px" headStyle="min-height: 40px;" bodyStyle="padding: 14px;">
|
||||||
:treeData="treeData"
|
<template #title>
|
||||||
:checkedKeys="checkedKeys"
|
{{itemNu.nuName}}
|
||||||
:expandedKeys="expandedKeys"
|
</template>
|
||||||
:selectedKeys="selectedKeys"
|
<template #extra>
|
||||||
:clickRowToExpand="false"
|
<a-tag color="blue" v-if="itemNu.areaFlag==1">{{itemNu.areaFlag_dictText}}</a-tag>
|
||||||
:checkStrictly="true"
|
<a-tag color="green" v-if="itemNu.areaFlag==2">{{itemNu.areaFlag_dictText}}</a-tag>
|
||||||
title="所拥有的的角色标签"
|
<a-tag color="orange" v-if="itemNu.areaFlag==3">{{itemNu.areaFlag_dictText}}</a-tag>
|
||||||
@check="onCheck"
|
<a-tag color="purple" v-if="itemNu.areaFlag==4">{{itemNu.areaFlag_dictText}}</a-tag>
|
||||||
@select="onTreeNodeSelect"
|
</template>
|
||||||
>
|
<a-card title="基础功能" bodyStyle="padding: 14px;" headStyle="min-height: 40px;">
|
||||||
<template #title="{ slotTitle, ruleFlag }">
|
<template v-for="(item,index) in treeData" :key="index">
|
||||||
{{ slotTitle }}
|
<template v-if="item.code === 'hldy' && itemNu.areaFlag == 1">
|
||||||
<Icon v-if="ruleFlag" icon="ant-design:align-left-outlined" style="margin-left: 5px; color: red"></Icon>
|
<template v-for="itemOne in item.children">
|
||||||
</template>
|
<a-checkbox :checked="true" disabled style="margin-top:10px;">{{ itemOne.slotTitle }}</a-checkbox>
|
||||||
</BasicTree>
|
</template>
|
||||||
<!--右下角按钮-->
|
</template>
|
||||||
|
<template v-else-if="item.code === 'kf' && itemNu.areaFlag == 3">
|
||||||
|
<template v-for="itemOne in item.children">
|
||||||
|
<a-checkbox :checked="true" disabled style="margin-top:10px;">{{ itemOne.slotTitle }}</a-checkbox>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</a-card>
|
||||||
|
|
||||||
|
<a-card title="扩展功能" style="margin-top: 10px;" headStyle="min-height: 40px;" bodyStyle="padding: 14px;">
|
||||||
|
<template v-for="(item,index) in treeData" :key="index">
|
||||||
|
<template v-if="item.code === 'kzgn'">
|
||||||
|
<a-checkbox-group v-model:value="itemNu.permissionIds" style="margin-top: -10px;">
|
||||||
|
<template v-for="itemOne in item.children">
|
||||||
|
<a-checkbox :value="itemOne.key" style="margin-top:10px;">{{ itemOne.slotTitle }}</a-checkbox>
|
||||||
|
</template>
|
||||||
|
</a-checkbox-group>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</a-card>
|
||||||
|
</a-card>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<template #footer>
|
<template #footer>
|
||||||
<!-- <PopConfirmButton title="确定放弃编辑?" @confirm="closeDrawer" okText="确定" cancelText="取消"></PopConfirmButton> -->
|
|
||||||
<a-button @click="closeDrawer">取消</a-button>
|
<a-button @click="closeDrawer">取消</a-button>
|
||||||
<a-button @click="handleSubmit(false)" type="primary" :loading="loading" ghost style="margin-right: 0.8rem">仅保存</a-button>
|
<a-button @click="handleSubmit(true)" type="primary" :loading="loading">保存</a-button>
|
||||||
<a-button @click="handleSubmit(true)" type="primary" :loading="loading">保存并关闭</a-button>
|
|
||||||
</template>
|
</template>
|
||||||
</BasicDrawer>
|
</BasicDrawer>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref, computed, unref, onMounted } from 'vue';
|
import { ref, reactive, computed, unref, onMounted } from 'vue';
|
||||||
import { BasicDrawer, useDrawer, useDrawerInner } from '/@/components/Drawer';
|
import { BasicDrawer, useDrawer, useDrawerInner } from '/@/components/Drawer';
|
||||||
import { BasicTree, TreeItem } from '/@/components/Tree';
|
import { BasicTree, TreeItem } from '/@/components/Tree';
|
||||||
import { PopConfirmButton } from '/@/components/Button';
|
import { PopConfirmButton } from '/@/components/Button';
|
||||||
import { queryTreeListForRole, queryRolePermission, saveRolePermission } from '../BizEmployeesInfo.api';
|
import { queryTreeListForRole, queryRolePermission, saveRolePermissionList,qyList } from '../BizEmployeesInfo.api';
|
||||||
import { useI18n } from "/@/hooks/web/useI18n";
|
import { useI18n } from "/@/hooks/web/useI18n";
|
||||||
import { ROLE_AUTH_CONFIG_KEY } from '/@/enums/cacheEnum';
|
import { ROLE_AUTH_CONFIG_KEY } from '/@/enums/cacheEnum';
|
||||||
const emit = defineEmits(['register']);
|
const emit = defineEmits(['register']);
|
||||||
|
|
@ -63,11 +74,20 @@
|
||||||
const defaultCheckedKeys = ref([]);
|
const defaultCheckedKeys = ref([]);
|
||||||
//树的选中的节点信息
|
//树的选中的节点信息
|
||||||
const selectedKeys = ref([]);
|
const selectedKeys = ref([]);
|
||||||
|
const qyDataList = ref([]);
|
||||||
const roleId = ref('');
|
const roleId = ref('');
|
||||||
|
const areaFlag = ref('');
|
||||||
//树的实例
|
//树的实例
|
||||||
const treeRef = ref(null);
|
const treeRef = ref(null);
|
||||||
const loading = ref(false);
|
const loading = ref(false);
|
||||||
|
const checkdedTrue = ref(true);
|
||||||
|
|
||||||
|
const formData = reactive<Record<string, any>>({
|
||||||
|
id: '',
|
||||||
|
jcgn: '',
|
||||||
|
nuId: '',
|
||||||
|
kzgn: '',
|
||||||
|
});
|
||||||
//展开折叠的key
|
//展开折叠的key
|
||||||
const expandedKeys = ref<any>([]);
|
const expandedKeys = ref<any>([]);
|
||||||
//父子节点选中状态是否关联 true不关联,false关联
|
//父子节点选中状态是否关联 true不关联,false关联
|
||||||
|
|
@ -76,6 +96,8 @@
|
||||||
await reset();
|
await reset();
|
||||||
setDrawerProps({ confirmLoading: false, loading: true });
|
setDrawerProps({ confirmLoading: false, loading: true });
|
||||||
roleId.value = data.roleId;
|
roleId.value = data.roleId;
|
||||||
|
areaFlag.value = data.areaFlag;
|
||||||
|
console.log("🚀 ~ areaFlag.value:", areaFlag.value)
|
||||||
//初始化数据
|
//初始化数据
|
||||||
const roleResult = await queryTreeListForRole();
|
const roleResult = await queryTreeListForRole();
|
||||||
// update-begin--author:liaozhiyang---date:20240228---for:【QQYUN-8355】角色权限配置的菜单翻译
|
// update-begin--author:liaozhiyang---date:20240228---for:【QQYUN-8355】角色权限配置的菜单翻译
|
||||||
|
|
@ -85,15 +107,20 @@
|
||||||
// update-begin--author:liaozhiyang---date:20240531---for:【TV360X-590】角色授权弹窗操作缓存
|
// update-begin--author:liaozhiyang---date:20240531---for:【TV360X-590】角色授权弹窗操作缓存
|
||||||
const localData = localStorage.getItem(ROLE_AUTH_CONFIG_KEY);
|
const localData = localStorage.getItem(ROLE_AUTH_CONFIG_KEY);
|
||||||
if (localData) {
|
if (localData) {
|
||||||
const obj = JSON.parse(localData);
|
|
||||||
obj.level && treeMenuClick({ key: obj.level });
|
|
||||||
obj.expand && treeMenuClick({ key: obj.expand });
|
|
||||||
} else {
|
} else {
|
||||||
expandedKeys.value = roleResult.ids;
|
expandedKeys.value = roleResult.ids;
|
||||||
}
|
}
|
||||||
// update-end--author:liaozhiyang---date:20240531---for:【TV360X-590】角色授权弹窗操作缓存
|
// update-end--author:liaozhiyang---date:20240531---for:【TV360X-590】角色授权弹窗操作缓存
|
||||||
//初始化角色菜单数据
|
//初始化角色菜单数据
|
||||||
const permResult = await queryRolePermission({ employessId: unref(roleId) });
|
const permResult = await queryRolePermission({ employessId: unref(roleId) });
|
||||||
|
var nuList = await qyList({ employessId: unref(roleId) });
|
||||||
|
for(var i=0;i<nuList.records.length;i++){
|
||||||
|
var nu = nuList.records[i];
|
||||||
|
//主要用于防止checkbox选中时清除原来的数据
|
||||||
|
nu.permissionIds = nu.permissionIds?.split(",");
|
||||||
|
}
|
||||||
|
qyDataList.value = nuList.records;
|
||||||
|
formData.kzgn = permResult;
|
||||||
checkedKeys.value = permResult;
|
checkedKeys.value = permResult;
|
||||||
defaultCheckedKeys.value = permResult;
|
defaultCheckedKeys.value = permResult;
|
||||||
setDrawerProps({ loading: false });
|
setDrawerProps({ loading: false });
|
||||||
|
|
@ -112,6 +139,11 @@
|
||||||
item.slotTitle = new Function('t', `return ${item.slotTitle}`)(t);
|
item.slotTitle = new Function('t', `return ${item.slotTitle}`)(t);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
if(item.code.indexOf('kzgn') > -1){
|
||||||
|
item.checked = false;
|
||||||
|
}else{
|
||||||
|
item.checked = true;
|
||||||
|
}
|
||||||
if (item.children?.length) {
|
if (item.children?.length) {
|
||||||
translateTitle(item.children);
|
translateTitle(item.children);
|
||||||
}
|
}
|
||||||
|
|
@ -119,69 +151,7 @@
|
||||||
}
|
}
|
||||||
return data;
|
return data;
|
||||||
}
|
}
|
||||||
/**
|
|
||||||
* 点击选中
|
|
||||||
* 2024-04-26
|
|
||||||
* liaozhiyang
|
|
||||||
*/
|
|
||||||
function onCheck(o, e) {
|
|
||||||
// checkStrictly: true=>层级独立,false=>层级关联.
|
|
||||||
if (checkStrictly.value) {
|
|
||||||
checkedKeys.value = o.checked ? o.checked : o;
|
|
||||||
} else {
|
|
||||||
const keys = getNodeAllKey(e.node, 'children', 'key');
|
|
||||||
if (e.checked) {
|
|
||||||
// 反复操作下可能会有重复的keys,得用new Set去重下
|
|
||||||
checkedKeys.value = [...new Set([...checkedKeys.value, ...keys])];
|
|
||||||
} else {
|
|
||||||
const result = removeMatchingItems(checkedKeys.value, keys);
|
|
||||||
checkedKeys.value = result;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* 2024-04-26
|
|
||||||
* liaozhiyang
|
|
||||||
* 删除相匹配数组的项
|
|
||||||
*/
|
|
||||||
function removeMatchingItems(arr1, arr2) {
|
|
||||||
// 使用哈希表记录 arr2 中的元素
|
|
||||||
const hashTable = {};
|
|
||||||
for (const item of arr2) {
|
|
||||||
hashTable[item] = true;
|
|
||||||
}
|
|
||||||
// 使用 filter 方法遍历第一个数组,过滤出不在哈希表中存在的项
|
|
||||||
return arr1.filter((item) => !hashTable[item]);
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* 2024-04-26
|
|
||||||
* liaozhiyang
|
|
||||||
* 获取当前节点及以下所有子孙级的key
|
|
||||||
*/
|
|
||||||
function getNodeAllKey(node: any, children: any, key: string) {
|
|
||||||
const result: any = [];
|
|
||||||
result.push(node[key]);
|
|
||||||
const recursion = (data) => {
|
|
||||||
data.forEach((item: any) => {
|
|
||||||
result.push(item[key]);
|
|
||||||
if (item[children]?.length) {
|
|
||||||
recursion(item[children]);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
node[children]?.length && recursion(node[children]);
|
|
||||||
return result;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 选中节点,打开数据权限抽屉
|
|
||||||
*/
|
|
||||||
function onTreeNodeSelect(key) {
|
|
||||||
if (key && key.length > 0) {
|
|
||||||
selectedKeys.value = key;
|
|
||||||
}
|
|
||||||
// openDataRuleDrawer(true, { functionId: unref(selectedKeys)[0], roleId: unref(roleId) });
|
|
||||||
}
|
|
||||||
/**
|
/**
|
||||||
* 数据重置
|
* 数据重置
|
||||||
*/
|
*/
|
||||||
|
|
@ -193,85 +163,45 @@
|
||||||
selectedKeys.value = [];
|
selectedKeys.value = [];
|
||||||
roleId.value = '';
|
roleId.value = '';
|
||||||
}
|
}
|
||||||
/**
|
|
||||||
* 获取tree实例
|
|
||||||
*/
|
|
||||||
function getTree() {
|
|
||||||
const tree = unref(treeRef);
|
|
||||||
if (!tree) {
|
|
||||||
throw new Error('tree is null!');
|
|
||||||
}
|
|
||||||
return tree;
|
|
||||||
}
|
|
||||||
/**
|
/**
|
||||||
* 提交
|
* 提交
|
||||||
*/
|
*/
|
||||||
async function handleSubmit(exit) {
|
async function handleSubmit(exit) {
|
||||||
let params = {
|
// var kzgn = formData.kzgn;
|
||||||
roleId: unref(roleId),
|
|
||||||
permissionIds: unref(getTree().getCheckedKeys()).join(','),
|
console.log("qyDataList",qyDataList);
|
||||||
lastpermissionIds: unref(defaultCheckedKeys).join(','),
|
var kzgnList = [];
|
||||||
};
|
qyDataList.value.forEach(item => {
|
||||||
//update-begin-author:taoyan date:2023-2-11 for: issues/352 VUE角色授权重复保存
|
var param = {nuId:item.nuId,roleId:roleId.value,permissionId:item.permissionIds,lastpermissionIds: unref(defaultCheckedKeys).join(','),}
|
||||||
|
kzgnList.push(param);
|
||||||
|
});
|
||||||
|
console.log("kzgnList",kzgnList);
|
||||||
|
|
||||||
|
|
||||||
if(loading.value===false){
|
if(loading.value===false){
|
||||||
await doSave(params)
|
await doSave(kzgnList)
|
||||||
}else{
|
}else{
|
||||||
console.log('请等待上次执行完毕!');
|
console.log('请等待上次执行完毕!');
|
||||||
}
|
}
|
||||||
if(exit){
|
if(exit){
|
||||||
// 如果关闭
|
|
||||||
closeDrawer();
|
closeDrawer();
|
||||||
}else{
|
}else{
|
||||||
// 没有关闭需要重新获取选中数据
|
const permResult = await queryRolePermission({ nuId: unref(roleId) });
|
||||||
const permResult = await queryRolePermission({ employessId: unref(roleId) });
|
|
||||||
defaultCheckedKeys.value = permResult;
|
defaultCheckedKeys.value = permResult;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// VUE角色授权重复保存 #352
|
// VUE角色授权重复保存 #352
|
||||||
async function doSave(params) {
|
async function doSave(params) {
|
||||||
loading.value = true;
|
console.log("🚀 ~ doSave ~ params:", params)
|
||||||
await saveRolePermission(params);
|
// loading.value = true;
|
||||||
|
await saveRolePermissionList(params);
|
||||||
setTimeout(()=>{
|
setTimeout(()=>{
|
||||||
loading.value = false;
|
loading.value = false;
|
||||||
}, 500)
|
}, 500)
|
||||||
}
|
}
|
||||||
//update-end-author:taoyan date:2023-2-11 for: issues/352 VUE角色授权重复保存
|
//update-end-author:taoyan date:2023-2-11 for: issues/352 VUE角色授权重复保存
|
||||||
|
|
||||||
/**
|
|
||||||
* 树菜单选择
|
|
||||||
* @param key
|
|
||||||
*/
|
|
||||||
function treeMenuClick({ key }) {
|
|
||||||
if (key === 'checkAll') {
|
|
||||||
checkedKeys.value = allTreeKeys.value;
|
|
||||||
} else if (key === 'cancelCheck') {
|
|
||||||
checkedKeys.value = [];
|
|
||||||
} else if (key === 'openAll') {
|
|
||||||
expandedKeys.value = allTreeKeys.value;
|
|
||||||
saveLocalOperation('expand', 'openAll');
|
|
||||||
} else if (key === 'closeAll') {
|
|
||||||
expandedKeys.value = [];
|
|
||||||
saveLocalOperation('expand', 'closeAll');
|
|
||||||
} else if (key === 'relation') {
|
|
||||||
checkStrictly.value = false;
|
|
||||||
saveLocalOperation('level', 'relation');
|
|
||||||
} else {
|
|
||||||
checkStrictly.value = true;
|
|
||||||
saveLocalOperation('level', 'standAlone');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* 2024-05-31
|
|
||||||
* liaozhiyang
|
|
||||||
* 【TV360X-590】角色授权弹窗操作缓存
|
|
||||||
* */
|
|
||||||
const saveLocalOperation = (key, value) => {
|
|
||||||
const localData = localStorage.getItem(ROLE_AUTH_CONFIG_KEY);
|
|
||||||
const obj = localData ? JSON.parse(localData) : {};
|
|
||||||
obj[key] = value;
|
|
||||||
localStorage.setItem(ROLE_AUTH_CONFIG_KEY, JSON.stringify(obj))
|
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
|
|
|
||||||
|
|
@ -81,7 +81,7 @@
|
||||||
</template>
|
</template>
|
||||||
<a-button type="dashed" size="small" style="margin-left:10px">二维码</a-button>
|
<a-button type="dashed" size="small" style="margin-left:10px">二维码</a-button>
|
||||||
</a-popover>
|
</a-popover>
|
||||||
<a-button type="dashed" size="small" @click="handlePerssion(item)" style="margin-left:10px" >区域标签</a-button>
|
<a-button type="dashed" size="small" @click="handlePerssion(item)" style="margin-left:10px" >区域功能</a-button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="float:right;margin-top: 20px;">
|
<div style="float:right;margin-top: 20px;">
|
||||||
|
|
@ -155,8 +155,8 @@ const { createMessage } = useMessage();
|
||||||
* 角色授权弹窗
|
* 角色授权弹窗
|
||||||
*/
|
*/
|
||||||
function handlePerssion(record) {
|
function handlePerssion(record) {
|
||||||
console.log("🚀 ~ handlePerssion ~ record:", record.nuId)
|
console.log("🚀 ~ handlePerssion ~ record:", record)
|
||||||
openRolePermissionDrawer(true, { roleId: record.nuId });
|
openRolePermissionDrawer(true, { roleId: record.nuId,areaFlag:record.areaFlag });
|
||||||
}
|
}
|
||||||
//查看物联设备
|
//查看物联设备
|
||||||
function handleWlsb(record) {
|
function handleWlsb(record) {
|
||||||
|
|
|
||||||
|
|
@ -1,52 +1,50 @@
|
||||||
<template>
|
<template>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<BasicDrawer v-bind="$attrs" @register="registerDrawer" width="650px" destroyOnClose showFooter>
|
<BasicDrawer v-bind="$attrs" @register="registerDrawer" width="650px" destroyOnClose showFooter>
|
||||||
<template #title>
|
<template #title>
|
||||||
区域标签配置
|
区域标签配置
|
||||||
<a-dropdown>
|
|
||||||
<Icon icon="ant-design:more-outlined" class="more-icon" />
|
|
||||||
<template #overlay>
|
|
||||||
<a-menu @click="treeMenuClick">
|
|
||||||
<a-menu-item key="checkAll">选择全部</a-menu-item>
|
|
||||||
<a-menu-item key="cancelCheck">取消选择</a-menu-item>
|
|
||||||
<div class="line"></div>
|
|
||||||
<a-menu-item key="openAll">展开全部</a-menu-item>
|
|
||||||
<a-menu-item key="closeAll">折叠全部</a-menu-item>
|
|
||||||
<div class="line"></div>
|
|
||||||
<a-menu-item key="relation">层级关联</a-menu-item>
|
|
||||||
<a-menu-item key="standAlone">层级独立</a-menu-item>
|
|
||||||
</a-menu>
|
|
||||||
</template>
|
|
||||||
</a-dropdown>
|
|
||||||
</template>
|
</template>
|
||||||
<BasicTree
|
|
||||||
ref="treeRef"
|
<div>
|
||||||
checkable
|
<a-card title="基础功能">
|
||||||
:treeData="treeData"
|
<a-row v-for="(item,index) in treeData" :key="index">
|
||||||
:checkedKeys="checkedKeys"
|
<template v-if="item.code === 'hldy' && areaFlag == 1">
|
||||||
:expandedKeys="expandedKeys"
|
<a-col :span="24" v-for="itemOne in item.children">
|
||||||
:selectedKeys="selectedKeys"
|
<a-checkbox :checked="true" disabled style="margin-top:10px;">{{ itemOne.slotTitle }}</a-checkbox>
|
||||||
:clickRowToExpand="false"
|
</a-col>
|
||||||
:checkStrictly="true"
|
</template>
|
||||||
title="所拥有的的区域标签"
|
<template v-else-if="item.code === 'kf' && areaFlag == 3">
|
||||||
@check="onCheck"
|
<a-col :span="24" v-for="itemOne in item.children">
|
||||||
@select="onTreeNodeSelect"
|
<a-checkbox :checked="true" disabled style="margin-top:10px;">{{ itemOne.slotTitle }}</a-checkbox>
|
||||||
>
|
</a-col>
|
||||||
<template #title="{ slotTitle, ruleFlag }">
|
</template>
|
||||||
{{ slotTitle }}
|
</a-row>
|
||||||
<Icon v-if="ruleFlag" icon="ant-design:align-left-outlined" style="margin-left: 5px; color: red"></Icon>
|
</a-card>
|
||||||
</template>
|
|
||||||
</BasicTree>
|
<a-card title="扩展功能" style="margin-top: 20px;">
|
||||||
<!--右下角按钮-->
|
<a-row v-for="(item,index) in treeData" :key="index">
|
||||||
|
<template v-if="item.code === 'kzgn'">
|
||||||
|
<a-checkbox-group v-model:value="formData.kzgn">
|
||||||
|
<a-col :span="24" v-for="itemOne in item.children">
|
||||||
|
<a-checkbox :value="itemOne.key" style="margin-top:10px;">{{ itemOne.slotTitle }}</a-checkbox>
|
||||||
|
</a-col>
|
||||||
|
</a-checkbox-group>
|
||||||
|
</template>
|
||||||
|
</a-row>
|
||||||
|
</a-card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<template #footer>
|
<template #footer>
|
||||||
<!-- <PopConfirmButton title="确定放弃编辑?" @confirm="closeDrawer" okText="确定" cancelText="取消"></PopConfirmButton> -->
|
|
||||||
<a-button @click="closeDrawer">取消</a-button>
|
<a-button @click="closeDrawer">取消</a-button>
|
||||||
<a-button @click="handleSubmit(false)" type="primary" :loading="loading" ghost style="margin-right: 0.8rem">仅保存</a-button>
|
<a-button @click="handleSubmit(true)" type="primary" :loading="loading">保存</a-button>
|
||||||
<a-button @click="handleSubmit(true)" type="primary" :loading="loading">保存并关闭</a-button>
|
|
||||||
</template>
|
</template>
|
||||||
</BasicDrawer>
|
</BasicDrawer>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref, computed, unref, onMounted } from 'vue';
|
import { ref, reactive, computed, unref, onMounted } from 'vue';
|
||||||
import { BasicDrawer, useDrawer, useDrawerInner } from '/@/components/Drawer';
|
import { BasicDrawer, useDrawer, useDrawerInner } from '/@/components/Drawer';
|
||||||
import { BasicTree, TreeItem } from '/@/components/Tree';
|
import { BasicTree, TreeItem } from '/@/components/Tree';
|
||||||
import { PopConfirmButton } from '/@/components/Button';
|
import { PopConfirmButton } from '/@/components/Button';
|
||||||
|
|
@ -64,10 +62,17 @@
|
||||||
//树的选中的节点信息
|
//树的选中的节点信息
|
||||||
const selectedKeys = ref([]);
|
const selectedKeys = ref([]);
|
||||||
const roleId = ref('');
|
const roleId = ref('');
|
||||||
|
const areaFlag = ref('');
|
||||||
//树的实例
|
//树的实例
|
||||||
const treeRef = ref(null);
|
const treeRef = ref(null);
|
||||||
const loading = ref(false);
|
const loading = ref(false);
|
||||||
|
|
||||||
|
const formData = reactive<Record<string, any>>({
|
||||||
|
id: '',
|
||||||
|
jcgn: '',
|
||||||
|
nuId: '',
|
||||||
|
kzgn: '',
|
||||||
|
});
|
||||||
//展开折叠的key
|
//展开折叠的key
|
||||||
const expandedKeys = ref<any>([]);
|
const expandedKeys = ref<any>([]);
|
||||||
//父子节点选中状态是否关联 true不关联,false关联
|
//父子节点选中状态是否关联 true不关联,false关联
|
||||||
|
|
@ -76,6 +81,8 @@
|
||||||
await reset();
|
await reset();
|
||||||
setDrawerProps({ confirmLoading: false, loading: true });
|
setDrawerProps({ confirmLoading: false, loading: true });
|
||||||
roleId.value = data.roleId;
|
roleId.value = data.roleId;
|
||||||
|
areaFlag.value = data.areaFlag;
|
||||||
|
console.log("🚀 ~ areaFlag.value:", areaFlag.value)
|
||||||
//初始化数据
|
//初始化数据
|
||||||
const roleResult = await queryTreeListForRole();
|
const roleResult = await queryTreeListForRole();
|
||||||
// update-begin--author:liaozhiyang---date:20240228---for:【QQYUN-8355】角色权限配置的菜单翻译
|
// update-begin--author:liaozhiyang---date:20240228---for:【QQYUN-8355】角色权限配置的菜单翻译
|
||||||
|
|
@ -85,15 +92,36 @@
|
||||||
// update-begin--author:liaozhiyang---date:20240531---for:【TV360X-590】角色授权弹窗操作缓存
|
// update-begin--author:liaozhiyang---date:20240531---for:【TV360X-590】角色授权弹窗操作缓存
|
||||||
const localData = localStorage.getItem(ROLE_AUTH_CONFIG_KEY);
|
const localData = localStorage.getItem(ROLE_AUTH_CONFIG_KEY);
|
||||||
if (localData) {
|
if (localData) {
|
||||||
const obj = JSON.parse(localData);
|
|
||||||
obj.level && treeMenuClick({ key: obj.level });
|
|
||||||
obj.expand && treeMenuClick({ key: obj.expand });
|
|
||||||
} else {
|
} else {
|
||||||
expandedKeys.value = roleResult.ids;
|
expandedKeys.value = roleResult.ids;
|
||||||
}
|
}
|
||||||
// update-end--author:liaozhiyang---date:20240531---for:【TV360X-590】角色授权弹窗操作缓存
|
// update-end--author:liaozhiyang---date:20240531---for:【TV360X-590】角色授权弹窗操作缓存
|
||||||
//初始化角色菜单数据
|
//初始化角色菜单数据
|
||||||
const permResult = await queryRolePermission({ nuId: unref(roleId) });
|
const permResult = await queryRolePermission({ nuId: unref(roleId) });
|
||||||
|
formData.kzgn = permResult;
|
||||||
|
// if(areaFlag.value == 1){
|
||||||
|
// var jcgn = "";
|
||||||
|
// treeData.value.forEach(function(item) {
|
||||||
|
// if(item.code == 'hldy'){
|
||||||
|
// var list = item.children;
|
||||||
|
// list.forEach(function(itemOne) {
|
||||||
|
// jcgn = jcgn+itemOne.key+",";
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// formData.jcgn = jcgn.substring(0,jcgn.length-1);
|
||||||
|
// }else if(areaFlag.value == 3){
|
||||||
|
// var jcgn = "";
|
||||||
|
// treeData.value.forEach(function(item) {
|
||||||
|
// if(item.code == 'kf'){
|
||||||
|
// var list = item.children;
|
||||||
|
// list.forEach(function(itemOne) {
|
||||||
|
// jcgn = jcgn+itemOne.key+",";
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// formData.jcgn = jcgn.substring(0,jcgn.length-1);
|
||||||
|
// }
|
||||||
checkedKeys.value = permResult;
|
checkedKeys.value = permResult;
|
||||||
defaultCheckedKeys.value = permResult;
|
defaultCheckedKeys.value = permResult;
|
||||||
setDrawerProps({ loading: false });
|
setDrawerProps({ loading: false });
|
||||||
|
|
@ -112,6 +140,11 @@
|
||||||
item.slotTitle = new Function('t', `return ${item.slotTitle}`)(t);
|
item.slotTitle = new Function('t', `return ${item.slotTitle}`)(t);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
if(item.code.indexOf('kzgn') > -1){
|
||||||
|
item.checked = false;
|
||||||
|
}else{
|
||||||
|
item.checked = true;
|
||||||
|
}
|
||||||
if (item.children?.length) {
|
if (item.children?.length) {
|
||||||
translateTitle(item.children);
|
translateTitle(item.children);
|
||||||
}
|
}
|
||||||
|
|
@ -119,69 +152,7 @@
|
||||||
}
|
}
|
||||||
return data;
|
return data;
|
||||||
}
|
}
|
||||||
/**
|
|
||||||
* 点击选中
|
|
||||||
* 2024-04-26
|
|
||||||
* liaozhiyang
|
|
||||||
*/
|
|
||||||
function onCheck(o, e) {
|
|
||||||
// checkStrictly: true=>层级独立,false=>层级关联.
|
|
||||||
if (checkStrictly.value) {
|
|
||||||
checkedKeys.value = o.checked ? o.checked : o;
|
|
||||||
} else {
|
|
||||||
const keys = getNodeAllKey(e.node, 'children', 'key');
|
|
||||||
if (e.checked) {
|
|
||||||
// 反复操作下可能会有重复的keys,得用new Set去重下
|
|
||||||
checkedKeys.value = [...new Set([...checkedKeys.value, ...keys])];
|
|
||||||
} else {
|
|
||||||
const result = removeMatchingItems(checkedKeys.value, keys);
|
|
||||||
checkedKeys.value = result;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* 2024-04-26
|
|
||||||
* liaozhiyang
|
|
||||||
* 删除相匹配数组的项
|
|
||||||
*/
|
|
||||||
function removeMatchingItems(arr1, arr2) {
|
|
||||||
// 使用哈希表记录 arr2 中的元素
|
|
||||||
const hashTable = {};
|
|
||||||
for (const item of arr2) {
|
|
||||||
hashTable[item] = true;
|
|
||||||
}
|
|
||||||
// 使用 filter 方法遍历第一个数组,过滤出不在哈希表中存在的项
|
|
||||||
return arr1.filter((item) => !hashTable[item]);
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* 2024-04-26
|
|
||||||
* liaozhiyang
|
|
||||||
* 获取当前节点及以下所有子孙级的key
|
|
||||||
*/
|
|
||||||
function getNodeAllKey(node: any, children: any, key: string) {
|
|
||||||
const result: any = [];
|
|
||||||
result.push(node[key]);
|
|
||||||
const recursion = (data) => {
|
|
||||||
data.forEach((item: any) => {
|
|
||||||
result.push(item[key]);
|
|
||||||
if (item[children]?.length) {
|
|
||||||
recursion(item[children]);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
node[children]?.length && recursion(node[children]);
|
|
||||||
return result;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 选中节点,打开数据权限抽屉
|
|
||||||
*/
|
|
||||||
function onTreeNodeSelect(key) {
|
|
||||||
if (key && key.length > 0) {
|
|
||||||
selectedKeys.value = key;
|
|
||||||
}
|
|
||||||
// openDataRuleDrawer(true, { functionId: unref(selectedKeys)[0], roleId: unref(roleId) });
|
|
||||||
}
|
|
||||||
/**
|
/**
|
||||||
* 数据重置
|
* 数据重置
|
||||||
*/
|
*/
|
||||||
|
|
@ -193,23 +164,15 @@
|
||||||
selectedKeys.value = [];
|
selectedKeys.value = [];
|
||||||
roleId.value = '';
|
roleId.value = '';
|
||||||
}
|
}
|
||||||
/**
|
|
||||||
* 获取tree实例
|
|
||||||
*/
|
|
||||||
function getTree() {
|
|
||||||
const tree = unref(treeRef);
|
|
||||||
if (!tree) {
|
|
||||||
throw new Error('tree is null!');
|
|
||||||
}
|
|
||||||
return tree;
|
|
||||||
}
|
|
||||||
/**
|
/**
|
||||||
* 提交
|
* 提交
|
||||||
*/
|
*/
|
||||||
async function handleSubmit(exit) {
|
async function handleSubmit(exit) {
|
||||||
|
var kzgn = formData.kzgn;
|
||||||
|
|
||||||
let params = {
|
let params = {
|
||||||
roleId: unref(roleId),
|
roleId: unref(roleId),
|
||||||
permissionIds: unref(getTree().getCheckedKeys()).join(','),
|
permissionIds: unref(kzgn).join(','),
|
||||||
lastpermissionIds: unref(defaultCheckedKeys).join(','),
|
lastpermissionIds: unref(defaultCheckedKeys).join(','),
|
||||||
};
|
};
|
||||||
//update-begin-author:taoyan date:2023-2-11 for: issues/352 VUE角色授权重复保存
|
//update-begin-author:taoyan date:2023-2-11 for: issues/352 VUE角色授权重复保存
|
||||||
|
|
@ -219,10 +182,8 @@
|
||||||
console.log('请等待上次执行完毕!');
|
console.log('请等待上次执行完毕!');
|
||||||
}
|
}
|
||||||
if(exit){
|
if(exit){
|
||||||
// 如果关闭
|
|
||||||
closeDrawer();
|
closeDrawer();
|
||||||
}else{
|
}else{
|
||||||
// 没有关闭需要重新获取选中数据
|
|
||||||
const permResult = await queryRolePermission({ nuId: unref(roleId) });
|
const permResult = await queryRolePermission({ nuId: unref(roleId) });
|
||||||
defaultCheckedKeys.value = permResult;
|
defaultCheckedKeys.value = permResult;
|
||||||
}
|
}
|
||||||
|
|
@ -230,6 +191,7 @@
|
||||||
|
|
||||||
// VUE角色授权重复保存 #352
|
// VUE角色授权重复保存 #352
|
||||||
async function doSave(params) {
|
async function doSave(params) {
|
||||||
|
console.log("🚀 ~ doSave ~ params:", params)
|
||||||
loading.value = true;
|
loading.value = true;
|
||||||
await saveRolePermission(params);
|
await saveRolePermission(params);
|
||||||
setTimeout(()=>{
|
setTimeout(()=>{
|
||||||
|
|
@ -238,40 +200,6 @@
|
||||||
}
|
}
|
||||||
//update-end-author:taoyan date:2023-2-11 for: issues/352 VUE角色授权重复保存
|
//update-end-author:taoyan date:2023-2-11 for: issues/352 VUE角色授权重复保存
|
||||||
|
|
||||||
/**
|
|
||||||
* 树菜单选择
|
|
||||||
* @param key
|
|
||||||
*/
|
|
||||||
function treeMenuClick({ key }) {
|
|
||||||
if (key === 'checkAll') {
|
|
||||||
checkedKeys.value = allTreeKeys.value;
|
|
||||||
} else if (key === 'cancelCheck') {
|
|
||||||
checkedKeys.value = [];
|
|
||||||
} else if (key === 'openAll') {
|
|
||||||
expandedKeys.value = allTreeKeys.value;
|
|
||||||
saveLocalOperation('expand', 'openAll');
|
|
||||||
} else if (key === 'closeAll') {
|
|
||||||
expandedKeys.value = [];
|
|
||||||
saveLocalOperation('expand', 'closeAll');
|
|
||||||
} else if (key === 'relation') {
|
|
||||||
checkStrictly.value = false;
|
|
||||||
saveLocalOperation('level', 'relation');
|
|
||||||
} else {
|
|
||||||
checkStrictly.value = true;
|
|
||||||
saveLocalOperation('level', 'standAlone');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* 2024-05-31
|
|
||||||
* liaozhiyang
|
|
||||||
* 【TV360X-590】角色授权弹窗操作缓存
|
|
||||||
* */
|
|
||||||
const saveLocalOperation = (key, value) => {
|
|
||||||
const localData = localStorage.getItem(ROLE_AUTH_CONFIG_KEY);
|
|
||||||
const obj = localData ? JSON.parse(localData) : {};
|
|
||||||
obj[key] = value;
|
|
||||||
localStorage.setItem(ROLE_AUTH_CONFIG_KEY, JSON.stringify(obj))
|
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue