From 59da4f4ebc493c3d3cae3811d063cf961554e35c Mon Sep 17 00:00:00 2001 From: "xinxin.wu" Date: Wed, 10 Jul 2024 21:45:33 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E6=B5=8B=E8=AF=95=E8=AE=A1=E5=88=92):=20?= =?UTF-8?q?=E6=B5=8B=E8=AF=95=E8=AE=A1=E5=88=92=E5=85=B3=E8=81=94=E7=94=A8?= =?UTF-8?q?=E4=BE=8B=E9=80=89=E6=8B=A9=E4=BA=A4=E4=BA=92&=E5=85=B3?= =?UTF-8?q?=E8=81=94=E7=94=A8=E4=BE=8B=E8=81=94=E8=B0=83=5F=E4=B8=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/App.vue | 16 +- .../ms-associate-case/apiCaseTable.vue | 30 ++ .../business/ms-associate-case/apiTable.vue | 32 +- .../business/ms-associate-case/caseTable.vue | 72 +++- .../business/ms-associate-case/caseTree.vue | 127 +++++- .../business/ms-associate-case/index.vue | 385 +++++++++++++++--- .../ms-associate-case/locale/en-US.ts | 10 + .../ms-associate-case/locale/zh-CN.ts | 10 + .../ms-associate-case/scenarioCaseTable.vue | 40 +- .../business/ms-associate-case/totalCount.vue | 21 + .../business/ms-associate-case/types.ts | 13 + .../ms-associate-case/useModuleSelection.ts | 217 ++++++++++ .../testPlanMinder/associateDrawer.vue | 11 +- .../ms-minders/testPlanMinder/index.vue | 36 +- .../src/components/business/ms-tree/index.vue | 11 +- .../components/pure/ms-table/base-table.vue | 10 +- .../components/pure/ms-table/batchAction.vue | 4 +- frontend/src/models/testPlan/testPlan.ts | 11 + 18 files changed, 912 insertions(+), 144 deletions(-) create mode 100644 frontend/src/components/business/ms-associate-case/totalCount.vue create mode 100644 frontend/src/components/business/ms-associate-case/types.ts create mode 100644 frontend/src/components/business/ms-associate-case/useModuleSelection.ts diff --git a/frontend/src/App.vue b/frontend/src/App.vue index 98325424ce..b818a8a3bc 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -1,8 +1,6 @@ @@ -46,8 +44,6 @@ } }); - const loading = ref(false); - // 初始化平台风格和主题色 watchStyle(appStore.pageConfig.style, appStore.pageConfig); watchTheme(appStore.pageConfig.theme, appStore.pageConfig); @@ -94,24 +90,26 @@ state.value = getQueryVariable('state') || ''; if (state.value.split('#')[0] === 'fit2cloud-lark-qr') { try { - loading.value = true; + appStore.showLoading(); const larkCallback = await getLarkCallback(code || ''); userStore.qrCodeLogin(larkCallback); setLoginExpires(); - loading.value = false; } catch (err) { console.log(err); + } finally { + appStore.hideLoading(); } } if (state.value.split('#')[0] === 'fit2cloud-lark-suite-qr') { try { - loading.value = true; + appStore.showLoading(); const larkCallback = await getLarkSuiteCallback(code || ''); userStore.qrCodeLogin(larkCallback); setLoginExpires(); - loading.value = false; } catch (err) { console.log(err); + } finally { + appStore.hideLoading(); } } await userStore.checkIsLogin(); diff --git a/frontend/src/components/business/ms-associate-case/apiCaseTable.vue b/frontend/src/components/business/ms-associate-case/apiCaseTable.vue index 100159b18b..a23cfc2e68 100644 --- a/frontend/src/components/business/ms-associate-case/apiCaseTable.vue +++ b/frontend/src/components/business/ms-associate-case/apiCaseTable.vue @@ -8,6 +8,9 @@ moreAction: [], }" v-on="propsEvent" + @row-select-change="rowSelectChange" + @select-all-change="selectAllChange" + @clear-selector="clearSelector" > @@ -54,6 +60,7 @@ import useTable from '@/components/pure/ms-table/useTable'; import CaseLevel from '@/components/business/ms-case-associate/caseLevel.vue'; import ExecuteResult from '@/components/business/ms-case-associate/executeResult.vue'; + import type { MsTreeNodeData } from '@/components/business/ms-tree/types'; import ExecutionStatus from '@/views/api-test/report/component/reportStatus.vue'; import useOpenNewPage from '@/hooks/useOpenNewPage'; @@ -69,6 +76,8 @@ import { SpecialColumnEnum, TableKeyEnum } from '@/enums/tableEnum'; import { FilterSlotNameEnum } from '@/enums/tableFilterEnum'; + import type { moduleKeysType } from './types'; + import useModuleSelection from './useModuleSelection'; import { getPublicLinkCaseListMap } from './utils/page'; import { casePriorityOptions } from '@/views/api-test/components/config'; @@ -87,6 +96,7 @@ getPageApiType: keyof typeof CasePageApiTypeEnum; // 获取未关联分页Api extraTableParams?: TableQueryParams; // 查询表格的额外参数 protocols: string[]; + moduleTree: MsTreeNodeData[]; }>(); const emit = defineEmits<{ @@ -96,6 +106,10 @@ (e: 'update:selectedIds'): void; }>(); + const innerSelectedModulesMaps = defineModel>('selectedModulesMaps', { + required: true, + }); + const tableStore = useTableStore(); const lastReportStatusListOptions = computed(() => { @@ -332,6 +346,22 @@ }); } + const { rowSelectChange, selectAllChange, clearSelector, setModuleTree } = useModuleSelection( + innerSelectedModulesMaps.value, + propsRes.value, + props.moduleTree + ); + + watch( + () => props.moduleTree, + (val) => { + setModuleTree(val); + }, + { + immediate: true, + } + ); + defineExpose({ getApiCaseSaveParams, loadCaseList, diff --git a/frontend/src/components/business/ms-associate-case/apiTable.vue b/frontend/src/components/business/ms-associate-case/apiTable.vue index 9efd501f2e..c4f63661dc 100644 --- a/frontend/src/components/business/ms-associate-case/apiTable.vue +++ b/frontend/src/components/business/ms-associate-case/apiTable.vue @@ -10,6 +10,9 @@ }" v-on="propsEvent" @filter-change="getModuleCount" + @row-select-change="rowSelectChange" + @select-all-change="selectAllChange" + @clear-selector="clearSelector" > + @@ -36,6 +42,7 @@ import MsBaseTable from '@/components/pure/ms-table/base-table.vue'; import { MsTableColumn } from '@/components/pure/ms-table/type'; import useTable from '@/components/pure/ms-table/useTable'; + import type { MsTreeNodeData } from '@/components/business/ms-tree/types'; import apiMethodName from '@/views/api-test/components/apiMethodName.vue'; import { useI18n } from '@/hooks/useI18n'; @@ -52,6 +59,8 @@ import { SpecialColumnEnum, TableKeyEnum } from '@/enums/tableEnum'; import { FilterRemoteMethodsEnum, FilterSlotNameEnum } from '@/enums/tableFilterEnum'; + import type { moduleKeysType } from './types'; + import useModuleSelection from './useModuleSelection'; import { getPublicLinkCaseListMap } from './utils/page'; const { t } = useI18n(); @@ -71,6 +80,7 @@ getPageApiType: keyof typeof CasePageApiTypeEnum; // 获取未关联分页Api extraTableParams?: TableQueryParams; // 查询表格的额外参数 protocols: string[]; + moduleTree: MsTreeNodeData[]; }>(); const emit = defineEmits<{ @@ -81,6 +91,9 @@ }>(); const tableStore = useTableStore(); + const innerSelectedModulesMaps = defineModel>('selectedModulesMaps', { + required: true, + }); const requestMethodsOptions = computed(() => { return Object.values(RequestMethods).map((e) => { @@ -180,10 +193,10 @@ propsEvent, loadList, setLoadListParams, - resetSelector, setPagination, resetFilterParams, setTableSelected, + resetSelector, } = useTable(getPublicLinkCaseListMap[props.getPageApiType][props.activeSourceType].API, { tableKey: TableKeyEnum.ASSOCIATE_CASE_API, showSetting: true, @@ -239,7 +252,6 @@ setPagination({ current: 1, }); - resetSelector(); resetFilterParams(); loadApiList(); } @@ -299,6 +311,22 @@ }); } + const { rowSelectChange, selectAllChange, clearSelector, setModuleTree } = useModuleSelection( + innerSelectedModulesMaps.value, + propsRes.value, + props.moduleTree + ); + + watch( + () => props.moduleTree, + (val) => { + setModuleTree(val); + }, + { + immediate: true, + } + ); + defineExpose({ getApiSaveParams, loadApiList, diff --git a/frontend/src/components/business/ms-associate-case/caseTable.vue b/frontend/src/components/business/ms-associate-case/caseTable.vue index 1386336772..70730ed7f2 100644 --- a/frontend/src/components/business/ms-associate-case/caseTable.vue +++ b/frontend/src/components/business/ms-associate-case/caseTable.vue @@ -9,6 +9,9 @@ }" v-on="propsEvent" @filter-change="getModuleCount" + @row-select-change="rowSelectChange" + @select-all-change="selectAllChange" + @clear-selector="clearSelector" > @@ -51,6 +57,7 @@ import useTable from '@/components/pure/ms-table/useTable'; import CaseLevel from '@/components/business/ms-case-associate/caseLevel.vue'; import ExecuteResult from '@/components/business/ms-case-associate/executeResult.vue'; + import type { MsTreeNodeData } from '@/components/business/ms-tree/types'; import useOpenNewPage from '@/hooks/useOpenNewPage'; import useTableStore from '@/hooks/useTableStore'; @@ -63,6 +70,8 @@ import { SpecialColumnEnum, TableKeyEnum } from '@/enums/tableEnum'; import { FilterSlotNameEnum } from '@/enums/tableFilterEnum'; + import type { moduleKeysType } from './types'; + import useModuleSelection from './useModuleSelection'; import { getPublicLinkCaseListMap } from './utils/page'; import { casePriorityOptions } from '@/views/api-test/components/config'; import { executionResultMap, statusIconMap } from '@/views/case-management/caseManagementFeature/components/utils'; @@ -77,6 +86,7 @@ associatedIds?: string[]; // 已关联ids activeSourceType: keyof typeof CaseLinkEnum; keyword: string; + moduleTree: MsTreeNodeData[]; getPageApiType: keyof typeof CasePageApiTypeEnum; // 获取未关联分页Api extraTableParams?: TableQueryParams; // 查询表格的额外参数 }>(); @@ -86,12 +96,17 @@ (e: 'refresh'): void; (e: 'initModules'): void; (e: 'update:selectedIds'): void; + (e: 'clearSelect'): void; }>(); const tableStore = useTableStore(); const innerSelectedIds = defineModel('selectedIds', { required: true }); + const innerSelectedModulesMaps = defineModel>('selectedModulesMaps', { + required: true, + }); + const reviewResultOptions = computed(() => { return Object.keys(statusIconMap).map((key) => { return { @@ -218,26 +233,25 @@ return undefined; } - const { propsRes, propsEvent, loadList, setLoadListParams, resetSelector, resetFilterParams, setTableSelected } = - useTable( - getPageList.value, - { - tableKey: TableKeyEnum.ASSOCIATE_CASE, - showSetting: true, - isSimpleSetting: true, - onlyPageSize: true, - selectable: true, - showSelectAll: true, - heightUsed: 310, - showSelectorAll: false, - }, - (record) => { - return { - ...record, - caseLevel: getCaseLevel(record), - }; - } - ); + const { propsRes, propsEvent, loadList, setLoadListParams, resetFilterParams, setTableSelected } = useTable( + getPageList.value, + { + tableKey: TableKeyEnum.ASSOCIATE_CASE, + showSetting: true, + isSimpleSetting: true, + onlyPageSize: true, + selectable: true, + showSelectAll: true, + heightUsed: 310, + showSelectorAll: false, + }, + (record) => { + return { + ...record, + caseLevel: getCaseLevel(record), + }; + } + ); async function getTableParams() { const { excludeKeys } = propsRes.value; @@ -253,6 +267,7 @@ async function getModuleCount() { const tableParams = await getTableParams(); + // 这里的count始终都是全量的 emit('getModuleCount', { ...tableParams, current: propsRes.value.msPagination?.current, @@ -301,6 +316,22 @@ return [...propsRes.value.selectedKeys]; }); + const { rowSelectChange, selectAllChange, clearSelector, setModuleTree } = useModuleSelection( + innerSelectedModulesMaps.value, + propsRes.value, + props.moduleTree + ); + + watch( + () => props.moduleTree, + (val) => { + setModuleTree(val); + }, + { + immediate: true, + } + ); + watch( () => selectIds.value, (val) => { @@ -309,7 +340,6 @@ ); watch([() => props.currentProject, () => props.activeModule], () => { - resetSelector(); resetFilterParams(); loadCaseList(); }); diff --git a/frontend/src/components/business/ms-associate-case/caseTree.vue b/frontend/src/components/business/ms-associate-case/caseTree.vue index 4f900d2f2a..e2a7b5330f 100644 --- a/frontend/src/components/business/ms-associate-case/caseTree.vue +++ b/frontend/src/components/business/ms-associate-case/caseTree.vue @@ -28,10 +28,21 @@ - +
+ {{ + t('ms.case.associate.allData') + }} + + {{ allCount }} + +
+ + @@ -60,6 +87,7 @@ import { ref } from 'vue'; import { useVModel } from '@vueuse/core'; + import MsButton from '@/components/pure/ms-button/index.vue'; import MsTree from '@/components/business/ms-tree/index.vue'; import type { MsTreeNodeData } from '@/components/business/ms-tree/types'; import TreeFolderAll from '@/views/api-test/components/treeFolderAll.vue'; @@ -76,7 +104,7 @@ const { t } = useI18n(); const props = defineProps<{ - modulesCount?: Record; // 模块数量统计对象 + modulesCount: Record; // 模块数量统计对象 selectedKeys: string[]; // 选中的节点 key currentProject: string; getModulesApiType: CaseModulesApiTypeEnum[keyof CaseModulesApiTypeEnum]; @@ -91,9 +119,25 @@ (e: 'init', params: ModuleTreeNode[], selectedProtocols?: string[]): void; (e: 'changeProtocol', selectedProtocols: string[]): void; (e: 'update:selectedKeys', selectedKeys: string[]): void; + (e: 'update:halfCheckedKeys', halfCheckedKeys: string[]): void; + (e: 'check', _checkedKeys: Array, checkedNodes: MsTreeNodeData): void; + (e: 'selectParent', node: MsTreeNodeData, isSelected: boolean): void; + (e: 'checkAllModule', isCheckedAll: boolean): void; }>(); const selectedKeys = useVModel(props, 'selectedKeys', emit); + const checkedKeys = defineModel<(string | number)[]>('checkedKeys', { + required: true, + }); + const halfCheckedKeys = defineModel<(string | number)[]>('halfCheckedKeys', { + required: true, + }); + const isCheckAll = defineModel('isCheckedAll', { + required: true, + }); + const indeterminate = defineModel('indeterminate', { + required: true, + }); const moduleKeyword = ref(''); const activeFolder = ref('all'); const allCount = ref(0); @@ -103,7 +147,7 @@ const virtualListProps = computed(() => { return { - height: 'calc(100vh - 180px)', + height: 'calc(100vh - 236px)', threshold: 200, fixedSize: true, buffer: 15, // 缓冲区默认 10 的时候，虚拟滚动的底部 padding 计算有问题 @@ -129,6 +173,42 @@ } const selectedProtocols = ref([]); + // 递归计算并更新节点的 count + function processTreeData(nodes: MsTreeNodeData[]): MsTreeNodeData[] { + const traverse = (node: MsTreeNodeData): number => { + let totalChildrenCount = 0; + + if (node.children && node.children.length > 0) { + totalChildrenCount = node.children.reduce((sum, child) => { + return sum + traverse(child); + }, 0); + node.count -= totalChildrenCount; + } + + return node.count + totalChildrenCount; + }; + + nodes.forEach((node: MsTreeNodeData) => traverse(node)); + return nodes; + } + + function calculateTreeCount(treeData: MsTreeNodeData[]) { + caseTree.value = mapTree(treeData, (node) => { + return { + ...node, + count: props.modulesCount[node.id], + }; + }); + + const updatedModuleTreeCount = processTreeData(caseTree.value) as MsTreeNodeData[]; + caseTree.value = mapTree(updatedModuleTreeCount, (node) => { + return { + ...node, + count: node.count, + }; + }); + allCount.value = props.modulesCount.all || 0; + } /** * 初始化模块树 */ @@ -143,15 +223,13 @@ }; const res = await getModuleTreeFunc(props.getModulesApiType, props.activeTab, getModuleParams); - caseTree.value = mapTree(res, (node) => { - return { - ...node, - count: props.modulesCount?.[node.id] || 0, - }; - }); + + calculateTreeCount(res); + if (setDefault) { setActiveFolder('all'); } + emit('init', caseTree.value, selectedProtocols.value); } catch (error) { // eslint-disable-next-line no-console @@ -166,22 +244,33 @@ initModules(); } + function checkNode(_checkedKeys: Array, checkedNodes: MsTreeNodeData) { + emit('check', _checkedKeys, checkedNodes); + } + + function selectCurrent(node: MsTreeNodeData, isSelected: boolean) { + emit('selectParent', node, isSelected); + } + /** * 初始化模块文件数量 */ watch( () => props.modulesCount, - (obj) => { - caseTree.value = mapTree(caseTree.value, (node) => { - return { - ...node, - count: obj?.[node.id] || 0, - }; - }); - allCount.value = obj?.all || 0; + () => { + calculateTreeCount(caseTree.value); + }, + { + deep: true, + immediate: true, } ); + function handleChangeAll(value: boolean | (string | number | boolean)[], ev: Event) { + isCheckAll.value = value as boolean; + emit('checkAllModule', isCheckAll.value); + } + watch( () => props.showType, (val) => { diff --git a/frontend/src/components/business/ms-associate-case/index.vue b/frontend/src/components/business/ms-associate-case/index.vue index 7595a0e9c4..03edda0595 100644 --- a/frontend/src/components/business/ms-associate-case/index.vue +++ b/frontend/src/components/business/ms-associate-case/index.vue @@ -113,11 +113,15 @@ -
+
-
+
- -
@@ -186,6 +181,7 @@ v-if="associationType === CaseLinkEnum.FUNCTIONAL" ref="functionalTableRef" v-model:selectedIds="selectedIds" + v-model:selectedModulesMaps="selectedModulesMaps" :association-type="associateType" :get-page-api-type="getPageApiType" :active-module="activeFolder" @@ -195,14 +191,18 @@ :active-source-type="associationType" :extra-table-params="props.extraTableParams" :keyword="keyword" + :module-tree="moduleTree" @get-module-count="initModulesCount" @refresh="loadCaseList" - /> + > + + + > + + + > + + + > + + +
+
+
+
+ +
+ +
{{ t('ms.case.associate.syncFunctionalCase') }}
+ + + +
+
+ + + + -
-
- + + + +
-
- - - {{ t('common.cancel') }} - - - {{ t('ms.case.associate.associate') }} - - -
-
+ +
+
+ + + {{ t('common.cancel') }} + + + {{ t('ms.case.associate.associate') }} + +
@@ -284,13 +347,16 @@ import { MsAdvanceFilter } from '@/components/pure/ms-advance-filter'; import MsDrawer from '@/components/pure/ms-drawer/index.vue'; + import type { MsTreeNodeData } from '@/components/business/ms-tree/types'; import ApiCaseTable from './apiCaseTable.vue'; import ApiTable from './apiTable.vue'; import CaseTable from './caseTable.vue'; import CaseTree from './caseTree.vue'; import ScenarioCaseTable from './scenarioCaseTable.vue'; + import TotalCount from './totalCount.vue'; import { getAssociatedProjectOptions } from '@/api/modules/case-management/featureCase'; + import { getApiCaseModule, getApiScenarioModule } from '@/api/modules/test-plan/testPlan'; import { useI18n } from '@/hooks/useI18n'; import useVisit from '@/hooks/useVisit'; import useAppStore from '@/store/modules/app'; @@ -300,10 +366,10 @@ import { CaseModulesApiTypeEnum, CasePageApiTypeEnum } from '@/enums/associateCaseEnum'; import { CaseLinkEnum } from '@/enums/caseEnum'; + import type { moduleKeysType, saveParams } from './types'; import { initGetModuleCountFunc } from './utils/moduleCount'; const visitedKey = 'changeLinkProject'; - const { addVisited, getIsVisited } = useVisit(visitedKey); const appStore = useAppStore(); @@ -321,6 +387,7 @@ extraModuleCountParams?: TableQueryParams; // 查询模块数量额外参数 okButtonDisabled?: boolean; // 确认按钮是否禁用 confirmLoading?: boolean; + modulesMaps?: Record; associatedIds?: string[]; // 已关联用例id集合用于去重已关联 hideProjectSelect?: boolean; // 是否隐藏项目选择 associatedType: keyof typeof CaseLinkEnum; // 关联类型 @@ -351,11 +418,24 @@ const activeFolder = ref('all'); const selectedIds = ref([]); + const checkedKeys = ref>([]); + const halfCheckedKeys = ref>([]); + + // 数据集合 + const selectedModulesMaps = ref>({}); + + // 计算用例是否选择禁用关联按钮 + const isDisabledSaveButton = computed(() => { + return Object.values(selectedModulesMaps.value).some((module) => module.selectAll || module.selectIds.size > 0); + }); + const selectedKeys = computed({ get: () => [activeFolder.value], set: (val) => val, }); + const syncCase = ref(true); + const folderName = computed(() => { switch (associationType.value) { case CaseLinkEnum.FUNCTIONAL: @@ -399,26 +479,54 @@ const caseTableRef = ref>(); const scenarioTableRef = ref>(); - function makeParams() { - switch (props.associatedType) { - case CaseLinkEnum.FUNCTIONAL: - return functionalTableRef.value?.getFunctionalSaveParams(); - case CaseLinkEnum.API: - return showType.value === 'API' - ? apiTableRef.value?.getApiSaveParams() - : caseTableRef.value?.getApiCaseSaveParams(); - case CaseLinkEnum.SCENARIO: - return scenarioTableRef.value?.getScenarioSaveParams(); - default: - break; - } + function getMapParams() { + const selectedParams: Record = {}; + Object.entries(selectedModulesMaps.value).forEach(([moduleId, selectedProps]) => { + const { selectAll, selectIds, excludeIds, count } = selectedProps; + selectedParams[moduleId] = { + count, + selectAll, + selectIds: [...selectIds], + excludeIds: [...excludeIds], + }; + }); + return selectedParams; } + + const isCheckedAll = ref(false); + const indeterminate = ref(false); + + const totalCount = computed(() => { + if (isCheckedAll.value) { + return modulesCount.value.all; + } + return Object.values(selectedModulesMaps.value).reduce((total, module) => { + return total + (module.selectAll ? module.count : module.selectIds.size); + }, 0); + }); + + const apiCaseCollectionId = ref(''); + const apiScenarioCollectionId = ref(''); + // 保存 function handleConfirm() { - const params = makeParams(); - if (!params?.selectIds.length) { - return; + const params = { + moduleMaps: getMapParams(), + syncCase: syncCase.value, + apiCaseCollectionId: apiCaseCollectionId.value, + apiScenarioCollectionId: apiScenarioCollectionId.value, + selectAllModule: isCheckedAll.value, + projectId: innerProject.value, + associateType: 'FUNCTIONAL', + totalCount: totalCount.value, + }; + + if (params.associateType === CaseLinkEnum.API) { + params.associateType = showType.value; + } else { + params.associateType = props.associatedType; } + emit('save', params); } @@ -445,11 +553,15 @@ console.log(error); } } + const selectedProtocols = ref([]); async function initModulesCount(params: TableQueryParams) { try { modulesCount.value = await initGetModuleCountFunc(props.getModuleCountApiType, associationType.value, { ...params, + moduleIds: [], + filter: {}, + keyword: '', ...props.extraModuleCountParams, protocols: associationType.value === CaseLinkEnum.API ? selectedProtocols.value : undefined, }); @@ -480,20 +592,32 @@ const moduleTree = ref([]); function initModuleTree(tree: ModuleTreeNode[], _protocols?: string[]) { - moduleTree.value = unref(tree); + moduleTree.value = tree; selectedProtocols.value = _protocols || []; if (props.associatedType === CaseLinkEnum.API) { loadCaseList(); } } - const functionalType = ref('project'); - const functionalList = ref([ - { - id: 'project', - name: t('ms.case.associate.project'), - }, - ]); + const apiSetTree = ref(); + const scenarioSetTree = ref(); + + async function initTestSet() { + if (props.extraTableParams?.testPlanId) { + try { + apiSetTree.value = await getApiCaseModule({ + testPlanId: props.extraTableParams.testPlanId, + treeType: 'COLLECTION', + }); + scenarioSetTree.value = await getApiScenarioModule({ + testPlanId: props.extraTableParams.testPlanId, + treeType: 'COLLECTION', + }); + } catch (error) { + console.log(error); + } + } + } function changeProjectHandler(visible: boolean) { if (visible && !getIsVisited()) { @@ -527,6 +651,7 @@ associationType.value = props.associatedType; activeFolder.value = 'all'; initProjectList(); + initTestSet(); } selectPopVisible.value = false; keyword.value = ''; @@ -542,6 +667,142 @@ } } ); + + // 选中当前节点 && 取消当前节点 + function selectParent(nodeData: MsTreeNodeData, isSelected: boolean) { + selectedModulesMaps.value[nodeData.id] = { + selectAll: !isSelected, + selectIds: new Set(), + excludeIds: new Set(), + count: nodeData.count, + }; + } + + // 初始化左侧模块节点选中当前以及子节点 + function processAllCurrentNode(node: MsTreeNodeData, check: boolean) { + if (node.children && node.children.length) { + node.children?.forEach((childrenNode: MsTreeNodeData) => processAllCurrentNode(childrenNode, check)); + } + selectedModulesMaps.value[node.id] = { + selectAll: check, + selectIds: new Set(), + excludeIds: new Set(), + count: node.count, + }; + } + + // 选中当前节点以及子节点 + function checkNode(_checkedKeys: Array, checkedData: MsTreeNodeData) { + const { checked, node } = checkedData; + processAllCurrentNode(node, checked); + } + + watch( + () => selectedModulesMaps.value, + (val) => { + const checkedKeysSet = new Set(checkedKeys.value); + const halfCheckedKeysSet = new Set(halfCheckedKeys.value); + + if (!Object.keys(val).length) { + checkedKeysSet.clear(); + halfCheckedKeysSet.clear(); + isCheckedAll.value = false; + indeterminate.value = false; + } + + Object.entries(val).forEach(([moduleId, selectedProps]) => { + const { selectAll: selectIdsAll, selectIds, count } = selectedProps; + + // 全选和取消全选 + if (selectIdsAll) { + checkedKeysSet.add(moduleId); + } else { + checkedKeysSet.delete(moduleId); + } + + // 半选状态 + if (selectIds.size > 0 && selectIds.size < count) { + halfCheckedKeysSet.add(moduleId); + } else { + halfCheckedKeysSet.delete(moduleId); + } + }); + + // 更新 checkedKeys 和 halfCheckedKeys + checkedKeys.value = Array.from(checkedKeysSet); + halfCheckedKeys.value = Array.from(halfCheckedKeysSet); + + // 更新全选和半选状态 + const isAllCheckedModuleProps = val.all; + + if (isAllCheckedModuleProps) { + const { selectAll, selectIds, count } = isAllCheckedModuleProps; + + isCheckedAll.value = selectAll; + + if (selectIds.size > 0 && selectIds.size < count) { + indeterminate.value = true; + } else { + indeterminate.value = false; + } + } + }, + { deep: true } + ); + + // 全选全部&取消全选 + function setSelectAll(tree: MsTreeNodeData[], checkedAll: boolean) { + tree.forEach((node) => { + processAllCurrentNode(node, checkedAll); + + if (node.children) { + setSelectAll(node.children, checkedAll); + } + }); + } + + function checkAllModule() { + selectedModulesMaps.value.all = { + selectAll: isCheckedAll.value, + selectIds: new Set(), + excludeIds: new Set(), + count: modulesCount.value.all, + }; + setSelectAll(moduleTree.value, isCheckedAll.value); + } + + // 切换项目的时候清空 + function clearSelector() { + Object.keys(selectedModulesMaps.value).forEach((key) => { + delete selectedModulesMaps.value[key]; + }); + } + + watch( + () => innerProject.value, + (val) => { + if (val) { + clearSelector(); + } + } + ); + + watch( + () => props.modulesMaps, + (val) => { + if (val && Object.keys(val).length) { + Object.entries(val).forEach(([moduleId, selectedProps]) => { + const { selectAll, selectIds, excludeIds, count } = selectedProps; + selectedModulesMaps.value[moduleId] = { + selectAll, + count, + selectIds: new Set(selectIds), + excludeIds: new Set(excludeIds), + }; + }); + } + } + ); diff --git a/frontend/src/components/business/ms-associate-case/types.ts b/frontend/src/components/business/ms-associate-case/types.ts new file mode 100644 index 0000000000..0c41fce05d --- /dev/null +++ b/frontend/src/components/business/ms-associate-case/types.ts @@ -0,0 +1,13 @@ +export interface moduleKeysType { + selectAll: boolean; + selectIds: Set; + excludeIds: Set; + count: number; +} + +export interface saveParams { + selectAll: boolean; + selectIds: string[]; + excludeIds: string[]; + count: number; +} diff --git a/frontend/src/components/business/ms-associate-case/useModuleSelection.ts b/frontend/src/components/business/ms-associate-case/useModuleSelection.ts new file mode 100644 index 0000000000..500a6d65f5 --- /dev/null +++ b/frontend/src/components/business/ms-associate-case/useModuleSelection.ts @@ -0,0 +1,217 @@ +import { ref, watch } from 'vue'; + +import type { MsTableProps } from '@/components/pure/ms-table/type'; +import type { MsTreeNodeData } from '@/components/business/ms-tree/types'; + +import { findNodeByKey } from '@/utils'; + +import { SelectAllEnum } from '@/enums/tableEnum'; + +import type { moduleKeysType } from './types'; + +export default function useModuleSelections( + innerSelectedModulesMaps: Record, + propsRes: MsTableProps, + modulesTree: MsTreeNodeData[] +) { + const moduleSelectedMap = ref>({}); + + const moduleTree = ref(modulesTree); + + // 初始化表格数据的选择 + function initTableDataSelected() { + propsRes.selectedKeys = new Set([]); + propsRes.excludeKeys = new Set([]); + const allSelectIds: Set = new Set(); + propsRes.data.forEach((item: any) => { + const selectAllProps = innerSelectedModulesMaps[item.moduleId]; + if ( + selectAllProps && + selectAllProps.selectAll && + !selectAllProps.selectIds.size && + !selectAllProps.excludeIds.size + ) { + (moduleSelectedMap.value[item.moduleId] || []).forEach((id) => allSelectIds.add(id)); + } else if (selectAllProps && !selectAllProps.selectAll && selectAllProps.selectIds.size) { + selectAllProps.selectIds.forEach((id) => allSelectIds.add(id)); + } + }); + + propsRes.selectedKeys = new Set([...allSelectIds]); + } + + // 初始化模块分类 + function initPropsDataSort() { + propsRes.data.forEach((item: any) => { + if (!moduleSelectedMap.value[item.moduleId]) { + moduleSelectedMap.value[item.moduleId] = [item.id]; + } + if (!moduleSelectedMap.value[item.moduleId].includes(item.id)) { + moduleSelectedMap.value[item.moduleId].push(item.id); + } + }); + } + + // 单选或复选时处理全选状态 + function setSelectedAll(moduleId: string) { + innerSelectedModulesMaps[moduleId].selectAll = true; + innerSelectedModulesMaps[moduleId].selectIds = new Set([]); + innerSelectedModulesMaps[moduleId].excludeIds = new Set([]); + const selectedProp = innerSelectedModulesMaps[moduleId]; + if (selectedProp) { + if (selectedProp.selectAll && !selectedProp.selectIds.size && !selectedProp.excludeIds.size) { + moduleSelectedMap.value[moduleId].forEach((key) => { + propsRes.selectedKeys.add(key); + }); + } + } + } + + // 初始化节点，防止选择时报错 + function setUnSelectNode(moduleId: string, key = 'id') { + if (!innerSelectedModulesMaps[moduleId]) { + const node = findNodeByKey(moduleTree.value, moduleId, key); + innerSelectedModulesMaps[moduleId] = { + selectAll: false, + selectIds: new Set(), + excludeIds: new Set(), + count: node?.count || 0, + }; + } + } + + // 设置最新状态 + function setSelectedModuleStatus(moduleId: string) { + const selectedProps = innerSelectedModulesMaps[moduleId]; + if (selectedProps) { + const { selectIds: selectModuleIds, count, excludeIds } = selectedProps; + if (selectModuleIds.size < count) { + innerSelectedModulesMaps[moduleId].selectAll = false; + } + if (selectModuleIds.size === count) { + setSelectedAll(moduleId); + } + if (excludeIds.size === count) { + innerSelectedModulesMaps[moduleId].selectAll = false; + innerSelectedModulesMaps[moduleId].selectIds = new Set([]); + innerSelectedModulesMaps[moduleId].excludeIds = new Set([]); + } + } + } + + // 更新选择数据 + function updateSelectModule(moduleId: string, id: string) { + const selectedProps = innerSelectedModulesMaps[moduleId]; + if (selectedProps) { + const selectedSet = selectedProps.selectIds; + const excludedSet = selectedProps.excludeIds; + const isSelectAllModule = + selectedProps.selectAll && !selectedProps.selectIds.size && !selectedProps.excludeIds.size; + + if (isSelectAllModule && moduleId === 'all') { + Object.entries(moduleSelectedMap.value).forEach(([item, allSelectIds]) => { + allSelectIds.forEach((key) => { + selectedProps.selectIds.add(key); + }); + }); + } else if (isSelectAllModule && moduleId !== 'all') { + moduleSelectedMap.value[moduleId].forEach((key) => { + selectedProps.selectIds.add(key); + }); + } + + if (selectedSet.has(id)) { + selectedProps.excludeIds.add(id); + selectedProps.selectIds.delete(id); + } else if (excludedSet.has(id)) { + selectedProps.excludeIds.delete(id); + selectedProps.selectIds.add(id); + } else if (!selectedSet.has(id) && !excludedSet.has(id)) { + selectedProps.selectIds.add(id); + } + + innerSelectedModulesMaps[moduleId] = selectedProps; + setSelectedModuleStatus(moduleId); + } + } + + function rowSelectChange(record: Record) { + const { moduleId } = record; + setUnSelectNode(moduleId); + updateSelectModule(moduleId, record.id); + updateSelectModule('all', record.id); + } + + function selectAllChange(v: SelectAllEnum) { + const { data } = propsRes; + if (v === 'current') { + propsRes.selectedKeys = new Set([]); + data.forEach((item: any) => { + const { moduleId } = item; + setUnSelectNode(moduleId); + const lastSelectedProps = innerSelectedModulesMaps[moduleId]; + if (!lastSelectedProps.selectAll) { + innerSelectedModulesMaps[moduleId].selectIds.add(item.id); + innerSelectedModulesMaps[moduleId].excludeIds.delete(item.id); + setSelectedModuleStatus(moduleId); + } + updateSelectModule('all', item.id); + }); + } else { + data.forEach((item: any) => { + const { moduleId } = item; + setUnSelectNode(moduleId); + innerSelectedModulesMaps[item.moduleId].selectIds.delete(item.id); + innerSelectedModulesMaps[item.moduleId].excludeIds.add(item.id); + setSelectedModuleStatus(moduleId); + updateSelectModule('all', item.id); + }); + } + } + + function setModuleTree(tree: MsTreeNodeData[]) { + moduleTree.value = tree; + } + + function clearSelector() { + Object.keys(innerSelectedModulesMaps).forEach((key) => { + delete innerSelectedModulesMaps[key]; + }); + } + + watch( + () => propsRes.data, + async () => { + await initPropsDataSort(); + initTableDataSelected(); + }, + { + deep: true, + immediate: true, + } + ); + + watch( + () => innerSelectedModulesMaps, + () => { + initTableDataSelected(); + }, + { + deep: true, + } + ); + + return { + moduleSelectedMap, + rowSelectChange, + selectAllChange, + initTableDataSelected, + initPropsDataSort, + setUnSelectNode, + setSelectedModuleStatus, + setSelectedAll, + updateSelectModule, + clearSelector, + setModuleTree, + }; +} diff --git a/frontend/src/components/business/ms-minders/testPlanMinder/associateDrawer.vue b/frontend/src/components/business/ms-minders/testPlanMinder/associateDrawer.vue index bfcb4750ca..45b51289dc 100644 --- a/frontend/src/components/business/ms-minders/testPlanMinder/associateDrawer.vue +++ b/frontend/src/components/business/ms-minders/testPlanMinder/associateDrawer.vue @@ -12,7 +12,7 @@ :extra-modules-params="{ testPlanId: props?.testPlanId, }" - :associated-ids="props.hasNotAssociatedIds || []" + :modules-maps="props.modulesMaps" :associated-type="associationType" @save="saveHandler" > @@ -24,18 +24,19 @@ import { Message } from '@arco-design/web-vue'; import MsCaseAssociate from '@/components/business/ms-associate-case/index.vue'; + import type { saveParams } from '@/components/business/ms-associate-case/types'; import { useI18n } from '@/hooks/useI18n'; import useAppStore from '@/store/modules/app'; - import type { AssociateCaseRequest, AssociateCaseRequestType } from '@/models/testPlan/testPlan'; + import type { AssociateCaseRequestParams, AssociateCaseRequestType } from '@/models/testPlan/testPlan'; import { CaseCountApiTypeEnum, CaseModulesApiTypeEnum, CasePageApiTypeEnum } from '@/enums/associateCaseEnum'; import { CaseLinkEnum } from '@/enums/caseEnum'; const { t } = useI18n(); const props = defineProps<{ associationType: CaseLinkEnum; - hasNotAssociatedIds?: string[]; + modulesMaps?: Record; saveApi?: (params: AssociateCaseRequestType) => Promise; testPlanId?: string; }>(); @@ -43,7 +44,7 @@ required: true, }); const emit = defineEmits<{ - (e: 'success', val: AssociateCaseRequest): void; + (e: 'success', val: AssociateCaseRequestParams): void; }>(); const appStore = useAppStore(); @@ -53,7 +54,7 @@ const confirmLoading = ref(false); const planId = ref(route.query.id as string); - async function saveHandler(params: AssociateCaseRequest) { + async function saveHandler(params: AssociateCaseRequestParams) { if (typeof props.saveApi !== 'function') { emit('success', { ...params }); } else { diff --git a/frontend/src/components/business/ms-minders/testPlanMinder/index.vue b/frontend/src/components/business/ms-minders/testPlanMinder/index.vue index b4e87a8441..9345a72035 100644 --- a/frontend/src/components/business/ms-minders/testPlanMinder/index.vue +++ b/frontend/src/components/business/ms-minders/testPlanMinder/index.vue @@ -105,10 +105,7 @@ {{ t('caseManagement.caseReview.clearSelectedCases') }} @@ -120,9 +117,7 @@
{{ t('ms.minders.selectedCases', { - count: selectedAssociateCasesParams.selectAll - ? selectedAssociateCasesParams.totalCount - : selectedAssociateCasesParams.selectIds.length, + count: selectedAssociateCasesParams.totalCount, }) }}
@@ -243,8 +238,8 @@ @@ -273,7 +268,7 @@ import { hasAnyPermission } from '@/utils/permission'; import { - AssociateCaseRequest, + AssociateCaseRequestParams, PlanMinderEditListItem, PlanMinderNode, PlanMinderNodeData, @@ -569,7 +564,7 @@ const caseAssociateVisible = ref(false); // 批量关联用例表格参数 - const selectedAssociateCasesParams = ref({ + const selectedAssociateCasesParams = ref({ excludeIds: [], selectIds: [], selectAll: false, @@ -578,26 +573,30 @@ versionId: '', refId: '', projectId: '', + moduleMaps: {}, + syncCase: true, + apiCaseCollectionId: '', + apiScenarioCollectionId: '', + selectAllModule: false, }); - function writeAssociateCases(param: AssociateCaseRequest) { + function writeAssociateCases(param: AssociateCaseRequestParams) { selectedAssociateCasesParams.value = { ...param }; const node: PlanMinderNode = window.minder.getSelectedNode(); let associateType: string = ''; if (node.data.type === PlanMinderCollectionType.SCENARIO) { associateType = PlanMinderAssociateType.SCENARIO_CASE; } else { - associateType = - node.data.type === PlanMinderCollectionType.API && param.associateApiType - ? param.associateApiType - : node.data.type; + associateType = param?.associateType ?? node.data.type; } + node.data.associateDTOS = [ { - ids: param.selectIds, + ...cloneDeep(param), associateType, }, ]; + caseAssociateVisible.value = false; } @@ -611,6 +610,11 @@ versionId: '', refId: '', projectId: '', + moduleMaps: {}, + syncCase: true, + apiCaseCollectionId: '', + apiScenarioCollectionId: '', + selectAllModule: false, }; const node: PlanMinderNode = window.minder.getNodeById(activePlanSet.value?.data.id); if (node?.data) { diff --git a/frontend/src/components/business/ms-tree/index.vue b/frontend/src/components/business/ms-tree/index.vue index a682136866..e7b964c14b 100644 --- a/frontend/src/components/business/ms-tree/index.vue +++ b/frontend/src/components/business/ms-tree/index.vue @@ -6,6 +6,7 @@ ref="treeRef" v-model:selected-keys="selectedKeys" v-model:checked-keys="checkedKeys" + v-model:half-checked-keys="halfCheckedKeys" :data="filterTreeData" class="ms-tree" :allow-drop="handleAllowDrop" @@ -119,6 +120,7 @@ emptyText?: string; // 空数据时的文案 checkable?: boolean; // 是否可选中 checkedStrategy?: 'all' | 'parent' | 'child'; // 选中节点时的策略 + checkStrictly?: boolean; // 是否取消父子节点关联 virtualListProps?: VirtualListProps; // 虚拟滚动列表的属性 disabledTitleTooltip?: boolean; // 是否禁用标题 tooltip actionOnNodeClick?: 'expand'; // 点击节点时的操作 @@ -167,7 +169,7 @@ ): void; (e: 'moreActionSelect', item: ActionsItem, node: MsTreeNodeData): void; (e: 'moreActionsClose'): void; - (e: 'check', val: Array): void; + (e: 'check', val: Array, node: MsTreeNodeData): void; (e: 'expand', node: MsTreeExpandedData): void; }>(); @@ -180,6 +182,9 @@ const checkedKeys = defineModel<(string | number)[]>('checkedKeys', { default: [], }); + const halfCheckedKeys = defineModel<(string | number)[]>('halfCheckedKeys', { + default: [], + }); const focusNodeKey = defineModel('focusNodeKey', { default: '', }); @@ -362,8 +367,8 @@ emit('select', _selectedKeys, selectNode); } - function checked(_checkedKeys: Array) { - emit('check', _checkedKeys); + function checked(_checkedKeys: Array, checkedNodes: MsTreeNodeData) { + emit('check', _checkedKeys, checkedNodes); } const focusEl = ref(); // 存储聚焦的节点元素 diff --git a/frontend/src/components/pure/ms-table/base-table.vue b/frontend/src/components/pure/ms-table/base-table.vue index 5f163f95be..35f922e324 100644 --- a/frontend/src/components/pure/ms-table/base-table.vue +++ b/frontend/src/components/pure/ms-table/base-table.vue @@ -250,7 +250,9 @@ :class="{ 'justify-between': showBatchAction }" > - {{ t('msTable.batch.selected', { count: selectedCount }) }} + + {{ t('msTable.batch.selected', { count: selectedCount }) }} + {{ t('msTable.batch.clear') }} @@ -265,7 +267,11 @@ :size="props.paginationSize" @batch-action="handleBatchAction" @clear="() => emit('clearSelector')" - /> + > + +
-
{{ t('msTable.batch.selected', { count: props.selectRowCount }) }}
+ +
{{ t('msTable.batch.selected', { count: props.selectRowCount }) }}
+