602 lines
21 KiB
Vue
602 lines
21 KiB
Vue
|
<template>
|
|||
|
|
<BasicModal
|
|||
|
|
wrapClassName="autherizeDialog"
|
|||
|
|
v-bind="$attrs"
|
|||
|
|
@register="registerRoleAuthModal"
|
|||
|
|
:title="t('功能授权')"
|
|||
|
|
destroy-on-close
|
|||
|
|
@ok="handleSubmit"
|
|||
|
|
:width=modalLength()
|
|||
|
|
>
|
|||
|
|
<template #title>
|
|||
|
|
<div>功能授权<span style="color:red">（注意：修改角色权限后需要手动点击“登出角色用户”按钮，或用户重新登录后才会生效）</span></div>
|
|||
|
|
</template>
|
|||
|
|
<a-row :gutter="[16, 16]" class="h-full">
|
|||
|
|
<a-col :span=spanLength() v-if="typeKey==4||typeKey==0">
|
|||
|
|
<div class="text-base border-l-6 border-[#5e95ff] pl-3 h-5 leading-5 mb-3 ml-2">{{
|
|||
|
|
t('系统功能')
|
|||
|
|
}}</div>
|
|||
|
|
<div class="treebox">
|
|||
|
|
<BasicTree
|
|||
|
|
:treeData="treeData"
|
|||
|
|
checkable
|
|||
|
|
ref="treeRef"
|
|||
|
|
@check="handleTreeSelect"
|
|||
|
|
:fieldNames="{ title: 'title', key: 'id' }"
|
|||
|
|
>
|
|||
|
|
<template #title="{ title, systemName, parentId }">
|
|||
|
|
<div v-if="parentId == 0">{{ title }} 【{{ systemName }}】</div>
|
|||
|
|
<div v-else>{{ title }}</div>
|
|||
|
|
</template>
|
|||
|
|
</BasicTree>
|
|||
|
|
</div>
|
|||
|
|
</a-col>
|
|||
|
|
<a-col :span=spanLength() v-if="typeKey==4||typeKey==1">
|
|||
|
|
<div class="text-base border-l-6 border-[#5e95ff] pl-3 h-5 leading-5 mb-3 ml-2">{{
|
|||
|
|
t('按钮权限')
|
|||
|
|
}}</div>
|
|||
|
|
<div class="treebox">
|
|||
|
|
<BasicTree
|
|||
|
|
:treeData="buttonSelectData"
|
|||
|
|
checkable
|
|||
|
|
ref="ButtonRef"
|
|||
|
|
@check="handleButtonSelect"
|
|||
|
|
:fieldNames="{ title: 'title', key: 'id' }"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</a-col>
|
|||
|
|
<a-col :span=spanLength() v-if="typeKey==4||typeKey==2">
|
|||
|
|
<div class="text-base border-l-6 border-[#5e95ff] pl-3 h-5 leading-5 mb-3 ml-2">{{
|
|||
|
|
t('字段权限')
|
|||
|
|
}}</div>
|
|||
|
|
<div class="treebox">
|
|||
|
|
<BasicTree
|
|||
|
|
:treeData="columnSelectData"
|
|||
|
|
checkable
|
|||
|
|
ref="ColumnRef"
|
|||
|
|
@check="handleColumnSelect"
|
|||
|
|
:fieldNames="{ title: 'title', key: 'id' }"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</a-col>
|
|||
|
|
<a-col :span=spanLength() v-if="typeKey==4||typeKey==3">
|
|||
|
|
<div class="text-base border-l-6 border-[#5e95ff] pl-3 h-5 leading-5 mb-3 ml-2">{{
|
|||
|
|
t('表单权限')
|
|||
|
|
}}</div>
|
|||
|
|
<div class="treebox">
|
|||
|
|
<BasicTree
|
|||
|
|
:treeData="fieldSelectData"
|
|||
|
|
checkable
|
|||
|
|
ref="FieldRef"
|
|||
|
|
@check="handleFieldSelect"
|
|||
|
|
:fieldNames="{ title: 'title', key: 'id' }"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</a-col>
|
|||
|
|
</a-row>
|
|||
|
|
</BasicModal>
|
|||
|
|
</template>
|
|||
|
|
<script lang="ts">
|
|||
|
|
import { defineComponent, ref, unref, nextTick } from 'vue';
|
|||
|
|
import { getMenuSimpleTree } from '/@/api/system/menu';
|
|||
|
|
import { BasicModal, useModalInner } from '/@/components/Modal';
|
|||
|
|
import { TreeItem, BasicTree, TreeActionType } from '/@/components/Tree';
|
|||
|
|
import { getRoleAuth, RoleSetAuth } from '/@/api/system/role';
|
|||
|
|
import { useMessage } from '/@/hooks/web/useMessage';
|
|||
|
|
|
|||
|
|
import { getMenuButtonList, getMenuColumnList, getMenuFieldList } from '/@/api/system/menuButton';
|
|||
|
|
import { cloneDeep } from 'lodash-es';
|
|||
|
|
import { useI18n } from '/@/hooks/web/useI18n';
|
|||
|
|
|
|||
|
|
export default defineComponent({
|
|||
|
|
name: 'SelectUserModal',
|
|||
|
|
components: { BasicModal, BasicTree },
|
|||
|
|
emits: ['success', 'register'],
|
|||
|
|
setup(_, { emit }) {
|
|||
|
|
const { notification } = useMessage();
|
|||
|
|
const { t } = useI18n();
|
|||
|
|
const treeRef = ref<Nullable<TreeActionType>>(null);
|
|||
|
|
const ButtonRef = ref<Nullable<TreeActionType>>(null);
|
|||
|
|
const ColumnRef = ref<Nullable<TreeActionType>>(null);
|
|||
|
|
const FieldRef = ref<Nullable<TreeActionType>>(null);
|
|||
|
|
const treeData = ref<TreeItem[]>([]);
|
|||
|
|
const buttonData = ref<TreeItem[]>([]);
|
|||
|
|
const columnData = ref<TreeItem[]>([]);
|
|||
|
|
const fieldData = ref<TreeItem[]>([]);
|
|||
|
|
|
|||
|
|
const buttonSelectData = ref<TreeItem[]>([]);
|
|||
|
|
const columnSelectData = ref<TreeItem[]>([]);
|
|||
|
|
const fieldSelectData = ref<TreeItem[]>([]);
|
|||
|
|
const btnKeys = ref<string[]>([]);
|
|||
|
|
const colKeys = ref<string[]>([]);
|
|||
|
|
const menuKeys = ref<string[]>([]);
|
|||
|
|
const fieldKeys = ref<string[]>([]);
|
|||
|
|
|
|||
|
|
const btnFilterKeys = ref<string[]>([]);
|
|||
|
|
const colFilterKeys = ref<string[]>([]);
|
|||
|
|
const fieldFilterKeys = ref<string[]>([]);
|
|||
|
|
|
|||
|
|
const rowId = ref('');
|
|||
|
|
const typeKey = ref(4);
|
|||
|
|
|
|||
|
|
function getTree(tree) {
|
|||
|
|
if (!tree) {
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
return tree;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function spanLength() {
|
|||
|
|
if (typeKey.value == 4) {
|
|||
|
|
return "6";
|
|||
|
|
} else {
|
|||
|
|
return "24";
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function modalLength() {
|
|||
|
|
if (typeKey.value == 4) {
|
|||
|
|
return "90%";
|
|||
|
|
} else {
|
|||
|
|
return "40%";
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const [registerRoleAuthModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
|||
|
|
setModalProps({ confirmLoading: false });
|
|||
|
|
rowId.value = data.id;
|
|||
|
|
typeKey.value = data.key;
|
|||
|
|
treeData.value = await getMenuSimpleTree();
|
|||
|
|
|
|||
|
|
buttonData.value = await getMenuButtonList();
|
|||
|
|
columnData.value = await getMenuColumnList();
|
|||
|
|
fieldData.value = await getMenuFieldList();
|
|||
|
|
|
|||
|
|
const authList = await getRoleAuth(rowId.value);
|
|||
|
|
menuKeys.value = authList.menuIds || [];
|
|||
|
|
btnKeys.value = authList.buttonIds || [];
|
|||
|
|
colKeys.value = authList.columnIds || [];
|
|||
|
|
fieldKeys.value = authList.formIds || [];
|
|||
|
|
let menuCheckedKey = [];
|
|||
|
|
let btnCheckedKey = [];
|
|||
|
|
let colCheckedKey = [];
|
|||
|
|
let fieldCheckedKey = [];
|
|||
|
|
if (typeKey.value == 4) {
|
|||
|
|
menuKeys.value.forEach((o) => {
|
|||
|
|
getParentKeys(menuCheckedKey, treeData.value, o);
|
|||
|
|
});
|
|||
|
|
menuKeys.value = menuCheckedKey;
|
|||
|
|
getTree(unref(treeRef)).setCheckedKeys(authList.menuIds);
|
|||
|
|
initTree(menuCheckedKey);
|
|||
|
|
|
|||
|
|
let lostBtnKey = [];
|
|||
|
|
btnKeys.value.forEach((o) => {
|
|||
|
|
// getParentKeys(btnCheckedKey, buttonSelectData.value, o, lostBtnKey);
|
|||
|
|
getParentKeysAndLost(btnCheckedKey, buttonSelectData.value, o, lostBtnKey);
|
|||
|
|
});
|
|||
|
|
if (lostBtnKey) {
|
|||
|
|
let menuIds = [];
|
|||
|
|
buttonData.value.forEach((but) => {
|
|||
|
|
if (lostBtnKey.includes(but.id)) {
|
|||
|
|
menuIds.push(but.menuId);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
menuIds.forEach((key) => {
|
|||
|
|
getParentKeys(btnCheckedKey, treeData.value, key);
|
|||
|
|
});
|
|||
|
|
findMenuTree(buttonSelectData.value, treeData.value, btnCheckedKey, 'button');
|
|||
|
|
}
|
|||
|
|
btnKeys.value = Array.from(new Set([...btnKeys.value, ...btnCheckedKey]));
|
|||
|
|
|
|||
|
|
let lostColKey = [];
|
|||
|
|
colKeys.value.forEach((o) => {
|
|||
|
|
// getParentKeys(colCheckedKey, columnSelectData.value, o);
|
|||
|
|
getParentKeysAndLost(colCheckedKey, columnSelectData.value, o, lostColKey);
|
|||
|
|
});
|
|||
|
|
if (lostColKey) {
|
|||
|
|
let menuIds = [];
|
|||
|
|
columnData.value.forEach((but) => {
|
|||
|
|
if (lostColKey.includes(but.id)) {
|
|||
|
|
menuIds.push(but.menuId);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
menuIds.forEach((key) => {
|
|||
|
|
getParentKeys(colCheckedKey, treeData.value, key);
|
|||
|
|
});
|
|||
|
|
findMenuTree(columnSelectData.value, treeData.value, colCheckedKey, 'column');
|
|||
|
|
}
|
|||
|
|
colKeys.value = Array.from(new Set([...colKeys.value, ...colCheckedKey]));
|
|||
|
|
|
|||
|
|
let lostFieldKey = [];
|
|||
|
|
fieldKeys.value.forEach((o) => {
|
|||
|
|
// getParentKeys(fieldCheckedKey, fieldSelectData.value, o);
|
|||
|
|
getParentKeysAndLost(fieldCheckedKey, fieldSelectData.value, o, lostFieldKey);
|
|||
|
|
});
|
|||
|
|
if (lostFieldKey) {
|
|||
|
|
let menuIds = [];
|
|||
|
|
columnData.value.forEach((but) => {
|
|||
|
|
if (lostFieldKey.includes(but.id)) {
|
|||
|
|
menuIds.push(but.menuId);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
menuIds.forEach((key) => {
|
|||
|
|
getParentKeys(fieldCheckedKey, treeData.value, key);
|
|||
|
|
});
|
|||
|
|
findMenuTree(fieldSelectData.value, treeData.value, fieldCheckedKey, 'field');
|
|||
|
|
}
|
|||
|
|
fieldKeys.value = Array.from(new Set([...fieldKeys.value, ...fieldCheckedKey]));
|
|||
|
|
|
|||
|
|
nextTick(() => {
|
|||
|
|
getTree(unref(ButtonRef))?.setCheckedKeys(authList.buttonIds);
|
|||
|
|
getTree(unref(ColumnRef))?.setCheckedKeys(authList.columnIds);
|
|||
|
|
getTree(unref(FieldRef))?.setCheckedKeys(authList.formIds);
|
|||
|
|
getTree(unref(ButtonRef)).expandAll(true);
|
|||
|
|
getTree(unref(ColumnRef)).expandAll(true);
|
|||
|
|
getTree(unref(FieldRef)).expandAll(true);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
getTree(unref(treeRef)).expandAll(true);
|
|||
|
|
} else {
|
|||
|
|
if (typeKey.value == 0) {
|
|||
|
|
menuKeys.value.forEach((o) => {
|
|||
|
|
getParentKeys(menuCheckedKey, treeData.value, o);
|
|||
|
|
});
|
|||
|
|
menuKeys.value = menuCheckedKey;
|
|||
|
|
getTree(unref(treeRef)).setCheckedKeys(authList.menuIds);
|
|||
|
|
getTree(unref(treeRef)).expandAll(true);
|
|||
|
|
}
|
|||
|
|
const fullMenuKey = [];
|
|||
|
|
getFullMenu(fullMenuKey, treeData.value);
|
|||
|
|
initTree(fullMenuKey);
|
|||
|
|
if (typeKey.value == 1) {
|
|||
|
|
btnKeys.value.forEach((o) => {
|
|||
|
|
getParentKeys(btnCheckedKey, buttonData.value, o);
|
|||
|
|
});
|
|||
|
|
btnKeys.value = btnCheckedKey;
|
|||
|
|
getTree(unref(ButtonRef))?.setCheckedKeys(authList.buttonIds);
|
|||
|
|
getTree(unref(ButtonRef)).expandAll(true);
|
|||
|
|
}
|
|||
|
|
else if (typeKey.value == 2) {
|
|||
|
|
colKeys.value.forEach((o) => {
|
|||
|
|
getParentKeys(colCheckedKey, columnData.value, o);
|
|||
|
|
});
|
|||
|
|
colKeys.value = colCheckedKey;
|
|||
|
|
nextTick(() => {
|
|||
|
|
getTree(unref(ColumnRef))?.setCheckedKeys(authList.columnIds);
|
|||
|
|
getTree(unref(ColumnRef)).expandAll(true);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
else if (typeKey.value == 3) {
|
|||
|
|
fieldKeys.value.forEach((o) => {
|
|||
|
|
getParentKeys(fieldCheckedKey, fieldData.value, o);
|
|||
|
|
});
|
|||
|
|
fieldKeys.value = fieldCheckedKey;
|
|||
|
|
nextTick(() => {
|
|||
|
|
getTree(unref(FieldRef))?.setCheckedKeys(authList.formIds);
|
|||
|
|
getTree(unref(FieldRef)).expandAll(true);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
async function handleSubmit() {
|
|||
|
|
try {
|
|||
|
|
setModalProps({ confirmLoading: true });
|
|||
|
|
|
|||
|
|
//由于树组件的原因，提交之前先过滤一遍，没有选中的不提交
|
|||
|
|
// btnKeys.value = getTree(unref(ButtonRef)).getCheckedKeys();
|
|||
|
|
// colKeys.value = getTree(unref(ColumnRef)).getCheckedKeys();
|
|||
|
|
// fieldKeys.value = getTree(unref(FieldRef)).getCheckedKeys();
|
|||
|
|
|
|||
|
|
// 过滤无效的权限 ID
|
|||
|
|
btnKeys.value = btnKeys.value.filter((o) => btnFilterKeys.value.includes(o));
|
|||
|
|
colKeys.value = colKeys.value.filter((o) => colFilterKeys.value.includes(o));
|
|||
|
|
fieldKeys.value = fieldKeys.value.filter((o) => fieldFilterKeys.value.includes(o));
|
|||
|
|
|
|||
|
|
// btnKeys.value = btnKeys.value.filter((o) => {
|
|||
|
|
// return btnFilterKeys.value.includes(o);
|
|||
|
|
// });
|
|||
|
|
// colKeys.value = colKeys.value.filter((o) => {
|
|||
|
|
// return colFilterKeys.value.includes(o);
|
|||
|
|
// });
|
|||
|
|
// fieldKeys.value = fieldKeys.value.filter((o) => {
|
|||
|
|
// return fieldFilterKeys.value.includes(o);
|
|||
|
|
// });
|
|||
|
|
|
|||
|
|
// 提交更新后的权限数据
|
|||
|
|
await RoleSetAuth({
|
|||
|
|
id: rowId.value,
|
|||
|
|
type: typeKey.value == 4?NaN:typeKey.value,
|
|||
|
|
menuIds: menuKeys.value,
|
|||
|
|
buttonIds: btnKeys.value,
|
|||
|
|
columnIds: colKeys.value,
|
|||
|
|
formIds: fieldKeys.value,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
notification.success({
|
|||
|
|
message: t('提示'),
|
|||
|
|
description: t('功能授权更新成功'),
|
|||
|
|
}); //提示消息
|
|||
|
|
closeModal();
|
|||
|
|
emit('success');
|
|||
|
|
} catch (error) {
|
|||
|
|
setModalProps({ confirmLoading: false });
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
function handleButtonSelect(keys, e) {
|
|||
|
|
btnKeys.value = [...e.halfCheckedKeys, ...keys];
|
|||
|
|
}
|
|||
|
|
function handleColumnSelect(keys, e) {
|
|||
|
|
colKeys.value = [...e.halfCheckedKeys, ...keys];
|
|||
|
|
}
|
|||
|
|
function handleFieldSelect(keys, e) {
|
|||
|
|
fieldKeys.value = [...e.halfCheckedKeys, ...keys];
|
|||
|
|
}
|
|||
|
|
function handleTreeSelect(keys, e) {
|
|||
|
|
//keys 所有全选中的key
|
|||
|
|
//e.halfCheckedKeys 所有半选中的
|
|||
|
|
|
|||
|
|
//如果没有半选 就证明全部全选 直接使用keys
|
|||
|
|
//如果有半选需要 使用keys + e.halfCheckedKeys
|
|||
|
|
|
|||
|
|
const menuSelect: string[] = [...e.halfCheckedKeys, ...keys];
|
|||
|
|
|
|||
|
|
//选择菜单的时候。对应后面的button column field 只进行增量添加
|
|||
|
|
incrementTree(menuSelect);
|
|||
|
|
|
|||
|
|
menuKeys.value = menuSelect;
|
|||
|
|
}
|
|||
|
|
function initTree(menuSelect) {
|
|||
|
|
buttonSelectData.value = [];
|
|||
|
|
columnSelectData.value = [];
|
|||
|
|
fieldSelectData.value = [];
|
|||
|
|
|
|||
|
|
btnFilterKeys.value = [];
|
|||
|
|
colFilterKeys.value = [];
|
|||
|
|
fieldFilterKeys.value = [];
|
|||
|
|
|
|||
|
|
findMenuTree(buttonSelectData.value, treeData.value, menuSelect, 'button');
|
|||
|
|
findMenuTree(columnSelectData.value, treeData.value, menuSelect, 'column');
|
|||
|
|
findMenuTree(fieldSelectData.value, treeData.value, menuSelect, 'field');
|
|||
|
|
|
|||
|
|
getTree(unref(ButtonRef))?.setExpandedKeys(menuSelect);
|
|||
|
|
getTree(unref(ColumnRef))?.setExpandedKeys(menuSelect);
|
|||
|
|
getTree(unref(FieldRef))?.setExpandedKeys(menuSelect);
|
|||
|
|
}
|
|||
|
|
function incrementTree(addMenuSelect) {
|
|||
|
|
btnFilterKeys.value = [];
|
|||
|
|
colFilterKeys.value = [];
|
|||
|
|
fieldFilterKeys.value = [];
|
|||
|
|
|
|||
|
|
// 使用 Set 合并已选中和新增选中的菜单，避免重复
|
|||
|
|
const allMenuKeys = new Set([...menuKeys.value, ...addMenuSelect]);
|
|||
|
|
|
|||
|
|
// 确保未选中菜单的子节点不会丢失
|
|||
|
|
findMenuTree(buttonSelectData.value, treeData.value, Array.from(allMenuKeys), 'button');
|
|||
|
|
findMenuTree(columnSelectData.value, treeData.value, Array.from(allMenuKeys), 'column');
|
|||
|
|
findMenuTree(fieldSelectData.value, treeData.value, Array.from(allMenuKeys), 'field');
|
|||
|
|
|
|||
|
|
// 更新按钮、字段、表单的选中状态
|
|||
|
|
btnKeys.value = Array.from(new Set([...btnKeys.value, ...addMenuSelect]));
|
|||
|
|
colKeys.value = Array.from(new Set([...colKeys.value, ...addMenuSelect]));
|
|||
|
|
fieldKeys.value = Array.from(new Set([...fieldKeys.value, ...addMenuSelect]));
|
|||
|
|
|
|||
|
|
// 扩展树的展开状态
|
|||
|
|
getTree(unref(ButtonRef))?.setExpandedKeys(Array.from(allMenuKeys));
|
|||
|
|
getTree(unref(ColumnRef))?.setExpandedKeys(Array.from(allMenuKeys));
|
|||
|
|
getTree(unref(FieldRef))?.setExpandedKeys(Array.from(allMenuKeys));
|
|||
|
|
}
|
|||
|
|
function getParentKeys(checkedKey, arr, keys) {
|
|||
|
|
for (let i = 0; i < arr.length; i++) {
|
|||
|
|
let o = arr[i];
|
|||
|
|
if (o.id == keys) {
|
|||
|
|
checkedKey.push(o.id);
|
|||
|
|
if (o.parentId > 0 && !checkedKey.includes(o.parentId)) {
|
|||
|
|
checkedKey.push(o.parentId);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (o.children?.length > 0) {
|
|||
|
|
getParentKeys(checkedKey, o.children, keys);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// keys获取对应的菜单 返回给chackedKey，如果该keys 不在原先过滤后的数组arr中的话，把keys 记录lostKey抛出给外面二次处理，减少全数据过滤的内存处理
|
|||
|
|
function getParentKeysAndLost(checkedKey, arr, keys, lostKey) {
|
|||
|
|
for (let i = 0; i < arr.length; i++) {
|
|||
|
|
let o = arr[i];
|
|||
|
|
if (o.id == keys) {
|
|||
|
|
checkedKey.push(o.id);
|
|||
|
|
if (o.parentId > 0 && !checkedKey.includes(o.parentId)) {
|
|||
|
|
checkedKey.push(o.parentId);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (o.children?.length > 0) {
|
|||
|
|
getParentKeys(checkedKey, o.children, keys);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (!checkedKey.includes(keys)) {
|
|||
|
|
lostKey.push(keys);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
function findMenuTree(menuSelectTree, treeData, keys, type) {
|
|||
|
|
for (let i = 0; i < treeData.length; i++) {
|
|||
|
|
let o = cloneDeep(treeData[i]);
|
|||
|
|
if (keys.includes(o.id)) {
|
|||
|
|
let hadData = false;
|
|||
|
|
let index = 0;
|
|||
|
|
for (let j = 0; j < menuSelectTree.length; j++) {
|
|||
|
|
if (menuSelectTree[j].id == o.id) {
|
|||
|
|
hadData = true;
|
|||
|
|
index = j;
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (!hadData) {
|
|||
|
|
o.children = [];
|
|||
|
|
menuSelectTree.push(o);
|
|||
|
|
} else {
|
|||
|
|
o = menuSelectTree[index];
|
|||
|
|
}
|
|||
|
|
if (treeData[i].children?.length > 0) {
|
|||
|
|
findMenuTree(o.children, treeData[i].children, keys, type);
|
|||
|
|
} else {
|
|||
|
|
let list =
|
|||
|
|
type == 'button'
|
|||
|
|
? buttonData.value
|
|||
|
|
: type == 'column'
|
|||
|
|
? columnData.value
|
|||
|
|
: fieldData.value;
|
|||
|
|
o.children = getAuthData(list, o.id, type);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
function getFullMenu(menuKeys, treeData) {
|
|||
|
|
for (let i = 0; i < treeData.length; i++) {
|
|||
|
|
let o = cloneDeep(treeData[i]);
|
|||
|
|
menuKeys.push(o.id);
|
|||
|
|
if (treeData[i].children?.length > 0) {
|
|||
|
|
getFullMenu(menuKeys, treeData[i].children)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
function getAuthData(list, id, type) {
|
|||
|
|
let arr: TreeItem[] = [];
|
|||
|
|
|
|||
|
|
arr = list.filter((o) => {
|
|||
|
|
return o.menuId == id;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
arr.forEach((o) => {
|
|||
|
|
o.parentId = o.menuId;
|
|||
|
|
if (type == 'button') {
|
|||
|
|
btnFilterKeys.value.push(o.id);
|
|||
|
|
} else if (type == 'column') {
|
|||
|
|
colFilterKeys.value.push(o.id);
|
|||
|
|
} else {
|
|||
|
|
if (o.children && o.children.length > 0) {
|
|||
|
|
o.children?.forEach((k) => {
|
|||
|
|
fieldFilterKeys.value.push(k.id);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
fieldFilterKeys.value.push(o.id);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
return arr;
|
|||
|
|
}
|
|||
|
|
// function findMenuTree(menuTree, menuSelectTree, keys) {
|
|||
|
|
// let selected: any = {};
|
|||
|
|
// menuTree.forEach((key) => {
|
|||
|
|
// //找到node对象
|
|||
|
|
|
|||
|
|
// if (keys.includes(key.id)) {
|
|||
|
|
// console.log(key, 'kkkkkkkkkk');
|
|||
|
|
|
|||
|
|
// selected = cloneDeep(key);
|
|||
|
|
// if (key.children?.length > 0) {
|
|||
|
|
// selected.children = [];
|
|||
|
|
// findMenuTree(key.children, selected.children, keys);
|
|||
|
|
// }
|
|||
|
|
// }
|
|||
|
|
// });
|
|||
|
|
// // let obj = menuSelectTree.find((o) => {
|
|||
|
|
// // return o.id == selected.id;
|
|||
|
|
// // });
|
|||
|
|
// // if (!obj) {
|
|||
|
|
// // menuSelectTree.push(selected);
|
|||
|
|
// // } else {
|
|||
|
|
// // obj.children = obj.children.concat(selected.children);
|
|||
|
|
// // }
|
|||
|
|
// checkChild(menuSelectTree, selected);
|
|||
|
|
// }
|
|||
|
|
// function checkChild(menuTree, selected) {
|
|||
|
|
// menuTree.forEach((o) => {
|
|||
|
|
// if (o.id == selected.parentId) {
|
|||
|
|
// o.children = o.children.concat(selected.children);
|
|||
|
|
// checkChild(o.children, selected);
|
|||
|
|
// } else {
|
|||
|
|
// menuTree.push(selected);
|
|||
|
|
// }
|
|||
|
|
// });
|
|||
|
|
// }
|
|||
|
|
//将按钮塞入到菜单树
|
|||
|
|
// function menuInsertButton(menuTree, buttonList) {
|
|||
|
|
// menuTree.forEach((menu) => {
|
|||
|
|
// const thisMenuButton = buttonList.filter((btn) => btn.menuId === menu.id);
|
|||
|
|
// if (menu.children && menu.children.length > 0) {
|
|||
|
|
// menuInsertButton(menu.children, buttonList);
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
// // console.log('thisMenuButton', thisMenuButton);
|
|||
|
|
|
|||
|
|
// menu.children = menu.children?.concat(thisMenuButton);
|
|||
|
|
// });
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
registerRoleAuthModal,
|
|||
|
|
handleSubmit,
|
|||
|
|
handleTreeSelect,
|
|||
|
|
handleButtonSelect,
|
|||
|
|
handleColumnSelect,
|
|||
|
|
handleFieldSelect,
|
|||
|
|
menuKeys,
|
|||
|
|
treeData,
|
|||
|
|
treeRef,
|
|||
|
|
ButtonRef,
|
|||
|
|
FieldRef,
|
|||
|
|
ColumnRef,
|
|||
|
|
buttonSelectData,
|
|||
|
|
columnSelectData,
|
|||
|
|
fieldSelectData,
|
|||
|
|
t,
|
|||
|
|
typeKey,
|
|||
|
|
spanLength,
|
|||
|
|
modalLength,
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
<style lang="less">
|
|||
|
|
.autherizeDialog {
|
|||
|
|
.ant-modal {
|
|||
|
|
top: 20px;
|
|||
|
|
height: calc(100% - 40px) !important;
|
|||
|
|
|
|||
|
|
.ant-modal-content {
|
|||
|
|
height: 100%;
|
|||
|
|
|
|||
|
|
.ant-modal-body {
|
|||
|
|
height: calc(100% - 120px) !important;
|
|||
|
|
|
|||
|
|
.scrollbar__view {
|
|||
|
|
height: 100%;
|
|||
|
|
|
|||
|
|
& > div {
|
|||
|
|
height: 100%;
|
|||
|
|
max-height: none !important;
|
|||
|
|
|
|||
|
|
.ant-col {
|
|||
|
|
height: 100%;
|
|||
|
|
|
|||
|
|
.treebox {
|
|||
|
|
height: calc(100% - 42px);
|
|||
|
|
overflow: auto;
|
|||
|
|
padding-right: 15px;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
border-right: solid 1px #ccc;
|
|||
|
|
|
|||
|
|
.vben-tree {
|
|||
|
|
height: auto;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|