@cqsjjb/jjb-react-admin-component 3.3.15 → 3.3.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/ListDataContainer/index.js +61 -50
- package/Table/index.d.ts +2 -2
- package/Table/index.js +3 -5
- package/package.json +1 -1
|
@@ -5,45 +5,45 @@ import { isEqual } from 'lodash';
|
|
|
5
5
|
import SearchForm from '@cqsjjb/jjb-react-admin-component/SearchForm';
|
|
6
6
|
import ProTable from '@cqsjjb/jjb-react-admin-component/Table';
|
|
7
7
|
|
|
8
|
-
/**
|
|
9
|
-
* @component ListDataContainer
|
|
10
|
-
* @description 通用列表数据容器组件,提供搜索表单、数据表格、分页等功能的完整列表页面解决方案
|
|
11
|
-
*
|
|
12
|
-
* @props {Array} columns - 表格列配置,遵循Ant Design Table组件的columns规范
|
|
13
|
-
* @props {Function} fetchDataApi - 数据获取API函数,接收分页和搜索参数,返回包含list和total的对象
|
|
14
|
-
* @props {Array} searchFormConfig - 搜索表单配置数组
|
|
15
|
-
* @param {React.Component} searchFormConfig[].field - 表单项组件(如ControlWrapper.Select)
|
|
16
|
-
* @param {string} searchFormConfig[].name - 表单项字段名
|
|
17
|
-
* @param {string} searchFormConfig[].label - 表单项标签
|
|
18
|
-
* @param {Object} searchFormConfig[].fieldProps - 传递给字段组件的属性
|
|
19
|
-
* @param {Object} searchFormConfig[].itemProps - 传递给Form.Item的属性
|
|
20
|
-
* @param {React.ReactNode} searchFormConfig[].content - 字段组件的子元素(如Select.Option列表)
|
|
21
|
-
* @param {boolean} searchFormConfig[].required - 是否必填
|
|
22
|
-
* @props {string} rowKey - 表格行键值,默认为'id'
|
|
23
|
-
* @props {Object} initialPagination - 初始分页配置,包含current、pageSize等分页属性
|
|
24
|
-
* @props {Object} tableProps - 传递给Table组件的属性
|
|
25
|
-
* @props {Object} searchFormProps - 传递给SearchForm组件的属性
|
|
26
|
-
* @props {boolean} proTable - 是否使用ProTable组件,默认为false
|
|
27
|
-
* @example
|
|
28
|
-
* // 基础用法
|
|
29
|
-
* <ListDataContainer
|
|
30
|
-
* columns={tableColumns}
|
|
31
|
-
* fetchDataApi={getCourseList}
|
|
32
|
-
* searchFormConfig={[
|
|
33
|
-
* {
|
|
34
|
-
* field: Select,
|
|
35
|
-
* name: 'status',
|
|
36
|
-
* label: '状态',
|
|
37
|
-
* }
|
|
38
|
-
* {
|
|
39
|
-
* field: Input,
|
|
40
|
-
* name: 'name',
|
|
41
|
-
* label: '名称',
|
|
42
|
-
* required: true,
|
|
43
|
-
* }
|
|
44
|
-
* ]}
|
|
45
|
-
* />
|
|
46
|
-
*
|
|
8
|
+
/**
|
|
9
|
+
* @component ListDataContainer
|
|
10
|
+
* @description 通用列表数据容器组件,提供搜索表单、数据表格、分页等功能的完整列表页面解决方案
|
|
11
|
+
*
|
|
12
|
+
* @props {Array} columns - 表格列配置,遵循Ant Design Table组件的columns规范
|
|
13
|
+
* @props {Function} fetchDataApi - 数据获取API函数,接收分页和搜索参数,返回包含list和total的对象
|
|
14
|
+
* @props {Array} searchFormConfig - 搜索表单配置数组
|
|
15
|
+
* @param {React.Component} searchFormConfig[].field - 表单项组件(如ControlWrapper.Select)
|
|
16
|
+
* @param {string} searchFormConfig[].name - 表单项字段名
|
|
17
|
+
* @param {string} searchFormConfig[].label - 表单项标签
|
|
18
|
+
* @param {Object} searchFormConfig[].fieldProps - 传递给字段组件的属性
|
|
19
|
+
* @param {Object} searchFormConfig[].itemProps - 传递给Form.Item的属性
|
|
20
|
+
* @param {React.ReactNode} searchFormConfig[].content - 字段组件的子元素(如Select.Option列表)
|
|
21
|
+
* @param {boolean} searchFormConfig[].required - 是否必填
|
|
22
|
+
* @props {string} rowKey - 表格行键值,默认为'id'
|
|
23
|
+
* @props {Object} initialPagination - 初始分页配置,包含current、pageSize等分页属性
|
|
24
|
+
* @props {Object} tableProps - 传递给Table组件的属性
|
|
25
|
+
* @props {Object} searchFormProps - 传递给SearchForm组件的属性
|
|
26
|
+
* @props {boolean} proTable - 是否使用ProTable组件,默认为false
|
|
27
|
+
* @example
|
|
28
|
+
* // 基础用法
|
|
29
|
+
* <ListDataContainer
|
|
30
|
+
* columns={tableColumns}
|
|
31
|
+
* fetchDataApi={getCourseList}
|
|
32
|
+
* searchFormConfig={[
|
|
33
|
+
* {
|
|
34
|
+
* field: Select,
|
|
35
|
+
* name: 'status',
|
|
36
|
+
* label: '状态',
|
|
37
|
+
* }
|
|
38
|
+
* {
|
|
39
|
+
* field: Input,
|
|
40
|
+
* name: 'name',
|
|
41
|
+
* label: '名称',
|
|
42
|
+
* required: true,
|
|
43
|
+
* }
|
|
44
|
+
* ]}
|
|
45
|
+
* />
|
|
46
|
+
*
|
|
47
47
|
*/
|
|
48
48
|
|
|
49
49
|
const SELECT_COMPONENTS = ['Select', 'TreeSelect', 'Cascader', 'DatePicker', 'TimePicker', 'Checkbox', 'Radio', 'Switch', 'Slider', 'Upload'];
|
|
@@ -76,10 +76,10 @@ const ListDataContainer = /*#__PURE__*/forwardRef(({
|
|
|
76
76
|
return Component.displayName || Component.constructor.name;
|
|
77
77
|
};
|
|
78
78
|
|
|
79
|
-
/**
|
|
80
|
-
* 数据加载与刷新方法
|
|
81
|
-
* @param {Object} [overrideParams={}] - 可选,用于覆盖内部参数的键值对
|
|
82
|
-
* 若传入,会覆盖同名的表单参数和分页参数(如page、pageSize或搜索字段)
|
|
79
|
+
/**
|
|
80
|
+
* 数据加载与刷新方法
|
|
81
|
+
* @param {Object} [overrideParams={}] - 可选,用于覆盖内部参数的键值对
|
|
82
|
+
* 若传入,会覆盖同名的表单参数和分页参数(如page、pageSize或搜索字段)
|
|
83
83
|
*/
|
|
84
84
|
const loadDataSource = useCallback(async (overrideParams = {}) => {
|
|
85
85
|
if (!fetchDataApi) return;
|
|
@@ -94,8 +94,15 @@ const ListDataContainer = /*#__PURE__*/forwardRef(({
|
|
|
94
94
|
}
|
|
95
95
|
|
|
96
96
|
// 1. 获取组件内部的表单参数
|
|
97
|
-
|
|
98
|
-
|
|
97
|
+
let formValues = {};
|
|
98
|
+
if (form.current && searchFormConfig.length > 0) {
|
|
99
|
+
try {
|
|
100
|
+
formValues = await form.current.validateFields();
|
|
101
|
+
} catch (error) {
|
|
102
|
+
// 表单验证失败时,使用 getFieldsValue 获取当前值
|
|
103
|
+
formValues = form.current.getFieldsValue() || {};
|
|
104
|
+
}
|
|
105
|
+
}
|
|
99
106
|
|
|
100
107
|
// 2. 构造基础参数:分页参数 + 表单参数
|
|
101
108
|
const baseParams = {
|
|
@@ -141,11 +148,15 @@ const ListDataContainer = /*#__PURE__*/forwardRef(({
|
|
|
141
148
|
};
|
|
142
149
|
const handleReset = () => {
|
|
143
150
|
// 清空表单
|
|
144
|
-
form.current
|
|
145
|
-
obj
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
151
|
+
if (form.current && searchFormConfig.length > 0) {
|
|
152
|
+
form.current.setFieldsValue(searchFormConfig.reduce((obj, item) => {
|
|
153
|
+
obj[item.name] = undefined;
|
|
154
|
+
return obj;
|
|
155
|
+
}, {}));
|
|
156
|
+
}
|
|
157
|
+
if (onRest && form.current) {
|
|
158
|
+
onRest(form.current);
|
|
159
|
+
}
|
|
149
160
|
// 重置分页并使用内部默认参数查询
|
|
150
161
|
setPagination(initialPagination);
|
|
151
162
|
loadDataSource();
|
package/Table/index.d.ts
CHANGED
|
@@ -49,8 +49,8 @@ export interface OptionConfig {
|
|
|
49
49
|
}
|
|
50
50
|
|
|
51
51
|
export interface OverTableProps extends TableProps {
|
|
52
|
-
|
|
53
|
-
|
|
52
|
+
/** 滚动高度偏移量 默认16 */
|
|
53
|
+
scrollYOffset?: number;
|
|
54
54
|
// 是否启用自动计算滚动高度,默认-true
|
|
55
55
|
enableAutoScrollY?: boolean;
|
|
56
56
|
// ProTable options 配置项
|
package/Table/index.js
CHANGED
|
@@ -12,6 +12,7 @@ export default function TablePro(props) {
|
|
|
12
12
|
const tableFooterCls = `${baseCls}-footer`;
|
|
13
13
|
const {
|
|
14
14
|
enableAutoScrollY = true,
|
|
15
|
+
scrollYOffset = 16,
|
|
15
16
|
options = {
|
|
16
17
|
reload: false,
|
|
17
18
|
density: true,
|
|
@@ -80,16 +81,13 @@ export default function TablePro(props) {
|
|
|
80
81
|
};
|
|
81
82
|
}, [ref, enableAutoScrollY, debouncedCalcScrollY]);
|
|
82
83
|
return /*#__PURE__*/React.createElement("div", {
|
|
83
|
-
ref: ref
|
|
84
|
-
style: {
|
|
85
|
-
height: '100%'
|
|
86
|
-
}
|
|
84
|
+
ref: ref
|
|
87
85
|
}, /*#__PURE__*/React.createElement(ProTable, _extends({
|
|
88
86
|
ghost: true,
|
|
89
87
|
columnEmptyText: true,
|
|
90
88
|
search: false,
|
|
91
89
|
scroll: enableAutoScrollY ? {
|
|
92
|
-
y: scrollY || 0
|
|
90
|
+
y: scrollY - scrollYOffset || 0
|
|
93
91
|
} : undefined,
|
|
94
92
|
className: `${antPrefix}-gbs-pro-table`,
|
|
95
93
|
options: options
|