zhouz/huachuang
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 修复编码规则表单交互问题，新增分段编辑器组件

Browse Source 
- Textarea组件名修正为 Input + type:textarea
- 新增 SegmentEditor 交互式分段配置组件（选择类型、配置参数、拖拽排序）
- 修复搜索表单 query 回调缺失 formValues 参数
- 移除不支持的 help schema 属性
This commit is contained in:
zhouz
2026-07-15 17:43:47 +08:00
parent c0d00d8b94
commit c1ffed6e2d
4 changed files with 355 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

303
nl-ui/nl-ui-admin-vben/yudao-ui-admin-vben/apps/web-antdv-next/src/views/base/codegen/components/SegmentEditor.vue Normal file
View File

@@ -0,0 +1,303 @@
<script lang="ts" setup>
import type { BaseCodeRuleApi } from '#/api/base/codegen';
import { computed, ref, watch } from 'vue';
import { message } from 'antdv-next';
const props = defineProps<{
modelValue?: BaseCodeRuleApi.SegmentConfig[];
}>();
const emit = defineEmits<{
(e: 'update:modelValue', value: BaseCodeRuleApi.SegmentConfig[]): void;
}>();
/** 内部编辑的 segments 列表 */
const segments = ref<BaseCodeRuleApi.SegmentConfig[]>([]);
watch(
() => props.modelValue,
(val) => {
segments.value = val ? [...val] : [];
},
{ immediate: true },
);
/** 触发更新 */
function emitUpdate() {
emit('update:modelValue', [...segments.value]);
}
/** 段类型选项 */
const typeOptions = [
{ label: '固定前缀 (PREFIX)', value: 'PREFIX' },
{ label: '日期 (DATE)', value: 'DATE' },
{ label: '流水序号 (SEQUENCE)', value: 'SEQUENCE' },
];
/** 重置维度选项 */
const resetByOptions = [
{ label: '按天重置', value: 'DAY' },
{ label: '按月重置', value: 'MONTH' },
{ label: '按年重置', value: 'YEAR' },
{ label: '全局不重置', value: 'GLOBAL' },
];
/** 正在编辑的段索引（-1 表示新增） */
const editingIndex = ref(-1);
/** 编辑中的段类型 */
const editingType = ref<string>('');
/** 编辑中的配置数据 */
const editingData = ref<Record<string, unknown>>({});
/** 当前正在编辑的是新增还是修改 */
const isNewSegment = computed(() => editingIndex.value === -1);
/** 开始新增段 */
function handleAdd() {
editingIndex.value = -1;
editingType.value = '';
editingData.value = {};
}
/** 选择段类型后进入配置 */
function handleSelectType(type: string) {
editingType.value = type;
editingData.value = { type };
// 设置默认值
if (type === 'SEQUENCE') {
editingData.value = {
type,
resetBy: 'DAY',
startAt: 1,
paddingLen: 4,
paddingChar: '0',
maxValue: 9999,
};
} else if (type === 'DATE') {
editingData.value = { type, format: 'yyyyMMdd' };
} else {
editingData.value = { type, value: '' };
}
}
/** 编辑已有段 */
function handleEdit(index: number) {
editingIndex.value = index;
editingData.value = { ...segments.value[index] };
editingType.value = segments.value[index].type || '';
}
/** 确认编辑 */
function handleConfirmEdit() {
if (!editingType.value) {
message.warning('请选择段类型');
return;
}
if (editingType.value === 'PREFIX' && !editingData.value.value) {
message.warning('请输入前缀值');
return;
}
if (isNewSegment.value) {
segments.value.push({ ...editingData.value } as BaseCodeRuleApi.SegmentConfig);
} else {
segments.value[editingIndex.value] = {
...editingData.value,
} as BaseCodeRuleApi.SegmentConfig;
}
editingIndex.value = -1;
editingType.value = '';
editingData.value = {};
emitUpdate();
}
/** 取消编辑 */
function handleCancelEdit() {
editingIndex.value = -1;
editingType.value = '';
editingData.value = {};
}
/** 删除段 */
function handleDelete(index: number) {
segments.value.splice(index, 1);
if (editingIndex.value === index) {
handleCancelEdit();
}
emitUpdate();
}
/** 上移 */
function handleMoveUp(index: number) {
if (index <= 0) return;
const item = segments.value[index];
segments.value[index] = segments.value[index - 1];
segments.value[index - 1] = item;
emitUpdate();
}
/** 下移 */
function handleMoveDown(index: number) {
if (index >= segments.value.length - 1) return;
const item = segments.value[index];
segments.value[index] = segments.value[index + 1];
segments.value[index + 1] = item;
emitUpdate();
}
/** 获取段的描述文本 */
function getSegmentSummary(seg: BaseCodeRuleApi.SegmentConfig): string {
switch (seg.type) {
case 'PREFIX':
return `固定值: ${seg.value || '-'}`;
case 'DATE':
return `格式: ${seg.format || 'yyyyMMdd'}`;
case 'SEQUENCE':
return `${seg.resetBy || 'DAY'}重置 | ${seg.startAt || 1}起 | ${seg.paddingLen || 4}位补${seg.paddingChar || '0'} | 上限${seg.maxValue || 9999}`;
default:
return JSON.stringify(seg);
}
}
</script>
<template>
<div class="segment-editor">
<!-- 已配置的段列表 -->
<div v-if="segments.length > 0" class="mb-3">
<div
v-for="(seg, index) in segments"
:key="index"
class="segment-item mb-2 flex items-center justify-between rounded border p-2"
:class="{
'border-blue-400 bg-blue-50': editingIndex === index,
'border-gray-200': editingIndex !== index,
}"
>
<div class="flex items-center gap-2">
<span
class="rounded px-2 py-0.5 text-xs font-bold"
:class="{
'bg-blue-500 text-white': seg.type === 'PREFIX',
'bg-green-500 text-white': seg.type === 'DATE',
'bg-orange-500 text-white': seg.type === 'SEQUENCE',
}"
>
{{ seg.type }}
</span>
<span class="text-sm text-gray-600">
{{ getSegmentSummary(seg) }}
</span>
</div>
<div class="flex items-center gap-1">
<a-button size="small" @click="handleMoveUp(index)" :disabled="index === 0">
↑
</a-button>
<a-button size="small" @click="handleMoveDown(index)" :disabled="index === segments.length - 1">
↓
</a-button>
<a-button size="small" @click="handleEdit(index)">编辑</a-button>
<a-button size="small" danger @click="handleDelete(index)">删除</a-button>
</div>
</div>
</div>
<!-- 编辑面板 -->
<div v-if="editingIndex !== -1 || (editingIndex === -1 && editingType.value === '')" class="mb-3 rounded border border-dashed border-gray-300 p-3">
<!-- 选择类型 -->
<div v-if="!editingType.value" class="flex items-center gap-2">
<span class="text-sm text-gray-600">选择段类型：</span>
<a-button
v-for="opt in typeOptions"
:key="opt.value"
size="small"
@click="handleSelectType(opt.value)"
>
{{ opt.label }}
</a-button>
</div>
<!-- 配置详情 -->
<div v-else>
<div class="mb-2 text-sm font-bold">
{{ isNewSegment ? '新增' : '编辑' }}
{{ typeOptions.find((t) => t.value === editingType.value)?.label }}
</div>
<!-- PREFIX 配置 -->
<template v-if="editingType.value === 'PREFIX'">
<div class="mb-2">
<label class="mb-1 block text-sm">固定前缀值</label>
<a-input v-model:value="(editingData.value as string)" placeholder="如 ORD、CK" />
</div>
</template>
<!-- DATE 配置 -->
<template v-if="editingType.value === 'DATE'">
<div class="mb-2">
<label class="mb-1 block text-sm">日期格式</label>
<a-select
v-model:value="editingData.format"
:options="[
{ label: 'yyyyMMdd (20260715)', value: 'yyyyMMdd' },
{ label: 'yyyyMM (202607)', value: 'yyyyMM' },
{ label: 'yyyy (2026)', value: 'yyyy' },
{ label: 'yyMMdd (260715)', value: 'yyMMdd' },
]"
/>
</div>
</template>
<!-- SEQUENCE 配置 -->
<template v-if="editingType.value === 'SEQUENCE'">
<div class="grid grid-cols-2 gap-2">
<div>
<label class="mb-1 block text-sm">重置维度</label>
<a-select
v-model:value="editingData.resetBy"
:options="resetByOptions"
/>
</div>
<div>
<label class="mb-1 block text-sm">起始值</label>
<a-input-number v-model:value="editingData.startAt" :min="0" class="!w-full" />
</div>
<div>
<label class="mb-1 block text-sm">补位长度</label>
<a-input-number v-model:value="editingData.paddingLen" :min="0" class="!w-full" placeholder="如 4 → 0001" />
</div>
<div>
<label class="mb-1 block text-sm">补位字符</label>
<a-input v-model:value="editingData.paddingChar" placeholder="默认 0" />
</div>
<div>
<label class="mb-1 block text-sm">最大值上限</label>
<a-input-number v-model:value="editingData.maxValue" :min="1" class="!w-full" placeholder="如 9999" />
</div>
</div>
</template>
<div class="mt-3 flex gap-2">
<a-button type="primary" size="small" @click="handleConfirmEdit">
{{ isNewSegment ? '添加' : '保存' }}
</a-button>
<a-button size="small" @click="handleCancelEdit">取消</a-button>
</div>
</div>
</div>
<!-- 添加按钮 -->
<a-button v-if="editingIndex === -1 && !editingType.value" type="dashed" block @click="handleAdd">
+ 添加分段
</a-button>
</div>
</template>
<style scoped>
.segment-editor {
width: 100%;
}
.segment-item:hover {
border-color: #1890ff;
}
</style>

