@longhongguo/form-create-ant-design-vue 3.3.4 → 3.3.7

package/src/core/api.js

@@ -292,6 +292,31 @@ export default function extendApi(api, h) {
      * }
      */
     $validator: validator,
-    $moment: moment
+    $moment: moment,
+    /**
+     * 启用或禁用预览模式
+     * 预览模式下：
+     * - 表单 form-item 间距调小
+     * - 组件边框不展示
+     * - 字数限制等提示信息不展示
+     * - 必填标记不展示
+     *
+     * @param {boolean} enabled - 是否启用预览模式，默认为 true
+     * @returns {void}
+     *
+     * @example
+     * // 启用预览模式
+     * this.api.previewMode(true)
+     *
+     * @example
+     * // 禁用预览模式
+     * this.api.previewMode(false)
+     */
+    previewMode(enabled = true) {
+      // 更新 options 中的 preview 配置
+      api.updateOptions({ preview: !!enabled })
+      // 触发刷新，使样式生效
+      api.refresh()
+    }
   }
 }

package/src/core/manager.js

@@ -84,6 +84,37 @@ export default {
       )
     })
 
+    // 预览模式下：对 upload 组件设置 disabled
+    // wangEditor 组件使用只读模式（readOnly），允许复制和点击链接
+    // textarea 组件使用只读模式（readOnly），允许复制和自适应高度
+    // CusSelect 相关组件使用预览模式（通过 CSS 阻止交互，不置灰）
+    if (this.$handle.preview === true) {
+      if (ctx.rule.type === 'upload') {
+        if (ctx.prop.props) {
+          ctx.prop.props.disabled = true
+        }
+      } else if (ctx.rule.type === 'fcEditor') {
+        // wangEditor 使用只读模式，不设置 disabled
+        // 只读模式允许复制和点击链接，但禁止编辑
+        if (ctx.prop.props) {
+          ctx.prop.props.readOnly = true
+        }
+      } else if (
+        ctx.rule.type === 'input' &&
+        ctx.prop.props?.type === 'textarea'
+      ) {
+        // textarea 使用只读模式，不设置 disabled
+        // 只读模式允许复制，但禁止编辑
+        if (ctx.prop.props) {
+          ctx.prop.props.readOnly = true
+          // 完全自适应高度，不限制最大高度
+          ctx.prop.props.autoSize = true
+          // 移除 rows 属性，让 autoSize 完全控制高度
+          delete ctx.prop.props.rows
+        }
+      }
+    }
+
     // 检查父容器是否是 flex 或 space 类型，如果是，自动设置 col: false 避免被 a-col 包装
     // 需要在合并完 col 后再检查，确保能覆盖默认值
     if (ctx.parent && ctx.parent.rule) {

package/src/parsers/accTable.js

@@ -116,29 +116,61 @@ export default {
       allRuleProps: Object.keys(rule.props || {})
     })
 
