@longhongguo/form-create-ant-design-vue 3.2.65 → 3.2.67

package/package.json

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

package/src/core/alias.js

@@ -29,6 +29,7 @@ export default {
   row: PRE + 'Row',
   flex: PRE + 'Flex',
   space: PRE + 'Space',
+  'space-compact': PRE + 'SpaceCompact',
   tree: PRE + 'Tree',
   autoComplete: PRE + 'AutoComplete',
   transfer: PRE + 'Transfer',

package/src/parsers/cascader.js

@@ -1,4 +1,7 @@
 import { hasProperty } from '@form-create/utils/lib/type'
+import { parseFn } from '@form-create/utils/lib/json'
+import is from '@form-create/utils/lib/type'
+import deepSet from '@form-create/utils/lib/deepset'
 
 export default {
   name: 'cascader',
@@ -15,6 +18,197 @@ export default {
       props.disabled = true
       props.loading = true
     }
+
+    // 处理 loadData 函数
+    if (props.loadData) {
+      const api = ctx.$handle?.api
+      const rule = ctx.rule
+      const ctxRef = ctx
+
+      // 解析函数（如果是字符串）
+      let parsedFn = is.String(props.loadData)
+        ? parseFn(props.loadData)
+        : props.loadData
+
+      // 如果不是函数，尝试包装
+      if (!is.Function(parsedFn) && is.String(props.loadData)) {
+        try {
+          const code = props.loadData.trim()
+          if (
+            !code.startsWith('function') &&
+            !code.startsWith('[[FORM-CREATE-PREFIX-function') &&
+            !code.startsWith('$FNX:')
+          ) {
+            parsedFn = new Function(
+              'selectedOptions',
+              'options',
+              'updateOptions',
+              'api',
+              'rule',
+              code
+            )
+          }
+        } catch (e) {
+          console.error('Failed to parse loadData:', e)
+        }
+      }
+
+      if (is.Function(parsedFn)) {
+        // 包装 loadData 函数
+        props.loadData = function (selectedOptions) {
+          console.log('[Cascader loadData] ========== 开始 ==========')
+          console.log('[Cascader loadData] selectedOptions:', selectedOptions)
+
+          if (!selectedOptions || selectedOptions.length === 0) return
+
+          const targetOption = selectedOptions[selectedOptions.length - 1]
+          console.log('[Cascader loadData] targetOption:', targetOption)
+
+          if (targetOption?.isLeaf === true) {
+            console.log('[Cascader loadData] 是叶子节点，直接返回')
+            return
+          }
+
+          const options = props.options || []
+          console.log('[Cascader loadData] 当前 options:', options)
+          console.log('[Cascader loadData] props.options:', props.options)
+
+          // 创建 updateOptions 函数，完全按照 effect.fetch 的方式
+          // 关键：effect.fetch 使用 deepSet(inject.getProp(), 'props.options', val) 然后 api.sync(rule)
+          const updateOptions = () => {
+            console.log(
+              '[Cascader updateOptions] ========== 开始更新 =========='
+            )
+            // 关键：创建新数组时，同时创建新对象，确保引用完全改变
+            // 这样可以触发 Vue 的响应式更新，即使对象属性被修改了
+            const currentOptions = props.options || []
+
+            // 找到 targetOption 在数组中的索引
+            let targetIndex = -1
+            if (targetOption) {
+              targetIndex = currentOptions.findIndex(
+                (item) =>
+                  item.value === targetOption.value ||
+                  item.id === targetOption.id ||
+                  item === targetOption
+              )
+              console.log('[Cascader updateOptions] targetIndex:', targetIndex)
+            }
+
+            const newOptions = currentOptions.map((item, index) => {
+              // 如果是 targetOption，创建包含所有修改的新对象
+              if (index === targetIndex && targetOption) {
+                const newTarget = { ...targetOption }
+                console.log('[Cascader updateOptions] 创建新对象:', newTarget)
+                console.log(
+                  '[Cascader updateOptions] newTarget.loading:',
+                  newTarget.loading
+                )
+                console.log(
+                  '[Cascader updateOptions] newTarget.children:',
+                  newTarget.children
+                )
+                return newTarget
+              }
+              // 其他对象创建新引用（浅拷贝即可）
+              return { ...item }
+            })
+            console.log('[Cascader updateOptions] 新数组:', newOptions)
+            if (targetIndex >= 0 && newOptions[targetIndex]) {
+              console.log(
+                '[Cascader updateOptions] 新数组[targetIndex]:',
+                newOptions[targetIndex]
+              )
+              console.log(
+                '[Cascader updateOptions] 新数组[targetIndex].loading:',
+                newOptions[targetIndex].loading
+              )
+            }
+
+            // 完全按照 effect.fetch 的方式：使用 deepSet 在响应式对象上设置值
+            // effect.fetch 使用: deepSet(inject.getProp(), 'props.options', val)
+            // inject.getProp() 返回 ctx.effectData('fetch')
+            // 所以我们应该在同一个位置设置：ctxRef.effectData('fetch')
+            const fetchData = ctxRef.effectData('fetch')
+            if (fetchData) {
+              // 关键：在 fetchData 上设置，就像 effect.fetch 那样
+              deepSet(fetchData, 'props.options', newOptions)
+              console.log(
+                '[Cascader updateOptions] deepSet(fetchData, props.options) 完成'
+              )
+            }
+
+            // 同时直接更新 props.options（这是最终传递给组件的值）
+            props.options = newOptions
+
+            // 同步到 ctx.prop.props.options（确保 mergeRule 能获取到最新值）
+            if (ctxRef.prop?.props) {
+              ctxRef.prop.props.options = newOptions
+            }
+
+            // 同步到 rule.props.options
+            if (ctxRef.rule?.props) {
+              ctxRef.rule.props.options = newOptions
+            }
+
+            console.log(
+              '[Cascader updateOptions] 所有位置已同步，props.options:',
+              props.options
+            )
+
+            // 调用 api.sync 触发更新，就像 effect.fetch 那样
+            if (api && rule) {
+              console.log('[Cascader updateOptions] 调用 api.sync')
+              api.sync(rule)
+            }
+
+            // 刷新组件
+            if (ctxRef.$handle) {
+              console.log('[Cascader updateOptions] 调用 refresh')
+              ctxRef.$handle.refresh()
+            }
+
+            console.log(
+              '[Cascader updateOptions] ========== 更新完成 =========='
+            )
+          }
+
+          // 关键：在调用用户函数之前，立即设置 loading 并更新
+          // 这样确保 loading 状态能立即显示
+          if (targetOption) {
+            console.log('[Cascader loadData] 设置 loading = true')
+            targetOption.loading = true
+            updateOptions()
+          }
+
+          // 调用用户函数
+          console.log('[Cascader loadData] 调用用户函数')
+          const result = parsedFn.call(
+            this,
+            selectedOptions,
+            options,
+            updateOptions,
+            api,
+            rule
+          )
+          console.log('[Cascader loadData] 用户函数返回值:', result)
+
+          // 如果用户函数返回 Promise，等待完成
+          if (result && typeof result.then === 'function') {
+            console.log('[Cascader loadData] 用户函数返回 Promise')
+            return result.finally(() => {
+              console.log(
+                '[Cascader loadData] Promise 完成，调用 updateOptions'
+              )
+              updateOptions()
+            })
+          }
+
+          console.log('[Cascader loadData] ========== 结束 ==========')
+          return result
+        }
+      }
+    }
   },
   render(children, ctx) {
     // 检测 loading 状态（与 mergeProp 中的逻辑保持一致）

package/src/parsers/space.js

@@ -72,9 +72,19 @@ export default {
     // 使用 Ant Design Vue 的 Space 组件
     const prop = { ...ctx.prop }
 
-    // 将 type 设置为 'a-space'，form-create 会自动识别
-    if (prop.type === 'space') {
-      prop.type = 'a-space'
+    // 读取 compact 配置，决定使用 Space 还是 Space.Compact
+    const props = ctx.rule.props || {}
+    const compact = props.compact || ctx.rule.compact || false
+
+    // 根据 compact 属性决定使用哪个组件
+    if (compact) {
+      // 使用 Space.Compact 紧凑布局
+      prop.type = 'a-space-compact'
+    } else {
+      // 使用普通 Space 组件
+      if (prop.type === 'space') {
+        prop.type = 'a-space'
+      }
     }
 
     // children 会通过 form-create 的机制自动渲染
@@ -85,7 +95,7 @@ export default {
     return ctx.vNode.col(
       { props: { span: 24 } },
       {
-        default: () => [ctx.vNode.make('a-space', prop, childrenNodes)]
+        default: () => [ctx.vNode.make(prop.type, prop, childrenNodes)]
       }
     )
   }