@longhongguo/form-create-ant-design-vue 3.2.52 → 3.2.54

package/package.json

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

package/src/core/maker.js

@@ -98,6 +98,10 @@ function useText(maker) {
   maker.text = creatorFactory('text')
 }
 
+function useFlex(maker) {
+  maker.flex = creatorFactory('flex')
+}
+
 useAlias(maker)
 useSlider(maker)
 useFrame(maker)
@@ -106,5 +110,6 @@ useSelect(maker)
 useCusStoreSelect(maker)
 useCusUserSelect(maker)
 useText(maker)
+useFlex(maker)
 
 export default maker

package/src/parsers/flex.js

@@ -0,0 +1,59 @@
+export default {
+  name: 'flex',
+  mergeProp(ctx) {
+    // 从 props 中读取 flex 布局配置
+    const props = ctx.rule.props || {}
+
+    // 获取 flex 布局相关配置
+    const flexDirection = props.flexDirection || ctx.rule.flexDirection || 'row'
+    const flexWrap = props.flexWrap || ctx.rule.flexWrap || 'nowrap'
+    const justifyContent =
+      props.justifyContent || ctx.rule.justifyContent || 'flex-start'
+    const alignItems = props.alignItems || ctx.rule.alignItems || 'flex-start'
+    const alignContent =
+      props.alignContent || ctx.rule.alignContent || 'flex-start'
+
+    // 将 flex 样式设置到 ctx.prop.props.style，而不是直接修改 ctx.rule.style
+    // 这样可以避免触发递归更新
+    if (!ctx.prop.props) {
+      ctx.prop.props = {}
+    }
+
+    // 获取现有的 style（来自 rule.style 或 prop.props.style）
+    const existingStyle = ctx.rule.style || ctx.prop.props.style || {}
+
+    // 合并 flex 样式和现有样式
+    const flexStyle = {
+      display: 'flex',
+      flexDirection,
+      flexWrap,
+      justifyContent,
+      alignItems,
+      alignContent,
+      ...existingStyle
+    }
+
+    // 设置到 prop.props.style，这样不会触发 rule 的响应式更新
+    ctx.prop.props.style = flexStyle
+
+    // 确保 children 存在
+    if (!ctx.rule.children) {
+      ctx.rule.children = []
+    }
+  },
+  render(children, ctx) {
+    // 复制 prop，避免修改原始对象
+    const prop = { ...ctx.prop }
+
+    // 确保 type 是 'div'
+    if (prop.type === 'flex') {
+      prop.type = 'div'
+    }
+
+    // style 已经在 mergeProp 中设置到 prop.props.style 了，直接使用
+    // children 会通过 form-create 的机制自动渲染
+    const childrenNodes = children || []
+
+    return ctx.vNode.make('div', prop, childrenNodes)
+  }
+}

package/src/parsers/index.js

@@ -13,6 +13,7 @@ import rangePicker from './rangePicker'
 import timeRangePicker from './timeRangePicker'
 import cusStoreSelect from './cusStoreSelect'
 import cusUserSelect from './cusUserSelect'
