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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@longhongguo/form-create-ant-design-vue",
-  "version": "3.3.13",
+  "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

@@ -14,14 +14,10 @@ function getValue(obj, path) {
   return value
 }
 
-// 文件加载时立即打印
-console.log('[accTable] ✅ accTable.js 文件已加载')
-
 export default {
   name: 'accTable',
   init(ctx) {
     // 在初始化时就设置 beforeFetch 钩子，确保在第一次请求之前就已经添加
-    console.log('[accTable] init 被调用')
     const rule = ctx.rule
 
     // 如果启用了分页且有远程数据源，在 init 时就添加 beforeFetch 钩子
@@ -39,7 +35,6 @@ export default {
           savedOriginalBeforeFetch._accTablePaginationHook === true
 
         if (!isOurBeforeFetch) {
-          console.log('[accTable] 在 init 中提前设置 beforeFetch 钩子')
           // 获取分页参数配置
           const pageParamName = rule.props?.paginationPageParam || 'page'
           const pageSizeParamName =
@@ -92,31 +87,15 @@ export default {
           }
 
           originalFetch.beforeFetch._accTablePaginationHook = true
-          console.log('[accTable] ✅ 在 init 中 beforeFetch 钩子已添加')
         }
       }
     }
   },
   mergeProp(ctx) {
-    console.log('[accTable] ========== mergeProp 被调用 ==========')
-    console.log('[accTable] 调用堆栈:', new Error().stack)
     const props = ctx.prop.props || {}
     const rule = ctx.rule
     const api = ctx.api
 
-    console.log('[accTable] mergeProp 基本信息:', {
-      ruleType: rule.type,
-      ruleName: rule.name,
-      hasEffect: !!rule.effect,
-      hasFetch: !!rule.effect?.fetch,
-      fetchValue: rule.effect?.fetch,
-      fetchType: typeof rule.effect?.fetch,
-      hasPagination: !!rule.props?.pagination,
-      paginationConfig: rule.props?.pagination,
-      paginationType: typeof rule.props?.pagination,
-      allRuleProps: Object.keys(rule.props || {})
-    })
-
     // 处理列配置 - 每次都要更新，确保 width 等属性变化时能生效
     let columns = rule.props?.columns || []
     // Struct 组件返回的是数组对象，直接使用；如果是字符串，尝试解析为 JSON（向后兼容）
@@ -173,57 +152,39 @@ export default {
         ) {
           const cellType = column.cellType
           const dataIndex = column.dataIndex
-          // 确保 cellOptions 是数组
-          let cellOptions = column.cellOptions
-          if (!Array.isArray(cellOptions)) {
-            cellOptions = []
-          }
           const cellProps = column.cellProps || {}
 
-          // 创建 customRender 函数
-          column.customRender = ({ text, record, index }) => {
-            const cellValue = record && dataIndex ? record[dataIndex] : text
-            // 在 render 函数内部再次确保 cellOptions 是数组（因为可能在外部被修改）
-            const options = Array.isArray(column.cellOptions)
-              ? column.cellOptions
-              : []
-
-            if (cellType === 'input') {
-              // 渲染 input 组件 - 使用组件名字符串
-              return h('a-input', {
-                value: cellValue,
-                onChange: (e) => {
-                  const val =
-                    e.target?.value !== undefined
-                      ? e.target.value
-                      : e?.target?.inputValue !== undefined
-                      ? e.target.inputValue
-                      : e
-                  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',
-                {
+          // 创建 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 组件，使用 ctx.$render.vNode 来创建
+                return renderCtx.$render.vNode.make('aInput', {
                   value: cellValue,
-                  onChange: (val) => {
+                  '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
+                      if (renderCtx.api && renderCtx.api.form && rule.field) {
+                        renderCtx.api.form[rule.field] = props.dataSource
                       }
                     }
                   },
@@ -231,60 +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',
-                {
-                  value: cellValue,
-                  onChange: (e) => {
-                    const val =
-                      e.target?.value !== undefined ? e.target.value : e
-                    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 等）
@@ -330,20 +332,9 @@ export default {
 
     // 处理分页配置
     const paginationConfig = rule.props?.pagination
-    console.log('[accTable] 开始处理分页配置:', {
-      hasPaginationProp: hasProperty(props, 'pagination'),
-      paginationConfig,
-      paginationConfigType: typeof paginationConfig
-    })
 
     // 处理分页 props（只有在 props 中没有 pagination 时才初始化）
     if (!hasProperty(props, 'pagination')) {
-      console.log('[accTable] 分页配置检查:', {
-        paginationConfig,
-        isFalse: paginationConfig === false,
-        isObject: paginationConfig && typeof paginationConfig === 'object'
-      })
-
       if (paginationConfig === false) {
         props.pagination = false
       } else if (paginationConfig && typeof paginationConfig === 'object') {
@@ -365,22 +356,12 @@ export default {
     }
 
     // 无论 props.pagination 是否已存在，只要满足条件就添加/检查 beforeFetch 钩子
-    console.log('[accTable] 检查分页钩子添加条件:', {
-      hasFetch: !!rule.effect?.fetch,
-      hasPaginationConfig: !!paginationConfig,
-      paginationConfigType: typeof paginationConfig,
-      paginationConfigValue: paginationConfig,
-      paginationCurrent: paginationConfig?.current,
-      paginationCurrentDefined: paginationConfig?.current !== undefined
-    })
-
     if (
       rule.effect?.fetch &&
       paginationConfig &&
       typeof paginationConfig === 'object' &&
       paginationConfig.current !== undefined
     ) {
-      console.log('[accTable] ✅ 满足条件，进入分页请求参数处理逻辑')
       // 获取分页参数配置
       const pageParamName = rule.props?.paginationPageParam || 'page'
       const pageSizeParamName =
@@ -393,24 +374,8 @@ export default {
       // 获取当前分页对象（从 props 或 paginationConfig）
       const currentPaginationObj = props.pagination || paginationConfig
 
-      console.log('[accTable] 分页配置初始化:', {
-        hasFetch: !!rule.effect?.fetch,
-        paginationConfig,
-        pageParamName,
-        pageSizeParamName,
-        paramType,
-        currentPage: currentPaginationObj?.current,
-        currentPageSize: currentPaginationObj?.pageSize
-      })
-
       // 包装 fetch 配置，通过 beforeFetch 钩子动态注入分页参数
       const originalFetch = rule.effect.fetch
-      console.log('[accTable] 原始 fetch 配置:', {
-        type: typeof originalFetch,
-        isObject: typeof originalFetch === 'object',
-        originalFetch,
-        hasBeforeFetch: typeof originalFetch?.beforeFetch === 'function'
-      })
 
       if (typeof originalFetch === 'object') {
         // 保存原始配置和分页参数配置到闭包中
@@ -430,36 +395,13 @@ export default {
           // 添加 beforeFetch 钩子来注入分页参数
           // 注意：form-create 的 beforeFetch 只接收 (config, {api}) 参数，没有 rule
           originalFetch.beforeFetch = (config, { api }) => {
-            console.log('[accTable] beforeFetch 被调用:', {
-              configAction: config?.action,
-              hasApi: !!api,
-              ruleProps: savedRule?.props,
-              pagination: savedRule?.props?.pagination
-            })
-
             // 从闭包中获取当前分页配置
             const currentPagination = savedRule?.props?.pagination
-            console.log('[accTable] 当前分页配置:', {
-              currentPagination,
-              isObject: typeof currentPagination === 'object',
-              currentPage: currentPagination?.current,
-              currentPageSize: currentPagination?.pageSize
-            })
 
             if (currentPagination && typeof currentPagination === 'object') {
               const currentPage = currentPagination.current || 1
               const currentPageSize = currentPagination.pageSize || 10
 
-              console.log('[accTable] 准备添加分页参数:', {
-                savedParamType,
-                savedPageParamName,
-                savedPageSizeParamName,
-                currentPage,
-                currentPageSize,
-                existingQuery: config.query,
-                existingData: config.data
-              })
-
               // 添加分页参数（使用闭包中保存的参数名）
               if (savedParamType === 'query') {
                 // 合并已有的 query 参数，确保不覆盖用户自定义的参数
@@ -468,9 +410,6 @@ export default {
                   [savedPageParamName]: currentPage,
                   [savedPageSizeParamName]: currentPageSize
                 }
-                console.log('[accTable] 添加 query 参数后:', {
-                  query: config.query
-                })
               } else {
                 // 合并已有的 data 参数，确保不覆盖用户自定义的参数
                 config.data = {
@@ -478,9 +417,6 @@ export default {
                   [savedPageParamName]: currentPage,
                   [savedPageSizeParamName]: currentPageSize
                 }
-                console.log('[accTable] 添加 data 参数后:', {
-                  data: config.data
-                })
               }
             } else {
               console.warn('[accTable] 分页配置无效，无法添加分页参数:', {
@@ -496,7 +432,6 @@ export default {
               savedOriginalBeforeFetch &&
               typeof savedOriginalBeforeFetch === 'function'
             ) {
-              console.log('[accTable] 调用原始 beforeFetch 钩子')
               try {
                 const result = savedOriginalBeforeFetch(config, { api })
                 // 如果原始钩子返回了 Promise，处理它
@@ -516,21 +451,11 @@ export default {
                 // 即使原始钩子出错，也继续执行，不影响分页参数的添加
               }
             }
-
-            console.log('[accTable] beforeFetch 完成，最终 config:', {
-              query: config.query,
-              data: config.data,
-              action: config.action
-            })
           }
 
           // 标记这是我们添加的钩子，避免重复添加
           originalFetch.beforeFetch._accTablePaginationHook = true
-          console.log('[accTable] ✅ beforeFetch 钩子已添加并标记')
-        } else {
-          console.log('[accTable] ⚠️ beforeFetch 钩子已存在，跳过添加')
         }
-        console.log('[accTable] beforeFetch 钩子处理完成')
       } else {
         console.warn('[accTable] fetch 配置不是对象类型:', {
           type: typeof originalFetch,
@@ -545,10 +470,6 @@ export default {
         if (!paginationObj._accTableHandlersSet) {
           if (!paginationObj.onChange) {
             paginationObj.onChange = (page, size) => {
-              console.log('[accTable] pagination onChange 被调用:', {
-                page,
-                size
-              })
               // 更新分页配置
               if (rule.props?.pagination) {
                 rule.props.pagination.current = page
@@ -564,10 +485,6 @@ export default {
 
           if (!paginationObj.onShowSizeChange) {
             paginationObj.onShowSizeChange = (current, size) => {
-              console.log('[accTable] pagination onShowSizeChange 被调用:', {
-                current,
-                size
-              })
               if (rule.props?.pagination) {
                 rule.props.pagination.current = 1 // 改变每页条数时重置到第一页
                 rule.props.pagination.pageSize = size
@@ -651,7 +568,6 @@ export default {
     }
   },
   render(children, ctx) {
-    console.log('[accTable] render 方法被调用')
     // 使用默认渲染
     return ctx.$render.defaultRender(ctx, children)
   }