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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@longhongguo/form-create-ant-design-vue",
-  "version": "3.3.10",
+  "version": "3.3.12",
   "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,10 @@ export default defineComponent({
         // 禁用自动聚焦，避免在只读模式下获得焦点
         config.focus = false
         config.autoFocus = false
+        // 只读模式下隐藏 placeholder
+        delete config.placeholder
+        // 只读模式下移除固定高度，使用自适应
+        delete config.height
       }
 
       // 如果设置了 uploadImgServer，配置图片上传
@@ -506,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 {
@@ -516,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')
             }
           }
         }
@@ -526,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
@@ -542,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

@@ -105,6 +105,10 @@ export default {
         // 只读模式允许复制和点击链接，但禁止编辑
         if (ctx.prop.props) {
           ctx.prop.props.readOnly = true
+          // 预览模式和只读模式下隐藏 placeholder
+          delete ctx.prop.props.placeholder
+          // 预览模式和只读模式下移除固定高度，使用自适应
+          delete ctx.prop.props.height
         }
       } else if (
         ctx.rule.type === 'input' &&
@@ -118,6 +122,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 +134,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 +147,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/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,119 @@ export default {
           // 如果已经是数字，直接使用
         }
 
+        // 处理单元格表单组件
+        if (
+          column.cellType &&
+          ['input', 'select', 'radio'].includes(column.cellType)
+        ) {
+          const cellType = column.cellType
+          const dataIndex = column.dataIndex
+          const cellOptions = column.cellOptions || []
+          const cellProps = column.cellProps || {}
+
+          // 创建 customRender 函数
+          column.customRender = ({ text, record, index }) => {
+            const cellValue = record && dataIndex ? record[dataIndex] : text
+
+            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: () =>
+                    cellOptions.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: () =>
+                    cellOptions.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,