-    // 初始化列配置
-    if (!hasProperty(props, 'columns')) {
-      let columns = rule.props?.columns || []
-      // Struct 组件返回的是数组对象，直接使用；如果是字符串，尝试解析为 JSON（向后兼容）
-      if (typeof columns === 'string') {
-        try {
-          const parsed = JSON.parse(columns)
-          if (Array.isArray(parsed)) {
-            columns = parsed
-          }
-        } catch (e) {
-          console.warn('accTable columns parse error:', e)
-          columns = []
+    // 处理列配置 - 每次都要更新，确保 width 等属性变化时能生效
+    let columns = rule.props?.columns || []
+    // Struct 组件返回的是数组对象，直接使用；如果是字符串，尝试解析为 JSON（向后兼容）
+    if (typeof columns === 'string') {
+      try {
+        const parsed = JSON.parse(columns)
+        if (Array.isArray(parsed)) {
+          columns = parsed
         }
-      }
-      // 确保 columns 是数组
-      if (!Array.isArray(columns)) {
+      } catch (e) {
+        console.warn('accTable columns parse error:', e)
         columns = []
       }
-      // 过滤掉 hidden 为 true 的列
-      columns = columns.filter((col) => !col.hidden)
-      props.columns = columns
     }
+    // 确保 columns 是数组
+    if (!Array.isArray(columns)) {
+      columns = []
+    }
+    // 过滤掉 hidden 为 true 的列，同时确保所有其他属性（如 width、align、fixed 等）都被保留
+    const processedColumns = columns
+      .filter((col) => !col || !col.hidden)
+      .map((col) => {
+        // 创建列对象的副本，确保所有属性都被保留（包括 width、align、fixed 等）
+        const column = { ...col }
+
+        // 处理 width 属性：确保它能够正确传递
+        // Ant Design Vue Table 支持 width 为 number 或 string
+        // 如果 width 是纯数字字符串（如 "100"），可以转换为数字以便更好的性能
+        // 如果 width 是带单位的字符串（如 "100px"），保持字符串
+        if (
+          column.width !== undefined &&
+          column.width !== null &&
+          column.width !== ''
+        ) {
+          if (typeof column.width === 'string') {
+            // 如果是纯数字字符串，转换为数字
+            const numValue = Number(column.width)
+            if (
+              !isNaN(numValue) &&
+              isFinite(numValue) &&
+              column.width.trim() === String(numValue)
+            ) {
+              column.width = numValue
+            }
+            // 如果不是纯数字（如 "100px"），保持字符串
+          }
+          // 如果已经是数字，直接使用
+        }
+
+        // 确保其他列属性也被保留（align、fixed、title、dataIndex 等）
+        return column
+      })
+
+    // 始终更新 props.columns，确保列配置变化（包括 width）时能生效
+    props.columns = processedColumns
 
     // 初始化数据源
     if (!hasProperty(props, 'dataSource')) {

package/src/parsers/alert.js

@@ -0,0 +1,17 @@
+export default {
+  name: 'aAlert',
+  // Alert 是非输入组件，不需要 modelField
+  mergeProp(ctx) {
+    const props = ctx.prop.props || {}
+    // 如果没有 message 但有 description，将 description 作为 message
+    // 这样 Alert 会显示为小的样式（只有 message，没有 description）
+    if ((!props.message || props.message === '') && props.description) {
+      props.message = props.description
+      delete props.description
+    }
+  },
+  render(children, ctx) {
+    // 使用默认渲染，通过 alias 映射到 aAlert 组件
+    return ctx.$render.defaultRender(ctx, children)
+  }
+}

package/src/parsers/cascader.js

@@ -73,26 +73,77 @@ export default {
             // 这样可以触发 Vue 的响应式更新，即使对象属性被修改了
             const currentOptions = props.options || []
 
-            // 找到 targetOption 在数组中的索引
-            let targetIndex = -1
-            if (targetOption) {
-              targetIndex = currentOptions.findIndex(
-                (item) =>
-                  item.value === targetOption.value ||
-                  item.id === targetOption.id ||
-                  item === targetOption
-              )
+            // 递归查找并更新选项的函数
+            // 通过 value 路径来查找，避免引用问题
+            const updateOptionRecursive = (optionsList, pathValues, depth, newChildren) => {
+              if (!pathValues || pathValues.length === 0) {
+                // 如果没有路径，直接返回深拷贝的选项
+                return optionsList.map(item => ({
+                  ...item,
+                  children: item.children ? item.children.map(child => ({ ...child })) : undefined
+                }))
+              }
+              
+              const currentValue = pathValues[depth]
+              const isLast = depth === pathValues.length - 1
+              
+              return optionsList.map(item => {
+                const newItem = { ...item }
+                
+                // 如果当前项匹配路径的当前层级值
+                if ((item.value !== undefined && item.value === currentValue) || 
+                    (item.id !== undefined && item.id === currentValue)) {
+                  if (isLast) {
+                    // 是最后一个值（目标项），更新 children
+                    newItem.children = newChildren ? [...newChildren] : undefined
+                    newItem.loading = false
+                    // 保持其他属性不变，但深拷贝 children
+                    return newItem
+                  } else {
+                    // 不是最后一个，需要递归更新其 children
+                    if (item.children && item.children.length > 0) {
+                      // 递归更新子项
+                      newItem.children = updateOptionRecursive(
+                        item.children,
+                        pathValues,
+                        depth + 1,
+                        newChildren
+                      )
+                    } else {
+                      // 如果没有 children，保持 undefined
+                      newItem.children = undefined
+                    }
+                    return newItem
+                  }
+                }
+                
+                // 不匹配的项，也需要递归处理其 children（以防路径在其他分支）
+                if (item.children && item.children.length > 0) {
+                  newItem.children = updateOptionRecursive(
+                    item.children,
+                    pathValues,
+                    depth,
+                    newChildren
+                  )
+                } else {
+                  // 如果没有 children，深拷贝基本结构
+                  newItem.children = undefined
+                }
+                
+                return newItem
+              })
             }
 
-            const newOptions = currentOptions.map((item, index) => {
-              // 如果是 targetOption，创建包含所有修改的新对象
-              if (index === targetIndex && targetOption) {
-                const newTarget = { ...targetOption }
-                return newTarget
-              }
-              // 其他对象创建新引用（浅拷贝即可）
-              return { ...item }
-            })
+            // 从 selectedOptions 中提取 value 路径
+            const pathValues = selectedOptions.map(opt => opt.value || opt.id)
+            
+            // 使用递归函数更新选项（从第0层开始）
+            const newOptions = updateOptionRecursive(
+              currentOptions,
+              pathValues,
+              0,
+              targetOption ? targetOption.children : undefined
+            )
 
             // 完全按照 effect.fetch 的方式：使用 deepSet 在响应式对象上设置值
             // effect.fetch 使用: deepSet(inject.getProp(), 'props.options', val)

package/src/parsers/index.js

@@ -17,6 +17,7 @@ import flex from './flex'
 import space from './space'
 import spin from './spin'
 import div from './div'
+import alert from './alert'
 import accTable from './accTable'
 
 export default [
@@ -39,5 +40,6 @@ export default [
   space,
   spin,
   div,
+  alert,
   accTable
 ]

package/src/parsers/input.js

@@ -26,5 +26,66 @@ export default {
         password: 'aInputPassword'
       }[type] || 'aInput'
     return ctx.$render.vNode.make(type, ctx.prop, children)
+  },
+  mounted(ctx) {
+    // 预览模式下，为 textarea 设置自适应高度
+    if (
+      ctx.prop.props?.type === 'textarea' &&
+      ctx.prop.props?.readOnly &&
+      ctx.$handle?.preview === true
+    ) {
+      const adjustTextareaHeight = (textareaEl) => {
+        if (!textareaEl) return
+        // 重置高度，然后设置为 scrollHeight
+        textareaEl.style.height = 'auto'
+        const scrollHeight = textareaEl.scrollHeight
+        if (scrollHeight > 0) {
+          textareaEl.style.height = scrollHeight + 'px'
+        }
+        textareaEl.style.overflow = 'hidden'
+      }
+
+      // 延迟执行，确保 DOM 已完全渲染
+      setTimeout(() => {
+        const el = ctx.el
+        if (!el) return
+
+        // 查找 textarea 元素
+        const textarea =
+          el.querySelector('textarea.ant-input') || el.querySelector('textarea')
+        if (!textarea) return
+
+        // 首次调整高度
+        adjustTextareaHeight(textarea)
+
+        // 使用 MutationObserver 监听内容变化
+        if (typeof MutationObserver !== 'undefined') {
+          const observer = new MutationObserver(() => {
+            adjustTextareaHeight(textarea)
+          })
+
+          observer.observe(textarea, {
+            attributes: true,
+            attributeFilter: ['value'],
+            childList: true,
+            subtree: true,
+            characterData: true
+          })
+
+          // 定期检查并调整（备用方案）
+          const intervalId = setInterval(() => {
+            adjustTextareaHeight(textarea)
+          }, 200)
+
+          // 在组件销毁时清理
+          if (ctx.$handle && ctx.$handle.vm) {
+            ctx.$handle.vm.$once('hook:beforeUnmount', () => {
+              observer.disconnect()
+              clearInterval(intervalId)
+            })
+          }
+        }
+      }, 100)
+    }
   }
 }