feat(sj_1.0.0): 组管理状态更新

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[]>({

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';

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>;
   }

src/views/group/index.vue

@@ -1,15 +1,19 @@
 <script setup lang="tsx">
-import { NButton, NTag } from 'naive-ui';
+import { NButton, NSwitch, NTag } from 'naive-ui';
-import { fetchGetGroupConfigList } from '@/service/api';
+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 (
-          return null;
+          <NSwitch
-        }
+            v-model:value={row.groupStatus}
-
+            v-model:loading={statusSwithLoading.value}
-        const tagMap: Record<Api.GroupConfig.GroupStatusType, NaiveUI.ThemeColor> = {
+            checkedValue={1}
-          1: 'success',
+            uncheckedValue={0}
-          0: 'warning'
+            onUpdateValue={() => handleUpdateValue(row)}
-        };
+          ></NSwitch>
-
+        );
-        const label = $t(groupConfigStatusRecord[row.groupStatus!]);
-
-        return <NTag type={tagMap[row.groupStatus!]}>{label}</NTag>;
       }
     },
     {
@@ -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>

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