@longhongguo/form-create-ant-design-vue 3.2.83 → 3.2.85

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@longhongguo/form-create-ant-design-vue",
-  "version": "3.2.83",
+  "version": "3.2.85",
   "description": "AntDesignVue版本低代码表单|FormCreate 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的低代码表单生成组件。支持6个UI框架，适配移动端，并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。",
   "main": "./dist/form-create.min.js",
   "module": "./dist/form-create.esm.js",

package/src/parsers/accTable.js

@@ -1,10 +1,23 @@
 import { hasProperty } from '@form-create/utils/lib/type'
 
+// 简单的 getValue 函数，根据路径字符串获取嵌套对象的值
+function getValue(obj, path) {
+  if (!obj || !path) return undefined
+  const keys = path.split('.')
+  let value = obj
+  for (const key of keys) {
+    if (value == null) return undefined
+    value = value[key]
+  }
+  return value
+}
+
 export default {
   name: 'accTable',
   mergeProp(ctx) {
     const props = ctx.prop.props || {}
     const rule = ctx.rule
+    const api = ctx.api
 
     // 初始化列配置
     if (!hasProperty(props, 'columns')) {
@@ -70,7 +83,7 @@ export default {
       if (paginationConfig === false) {
         props.pagination = false
       } else if (paginationConfig && typeof paginationConfig === 'object') {
-        props.pagination = {
+        const pagination = {
           current: paginationConfig.current || 1,
           pageSize: paginationConfig.pageSize || 10,
           total: paginationConfig.total || 0,
@@ -79,12 +92,155 @@ export default {
           showTotal: paginationConfig.showTotal,
           ...paginationConfig
         }
+
+        // 如果启用了分页且有远程数据源（fetch effect），添加 onChange 事件处理和初始化分页参数
+        if (rule.effect?.fetch && paginationConfig.current !== undefined) {
+          // 获取分页参数配置
+          const pageParamName = rule.props?.paginationPageParam || 'page'
+          const pageSizeParamName =
+            rule.props?.paginationPageSizeParam || 'pageSize'
+          const paramType = rule.props?.paginationParamType || 'query' // 'query' 或 'data'
+          const responseDataPath =
+            rule.props?.paginationResponseDataPath || 'data'
+          const responseTotalPath =
+            rule.props?.paginationResponseTotalPath || 'total'
+
+          // 包装 fetch 配置，添加 beforeFetch 钩子来动态注入分页参数
+          const originalFetch = rule.effect.fetch
+          if (typeof originalFetch === 'object') {
+            // 保存原始 beforeFetch 钩子和分页参数配置到闭包中
+            const originalBeforeFetch = originalFetch.beforeFetch
+            const savedParamType = paramType
+            const savedPageParamName = pageParamName
+            const savedPageSizeParamName = pageSizeParamName
+
+            // 先将初始分页参数添加到配置中（用于首次加载）
+            const currentPage = pagination.current || 1
+            const currentPageSize = pagination.pageSize || 10
+
+            if (savedParamType === 'query') {
+              if (!originalFetch.query) {
+                originalFetch.query = {}
+              }
+              originalFetch.query[savedPageParamName] = currentPage
+              originalFetch.query[savedPageSizeParamName] = currentPageSize
+            } else {
+              if (!originalFetch.data) {
+                originalFetch.data = {}
+              }
+              originalFetch.data[savedPageParamName] = currentPage
+              originalFetch.data[savedPageSizeParamName] = currentPageSize
+            }
+
+            // 添加 beforeFetch 钩子来动态更新分页参数（确保每次请求都使用最新值）
+            originalFetch.beforeFetch = (config, { rule: r, api: a }) => {
+              // 获取当前分页配置
+              const currentPagination = r.props?.pagination
+              if (currentPagination && typeof currentPagination === 'object') {
+                const currentPage = currentPagination.current || 1
+                const currentPageSize = currentPagination.pageSize || 10
+
+                // 确保 config 存在 query 和 data
+                if (!config.query) {
+                  config.query = {}
+                }
+                if (!config.data) {
+                  config.data = {}
+                }
+
+                // 添加分页参数（使用闭包中保存的参数名）
+                if (savedParamType === 'query') {
+                  config.query[savedPageParamName] = currentPage
+                  config.query[savedPageSizeParamName] = currentPageSize
+                } else {
+                  config.data[savedPageParamName] = currentPage
+                  config.data[savedPageSizeParamName] = currentPageSize
+                }
+              }
+
+              // 调用原始的 beforeFetch 钩子（如果存在）
+              if (
+                originalBeforeFetch &&
+                typeof originalBeforeFetch === 'function'
+              ) {
+                return originalBeforeFetch(config, { rule: r, api: a })
+              }
+            }
+          }
+
+          // 添加分页 onChange 事件处理
+          pagination.onChange = (page, size) => {
+            // 更新分页配置
+            if (rule.props?.pagination) {
+              rule.props.pagination.current = page
+              rule.props.pagination.pageSize = size
+            }
+
+            // 分页参数已经通过包装的 fetch 函数自动添加，只需要触发重新加载
+            ctx.api.sync(rule)
+            setTimeout(() => {
+              ctx.api.refresh()
+            }, 0)
+          }
+
+          // 添加 onShowSizeChange 事件处理（改变每页条数时）
+          pagination.onShowSizeChange = (current, size) => {
+            if (rule.props?.pagination) {
+              rule.props.pagination.current = 1 // 改变每页条数时重置到第一页
+              rule.props.pagination.pageSize = size
+            }
+
+            // 分页参数已经通过包装的 fetch 函数自动添加，只需要触发重新加载
+            ctx.api.sync(rule)
+            setTimeout(() => {
+              ctx.api.refresh()
+            }, 0)
+          }
+        }
+
+        props.pagination = pagination
       } else {
         // 默认不启用分页
         props.pagination = false
       }
     }
 
+    // 处理远程数据响应，解析总记录数和数据列表
+    if (rule.effect?.fetch && rule.props?.pagination) {
+      const fetchData = ctx.effectData('fetch')
+      if (fetchData && fetchData.value) {
+        const responseDataPath =
+          rule.props?.paginationResponseDataPath || 'data'
+        const responseTotalPath =
+          rule.props?.paginationResponseTotalPath || 'total'
+
+        try {
+          // 解析数据列表
+          const dataList = getValue(fetchData.value, responseDataPath)
+          if (Array.isArray(dataList)) {
+            props.dataSource = dataList
+            rule.value = dataList
+            rule.props.dataSource = dataList
+          }
+
+          // 解析总记录数
+          const total = getValue(fetchData.value, responseTotalPath)
+          if (
+            typeof total === 'number' &&
+            rule.props.pagination &&
+            typeof rule.props.pagination === 'object'
+          ) {
+            rule.props.pagination.total = total
+            if (props.pagination && typeof props.pagination === 'object') {
+              props.pagination.total = total
+            }
+          }
+        } catch (e) {
+          console.warn('accTable parse response error:', e)
+        }
+      }
+    }
+
     // 设置其他常用配置
     if (hasProperty(rule.props, 'bordered')) {
       props.bordered = rule.props.bordered