gtsoft/gtsoft-snail-job-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
dhb52 2024-04-20 16:34:30 +08:00
parent fe93afd252
commit b231cded21
7 changed files with 195 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/locales/langs/en-us.ts
View File

@ -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',

10
src/locales/langs/zh-cn.ts
View File

@ -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: '雪花算法',

10
src/service/api/group-config.ts
View File

@ -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'
});
}

16
src/typings/api.d.ts vendored
View File

@ -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 */

10
src/typings/app.d.ts vendored
View File

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

10
src/views/group-config/index.vue
View File

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

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

@ -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
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">
<NInput v-model:value="model.namespaceId" :placeholder="$t('page.groupConfig.form.namespaceId')" />
<NFormItem :label="$t('page.groupConfig.groupName')" path="groupName">
<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>