+import flex from './flex'
 
 export default [
   checkbox,
@@ -29,5 +30,6 @@ export default [
   cascader,
   row,
   cusStoreSelect,
-  cusUserSelect
+  cusUserSelect,
+  flex
 ]

package/src/parsers/text.js

@@ -6,13 +6,6 @@ export default {
   // 设置 loadChildren 为 false，避免 children 被当作子组件处理
   // text 的 children 只是简单的文本内容，不需要作为子组件加载
   loadChildren: false,
-  // 添加 init 方法，用于调试确认 parser 是否被使用
-  init(ctx) {
-    console.log(
-      '[Text Parser] Text parser initialized for rule:',
-      ctx.rule.field || ctx.rule.name || 'unnamed'
-    )
-  },
   // 组件挂载后，手动触发一次 loadData 更新，确保表单数据准备好后再获取初始值
   mounted(ctx) {
     // 如果是动态绑定的 Text 组件，在挂载后手动解析模板并更新值
@@ -31,60 +24,29 @@ export default {
 
             // 如果是模板模式，手动解析模板字符串
             if (template) {
-              // 先获取所有表单数据，用于调试
               const formData = ctx.$handle.api.formData()
-              console.log('[Text Parser] Current form data:', formData)
-
               // 使用 loadStrVar 解析模板，传入一个 get 函数来获取表单数据
               value = ctx.$handle.loadStrVar(
                 template,
                 (field) => {
                   // 使用 api.getValue 获取表单字段值
                   const val = ctx.$handle.api.getValue(field)
-                  console.log(
-                    '[Text Parser] Getting field value:',
-                    field,
-                    '=',
-                    val,
-                    'type:',
-                    typeof val
-                  )
                   // 如果 getValue 返回 undefined，尝试从 formData 直接获取
                   if (
                     val === undefined &&
                     formData &&
                     formData[field] !== undefined
                   ) {
-                    console.log(
-                      '[Text Parser] Fallback to formData:',
-                      field,
-                      '=',
-                      formData[field]
-                    )
                     return formData[field]
                   }
                   return val
                 },
                 null
               )
-              console.log(
-                '[Text Parser] Manually parsed template:',
-                template,
-                'result:',
-                value,
-                'type:',
-                typeof value
-              )
             }
             // 如果是字段绑定模式，直接获取字段值
             else if (bindField) {
               value = ctx.$handle.api.getValue(bindField) || ''
-              console.log(
-                '[Text Parser] Manually got field value:',
-                bindField,
-                'result:',
-                value
-              )
             }
 
             // 更新 rule.children（转换为字符串）
@@ -96,19 +58,9 @@ export default {
               // 触发同步和刷新
               ctx.$handle.api.sync(ctx.rule)
               ctx.$handle.refresh()
-              console.log(
-                '[Text Parser] Updated rule.children to:',
-                ctx.rule.children,
-                'value:',
-                value
-              )
-            } else {
-              console.log(
-                '[Text Parser] Value is null/undefined, not updating children'
-              )
             }
           } catch (e) {
-            console.error('[Text Parser] Error in mounted hook:', e)
+            // 静默处理错误
           }
         }
       }, 500) // 增加延迟，确保表单数据完全准备好
@@ -146,25 +98,11 @@ export default {
           })
           .join('')
 
