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

package/package.json

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

@@ -88,6 +88,16 @@ export default {
     }
   },
   watch: {
+    columns: {
+      handler() {
+        // 当 columns 变化时，重新解析 optionsFn
+        this.parseColumnsOptionsFn()
+        this.loadRule()
+        this.updateTable()
+      },
+      deep: true,
+      immediate: false
+    },
     modelValue: {
       handler() {
         this.updateTable()
@@ -125,6 +135,7 @@ export default {
       copyTrs: '',
       oldValue: '',
       selectedRows: new Set(), // 存储选中行的索引
+      parsedColumns: [], // 存储解析后的 columns（包含解析后的 optionsFn）
       emptyRule: {
         type: 'tr',
         _isEmpty: true,
@@ -152,9 +163,56 @@ export default {
     }
   },
   methods: {
+    parseColumnsOptionsFn() {
+      // 使用 formCreate 的 parseFn 来解析 optionsFn 字符串为函数
+      let parseFn
+      if (this.formCreateInject?.form?.parseFn) {
+        parseFn = this.formCreateInject.form.parseFn
+      } else {
+        // 如果 formCreateInject 中没有 parseFn，尝试动态 require
+        try {
+          const jsonUtils = require('@form-create/utils/lib/json')
+          parseFn = jsonUtils.parseFn
+        } catch (e) {
+          // 如果 require 失败，创建一个简单的解析函数
+          parseFn = (fn) => {
+            if (typeof fn !== 'string') return fn
+            // 尝试解析 [[FORM-CREATE-PREFIX-...-FORM-CREATE-SUFFIX]] 格式
+            const PREFIX = '[[FORM-CREATE-PREFIX-'
+            const SUFFIX = '-FORM-CREATE-SUFFIX]]'
+            if (fn.indexOf(PREFIX) === 0 && fn.indexOf(SUFFIX) > 0) {
+              const funcStr = fn.replace(SUFFIX, '').replace(PREFIX, '')
+              try {
+                return new Function('return ' + funcStr)()
+              } catch (err) {
+                console.warn('Failed to parse optionsFn:', err)
+                return fn
+              }
+            }
+            return fn
+          }
+        }
+      }
+
+      this.parsedColumns = (this.columns || []).map((column) => {
+        const parsedColumn = { ...column }
+        // 如果 optionsFn 是字符串，解析为函数
+        if (column.optionsFn) {
+          if (typeof column.optionsFn === 'string') {
+            parsedColumn.optionsFn = parseFn(column.optionsFn)
+          } else if (typeof column.optionsFn === 'function') {
+            // 如果已经是函数，直接使用
+            parsedColumn.optionsFn = column.optionsFn
+          }
+        }
+        return parsedColumn
+      })
+    },
     getEmptyColspan() {
+      const columnsToUse =
+        this.parsedColumns.length > 0 ? this.parsedColumns : this.columns
       return (
-        this.columns.length +
+        columnsToUse.length +
         (this.showIndexColumn ? 1 : 0) +
         (this.showSelectColumn ? 1 : 0) +
         (this.showOperationColumn ? (this.formCreateInject.preview ? 0 : 1) : 0)
@@ -201,7 +259,7 @@ export default {
         return
       }
       this.oldValue = str
-      
+
       // 从数据中读取选中状态，初始化 selectedRows
       if (this.showSelectColumn) {
         this.selectedRows.clear()
@@ -211,7 +269,7 @@ export default {
           }
         })
       }
-      
+
       this.trs = this.trs.splice(0, this.modelValue.length)
       if (!this.modelValue.length) {
         this.addEmpty()
@@ -276,7 +334,7 @@ export default {
       // 更新 selectedRows，删除当前索引，后续索引前移
       this.selectedRows.delete(idx)
       const newSelectedRows = new Set()
-      this.selectedRows.forEach(selectedIdx => {
+      this.selectedRows.forEach((selectedIdx) => {
         if (selectedIdx < idx) {
           newSelectedRows.add(selectedIdx)
         } else if (selectedIdx > idx) {
@@ -284,7 +342,7 @@ export default {
         }
       })
       this.selectedRows = newSelectedRows
-      
+
       this.updateValue()
       if (this.trs.length) {
         this.trs.forEach((tr) => this.updateRaw(tr))
@@ -314,19 +372,19 @@ export default {
     },
     updateRaw(tr) {
       const idx = this.trs.indexOf(tr)
+      const rowData = this.modelValue[idx] || {}
       let colOffset = 0
-      
+
       // 更新序号列
       if (this.showIndexColumn && tr.children[colOffset]) {
         tr.children[colOffset].props.innerText = idx + 1
         colOffset++
       }
-      
+
       // 更新选择列
       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]
@@ -342,7 +400,9 @@ export default {
           if (tableEl) {
             const rows = tableEl.querySelectorAll('tbody tr')
             if (rows[idx]) {
-              const checkbox = rows[idx].querySelector('._fc-tf-select input[type="checkbox"]')
+              const checkbox = rows[idx].querySelector(
+                '._fc-tf-select input[type="checkbox"]'
+              )
               if (checkbox) {
                 checkbox.checked = isSelected
               }
@@ -351,7 +411,38 @@ export default {
         })
         colOffset++
       }
-      
+
+      // 更新数据列的动态 options（如 checkbox）
+      // 使用 parsedColumns 而不是原始的 columns，确保 optionsFn 已被解析
+      const columnsToUse =
+        this.parsedColumns.length > 0 ? this.parsedColumns : this.columns
+      columnsToUse.forEach((column, colIdx) => {
+        const cellIdx = colOffset + colIdx
+        if (tr.children[cellIdx] && tr.children[cellIdx].children) {
+          const cellChildren = tr.children[cellIdx].children
+          // 查找 checkbox 或 radio 类型的规则
+          const checkboxRule = cellChildren.find(
+            (rule) => rule.type === 'checkbox' || rule.type === 'radio'
+          )
+          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]
@@ -407,13 +498,13 @@ export default {
     },
     updateSelectAllState() {
       if (!this.showSelectColumn) return
-      
+
       const validRows = this.modelValue.filter((rowData, idx) => {
         const tr = this.trs[idx]
         return tr && !tr._isEmpty
       })
       if (validRows.length === 0) return
-      
+
       // 从数据对象中读取选中状态
       const allSelected = validRows.every((rowData) => {
         return rowData && rowData[this.selectField] === true
@@ -421,12 +512,14 @@ export default {
       const someSelected = validRows.some((rowData) => {
         return rowData && rowData[this.selectField] === true
       })
-      
+
       // 更新表头的全选checkbox（通过 DOM 操作）
       this.$nextTick(() => {
         const tableEl = this.$el?.querySelector('._fc-tf-table')
         if (tableEl) {
-          const headerCheckbox = tableEl.querySelector('._fc-tf-head-select input[type="checkbox"]')
+          const headerCheckbox = tableEl.querySelector(
+            '._fc-tf-head-select input[type="checkbox"]'
+          )
           if (headerCheckbox) {
             headerCheckbox.checked = allSelected
             headerCheckbox.indeterminate = !allSelected && someSelected
@@ -520,7 +613,10 @@ export default {
       }
 
       // 数据列
-      this.columns.forEach((column) => {
+      // 使用 parsedColumns 而不是原始的 columns，确保 optionsFn 已被解析
+      const columnsToUse =
+        this.parsedColumns.length > 0 ? this.parsedColumns : this.columns
+      columnsToUse.forEach((column) => {
         header.push({
           type: 'th',
           native: true,
@@ -615,6 +711,8 @@ export default {
     }
   },
   created() {
+    // 解析 columns 中的 optionsFn（从字符串解析为函数）
+    this.parseColumnsOptionsFn()
     this.loadRule()
   },
   mounted() {

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 }]
 };