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

package/package.json

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

package/src/components/FcEditorWrapper.vue

@@ -36,7 +36,15 @@ export default defineComponent({
     uploadImgCustomInsert: [String, Function],
     withCredentials: Boolean,
     // form-create 注入的 API
-    formCreateInject: Object
+    formCreateInject: Object,
+    placeholder: {
+      type: String,
+      default: '请输入正文'
+    },
+    height: {
+      type: [String, Number],
+      default: 300
+    }
   },
   emits: ['update:modelValue'],
   watch: {
@@ -51,6 +59,31 @@ export default defineComponent({
     editorConfig() {
       const config = {}
 
+      // 设置 placeholder
+      if (this.placeholder) {
+        config.placeholder = this.placeholder
+      }
+
+      // 设置高度
+      if (this.height) {
+        // 如果是数字，转换为像素字符串；如果是字符串，直接使用
+        config.height = this.height
+      }
+
+      // 排除不需要的工具栏菜单项
+      // 移除：全屏、代码、表情、删除线、缩进、待办事项、引用、分割线、斜体
+      config.excludeMenus = [
+        'fullScreen', // 全屏
+        'code', // 代码
+        'emoticon', // 表情
+        'strikeThrough', // 删除线
+        'indent', // 缩进
+        'todo', // 待办事项
+        'quote', // 引用
+        'splitLine', // 分割线
+        'italic' // 斜体
+      ]
+
       // 如果设置了 readOnly，配置只读模式
       if (this.readOnly) {
         // readOnly: true // 启用只读模式
@@ -61,6 +94,8 @@ export default defineComponent({
         // 禁用自动聚焦，避免在只读模式下获得焦点
         config.focus = false
         config.autoFocus = false
+        // 只读模式下隐藏 placeholder
+        delete config.placeholder
       }
 
       // 如果设置了 uploadImgServer，配置图片上传

package/src/core/manager.js

@@ -105,6 +105,8 @@ export default {
         // 只读模式允许复制和点击链接，但禁止编辑
         if (ctx.prop.props) {
           ctx.prop.props.readOnly = true
+          // 预览模式和只读模式下隐藏 placeholder
+          delete ctx.prop.props.placeholder
         }
       } else if (
         ctx.rule.type === 'input' &&
@@ -118,6 +120,10 @@ export default {
           ctx.prop.props.autoSize = true
           // 移除 rows 属性，让 autoSize 完全控制高度
           delete ctx.prop.props.rows
+          // 预览模式和只读模式下隐藏 placeholder
+          delete ctx.prop.props.placeholder
+          // 预览模式和只读模式下隐藏字符计数
+          ctx.prop.props.showCount = false
         }
       } else if (ctx.rule.type === 'select') {
         // select 组件在预览模式下使用 disabled 实现只读效果
@@ -126,6 +132,8 @@ export default {
         // 强制设置 disabled = true，覆盖用户可能设置的 disabled: false
         if (ctx.prop.props) {
           ctx.prop.props.disabled = true
+          // 预览模式和只读模式下隐藏 placeholder
+          delete ctx.prop.props.placeholder
           // 如果原本设置了 readOnly，保留这个标记以便 CSS 识别
           if (isReadOnly) {
             // 可以在这里添加一个标记，但 Select 组件不支持 readOnly
@@ -137,6 +145,30 @@ export default {
         // 如果设置了 readOnly，直接使用组件的 readOnly 属性
         if (ctx.prop.props && isReadOnly) {
           ctx.prop.props.readOnly = true
+          // 预览模式和只读模式下隐藏 placeholder
+          delete ctx.prop.props.placeholder
+          // 预览模式和只读模式下隐藏字符计数
+          ctx.prop.props.showCount = false
+        } else if (ctx.prop.props && isPreviewMode) {
+          // 全局预览模式下也隐藏 placeholder
+          delete ctx.prop.props.placeholder
+          // 全局预览模式下隐藏字符计数
+          ctx.prop.props.showCount = false
+        }
+      } else if (
+        ctx.rule.type === 'datePicker' ||
+        ctx.rule.type === 'timePicker' ||
+        ctx.rule.type === 'timeRangePicker' ||
+        ctx.rule.type === 'rangePicker' ||
+        ctx.rule.type === 'cascader'
+      ) {
+        // 日期选择器、时间选择器、级联选择器等组件
+        // 预览模式和只读模式下隐藏 placeholder
+        if (ctx.prop.props) {
+          if (ctx.rule.type === 'cascader') {
+            ctx.prop.props.disabled = true
+          }
+          delete ctx.prop.props.placeholder
         }
       }
     }

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)
+    }
   }
 }