@longhongguo/form-create-ant-design-vue 3.2.93 → 3.2.95

package/package.json

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

@@ -18,6 +18,84 @@ console.log('[accTable] ✅ accTable.js 文件已加载')
 
 export default {
   name: 'accTable',
+  init(ctx) {
+    // 在初始化时就设置 beforeFetch 钩子，确保在第一次请求之前就已经添加
+    console.log('[accTable] init 被调用')
+    const rule = ctx.rule
+
+    // 如果启用了分页且有远程数据源，在 init 时就添加 beforeFetch 钩子
+    if (
+      rule.effect?.fetch &&
+      rule.props?.pagination &&
+      typeof rule.props.pagination === 'object' &&
+      rule.props.pagination.current !== undefined
+    ) {
+      const originalFetch = rule.effect.fetch
+      if (typeof originalFetch === 'object') {
+        const savedOriginalBeforeFetch = originalFetch.beforeFetch
+        const isOurBeforeFetch =
+          savedOriginalBeforeFetch &&
+          savedOriginalBeforeFetch._accTablePaginationHook === true
+
+        if (!isOurBeforeFetch) {
+          console.log('[accTable] 在 init 中提前设置 beforeFetch 钩子')
+          // 获取分页参数配置
+          const pageParamName = rule.props?.paginationPageParam || 'page'
+          const pageSizeParamName =
+            rule.props?.paginationPageSizeParam || 'pageSize'
+          const paramType = rule.props?.paginationParamType || 'query'
+          const savedRule = rule
+
+          originalFetch.beforeFetch = (config, { api }) => {
+            const currentPagination = savedRule?.props?.pagination
+            if (currentPagination && typeof currentPagination === 'object') {
+              const currentPage = currentPagination.current || 1
+              const currentPageSize = currentPagination.pageSize || 10
+
+              if (paramType === 'query') {
+                config.query = {
+                  ...(config.query || {}),
+                  [pageParamName]: currentPage,
+                  [pageSizeParamName]: currentPageSize
+                }
+              } else {
+                config.data = {
+                  ...(config.data || {}),
+                  [pageParamName]: currentPage,
+                  [pageSizeParamName]: currentPageSize
+                }
+              }
+            }
+
+            // 调用原始的 beforeFetch 钩子（如果存在）
+            if (
+              savedOriginalBeforeFetch &&
+              typeof savedOriginalBeforeFetch === 'function'
+            ) {
+              try {
+                const result = savedOriginalBeforeFetch(config, { api })
+                if (result && typeof result.then === 'function') {
+                  return result.catch((err) => {
+                    console.error(
+                      '[accTable] 原始 beforeFetch 钩子执行出错:',
+                      err
+                    )
+                    return Promise.resolve()
+                  })
+                }
+                return result
+              } catch (err) {
+                console.error('[accTable] 原始 beforeFetch 钩子执行出错:', err)
+              }
+            }
+          }
+
+          originalFetch.beforeFetch._accTablePaginationHook = true
+          console.log('[accTable] ✅ 在 init 中 beforeFetch 钩子已添加')
+        }
+      }
+    }
+  },
   mergeProp(ctx) {
     console.log('[accTable] ========== mergeProp 被调用 ==========')
     console.log('[accTable] 调用堆栈:', new Error().stack)
@@ -306,11 +384,11 @@ export default {
         })
       }
 
