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

package/package.json

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

@@ -56,29 +56,19 @@ export default {
       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 || []
@@ -92,38 +82,17 @@ export default {
                   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)
@@ -133,9 +102,6 @@ export default {
             if (fetchData) {
               // 关键：在 fetchData 上设置，就像 effect.fetch 那样
               deepSet(fetchData, 'props.options', newOptions)
-              console.log(
-                '[Cascader updateOptions] deepSet(fetchData, props.options) 完成'
-              )
             }
 
             // 同时直接更新 props.options（这是最终传递给组件的值）
@@ -151,38 +117,25 @@ export default {
               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,
@@ -191,20 +144,14 @@ export default {
             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
         }
       }

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 = {