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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@longhongguo/form-create-ant-design-vue",
-  "version": "3.2.83",
+  "version": "3.2.84",
   "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,133 @@ 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'
+
+          // 添加分页 onChange 事件处理
+          pagination.onChange = (page, size) => {
+            // 更新分页配置
+            if (rule.props?.pagination) {
+              rule.props.pagination.current = page
+              rule.props.pagination.pageSize = size
+            }
+
+            // 更新 fetch 参数
+            if (rule.effect?.fetch) {
+              const fetchConfig = rule.effect.fetch
+              if (typeof fetchConfig === 'object') {
+                if (paramType === 'query') {
+                  // 通过 query 参数传递
+                  if (!fetchConfig.query) {
+                    fetchConfig.query = {}
+                  }
+                  fetchConfig.query[pageParamName] = page
+                  fetchConfig.query[pageSizeParamName] = size
+                } else {
+                  // 通过 data 参数传递
+                  if (!fetchConfig.data) {
+                    fetchConfig.data = {}
+                  }
+                  fetchConfig.data[pageParamName] = page
+                  fetchConfig.data[pageSizeParamName] = size
+                }
+
+                // 触发 fetch 重新加载：通过触发 effect 来重新运行 fetch
+                ctx.api.sync(rule)
+                // 延迟触发 refresh 以确保配置已更新
+                setTimeout(() => {
+                  ctx.api.refresh()
+                }, 0)
+              }
+            }
+          }
+
+          // 添加 onShowSizeChange 事件处理（改变每页条数时）
+          pagination.onShowSizeChange = (current, size) => {
+            if (rule.props?.pagination) {
+              rule.props.pagination.current = 1 // 改变每页条数时重置到第一页
+              rule.props.pagination.pageSize = size
+            }
+
+            if (rule.effect?.fetch) {
+              const fetchConfig = rule.effect.fetch
+              if (typeof fetchConfig === 'object') {
+                if (paramType === 'query') {
+                  if (!fetchConfig.query) {
+                    fetchConfig.query = {}
+                  }
+                  fetchConfig.query[pageParamName] = 1
+                  fetchConfig.query[pageSizeParamName] = size
+                } else {
+                  if (!fetchConfig.data) {
+                    fetchConfig.data = {}
+                  }
+                  fetchConfig.data[pageParamName] = 1
+                  fetchConfig.data[pageSizeParamName] = size
+                }
+
+                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