@longhongguo/form-create-ant-design-vue 3.2.51 → 3.2.53

package/package.json

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

package/src/components/CusSelect/index.vue

@@ -198,6 +198,11 @@ export default defineComponent({
       type: Array,
       default: () => []
     },
+    // 源选项列表
+    sourceItems: {
+      type: Array,
+      default: () => []
+    },
     // 是否多选
     multiple: {
       type: Boolean,
@@ -244,7 +249,7 @@ export default defineComponent({
       default: true
     }
   },
-  emits: ['update:modelValue', 'change'],
+  emits: ['update:modelValue', 'update:sourceItems', 'change'],
   computed: {
     // 统一处理值（支持 v-model），确保始终是对象数组格式
     currentValue: {
@@ -424,6 +429,12 @@ export default defineComponent({
           }
           return item !== itemValue
         })
+        const sourceItems = this.sourceItems.filter((item) => {
+          return !newValue.some((newItem) => {
+            return newItem[this.valueKey] === item[this.valueKey]
+          })
+        })
+        this.$emit('update:sourceItems', sourceItems)
         this.currentValue = newValue
       }
     },
@@ -433,6 +444,12 @@ export default defineComponent({
       event.stopPropagation()
       // 统一设置为空数组
       this.currentValue = []
+      const sourceItems = this.sourceItems.filter((item) => {
+        return !this.currentValue.some((newItem) => {
+          return newItem[this.valueKey] === item[this.valueKey]
+        })
+      })
+      this.$emit('update:sourceItems', sourceItems)
     }
   }
 })

package/src/components/CusStoreSelect/index.vue

@@ -3,6 +3,7 @@
     <CusSelect
       :model-value="modelValue"
       :options="mergedOptions"
+      v-model:source-items="sourceItems"
       :multiple="multiple"
       :max-tag-count="maxTagCount"
       :placeholder="placeholder"
