多级分类选择框 #IBPM4Q

src/constants/business.ts

@@ -83,6 +83,14 @@ export const groupConfigStatusRecord: Record<Api.GroupConfig.GroupStatusType, Ap
   0: 'common.status.disable',
   1: 'common.status.enable'
 };
+// 网站类别
+export const groupConfigTypeRecord: Record<number, App.I18n.I18nKey> = {
+  1: 'page.groupConfig.typeDict.government',
+  2: 'page.groupConfig.typeDict.usMilitary',
+  3: 'page.groupConfig.typeDict.usNavy',
+}
+export const groupConfigTypeOptions = transformRecordToNumberOption(groupConfigTypeRecord);
+
 export const groupConfigStatusOptions = transformRecordToNumberOption(groupConfigStatusRecord, true);
 
 export const groupConfigIdModeRecord: Record<Api.GroupConfig.IdGeneratorModeType, App.I18n.I18nKey> = {

src/locales/langs/en-us.ts

@@ -497,6 +497,8 @@ const local: App.I18n.Schema = {
       detail: 'Group Detail',
       namespaceId: 'Namespace ID',
       groupName: 'Group Name',
+      // 网站类别
+      type: 'Type',
       token: 'Token',
       groupStatus: 'Status',
       idGeneratorMode: 'ID Generator Mode',
@@ -510,6 +512,8 @@ const local: App.I18n.Schema = {
       retryConfig: 'RetryConfig',
       form: {
         groupName: 'Please enter group name',
+        // 网站类别
+        type: 'Please select type',
         token: 'Please enter token',
         groupStatus: 'Please select group status',
         description: 'Please enter description',
@@ -521,6 +525,12 @@ const local: App.I18n.Schema = {
         groupNameRule:
           'Group name: Must be between 1 and 64 characters in length. Format: numbers, letters, underscores, or hyphens.'
       },
+      // 网站类别
+      typeDict: {
+        government: 'Government',
+        usMilitary: 'U.S. Military',
+        usNavy: 'U.S. Navy'
+      },
       idMode: {
         idWorker: 'Id Workder',
         segment: 'Segment'

src/locales/langs/zh-cn.ts

@@ -506,6 +506,8 @@ const local: App.I18n.Schema = {
       detail: '组详情',
       namespaceId: '命名空间ID',
       groupName: '网站名称',
+      // 网站类别
+      type: '分类',
       token: 'Token',
       groupStatus: '状态',
       idGeneratorMode: 'ID生成模式',
@@ -519,6 +521,8 @@ const local: App.I18n.Schema = {
       retryConfig: '重试配置',
       form: {
         groupName: '请输入网站名称',
+        // 网站类别
+        type: '分类',
         token: 'Token',
         groupStatus: '状态',
         description: '描述',
@@ -529,6 +533,12 @@ const local: App.I18n.Schema = {
         collapseRetry: '重试配置',
         groupNameRule: '网站名称: 仅支持长度为:1~64位字符.格式为:数字、字母、下划线、短横线。'
       },
+      // 网站类别
+      typeDict: {
+        government: '政府部门',
+        usMilitary: '美国军方',
+        usNavy: '美国海军'
+      },
       idMode: {
         idWorker: '雪花算法',
         segment: '号段模式'

src/typings/api.d.ts

@@ -383,6 +383,8 @@ declare namespace Api {
       groupName: string;
       /** 组描述 */
       description: string;
+      /** 网站类别 */
+      type: number;
       /** token */
       token: string;
       /** 组状态 0、未启用 1、启用 */

src/views/group/index.vue

@@ -6,7 +6,7 @@ import { fetchDeleteGroup, fetchGetGroupConfigList, fetchUpdateGroupStatus } fro
 import { $t } from '@/locales';
 import { useAppStore } from '@/store/modules/app';
 import { useTable, useTableOperate } from '@/hooks/common/table';
-import { groupConfigIdModeRecord, yesOrNoRecord } from '@/constants/business';
+import { groupConfigIdModeRecord, groupConfigTypeRecord, yesOrNoRecord } from '@/constants/business';
 import { tagColor } from '@/utils/common';
 import StatusSwitch from '@/components/common/status-switch.vue';
 import { useAuth } from '@/hooks/business/auth';
@@ -55,15 +55,19 @@ const { columns, columnChecks, data, getData, loading, mobilePagination, searchP
         );
       }
     },
-    // {
-    //   key: 'type',
-    //   title: '分类',
-    //   align: 'center',
-    //   width: 200,
-    //   render: () => {
-    //     return <p>政府部门/美国军方/美国海军</p>;
-    //   }
-    // },
+    {
+      key: 'type',
+      title: $t('page.groupConfig.type'),
+      align: 'center',
+      width: 200,
+      render: row => {
+        if (row.type === null) {
+          return null;
+        }
+        // const label = $t(groupConfigTypeRecord[row.type!]);
+        return <p>政府部门/美国军方/美国海军</p>;
+      }
+    },
     {
       key: 'groupStatus',
       title: $t('page.groupConfig.groupStatus'),

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

@@ -4,7 +4,12 @@ import { useClipboard } from '@vueuse/core';
 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 {
+  groupConfigIdModeOptions,
+  groupConfigStatusOptions,
+  groupConfigTypeOptions,
+  groupConfigYesOrNoOptions
+} from '@/constants/business';
 import { fetchAddGroupConfig, fetchEditGroupConfig, fetchGetPartitionTableList } from '@/service/api/group';
 
 defineOptions({
@@ -43,17 +48,26 @@ const title = computed(() => {
 });
 
 const partitionList = ref<string[]>([]);
-
+// 网站类别
 type Model = Pick<
   Api.GroupConfig.GroupConfig,
-  'id' | 'groupName' | 'token' | 'groupStatus' | 'description' | 'idGeneratorMode' | 'initScene' | 'groupPartition'
+  | 'id'
+  | 'groupName'
+  | 'type'
+  | 'token'
+  | 'groupStatus'
+  | 'description'
+  | 'idGeneratorMode'
+  | 'initScene'
+  | 'groupPartition'
 >;
 
 const model: Model = reactive(createDefaultModel());
-
+// 网站类别
 function createDefaultModel(): Model {
   return {
     groupName: '',
+    type: 1,
     token: import.meta.env.VITE_APP_DEFAULT_TOKEN || '',
     groupStatus: 1,
     description: '',
@@ -62,10 +76,10 @@ function createDefaultModel(): Model {
     groupPartition: 0
   };
 }
-
+// 网站类别
 type RuleKey = Extract<
   keyof Model,
-  'groupName' | 'token' | 'groupStatus' | 'idGeneratorMode' | 'initScene' | 'groupPartition'
+  'groupName' | 'type' | 'token' | 'groupStatus' | 'idGeneratorMode' | 'initScene' | 'groupPartition'
 >;
 
 const rules = {
@@ -77,6 +91,7 @@ const rules = {
       message: $t('page.groupConfig.form.groupNameRule')
     }
   ],
+  type: [defaultRequiredRule],
   token: [defaultRequiredRule],
   groupStatus: [defaultRequiredRule],
   idGeneratorMode: [defaultRequiredRule],
@@ -192,6 +207,14 @@ async function handleCopy(source: string) {
               :disabled="props.operateType === 'edit'"
             />
           </NFormItem>
+          <!-- 网站类别 -->
+          <NFormItem :label="$t('page.groupConfig.type')" path="idGeneratorMode">
+            <NSelect
+              v-model:value="model.type"
+              :placeholder="$t('page.groupConfig.form.type')"
+              :options="translateOptions(groupConfigTypeOptions)"
+            />
+          </NFormItem>
           <NFormItem :label="$t('page.groupConfig.groupStatus')" path="groupStatus">
             <NRadioGroup v-model:value="model.groupStatus" name="groupStatus">
               <NSpace>