@longhongguo/form-create-ant-design-vue 3.3.9 → 3.3.10

package/package.json

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

package/src/parsers/cascader.js

@@ -49,11 +49,17 @@ export default {
             )
           }
         } catch (e) {
-          console.error('Failed to parse loadData:', e)
+          // 解析 loadData 失败，静默处理
         }
       }
 
+      // 保存原始的 parsedFn，用于回显时调用（需要在 if 块外定义）
+      let originalLoadDataFn = null
+
       if (is.Function(parsedFn)) {
+        // 保存原始的 parsedFn，用于回显时调用
+        originalLoadDataFn = parsedFn
+
         // 包装 loadData 函数
         props.loadData = function (selectedOptions) {
           if (!selectedOptions || selectedOptions.length === 0) return
@@ -75,27 +81,38 @@ export default {
 
             // 递归查找并更新选项的函数
             // 通过 value 路径来查找，避免引用问题
-            const updateOptionRecursive = (optionsList, pathValues, depth, newChildren) => {
+            const updateOptionRecursive = (
+              optionsList,
+              pathValues,
+              depth,
+              newChildren
+            ) => {
               if (!pathValues || pathValues.length === 0) {
                 // 如果没有路径，直接返回深拷贝的选项
-                return optionsList.map(item => ({
+                return optionsList.map((item) => ({
                   ...item,
-                  children: item.children ? item.children.map(child => ({ ...child })) : undefined
+                  children: item.children
+                    ? item.children.map((child) => ({ ...child }))
+                    : undefined
                 }))
               }
-              
+
               const currentValue = pathValues[depth]
               const isLast = depth === pathValues.length - 1
-              
-              return optionsList.map(item => {
+
+              return optionsList.map((item) => {
                 const newItem = { ...item }
-                
+
                 // 如果当前项匹配路径的当前层级值
-                if ((item.value !== undefined && item.value === currentValue) || 
-                    (item.id !== undefined && item.id === currentValue)) {
+                if (
+                  (item.value !== undefined && item.value === currentValue) ||
+                  (item.id !== undefined && item.id === currentValue)
+                ) {
                   if (isLast) {
                     // 是最后一个值（目标项），更新 children
-                    newItem.children = newChildren ? [...newChildren] : undefined
+                    newItem.children = newChildren
+                      ? [...newChildren]
+                      : undefined
                     newItem.loading = false
                     // 保持其他属性不变，但深拷贝 children
                     return newItem
@@ -116,7 +133,7 @@ export default {
                     return newItem
                   }
                 }
-                
+
                 // 不匹配的项，也需要递归处理其 children（以防路径在其他分支）
                 if (item.children && item.children.length > 0) {
                   newItem.children = updateOptionRecursive(
@@ -129,14 +146,14 @@ export default {
                   // 如果没有 children，深拷贝基本结构
                   newItem.children = undefined
                 }
-                
+
                 return newItem
               })
             }
 
             // 从 selectedOptions 中提取 value 路径
-            const pathValues = selectedOptions.map(opt => opt.value || opt.id)
-            
+            const pathValues = selectedOptions.map((opt) => opt.value || opt.id)
+
             // 使用递归函数更新选项（从第0层开始）
             const newOptions = updateOptionRecursive(
               currentOptions,
@@ -206,6 +223,159 @@ export default {
           return result
         }
       }
+
+      // 处理回显时的数据加载 - 当 value 变化时触发（包括初始值和 setValue）
+      // 使用一个函数来处理，可以在多个地方调用
+      const triggerLoadDataForValue = (valueToLoad) => {
+        if (
+          !valueToLoad ||
+          !Array.isArray(valueToLoad) ||
+          valueToLoad.length <= 1 ||
+          !props.loadData ||
+          typeof props.loadData !== 'function'
+        ) {
+          return
+        }
+
+        // 延迟执行，等待 effect.fetch 完成第一级数据加载
+        const timerKey = `_loadDataTimer_${ctx.rule._fc_id || Date.now()}`
+        if (ctx.rule[timerKey]) {
+          clearTimeout(ctx.rule[timerKey])
+        }
+
+        ctx.rule[timerKey] = setTimeout(() => {
+          let retryCount = 0
+          const maxRetries = 50 // 最多重试50次，即5秒
+
+          const loadInitialData = async () => {
+            retryCount++
+            const fetchData = ctxRef.effectData('fetch')
+
+            // 如果超过最大重试次数，停止
+            if (retryCount > maxRetries) {
+              return
+            }
+
+            // 如果还在加载第一级数据，等待
+            if (fetchData && fetchData.loading === true) {
+              setTimeout(loadInitialData, 100)
+              return
+            }
+
+            let currentOptions = props.options || []
+
+            if (!currentOptions || currentOptions.length === 0) {
+              // 检查 fetchData 中是否有 options
+              if (fetchData && fetchData.props && fetchData.props.options) {
+                currentOptions = fetchData.props.options
+                props.options = currentOptions
+              } else {
+                setTimeout(loadInitialData, 100)
+                return
+              }
+            }
+
+            if (!currentOptions || currentOptions.length === 0) {
+              return
+            }
+
+            // 递归加载缺失的数据
+            const loadMissingData = async (pathValues, startDepth) => {
+              if (startDepth >= pathValues.length - 1) {
+                return
+              }
+
+              // 重新获取最新的 options
+              currentOptions = props.options || []
+
+              // 构建 selectedOptions（从根到当前层级）
+              const selectedOptions = []
+              let currentLevelOptions = currentOptions
+              for (let i = 0; i <= startDepth; i++) {
+                const val = pathValues[i]
+                const option = currentLevelOptions.find(
+                  (opt) => opt.value === val || opt.id === val
+                )
+                if (option) {
+                  selectedOptions.push(option)
+                  currentLevelOptions = option.children || []
+                } else {
+                  return
+                }
+              }
+
+              const currentOption = selectedOptions[startDepth]
+
+              // 如果已经是叶子节点，不需要加载
+              if (currentOption.isLeaf === true) {
+                return
+              }
+
+              // 检查是否需要加载子级数据
+              const nextValue = pathValues[startDepth + 1]
+              if (nextValue === undefined || nextValue === null) {
+                return
+              }
+
+              // 检查是否已有子级数据
+              const hasChildren =
+                currentOption.children &&
+                Array.isArray(currentOption.children) &&
+                currentOption.children.length > 0
+
+              if (!hasChildren) {
+                // 需要触发 loadData 加载
+                // 设置 loading 状态
+                currentOption.loading = true
+
+                try {
+                  const result = props.loadData(selectedOptions)
+
+                  // 如果返回 Promise，等待完成
+                  if (result && typeof result.then === 'function') {
+                    await result
+                  }
+
+                  // 等待数据更新
+                  await new Promise((resolve) => setTimeout(resolve, 300))
+
+                  // 继续加载下一级
+                  if (startDepth + 1 < pathValues.length - 1) {
+                    await loadMissingData(pathValues, startDepth + 1)
+                  }
+                } catch (error) {
+                  currentOption.loading = false
+                }
+              } else {
+                // 已经有 children，直接继续加载下一级
+                await loadMissingData(pathValues, startDepth + 1)
+              }
+            }
+
+            // 开始加载数据
+            loadMissingData(valueToLoad, 0).catch(() => {
+              // 静默处理错误
+            })
+          }
+
+          loadInitialData()
+        }, 500)
+      }
+
+      // 在 mergeProp 中触发（处理初始值和 setValue 的情况）
+      const currentValue = ctx.rule.value
+      // 检查 value 是否变化（通过比较字符串化的值）
+      const valueKey = JSON.stringify(currentValue || [])
+      const lastValueKey = ctx.rule._lastLoadDataValueKey
+
+      if (
+        valueKey !== lastValueKey &&
+        currentValue &&
+        Array.isArray(currentValue)
+      ) {
+        ctx.rule._lastLoadDataValueKey = valueKey
+        triggerLoadDataForValue(currentValue)
+      }
     }
   },
   render(children, ctx) {
@@ -223,5 +393,22 @@ export default {
 
     // 调用默认渲染
     return ctx.$render.defaultRender(ctx, children)
+  },
+  mounted(ctx) {
+    // mounted 时也触发一次，确保初始值能正确加载
+    const value = ctx.rule.value
+    const props = ctx.prop.props
+
+    if (value && Array.isArray(value) && value.length > 1 && props.loadData) {
+      // 延迟一点，确保 mergeProp 已完成
+      setTimeout(() => {
+        const loadDataFn = ctx.prop.props.loadData
+        if (loadDataFn && typeof loadDataFn === 'function') {
+          // 重新触发一次加载逻辑（会通过 mergeProp 中的逻辑处理）
+          // 通过触发 value 变化来触发加载
+          ctx.rule._lastLoadDataValueKey = null
+        }
+      }, 100)
+    }
   }
 }