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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@longhongguo/form-create-ant-design-vue",
-  "version": "3.3.39",
+  "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/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))
@@ -316,13 +374,13 @@ export default {
       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]
@@ -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,15 +411,24 @@ export default {
         })
         colOffset++
       }
-      
+
       // 更新数据列的动态 options（如 checkbox）
-      this.columns.forEach((column, colIdx) => {
+      // 使用 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 类型的规则
-          const checkboxRule = cellChildren.find((rule) => rule.type === 'checkbox')
-          if (checkboxRule && column.optionsFn && typeof column.optionsFn === 'function') {
+          // 查找 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)) {
@@ -373,7 +442,7 @@ export default {
           }
         }
       })
-      
+
       // 更新操作列的删除按钮
       if (this.showOperationColumn && tr.children[tr.children.length - 1]) {
         const operationCell = tr.children[tr.children.length - 1]
@@ -429,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
@@ -443,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
@@ -542,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,
@@ -637,6 +711,8 @@ export default {
     }
   },
   created() {
+    // 解析 columns 中的 optionsFn（从字符串解析为函数）
+    this.parseColumnsOptionsFn()
     this.loadRule()
   },
   mounted() {