@longhongguo/form-create-ant-design-vue 3.2.66 → 3.2.68

package/package.json

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

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

package/src/core/maker.js

@@ -106,6 +106,10 @@ function useSpace(maker) {
   maker.space = creatorFactory('space')
 }
 
+function useSpin(maker) {
+  maker.spin = creatorFactory('spin')
+}
+
 useAlias(maker)
 useSlider(maker)
 useFrame(maker)
@@ -116,5 +120,6 @@ useCusUserSelect(maker)
 useText(maker)
 useFlex(maker)
 useSpace(maker)
+useSpin(maker)
 
 export default maker

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,144 @@ 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) {
+          if (!selectedOptions || selectedOptions.length === 0) return
+
+          const targetOption = selectedOptions[selectedOptions.length - 1]
+
+          if (targetOption?.isLeaf === true) {
+            return
+          }
+
+          const options = props.options || []
+
+          // 创建 updateOptions 函数，完全按照 effect.fetch 的方式
+          // 关键：effect.fetch 使用 deepSet(inject.getProp(), 'props.options', val) 然后 api.sync(rule)
+          const 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
+              )
+            }
+
+            const newOptions = currentOptions.map((item, index) => {
+              // 如果是 targetOption，创建包含所有修改的新对象
+              if (index === targetIndex && targetOption) {
+                const newTarget = { ...targetOption }
+                return newTarget
+              }
+              // 其他对象创建新引用（浅拷贝即可）
+              return { ...item }
+            })
+
+            // 完全按照 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)
+            }
+
+            // 同时直接更新 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
+            }
+
+            // 调用 api.sync 触发更新，就像 effect.fetch 那样
+            if (api && rule) {
+              api.sync(rule)
+            }
+
+            // 刷新组件
+            if (ctxRef.$handle) {
+              ctxRef.$handle.refresh()
+            }
+          }
+
+          // 关键：在调用用户函数之前，立即设置 loading 并更新
+          // 这样确保 loading 状态能立即显示
+          if (targetOption) {
+            targetOption.loading = true
+            updateOptions()
+          }
+
+          // 调用用户函数
+          const result = parsedFn.call(
+            this,
+            selectedOptions,
+            options,
+            updateOptions,
+            api,
+            rule
+          )
+
+          // 如果用户函数返回 Promise，等待完成
+          if (result && typeof result.then === 'function') {
+            return result.finally(() => {
+              updateOptions()
+            })
+          }
+
+          return result
+        }
+      }
+    }
   },
   render(children, ctx) {
     // 检测 loading 状态（与 mergeProp 中的逻辑保持一致）

package/src/parsers/index.js

@@ -15,6 +15,7 @@ import cusStoreSelect from './cusStoreSelect'
 import cusUserSelect from './cusUserSelect'
 import flex from './flex'
 import space from './space'
+import spin from './spin'
 
 export default [
   checkbox,
@@ -33,5 +34,6 @@ export default [
   cusStoreSelect,
   cusUserSelect,
   flex,
-  space
+  space,
+  spin
 ]

package/src/parsers/spin.js

@@ -0,0 +1,113 @@
+import { hasProperty } from '@form-create/utils/lib/type'
+
+export default {
+  name: 'spin',
+  mergeProp(ctx) {
+    // 确保不显示标题
+    if (!ctx.rule.wrap) {
+      ctx.rule.wrap = {}
+    }
+    ctx.rule.wrap.title = false
+    
+    const props = ctx.prop.props || {}
+    if (!hasProperty(props, 'spinning')) {
+      props.spinning = ctx.prop.props?.spinning ?? ctx.rule.props?.spinning ?? false
+    }
+
+    // 支持从多个位置读取配置
+    const bindField =
+      ctx.rule.bindField || ctx.rule.props?.bindField || ctx.prop.props?.bindField
+    let bindMode =
+      ctx.rule.bindMode || ctx.rule.props?.bindMode || ctx.prop.props?.bindMode
+
+    // 如果没有设置 bindMode，根据是否有 bindField 自动判断
+    if (!bindMode) {
+      if (bindField) {
+        bindMode = 'field'
+      } else {
+        bindMode = 'static'
+      }
+    }
+
+    // 如果配置了 bindField（绑定单个字段），使用 loadData 来实现动态绑定
+    if (bindMode === 'field' && bindField) {
+      const loadDataConfig = {
+        attr: bindField,
+        to: 'props.spinning',
+        modify: true,
+        wait: 300,
+        watch: true
+      }
+
+      // 添加到 effect 中（避免重复添加）
+      if (!ctx.rule.effect) {
+        ctx.rule.effect = {}
+      }
+      if (!ctx.rule.effect.loadData) {
+        ctx.rule.effect.loadData = []
+      }
+      // 检查是否已存在相同的配置，避免重复添加
+      const exists = ctx.rule.effect.loadData.some(
+        (item) => item.attr === bindField && item.to === 'props.spinning'
+      )
+      if (!exists) {
+        ctx.rule.effect.loadData.push(loadDataConfig)
+        // 手动触发 effect 来确保 loadData provider 被调用
+        if (ctx.$handle && ctx.$handle.effect) {
+          ctx.$handle.effect(ctx, 'loaded')
+        }
+      }
+    }
+
+    // 确保子组件不被 a-col 包装
+    if (ctx.rule.children && Array.isArray(ctx.rule.children)) {
+      ctx.rule.children.forEach((child) => {
+        if (child && typeof child === 'object' && child.col !== false) {
+          child.col = false
+        }
+      })
+    }
+  },
+  render(children, ctx) {
+    // 获取 spinning 状态
+    const props = ctx.prop.props || {}
+    const spinning = props.spinning || false
+
+    // 设置组件类型为 a-spin
+    if (!ctx.prop.props) {
+      ctx.prop.props = {}
+    }
+
+    // 映射 props
+    ctx.prop.props.spinning = spinning
+
+    // 如果有 tip，设置 tip prop
+    const tip = ctx.rule.tip || ctx.rule.props?.tip || ctx.prop.props?.tip
+    if (tip) {
+      ctx.prop.props.tip = tip
+    }
+
+    // 如果有 delay，设置 delay prop
+    const delay = ctx.rule.delay || ctx.rule.props?.delay || ctx.prop.props?.delay
+    if (delay != null) {
+      ctx.prop.props.delay = delay
+    }
+
+    // 如果有 size，设置 size prop
+    const size = ctx.rule.size || ctx.rule.props?.size || ctx.prop.props?.size
+    if (size) {
+      ctx.prop.props.size = size
+    }
+
+    // 设置类型为 a-spin
+    ctx.prop.type = 'a-spin'
+
+    // 如果有子组件，渲染子组件，否则渲染默认内容
+    const childrenNodes = children && Array.isArray(children) && children.length > 0
+      ? children
+      : null
+
+    return ctx.vNode.make('a-spin', ctx.prop, childrenNodes)
+  }
+}
+

package/types/maker.d.ts

@@ -66,7 +66,8 @@ declare enum MakerName {
   'cusUserSelect',
   'userSelect',
   'flex',
-  'space'
+  'space',
+  'spin'
 }
 
 type Maker = {