@longhongguo/form-create-ant-design-vue 3.3.14 → 3.3.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@longhongguo/form-create-ant-design-vue",
-  "version": "3.3.14",
+  "version": "3.3.15",
   "description": "AntDesignVue版本低代码表单|FormCreate 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的低代码表单生成组件。支持6个UI框架，适配移动端，并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。",
   "main": "./dist/form-create.min.js",
   "module": "./dist/form-create.esm.js",

package/src/parsers/accTable.js

@@ -154,55 +154,37 @@ export default {
           const dataIndex = column.dataIndex
           const cellProps = column.cellProps || {}
 
-          // 创建 customRender 函数
-          column.customRender = ({ text, record, index }) => {
-            const cellValue = record && dataIndex ? record[dataIndex] : text
-            // 将 cellOptions 转换为数组格式（支持对象和数组两种格式）
-            let options = []
-            const cellOptions = column.cellOptions
-            if (Array.isArray(cellOptions)) {
-              // 如果已经是数组，直接使用
-              options = cellOptions
-            } else if (cellOptions && typeof cellOptions === 'object') {
-              // 如果是对象，转换为数组格式 { 是: 1, 否: 0 } => [{label: '是', value: 1}, {label: '否', value: 0}]
-              options = Object.keys(cellOptions).map((label) => ({
-                label,
-                value: cellOptions[label]
-              }))
-            }
+          // 创建 customRender 函数，通过闭包访问 ctx
+          column.customRender = (() => {
+            // 在闭包中保存 ctx 的引用
+            const renderCtx = ctx
+            return ({ text, record, index }) => {
+              const cellValue = record && dataIndex ? record[dataIndex] : text
+              // 将 cellOptions 转换为数组格式（支持对象和数组两种格式）
+              let options = []
+              const cellOptions = column.cellOptions
+              if (Array.isArray(cellOptions)) {
+                // 如果已经是数组，直接使用
+                options = cellOptions
+              } else if (cellOptions && typeof cellOptions === 'object') {
+                // 如果是对象，转换为数组格式 { 是: 1, 否: 0 } => [{label: '是', value: 1}, {label: '否', value: 0}]
+                options = Object.keys(cellOptions).map((label) => ({
+                  label,
+                  value: cellOptions[label]
+                }))
+              }
 
-            if (cellType === 'input') {
-              // 渲染 input 组件
-              return h('a-input', {
-                value: cellValue,
-                'onUpdate:value': (val) => {
-                  // Ant Design Vue 的 Input 使用 value 和 onUpdate:value
-                  if (record && dataIndex) {
-                    record[dataIndex] = val
-                    // 触发表格数据更新
-                    if (ctx.api && ctx.api.form && rule.field) {
-                      ctx.api.form[rule.field] = props.dataSource
-                    }
-                  }
-                },
-                placeholder: cellProps.placeholder || '',
-                disabled: cellProps.disabled || false,
-                size: cellProps.size || 'small',
-                ...cellProps
-              })
-            } else if (cellType === 'select') {
-              // 渲染 select 组件
-              return h(
-                'a-select',
-                {
+              if (cellType === 'input') {
+                // 渲染 input 组件，使用 ctx.$render.vNode 来创建
+                return renderCtx.$render.vNode.make('aInput', {
                   value: cellValue,
                   'onUpdate:value': (val) => {
-                    // Ant Design Vue 的 Select 使用 value 和 onUpdate:value
+                    // Ant Design Vue 的 Input 使用 value 和 onUpdate:value
                     if (record && dataIndex) {
                       record[dataIndex] = val
                       // 触发表格数据更新
-                      if (ctx.api && ctx.api.form && rule.field) {
-                        ctx.api.form[rule.field] = props.dataSource
+                      if (renderCtx.api && renderCtx.api.form && rule.field) {
+                        renderCtx.api.form[rule.field] = props.dataSource
                       }
                     }
                   },
@@ -210,59 +192,101 @@ export default {
                   disabled: cellProps.disabled || false,
                   size: cellProps.size || 'small',
                   ...cellProps
-                },
-                {
-                  default: () =>
-                    options.map((opt) => {
-                      return h('a-select-option', {
-                        key: opt.value,
-                        value: opt.value,
-                        label: opt.label
-                      })
-                    })
-                }
-              )
-            } else if (cellType === 'radio') {
-              // 渲染 radio 组件
-              return h(
-                'a-radio-group',
-                {
-                  modelValue: cellValue,
-                  'onUpdate:modelValue': (val) => {
-                    // Ant Design Vue 的 RadioGroup 使用 modelValue
-                    if (record && dataIndex) {
-                      record[dataIndex] = val
-                      // 触发表格数据更新
-                      if (ctx.api && ctx.api.form && rule.field) {
-                        ctx.api.form[rule.field] = props.dataSource
+                })
+              } else if (cellType === 'select') {
+                // 渲染 select 组件
+                return renderCtx.$render.vNode.make(
+                  'aSelect',
+                  {
+                    value: cellValue,
+                    'onUpdate:value': (val) => {
+                      // Ant Design Vue 的 Select 使用 value 和 onUpdate:value
+                      if (record && dataIndex) {
+                        record[dataIndex] = val
+                        // 触发表格数据更新
+                        if (renderCtx.api && renderCtx.api.form && rule.field) {
+                          renderCtx.api.form[rule.field] = props.dataSource
+                        }
                       }
-                    }
+                    },
+                    placeholder: cellProps.placeholder || '',
+                    disabled: cellProps.disabled || false,
+                    size: cellProps.size || 'small',
+                    ...cellProps
                   },
-                  disabled: cellProps.disabled || false,
-                  size: cellProps.size || 'small',
-                  ...cellProps
-                },
-                {
-                  default: () =>
-                    options.map((opt) => {
-                      return h(
-                        'a-radio',
-                        {
-                          key: opt.value,
-                          value: opt.value
-                        },
-                        {
-                          default: () => opt.label || opt.value
-                        }
-                      )
+                  options.map((opt) => {
+                    return renderCtx.$render.vNode.make('aSelectOption', {
+                      key: opt.value,
+                      value: opt.value,
+                      label: opt.label
                     })
+                  })
+                )
+              } else if (cellType === 'radio') {
+                // 渲染 radio 组件
+                // 当 cellValue 是 null 或 undefined 时，确保 modelValue 是 undefined
+                const radioValue =
+                  cellValue !== null && cellValue !== undefined
+                    ? cellValue
+                    : undefined
+
+                // 使用 ctx.$render.vNode.h 创建组件，确保组件名正确解析
+                // Radio 的 children 需要作为函数传递，避免警告
+                const radioChildren = options.map((opt) => {
+                  return renderCtx.$render.vNode.h(
+                    'aRadio',
+                    {
+                      key: opt.value,
+                      value: opt.value
+                    },
+                    {
+                      default: () => opt.label || opt.value
+                    }
+                  )
+                })
+
+                // 统一的值更新处理函数
+                const handleValueChange = (val) => {
+                  if (record && dataIndex) {
+                    record[dataIndex] = val
+                    // 触发表格数据更新
+                    if (renderCtx.api && renderCtx.api.form && rule.field) {
+                      renderCtx.api.form[rule.field] = props.dataSource
+                    }
+                    // 触发同步更新
+                    if (renderCtx.api && renderCtx.api.sync) {
+                      renderCtx.api.sync(rule)
+                    }
+                  }
                 }
-              )
-            }
 
-            // 如果没有匹配的类型，返回原始文本
-            return text
-          }
+                return renderCtx.$render.vNode.h(
+                  'aRadioGroup',
+                  {
+                    value: radioValue,
+                    onChange: (e) => {
+                      // Ant Design Vue 的 RadioGroup onChange 直接传递 value 作为参数
+                      // 但也可能是事件对象，兼容两种方式
+                      const val =
+                        typeof e === 'object' && e?.target?.value !== undefined
+                          ? e.target.value
+                          : e
+                      handleValueChange(val)
+                    },
+                    disabled: cellProps.disabled || false,
+                    size: cellProps.size || 'small',
+                    ...cellProps
+                  },
+                  {
+                    default: () => radioChildren
+                  }
+                )
+              }
+
+              // 如果没有匹配的类型，返回原始文本
+              return text
+            }
+          })()
         }
 
         // 确保其他列属性也被保留（align、fixed、title、dataIndex 等）