|  |  |  | 
|---|
|  |  |  | default-expand-all | 
|---|
|  |  |  | show-checkbox | 
|---|
|  |  |  | ref="moduleTree" | 
|---|
|  |  |  | :default-checked-keys="checkedModules" | 
|---|
|  |  |  | :default-checked-keys="defaultCheckedKeys" | 
|---|
|  |  |  | @check="handleModuleCheck" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <template #default="{ node }"> | 
|---|
|  |  |  | <div class="custom-tree-node"> | 
|---|
|  |  |  | 
|---|
|  |  |  | default-expand-all | 
|---|
|  |  |  | show-checkbox | 
|---|
|  |  |  | ref="pageButtonTree" | 
|---|
|  |  |  | :default-checked-keys="checkedPageButton" | 
|---|
|  |  |  | :default-checked-keys="defaultCheckedKeys" | 
|---|
|  |  |  | @check="handlePageButtonCheck" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <template #default="{ node }"> | 
|---|
|  |  |  | <div class="custom-tree-node"> | 
|---|
|  |  |  | 
|---|
|  |  |  | default-expand-all | 
|---|
|  |  |  | show-checkbox | 
|---|
|  |  |  | ref="dataButtonTree" | 
|---|
|  |  |  | :default-checked-keys="checkedDataButton" | 
|---|
|  |  |  | :default-checked-keys="defaultCheckedKeys" | 
|---|
|  |  |  | @check="handleDataButtonCheck" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <template #default="{ node }"> | 
|---|
|  |  |  | <div class="custom-tree-node"> | 
|---|
|  |  |  | 
|---|
|  |  |  | default-expand-all | 
|---|
|  |  |  | show-checkbox | 
|---|
|  |  |  | ref="dataColumnTree" | 
|---|
|  |  |  | :default-checked-keys="checkedDataColumn" | 
|---|
|  |  |  | :default-checked-keys="defaultCheckedKeys" | 
|---|
|  |  |  | @check="handleDataColumnCheck" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <template #default="{ node }"> | 
|---|
|  |  |  | <div class="custom-tree-node"> | 
|---|
|  |  |  | 
|---|
|  |  |  | <script setup lang="ts"> | 
|---|
|  |  |  | import { Message } from '@bole-core/core'; | 
|---|
|  |  |  | import { AuthorizeType, SubModuleType, SubModuleTitle, EnumMenuType } from '@/constants'; | 
|---|
|  |  |  | import { getTree } from '@/utils'; | 
|---|
|  |  |  | import { getTree, treeEach } from '@/utils'; | 
|---|
|  |  |  | import { TreeInstance } from 'element-plus'; | 
|---|
|  |  |  | import { ProDialog } from '@bole-core/components'; | 
|---|
|  |  |  | import { useMenus, useMenu } from '@/hooks'; | 
|---|
|  |  |  | import data from '@iconify-icons/ep/tickets'; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const TypeTip = defineComponent({ | 
|---|
|  |  |  | name: 'TypeTip', | 
|---|
|  |  |  | 
|---|
|  |  |  | const form = defineModel<Form>('form'); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const emit = defineEmits<{ | 
|---|
|  |  |  | (e: 'onConfirm', selectedMenuIds: string[], resourceIds: string[]): void; | 
|---|
|  |  |  | (e: 'onConfirm', selectedMenuIds: string[]): void; | 
|---|
|  |  |  | (e: 'onCancel'): void; | 
|---|
|  |  |  | }>(); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const state = reactive({ | 
|---|
|  |  |  | currentMenuId: '', | 
|---|
|  |  |  | checkedInfo: [] as CheckedResourceItem[], | 
|---|
|  |  |  | selectedMenuIds: [] as string[], | 
|---|
|  |  |  | }); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const defaultCheckedKeys = computed(() => Array.from(state.selectedMenuIds)); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | watch(visible, (newVal) => { | 
|---|
|  |  |  | if (newVal) { | 
|---|
|  |  |  | state.currentMenuId = ''; | 
|---|
|  |  |  | state.checkedInfo = []; | 
|---|
|  |  |  | const menuIds = form.value.detail?.menuIds ?? []; | 
|---|
|  |  |  | // menuIds.forEach((id) => state.selectedMenuIds.add(id)); | 
|---|
|  |  |  | state.selectedMenuIds = [...menuIds]; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 
|---|
|  |  |  | const pageButtonTree = useTemplateRef<TreeInstance>('pageButtonTree'); | 
|---|
|  |  |  | const dataButtonTree = useTemplateRef<TreeInstance>('dataButtonTree'); | 
|---|
|  |  |  | const dataColumnTree = useTemplateRef<TreeInstance>('dataColumnTree'); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | type TreeRef = ReturnType<typeof useTemplateRef<TreeInstance>>; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const { menusTree, getMenuById } = useMenus({ | 
|---|
|  |  |  | params: computed(() => ({ | 
|---|
|  |  |  | 
|---|
|  |  |  | enabled: computed(() => !!state.currentMenuId), | 
|---|
|  |  |  | }); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const checkedModules = computed(() => { | 
|---|
|  |  |  | if (form.value.detail) { | 
|---|
|  |  |  | return form.value.detail.menuIds; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | return []; | 
|---|
|  |  |  | }); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const checkedPageButton = computed(() => initChecked(SubModuleType.PageButton)); | 
|---|
|  |  |  | const checkedDataButton = computed(() => initChecked(SubModuleType.DataButton)); | 
|---|
|  |  |  | const checkedDataColumn = computed(() => initChecked(SubModuleType.Column)); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | function initChecked(type: SubModuleType) { | 
|---|
|  |  |  | return state.checkedInfo.filter((x) => x.resourceType === type).map((x) => x.resourceId); | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | function handleSelectModule(menu: API.GetMenusQueryResultItem) { | 
|---|
|  |  |  | const modules1 = | 
|---|
|  |  |  | dataButtonTree && | 
|---|
|  |  |  | dataButtonTree.value.getCheckedKeys(true).map((x) => { | 
|---|
|  |  |  | return { | 
|---|
|  |  |  | resourceType: SubModuleType.DataButton, | 
|---|
|  |  |  | resourceId: x, | 
|---|
|  |  |  | menuId: menu.id, | 
|---|
|  |  |  | } as CheckedResourceItem; | 
|---|
|  |  |  | }); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const modules2 = | 
|---|
|  |  |  | pageButtonTree && | 
|---|
|  |  |  | pageButtonTree.value.getCheckedKeys(true).map((x) => { | 
|---|
|  |  |  | return { | 
|---|
|  |  |  | resourceType: SubModuleType.PageButton, | 
|---|
|  |  |  | resourceId: x, | 
|---|
|  |  |  | menuId: menu.id, | 
|---|
|  |  |  | } as CheckedResourceItem; | 
|---|
|  |  |  | }); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const modules3 = | 
|---|
|  |  |  | dataColumnTree && | 
|---|
|  |  |  | dataColumnTree.value.getCheckedKeys(true).map((x) => { | 
|---|
|  |  |  | return { | 
|---|
|  |  |  | resourceType: SubModuleType.Column, | 
|---|
|  |  |  | resourceId: x, | 
|---|
|  |  |  | menuId: menu.id, | 
|---|
|  |  |  | } as CheckedResourceItem; | 
|---|
|  |  |  | }); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const checkExtends = state.checkedInfo.filter( | 
|---|
|  |  |  | (x) => x.menuId !== menu.id && x.menuId !== undefined | 
|---|
|  |  |  | ); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | if (modules1 && modules1.length) { | 
|---|
|  |  |  | checkExtends.push(...modules1); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | if (modules2 && modules2.length) { | 
|---|
|  |  |  | checkExtends.push(...modules2); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | if (modules3 && modules3.length) { | 
|---|
|  |  |  | checkExtends.push(...modules3); | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | state.checkedInfo = checkExtends; | 
|---|
|  |  |  | state.currentMenuId = menu.id; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | function handleModuleCheck(data, params) { | 
|---|
|  |  |  | handleCheck(data, params, moduleTree); | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | function handlePageButtonCheck(data, params) { | 
|---|
|  |  |  | handleCheck(data, params, pageButtonTree); | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | function handleDataButtonCheck(data, params) { | 
|---|
|  |  |  | handleCheck(data, params, dataButtonTree); | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | function handleDataColumnCheck(data, params) { | 
|---|
|  |  |  | handleCheck(data, params, dataColumnTree); | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | function handleCheck(data, params, treeRef: TreeRef) { | 
|---|
|  |  |  | const dataMap = {}; | 
|---|
|  |  |  | treeEach( | 
|---|
|  |  |  | [treeRef.value.store.root], | 
|---|
|  |  |  | (node) => (dataMap[node.key] = node), | 
|---|
|  |  |  | (node) => node.childNodes | 
|---|
|  |  |  | ); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const uncachedCheckedKeys = params.checkedKeys.filter( | 
|---|
|  |  |  | (item) => !['pageButtonAll', 'dataButtonAll', 'dataColumnAll'].includes(item) | 
|---|
|  |  |  | ); | 
|---|
|  |  |  | const cachedKeys = state.selectedMenuIds.filter( | 
|---|
|  |  |  | (item) => !(item in dataMap) && !uncachedCheckedKeys.includes(item) | 
|---|
|  |  |  | ); | 
|---|
|  |  |  | state.selectedMenuIds = cachedKeys.concat(uncachedCheckedKeys); | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | function handleConfirm() { | 
|---|
|  |  |  | const selectedMenuIds = moduleTree.value.getCheckedNodes(false, true).map((x) => x.id); | 
|---|
|  |  |  | if (state.currentMenuId) { | 
|---|
|  |  |  | handleSelectModule(getMenuById(state.currentMenuId)); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | const resourceIds = state.checkedInfo.map((x) => x.resourceId); | 
|---|
|  |  |  | emit('onConfirm', selectedMenuIds, resourceIds); | 
|---|
|  |  |  | emit('onConfirm', state.selectedMenuIds); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | </script> | 
|---|
|  |  |  |  | 
|---|