feat(sj_1.0.0): 完成[组管理]CRUD

src/locales/langs/en-us.ts

@@ -353,6 +353,7 @@ const local: App.I18n.Schema = {
       title: 'Group Config List',
       namespaceId: 'Namespace ID',
       groupName: 'Name',
+      token: 'Token',
       groupStatus: 'Status',
       idGeneratorMode: 'ID Generator Mode',
       version: 'Version',
@@ -362,8 +363,13 @@ const local: App.I18n.Schema = {
       updateDt: 'Update Time',
       description: 'Description',
       form: {
-        namespaceId: 'Please enter namespace ID',
+        groupName: 'Please enter group name',
-        groupName: 'Please enter group name'
+        token: 'Please enter Token',
+        groupStatus: 'Group status',
+        description: 'Please enter description',
+        idGeneratorMode: 'Please select ID generator mode',
+        groupPartition: 'Please select Group partition',
+        initScene: 'Initialized scene'
       },
       idMode: {
         idWorker: 'Id Workder',

src/locales/langs/zh-cn.ts

@@ -349,6 +349,7 @@ const local: App.I18n.Schema = {
       title: '组管理',
       namespaceId: '命名空间ID',
       groupName: '组名称',
+      token: 'Token',
       groupStatus: '状态',
       idGeneratorMode: 'ID生成模式',
       version: '版本',
@@ -358,8 +359,13 @@ const local: App.I18n.Schema = {
       updateDt: '更新时间',
       description: '描述',
       form: {
-        namespaceId: '请选择命名空间ID',
+        groupName: '请输入组名称',
-        groupName: '请输入组名称'
+        token: 'Token',
+        groupStatus: '状态',
+        description: '描述',
+        idGeneratorMode: 'ID生成模式',
+        groupPartition: '分区',
+        initScene: '初始化场景'
       },
       idMode: {
         idWorker: '雪花算法',

src/service/api/group-config.ts

@@ -26,7 +26,7 @@ export function fetchAddGroupConfig(data: Api.GroupConfig.GroupConfig) {
   });
 }
 
-/** edit namespace */
+/** edit groupConfig */
 export function fetchEditGroupConfig(data: Api.GroupConfig.GroupConfig) {
   return request<boolean>({
     url: '/group',
@@ -34,3 +34,11 @@ export function fetchEditGroupConfig(data: Api.GroupConfig.GroupConfig) {
     data
   });
 }
+
+/** get partition table list */
+export function fetchGetPartitionTableList() {
+  return request<number[]>({
+    url: '/group/partition-table/list',
+    method: 'get'
+  });
+}

src/typings/api.d.ts

@@ -315,12 +315,16 @@ declare namespace Api {
   namespace GroupConfig {
     type CommonSearchParams = Pick<Common.PaginatingCommonParams, 'page' | 'size'>;
 
-    type IdGeneratorModeType = '1' | '2';
+    type IdGeneratorModeType = 1 | 2;
+
+    type GroupStatusType = 0 | 1;
+
+    type YesOrNoType = 0 | 1;
 
     /** groupConfig */
     type GroupConfig = Common.CommonRecord<{
       /** 命名空间id */
-      namespaceId: string;
+      namespaceId?: string;
       /** 组名 */
       groupName: string;
       /** 组描述 */
@@ -328,17 +332,17 @@ declare namespace Api {
       /** token */
       token: string;
       /** 组状态 0、未启用 1、启用 */
-      groupStatus: Api.Common.EnableStatus;
+      groupStatus: GroupStatusType;
       /** 版本号 */
-      version: number;
+      version?: number;
       /** 分区 */
       groupPartition: number;
       /** 唯一id生成模式 默认号段模式 */
       idGeneratorMode: IdGeneratorModeType;
       /** 是否初始化场景 0:否 1:是 */
-      initScene: Api.Common.YesOrNo;
+      initScene: YesOrNoType;
       /** bucket */
-      bucketIndex: number;
+      bucketIndex?: number;
     }>;
 
     /** groupConfig search params */

src/typings/app.d.ts

@@ -524,7 +524,7 @@ declare namespace App {
           namespaceId: string;
           groupName: string;
           description: string;
-          // token: string;
+          token: string;
           groupStatus: string;
           version: string;
           groupPartition: string;
@@ -533,8 +533,14 @@ declare namespace App {
           bucketIndex: string;
           updateDt: string;
           form: {
-            namespaceId: string;
             groupName: string;
+            token: string;
+            groupStatus: string;
+            description: string;
+            groupPartition: string;
+            idGeneratorMode: string;
+            initScene: string;
+            // bucketIndex: string;
           };
           idMode: {
             idWorker: string;

src/views/group-config/index.vue

@@ -4,7 +4,7 @@ import { fetchGetGroupConfigList } from '@/service/api';
 import { $t } from '@/locales';
 import { useAppStore } from '@/store/modules/app';
 import { useTable, useTableOperate } from '@/hooks/common/table';
-import { enableStatusRecord, idGeneratorModeRecord, yesOrNoRecord } from '@/constants/business';
+import { groupConfigIdModeRecord, groupConfigStatusRecord, yesOrNoRecord } from '@/constants/business';
 import GroupConfigOperateDrawer from './modules/groupConfig-operate-drawer.vue';
 import GroupConfigSearch from './modules/groupConfig-search.vue';
 
@@ -46,12 +46,12 @@ const { columns, columnChecks, data, getData, loading, mobilePagination, searchP
           return null;
         }
 
-        const tagMap: Record<Api.Common.EnableStatus, NaiveUI.ThemeColor> = {
+        const tagMap: Record<Api.GroupConfig.GroupStatusType, NaiveUI.ThemeColor> = {
           1: 'success',
-          2: 'warning'
+          0: 'warning'
         };
 
-        const label = $t(enableStatusRecord[row.groupStatus!]);
+        const label = $t(groupConfigStatusRecord[row.groupStatus!]);
 
         return <NTag type={tagMap[row.groupStatus!]}>{label}</NTag>;
       }
@@ -66,7 +66,7 @@ const { columns, columnChecks, data, getData, loading, mobilePagination, searchP
           return null;
         }
 
-        const label = $t(idGeneratorModeRecord[row.idGeneratorMode!]);
+        const label = $t(groupConfigIdModeRecord[row.idGeneratorMode!]);
 
         return <NTag type="primary">{label}</NTag>;
       }

src/views/group-config/modules/groupConfig-operate-drawer.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
-import { computed, reactive, watch } from 'vue';
+import { computed, onMounted, reactive, ref, watch } from 'vue';
 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';
 
 defineOptions({
   name: 'GroupConfigOperateDrawer'
@@ -37,20 +40,39 @@ const title = computed(() => {
   return titles[props.operateType];
 });
 
-type Model = Pick<Api.GroupConfig.GroupConfig, 'namespaceId'>;
+const partitionList = ref<string[]>([]);
+
+type Model = Pick<
+  Api.GroupConfig.GroupConfig,
+  'id' | 'groupName' | 'token' | 'groupStatus' | 'description' | 'idGeneratorMode' | 'initScene' | 'groupPartition'
+>;
 
 const model: Model = reactive(createDefaultModel());
 
 function createDefaultModel(): Model {
   return {
-    namespaceId: ''
+    groupName: '',
+    token: generateToken(32),
+    groupStatus: 1,
+    description: '',
+    idGeneratorMode: 1,
+    initScene: 1,
+    groupPartition: 0
   };
 }
 
-type RuleKey = Extract<keyof Model, 'namespaceId'>;
+type RuleKey = Extract<
+  keyof Model,
+  'groupName' | 'token' | 'groupStatus' | 'idGeneratorMode' | 'initScene' | 'groupPartition'
+>;
 
 const rules: Record<RuleKey, App.Global.FormRule> = {
-  namespaceId: defaultRequiredRule
+  groupName: defaultRequiredRule,
+  token: defaultRequiredRule,
+  groupStatus: defaultRequiredRule,
+  idGeneratorMode: defaultRequiredRule,
+  initScene: defaultRequiredRule,
+  groupPartition: defaultRequiredRule
 };
 
 function handleUpdateModelWhenEdit() {
@@ -71,24 +93,141 @@ function closeDrawer() {
 async function handleSubmit() {
   await validate();
   // request
-  window.$message?.success($t('common.updateSuccess'));
+  if (props.operateType === 'add') {
+    const { groupName, token, groupStatus, description, idGeneratorMode, initScene, groupPartition } = model;
+    const { error } = await fetchAddGroupConfig({
+      groupName,
+      token,
+      groupStatus,
+      description,
+      idGeneratorMode,
+      initScene,
+      groupPartition
+    });
+    if (error) return;
+    window.$message?.success($t('common.addSuccess'));
+  } else {
+    const { id, groupName, token, groupStatus, description, idGeneratorMode, initScene, groupPartition } = model;
+    const { error } = await fetchEditGroupConfig({
+      id,
+      groupName,
+      token,
+      groupStatus,
+      description,
+      idGeneratorMode,
+      initScene,
+      groupPartition
+    });
+    if (error) return;
+    window.$message?.success($t('common.updateSuccess'));
+  }
+
   closeDrawer();
   emit('submitted');
 }
 
+/** 设置 token */
+function setToken() {
+  model.token = generateToken(32);
+}
+
+/** 生成 token */
+function generateToken(length: number) {
+  const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
+  let token = 'SJ_';
+  for (let i = 0; i < length; i += 1) {
+    const randomNumber = Math.floor(Math.random() * chars.length);
+    token += chars.substring(randomNumber, randomNumber + 1);
+  }
+  return token;
+}
+
+const getAllPartitions = async () => {
+  const { data } = await fetchGetPartitionTableList();
+  partitionList.value = data!.map(p => String(p));
+};
+
 watch(visible, () => {
   if (visible.value) {
     handleUpdateModelWhenEdit();
     restoreValidation();
   }
 });
+
+onMounted(async () => {
+  await getAllPartitions();
+});
 </script>
 
 <template>
   <OperateDrawer v-model="visible" :title="title" @submitted="handleSubmit">
     <NForm ref="formRef" :model="model" :rules="rules">
-      <NFormItem :label="$t('page.groupConfig.namespaceId')" path="namespaceId">
+      <NFormItem :label="$t('page.groupConfig.groupName')" path="groupName">
-        <NInput v-model:value="model.namespaceId" :placeholder="$t('page.groupConfig.form.namespaceId')" />
+        <NInput
+          v-model:value="model.groupName"
+          :placeholder="$t('page.groupConfig.form.groupName')"
+          :disabled="props.operateType === 'edit'"
+        />
+      </NFormItem>
+      <NFormItem :label="$t('page.groupConfig.groupStatus')" path="groupStatus">
+        <NRadioGroup v-model:value="model.groupStatus" name="groupStatus">
+          <NSpace>
+            <NRadio
+              v-for="item in groupConfigStatusOptions"
+              :key="item.value"
+              :value="item.value"
+              :label="$t(item.label)"
+            />
+          </NSpace>
+        </NRadioGroup>
+      </NFormItem>
+      <NFormItem :label="$t('page.groupConfig.token')" path="token">
+        <NInputGroup>
+          <NInput
+            v-model:value="model.token"
+            :placeholder="$t('page.groupConfig.form.token')"
+            :disabled="props.operateType === 'edit'"
+          />
+          <NButton type="primary" ghost :disabled="props.operateType === 'edit'" @click="setToken">
+            <icon-ic-round-refresh class="text-icon" />
+          </NButton>
+        </NInputGroup>
+      </NFormItem>
+      <NFormItem :label="$t('page.groupConfig.description')" path="description">
+        <NInput
+          v-model:value="model.description"
+          type="textarea"
+          :placeholder="$t('page.groupConfig.form.description')"
+          clearable
+          round
+        />
+      </NFormItem>
+      <NFormItem :label="$t('page.groupConfig.idGeneratorMode')" path="idGeneratorMode">
+        <NSelect
+          v-model:value="model.idGeneratorMode"
+          :placeholder="$t('page.groupConfig.form.idGeneratorMode')"
+          :options="translateOptions(groupConfigIdModeOptions)"
+        />
+      </NFormItem>
+      <NFormItem :label="$t('page.groupConfig.initScene')" path="initScene">
+        <NRadioGroup v-model:value="model.initScene" name="initScene">
+          <NSpace>
+            <NRadio
+              v-for="item in groupConfigYesOrNoOptions"
+              :key="item.value"
+              :value="item.value"
+              :label="$t(item.label)"
+            />
+          </NSpace>
+        </NRadioGroup>
+      </NFormItem>
+
+      <NFormItem :label="$t('page.groupConfig.groupPartition')" path="groupPartition">
+        <NSelect
+          v-model:value="model.groupPartition"
+          :placeholder="$t('page.groupConfig.form.groupPartition')"
+          :options="translateOptions2(partitionList)"
+        />
       </NFormItem>
     </NForm>
     <template #footer>