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

- Textarea组件名修正为 Input + type:textarea
- 新增 SegmentEditor 交互式分段配置组件（选择类型、配置参数、拖拽排序）
- 修复搜索表单 query 回调缺失 formValues 参数
- 移除不支持的 help schema 属性

nl-ui/nl-ui-admin-vben/yudao-ui-admin-vben/apps/web-antdv-next/src/views/base/codegen/components/SegmentEditor.vue

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

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

@@ -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(' + ');
       },
     },
     {

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

@@ -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 }) => {
+        query: async ({ page }, formValues) => {
-          const params = {
+          return await getCodeRulePage({
             pageNo: page.currentPage,
             pageSize: page.pageSize,
-            ...formData.value,
+            ...formValues,
-          };
+          });
-          return await getCodeRulePage(params);
         },
       },
     },
@@ -112,12 +113,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     checkboxAll: handleRowCheckboxChange,
     checkboxChange: handleRowCheckboxChange,
   },
-  formOptions: {
-    schema: useGridFormSchema(),
-  },
 });
-
-const formData = ref<Record<string, unknown>>({});
 </script>
 
 <template>

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

@@ -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;
     }
+    // 校验 segments
+    if (!segmentsValue.value || segmentsValue.value.length === 0) {
+      message.error('请至少添加一个分段配置');
+      return;
+    }
+
     modalApi.lock();
     const data = (await formApi.getValues()) as Record<string, unknown>;
-    // 处理 segments JSON 字符串
+    const submitData: Record<string, unknown> = {
-    const submitData: Record<string, unknown> = { ...data };
+      ...data,
-    if (typeof submitData.segments === 'string') {
+      segments: segmentsValue.value,
-      try {
+    };
-        submitData.segments = JSON.parse(submitData.segments as string);
-      } catch {
-        message.error('分段配置 JSON 格式不正确');
-        modalApi.unlock();
-        return;
-      }
-    }
     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: Record<string, unknown> = {
-      const values = {
         ...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>