@longhongguo/form-create-ant-design-vue 3.3.38 → 3.3.39

package/package.json

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

@@ -1,5 +1,8 @@
 <template>
-  <div class="fc-editor-wrapper">
+  <div
+    class="fc-editor-wrapper"
+    :class="{ 'fc-editor-preview': isPreviewOrReadOnly }"
+  >
     <!-- 只读/预览模式：直接用 v-html 渲染，并添加图片点击监听 -->
     <div
       v-if="readOnly"
@@ -8,14 +11,14 @@
       v-html="modelValue"
     ></div>
     <!-- 编辑模式：使用富文本编辑器 -->
-  <FcEditor
+    <FcEditor
       v-else
-    :model-value="modelValue"
-    :disabled="disabled"
-    :config="editorConfig"
-    :init="initEditor"
-    @update:model-value="$emit('update:modelValue', $event)"
-  />
+      :model-value="modelValue"
+      :disabled="disabled"
+      :config="editorConfig"
+      :init="initEditor"
+      @update:model-value="$emit('update:modelValue', $event)"
+    />
   </div>
 </template>
 
@@ -87,6 +90,9 @@ export default defineComponent({
     }
   },
   computed: {
+    isPreviewOrReadOnly() {
+      return this.readOnly || this.formCreateInject?.preview === true
+    },
     editorConfig() {
       const config = {}
 
@@ -1234,6 +1240,10 @@ export default defineComponent({
   width: 100%;
 }
 
+.fc-editor-wrapper.fc-editor-preview {
+  height: auto !important;
+}
+
 .fc-editor-readonly {
   padding: 0 10px;
   border-radius: 4px;

package/src/components/tableForm/TableForm.vue

@@ -314,6 +314,7 @@ export default {
     },
     updateRaw(tr) {
       const idx = this.trs.indexOf(tr)
+      const rowData = this.modelValue[idx] || {}
       let colOffset = 0
       
       // 更新序号列
@@ -326,7 +327,6 @@ export default {
       if (this.showSelectColumn && tr.children[colOffset]) {
         const selectCell = tr.children[colOffset]
         // 从数据对象中读取选中状态
-        const rowData = this.modelValue[idx]
         const isSelected = rowData && rowData[this.selectField] === true
         if (selectCell.children && selectCell.children[0]) {
           const checkbox = selectCell.children[0]
@@ -352,6 +352,28 @@ export default {
         colOffset++
       }
       
+      // 更新数据列的动态 options（如 checkbox）
+      this.columns.forEach((column, colIdx) => {
+        const cellIdx = colOffset + colIdx
+        if (tr.children[cellIdx] && tr.children[cellIdx].children) {
+          const cellChildren = tr.children[cellIdx].children
+          // 查找 checkbox 类型的规则
+          const checkboxRule = cellChildren.find((rule) => rule.type === 'checkbox')
+          if (checkboxRule && column.optionsFn && typeof column.optionsFn === 'function') {
+            // 调用 optionsFn 获取该行的 options
+            const dynamicOptions = column.optionsFn(rowData, idx)
+            if (Array.isArray(dynamicOptions)) {
+              // 更新 checkbox 规则的 options
+              checkboxRule.options = dynamicOptions
+              // 如果 checkbox 的 props 中有 options，也更新它
+              if (checkboxRule.props) {
+                checkboxRule.props.options = dynamicOptions
+              }
+            }
+          }
+        }
+      })
+      
       // 更新操作列的删除按钮
       if (this.showOperationColumn && tr.children[tr.children.length - 1]) {
         const operationCell = tr.children[tr.children.length - 1]

package/src/parsers/checkbox.js

@@ -1,12 +1,12 @@
-import {hasProperty} from '@form-create/utils/lib/type';
+import { hasProperty } from '@form-create/utils/lib/type'
 
 export default {
-    name: 'checkbox',
-    modelField: 'value',
-    mergeProp(ctx) {
-        const props = ctx.prop.props;
-        if (!hasProperty(props, 'options'))
-            props.options = ctx.prop.options || [];
-    }
-
+  name: 'checkbox',
+  modelField: 'value',
+  mergeProp(ctx) {
+    const props = ctx.prop.props
+    if (!hasProperty(props, 'options')) props.options = ctx.prop.options || []
+    // Ant Design Vue 的 CheckboxGroup 支持在 options 数组中通过 disabled 属性禁用选项
+    // 例如: [{ label: '选项1', value: 1, disabled: true }, { label: '选项2', value: 2, disabled: false }]
+  }
 }

package/src/parsers/radio.js

@@ -1,5 +1,8 @@
 import checkbox from './checkbox';
 
 export default {
-    ...checkbox, name: 'radio'
+    ...checkbox, 
+    name: 'radio'
+    // Ant Design Vue 的 RadioGroup 同样支持在 options 数组中通过 disabled 属性禁用选项
+    // 例如: [{ label: '选项A', value: 'A', disabled: true }, { label: '选项B', value: 'B', disabled: false }]
 };