From edb54ca4f0e551f1dd3da4cb8aa9b107144f0fc4 Mon Sep 17 00:00:00 2001 From: "xinxin.wu" Date: Fri, 12 Jul 2024 18:09:59 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E6=B5=8B=E8=AF=95=E8=AE=A1=E5=88=92):=20?= =?UTF-8?q?=E5=85=B3=E8=81=94=E7=94=A8=E4=BE=8B=E6=8A=BD=E5=B1=89=E6=A8=A1?= =?UTF-8?q?=E5=9D=97=E9=80=89=E6=8B=A9=E6=96=B9=E6=B3=95=E6=8A=BD=E7=A6=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../business/ms-associate-case/caseTree.vue | 21 +- .../business/ms-associate-case/index.vue | 225 +++++------------- .../ms-associate-case/useTreeSelection.ts | 213 +++++++++++++++++ 3 files changed, 272 insertions(+), 187 deletions(-) create mode 100644 frontend/src/components/business/ms-associate-case/useTreeSelection.ts diff --git a/frontend/src/components/business/ms-associate-case/caseTree.vue b/frontend/src/components/business/ms-associate-case/caseTree.vue index f1a88362bd..af0d6e76f5 100644 --- a/frontend/src/components/business/ms-associate-case/caseTree.vue +++ b/frontend/src/components/business/ms-associate-case/caseTree.vue @@ -28,20 +28,12 @@ -
- {{ - t('ms.case.associate.allData') - }} - - {{ allCount }} - -
+ ('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); @@ -266,11 +252,6 @@ } ); - 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 974f0b45ec..087a949e49 100644 --- a/frontend/src/components/business/ms-associate-case/index.vue +++ b/frontend/src/components/business/ms-associate-case/index.vue @@ -120,8 +120,6 @@ v-model:checkedKeys="checkedKeys" v-model:selected-keys="selectedKeys" v-model:halfCheckedKeys="halfCheckedKeys" - v-model:isCheckedAll="isCheckedAll" - v-model:indeterminate="indeterminate" :modules-count="modulesCount" :get-modules-api-type="props.getModulesApiType" :current-project="innerProject" @@ -134,8 +132,16 @@ @change-protocol="handleProtocolChange" @select-parent="selectParent" @check="checkNode" - @check-all-module="checkAllModule" - /> + > +
+ {{ + t('ms.case.associate.allData') + }} + + {{ modulesCount.all }} + +
+
([]); - const checkedKeys = ref>([]); - const halfCheckedKeys = ref>([]); + const moduleTree = ref([]); - // 数据集合 - const selectedModulesMaps = ref>({}); + const selectedModuleProps = ref({ + modulesTree: moduleTree.value, + moduleCount: modulesCount.value, + }); + + const { + selectedModulesMaps, + checkedKeys, + halfCheckedKeys, + isCheckedAll, + indeterminate, + selectParent, + checkNode, + checkAllModule, + totalCount, + clearSelector, + } = useTreeSelection(selectedModuleProps.value); + + watch( + () => moduleTree.value, + (val) => { + if (val) { + selectedModuleProps.value.modulesTree = val; + } + }, + { + immediate: true, + } + ); + + watch( + () => modulesCount.value, + (val) => { + selectedModuleProps.value.moduleCount = val; + }, + { + immediate: true, + } + ); // 计算用例是否选择禁用关联按钮 const isDisabledSaveButton = computed(() => { @@ -499,39 +541,9 @@ return selectedParams; } - const isCheckedAll = ref(false); - const indeterminate = ref(false); - - // TODO 需优化、手动触发计算、或者每次增量更新 - const totalCount = computed(() => { - return Object.keys(selectedModulesMaps.value).reduce((total, key) => { - const module = selectedModulesMaps.value[key]; - if (key !== 'all') { - // 未全选存在排除则要 count总-排除掉的 = 已选 - if (module.excludeIds.size && !module.selectAll) { - total += module.count - module.excludeIds.size; - // 已全选未排除则要+count - } else if (module.selectAll && !module.excludeIds.size) { - total += module.count; - // 未全选则 + 选择的id集合 - } else if (!module.selectAll && module.selectIds.size) { - total += module.selectIds.size; - } - } - return total; - }, 0); - }); - const apiCaseCollectionId = ref(''); const apiScenarioCollectionId = ref(''); - // 切换项目的时候清空 - function clearSelector() { - Object.keys(selectedModulesMaps.value).forEach((key) => { - delete selectedModulesMaps.value[key]; - }); - } - // 保存 function handleConfirm() { const params = { @@ -615,7 +627,6 @@ } } - const moduleTree = ref([]); function initModuleTree(tree: ModuleTreeNode[], _protocols?: string[]) { moduleTree.value = tree; selectedProtocols.value = _protocols || []; @@ -689,132 +700,6 @@ } ); - // 选中当前节点 && 取消当前节点 - 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, excludeIds } = selectedProps; - if (selectedProps) { - // 全选和取消全选 - if (selectIdsAll) { - checkedKeysSet.add(moduleId); - } else { - checkedKeysSet.delete(moduleId); - } - - // 半选状态 - if (excludeIds.size || (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) { - if (totalCount.value === isAllCheckedModuleProps.count) { - isCheckedAll.value = true; - } else { - isCheckedAll.value = false; - } - - if (totalCount.value === 0) { - indeterminate.value = false; - } else if (totalCount.value < isAllCheckedModuleProps.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); - - const lastProps = selectedModulesMaps.value.all; - if (lastProps.selectAll) { - selectedModulesMaps.value.all.selectAll = true; - selectedModulesMaps.value.all.selectIds = new Set([]); - selectedModulesMaps.value.all.excludeIds = new Set([]); - } else { - selectedModulesMaps.value.all.selectAll = false; - selectedModulesMaps.value.all.selectIds = new Set([]); - selectedModulesMaps.value.all.excludeIds = new Set([]); - } - } - - watch([() => innerProject.value, () => showType.value, () => props.associatedType], (val) => { - if (val) { - clearSelector(); - } - }); - watch( () => props.modulesMaps, (val) => { @@ -831,6 +716,12 @@ } } ); + + watch([() => innerProject.value, () => showType.value, () => props.associatedType], (val) => { + if (val) { + clearSelector(); + } + });