-      // 只在首次初始化时添加分页事件处理函数，避免重复设置
-      if (!paginationInitialized) {
-        // 添加分页 onChange 和 onShowSizeChange 事件处理（确保事件处理函数存在）
-        const paginationObj = props.pagination || paginationConfig
-        if (paginationObj && typeof paginationObj === 'object') {
+      // 添加分页 onChange 和 onShowSizeChange 事件处理（确保事件处理函数存在，且只设置一次）
+      const paginationObj = props.pagination || paginationConfig
+      if (paginationObj && typeof paginationObj === 'object') {
+        // 检查是否已经设置过事件处理函数（通过标记判断）
+        if (!paginationObj._accTableHandlersSet) {
           if (!paginationObj.onChange) {
             paginationObj.onChange = (page, size) => {
               console.log('[accTable] pagination onChange 被调用:', {
@@ -348,6 +426,9 @@ export default {
             }
           }
 
+          // 标记事件处理函数已设置，避免重复设置
+          paginationObj._accTableHandlersSet = true
+
           // 如果 props.pagination 不存在，将 paginationObj 赋值给 props.pagination
           if (!props.pagination) {
             props.pagination = paginationObj

package/src/parsers/flex.js

@@ -110,15 +110,24 @@ export default {
       ctx.rule.children = []
     }
 
+    // 读取 childFlex 和 childWidth 配置，用于直接设置到子元素的 style
+    const childFlex = props.childFlex ?? ctx.rule.childFlex
+    const isVertical =
+      flexDirection === 'column' || flexDirection === 'column-reverse'
+    const childWidth = isVertical
+      ? props.childWidth ?? ctx.rule.childWidth ?? '100%'
+      : undefined
+
     // 为 flex 容器的所有子组件设置 col: false，避免被 a-col 包装
+    // 同时直接给子元素设置 flex 值和宽度（如果是垂直方向）
     // 这样可以确保子组件直接作为 flex 子项，而不是占满整行
     if (ctx.rule.children && Array.isArray(ctx.rule.children)) {
       ctx.rule.children.forEach((child) => {
         if (
           child &&
           typeof child === 'object' &&
-          !child.type === 'DragTool' &&
-          !child.type === 'DragBox'
+          child.type !== 'DragTool' &&
+          child.type !== 'DragBox'
         ) {
           // 只有当 col 未设置或为默认值时才设置
           if (child.col === undefined || child.col === null) {
@@ -130,6 +139,29 @@ export default {
           ) {
             child.col.show = false
           }
+
+          // 确保子元素的 style 对象存在（使用响应式的方式）
+          if (!child.style) {
+            child.style = {}
+          }
+
+          // 如果配置了 childFlex，直接给子元素设置 flex 样式
+          // 使用 Object.assign 确保样式对象被正确设置
+          if (
+            childFlex !== undefined &&
+            childFlex !== null &&
+            childFlex !== ''
+          ) {
+            const flexValue = String(childFlex).trim()
+            // 直接设置 flex 属性，确保样式能够生效
+            Object.assign(child.style, { flex: flexValue })
+          }
+
+          // 如果是垂直方向且配置了 childWidth，直接给子元素设置 width 样式
+          if (isVertical && childWidth) {
+            const widthValue = String(childWidth).trim()
+            Object.assign(child.style, { width: widthValue })
+          }
         }
       })
     }
@@ -145,9 +177,10 @@ export default {
       if (typeof ctx.rule.wrap === 'object' && !ctx.rule.wrap.class) {
         ctx.rule.wrap.class = ''
       }
-      const wrapClass = typeof ctx.rule.wrap === 'object' 
-        ? (ctx.rule.wrap.class || '').split(' ').filter(Boolean)
-        : []
+      const wrapClass =
+        typeof ctx.rule.wrap === 'object'
+          ? (ctx.rule.wrap.class || '').split(' ').filter(Boolean)
+          : []
       if (!wrapClass.includes('_fc-reset-margin-bottom')) {
         wrapClass.push('_fc-reset-margin-bottom')
         if (typeof ctx.rule.wrap === 'object') {

package/src/style/index.css

@@ -524,12 +524,22 @@
   width: auto !important;
 }
 
-/* Flex 容器子项 flex 样式 */
+/* Flex 容器子项 flex 样式 - 使用通用选择器，匹配所有直接子元素 */
+.ant-flex._fc-flex-container > * {
+  flex: var(--fc-child-flex) !important;
+}
+
+/* 更具体的选择器，针对被 form-item 包裹的子元素 */
 .ant-flex._fc-flex-container > .ant-form-item {
   flex: var(--fc-child-flex) !important;
 }
 
-/* 垂直方向的 Flex 容器子项宽度样式 */
+/* 垂直方向的 Flex 容器子项宽度样式 - 使用通用选择器 */
+.ant-flex._fc-flex-vertical > * {
+  width: var(--fc-child-width, 100%) !important;
+}
+
+/* 更具体的选择器，针对被 form-item 包裹的子元素 */
 .ant-flex._fc-flex-vertical > .ant-form-item {
   width: var(--fc-child-width, 100%) !important;
 }