@@ -113,7 +114,8 @@ export default defineComponent({
       // 存储待处理的回调函数
       pendingCallbacks: {},
       // 内部维护的选项列表（合并父窗口返回的源对象）
-      internalOptions: []
+      internalOptions: [],
+      sourceItems: []
     }
   },
   computed: {
@@ -279,6 +281,7 @@ export default defineComponent({
           this.mergeOptions(sourceItems)
         }
 
+        this.sourceItems = sourceItems
         this.handleUpdate(value)
         this.handleChange(value)
       }
@@ -344,10 +347,10 @@ export default defineComponent({
       this.$emit(
         'change',
         value,
-        this.internalOptions && this.internalOptions.length > 0
+        this.sourceItems && this.sourceItems.length > 0
           ? this.multiple
-            ? this.internalOptions
-            : this.internalOptions[0]
+            ? this.sourceItems
+            : this.sourceItems[0]
           : this.multiple
           ? []
           : null

package/src/components/CusUserSelect/index.vue

@@ -3,6 +3,7 @@
     <CusSelect
       :model-value="modelValue"
       :options="mergedOptions"
+      v-model:source-items="sourceItems"
       :multiple="multiple"
       :max-tag-count="maxTagCount"
       :placeholder="placeholder"
@@ -116,7 +117,8 @@ export default defineComponent({
       // 存储待处理的回调函数
       pendingCallbacks: {},
       // 内部维护的选项列表（合并父窗口返回的源对象）
-      internalOptions: []
+      internalOptions: [],
+      sourceItems: []
     }
   },
   computed: {
@@ -284,6 +286,8 @@ export default defineComponent({
           this.mergeOptions(sourceItems)
         }
 
+        this.sourceItems = sourceItems
+
         this.handleUpdate(value)
         this.handleChange(value)
       }
@@ -349,10 +353,10 @@ export default defineComponent({
       this.$emit(
         'change',
         value,
-        this.internalOptions && this.internalOptions.length > 0
+        this.sourceItems && this.sourceItems.length > 0
           ? this.multiple
-            ? this.internalOptions
-            : this.internalOptions[0]
+            ? this.sourceItems
+            : this.sourceItems[0]
           : this.multiple
           ? []
           : null

package/src/core/maker.js

@@ -94,6 +94,10 @@ function useCusUserSelect(maker) {
   maker.userSelect = maker.cusUserSelect
 }
 
+function useText(maker) {
+  maker.text = creatorFactory('text')
+}
+
 useAlias(maker)
 useSlider(maker)
 useFrame(maker)
@@ -101,5 +105,6 @@ useUpload(maker)
 useSelect(maker)
 useCusStoreSelect(maker)
 useCusUserSelect(maker)
+useText(maker)
 
 export default maker

package/src/parsers/index.js

@@ -4,6 +4,7 @@ import select from './select'
 import cascader from './cascader'
 import datePicker from './datePicker'
 import hidden from './hidden'
+import text from './text' // text parser 必须在 input 之前注册，避免被 input 的 maker.text 覆盖
 import input from './input'
 import timePicker from './timePicker'
 import tree from './tree'
@@ -18,6 +19,7 @@ export default [
   datePicker,
   rangePicker,
   hidden,
+  text, // text parser 必须在 input 之前，确保 type: 'text' 时优先匹配 text parser
   input,
   timePicker,
   timeRangePicker,

package/src/parsers/text.js

@@ -0,0 +1,288 @@
+import is from '@form-create/utils/lib/type'
+import { watch, toRef } from 'vue'
+
+export default {
+  name: 'text',
+  // 设置 loadChildren 为 false，避免 children 被当作子组件处理
+  // text 的 children 只是简单的文本内容，不需要作为子组件加载
+  loadChildren: false,
+  // 组件挂载后，手动触发一次 loadData 更新，确保表单数据准备好后再获取初始值
+  mounted(ctx) {
+    // 如果是动态绑定的 Text 组件，在挂载后手动解析模板并更新值
+    const props = ctx.rule.props || {}
+    const bindField =
+      ctx.rule.bindField || props.bindField || ctx.prop.props?.bindField
+    const template =
+      ctx.rule.template || props.template || ctx.prop.props?.template
+
+    if (template || bindField) {
+      // 延迟执行，确保表单数据已经准备好
+      setTimeout(() => {
+        if (ctx.$handle && ctx.$handle.api) {
+          try {
+            let value = ''
+
+            // 如果是模板模式，手动解析模板字符串
+            if (template) {
+              const formData = ctx.$handle.api.formData()
+              // 使用 loadStrVar 解析模板，传入一个 get 函数来获取表单数据
+              value = ctx.$handle.loadStrVar(
+                template,
+                (field) => {
+                  // 使用 api.getValue 获取表单字段值
+                  const val = ctx.$handle.api.getValue(field)
+                  // 如果 getValue 返回 undefined，尝试从 formData 直接获取
+                  if (
+                    val === undefined &&
+                    formData &&
+                    formData[field] !== undefined
+                  ) {
+                    return formData[field]
+                  }
+                  return val
+                },
+                null
+              )
+            }
+            // 如果是字段绑定模式，直接获取字段值
+            else if (bindField) {
+              value = ctx.$handle.api.getValue(bindField) || ''
+            }
+
+            // 更新 rule.children（转换为字符串）
+            if (value != null) {
+              if (!ctx.rule.children) {
+                ctx.rule.children = []
+              }
+              ctx.rule.children[0] = String(value)
+              // 触发同步和刷新
+              ctx.$handle.api.sync(ctx.rule)
+              ctx.$handle.refresh()
+            }
+          } catch (e) {
+            // 静默处理错误
+          }
+        }
+      }, 500) // 增加延迟，确保表单数据完全准备好
+    }
+  },
+  // 处理 children 的渲染，将 children 数组转换为可渲染的内容
+  renderChildren(children, ctx) {
+    // 使用 computed 确保响应式更新
+    // 每次 rule.children 变化时，都会重新计算
+    return {
+      default: () => {
+        // 每次都重新从 rule.children 获取最新值（loadData 会更新这个值）
+        // 不要使用闭包中的 children 参数，因为它可能是旧值
+        let currentChildren = ctx.rule?.children
+
+        // 如果 rule.children 不存在，才使用传入的 children 参数（初始值）
+        if (!currentChildren) {
+          currentChildren = children
+        }
+
+        // 确保是数组
+        const childrenArray = Array.isArray(currentChildren)
+          ? currentChildren
+          : [currentChildren]
+
+        // 过滤并转换字符串，参考 html parser 的实现
+        const text = childrenArray
+          .filter((v) => v !== null && v !== undefined)
+          .map((v) => {
+            if (is.String(v)) {
+              return v
+            }
+            // 如果是对象或其他类型，转换为字符串
+            return String(v)
+          })
+          .join('')
+
+        return text || ''
+      }
+    }
+  },
+  mergeProp(ctx) {
+    // 确保没有 field 的组件能正常显示
+    // 如果 prop.native 未设置，默认设置为 false，让组件被 makeWrap 包装（这样可以显示 title）
+    // 但如果需要直接渲染，可以设置 native: true
+
+    // 支持从多个位置读取配置：
+    // 1. ctx.rule.bindField / ctx.rule.template（直接在 rule 中）
+    // 2. ctx.rule.props.bindField / ctx.rule.props.template（在 props 中）
+    // 3. ctx.prop.props.bindField / ctx.prop.props.template（在 prop.props 中）
+    const props = ctx.rule.props || {}
+    const bindField =
+      ctx.rule.bindField || props.bindField || ctx.prop.props?.bindField
+    const template =
+      ctx.rule.template || props.template || ctx.prop.props?.template
+    let bindMode =
+      ctx.rule.bindMode || props.bindMode || ctx.prop.props?.bindMode
+
+    // 如果没有设置 bindMode，根据是否有 bindField 或 template 自动判断
+    if (!bindMode) {
+      if (template) {
+        bindMode = 'template'
+      } else if (bindField) {
+        bindMode = 'field'
+      } else {
+        bindMode = 'static'
+      }
+    }
+
+    // 如果配置了 bindField（绑定单个字段），使用 loadData 来实现动态绑定
+    if (bindMode === 'field' && bindField) {
+      const loadDataConfig = {
+        attr: bindField,
+        to: 'child',
+        modify: true,
+        // 增加 debounce 延迟，避免频繁更新导致循环
+        wait: 300,
+        // 确保 watch 开启，但通过 debounce 控制频率
+        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 === 'child'
+      )
+      if (!exists) {
+        ctx.rule.effect.loadData.push(loadDataConfig)
+        // 手动触发 effect 来确保 loadData provider 被调用
+        // 使用 effect 方法，它会正确设置 ctx 和 input
+        if (ctx.$handle && ctx.$handle.effect) {
+          ctx.$handle.effect(ctx, 'loaded')
+        }
+      }
+    }
+    // 如果配置了 template（模板字符串），支持多个字段绑定
+    else if (bindMode === 'template' && template) {
+      const loadDataConfig = {
+        template: template,
+        to: 'child',
+        modify: true,
+        // 增加 debounce 延迟，避免频繁更新导致循环
+        wait: 300,
+        // 确保 watch 开启，但通过 debounce 控制频率
+        watch: true
+      }
+
+      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.template === template && item.to === 'child'
+      )
+      if (!exists) {
+        ctx.rule.effect.loadData.push(loadDataConfig)
+        // 手动触发 effect 来确保 loadData provider 被调用
+        if (ctx.$handle && ctx.$handle.effect) {
+          ctx.$handle.effect(ctx, 'loaded')
+          // 同时手动添加 watch，监听 effect.loadData 的变化
+          // 这样当 effect.loadData 被修改时，也会触发 provider
+          if (!ctx._textLoadDataWatched) {
+            ctx._textLoadDataWatched = true
+            const loadDataRef = toRef(ctx.rule.effect, 'loadData')
+            ctx.watch.push(
+              watch(
+                loadDataRef,
+                (newVal, oldVal) => {
+                  ctx.$handle.effect(ctx, 'watch', { loadData: newVal })
+                },
+                { deep: true }
+              )
+            )
+          }
+        }
+      }
+    }
+    // 静态模式：使用 formCreateChild 或 children 作为内容
+    // formCreateChild 会作为 children[0] 渲染，如果已有 children，也会正常渲染
+
+    // 如果配置了 formCreateChild，将其转换为 children
+    if (ctx.rule.formCreateChild != null && !ctx.rule.children) {
+      ctx.rule.children = [ctx.rule.formCreateChild]
+    }
+
+    // 确保 children 存在（如果没有设置，默认为空数组）
+    if (!ctx.rule.children) {
+      ctx.rule.children = []
+    }
+
+    // 对于动态绑定的情况，初始化时设置一个占位符，确保组件能被渲染
+    // loadData 会在初始化后立即执行一次，更新这个值
+    if (
+      (bindMode === 'field' && bindField) ||
+      (bindMode === 'template' && template)
+    ) {
+      // 如果 children 是空数组或未设置，设置为一个非空字符串
+      // 这样确保组件会被渲染，然后 loadData 会更新内容
+      if (
+        !ctx.rule.children ||
+        (Array.isArray(ctx.rule.children) && ctx.rule.children.length === 0)
+      ) {
+        // 对于 template 模式，先不设置占位符，等待 loadData 执行
+        // 因为如果设置了占位符，可能会覆盖 loadData 的结果
+        if (bindMode === 'template') {
+          // template 模式下，等待 loadData 执行后更新
+          // 但为了确保组件能渲染，至少设置一个空字符串
+          ctx.rule.children = ['']
+        } else {
+          // field 模式下，设置一个空格字符串作为占位符
+          ctx.rule.children = [' ']
+        }
+      }
+    }
+  },
+  render(children, ctx) {
+    // text 组件使用 div 渲染，内容来自 children
+    // 使用 children.default() 获取响应式内容，参考 html parser 的实现
+
+    // 获取文本内容（children.default() 会从 renderChildren 返回的响应式函数中获取）
+    // renderChildren 返回的 default 函数会从 ctx.rule.children 获取最新值
+    let text = ''
+    if (children && typeof children.default === 'function') {
+      try {
+        text = children.default() || ''
+      } catch (e) {
+        text = ''
+      }
+    }
+
+    // 确保 text 是字符串
+    if (text == null || text === undefined) {
+      text = ''
+    } else {
+      text = String(text)
+    }
+
+    // 复制 prop，避免修改原始对象
+    const prop = { ...ctx.prop }
+    if (!prop.props) {
+      prop.props = {}
+    }
+
+    // 确保 type 是 'div'
+    if (prop.type === 'text') {
+      prop.type = 'div'
+    }
+
+    delete prop.props.innerHTML
+
+    // 直接使用 vNode.make 渲染 div，文本作为子节点
+    // 即使 text 为空，也传递 [text] 确保渲染出 div
+    const vnode = ctx.vNode.make('div', prop, [text])
+    return vnode
+  }
+}