@cqsjjb/jjb-react-admin-component 3.3.14 → 3.3.16
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/AdaptiveTree/index.js +41 -41
- package/ControlWrapper/index.js +4 -4
- package/Editor/index.js +6 -6
- package/FileUploader/index.js +32 -32
- package/FormilyDescriptions/index.js +236 -232
- package/ListDataContainer/index.js +61 -50
- package/SearchForm/index.js +4 -4
- package/package.json +1 -1
package/AdaptiveTree/index.js
CHANGED
|
@@ -1,45 +1,45 @@
|
|
|
1
1
|
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); }
|
|
2
|
-
/**
|
|
3
|
-
* 自适应树组件
|
|
4
|
-
* @param {Object} props - 组件属性
|
|
5
|
-
* @param {Function} [props.titleAction] - 节点操作按钮生成函数
|
|
6
|
-
* @param {Object} node - 当前节点数据
|
|
7
|
-
* @returns {Array} 操作按钮配置数组,每项包含:
|
|
8
|
-
* @property {ReactNode} content - 按钮内容(文本或元素)
|
|
9
|
-
* @property {Function} onClick - 点击事件回调
|
|
10
|
-
* @param {Function} [props.titleIcon] - 节点标题图标生成函数
|
|
11
|
-
* @param {Object} node - 当前节点数据
|
|
12
|
-
* @returns {ReactNode} 图标元素(如 img、Icon 组件等)
|
|
13
|
-
*
|
|
14
|
-
* @note 说明:
|
|
15
|
-
* 1. 自动继承全局 Ant Design 前缀配置(window.process.env.app.antd['ant-prefix'])
|
|
16
|
-
* 2. 节点容器默认占满父元素空间,支持纵向滚动
|
|
17
|
-
* 3. 节点标题超长自动换行,且不会挤压标题图标和操作图标的空间
|
|
18
|
-
* 4. 节点选中时,返回的节点数据为当前节点及其所有父节点id(二维数组)、选中的节点数据(一维数组)
|
|
19
|
-
*
|
|
20
|
-
* @example
|
|
21
|
-
* <AdaptiveTree
|
|
22
|
-
* treeData={[]}
|
|
23
|
-
* fieldNames={{
|
|
24
|
-
* title: 'name',
|
|
25
|
-
* key: 'id'
|
|
26
|
-
* }}
|
|
27
|
-
* titleAction={(node) => [
|
|
28
|
-
* {
|
|
29
|
-
* content: '添加',
|
|
30
|
-
* onClick: (node) => {
|
|
31
|
-
* console.warn("添加", node)
|
|
32
|
-
* }
|
|
33
|
-
* },
|
|
34
|
-
* {
|
|
35
|
-
* content: '编辑',
|
|
36
|
-
* onClick: (node) => {
|
|
37
|
-
* console.warn("编辑", node)
|
|
38
|
-
* }
|
|
39
|
-
* }
|
|
40
|
-
* ]}
|
|
41
|
-
* titleIcon={(node) => <FolderOpenOutlined />}
|
|
42
|
-
* />
|
|
2
|
+
/**
|
|
3
|
+
* 自适应树组件
|
|
4
|
+
* @param {Object} props - 组件属性
|
|
5
|
+
* @param {Function} [props.titleAction] - 节点操作按钮生成函数
|
|
6
|
+
* @param {Object} node - 当前节点数据
|
|
7
|
+
* @returns {Array} 操作按钮配置数组,每项包含:
|
|
8
|
+
* @property {ReactNode} content - 按钮内容(文本或元素)
|
|
9
|
+
* @property {Function} onClick - 点击事件回调
|
|
10
|
+
* @param {Function} [props.titleIcon] - 节点标题图标生成函数
|
|
11
|
+
* @param {Object} node - 当前节点数据
|
|
12
|
+
* @returns {ReactNode} 图标元素(如 img、Icon 组件等)
|
|
13
|
+
*
|
|
14
|
+
* @note 说明:
|
|
15
|
+
* 1. 自动继承全局 Ant Design 前缀配置(window.process.env.app.antd['ant-prefix'])
|
|
16
|
+
* 2. 节点容器默认占满父元素空间,支持纵向滚动
|
|
17
|
+
* 3. 节点标题超长自动换行,且不会挤压标题图标和操作图标的空间
|
|
18
|
+
* 4. 节点选中时,返回的节点数据为当前节点及其所有父节点id(二维数组)、选中的节点数据(一维数组)
|
|
19
|
+
*
|
|
20
|
+
* @example
|
|
21
|
+
* <AdaptiveTree
|
|
22
|
+
* treeData={[]}
|
|
23
|
+
* fieldNames={{
|
|
24
|
+
* title: 'name',
|
|
25
|
+
* key: 'id'
|
|
26
|
+
* }}
|
|
27
|
+
* titleAction={(node) => [
|
|
28
|
+
* {
|
|
29
|
+
* content: '添加',
|
|
30
|
+
* onClick: (node) => {
|
|
31
|
+
* console.warn("添加", node)
|
|
32
|
+
* }
|
|
33
|
+
* },
|
|
34
|
+
* {
|
|
35
|
+
* content: '编辑',
|
|
36
|
+
* onClick: (node) => {
|
|
37
|
+
* console.warn("编辑", node)
|
|
38
|
+
* }
|
|
39
|
+
* }
|
|
40
|
+
* ]}
|
|
41
|
+
* titleIcon={(node) => <FolderOpenOutlined />}
|
|
42
|
+
* />
|
|
43
43
|
*/
|
|
44
44
|
import React, { useState } from 'react';
|
|
45
45
|
import { Tree, Space } from "antd";
|
package/ControlWrapper/index.js
CHANGED
|
@@ -2,10 +2,10 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
|
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { Input as OriginInput, Select as OriginSelect, Cascader as OriginCascader, DatePicker as OriginDatePicker, TreeSelect as OriginTreeSelect } from 'antd';
|
|
4
4
|
|
|
5
|
-
/**
|
|
6
|
-
* 通用包裹组件
|
|
7
|
-
* @param {*} WrappedComponent antd 原生组件
|
|
8
|
-
* @param {*} extraProps 额外的透传配置
|
|
5
|
+
/**
|
|
6
|
+
* 通用包裹组件
|
|
7
|
+
* @param {*} WrappedComponent antd 原生组件
|
|
8
|
+
* @param {*} extraProps 额外的透传配置
|
|
9
9
|
*/
|
|
10
10
|
function withLabel(WrappedComponent, extraProps = {}) {
|
|
11
11
|
return function Wrapper(props) {
|
package/Editor/index.js
CHANGED
|
@@ -4,8 +4,8 @@ import { message } from 'antd';
|
|
|
4
4
|
import { http, tools } from '@cqsjjb/jjb-common-lib';
|
|
5
5
|
import { createEditor, createToolbar } from '@wangeditor-next/editor';
|
|
6
6
|
|
|
7
|
-
/**
|
|
8
|
-
* 工具函数:标准化 HTML 内容为空值
|
|
7
|
+
/**
|
|
8
|
+
* 工具函数:标准化 HTML 内容为空值
|
|
9
9
|
*/
|
|
10
10
|
function normalizeEmptyHtml(html) {
|
|
11
11
|
if (!html) return '';
|
|
@@ -13,8 +13,8 @@ function normalizeEmptyHtml(html) {
|
|
|
13
13
|
return cleaned === '<p><br></p>' || cleaned === '<p></p>' || cleaned === '' ? '' : html;
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
-
/**
|
|
17
|
-
* 校验上传文件类型和大小
|
|
16
|
+
/**
|
|
17
|
+
* 校验上传文件类型和大小
|
|
18
18
|
*/
|
|
19
19
|
function validateFile(file, {
|
|
20
20
|
validTypes,
|
|
@@ -34,8 +34,8 @@ function validateFile(file, {
|
|
|
34
34
|
return true;
|
|
35
35
|
}
|
|
36
36
|
|
|
37
|
-
/**
|
|
38
|
-
* 通用上传函数
|
|
37
|
+
/**
|
|
38
|
+
* 通用上传函数
|
|
39
39
|
*/
|
|
40
40
|
async function handleUpload(file, insertFn, options) {
|
|
41
41
|
const {
|
package/FileUploader/index.js
CHANGED
|
@@ -19,9 +19,9 @@ class FileUploader extends React.Component {
|
|
|
19
19
|
};
|
|
20
20
|
inputFile = /*#__PURE__*/React.createRef();
|
|
21
21
|
|
|
22
|
-
/**
|
|
23
|
-
* @description http配置
|
|
24
|
-
* @returns {{headers: object, fieldName: string, data: object, action: string, url: string}}
|
|
22
|
+
/**
|
|
23
|
+
* @description http配置
|
|
24
|
+
* @returns {{headers: object, fieldName: string, data: object, action: string, url: string}}
|
|
25
25
|
*/
|
|
26
26
|
get httpConfig() {
|
|
27
27
|
const {
|
|
@@ -46,9 +46,9 @@ class FileUploader extends React.Component {
|
|
|
46
46
|
};
|
|
47
47
|
}
|
|
48
48
|
|
|
49
|
-
/**
|
|
50
|
-
* @description 填充值
|
|
51
|
-
* @returns {string[]}
|
|
49
|
+
/**
|
|
50
|
+
* @description 填充值
|
|
51
|
+
* @returns {string[]}
|
|
52
52
|
*/
|
|
53
53
|
get value() {
|
|
54
54
|
const {
|
|
@@ -57,9 +57,9 @@ class FileUploader extends React.Component {
|
|
|
57
57
|
return Array.isArray(value) ? value : value ? [value] : [];
|
|
58
58
|
}
|
|
59
59
|
|
|
60
|
-
/**
|
|
61
|
-
* @description 获取禁用状态
|
|
62
|
-
* @return {boolean}
|
|
60
|
+
/**
|
|
61
|
+
* @description 获取禁用状态
|
|
62
|
+
* @return {boolean}
|
|
63
63
|
*/
|
|
64
64
|
get disabled() {
|
|
65
65
|
const {
|
|
@@ -78,11 +78,11 @@ class FileUploader extends React.Component {
|
|
|
78
78
|
}
|
|
79
79
|
}
|
|
80
80
|
|
|
81
|
-
/**
|
|
82
|
-
* @description 验证文件类型
|
|
83
|
-
* @param fileType {string}
|
|
84
|
-
* @param accept {string}
|
|
85
|
-
* @returns {Promise<never>|Promise<void>}
|
|
81
|
+
/**
|
|
82
|
+
* @description 验证文件类型
|
|
83
|
+
* @param fileType {string}
|
|
84
|
+
* @param accept {string}
|
|
85
|
+
* @returns {Promise<never>|Promise<void>}
|
|
86
86
|
*/
|
|
87
87
|
verifyFileAccept(fileType, accept) {
|
|
88
88
|
const {
|
|
@@ -110,11 +110,11 @@ class FileUploader extends React.Component {
|
|
|
110
110
|
}
|
|
111
111
|
}
|
|
112
112
|
|
|
113
|
-
/**
|
|
114
|
-
* @description 验证文件大小
|
|
115
|
-
* @param fileSize {number}
|
|
116
|
-
* @param maxSize {number}
|
|
117
|
-
* @returns {Promise<never>|Promise<void>}
|
|
113
|
+
/**
|
|
114
|
+
* @description 验证文件大小
|
|
115
|
+
* @param fileSize {number}
|
|
116
|
+
* @param maxSize {number}
|
|
117
|
+
* @returns {Promise<never>|Promise<void>}
|
|
118
118
|
*/
|
|
119
119
|
verifyFileSize(fileSize, maxSize) {
|
|
120
120
|
const {
|
|
@@ -137,10 +137,10 @@ class FileUploader extends React.Component {
|
|
|
137
137
|
}
|
|
138
138
|
}
|
|
139
139
|
|
|
140
|
-
/**
|
|
141
|
-
* @description 发起上传请求
|
|
142
|
-
* @param file {File}
|
|
143
|
-
* @returns {Promise<{url: string, fileName: string, respDesc: string}>}
|
|
140
|
+
/**
|
|
141
|
+
* @description 发起上传请求
|
|
142
|
+
* @param file {File}
|
|
143
|
+
* @returns {Promise<{url: string, fileName: string, respDesc: string}>}
|
|
144
144
|
*/
|
|
145
145
|
onFormRequest(file) {
|
|
146
146
|
const {
|
|
@@ -196,9 +196,9 @@ class FileUploader extends React.Component {
|
|
|
196
196
|
});
|
|
197
197
|
}
|
|
198
198
|
|
|
199
|
-
/**
|
|
200
|
-
* @description 回调
|
|
201
|
-
* @param value {string}
|
|
199
|
+
/**
|
|
200
|
+
* @description 回调
|
|
201
|
+
* @param value {string}
|
|
202
202
|
*/
|
|
203
203
|
onChange(value) {
|
|
204
204
|
const {
|
|
@@ -207,17 +207,17 @@ class FileUploader extends React.Component {
|
|
|
207
207
|
onChange && onChange(value || undefined);
|
|
208
208
|
}
|
|
209
209
|
|
|
210
|
-
/**
|
|
211
|
-
* @description 删除
|
|
212
|
-
* @param sup {number}
|
|
210
|
+
/**
|
|
211
|
+
* @description 删除
|
|
212
|
+
* @param sup {number}
|
|
213
213
|
*/
|
|
214
214
|
onDelete(sup) {
|
|
215
215
|
this.onChange(this.props.multiple ? this.value.filter((_, sub) => sub !== sup) : undefined);
|
|
216
216
|
}
|
|
217
217
|
|
|
218
|
-
/**
|
|
219
|
-
* @description 上传
|
|
220
|
-
* @param target {{files: FileList, value: any}}
|
|
218
|
+
/**
|
|
219
|
+
* @description 上传
|
|
220
|
+
* @param target {{files: FileList, value: any}}
|
|
221
221
|
*/
|
|
222
222
|
onUpload({
|
|
223
223
|
target
|
|
@@ -1,18 +1,14 @@
|
|
|
1
1
|
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); }
|
|
2
|
-
import React
|
|
2
|
+
import React from 'react';
|
|
3
3
|
import { tools } from '@cqsjjb/jjb-common-lib';
|
|
4
4
|
import { FileOutlined, LinkOutlined } from '@ant-design/icons';
|
|
5
|
-
import { Modal, Descriptions, Empty, Image, Tooltip, Spin, Table, Space
|
|
5
|
+
import { Modal, Descriptions, Empty, Image, Tooltip, Spin, Table, Space } from 'antd';
|
|
6
6
|
const formilyItemMargin = new Map([['small', 8], ['middle', 12], ['default', 16]]);
|
|
7
7
|
const IS_PDF_REG = /\.pdf$/;
|
|
8
8
|
const IS_VIDEO_REG = /\.(mp4|ogg|mkv|webm)$/;
|
|
9
|
-
export default function FormilyDescriptions({
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
...props
|
|
13
|
-
}) {
|
|
14
|
-
const [regions, setRegions] = useState([]);
|
|
15
|
-
useEffect(() => {
|
|
9
|
+
export default function FormilyDescriptions(props) {
|
|
10
|
+
const [regions, setRegions] = React.useState([]);
|
|
11
|
+
React.useEffect(() => {
|
|
16
12
|
fetch(`${window.process.env.app.API_HOST}/system/operation/regions`, {
|
|
17
13
|
headers: {
|
|
18
14
|
token: sessionStorage.token
|
|
@@ -20,49 +16,43 @@ export default function FormilyDescriptions({
|
|
|
20
16
|
}).then(res => res.json()).then(res => {
|
|
21
17
|
if (res.success) {
|
|
22
18
|
setRegions(res.data);
|
|
23
|
-
props.onLoad && props.onLoad();
|
|
24
19
|
}
|
|
25
20
|
});
|
|
26
21
|
}, []);
|
|
27
|
-
const dataSource = tools.getDynamicFormilyFields(schema, values, {
|
|
22
|
+
const dataSource = tools.getDynamicFormilyFields(props.schema, props.values, {
|
|
28
23
|
regions
|
|
29
24
|
});
|
|
30
|
-
|
|
25
|
+
return dataSource.length === 0 ? /*#__PURE__*/React.createElement(Empty, {
|
|
31
26
|
image: Empty.PRESENTED_IMAGE_SIMPLE
|
|
32
|
-
})
|
|
33
|
-
return /*#__PURE__*/React.createElement(DescriptionsRender, _extends({
|
|
27
|
+
}) : /*#__PURE__*/React.createElement(DescriptionsRender, _extends({
|
|
34
28
|
dataSource: dataSource
|
|
35
29
|
}, props));
|
|
36
30
|
}
|
|
37
|
-
|
|
38
|
-
dataSource,
|
|
39
|
-
|
|
40
|
-
...props
|
|
41
|
-
}) {
|
|
42
|
-
return dataSource.map((item, index) => {
|
|
43
|
-
const isLast = index === dataSource.length - 1;
|
|
44
|
-
const marginBottom = isLast ? 0 : formilyItemMargin.get(size);
|
|
45
|
-
const items = item.fromComponentEnum === 'GRID_FORM' ? item.children.map((child, childIndex) => ({
|
|
46
|
-
key: childIndex,
|
|
47
|
-
span: child.formType === 'Table' ? props.column : 1,
|
|
48
|
-
label: child.name,
|
|
49
|
-
children: /*#__PURE__*/React.createElement(ItemRender, _extends({
|
|
50
|
-
data: child
|
|
51
|
-
}, props))
|
|
52
|
-
})) : [{
|
|
53
|
-
key: 1,
|
|
54
|
-
label: item.name,
|
|
55
|
-
children: /*#__PURE__*/React.createElement(ItemRender, _extends({
|
|
56
|
-
data: item
|
|
57
|
-
}, props))
|
|
58
|
-
}];
|
|
31
|
+
function DescriptionsRender(props) {
|
|
32
|
+
return props.dataSource.map((item, index) => {
|
|
33
|
+
const isLast = index === props.dataSource.length - 1;
|
|
59
34
|
return /*#__PURE__*/React.createElement(Descriptions, {
|
|
60
35
|
key: index,
|
|
61
|
-
size: size,
|
|
36
|
+
size: props.size,
|
|
62
37
|
style: {
|
|
63
|
-
marginBottom
|
|
38
|
+
marginBottom: isLast ? 0 : formilyItemMargin.get(props.size || 'default')
|
|
64
39
|
},
|
|
65
|
-
items:
|
|
40
|
+
items: item.fromComponentEnum === 'GRID_FORM' ? item.children.map((child, childIndex) => {
|
|
41
|
+
return {
|
|
42
|
+
key: childIndex,
|
|
43
|
+
span: child.formType === 'Table' ? props.column : 1,
|
|
44
|
+
label: child.name,
|
|
45
|
+
children: /*#__PURE__*/React.createElement(ItemRender, _extends({
|
|
46
|
+
data: child
|
|
47
|
+
}, props))
|
|
48
|
+
};
|
|
49
|
+
}) : [{
|
|
50
|
+
key: 1,
|
|
51
|
+
label: item.name,
|
|
52
|
+
children: /*#__PURE__*/React.createElement(ItemRender, _extends({
|
|
53
|
+
data: item
|
|
54
|
+
}, props))
|
|
55
|
+
}],
|
|
66
56
|
colon: props.colon,
|
|
67
57
|
title: props.title,
|
|
68
58
|
extra: props.extra,
|
|
@@ -73,67 +63,69 @@ export function DescriptionsRender({
|
|
|
73
63
|
});
|
|
74
64
|
});
|
|
75
65
|
}
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
return data.formType === 'Table' ? /*#__PURE__*/React.createElement(RenderTable, {
|
|
100
|
-
columns: data.tableColumns,
|
|
101
|
-
dataSource: data.value,
|
|
102
|
-
imageWidth: imageWidth,
|
|
103
|
-
imageHeight: imageHeight,
|
|
104
|
-
imagePreview: imagePreview,
|
|
105
|
-
extraFileLink: extraFileLink,
|
|
106
|
-
onPreview: handlePreview,
|
|
107
|
-
systemStyle: systemStyle
|
|
108
|
-
}) : data.value.map((file, index) => /*#__PURE__*/React.createElement(RenderFileItem, {
|
|
109
|
-
key: index,
|
|
110
|
-
url: file.url,
|
|
111
|
-
name: file.name,
|
|
112
|
-
isImage: file.isImage,
|
|
113
|
-
imageWidth: imageWidth,
|
|
114
|
-
imageHeight: imageHeight,
|
|
115
|
-
imagePreview: imagePreview,
|
|
116
|
-
extraFileLink: extraFileLink,
|
|
117
|
-
onPreview: () => handlePreview(file.url),
|
|
118
|
-
systemStyle: systemStyle
|
|
119
|
-
}));
|
|
120
|
-
}
|
|
121
|
-
return tools.textPlaceholder();
|
|
66
|
+
function ItemRender(props) {
|
|
67
|
+
const [open, setOpen] = React.useState(false);
|
|
68
|
+
const [previewUrl, setPreviewUrl] = React.useState('');
|
|
69
|
+
const {
|
|
70
|
+
data,
|
|
71
|
+
imageWidth,
|
|
72
|
+
imageHeight,
|
|
73
|
+
imagePreview,
|
|
74
|
+
extraFileLink
|
|
75
|
+
} = props;
|
|
76
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, tools.isArray(data.value)
|
|
77
|
+
// 如果数据是字符串集合 或 数字集合
|
|
78
|
+
? tools.isStringArray(data.value) || tools.isNumberArray(data.value)
|
|
79
|
+
// 直接字符串拼接
|
|
80
|
+
? data.value.join('、')
|
|
81
|
+
// 如果是对象集合
|
|
82
|
+
: tools.isObjectArray(data.value)
|
|
83
|
+
// 如果数据表单类型是 数据表格
|
|
84
|
+
? data.formType === 'Table'
|
|
85
|
+
// 处理数据表格
|
|
86
|
+
? /*#__PURE__*/React.createElement("div", {
|
|
87
|
+
style: {
|
|
88
|
+
width: '100%'
|
|
122
89
|
}
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
90
|
+
}, /*#__PURE__*/React.createElement(RenderTable, {
|
|
91
|
+
columns: data.tableColumns,
|
|
92
|
+
dataSource: data.value,
|
|
93
|
+
imageWidth: imageWidth,
|
|
94
|
+
imageHeight: imageHeight,
|
|
95
|
+
imagePreview: imagePreview,
|
|
96
|
+
extraFileLink: extraFileLink,
|
|
97
|
+
onPreview: url => {
|
|
98
|
+
setOpen(true);
|
|
99
|
+
setPreviewUrl(url);
|
|
100
|
+
}
|
|
101
|
+
}))
|
|
102
|
+
|
|
103
|
+
// 否则就是文件数据
|
|
104
|
+
: /*#__PURE__*/React.createElement("div", null, data.value.map((file, index) => /*#__PURE__*/React.createElement(RenderFileItem, {
|
|
105
|
+
key: index,
|
|
106
|
+
url: file.url,
|
|
107
|
+
name: file.name,
|
|
108
|
+
isImage: file.isImage,
|
|
109
|
+
imageWidth: imageWidth,
|
|
110
|
+
imageHeight: imageHeight,
|
|
111
|
+
imagePreview: imagePreview,
|
|
112
|
+
extraFileLink: extraFileLink,
|
|
113
|
+
onPreview: () => {
|
|
114
|
+
setOpen(true);
|
|
115
|
+
setPreviewUrl(file.url);
|
|
116
|
+
}
|
|
117
|
+
}))) : tools.textPlaceholder()
|
|
118
|
+
// 处理文本数据
|
|
119
|
+
: /*#__PURE__*/React.createElement(RenderText, {
|
|
120
|
+
name: data.name,
|
|
121
|
+
value: data.value,
|
|
122
|
+
renderItemText: props.renderItemText
|
|
123
|
+
}), /*#__PURE__*/React.createElement(Modal, {
|
|
132
124
|
destroyOnClose: true,
|
|
133
125
|
title: "\u67E5\u770B\u6587\u4EF6",
|
|
134
126
|
open: open,
|
|
135
127
|
width: 1100,
|
|
136
|
-
footer:
|
|
128
|
+
footer: false,
|
|
137
129
|
onCancel: () => setOpen(false)
|
|
138
130
|
}, IS_PDF_REG.test(previewUrl) && /*#__PURE__*/React.createElement("embed", {
|
|
139
131
|
src: previewUrl,
|
|
@@ -143,120 +135,126 @@ export function ItemRender({
|
|
|
143
135
|
controls: true,
|
|
144
136
|
src: previewUrl,
|
|
145
137
|
width: "100%",
|
|
146
|
-
height: 350
|
|
138
|
+
height: "350"
|
|
147
139
|
})));
|
|
148
140
|
}
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
const
|
|
157
|
-
const
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
setText(value);
|
|
141
|
+
function RenderText(props) {
|
|
142
|
+
const {
|
|
143
|
+
value
|
|
144
|
+
} = props;
|
|
145
|
+
const [text, setText] = React.useState();
|
|
146
|
+
const [loading, setLoading] = React.useState(false);
|
|
147
|
+
const getVal = item => item?.value ?? item?.key ?? item?.id ?? item?.code ?? item?.bizTypeCode ?? item?.classificationCode ?? '';
|
|
148
|
+
const getLab = item => item?.label ?? item?.name ?? item?.title ?? item?.bizTypeName ?? item?.classificationName ?? '';
|
|
149
|
+
const getSelectedDisplayValue = item => {
|
|
150
|
+
const val = getVal(item);
|
|
151
|
+
const lab = getLab(item);
|
|
152
|
+
return val && lab ? `${val}&${lab}` : lab || val || '';
|
|
153
|
+
};
|
|
154
|
+
const findInTree = (nodes, id) => {
|
|
155
|
+
if (!Array.isArray(nodes)) return null;
|
|
156
|
+
for (const node of nodes) {
|
|
157
|
+
const val = getVal(node);
|
|
158
|
+
if (val === id || String(val) === String(id)) return node;
|
|
159
|
+
if (node.children) {
|
|
160
|
+
const found = findInTree(node.children, id);
|
|
161
|
+
if (found) return found;
|
|
162
|
+
}
|
|
172
163
|
}
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
164
|
+
return null;
|
|
165
|
+
};
|
|
166
|
+
const toDisplayLabels = displayArr => {
|
|
167
|
+
return (displayArr || []).map(s => typeof s === 'string' && s.includes('&') ? s.split('&').pop() : s).filter(Boolean).join('、') || tools.textPlaceholder();
|
|
168
|
+
};
|
|
169
|
+
React.useEffect(() => {
|
|
170
|
+
if (value) {
|
|
171
|
+
if (value.load) {
|
|
172
|
+
setLoading(true);
|
|
173
|
+
value.load().then(res => res.json()).then(res => {
|
|
174
|
+
try {
|
|
175
|
+
if (res.success) {
|
|
176
|
+
const rawData = res.data || [];
|
|
177
|
+
let displayText = [];
|
|
178
|
+
const rawSelected = value?.selected ?? value?.value;
|
|
179
|
+
const selected = tools.isArray(rawSelected) ? rawSelected : rawSelected !== undefined && rawSelected !== null && rawSelected !== '' ? [rawSelected] : [];
|
|
180
|
+
if (selected.length > 0) {
|
|
181
|
+
const isIdArray = selected.every(s => tools.isNumber(s) || tools.isString(s));
|
|
182
|
+
if (isIdArray) {
|
|
183
|
+
displayText = selected.map(id => {
|
|
184
|
+
const matched = findInTree(rawData, id);
|
|
185
|
+
return matched ? getSelectedDisplayValue(matched) : String(id);
|
|
186
|
+
}).filter(Boolean);
|
|
187
|
+
} else {
|
|
188
|
+
displayText = selected.map(getSelectedDisplayValue).filter(Boolean);
|
|
189
|
+
}
|
|
190
|
+
}
|
|
191
|
+
setText(displayText);
|
|
192
|
+
}
|
|
193
|
+
} finally {
|
|
194
|
+
setLoading(false);
|
|
195
|
+
}
|
|
196
|
+
}).catch(() => setLoading(false));
|
|
197
|
+
} else {
|
|
198
|
+
setText(value);
|
|
183
199
|
}
|
|
184
|
-
}, /*#__PURE__*/React.createElement(Spin, {
|
|
185
|
-
spinning: loading
|
|
186
|
-
}, /*#__PURE__*/React.createElement(TreeSelect, {
|
|
187
|
-
treeCheckable: true,
|
|
188
|
-
treeDefaultExpandAll: true,
|
|
189
|
-
style: {
|
|
190
|
-
width: '100%'
|
|
191
|
-
},
|
|
192
|
-
value: text,
|
|
193
|
-
variant: "borderless",
|
|
194
|
-
treeData: options,
|
|
195
|
-
showSearch: false,
|
|
196
|
-
maxTagCount: maxTagCount
|
|
197
|
-
})));
|
|
198
|
-
}
|
|
199
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
200
|
-
style: {
|
|
201
|
-
...systemStyle
|
|
202
200
|
}
|
|
203
|
-
},
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
}) : tools.textPlaceholder(text));
|
|
207
|
-
}
|
|
208
|
-
export function RenderFileItem(props) {
|
|
209
|
-
const {
|
|
210
|
-
isImage,
|
|
211
|
-
url,
|
|
212
|
-
name,
|
|
213
|
-
imageWidth,
|
|
214
|
-
imageHeight,
|
|
215
|
-
imagePreview,
|
|
216
|
-
extraFileLink,
|
|
217
|
-
onPreview,
|
|
218
|
-
systemStyle
|
|
219
|
-
} = props;
|
|
220
|
-
return isImage ? /*#__PURE__*/React.createElement(RenderImage, {
|
|
221
|
-
url: url,
|
|
222
|
-
imageWidth: imageWidth,
|
|
223
|
-
imageHeight: imageHeight,
|
|
224
|
-
imagePreview: imagePreview,
|
|
225
|
-
extraFileLink: extraFileLink,
|
|
226
|
-
systemStyle: systemStyle
|
|
227
|
-
}) : /*#__PURE__*/React.createElement(Tooltip, {
|
|
228
|
-
title: url
|
|
201
|
+
}, [props.value]);
|
|
202
|
+
return Array.isArray(text) ? /*#__PURE__*/React.createElement(Spin, {
|
|
203
|
+
spinning: loading
|
|
229
204
|
}, /*#__PURE__*/React.createElement("div", {
|
|
230
205
|
style: {
|
|
231
|
-
|
|
206
|
+
width: '100%',
|
|
207
|
+
wordBreak: 'break-word',
|
|
208
|
+
whiteSpace: 'normal'
|
|
232
209
|
}
|
|
233
|
-
},
|
|
234
|
-
|
|
235
|
-
name: name
|
|
236
|
-
|
|
237
|
-
extraFileLink: extraFileLink
|
|
238
|
-
}) : /*#__PURE__*/React.createElement(RenderInvalidFile, {
|
|
239
|
-
url: url,
|
|
240
|
-
name: name
|
|
241
|
-
})));
|
|
210
|
+
}, toDisplayLabels(text))) : props.renderItemText ? props.renderItemText({
|
|
211
|
+
text,
|
|
212
|
+
name: props.name
|
|
213
|
+
}) : tools.textPlaceholder(text);
|
|
242
214
|
}
|
|
243
|
-
|
|
215
|
+
function RenderFileItem({
|
|
244
216
|
url,
|
|
217
|
+
name,
|
|
218
|
+
isImage,
|
|
245
219
|
imageWidth,
|
|
246
220
|
imageHeight,
|
|
247
221
|
imagePreview,
|
|
248
222
|
extraFileLink,
|
|
249
|
-
|
|
223
|
+
onPreview
|
|
224
|
+
}) {
|
|
225
|
+
if (isImage) {
|
|
226
|
+
return /*#__PURE__*/React.createElement(RenderImage, {
|
|
227
|
+
url: url,
|
|
228
|
+
imageWidth: imageWidth,
|
|
229
|
+
imageHeight: imageHeight,
|
|
230
|
+
imagePreview: imagePreview,
|
|
231
|
+
extraFileLink: extraFileLink
|
|
232
|
+
});
|
|
233
|
+
} else {
|
|
234
|
+
return /*#__PURE__*/React.createElement(Tooltip, {
|
|
235
|
+
title: url
|
|
236
|
+
}, IS_PDF_REG.test(url) || IS_VIDEO_REG.test(url) ? /*#__PURE__*/React.createElement(RenderValidFile, {
|
|
237
|
+
url: url,
|
|
238
|
+
name: name,
|
|
239
|
+
onPreview: onPreview
|
|
240
|
+
}) : /*#__PURE__*/React.createElement(RenderInvalidFile, {
|
|
241
|
+
url: url,
|
|
242
|
+
name: name
|
|
243
|
+
}));
|
|
244
|
+
}
|
|
245
|
+
}
|
|
246
|
+
function RenderImage({
|
|
247
|
+
url,
|
|
248
|
+
imageWidth,
|
|
249
|
+
imageHeight,
|
|
250
|
+
imagePreview,
|
|
251
|
+
extraFileLink
|
|
250
252
|
}) {
|
|
251
253
|
return /*#__PURE__*/React.createElement("span", {
|
|
252
254
|
style: {
|
|
253
255
|
display: 'inline-block',
|
|
254
256
|
marginRight: 4,
|
|
255
|
-
marginBottom: 4
|
|
256
|
-
...(systemStyle ? {
|
|
257
|
-
...systemStyle,
|
|
258
|
-
border: `1px solid ${systemStyle?.color || '#d9d9d9'}`
|
|
259
|
-
} : {})
|
|
257
|
+
marginBottom: 4
|
|
260
258
|
}
|
|
261
259
|
}, /*#__PURE__*/React.createElement(Image, {
|
|
262
260
|
src: url,
|
|
@@ -264,83 +262,89 @@ export function RenderImage({
|
|
|
264
262
|
height: imageHeight || 64,
|
|
265
263
|
preview: extraFileLink ? {
|
|
266
264
|
visible: false,
|
|
267
|
-
onVisibleChange: () =>
|
|
265
|
+
onVisibleChange: () => {
|
|
266
|
+
window.open(url);
|
|
267
|
+
}
|
|
268
268
|
} : imagePreview
|
|
269
269
|
}));
|
|
270
270
|
}
|
|
271
|
-
|
|
271
|
+
function RenderValidFile({
|
|
272
272
|
url,
|
|
273
273
|
name,
|
|
274
274
|
extraFileLink,
|
|
275
275
|
onPreview
|
|
276
276
|
}) {
|
|
277
|
-
const handleClick = () => extraFileLink ? window.open(url) : onPreview();
|
|
278
277
|
return /*#__PURE__*/React.createElement("a", {
|
|
279
278
|
style: {
|
|
280
279
|
gap: 4,
|
|
281
280
|
display: 'flex',
|
|
282
281
|
alignItems: 'center'
|
|
283
282
|
},
|
|
284
|
-
onClick:
|
|
283
|
+
onClick: () => {
|
|
284
|
+
if (extraFileLink) {
|
|
285
|
+
window.open(url);
|
|
286
|
+
} else {
|
|
287
|
+
onPreview();
|
|
288
|
+
}
|
|
289
|
+
}
|
|
285
290
|
}, /*#__PURE__*/React.createElement(FileOutlined, null), name);
|
|
286
291
|
}
|
|
287
|
-
|
|
292
|
+
function RenderInvalidFile({
|
|
288
293
|
url,
|
|
289
294
|
name
|
|
290
295
|
}) {
|
|
291
296
|
return /*#__PURE__*/React.createElement("a", {
|
|
292
297
|
href: url,
|
|
293
|
-
target: "_blank",
|
|
294
298
|
style: {
|
|
295
299
|
gap: 4,
|
|
296
300
|
display: 'flex',
|
|
297
301
|
alignItems: 'center'
|
|
298
|
-
}
|
|
302
|
+
},
|
|
303
|
+
target: "_blank"
|
|
299
304
|
}, /*#__PURE__*/React.createElement(LinkOutlined, null), name);
|
|
300
305
|
}
|
|
301
|
-
|
|
306
|
+
function RenderTable({
|
|
302
307
|
columns,
|
|
303
308
|
dataSource,
|
|
304
309
|
imageWidth,
|
|
305
310
|
imageHeight,
|
|
306
311
|
imagePreview,
|
|
307
312
|
extraFileLink,
|
|
308
|
-
onPreview
|
|
309
|
-
systemStyle
|
|
313
|
+
onPreview
|
|
310
314
|
}) {
|
|
311
|
-
const renderColumn = col => {
|
|
312
|
-
const originalRender = col.render;
|
|
313
|
-
col.render = row => {
|
|
314
|
-
if (tools.isNumberArray(row) || tools.isStringArray(row)) {
|
|
315
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
316
|
-
style: systemStyle
|
|
317
|
-
}, row.join(','));
|
|
318
|
-
}
|
|
319
|
-
if (tools.isUploadFileListArray(row)) {
|
|
320
|
-
return /*#__PURE__*/React.createElement(Space, {
|
|
321
|
-
direction: "vertical"
|
|
322
|
-
}, tools.getDynamicUploadFileList(row).map((file, index) => /*#__PURE__*/React.createElement(RenderFileItem, {
|
|
323
|
-
key: index,
|
|
324
|
-
url: file.url,
|
|
325
|
-
name: file.name,
|
|
326
|
-
isImage: file.isImage,
|
|
327
|
-
imageWidth: imageWidth,
|
|
328
|
-
imageHeight: imageHeight,
|
|
329
|
-
imagePreview: imagePreview,
|
|
330
|
-
extraFileLink: extraFileLink,
|
|
331
|
-
onPreview: () => onPreview(file.url),
|
|
332
|
-
systemStyle: systemStyle
|
|
333
|
-
})));
|
|
334
|
-
}
|
|
335
|
-
if (tools.isObject(row)) return '数据错误';
|
|
336
|
-
return originalRender ? originalRender(row) : row;
|
|
337
|
-
};
|
|
338
|
-
return col;
|
|
339
|
-
};
|
|
340
315
|
return /*#__PURE__*/React.createElement(Table, {
|
|
341
316
|
rowKey: (record, index) => index,
|
|
342
|
-
columns: columns.map(
|
|
343
|
-
|
|
344
|
-
|
|
317
|
+
columns: columns.map(item => {
|
|
318
|
+
item.render = row => {
|
|
319
|
+
if (tools.isNumberArray(row) || tools.isStringArray(row)) {
|
|
320
|
+
return row?.join(',');
|
|
321
|
+
}
|
|
322
|
+
if (tools.isUploadFileListArray(row)) {
|
|
323
|
+
return /*#__PURE__*/React.createElement(Space, {
|
|
324
|
+
direction: "vertical"
|
|
325
|
+
}, tools.getDynamicUploadFileList(row).map((file, index) => {
|
|
326
|
+
return /*#__PURE__*/React.createElement(RenderFileItem, {
|
|
327
|
+
key: index,
|
|
328
|
+
url: file.url,
|
|
329
|
+
name: file.name,
|
|
330
|
+
isImage: file.isImage,
|
|
331
|
+
imageWidth: imageWidth,
|
|
332
|
+
imageHeight: imageHeight,
|
|
333
|
+
imagePreview: imagePreview,
|
|
334
|
+
extraFileLink: extraFileLink,
|
|
335
|
+
onPreview: () => {
|
|
336
|
+
onPreview(file.url);
|
|
337
|
+
}
|
|
338
|
+
});
|
|
339
|
+
}));
|
|
340
|
+
}
|
|
341
|
+
if (tools.isObject(row)) {
|
|
342
|
+
return '数据错误';
|
|
343
|
+
}
|
|
344
|
+
return row;
|
|
345
|
+
};
|
|
346
|
+
return item;
|
|
347
|
+
}),
|
|
348
|
+
dataSource: dataSource
|
|
345
349
|
});
|
|
346
350
|
}
|
|
@@ -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/SearchForm/index.js
CHANGED
|
@@ -91,10 +91,10 @@ const SearchForm = ({
|
|
|
91
91
|
onClick: handleToggle
|
|
92
92
|
}, isOpen ? '收起' : '展开'));
|
|
93
93
|
|
|
94
|
-
/**
|
|
95
|
-
* 处理 formLine,确保所有 Form.Item 都有 noStyle 属性
|
|
96
|
-
* @param {ReactNode[]} nodes - 表单节点数组
|
|
97
|
-
* @returns {ReactNode[]} - 处理后的节点数组
|
|
94
|
+
/**
|
|
95
|
+
* 处理 formLine,确保所有 Form.Item 都有 noStyle 属性
|
|
96
|
+
* @param {ReactNode[]} nodes - 表单节点数组
|
|
97
|
+
* @returns {ReactNode[]} - 处理后的节点数组
|
|
98
98
|
*/
|
|
99
99
|
const processFormLine = nodes => {
|
|
100
100
|
return nodes.map(node => {
|