From 32627dee232bf80f92c5df10b97c35c6285544d5 Mon Sep 17 00:00:00 2001
From: dhb52 <dhb52@126.com>
Date: Tue, 23 Apr 2024 23:33:00 +0800
Subject: [PATCH] =?UTF-8?q?feat(sj=5F1.0.0):=20=E7=BB=84=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E7=8A=B6=E6=80=81=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/service/api/{group-config.ts => group.ts} | 12 +++++-
 src/service/api/index.ts                      |  2 +-
 src/typings/api.d.ts                          | 10 +++++
 src/views/group/index.vue                     | 41 ++++++++++++-------
 .../group/modules/group-operate-drawer.vue    | 10 +++--
 5 files changed, 54 insertions(+), 21 deletions(-)
 rename src/service/api/{group-config.ts => group.ts} (82%)

diff --git a/src/service/api/group-config.ts b/src/service/api/group.ts
similarity index 82%
rename from src/service/api/group-config.ts
rename to src/service/api/group.ts
index 11909c5..1186c48 100644
--- a/src/service/api/group-config.ts
+++ b/src/service/api/group.ts
@@ -18,7 +18,7 @@ export function fetchGetAllGroupNameList(params?: Api.GroupConfig.GroupConfigSea
 }
 
 /** add groupConfig */
