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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@longhongguo/form-create-ant-design-vue",
-  "version": "3.3.11",
+  "version": "3.3.13",
   "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

@@ -96,6 +96,8 @@ export default defineComponent({
         config.autoFocus = false
         // 只读模式下隐藏 placeholder
         delete config.placeholder
+        // 只读模式下移除固定高度，使用自适应
+        delete config.height
       }
 
       // 如果设置了 uploadImgServer，配置图片上传
@@ -541,8 +543,16 @@ export default defineComponent({
       }
 
       this.$nextTick(() => {
+        // 查找编辑器的根元素
+        let editorRootElement = null
+        if (this._editor.id) {
+          editorRootElement = document.getElementById(this._editor.id)
+        }
+
         // 查找编辑器的文本容器
         let textContainer = null
+        let containerElement = null
+
         if (this._editor.$textElem && this._editor.$textElem[0]) {
           textContainer = this._editor.$textElem[0]
         } else {
@@ -551,6 +561,7 @@ export default defineComponent({
             const editorEl = document.getElementById(editorId)
             if (editorEl) {
               textContainer = editorEl.querySelector('.w-e-text')
+              containerElement = editorEl.querySelector('.w-e-text-container')
             }
           }
         }
@@ -561,12 +572,43 @@ export default defineComponent({
             this._editor.$textContainerElem &&
             this._editor.$textContainerElem[0]
           ) {
-            textContainer = this._editor.$textContainerElem[0]
+            containerElement = this._editor.$textContainerElem[0]
+          }
+        }
+
+        // 查找容器元素（如果还没找到）
+        if (
+          !containerElement &&
+          this._editor.$textContainerElem &&
+          this._editor.$textContainerElem[0]
+        ) {
+          containerElement = this._editor.$textContainerElem[0]
+        } else if (!containerElement && this._editor.id) {
+          const editorEl = document.getElementById(this._editor.id)
+          if (editorEl) {
+            containerElement = editorEl.querySelector('.w-e-text-container')
           }
         }
 
         if (textContainer) {
           if (readOnly) {
+            // 设置根元素为自适应高度（移除内联样式中的固定高度）
+            if (editorRootElement) {
+              editorRootElement.style.height = 'auto'
+              editorRootElement.style.minHeight = 'auto'
+              editorRootElement.style.maxHeight = 'none'
+            }
+            // 设置容器和文本区域为自适应高度
+            if (containerElement) {
+              containerElement.style.height = 'auto'
+              containerElement.style.minHeight = 'auto'
+              containerElement.style.maxHeight = 'none'
+            }
+            if (textContainer) {
+              textContainer.style.height = 'auto'
+              textContainer.style.minHeight = 'auto'
+              textContainer.style.maxHeight = 'none'
+            }
             // 强制设置为只读：禁用编辑，但允许选择和点击链接
             const forceReadOnly = () => {
               // 强制设置 contenteditable
@@ -577,6 +619,21 @@ export default defineComponent({
               textContainer.style.mozUserSelect = 'text'
               textContainer.style.msUserSelect = 'text'
               textContainer.style.cursor = 'text'
+              // 保持根元素自适应高度
+              if (editorRootElement) {
+                editorRootElement.style.height = 'auto'
+                editorRootElement.style.minHeight = 'auto'
+                editorRootElement.style.maxHeight = 'none'
+              }
+              // 保持容器和文本区域自适应高度
+              if (containerElement) {
+                containerElement.style.height = 'auto'
+                containerElement.style.minHeight = 'auto'
+                containerElement.style.maxHeight = 'none'
+              }
+              textContainer.style.height = 'auto'
+              textContainer.style.minHeight = 'auto'
+              textContainer.style.maxHeight = 'none'
             }
 
             forceReadOnly()

package/src/core/manager.js

@@ -107,6 +107,8 @@ export default {
           ctx.prop.props.readOnly = true
           // 预览模式和只读模式下隐藏 placeholder
           delete ctx.prop.props.placeholder
+          // 预览模式和只读模式下移除固定高度，使用自适应
+          delete ctx.prop.props.height
         }
       } else if (
         ctx.rule.type === 'input' &&

package/src/parsers/accTable.js

@@ -1,5 +1,6 @@
 import { hasProperty } from '@form-create/utils/lib/type'
 import { deepCopy } from '@form-create/utils/lib/deepextend'
+import { h } from 'vue'
 
 // 简单的 getValue 函数，根据路径字符串获取嵌套对象的值
 function getValue(obj, path) {
@@ -165,6 +166,127 @@ export default {
           // 如果已经是数字，直接使用
         }
 
+        // 处理单元格表单组件
+        if (
+          column.cellType &&
+          ['input', 'select', 'radio'].includes(column.cellType)
+        ) {
+          const cellType = column.cellType
+          const dataIndex = column.dataIndex
+          // 确保 cellOptions 是数组
+          let cellOptions = column.cellOptions
+          if (!Array.isArray(cellOptions)) {
+            cellOptions = []
+          }
+          const cellProps = column.cellProps || {}
+
+          // 创建 customRender 函数
+          column.customRender = ({ text, record, index }) => {
+            const cellValue = record && dataIndex ? record[dataIndex] : text
+            // 在 render 函数内部再次确保 cellOptions 是数组（因为可能在外部被修改）
+            const options = Array.isArray(column.cellOptions)
+              ? column.cellOptions
+              : []
+
+            if (cellType === 'input') {
+              // 渲染 input 组件 - 使用组件名字符串
+              return h('a-input', {
+                value: cellValue,
+                onChange: (e) => {
+                  const val =
+                    e.target?.value !== undefined
+                      ? e.target.value
+                      : e?.target?.inputValue !== undefined
+                      ? e.target.inputValue
+                      : e
+                  if (record && dataIndex) {
+                    record[dataIndex] = val
+                    // 触发表格数据更新
+                    if (ctx.api && ctx.api.form && rule.field) {
+                      ctx.api.form[rule.field] = props.dataSource
+                    }
+                  }
+                },
+                placeholder: cellProps.placeholder || '',
+                disabled: cellProps.disabled || false,
+                size: cellProps.size || 'small',
+                ...cellProps
+              })
+            } else if (cellType === 'select') {
+              // 渲染 select 组件 - 使用组件名字符串
+              return h(
+                'a-select',
+                {
+                  value: cellValue,
+                  onChange: (val) => {
+                    if (record && dataIndex) {
+                      record[dataIndex] = val
+                      // 触发表格数据更新
+                      if (ctx.api && ctx.api.form && rule.field) {
+                        ctx.api.form[rule.field] = props.dataSource
+                      }
+                    }
+                  },
+                  placeholder: cellProps.placeholder || '',
+                  disabled: cellProps.disabled || false,
+                  size: cellProps.size || 'small',
+                  ...cellProps
+                },
+                {
+                  default: () =>
+                    options.map((opt) => {
+                      return h('a-select-option', {
+                        key: opt.value,
+                        value: opt.value,
+                        label: opt.label
+                      })
+                    })
+                }
+              )
+            } else if (cellType === 'radio') {
+              // 渲染 radio 组件 - 使用组件名字符串
+              return h(
+                'a-radio-group',
+                {
+                  value: cellValue,
+                  onChange: (e) => {
+                    const val =
+                      e.target?.value !== undefined ? e.target.value : e
+                    if (record && dataIndex) {
+                      record[dataIndex] = val
+                      // 触发表格数据更新
+                      if (ctx.api && ctx.api.form && rule.field) {
+                        ctx.api.form[rule.field] = props.dataSource
+                      }
+                    }
+                  },
+                  disabled: cellProps.disabled || false,
+                  size: cellProps.size || 'small',
+                  ...cellProps
+                },
+                {
+                  default: () =>
+                    options.map((opt) => {
+                      return h(
+                        'a-radio',
+                        {
+                          key: opt.value,
+                          value: opt.value
+                        },
+                        {
+                          default: () => opt.label || opt.value
+                        }
+                      )
+                    })
+                }
+              )
+            }
+
+            // 如果没有匹配的类型，返回原始文本
+            return text
+          }
+        }
+
         // 确保其他列属性也被保留（align、fixed、title、dataIndex 等）
         return column
       })

package/src/style/index.css

@@ -420,6 +420,28 @@ textarea[readonly].ant-input {
   max-height: none !important;
 }
 
+/* 只读模式：富文本编辑器样式（通过 contenteditable="false" 识别） */
+.w-e-text[contenteditable='false'] {
+  border: none !important;
+  box-shadow: none !important;
+  background: transparent !important;
+  /* 移除高度限制，让内容自适应 */
+  height: auto !important;
+  min-height: auto !important;
+  max-height: none !important;
+}
+
+/* 预览模式：编辑器根元素自适应高度 */
+.form-create.is-preview div[id^='editor'][readonly='true'],
+.form-create.is-preview div[id^='editor'][readonly] {
+  height: auto !important;
+  min-height: auto !important;
+  max-height: none !important;
+}
+
+/* 只读模式下，通过 JavaScript 设置容器自适应高度 */
+/* 容器样式会在 setReadOnlyMode 中通过 JavaScript 动态设置 */
+
 /* 富文本内容只读：允许选择文本和点击链接，但禁止编辑 */
 .form-create.is-preview .w-e-text p,
 .form-create.is-preview .w-e-text div,