-        // 添加调试日志，确认 renderChildren 是否被重新执行
-        console.log(
-          '[Text Parser] renderChildren default() called, text:',
-          text,
-          'for rule:',
-          ctx.rule.field || ctx.rule.name || 'unnamed'
-        )
-
         return text || ''
       }
     }
   },
   mergeProp(ctx) {
-    console.log(
-      '[Text Parser] mergeProp called for rule:',
-      ctx.rule.field || ctx.rule.name || 'unnamed',
-      'type:',
-      ctx.rule.type
-    )
     // 确保没有 field 的组件能正常显示
     // 如果 prop.native 未设置，默认设置为 false，让组件被 makeWrap 包装（这样可以显示 title）
     // 但如果需要直接渲染，可以设置 native: true
@@ -217,40 +155,15 @@ export default {
       )
       if (!exists) {
         ctx.rule.effect.loadData.push(loadDataConfig)
-        console.log(
-          '[Text Parser] Added loadData config (field mode):',
-          loadDataConfig,
-          'to effect.loadData:',
-          ctx.rule.effect.loadData,
-          'rule effect:',
-          ctx.rule.effect,
-          'ctx:',
-          ctx
-        )
         // 手动触发 effect 来确保 loadData provider 被调用
         // 使用 effect 方法，它会正确设置 ctx 和 input
         if (ctx.$handle && ctx.$handle.effect) {
-          console.log(
-            '[Text Parser] Manually calling effect(ctx, "loaded") for loadData (field)'
-          )
           ctx.$handle.effect(ctx, 'loaded')
-        } else {
-          console.log(
-            '[Text Parser] ctx.$handle.effect not available:',
-            !!ctx.$handle,
-            !!ctx.$handle?.effect
-          )
         }
       }
     }
     // 如果配置了 template（模板字符串），支持多个字段绑定
     else if (bindMode === 'template' && template) {
-      console.log(
-        '[Text Parser] Setting up template binding:',
-        template,
-        'for rule:',
-        ctx.rule.field || ctx.rule.name || 'unnamed'
-      )
       const loadDataConfig = {
         template: template,
         to: 'child',
@@ -273,21 +186,8 @@ export default {
       )
       if (!exists) {
         ctx.rule.effect.loadData.push(loadDataConfig)
-        console.log(
-          '[Text Parser] Added loadData config:',
-          loadDataConfig,
-          'to effect.loadData:',
-          ctx.rule.effect.loadData,
-          'rule effect:',
-          ctx.rule.effect,
-          'ctx:',
-          ctx
-        )
         // 手动触发 effect 来确保 loadData provider 被调用
         if (ctx.$handle && ctx.$handle.effect) {
-          console.log(
-            '[Text Parser] Manually calling effect(ctx, "loaded") for loadData (template)'
-          )
           ctx.$handle.effect(ctx, 'loaded')
           // 同时手动添加 watch，监听 effect.loadData 的变化
           // 这样当 effect.loadData 被修改时，也会触发 provider
@@ -298,26 +198,13 @@ export default {
               watch(
                 loadDataRef,
                 (newVal, oldVal) => {
-                  console.log(
-                    '[Text Parser] effect.loadData changed, triggering watch',
-                    newVal,
-                    oldVal
-                  )
                   ctx.$handle.effect(ctx, 'watch', { loadData: newVal })
                 },
                 { deep: true }
               )
             )
           }
-        } else {
-          console.log(
-            '[Text Parser] ctx.$handle.effect not available:',
-            !!ctx.$handle,
-            !!ctx.$handle?.effect
-          )
         }
-      } else {
-        console.log('[Text Parser] loadData config already exists, skipping')
       }
     }
     // 静态模式：使用 formCreateChild 或 children 作为内容
@@ -356,27 +243,9 @@ export default {
           ctx.rule.children = [' ']
         }
       }
-      console.log(
-        '[Text Parser] Initialized children for dynamic binding:',
-        ctx.rule.children,
-        'bindMode:',
-        bindMode
-      )
     }
   },
   render(children, ctx) {
-    console.log(
-      '[Text Parser] render called for rule:',
-      ctx.rule.field || ctx.rule.name || 'unnamed',
-      'children:',
-      children,
-      'prop:',
-      ctx.prop,
-      'hidden:',
-      ctx.prop?.hidden,
-      'display:',
-      ctx.prop?.display
-    )
     // text 组件使用 div 渲染，内容来自 children
     // 使用 children.default() 获取响应式内容，参考 html parser 的实现
 
@@ -386,9 +255,7 @@ export default {
     if (children && typeof children.default === 'function') {
       try {
         text = children.default() || ''
-        console.log('[Text Parser] text content:', text)
       } catch (e) {
-        console.warn('Text component render children error:', e)
         text = ''
       }
     }
@@ -416,7 +283,6 @@ export default {
     // 直接使用 vNode.make 渲染 div，文本作为子节点
     // 即使 text 为空，也传递 [text] 确保渲染出 div
     const vnode = ctx.vNode.make('div', prop, [text])
-    console.log('[Text Parser] created vnode:', vnode)
     return vnode
   }
 }

package/types/maker.d.ts

@@ -64,7 +64,8 @@ declare enum MakerName {
   'cusStoreSelect',
   'storeSelect',
   'cusUserSelect',
-  'userSelect'
+  'userSelect',
+  'flex'
 }
 
 type Maker = {