-export function fetchAddGroupConfig(data: Api.GroupConfig.GroupConfig) {
+export function fetchAddGroupConfig(data: Api.GroupConfig.GroupConfigRequestVO) {
   return request<boolean>({
     url: '/group',
     method: 'post',
@@ -27,7 +27,7 @@ export function fetchAddGroupConfig(data: Api.GroupConfig.GroupConfig) {
 }
 
 /** edit groupConfig */
-export function fetchEditGroupConfig(data: Api.GroupConfig.GroupConfig) {
+export function fetchEditGroupConfig(data: Api.GroupConfig.GroupConfigRequestVO) {
   return request<boolean>({
     url: '/group',
     method: 'put',
@@ -35,6 +35,14 @@ export function fetchEditGroupConfig(data: Api.GroupConfig.GroupConfig) {
   });
 }
 
+export function fetchUpdateGroupStatus(data: Api.GroupConfig.GroupConfigRequestVO) {
+  return request<boolean>({
+    url: '/group/status',
+    method: 'put',
+    data
+  });
+}
+
 /** get partition table list */
 export function fetchGetPartitionTableList() {
   return request<number[]>({
diff --git a/src/service/api/index.ts b/src/service/api/index.ts
index c5cec72..a28e4c9 100644
--- a/src/service/api/index.ts
+++ b/src/service/api/index.ts
@@ -5,7 +5,7 @@ export * from './dashboard';
 export * from './namespace';
 export * from './system-manage';
 export * from './notify';
-export * from './group-config';
+export * from './group';
 export * from './retry-task';
 export * from './retry';
 export * from './workflow';
diff --git a/src/typings/api.d.ts b/src/typings/api.d.ts
index 8cc380c..917f3f7 100644
--- a/src/typings/api.d.ts
+++ b/src/typings/api.d.ts
@@ -350,6 +350,16 @@ declare namespace Api {
       Pick<Api.GroupConfig.GroupConfig, 'groupName'> & CommonSearchParams
     >;
 
+    type GroupConfigRequestVO = {
+      groupName: string;
+      groupStatus: GroupStatusType;
+      token?: string;
+      description?: string;
+      groupPartition?: number;
+      idGeneratorMode?: IdGeneratorModeType;
+      initScene?: YesOrNoType;
+    };
+
     /** groupConfig list */
     type GroupConfigList = Common.PaginatingQueryRecord<GroupConfig>;
   }
diff --git a/src/views/group/index.vue b/src/views/group/index.vue
index d0440f9..91184da 100644
--- a/src/views/group/index.vue
+++ b/src/views/group/index.vue
@@ -1,15 +1,19 @@
 <script setup lang="tsx">
-import { NButton, NTag } from 'naive-ui';
-import { fetchGetGroupConfigList } from '@/service/api';
+import { NButton, NSwitch, NTag } from 'naive-ui';
+import { ref } from 'vue';
+import { fetchGetGroupConfigList, fetchUpdateGroupStatus } from '@/service/api';
 import { $t } from '@/locales';
 import { useAppStore } from '@/store/modules/app';
 import { useTable, useTableOperate } from '@/hooks/common/table';
-import { groupConfigIdModeRecord, groupConfigStatusRecord, yesOrNoRecord } from '@/constants/business';
+import { groupConfigIdModeRecord, yesOrNoRecord } from '@/constants/business';
 import GroupOperateDrawer from './modules/group-operate-drawer.vue';
 import GroupSearch from './modules/group-search.vue';
 
 const appStore = useAppStore();
 
+/** 组状态 Switch 的 loading 状态 */
+const statusSwithLoading = ref(false);
+
 const { columns, columnChecks, data, getData, loading, mobilePagination, searchParams, resetSearchParams } = useTable({
   apiFn: fetchGetGroupConfigList,
   apiParams: {
@@ -42,18 +46,15 @@ const { columns, columnChecks, data, getData, loading, mobilePagination, searchP
       align: 'center',
       width: 80,
       render: row => {
-        if (row.groupStatus === null) {
-          return null;
-        }
-
-        const tagMap: Record<Api.GroupConfig.GroupStatusType, NaiveUI.ThemeColor> = {
-          1: 'success',
-          0: 'warning'
-        };
-
-        const label = $t(groupConfigStatusRecord[row.groupStatus!]);
-
-        return <NTag type={tagMap[row.groupStatus!]}>{label}</NTag>;
+        return (
+          <NSwitch
+            v-model:value={row.groupStatus}
+            v-model:loading={statusSwithLoading.value}
+            checkedValue={1}
+            uncheckedValue={0}
+            onUpdateValue={() => handleUpdateValue(row)}
+          ></NSwitch>
+        );
       }
     },
     {
@@ -144,6 +145,16 @@ 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-operate-drawer.vue b/src/views/group/modules/group-operate-drawer.vue
index a1ca05c..37c21ac 100644
--- a/src/views/group/modules/group-operate-drawer.vue
+++ b/src/views/group/modules/group-operate-drawer.vue
@@ -4,7 +4,7 @@ import { useFormRules, useNaiveForm } from '@/hooks/common/form';
 import { $t } from '@/locales';
 import { translateOptions, translateOptions2 } from '@/utils/common';
 import { groupConfigIdModeOptions, groupConfigStatusOptions, groupConfigYesOrNoOptions } from '@/constants/business';
-import { fetchAddGroupConfig, fetchEditGroupConfig, fetchGetPartitionTableList } from '@/service/api/group-config';
+import { fetchAddGroupConfig, fetchEditGroupConfig, fetchGetPartitionTableList } from '@/service/api/group';
 
 defineOptions({
   name: 'GroupOperateDrawer'
@@ -107,9 +107,8 @@ async function handleSubmit() {
     if (error) return;
     window.$message?.success($t('common.addSuccess'));
   } else {
-    const { id, groupName, token, groupStatus, description, idGeneratorMode, initScene, groupPartition } = model;
+    const { groupName, token, groupStatus, description, idGeneratorMode, initScene, groupPartition } = model;
     const { error } = await fetchEditGroupConfig({
-      id,
       groupName,
       token,
       groupStatus,
@@ -162,6 +161,8 @@ watch(visible, () => {
       <NFormItem :label="$t('page.groupConfig.groupName')" path="groupName">
         <NInput
           v-model:value="model.groupName"
+          :maxlength="64"
+          show-count
           :placeholder="$t('page.groupConfig.form.groupName')"
           :disabled="props.operateType === 'edit'"
         />
@@ -182,6 +183,7 @@ watch(visible, () => {
         <NInputGroup>
           <NInput
             v-model:value="model.token"
+            :maxlength="64"
             :placeholder="$t('page.groupConfig.form.token')"
             :disabled="props.operateType === 'edit'"
           />
@@ -194,6 +196,8 @@ watch(visible, () => {
         <NInput
           v-model:value="model.description"
           type="textarea"
+          :maxlength="256"
+          show-count
           :placeholder="$t('page.groupConfig.form.description')"
           clearable
           round