From 00ed54976190eb51ca4ac52c8467c96867de0bf5 Mon Sep 17 00:00:00 2001
From: opensnail <598092184@qq.com>
Date: Mon, 29 Apr 2024 09:06:51 +0800
Subject: [PATCH] =?UTF-8?q?feat(sj=5F1.0.0):=20=E4=BC=98=E5=8C=96=E7=BB=84?=
 =?UTF-8?q?=E5=85=B3=E9=97=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/common.ts                           |  5 ++-
 src/views/group/index.vue                     | 35 +++++++------------
 .../group/modules/group-detail-drawer.vue     |  6 ++--
 3 files changed, 18 insertions(+), 28 deletions(-)

diff --git a/src/utils/common.ts b/src/utils/common.ts
index d07a649..6bf70c3 100644
--- a/src/utils/common.ts
+++ b/src/utils/common.ts
@@ -68,9 +68,8 @@ export function translateOptions2(options: string[]) {
  * tag Color
  *
  * @param index
- * @param total
  */
-export function tagColor(index: number, total: number = 5) {
+export function tagColor(index: number) {
   const tagMap: Record<number, NaiveUI.ThemeColor> = {
     0: 'error',
     1: 'info',
@@ -79,5 +78,5 @@ export function tagColor(index: number, total: number = 5) {
     4: 'default'
   };
 
-  return tagMap[index % total];
+  return tagMap[index % 5];
 }
diff --git a/src/views/group/index.vue b/src/views/group/index.vue
index 3fa7faa..240c7aa 100644
--- a/src/views/group/index.vue
+++ b/src/views/group/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="tsx">
-import { NButton, NSwitch, NTag } from 'naive-ui';
+import { NButton, NTag } from 'naive-ui';
 import { ref } from 'vue';
 import { fetchGetGroupConfigList, fetchUpdateGroupStatus } from '@/service/api';
 import { $t } from '@/locales';
@@ -7,6 +7,7 @@ import { useAppStore } from '@/store/modules/app';
 import { useTable, useTableOperate } from '@/hooks/common/table';
 import { groupConfigIdModeRecord, yesOrNoRecord } from '@/constants/business';
 import { tagColor } from '@/utils/common';
+import StatusSwitch from '@/components/common/status-switch.vue';
 import GroupOperateDrawer from './modules/group-operate-drawer.vue';
 import GroupDetailDrawer from './modules/group-detail-drawer.vue';
 import GroupSearch from './modules/group-search.vue';
@@ -14,7 +15,6 @@ import GroupSearch from './modules/group-search.vue';
 const appStore = useAppStore();
 
 /** 组状态 Switch 的 loading 状态 */
-const statusSwithLoading = ref(false);
 const detailData = ref();
 const detailVisible = defineModel<boolean>('detailVisible', {
   default: false
@@ -58,15 +58,16 @@ const { columns, columnChecks, data, getData, loading, mobilePagination, searchP
       align: 'center',
       width: 80,
       render: row => {
-        return (
-          <NSwitch
-            v-model:value={row.groupStatus}
-            v-model:loading={statusSwithLoading.value}
-            checkedValue={1}
-            uncheckedValue={0}
-            onUpdateValue={() => handleUpdateValue(row)}
-          ></NSwitch>
-        );
+        const fetchFn = async (groupStatus: Api.Common.EnableStatusNumber, callback: () => void) => {
+          const { error } = await fetchUpdateGroupStatus({ groupName: row.groupName, groupStatus: row.groupStatus });
+          if (!error) {
+            row.groupStatus = groupStatus;
+            window.$message?.success($t('common.updateSuccess'));
+          }
+          callback();
+        };
+
+        return <StatusSwitch v-model:value={row.groupStatus} onFetch={fetchFn} />;
       }
     },
     {
@@ -108,7 +109,7 @@ const { columns, columnChecks, data, getData, loading, mobilePagination, searchP
 
         const label = $t(yesOrNoRecord[row.initScene!]);
 
-        return <NTag type={tagColor(row.initScene!, 2)}>{label}</NTag>;
+        return <NTag type={tagColor(row.initScene!)}>{label}</NTag>;
       }
     },
     {
@@ -152,16 +153,6 @@ const {
 function edit(id: string) {
   handleEdit(id);
 }
-
-async function handleUpdateValue(group: Api.GroupConfig.GroupConfig) {
-  statusSwithLoading.value = true;
-  try {
-    await fetchUpdateGroupStatus({ groupName: group.groupName, groupStatus: group.groupStatus });
-  } finally {
-    await getData();
-    statusSwithLoading.value = false;
-  }
-}
 </script>
 
 <template>
diff --git a/src/views/group/modules/group-detail-drawer.vue b/src/views/group/modules/group-detail-drawer.vue
index 8dc8d4a..77fba68 100644
--- a/src/views/group/modules/group-detail-drawer.vue
+++ b/src/views/group/modules/group-detail-drawer.vue
@@ -35,7 +35,7 @@ watch(
     </NDescriptions>
     <NDescriptions label-placement="top" bordered :column="6">
       <NDescriptionsItem :label="$t('page.groupConfig.groupStatus')">
-        <NTag :type="tagColor(rowData?.groupStatus!, 2)">{{ $t(groupConfigStatusRecord[rowData?.groupStatus!]) }}</NTag>
+        <NTag :type="tagColor(rowData?.groupStatus!)">{{ $t(groupConfigStatusRecord[rowData?.groupStatus!]) }}</NTag>
       </NDescriptionsItem>
     </NDescriptions>
     <NDescriptions label-placement="top" bordered :column="6">
@@ -43,7 +43,7 @@ watch(
     </NDescriptions>
     <NDescriptions label-placement="top" bordered :column="6">
       <NDescriptionsItem :label="$t('page.groupConfig.idGeneratorMode')">
-        <NTag :type="tagColor(rowData?.idGeneratorMode!, 2)">
+        <NTag :type="tagColor(rowData?.idGeneratorMode!)">
           {{ $t(groupConfigIdModeRecord[rowData?.idGeneratorMode!]) }}
         </NTag>
       </NDescriptionsItem>
@@ -55,7 +55,7 @@ watch(
     </NDescriptions>
     <NDescriptions label-placement="top" bordered :column="6">
       <NDescriptionsItem :label="$t('page.groupConfig.initScene')">
-        <NTag :type="tagColor(rowData?.initScene!, 2)">{{ $t(yesOrNoRecord[rowData?.initScene!]) }}</NTag>
+        <NTag :type="tagColor(rowData?.initScene!)">{{ $t(yesOrNoRecord[rowData?.initScene!]) }}</NTag>
       </NDescriptionsItem>
     </NDescriptions>
     <NDescriptions label-placement="top" bordered :column="6">