@dckj-npm/dc-material 0.1.379 → 0.1.381

package/lowcode/custom-form/meta.ts

@@ -356,7 +356,7 @@ const CustomFormMeta: IPublicTypeComponentMetadata = {
                     {
                       title: {
                         label: '动态选项绑定',
-                        tip: '仅在组件类型为「下拉选择」「单选组」「复选组」时生效。\n绑定后优先级高于上方「选项列表」（静态配置）。\n支持绑定页面变量或数据源返回的数组，数组格式为 [{label, value}, ...]。\n常见用法：将套餐列表、城市列表等接口数据直接绑定到选项。',
+                        tip: '仅在组件类型为「下拉选择」「单选组」「复选组」时生效。\n绑定后优先级高于上方「选项列表」（静态配置）。\n支持绑定页面变量或数据源返回的数组，数组格式为 [{label, value}, ...]。\n常见用法：将套餐列表、城市列表等接口数据直接绑定到选项。\n若接口返回的数据字段名不是 label/value，请配合下方「选项显示字段名」和「选项值字段名」使用。',
                       },
                       name: 'optionsBind',
                       condition: (target: any) => {
@@ -379,6 +379,39 @@ const CustomFormMeta: IPublicTypeComponentMetadata = {
                         },
                       },
                     },
+                    // ── 动态选项字段映射（当数据源字段名不是 label/value 时使用）
+                    {
+                      title: {
+                        label: '选项显示字段名',
+                        tip: '当「动态选项绑定」的数据源字段名不是 label 时填写。\n例如后端返回 {package_name, id, ...}，想用 package_name 做显示文字，则填 "package_name"。\n不填则默认使用 label 字段。',
+                      },
+                      name: 'optionsLabelKey',
+                      condition: (target: any) => {
+                        const t = target.parent?.getPropValue?.('componentType') || target.parent?.parent?.getPropValue?.('componentType')
+                        return ['Select','RadioGroup','CheckboxGroup'].includes(t)
+                      },
+                      setter: {
+                        componentName: 'StringSetter',
+                        isRequired: false,
+                        initialValue: '',
+                      },
+                    },
+                    {
+                      title: {
+                        label: '选项值字段名',
+                        tip: '当「动态选项绑定」的数据源字段名不是 value 时填写。\n例如后端返回 {package_name, id, ...}：\n· 想用 id 做存储值 → 填 "id"\n· 想用 package_name 做存储值 → 填 "package_name"\n不填则默认使用 value 字段。\n配置后，字段联动规则的「匹配字段名 matchKey」会自动默认使用此字段名，无需重复配置。',
+                      },
+                      name: 'optionsValueKey',
+                      condition: (target: any) => {
+                        const t = target.parent?.getPropValue?.('componentType') || target.parent?.parent?.getPropValue?.('componentType')
+                        return ['Select','RadioGroup','CheckboxGroup'].includes(t)
+                      },
+                      setter: {
+                        componentName: 'StringSetter',
+                        isRequired: false,
+                        initialValue: '',
+                      },
+                    },
                     // ── 布局
                     {
                       title: {
@@ -1051,19 +1084,17 @@ const CustomFormMeta: IPublicTypeComponentMetadata = {
             const iv = target.getProps().getPropValue('initialValues')
             if (!iv) return []
             if (Array.isArray(iv)) {
+              // 不过滤 field 为空的行，允许新添加的空行显示出来供用户填写
+              // 仅过滤非对象的元素（防御性兼容旧脏数据）
               return iv
-                .map((row: any) => {
-                  const field = typeof row?.field === 'string' ? row.field.trim() : ''
-                  if (!field) return null
-                  const valueType = row?.valueType === 'variable' ? 'variable' : 'fixed'
-                  return {
-                    field,
-                    valueType,
-                    value: row?.value,
-                  }
-                })
-                .filter(Boolean)
+                .filter((row: any) => row && typeof row === 'object')
+                .map((row: any) => ({
+                  field: typeof row.field === 'string' ? row.field.trim() : '',
+                  valueType: row.valueType === 'variable' ? 'variable' : 'fixed',
+                  value: row.value,
+                }))
             }
+            // 对象格式：key 不可能为空字符串，保留原有过滤
             return Object.entries(iv as Record<string, any>).map(([field, value]) => ({
               field: String(field).trim(),
               valueType: 'fixed',
@@ -1072,18 +1103,16 @@ const CustomFormMeta: IPublicTypeComponentMetadata = {
           },
           setValue: (target: any, rows: any[]) => {
             if (!Array.isArray(rows)) return
+            // 不过滤 field 为空的行：用户点击"添加一项"时新行 field 为空字符串，
+            // 若此处过滤掉，ArraySetter 重读 getValue 后新行消失，表现为"添加无效"。
+            // 运行时 normalizeInitialValues 已忽略 field 为空的行，不影响实际行为。
             const cleanedRows = rows
-              .map((row: any) => {
-                const field = typeof row?.field === 'string' ? row.field.trim() : ''
-                if (!field) return null
-                const valueType = row?.valueType === 'variable' ? 'variable' : 'fixed'
-                return {
-                  field,
-                  valueType,
-                  value: row?.value,
-                }
-              })
-              .filter(Boolean)
+              .filter((row: any) => row && typeof row === 'object')
+              .map((row: any) => ({
+                field: typeof row.field === 'string' ? row.field.trim() : '',
+                valueType: row.valueType === 'variable' ? 'variable' : 'fixed',
+                value: row.value,
+              }))
             target.getProps().setPropValue('initialValues', cleanedRows)
           },
         },
@@ -1352,7 +1381,7 @@ const CustomFormMeta: IPublicTypeComponentMetadata = {
                         {
                           title: {
                             label: '数据源',
-                            tip: '从 state 中选取一个数组变量作为查找来源。\n\n典型配置：将 package_name 字段的「动态选项绑定」绑定到 state.packages，然后此处同样选择 state.packages。\n\n这样当 package_name 变化时，会在 state.packages 中找到匹配的项，再按「回填映射」将各字段值填入表单。',
+                            tip: '⚠️ 必须通过右侧「变量绑定」按钮选择变量，不能直接输入文本（如 "this.state.xxx"），否则运行时会报错。\n\n请选取一个数组变量作为查找来源。\n\n典型配置：\n1. 将 package_name 字段的「动态选项绑定」绑定到 state.packages\n2. 此处也选择同一个 state.packages\n\n数据格式要求（每个对象必须同时包含用于匹配的字段和用于回填的字段）：\n  state.packages = [\n    {value:"A", label:"豪华套餐", price:9800, count:10},\n    {value:"B", label:"标准套餐", price:5800, count:8}\n  ]\n其中 value/label 供下拉框显示用，price/count 供联动回填用。',
                           },
                           name: 'dataSource',
                           condition: (target: any) =>
@@ -1364,7 +1393,7 @@ const CustomFormMeta: IPublicTypeComponentMetadata = {
                         {
                           title: {
                             label: '匹配字段',
-                            tip: '在数据源的每个对象中，用哪个字段的值与监听字段的当前值进行比对。\n\n下拉框（Select）默认存储选项的 value 字段，此处填 value 即可。\n如果下拉框存储的是 label（名称），则填 label。\n\n示例：state.packages = [{value:"A", label:"豪华套餐", price:9800, count:10}, ...]\n则此处填 value（与 package_name 字段存储的选项 value 对应）。',
+                            tip: '在数据源的每个对象中，用哪个字段的值与监听字段的当前值进行比对。\n\n下拉框（Select）默认存储选项的 value 字段，此处填 value 即可。\n如果下拉框存储的是 label（名称），则填 label。\n\n示例：state.packages = [{value:"A", label:"豪华套餐", price:9800, count:10}, ...]\n则此处填 value（与 package_name 字段存储的选项 value 对应）。\n\n注意：匹配字段的值类型需与下拉框存储的值类型一致（如都为字符串，或都为数字）。',
                           },
                           name: 'matchKey',
                           condition: (target: any) =>
@@ -1375,7 +1404,7 @@ const CustomFormMeta: IPublicTypeComponentMetadata = {
                         {
                           title: {
                             label: '回填映射',
-                            tip: '找到匹配项后，将数据源对象中的哪些字段值填入表单的哪些字段。\n\nJSON 格式：{ "表单字段名": "数据源字段名", ... }\n\n示例（state.packages 中每项有 price 和 count 属性）：\n  {"package_price":"price","guest_count":"count"}\n\n效果：匹配到套餐后，自动将 price 回填到 package_price 字段，count 回填到 guest_count 字段。',
+                            tip: '找到匹配项后，将数据源对象中的哪些字段值填入表单的哪些字段。\n\nJSON 格式：{ "表单字段名": "数据源字段名", ... }\n\n示例（state.packages 中每项有 price 和 count 属性）：\n  {"package_price":"price","guest_count":"count"}\n\n效果：匹配到套餐后，自动将 price 回填到 package_price 字段，count 回填到 guest_count 字段。\n\n注意：数据源字段名（value 部分）必须是数据源对象中实际存在的属性名。',
                           },
                           name: 'fillFields',
                           condition: (target: any) =>