feat: 新建组表单增加折叠

This commit is contained in:
dhb52 2024-04-26 19:38:03 +08:00
parent 49139989dc
commit c6ece1d743
4 changed files with 88 additions and 78 deletions

View File

@ -475,7 +475,9 @@ const local: App.I18n.Schema = {
description: 'Please enter description', description: 'Please enter description',
idGeneratorMode: 'Please select ID generator mode', idGeneratorMode: 'Please select ID generator mode',
groupPartition: 'Please select Group partition', groupPartition: 'Please select Group partition',
initScene: 'Initialized scene' initScene: 'Initialized scene',
collapseCommon: 'Common config',
collapseRetry: 'Retry config'
}, },
idMode: { idMode: {
idWorker: 'Id Workder', idWorker: 'Id Workder',

View File

@ -471,7 +471,9 @@ const local: App.I18n.Schema = {
description: '描述', description: '描述',
idGeneratorMode: 'ID生成模式', idGeneratorMode: 'ID生成模式',
groupPartition: '分区', groupPartition: '分区',
initScene: '初始化场景' initScene: '初始化场景',
collapseCommon: '通用配置',
collapseRetry: '重试配置'
}, },
idMode: { idMode: {
idWorker: '雪花算法', idWorker: '雪花算法',

View File

@ -633,7 +633,8 @@ declare namespace App {
groupPartition: string; groupPartition: string;
idGeneratorMode: string; idGeneratorMode: string;
initScene: string; initScene: string;
// bucketIndex: string; collapseCommon: string;
collapseRetry: string;
}; };
idMode: { idMode: {
idWorker: string; idWorker: string;

View File

@ -158,83 +158,88 @@ watch(visible, () => {
<template> <template>
<OperateDrawer v-model="visible" :title="title" @submitted="handleSubmit"> <OperateDrawer v-model="visible" :title="title" @submitted="handleSubmit">
<NForm ref="formRef" :model="model" :rules="rules"> <NForm ref="formRef" :model="model" :rules="rules">
<NFormItem :label="$t('page.groupConfig.groupName')" path="groupName"> <NCollapse :default-expanded-names="['1', '2']">
<NInput <NCollapseItem title="通用配置" name="1">
v-model:value="model.groupName" <NFormItem :label="$t('page.groupConfig.groupName')" path="groupName">
:maxlength="64" <NInput
show-count v-model:value="model.groupName"
:placeholder="$t('page.groupConfig.form.groupName')" :maxlength="64"
:disabled="props.operateType === 'edit'" show-count
/> :placeholder="$t('page.groupConfig.form.groupName')"
</NFormItem> :disabled="props.operateType === 'edit'"
<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> </NFormItem>
</NRadioGroup> <NFormItem :label="$t('page.groupConfig.groupStatus')" path="groupStatus">
</NFormItem> <NRadioGroup v-model:value="model.groupStatus" name="groupStatus">
<NFormItem :label="$t('page.groupConfig.token')" path="token"> <NSpace>
<NInputGroup> <NRadio
<NInput v-for="item in groupConfigStatusOptions"
v-model:value="model.token" :key="item.value"
:maxlength="64" :value="item.value"
:placeholder="$t('page.groupConfig.form.token')" :label="$t(item.label)"
:disabled="props.operateType === 'edit'" />
/> </NSpace>
<NTooltip trigger="hover"> </NRadioGroup>
<template #trigger> </NFormItem>
<NButton type="default" ghost :disabled="props.operateType === 'edit'" @click="setToken"> <NFormItem :label="$t('page.groupConfig.token')" path="token">
<icon-ic-round-refresh class="text-icon" /> <NInputGroup>
</NButton> <NInput
</template> v-model:value="model.token"
{{ $t('page.groupConfig.generateToken') }} :maxlength="64"
</NTooltip> :placeholder="$t('page.groupConfig.form.token')"
</NInputGroup> :disabled="props.operateType === 'edit'"
</NFormItem> />
<NFormItem :label="$t('page.groupConfig.description')" path="description"> <NTooltip trigger="hover">
<NInput <template #trigger>
v-model:value="model.description" <NButton type="default" ghost :disabled="props.operateType === 'edit'" @click="setToken">
type="textarea" <icon-ic-round-refresh class="text-icon" />
:maxlength="256" </NButton>
show-count </template>
:placeholder="$t('page.groupConfig.form.description')" {{ $t('page.groupConfig.generateToken') }}
clearable </NTooltip>
round </NInputGroup>
/> </NFormItem>
</NFormItem> <NFormItem :label="$t('page.groupConfig.description')" path="description">
<NFormItem :label="$t('page.groupConfig.idGeneratorMode')" path="idGeneratorMode"> <NInput
<NSelect v-model:value="model.description"
v-model:value="model.idGeneratorMode" type="textarea"
:placeholder="$t('page.groupConfig.form.idGeneratorMode')" :maxlength="256"
:options="translateOptions(groupConfigIdModeOptions)" show-count
/> :placeholder="$t('page.groupConfig.form.description')"
</NFormItem> clearable
<NFormItem :label="$t('page.groupConfig.initScene')" path="initScene"> round
<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> </NFormItem>
</NRadioGroup> </NCollapseItem>
</NFormItem> <NCollapseItem title="重试配置" name="2">
<NFormItem :label="$t('page.groupConfig.idGeneratorMode')" path="idGeneratorMode">
<NFormItem :label="$t('page.groupConfig.groupPartition')" path="groupPartition"> <NSelect
<NSelect v-model:value="model.idGeneratorMode"
v-model:value="model.groupPartition" :placeholder="$t('page.groupConfig.form.idGeneratorMode')"
:placeholder="$t('page.groupConfig.form.groupPartition')" :options="translateOptions(groupConfigIdModeOptions)"
:options="translateOptions2(partitionList)" />
/> </NFormItem>
</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>
</NCollapseItem>
</NCollapse>
</NForm> </NForm>
<template #footer> <template #footer>
<NSpace :size="16"> <NSpace :size="16">