From f038b26fb3990236cdaa051b65d0917f8ecbe1cd Mon Sep 17 00:00:00 2001 From: "xinxin.wu" Date: Thu, 25 Jul 2024 19:04:08 +0800 Subject: [PATCH] =?UTF-8?q?refactor(=E7=BC=BA=E9=99=B7=E7=AE=A1=E7=90=86):?= =?UTF-8?q?=20=E9=87=8D=E6=9E=84=E7=BC=BA=E9=99=B7=E7=AE=A1=E7=90=86?= =?UTF-8?q?=E5=AD=97=E6=AE=B5=E5=AF=BC=E5=87=BA=E6=8A=BD=E5=B1=89=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E4=BB=A5=E5=8F=8A=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../pure/ms-export-drawer/index.vue | 237 +++++++++++++++--- frontend/src/views/bug-management/index.vue | 11 +- 2 files changed, 214 insertions(+), 34 deletions(-) diff --git a/frontend/src/components/pure/ms-export-drawer/index.vue b/frontend/src/components/pure/ms-export-drawer/index.vue index b86768bee6..2633bc4783 100644 --- a/frontend/src/components/pure/ms-export-drawer/index.vue +++ b/frontend/src/components/pure/ms-export-drawer/index.vue @@ -6,28 +6,42 @@ :width="800" min-width="800px" unmount-on-close + no-content-padding :show-continue="false" :ok-disabled="!selectedList.length" + :footer="false" @confirm="handleDrawerConfirm" @cancel="handleDrawerCancel" > +
-
{{ - props.titleProps?.selectableTitle || t('system.orgTemplate.optionalField') - }}
- - {{ t('system.orgTemplate.selectAll') }} - +
+ + + {{ props.titleProps?.selectableTitle || t('system.orgTemplate.optionalField') }} + + +
- +
+ + + {{ props.titleProps?.systemTitle || t('ms-export-drawer.systemFiled') }} + + +
+
-
{{ - props.titleProps?.systemTitle || t('ms-export-drawer.systemFiled') - }}
+ +
+ + + {{ t('ms-export-drawer.customFiled') }} + + +
+
-
{{ t('ms-export-drawer.customFiled') }}
-
-
-
{{ t('ms-export-drawer.otherFiled') }}
+ +
+
+ + + {{ t('ms-export-drawer.otherFiled') }} + - + -
+ +
+
+ +
-
{{ - props.titleProps?.selectedTitle || t('system.orgTemplate.selectedField') - }}
+
+ {{ props.titleProps?.selectedTitle || t('system.orgTemplate.selectedField') }} + ({{ selectedList.length }}) +
{{ t('system.orgTemplate.clear') }}
@@ -110,9 +151,26 @@
- +
+
+ +
+
+ + + {{ t('common.cancel') }} + + + {{ t('common.export') }} + + +
+
@@ -135,8 +193,6 @@ const { t } = useI18n(); - const drawerLoading = ref(false); - interface MsExportDrawerProps { visible: boolean; allData: MsExportDrawerMap; @@ -150,16 +206,21 @@ systemTitle: string; // 已选字段| 环境 selectedTitle: string; // 已选字段| 环境 }; + disabledCancelKeys?: string[]; // 禁止取消系统字段 } const props = withDefaults(defineProps(), { visible: false, exportLoading: false, defaultSelectedKeys: () => ['name', 'id', 'title', 'status', 'handle_user', 'content'], + disabledCancelKeys: () => [], }); const selectedList = ref([]); // 已选字段 - const selectedIds = ref([]); // 已选字段id + + const selectedSystemIds = ref([]); // 已选系统字段id + const selectedCustomIds = ref([]); // 已选自定义字段id + const selectedOtherIds = ref([]); // 已选其他字段id const emit = defineEmits<{ (e: 'update:visible', value: boolean): void; @@ -240,6 +301,12 @@ return [...systemList.value, ...customList.value, ...otherList.value]; }); + const selectSystemIds = computed(() => systemList.value.map((e) => e.key)); + + const selectCustomIds = computed(() => customList.value.map((e) => e.key)); + + const selectOtherIds = computed(() => otherList.value.map((e) => e.key)); + const handleReset = () => { selectedList.value = allList.value.filter((item) => props.defaultSelectedKeys.includes(item.key)); }; @@ -261,11 +328,57 @@ return selectedList.value.length > 0 && selectedList.value.length < allList.value.length; }); + // 系统字段全选 + const isCheckedSystemAll = computed( + () => + selectedList.value.length > 0 && selectSystemIds.value.every((id) => selectedList.value.some((e) => e.key === id)) + ); + + // 自定义字段全选 + const isCheckedCustomAll = computed( + () => + selectedList.value.length > 0 && selectCustomIds.value.every((id) => selectedList.value.some((e) => e.key === id)) + ); + + // 其他字段全选 + const isCheckedOtherAll = computed(() => { + return ( + selectedList.value.length > 0 && selectOtherIds.value.every((id) => selectedList.value.some((e) => e.key === id)) + ); + }); + + // 系统字段半选 + const systemIndeterminate = computed( + () => + selectedList.value.length > 0 && + selectedList.value.some((e) => selectSystemIds.value.includes(e.key)) && + !isCheckedSystemAll.value + ); + + // 自定义字段半选 + const customIndeterminate = computed( + () => + selectedList.value.length > 0 && + selectedList.value.some((e) => selectCustomIds.value.includes(e.key)) && + !isCheckedCustomAll.value + ); + + // 其他字段半选 + const otherIndeterminate = computed(() => { + return ( + selectedList.value.length > 0 && + selectedList.value.some((e) => selectOtherIds.value.includes(e.key)) && + !isCheckedOtherAll.value + ); + }); + + // 全选所有可选字段 const handleChangeAll = (value: boolean | (string | number | boolean)[]) => { if (value) { selectedList.value = allList.value; } else { - selectedList.value = []; + // 全选取消时不允许取消 + selectedList.value = selectedList.value.filter((e) => props.disabledCancelKeys.includes(e.key)); } }; @@ -273,12 +386,69 @@ selectedList.value = selectedList.value.filter((item) => item.key !== id); }; - const handleGroupChange = (value: (string | number | boolean)[]) => { - selectedList.value = allList.value.filter((item) => value.includes(item.key)); + const selectedItemIds = computed(() => [ + ...selectedSystemIds.value, + ...selectedCustomIds.value, + ...selectedOtherIds.value, + ]); + + // 更新选择的列表 + function updateSelectedList() { + selectedList.value = allList.value.filter((item) => selectedItemIds.value.includes(item.key)); + } + + // 获取全部对应类型ids + function getIdsByType(type: string) { + switch (type) { + case 'system': + return selectSystemIds.value; + case 'custom': + return selectCustomIds.value; + case 'other': + return selectOtherIds.value; + default: + return []; + } + } + + // 更新选择的字段ID + function updateSelectedIds(type: string, ids: string[]) { + switch (type) { + case 'system': + selectedSystemIds.value = ids; + break; + case 'custom': + selectedCustomIds.value = ids; + break; + case 'other': + selectedOtherIds.value = ids; + break; + default: + break; + } + updateSelectedList(); + } + + // 选择组 + const handleGroupChange = (value: (string | number | boolean)[], type: string) => { + const selectedValue: string[] = value as string[]; + updateSelectedIds(type, selectedValue); }; + // 全选字段类型 + function handleChange(value: boolean, type: string) { + // 如果有禁止取消则取消时候不取消 + const ids = value ? getIdsByType(type) : [...props.disabledCancelKeys]; + updateSelectedIds(type, ids); + } + watchEffect(() => { - selectedIds.value = selectedList.value.map((item) => item.key); + const selectSysIds = selectedList.value.filter((e) => e.columnType === 'system').map((e) => e.key); + const selectCusIds = selectedList.value.filter((e) => e.columnType === 'custom').map((e) => e.key); + const selectOthIds = selectedList.value.filter((e) => e.columnType === 'other').map((e) => e.key); + selectedSystemIds.value = selectSysIds; + selectedCustomIds.value = selectCusIds; + selectedOtherIds.value = selectOthIds; }); watchEffect(() => { @@ -293,7 +463,7 @@ .panel-wrapper { display: flex; width: 100%; - height: 100%; + height: calc(100vh - 112px); flex-flow: row nowrap; .inner-wrapper { display: flex; @@ -324,4 +494,11 @@ margin-top: 10px; margin-right: 20px; } + .footer { + @apply flex items-center justify-between; + + margin: auto -16px -16px; + padding: 12px 16px; + box-shadow: 0 -1px 4px 0 rgb(31 35 41 / 10%); + } diff --git a/frontend/src/views/bug-management/index.vue b/frontend/src/views/bug-management/index.vue index 758f005bfb..19ed1c04d4 100644 --- a/frontend/src/views/bug-management/index.vue +++ b/frontend/src/views/bug-management/index.vue @@ -127,13 +127,16 @@ v-model:visible="exportVisible" :export-loading="exportLoading" :all-data="exportOptionData" + :disabled-cancel-keys="['name']" @confirm="exportConfirm" >