| | |
| | | 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); |
| | | console.log('selectedMenuIds: ', selectedMenuIds); |
| | | handleSelectModule(getMenuById(state.currentMenuId)); |
| | | const resourceIds = state.checkedInfo.map((x) => x.resourceId); |
| | | console.log('resourceIds: ', resourceIds); |
| | | emit('onConfirm', selectedMenuIds, resourceIds); |
| | | emit('onConfirm', state.selectedMenuIds); |
| | | } |
| | | </script> |
| | | |