34
nl-ui/nl-ui-admin-vben/yudao-ui-admin-vben/apps/web-antdv-next/src/views/base/codegen/data.ts
View File

@@ -23,7 +23,7 @@ const STATUS_OPTIONS = [
{ label: '禁用', value: 1 },
];
/** 新增/修改的表单 */
/** 新增/修改的表单（不含 segments，segments 使用自定义组件） */
export function useFormSchema(): VbenFormSchema[] {
return [
{
@@ -52,18 +52,6 @@ export function useFormSchema(): VbenFormSchema[] {
placeholder: '请输入规则编码（唯一标识）',
},
},
{
fieldName: 'segments',
label: '分段配置',
rules: 'required',
component: 'Textarea',
componentProps: {
placeholder:
'JSON数组格式，例如：\n[{"type":"PREFIX","value":"ORD"},{"type":"DATE","format":"yyyyMMdd"},{"type":"SEQUENCE","resetBy":"DAY","startAt":1,"paddingLen":4,"paddingChar":"0","maxValue":9999}]',
rows: 6,
},
help: 'JSON数组格式。type: PREFIX/DATE/SEQUENCE',
},
{
fieldName: 'separator',
label: '分隔符',
@@ -115,8 +103,9 @@ export function useFormSchema(): VbenFormSchema[] {
{
fieldName: 'remark',
label: '备注',
component: 'Textarea',
component: 'Input',
componentProps: {
type: 'textarea',
placeholder: '请输入备注',
rows: 3,
},
@@ -184,10 +173,23 @@ export function useGridColumns(): VxeTableGridOptions<BaseCodeRuleApi.CodeRule>[
{
field: 'segmentConfig',
title: '分段配置',
minWidth: 200,
minWidth: 240,
formatter: ({ cellValue }: { cellValue: BaseCodeRuleApi.SegmentConfig[] }) => {
if (!cellValue || cellValue.length === 0) return '-';
return cellValue.map((s) => s.type).join(' + ');
return cellValue
.map((s) => {
switch (s.type) {
case 'PREFIX':
return `前缀:${s.value || ''}`;
case 'DATE':
return `日期(${s.format || 'yyyyMMdd'})`;
case 'SEQUENCE':
return `序号(${s.resetBy || 'DAY'}/${s.paddingLen || 4}位)`;
default:
return s.type;
}
})
.join(' + ');
},
},
{

18
nl-ui/nl-ui-admin-vben/yudao-ui-admin-vben/apps/web-antdv-next/src/views/base/codegen/index.vue
View File

@@ -59,7 +59,6 @@ async function handleDeleteBatch() {
duration: 0,
});
try {
// 逐个删除
for (const id of checkedIds.value) {
await deleteCodeRule(id);
}
@@ -81,6 +80,9 @@ function handleRowCheckboxChange({
}
const [Grid, gridApi] = useVbenVxeGrid({
formOptions: {
schema: useGridFormSchema(),
},
gridOptions: {
columns: useGridColumns(),
height: 'auto',
@@ -89,13 +91,12 @@ const [Grid, gridApi] = useVbenVxeGrid({
},
proxyConfig: {
ajax: {
query: async ({ page }) => {
const params = {
query: async ({ page }, formValues) => {
return await getCodeRulePage({
pageNo: page.currentPage,
pageSize: page.pageSize,
...formData.value,
};
return await getCodeRulePage(params);
...formValues,
});
},
},
},
@@ -112,12 +113,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
checkboxAll: handleRowCheckboxChange,
checkboxChange: handleRowCheckboxChange,
},
formOptions: {
schema: useGridFormSchema(),
},
});
const formData = ref<Record<string, unknown>>({});
</script>
<template>

44
nl-ui/nl-ui-admin-vben/yudao-ui-admin-vben/apps/web-antdv-next/src/views/base/codegen/modules/form.vue
View File

@@ -15,6 +15,7 @@ import {
} from '#/api/base/codegen';
import { $t } from '#/locales';
import SegmentEditor from '../components/SegmentEditor.vue';
import { useFormSchema } from '../data';
const emit = defineEmits(['success']);
@@ -25,6 +26,9 @@ const getTitle = computed(() => {
: $t('ui.actionTitle.create', ['编码规则']);
});
/** segments 独立管理（不在 form schema 中） */
const segmentsValue = ref<BaseCodeRuleApi.SegmentConfig[]>([]);
const [Form, formApi] = useVbenForm({
commonConfig: {
componentProps: {
@@ -44,19 +48,18 @@ const [Modal, modalApi] = useVbenModal({
if (!valid) {
return;
}
modalApi.lock();
const data = (await formApi.getValues()) as Record<string, unknown>;
// 处理 segments JSON 字符串
const submitData: Record<string, unknown> = { ...data };
if (typeof submitData.segments === 'string') {
try {
submitData.segments = JSON.parse(submitData.segments as string);
} catch {
message.error('分段配置 JSON 格式不正确');
modalApi.unlock();
// 校验 segments
if (!segmentsValue.value || segmentsValue.value.length === 0) {
message.error('请至少添加一个分段配置');
return;
}
}
modalApi.lock();
const data = (await formApi.getValues()) as Record<string, unknown>;
const submitData: Record<string, unknown> = {
...data,
segments: segmentsValue.value,
};
try {
await (formData.value?.id
? updateCodeRule(submitData as BaseCodeRuleApi.CodeRule)
@@ -71,24 +74,24 @@ const [Modal, modalApi] = useVbenModal({
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
formData.value = undefined;
segmentsValue.value = [];
return;
}
const data = modalApi.getData<BaseCodeRuleApi.CodeRule>();
if (!data || !data.id) {
await formApi.setValues(data);
segmentsValue.value = [];
return;
}
modalApi.lock();
try {
formData.value = await getCodeRule(data.id);
// segments 数组转 JSON 字符串用于表单展示
const values = {
const values: Record<string, unknown> = {
...formData.value,
segments: formData.value?.segments
? JSON.stringify(formData.value.segments)
: '',
};
delete values.segments;
await formApi.setValues(values);
segmentsValue.value = formData.value?.segments || [];
} finally {
modalApi.unlock();
}
@@ -98,6 +101,13 @@ const [Modal, modalApi] = useVbenModal({
<template>
<Modal :title="getTitle">
<Form class="mx-4" />
<div class="mx-4">
<Form />
<!-- 分段配置（独立于 form schema） -->
<div class="mb-4">
<label class="mb-2 block text-sm font-medium">分段配置 <span class="text-red-500">*</span></label>
<SegmentEditor v-model="segmentsValue" />
</div>
</div>
</Modal>
</template>