@cqsjjb/jjb-react-admin-component 3.3.7 → 3.3.8

package/ListDataContainer/index.d.ts

@@ -92,7 +92,7 @@ export interface ListDataContainerProps<T extends boolean = false> {
     /**
      * 搜索表单配置数组
      * 描述：由 SearchFormItemConfig 类型的配置项组成，组件内部会根据该数组自动生成搜索表单，
-     * 不传递则不显示搜索表单
+      * 不传递则不显示搜索表单
      * @type {SearchFormItemConfig[]}
      * @optional
      */
@@ -143,6 +143,14 @@ export interface ListDataContainerProps<T extends boolean = false> {
     ? OverTableProps  // ProTable 专属属性（如 search、toolBar 等）
     : TableProps<any>;    //    antd 原生 Table 属性（如 bordered、scroll 等）
 
+    /**
+     * 搜索表单的自定义属性
+     * 描述：传递给SearchForm组件的属性
+     * @type {Object}
+     * @optional
+     */
+    searchFormProps?: Object;
+
     /**
      * 表格类型切换开关
      * 描述：控制组件内部使用「项目自定义 ProTable」还是「antd 原生 Table」，

package/ListDataContainer/index.js

@@ -1,48 +1,49 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useState, useEffect, useCallback, useImperativeHandle, forwardRef } from 'react';
+import React, { useState, useEffect, useCallback, useImperativeHandle, forwardRef, useRef } from 'react';
 import { Table, Row, Col, Form } from 'antd';
 import { isEqual } from 'lodash';
 import SearchForm from '@cqsjjb/jjb-react-admin-component/SearchForm';
 import ProTable from '@cqsjjb/jjb-react-admin-component/Table';
 
-/**
- * @component ListDataContainer
- * @description 通用列表数据容器组件，提供搜索表单、数据表格、分页等功能的完整列表页面解决方案
- * 
- * @props {Array} columns - 表格列配置，遵循Ant Design Table组件的columns规范
- * @props {Function} fetchDataApi - 数据获取API函数，接收分页和搜索参数，返回包含list和total的对象
- * @props {Array} searchFormConfig - 搜索表单配置数组
- *   @param {React.Component} searchFormConfig[].field - 表单项组件(如ControlWrapper.Select)
- *   @param {string} searchFormConfig[].name - 表单项字段名
- *   @param {string} searchFormConfig[].label - 表单项标签
- *   @param {Object} searchFormConfig[].fieldProps - 传递给字段组件的属性
- *   @param {Object} searchFormConfig[].itemProps - 传递给Form.Item的属性
- *   @param {React.ReactNode} searchFormConfig[].content - 字段组件的子元素(如Select.Option列表)
- *   @param {boolean} searchFormConfig[].required - 是否必填
- * @props {string} rowKey - 表格行键值，默认为'id'
- * @props {Object} initialPagination - 初始分页配置，包含current、pageSize等分页属性
- * @props {Object} tableProps - 传递给Table组件的属性
- * @props {boolean} proTable - 是否使用ProTable组件，默认为false
- * @example
- * // 基础用法
- * <ListDataContainer
- *   columns={tableColumns}
- *   fetchDataApi={getCourseList}
- *   searchFormConfig={[
- *     {
- *       field: Select,
- *       name: 'status',
- *       label: '状态',
- *     }
- *     {
- *       field: Input,
- *       name: 'name',
- *       label: '名称',
- *       required: true,
- *     }
- *   ]}
- * />
- * 
+/**
+ * @component ListDataContainer
+ * @description 通用列表数据容器组件，提供搜索表单、数据表格、分页等功能的完整列表页面解决方案
+ * 
+ * @props {Array} columns - 表格列配置，遵循Ant Design Table组件的columns规范
+ * @props {Function} fetchDataApi - 数据获取API函数，接收分页和搜索参数，返回包含list和total的对象
+ * @props {Array} searchFormConfig - 搜索表单配置数组
+ *   @param {React.Component} searchFormConfig[].field - 表单项组件(如ControlWrapper.Select)
+ *   @param {string} searchFormConfig[].name - 表单项字段名
+ *   @param {string} searchFormConfig[].label - 表单项标签
+ *   @param {Object} searchFormConfig[].fieldProps - 传递给字段组件的属性
+ *   @param {Object} searchFormConfig[].itemProps - 传递给Form.Item的属性
+ *   @param {React.ReactNode} searchFormConfig[].content - 字段组件的子元素(如Select.Option列表)
+ *   @param {boolean} searchFormConfig[].required - 是否必填
+ * @props {string} rowKey - 表格行键值，默认为'id'
+ * @props {Object} initialPagination - 初始分页配置，包含current、pageSize等分页属性
+ * @props {Object} tableProps - 传递给Table组件的属性
+ * @props {Object} searchFormProps - 传递给SearchForm组件的属性
+ * @props {boolean} proTable - 是否使用ProTable组件，默认为false
+ * @example
+ * // 基础用法
+ * <ListDataContainer
+ *   columns={tableColumns}
+ *   fetchDataApi={getCourseList}
+ *   searchFormConfig={[
+ *     {
+ *       field: Select,
+ *       name: 'status',
+ *       label: '状态',
+ *     }
+ *     {
+ *       field: Input,
+ *       name: 'name',
+ *       label: '名称',
+ *       required: true,
+ *     }
+ *   ]}
+ * />
+ * 
  */
 
 const SELECT_COMPONENTS = ['Select', 'TreeSelect', 'Cascader', 'DatePicker', 'TimePicker', 'Checkbox', 'Radio', 'Switch', 'Slider', 'Upload'];
@@ -59,29 +60,42 @@ const ListDataContainer = /*#__PURE__*/forwardRef(({
     showQuickJumper: true
   },
   tableProps = {},
+  searchFormProps = {},
   proTable = false,
   onRest = () => {}
 }, ref) => {
-  const [form] = Form.useForm();
   const [tableData, setTableData] = useState([]);
   const [loading, setLoading] = useState(false);
   const [pagination, setPagination] = useState(initialPagination);
   const [totalCount, setTotalCount] = useState(0);
+  const [tableScrollY, setTableScrollY] = useState(undefined);
+  const form = useRef(null);
+  const searchFormRef = useRef(null);
+  const containerRef = useRef(null);
   const getComponentName = Component => {
     return Component.displayName || Component.constructor.name;
   };
 
-  /**
-   * 数据加载与刷新方法
-   * @param {Object} [overrideParams={}] - 可选，用于覆盖内部参数的键值对
-   *   若传入，会覆盖同名的表单参数和分页参数（如page、pageSize或搜索字段）
+  /**
+   * 数据加载与刷新方法
+   * @param {Object} [overrideParams={}] - 可选，用于覆盖内部参数的键值对
+   *   若传入，会覆盖同名的表单参数和分页参数（如page、pageSize或搜索字段）
    */
   const loadDataSource = useCallback(async (overrideParams = {}) => {
     if (!fetchDataApi) return;
     setLoading(true);
     try {
+      if (overrideParams.pageIndex && overrideParams.pageSize) {
+        setPagination(prev => ({
+          ...prev,
+          pageIndex: overrideParams.pageIndex,
+          pageSize: overrideParams.pageSize
+        }));
+      }
+
       // 1. 获取组件内部的表单参数
-      const formValues = await form.validateFields();
+      const formValues = await form.current.validateFields();
+      console.warn("formValues", formValues);
 
       // 2. 构造基础参数：分页参数 + 表单参数
       const baseParams = {
@@ -107,7 +121,7 @@ const ListDataContainer = /*#__PURE__*/forwardRef(({
     } finally {
       setLoading(false);
     }
-  }, [fetchDataApi, pagination, form]);
+  }, [fetchDataApi, pagination, form, searchFormConfig]);
 
   // 暴露刷新方法给父组件
   useImperativeHandle(ref, () => ({
@@ -127,11 +141,11 @@ const ListDataContainer = /*#__PURE__*/forwardRef(({
   };
   const handleReset = () => {
     // 清空表单
-    form.setFieldsValue(searchFormConfig.reduce((obj, item) => {
+    form.current.setFieldsValue(searchFormConfig.reduce((obj, item) => {
       obj[item.name] = undefined;
       return obj;
     }, {}));
-    onRest && onRest(form);
+    onRest && onRest(form.current);
     // 重置分页并使用内部默认参数查询
     setPagination(initialPagination);
     loadDataSource();
@@ -150,6 +164,59 @@ const ListDataContainer = /*#__PURE__*/forwardRef(({
   useEffect(() => {
     loadDataSource();
   }, []);
+
+  // 动态计算表格滚动高度
+  useEffect(() => {
+    const calculateScrollY = () => {
+      if (!containerRef.current || !searchFormRef.current) return;
+      const containerHeight = containerRef.current.clientHeight;
+      const searchFormHeight = searchFormRef.current.offsetHeight;
+      const gap = 16; // gap between searchForm and table
+      const paginationHeight = 64; // 分页器高度（包含margin）
+
+      // 计算表格可用高度 = 容器高度 - 搜索表单高度 - gap - 分页器高度 - 间隔
+      const availableHeight = containerHeight - searchFormHeight - gap - paginationHeight - 12;
+
+      // 确保最小高度为 100px
+      if (availableHeight > 100) {
+        setTableScrollY(availableHeight);
+      } else {
+        setTableScrollY(100);
+      }
+    };
+
+    // 延迟计算，确保 DOM 渲染完成
+    const timer = setTimeout(() => {
+      calculateScrollY();
+    }, 100);
+
+    // 使用 ResizeObserver 监听搜索表单高度变化
+    let resizeObserver = null;
+    if (typeof ResizeObserver !== 'undefined') {
+      resizeObserver = new ResizeObserver(() => {
+        // 使用 requestAnimationFrame 确保在下一帧计算
+        requestAnimationFrame(() => {
+          calculateScrollY();
+        });
+      });
+      if (searchFormRef.current) {
+        resizeObserver.observe(searchFormRef.current);
+      }
+      if (containerRef.current) {
+        resizeObserver.observe(containerRef.current);
+      }
+    }
+
+    // 监听窗口大小变化
+    window.addEventListener('resize', calculateScrollY);
+    return () => {
+      clearTimeout(timer);
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
+      window.removeEventListener('resize', calculateScrollY);
+    };
+  }, [searchFormConfig]);
   const generateFormItems = () => {
     return searchFormConfig.map((item, index) => {
       const {
@@ -172,26 +239,40 @@ const ListDataContainer = /*#__PURE__*/forwardRef(({
           required: true,
           message: `${SELECT_COMPONENTS.includes(getComponentName(FieldComponent)) ? '请选择' : '请输入'}${label}`
         }]
-      } : {}, itemProps, restProps), /*#__PURE__*/React.createElement(FieldComponent, _extends({
+      } : {}, {
+        style: {
+          marginBottom: 0
+        }
+      }, itemProps, restProps), /*#__PURE__*/React.createElement(FieldComponent, _extends({
         allowClear: true,
         placeholder: `${SELECT_COMPONENTS.includes(getComponentName(FieldComponent)) ? '请选择' : '请输入'}${label}`
       }, fieldProps), content || null));
     }).filter(Boolean);
   };
   const TableComponent = proTable ? ProTable : Table;
-  return /*#__PURE__*/React.createElement(Row, {
-    gutter: [16, 24]
-  }, /*#__PURE__*/React.createElement(Col, {
-    span: 24
-  }, /*#__PURE__*/React.createElement(SearchForm, {
-    expand: true,
+  return /*#__PURE__*/React.createElement("div", {
+    ref: containerRef,
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 16,
+      height: '100%',
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: searchFormRef
+  }, /*#__PURE__*/React.createElement(SearchForm, _extends({
+    defaultExpand: true,
     form: form,
     loading: loading,
     formLine: generateFormItems(),
     onReset: handleReset,
     onFinish: handleFinish
-  })), /*#__PURE__*/React.createElement(Col, {
-    span: 24
+  }, searchFormProps))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1,
+      overflow: 'hidden'
+    }
   }, /*#__PURE__*/React.createElement(TableComponent, _extends({
     columns: columns,
     dataSource: tableData,
@@ -203,10 +284,16 @@ const ListDataContainer = /*#__PURE__*/forwardRef(({
       total: totalCount
     },
     onChange: handlePaginationChange,
-    scroll: {
-      x: 'max-content'
+    scroll: tableProps?.scroll ? tableProps.scroll : {
+      y: tableScrollY !== undefined ? tableScrollY : tableProps.scroll?.y || undefined
     },
     bordered: true
-  }, tableProps))));
+  }, (() => {
+    const {
+      scroll,
+      ...restTableProps
+    } = tableProps;
+    return restTableProps;
+  })()))));
 });
 export default ListDataContainer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cqsjjb/jjb-react-admin-component",
-  "version": "3.3.7",
+  "version": "3.3.8",
   "description": "jjb-react-admin-组件库@new",
   "main": "index.js",
   "author": "jjb-front-team",