feat(sj_1.0.0): 组管理列表

src/constants/business.ts

@@ -1,5 +1,10 @@
 import { transformRecordToOption } from '@/utils/common';
 
+export const yesOrNoRecord: Record<Api.Common.YesOrNo, App.I18n.I18nKey> = {
+  '0': 'common.yesOrNo.no',
+  '1': 'common.yesOrNo.yes'
+};
+
 export const enableStatusRecord: Record<Api.Common.EnableStatus, App.I18n.I18nKey> = {
   '1': 'page.manage.common.status.enable',
   '2': 'page.manage.common.status.disable'
@@ -32,3 +37,8 @@ export const podsType: Record<Api.Dashboard.DashboardPodsType, App.I18n.I18nKey>
   1: 'page.pods.type.client',
   2: 'page.pods.type.server'
 };
+
+export const idGeneratorModeRecord: Record<Api.GroupConfig.IdGeneratorModeType, App.I18n.I18nKey> = {
+  '1': 'page.groupConfig.idMode.segment',
+  '2': 'page.groupConfig.idMode.idWorker'
+};

src/locales/langs/en-us.ts

@@ -175,7 +175,8 @@ const local: App.I18n.Schema = {
     exception: 'Exception',
     exception_403: '403',
     exception_404: '404',
-    exception_500: '500'
+    exception_500: '500',
+    'group-config': 'Group Config'
   },
   page: {
     common: {
@@ -339,8 +340,31 @@ const local: App.I18n.Schema = {
         keyword: 'Please enter name/uniqueId',
         uniqueId: 'Please enter Unique ID'
       },
-      addNamespace: 'Add Namespaces',
+      addNamespace: 'Add Namespace',
-      editNamespace: 'Edit Namespaces'
+      editNamespace: 'Edit Namespace'
+    },
+    groupConfig: {
+      title: 'Group Config List',
+      namespaceId: 'Namespace ID',
+      groupName: 'Name',
+      groupStatus: 'Status',
+      idGeneratorMode: 'ID Generator Mode',
+      version: 'Version',
+      groupPartition: 'Parition',
+      initScene: 'Initial Scene',
+      bucketIndex: 'Bucket',
+      updateDt: 'Update Time',
+      description: 'Description',
+      form: {
+        namespaceId: 'Please enter namespace ID',
+        groupName: 'Please enter group name'
+      },
+      idMode: {
+        idWorker: 'Id Workder',
+        segment: 'Segment'
+      },
+      addGroupConfig: 'Add Group Config',
+      editGroupConfig: 'Edit Group Config'
     },
     function: {
       tab: {

src/locales/langs/zh-cn.ts

@@ -158,6 +158,7 @@ const local: App.I18n.Schema = {
     'function_super-page': '超级管理员可见',
     pods: '在线机器',
     namepase: '命名空间',
+    'group-config': '组管理',
     manage: '系统管理',
     manage_user: '用户管理',
     notify: '告警通知',
@@ -338,6 +339,29 @@ const local: App.I18n.Schema = {
       addNamespace: '新增命名空间',
       editNamespace: '编辑命名空间'
     },
+    groupConfig: {
+      title: '组管理',
+      namespaceId: '命名空间ID',
+      groupName: '组名称',
+      groupStatus: '状态',
+      idGeneratorMode: 'ID生成模式',
+      version: '版本',
+      groupPartition: '分区',
+      initScene: '初始化场景',
+      bucketIndex: 'Bucket',
+      updateDt: '更新时间',
+      description: '描述',
+      form: {
+        namespaceId: '请选择命名空间ID',
+        groupName: '请输入组名称'
+      },
+      idMode: {
+        idWorker: '雪花算法',
+        segment: '号段模式'
+      },
+      addGroupConfig: '新增组管理',
+      editGroupConfig: '编辑组管理'
+    },
     function: {
       tab: {
         tabOperate: {

src/router/elegant/imports.ts

@@ -28,6 +28,7 @@ export const views: Record<LastLevelRouteKey, RouteComponent | (() => Promise<Ro
   "function_super-page": () => import("@/views/function/super-page/index.vue"),
   function_tab: () => import("@/views/function/tab/index.vue"),
   "function_toggle-auth": () => import("@/views/function/toggle-auth/index.vue"),
+  "group-config": () => import("@/views/group-config/index.vue"),
   home: () => import("@/views/home/index.vue"),
   manage_menu: () => import("@/views/manage/menu/index.vue"),
   manage_role: () => import("@/views/manage/role/index.vue"),

src/router/elegant/routes.ts

@@ -170,6 +170,15 @@ export const generatedRoutes: GeneratedRoute[] = [
       }
     ]
   },
+  {
+    name: 'group-config',
+    path: '/group-config',
+    component: 'layout.base$view.group-config',
+    meta: {
+      title: 'group-config',
+      i18nKey: 'route.group-config'
+    }
+  },
   {
     name: 'home',
     path: '/home',

src/router/elegant/transform.ts

@@ -161,6 +161,7 @@ const routeMap: RouteMap = {
   "function_super-page": "/function/super-page",
   "function_tab": "/function/tab",
   "function_toggle-auth": "/function/toggle-auth",
+  "group-config": "/group-config",
   "home": "/home",
   "login": "/login/:module(pwd-login)?",
   "manage": "/manage",

src/service/api/group-config.ts

@@ -0,0 +1,28 @@
+import { request } from '../request';
+
+/** get groupConfig list */
+export function fetchGetGroupConfigList(params?: Api.GroupConfig.GroupConfigSearchParams) {
+  return request<Api.GroupConfig.GroupConfigList>({
+    url: '/group/list',
+    method: 'get',
+    params
+  });
+}
+
+/** add groupConfig */
+export function fetchAddGroupConfig(data: Api.GroupConfig.GroupConfig) {
+  return request<boolean>({
+    url: '/group',
+    method: 'post',
+    data
+  });
+}
+
+/** edit namespace */
+export function fetchEditGroupConfig(data: Api.GroupConfig.GroupConfig) {
+  return request<boolean>({
+    url: '/group',
+    method: 'put',
+    data
+  });
+}

src/service/api/index.ts

@@ -5,3 +5,4 @@ export * from './dashboard';
 export * from './namespace';
 export * from './system-manage';
 export * from './notify';
+export * from './group-config';

src/typings/api.d.ts

@@ -38,6 +38,14 @@ declare namespace Api {
      */
     type EnableStatus = '1' | '2';
 
+    /**
+     * yes/no status
+     *
+     * - "0": no
+     * - "1": yes
+     */
+    type YesOrNo = '0' | '1';
+
     /** common record */
     type CommonRecord<T = any> = {
       /** record id */
@@ -271,6 +279,44 @@ declare namespace Api {
     type NamespaceList = Common.PaginatingQueryRecord<Namespace>;
   }
 
+  namespace GroupConfig {
+    type CommonSearchParams = Pick<Common.PaginatingCommonParams, 'page' | 'size'>;
+
+    type IdGeneratorModeType = '1' | '2';
+
+    /** groupConfig */
+    type GroupConfig = Common.CommonRecord<{
+      /** 命名空间id */
+      namespaceId: string;
+      /** 组名 */
+      groupName: string;
+      /** 组描述 */
+      description: string;
+      /** token */
+      token: string;
+      /** 组状态 0、未启用 1、启用 */
+      groupStatus: Api.Common.EnableStatus;
+      /** 版本号 */
+      version: number;
+      /** 分区 */
+      groupPartition: number;
+      /** 唯一id生成模式 默认号段模式 */
+      idGeneratorMode: IdGeneratorModeType;
+      /** 是否初始化场景 0:否 1:是 */
+      initScene: Api.Common.YesOrNo;
+      /** bucket */
+      bucketIndex: number;
+    }>;
+
+    /** groupConfig search params */
+    type GroupConfigSearchParams = CommonType.RecordNullable<
+      Pick<Api.GroupConfig.GroupConfig, 'groupName'> & CommonSearchParams
+    >;
+
+    /** groupConfig list */
+    type GroupConfigList = Common.PaginatingQueryRecord<GroupConfig>;
+  }
+
   /**
    * namespace SystemManage
    *

src/typings/app.d.ts

@@ -513,6 +513,30 @@ declare namespace App {
           addNamespace: string;
           editNamespace: string;
         };
+        groupConfig: {
+          title: string;
+          namespaceId: string;
+          groupName: string;
+          description: string;
+          // token: string;
+          groupStatus: string;
+          version: string;
+          groupPartition: string;
+          idGeneratorMode: string;
+          initScene: string;
+          bucketIndex: string;
+          updateDt: string;
+          form: {
+            namespaceId: string;
+            groupName: string;
+          };
+          idMode: {
+            idWorker: string;
+            segment: string;
+          };
+          addGroupConfig: string;
+          editGroupConfig: string;
+        };
         function: {
           tab: {
             tabOperate: {

src/typings/elegant-router.d.ts

@@ -35,6 +35,7 @@ declare module "@elegant-router/types" {
     "function_super-page": "/function/super-page";
     "function_tab": "/function/tab";
     "function_toggle-auth": "/function/toggle-auth";
+    "group-config": "/group-config";
     "home": "/home";
     "login": "/login/:module(pwd-login)?";
     "manage": "/manage";
@@ -94,6 +95,7 @@ declare module "@elegant-router/types" {
     | "500"
     | "about"
     | "function"
+    | "group-config"
     | "home"
     | "login"
     | "manage"
@@ -132,6 +134,7 @@ declare module "@elegant-router/types" {
     | "function_super-page"
     | "function_tab"
     | "function_toggle-auth"
+    | "group-config"
     | "home"
     | "manage_menu"
     | "manage_role"

src/views/group-config/index.vue

@@ -0,0 +1,190 @@
+<script setup lang="tsx">
+import { NButton, NTag } from 'naive-ui';
+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 GroupConfigOperateDrawer from './modules/groupConfig-operate-drawer.vue';
+import GroupConfigSearch from './modules/groupConfig-search.vue';
+
+const appStore = useAppStore();
+
+const { columns, columnChecks, data, getData, loading, mobilePagination, searchParams, resetSearchParams } = useTable({
+  apiFn: fetchGetGroupConfigList,
+  apiParams: {
+    page: 1,
+    size: 10,
+    groupName: undefined
+  },
+  columns: () => [
+    {
+      key: 'index',
+      title: $t('common.index'),
+      align: 'center',
+      width: 64
+    },
+    {
+      key: 'groupName',
+      title: $t('page.groupConfig.groupName'),
+      align: 'left',
+      minWidth: 260
+    },
+    {
+      key: 'namespaceId',
+      title: $t('page.groupConfig.namespaceId'),
+      align: 'left',
+      minWidth: 260
+    },
+    {
+      key: 'groupStatus',
+      title: $t('page.groupConfig.groupStatus'),
+      align: 'center',
+      width: 80,
+      render: row => {
+        if (row.groupStatus === null) {
+          return null;
+        }
+
+        const tagMap: Record<Api.Common.EnableStatus, NaiveUI.ThemeColor> = {
+          1: 'success',
+          2: 'warning'
+        };
+
+        const label = $t(enableStatusRecord[row.groupStatus!]);
+
+        return <NTag type={tagMap[row.groupStatus!]}>{label}</NTag>;
+      }
+    },
+    {
+      key: 'idGeneratorMode',
+      title: $t('page.groupConfig.idGeneratorMode'),
+      align: 'center',
+      width: 120,
+      render: row => {
+        if (row.idGeneratorMode === null) {
+          return null;
+        }
+
+        const label = $t(idGeneratorModeRecord[row.idGeneratorMode!]);
+
+        return <NTag type="primary">{label}</NTag>;
+      }
+    },
+    {
+      key: 'version',
+      title: $t('page.groupConfig.version'),
+      align: 'left',
+      minWidth: 60
+    },
+    {
+      key: 'groupPartition',
+      title: $t('page.groupConfig.groupPartition'),
+      align: 'left',
+      minWidth: 60
+    },
+    {
+      key: 'initScene',
+      title: $t('page.groupConfig.initScene'),
+      align: 'left',
+      minWidth: 80,
+      render: row => {
+        if (row.groupStatus === null) {
+          return null;
+        }
+
+        const tagMap: Record<Api.Common.YesOrNo, NaiveUI.ThemeColor> = {
+          '1': 'success',
+          '0': 'warning'
+        };
+
+        const label = $t(yesOrNoRecord[row.initScene!]);
+
+        return <NTag type={tagMap[row.initScene!]}>{label}</NTag>;
+      }
+    },
+    {
+      key: 'updateDt',
+      title: $t('page.groupConfig.updateDt'),
+      align: 'left',
+      width: 130
+    },
+    {
+      key: 'description',
+      title: $t('page.groupConfig.description'),
+      align: 'left',
+      width: 130
+    },
+    {
+      key: 'operate',
+      title: $t('common.operate'),
+      align: 'center',
+      width: 130,
+      render: row => (
+        <div class="flex-center gap-8px">
+          <NButton type="primary" ghost size="small" onClick={() => edit(row.id!)}>
+            {$t('common.edit')}
+          </NButton>
+        </div>
+      )
+    }
+  ]
+});
+
+const {
+  drawerVisible,
+  operateType,
+  editingData,
+  handleAdd,
+  handleEdit,
+  checkedRowKeys
+  // closeDrawer
+} = useTableOperate(data, getData);
+
+function edit(id: string) {
+  handleEdit(id);
+}
+</script>
+
+<template>
+  <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
+    <GroupConfigSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getData" />
+    <NCard :title="$t('page.groupConfig.title')" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
+      <template #header-extra>
+        <TableHeaderOperation
+          v-model:columns="columnChecks"
+          :disabled-delete="checkedRowKeys.length === 0"
+          :loading="loading"
+          :show-delete="false"
+          @add="handleAdd"
+          @refresh="getData"
+        />
+      </template>
+      <NDataTable
+        v-model:checked-row-keys="checkedRowKeys"
+        :columns="columns"
+        :data="data"
+        size="small"
+        :flex-height="!appStore.isMobile"
+        :scroll-x="962"
+        :loading="loading"
+        remote
+        :row-key="row => row.id"
+        :pagination="mobilePagination"
+        class="sm:h-full"
+      />
+      <GroupConfigOperateDrawer
+        v-model:visible="drawerVisible"
+        :operate-type="operateType"
+        :row-data="editingData"
+        @submitted="getData"
+      />
+    </NCard>
+  </div>
+</template>
+
+<style scoped>
+:deep(.n-card-header) {
+  --n-title-font-weight: 600 !important;
+}
+</style>

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

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { computed, reactive, watch } from 'vue';
+import { useFormRules, useNaiveForm } from '@/hooks/common/form';
+import { $t } from '@/locales';
+
+defineOptions({
+  name: 'GroupConfigOperateDrawer'
+});
+
+interface Props {
+  /** the type of operation */
+  operateType: NaiveUI.TableOperateType;
+  /** the edit row data */
+  rowData?: Api.GroupConfig.GroupConfig | null;
+}
+
+const props = defineProps<Props>();
+
+interface Emits {
+  (e: 'submitted'): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const visible = defineModel<boolean>('visible', {
+  default: false
+});
+
+const { formRef, validate, restoreValidation } = useNaiveForm();
+const { defaultRequiredRule } = useFormRules();
+
+const title = computed(() => {
+  const titles: Record<NaiveUI.TableOperateType, string> = {
+    add: $t('page.groupConfig.addGroupConfig'),
+    edit: $t('page.groupConfig.editGroupConfig')
+  };
+  return titles[props.operateType];
+});
+
+type Model = Pick<Api.GroupConfig.GroupConfig, 'namespaceId'>;
+
+const model: Model = reactive(createDefaultModel());
+
+function createDefaultModel(): Model {
+  return {
+    namespaceId: ''
+  };
+}
+
+type RuleKey = Extract<keyof Model, 'namespaceId' | 'groupName'>;
+
+const rules: Record<RuleKey, App.Global.FormRule> = {
+  namespaceId: defaultRequiredRule
+};
+
+function handleUpdateModelWhenEdit() {
+  if (props.operateType === 'add') {
+    Object.assign(model, createDefaultModel());
+    return;
+  }
+
+  if (props.operateType === 'edit' && props.rowData) {
+    Object.assign(model, props.rowData);
+  }
+}
+
+function closeDrawer() {
+  visible.value = false;
+}
+
+async function handleSubmit() {
+  await validate();
+  // request
+  window.$message?.success($t('common.updateSuccess'));
+  closeDrawer();
+  emit('submitted');
+}
+
+watch(visible, () => {
+  if (visible.value) {
+    handleUpdateModelWhenEdit();
+    restoreValidation();
+  }
+});
+</script>
+
+<template>
+  <NDrawer v-model:show="visible" :title="title" display-directive="show" :width="360">
+    <NDrawerContent :title="title" :native-scrollbar="false" closable>
+      <NForm ref="formRef" :model="model" :rules="rules">
+        <NFormItem :label="$t('page.groupConfig.namespaceId')" path="namespaceId">
+          <NInput v-model:value="model.namespaceId" :placeholder="$t('page.groupConfig.form.namespaceId')" />
+        </NFormItem>
+      </NForm>
+      <template #footer>
+        <NSpace :size="16">
+          <NButton @click="closeDrawer">{{ $t('common.cancel') }}</NButton>
+          <NButton type="primary" @click="handleSubmit">{{ $t('common.confirm') }}</NButton>
+        </NSpace>
+      </template>
+    </NDrawerContent>
+  </NDrawer>
+</template>
+
+<style scoped></style>

src/views/group-config/modules/groupConfig-search.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { $t } from '@/locales';
+import { useNaiveForm } from '@/hooks/common/form';
+
+defineOptions({
+  name: 'GroupConfigSearch'
+});
+
+interface Emits {
+  (e: 'reset'): void;
+  (e: 'search'): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const { formRef, validate, restoreValidation } = useNaiveForm();
+
+const model = defineModel<Api.GroupConfig.GroupConfigSearchParams>('model', { required: true });
+
+async function reset() {
+  await restoreValidation();
+  emit('reset');
+}
+
+async function search() {
+  await validate();
+  emit('search');
+}
+</script>
+
+<template>
+  <NCard :bordered="false" size="small" class="card-wrapper">
+    <NForm ref="formRef" :model="model" label-placement="left" :label-width="80">
+      <NGrid responsive="screen" item-responsive>
+        <NFormItemGi span="24 s:12 m:6" :label="$t('page.groupConfig.groupName')" path="userName" class="pr-24px">
+          <NInput v-model:value="model.groupName" :placeholder="$t('page.groupConfig.form.groupName')" />
+        </NFormItemGi>
+        <NFormItemGi span="24 m:12" class="pr-24px">
+          <NSpace class="w-full" justify="end">
+            <NButton @click="reset">
+              <template #icon>
+                <icon-ic-round-refresh class="text-icon" />
+              </template>
+              {{ $t('common.reset') }}
+            </NButton>
+            <NButton type="primary" ghost @click="search">
+              <template #icon>
+                <icon-ic-round-search class="text-icon" />
+              </template>
+              {{ $t('common.search') }}
+            </NButton>
+          </NSpace>
+        </NFormItemGi>
+      </NGrid>
+    </NForm>
+  </NCard>
+</template>
+
+<style scoped>
+:deep(.n-card-header) {
+  --n-title-font-weight: 600 !important;
+}
+</style>