@cqsjjb/jjb-react-admin-component 3.3.1-beta.8 → 3.3.2
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 +3 -1
- package/FormilyDescriptions/index.js +51 -18
- package/ListDataContainer/index.js +3 -2
- package/PhoneBox/dianchi.svg +1 -0
- package/PhoneBox/index.js +27 -16
- package/PhoneBox/index.less +1 -1
- package/PhoneBox/phone.svg +135 -0
- package/PhoneBox/shexiang.svg +61 -0
- package/PhoneBox/wangluo.svg +1 -0
- package/PhoneBox/xinhao.svg +1 -0
- package/SearchForm/index.js +68 -10
- package/Table/index.d.ts +64 -17
- package/Table/index.js +79 -97
- package/Table/index.less +5 -3
- package/package.json +1 -1
- package/ControlWrapper/index.less +0 -38
package/AdaptiveTree/index.js
CHANGED
|
@@ -170,7 +170,9 @@ export default props => {
|
|
|
170
170
|
}
|
|
171
171
|
}, node[title])), /*#__PURE__*/React.createElement(Space, null, titleAction ? (titleAction(node) || []).map(item => {
|
|
172
172
|
return /*#__PURE__*/React.createElement("div", {
|
|
173
|
-
onClick:
|
|
173
|
+
onClick: e => {
|
|
174
|
+
e.stopPropagation();
|
|
175
|
+
e.preventDefault();
|
|
174
176
|
item.onClick && item.onClick(node);
|
|
175
177
|
},
|
|
176
178
|
className: "operation"
|
|
@@ -18,7 +18,10 @@ export default function FormilyDescriptions({
|
|
|
18
18
|
token: sessionStorage.token
|
|
19
19
|
}
|
|
20
20
|
}).then(res => res.json()).then(res => {
|
|
21
|
-
if (res.success)
|
|
21
|
+
if (res.success) {
|
|
22
|
+
setRegions(res.data);
|
|
23
|
+
props.onLoad && props.onLoad();
|
|
24
|
+
}
|
|
22
25
|
});
|
|
23
26
|
}, []);
|
|
24
27
|
const dataSource = tools.getDynamicFormilyFields(schema, values, {
|
|
@@ -85,9 +88,12 @@ export function ItemRender({
|
|
|
85
88
|
setOpen(true);
|
|
86
89
|
};
|
|
87
90
|
const renderContent = () => {
|
|
91
|
+
const systemStyle = props.systemStyle ? props.systemStyle(data.fieldCode) : {};
|
|
88
92
|
if (tools.isArray(data.value)) {
|
|
89
93
|
if (tools.isStringArray(data.value) || tools.isNumberArray(data.value)) {
|
|
90
|
-
return
|
|
94
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
95
|
+
style: systemStyle
|
|
96
|
+
}, data.value.join('、'));
|
|
91
97
|
}
|
|
92
98
|
if (tools.isObjectArray(data.value)) {
|
|
93
99
|
return data.formType === 'Table' ? /*#__PURE__*/React.createElement(RenderTable, {
|
|
@@ -97,7 +103,8 @@ export function ItemRender({
|
|
|
97
103
|
imageHeight: imageHeight,
|
|
98
104
|
imagePreview: imagePreview,
|
|
99
105
|
extraFileLink: extraFileLink,
|
|
100
|
-
onPreview: handlePreview
|
|
106
|
+
onPreview: handlePreview,
|
|
107
|
+
systemStyle: systemStyle
|
|
101
108
|
}) : data.value.map((file, index) => /*#__PURE__*/React.createElement(RenderFileItem, {
|
|
102
109
|
key: index,
|
|
103
110
|
url: file.url,
|
|
@@ -107,7 +114,8 @@ export function ItemRender({
|
|
|
107
114
|
imageHeight: imageHeight,
|
|
108
115
|
imagePreview: imagePreview,
|
|
109
116
|
extraFileLink: extraFileLink,
|
|
110
|
-
onPreview: () => handlePreview(file.url)
|
|
117
|
+
onPreview: () => handlePreview(file.url),
|
|
118
|
+
systemStyle: systemStyle
|
|
111
119
|
}));
|
|
112
120
|
}
|
|
113
121
|
return tools.textPlaceholder();
|
|
@@ -116,7 +124,8 @@ export function ItemRender({
|
|
|
116
124
|
name: data.name,
|
|
117
125
|
value: data.value,
|
|
118
126
|
maxTagCount: props.maxTagCount,
|
|
119
|
-
renderItemText: props.renderItemText
|
|
127
|
+
renderItemText: props.renderItemText,
|
|
128
|
+
systemStyle: systemStyle
|
|
120
129
|
});
|
|
121
130
|
};
|
|
122
131
|
return /*#__PURE__*/React.createElement(Fragment, null, renderContent(), /*#__PURE__*/React.createElement(Modal, {
|
|
@@ -141,7 +150,8 @@ export function RenderText({
|
|
|
141
150
|
value,
|
|
142
151
|
name,
|
|
143
152
|
maxTagCount = 1,
|
|
144
|
-
renderItemText
|
|
153
|
+
renderItemText,
|
|
154
|
+
systemStyle
|
|
145
155
|
}) {
|
|
146
156
|
const [text, setText] = useState();
|
|
147
157
|
const [options, setOptions] = useState([]);
|
|
@@ -168,7 +178,8 @@ export function RenderText({
|
|
|
168
178
|
width: '100%',
|
|
169
179
|
display: 'flex',
|
|
170
180
|
minHeight: 22,
|
|
171
|
-
flexDirection: 'column'
|
|
181
|
+
flexDirection: 'column',
|
|
182
|
+
...systemStyle
|
|
172
183
|
}
|
|
173
184
|
}, /*#__PURE__*/React.createElement(Spin, {
|
|
174
185
|
spinning: loading
|
|
@@ -185,10 +196,14 @@ export function RenderText({
|
|
|
185
196
|
maxTagCount: maxTagCount
|
|
186
197
|
})));
|
|
187
198
|
}
|
|
188
|
-
return
|
|
199
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
200
|
+
style: {
|
|
201
|
+
...systemStyle
|
|
202
|
+
}
|
|
203
|
+
}, renderItemText ? renderItemText({
|
|
189
204
|
text,
|
|
190
205
|
name
|
|
191
|
-
}) : tools.textPlaceholder(text);
|
|
206
|
+
}) : tools.textPlaceholder(text));
|
|
192
207
|
}
|
|
193
208
|
export function RenderFileItem(props) {
|
|
194
209
|
const {
|
|
@@ -199,16 +214,22 @@ export function RenderFileItem(props) {
|
|
|
199
214
|
imageHeight,
|
|
200
215
|
imagePreview,
|
|
201
216
|
extraFileLink,
|
|
202
|
-
onPreview
|
|
217
|
+
onPreview,
|
|
218
|
+
systemStyle
|
|
203
219
|
} = props;
|
|
204
220
|
return isImage ? /*#__PURE__*/React.createElement(RenderImage, {
|
|
205
221
|
url: url,
|
|
206
222
|
imageWidth: imageWidth,
|
|
207
223
|
imageHeight: imageHeight,
|
|
208
224
|
imagePreview: imagePreview,
|
|
209
|
-
extraFileLink: extraFileLink
|
|
225
|
+
extraFileLink: extraFileLink,
|
|
226
|
+
systemStyle: systemStyle
|
|
210
227
|
}) : /*#__PURE__*/React.createElement(Tooltip, {
|
|
211
228
|
title: url
|
|
229
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
230
|
+
style: {
|
|
231
|
+
...systemStyle
|
|
232
|
+
}
|
|
212
233
|
}, IS_PDF_REG.test(url) || IS_VIDEO_REG.test(url) ? /*#__PURE__*/React.createElement(RenderValidFile, {
|
|
213
234
|
url: url,
|
|
214
235
|
name: name,
|
|
@@ -217,20 +238,25 @@ export function RenderFileItem(props) {
|
|
|
217
238
|
}) : /*#__PURE__*/React.createElement(RenderInvalidFile, {
|
|
218
239
|
url: url,
|
|
219
240
|
name: name
|
|
220
|
-
}));
|
|
241
|
+
})));
|
|
221
242
|
}
|
|
222
243
|
export function RenderImage({
|
|
223
244
|
url,
|
|
224
245
|
imageWidth,
|
|
225
246
|
imageHeight,
|
|
226
247
|
imagePreview,
|
|
227
|
-
extraFileLink
|
|
248
|
+
extraFileLink,
|
|
249
|
+
systemStyle
|
|
228
250
|
}) {
|
|
229
251
|
return /*#__PURE__*/React.createElement("span", {
|
|
230
252
|
style: {
|
|
231
253
|
display: 'inline-block',
|
|
232
254
|
marginRight: 4,
|
|
233
|
-
marginBottom: 4
|
|
255
|
+
marginBottom: 4,
|
|
256
|
+
...(systemStyle ? {
|
|
257
|
+
...systemStyle,
|
|
258
|
+
border: `1px solid ${systemStyle?.color || '#d9d9d9'}`
|
|
259
|
+
} : {})
|
|
234
260
|
}
|
|
235
261
|
}, /*#__PURE__*/React.createElement(Image, {
|
|
236
262
|
src: url,
|
|
@@ -279,12 +305,17 @@ export function RenderTable({
|
|
|
279
305
|
imageHeight,
|
|
280
306
|
imagePreview,
|
|
281
307
|
extraFileLink,
|
|
282
|
-
onPreview
|
|
308
|
+
onPreview,
|
|
309
|
+
systemStyle
|
|
283
310
|
}) {
|
|
284
311
|
const renderColumn = col => {
|
|
285
312
|
const originalRender = col.render;
|
|
286
313
|
col.render = row => {
|
|
287
|
-
if (tools.isNumberArray(row) || tools.isStringArray(row))
|
|
314
|
+
if (tools.isNumberArray(row) || tools.isStringArray(row)) {
|
|
315
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
316
|
+
style: systemStyle
|
|
317
|
+
}, row.join(','));
|
|
318
|
+
}
|
|
288
319
|
if (tools.isUploadFileListArray(row)) {
|
|
289
320
|
return /*#__PURE__*/React.createElement(Space, {
|
|
290
321
|
direction: "vertical"
|
|
@@ -297,7 +328,8 @@ export function RenderTable({
|
|
|
297
328
|
imageHeight: imageHeight,
|
|
298
329
|
imagePreview: imagePreview,
|
|
299
330
|
extraFileLink: extraFileLink,
|
|
300
|
-
onPreview: () => onPreview(file.url)
|
|
331
|
+
onPreview: () => onPreview(file.url),
|
|
332
|
+
systemStyle: systemStyle
|
|
301
333
|
})));
|
|
302
334
|
}
|
|
303
335
|
if (tools.isObject(row)) return '数据错误';
|
|
@@ -308,6 +340,7 @@ export function RenderTable({
|
|
|
308
340
|
return /*#__PURE__*/React.createElement(Table, {
|
|
309
341
|
rowKey: (record, index) => index,
|
|
310
342
|
columns: columns.map(renderColumn),
|
|
311
|
-
dataSource: dataSource
|
|
343
|
+
dataSource: dataSource,
|
|
344
|
+
style: systemStyle
|
|
312
345
|
});
|
|
313
346
|
}
|
|
@@ -59,7 +59,8 @@ const ListDataContainer = /*#__PURE__*/forwardRef(({
|
|
|
59
59
|
showQuickJumper: true
|
|
60
60
|
},
|
|
61
61
|
tableProps = {},
|
|
62
|
-
proTable = false
|
|
62
|
+
proTable = false,
|
|
63
|
+
onRest = () => {}
|
|
63
64
|
}, ref) => {
|
|
64
65
|
const [form] = Form.useForm();
|
|
65
66
|
const [tableData, setTableData] = useState([]);
|
|
@@ -130,12 +131,12 @@ const ListDataContainer = /*#__PURE__*/forwardRef(({
|
|
|
130
131
|
obj[item.name] = undefined;
|
|
131
132
|
return obj;
|
|
132
133
|
}, {}));
|
|
134
|
+
onRest && onRest(form);
|
|
133
135
|
// 重置分页并使用内部默认参数查询
|
|
134
136
|
setPagination(initialPagination);
|
|
135
137
|
loadDataSource();
|
|
136
138
|
};
|
|
137
139
|
const handlePaginationChange = newPagination => {
|
|
138
|
-
console.warn("ssssssssssss", newPagination);
|
|
139
140
|
// 更新分页后,用新分页参数查询
|
|
140
141
|
setPagination({
|
|
141
142
|
...newPagination,
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M938.667 426.667v-85.334c0-46.933-38.4-85.333-85.334-85.333H128c-46.933 0-85.333 38.4-85.333 85.333v341.334C42.667 729.6 81.067 768 128 768h725.333c46.934 0 85.334-38.4 85.334-85.333v-85.334c23.466 0 42.666-19.2 42.666-42.666v-85.334c0-23.466-19.2-42.666-42.666-42.666zM896 469.333v213.334c0 23.466-19.2 42.666-42.667 42.666H128c-23.467 0-42.667-19.2-42.667-42.666V341.333c0-23.466 19.2-42.666 42.667-42.666h725.333c23.467 0 42.667 19.2 42.667 42.666v128zM128 682.667h554.667V341.333H128v341.334z" fill="#2C2C2C" /></svg>
|
package/PhoneBox/index.js
CHANGED
|
@@ -1,6 +1,12 @@
|
|
|
1
1
|
import React, { useEffect, useState, useRef } from 'react';
|
|
2
2
|
import { Empty, Space, message, Tooltip, Button, QRCode } from 'antd';
|
|
3
3
|
import { SyncOutlined } from '@ant-design/icons';
|
|
4
|
+
import { http } from '@cqsjjb/jjb-common-lib';
|
|
5
|
+
import shexiang from './shexiang.svg';
|
|
6
|
+
import xinhao from './xinhao.svg';
|
|
7
|
+
import wangluo from './wangluo.svg';
|
|
8
|
+
import dianchi from './dianchi.svg';
|
|
9
|
+
import phone from './phone.svg';
|
|
4
10
|
import './index.less';
|
|
5
11
|
export default props => {
|
|
6
12
|
const {
|
|
@@ -36,7 +42,7 @@ export default props => {
|
|
|
36
42
|
useEffect(() => {
|
|
37
43
|
const handleClickOutside = e => {
|
|
38
44
|
const button = qrcodeButtonRef.current;
|
|
39
|
-
const tooltip = document.querySelector('
|
|
45
|
+
const tooltip = document.querySelector(`.${window.process.env.app?.antd?.['ant-prefix'] || 'ant'}-tooltip`);
|
|
40
46
|
if (button && !button.contains(e.target) && tooltip && !tooltip.contains(e.target)) {
|
|
41
47
|
setQrcodeVisible(false);
|
|
42
48
|
}
|
|
@@ -69,6 +75,17 @@ export default props => {
|
|
|
69
75
|
};
|
|
70
76
|
}, []);
|
|
71
77
|
|
|
78
|
+
// 获取预览地址
|
|
79
|
+
const getPreviewUrl = () => {
|
|
80
|
+
// 从url中解析出id
|
|
81
|
+
const url = new URL(iframeUrl);
|
|
82
|
+
const hash = url.hash.substring(1);
|
|
83
|
+
const queryString = hash.replace(/^\//, '');
|
|
84
|
+
const params = new URLSearchParams(queryString);
|
|
85
|
+
const id = params.get('sceneEngineId');
|
|
86
|
+
return http.Get(`/scene/engine/preview/url/${id}`);
|
|
87
|
+
};
|
|
88
|
+
|
|
72
89
|
// 二维码过期状态定时器
|
|
73
90
|
const startQrcodeTimer = () => {
|
|
74
91
|
if (qrcodeTimerId.current) {
|
|
@@ -90,25 +107,19 @@ export default props => {
|
|
|
90
107
|
}, 60000);
|
|
91
108
|
};
|
|
92
109
|
const getQrCodeUrl = () => {
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
setIsQrcodeExpire(false); // 重置二维码过期状态
|
|
97
|
-
startQrcodeTimer(); // 启动过期状态定时器
|
|
98
|
-
startQrcodeExpireTimeUpdateTimer(); // 启动过期时间定时器
|
|
99
|
-
});
|
|
100
|
-
} else {
|
|
101
|
-
setQrcodeUrl(`${iframeUrl}?t=${Date.now()}`);
|
|
110
|
+
const ftechFunc = fetchQrcodeUrl || getPreviewUrl;
|
|
111
|
+
ftechFunc().then(res => {
|
|
112
|
+
setQrcodeUrl(res.data);
|
|
102
113
|
setIsQrcodeExpire(false); // 重置二维码过期状态
|
|
103
114
|
startQrcodeTimer(); // 启动过期状态定时器
|
|
104
115
|
startQrcodeExpireTimeUpdateTimer(); // 启动过期时间定时器
|
|
105
|
-
}
|
|
116
|
+
});
|
|
106
117
|
};
|
|
107
118
|
return /*#__PURE__*/React.createElement("div", {
|
|
108
119
|
className: `phone-box ${size === 'small' ? 'phone-box-small' : ''}`
|
|
109
120
|
}, /*#__PURE__*/React.createElement("img", {
|
|
110
121
|
alt: "",
|
|
111
|
-
src:
|
|
122
|
+
src: phone,
|
|
112
123
|
width: 356,
|
|
113
124
|
height: 720
|
|
114
125
|
}), /*#__PURE__*/React.createElement("div", {
|
|
@@ -118,7 +129,7 @@ export default props => {
|
|
|
118
129
|
}, /*#__PURE__*/React.createElement("div", {
|
|
119
130
|
className: "phone-header-time"
|
|
120
131
|
}, currentTime), /*#__PURE__*/React.createElement("img", {
|
|
121
|
-
src:
|
|
132
|
+
src: shexiang,
|
|
122
133
|
width: 76,
|
|
123
134
|
height: 23,
|
|
124
135
|
alt: ""
|
|
@@ -126,15 +137,15 @@ export default props => {
|
|
|
126
137
|
className: "phone-header-status"
|
|
127
138
|
}, /*#__PURE__*/React.createElement("img", {
|
|
128
139
|
className: "status-xinhao",
|
|
129
|
-
src:
|
|
140
|
+
src: xinhao,
|
|
130
141
|
alt: ""
|
|
131
142
|
}), /*#__PURE__*/React.createElement("img", {
|
|
132
143
|
className: "status-wangluo",
|
|
133
|
-
src:
|
|
144
|
+
src: wangluo,
|
|
134
145
|
alt: ""
|
|
135
146
|
}), /*#__PURE__*/React.createElement("img", {
|
|
136
147
|
className: "status-dianchi",
|
|
137
|
-
src:
|
|
148
|
+
src: dianchi,
|
|
138
149
|
alt: ""
|
|
139
150
|
}))), showEmpty && !iframeUrl ? /*#__PURE__*/React.createElement("div", {
|
|
140
151
|
style: {
|
package/PhoneBox/index.less
CHANGED
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
<svg width="356" height="720" viewBox="0 0 356 720" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<g id="模型框">
|
|
3
|
+
<g id="Body">
|
|
4
|
+
<path id="Base" d="M296.829 1.35898e-06L59.1059 6.55458e-06C28.1243 7.23171e-06 3.00879 25.189 3.00879 56.2613L3.0088 663.739C3.0088 694.811 28.1243 720 59.1059 720L296.829 720C327.811 720 352.926 694.811 352.926 663.739L352.926 56.2613C352.926 25.189 327.811 6.81854e-07 296.829 1.35898e-06Z" fill="#E0E1E3"/>
|
|
5
|
+
<g id="Light" style="mix-blend-mode:overlay">
|
|
6
|
+
<path d="M296.393 1.67594L59.5392 1.67594C29.2431 1.67594 4.67871 26.3122 4.67871 56.697L4.67873 663.286C4.67873 693.671 29.2431 718.307 59.5392 718.307L296.393 718.307C326.69 718.307 351.254 693.671 351.254 663.286L351.254 56.697C351.254 26.3122 326.69 1.67593 296.393 1.67594ZM349.583 662.85C349.583 692.565 325.57 716.648 295.942 716.648L59.9904 716.648C30.3627 716.648 6.34977 692.565 6.34977 662.85L6.34976 57.1495C6.34976 27.4351 30.3627 3.35188 59.9904 3.35188L295.959 3.35187C325.587 3.35187 349.6 27.4351 349.6 57.1495L349.6 662.867L349.583 662.85Z" fill="black"/>
|
|
7
|
+
</g>
|
|
8
|
+
<path id="Frame" d="M295.425 5.49709L60.5257 5.49709C32.0359 5.49709 8.94043 28.6602 8.94043 57.2333L8.94044 662.767C8.94044 691.34 32.0359 714.503 60.5257 714.503L295.425 714.503C323.915 714.503 347.01 691.34 347.01 662.767L347.01 57.2333C347.01 28.6602 323.915 5.49709 295.425 5.49709Z" fill="#1D1D1B"/>
|
|
9
|
+
</g>
|
|
10
|
+
<g id="Buttons">
|
|
11
|
+
<g id="Lock">
|
|
12
|
+
<path id="Base_2" d="M354.98 183.951L352.925 183.951L352.925 270.731L354.98 270.731L354.98 183.951Z" fill="url(#paint0_linear_247_40964)"/>
|
|
13
|
+
<path id="Top-Shade" d="M354.98 270.748L354.98 183.985L356 185.107C355.482 194.342 355.515 260.391 356 269.608L354.98 270.731L354.98 270.748Z" fill="url(#paint1_linear_247_40964)"/>
|
|
14
|
+
</g>
|
|
15
|
+
<g id="Volume-Down">
|
|
16
|
+
<path id="Base_3" d="M1.75469 234.849L0.584961 234.849L0.584962 289.82L1.7547 289.82L1.75469 234.849Z" fill="url(#paint2_linear_247_40964)"/>
|
|
17
|
+
<path id="Top-Shade_2" d="M0.584868 289.82L0.584867 234.866L1.57507e-08 235.587C0.300789 241.436 0.267369 283.284 1.18567e-06 289.116L0.584868 289.837L0.584868 289.82Z" fill="url(#paint3_linear_247_40964)"/>
|
|
18
|
+
<path id="Bottom-Shade" d="M3.00817 234.866L1.75488 234.866L1.75488 289.837L3.00817 289.837L3.00817 234.866Z" fill="url(#paint4_linear_247_40964)"/>
|
|
19
|
+
</g>
|
|
20
|
+
<g id="Volume-Up">
|
|
21
|
+
<path id="Base_4" d="M1.75469 165.7L0.584961 165.7L0.584962 220.671L1.7547 220.671L1.75469 165.7Z" fill="url(#paint5_linear_247_40964)"/>
|
|
22
|
+
<path id="Top-Shade_3" d="M0.584868 220.671L0.584867 165.717L1.57504e-08 166.437C0.300789 172.286 0.267369 214.135 1.18567e-06 219.967L0.584868 220.687L0.584868 220.671Z" fill="url(#paint6_linear_247_40964)"/>
|
|
23
|
+
<path id="Bottom-Shade_2" d="M3.00817 165.7L1.75488 165.7L1.75488 220.671L3.00817 220.671L3.00817 165.7Z" fill="url(#paint7_linear_247_40964)"/>
|
|
24
|
+
</g>
|
|
25
|
+
<g id="Silence">
|
|
26
|
+
<path id="Base_5" d="M1.75469 113.763L0.584961 113.763L0.584962 141.986L1.75469 141.986L1.75469 113.763Z" fill="url(#paint8_linear_247_40964)"/>
|
|
27
|
+
<path id="Top-Shade_4" d="M0.584867 141.969L0.584867 113.763L1.46516e-08 114.433C0.300789 119.964 0.267368 135.768 6.01445e-07 141.282L0.584867 141.952L0.584867 141.969Z" fill="url(#paint9_linear_247_40964)"/>
|
|
28
|
+
<path id="Bottom-Shade_3" d="M3.00817 113.763L1.75488 113.763L1.75488 141.986L3.00817 141.986L3.00817 113.763Z" fill="url(#paint10_linear_247_40964)"/>
|
|
29
|
+
</g>
|
|
30
|
+
</g>
|
|
31
|
+
</g>
|
|
32
|
+
<defs>
|
|
33
|
+
<linearGradient id="paint0_linear_247_40964" x1="353.944" y1="183.951" x2="353.944" y2="270.731" gradientUnits="userSpaceOnUse">
|
|
34
|
+
<stop stop-color="#58595A"/>
|
|
35
|
+
<stop offset="0.02" stop-color="#E0E1E3"/>
|
|
36
|
+
<stop offset="0.04" stop-color="#A7A8A9"/>
|
|
37
|
+
<stop offset="0.08" stop-color="#2B1D2A"/>
|
|
38
|
+
<stop offset="0.11" stop-color="#8C8C8C"/>
|
|
39
|
+
<stop offset="0.9" stop-color="#696969"/>
|
|
40
|
+
<stop offset="0.94" stop-color="#2B1D2A"/>
|
|
41
|
+
<stop offset="0.96" stop-color="#A7A8A9"/>
|
|
42
|
+
<stop offset="0.98" stop-color="#8C8C8C"/>
|
|
43
|
+
<stop offset="1" stop-color="#A7A8A9"/>
|
|
44
|
+
</linearGradient>
|
|
45
|
+
<linearGradient id="paint1_linear_247_40964" x1="355.482" y1="183.968" x2="355.482" y2="270.731" gradientUnits="userSpaceOnUse">
|
|
46
|
+
<stop stop-color="#676067"/>
|
|
47
|
+
<stop offset="0.06" stop-color="#707070"/>
|
|
48
|
+
<stop offset="0.19" stop-color="#8A8A8A"/>
|
|
49
|
+
<stop offset="0.81" stop-color="#8A8A8A"/>
|
|
50
|
+
<stop offset="0.92" stop-color="#707070"/>
|
|
51
|
+
<stop offset="1" stop-color="#676067"/>
|
|
52
|
+
</linearGradient>
|
|
53
|
+
<linearGradient id="paint2_linear_247_40964" x1="-1465.34" y1="234.849" x2="-1465.34" y2="289.82" gradientUnits="userSpaceOnUse">
|
|
54
|
+
<stop stop-color="#58595A"/>
|
|
55
|
+
<stop offset="0.02" stop-color="#E0E1E3"/>
|
|
56
|
+
<stop offset="0.04" stop-color="#A7A8A9"/>
|
|
57
|
+
<stop offset="0.08" stop-color="#2D1E2C"/>
|
|
58
|
+
<stop offset="0.11" stop-color="#8C8C8C"/>
|
|
59
|
+
<stop offset="0.9" stop-color="#696969"/>
|
|
60
|
+
<stop offset="0.94" stop-color="#2D1E2C"/>
|
|
61
|
+
<stop offset="0.96" stop-color="#A7A8A9"/>
|
|
62
|
+
<stop offset="0.98" stop-color="#8C8C8C"/>
|
|
63
|
+
<stop offset="1" stop-color="#A7A8A9"/>
|
|
64
|
+
</linearGradient>
|
|
65
|
+
<linearGradient id="paint3_linear_247_40964" x1="0.300788" y1="234.866" x2="0.300789" y2="289.82" gradientUnits="userSpaceOnUse">
|
|
66
|
+
<stop stop-color="#676067"/>
|
|
67
|
+
<stop offset="0.06" stop-color="#707070"/>
|
|
68
|
+
<stop offset="0.19" stop-color="#8A8A8A"/>
|
|
69
|
+
<stop offset="0.81" stop-color="#8A8A8A"/>
|
|
70
|
+
<stop offset="0.92" stop-color="#707070"/>
|
|
71
|
+
<stop offset="1" stop-color="#676067"/>
|
|
72
|
+
</linearGradient>
|
|
73
|
+
<linearGradient id="paint4_linear_247_40964" x1="0.000284912" y1="289.837" x2="1.68112" y2="234.866" gradientUnits="userSpaceOnUse">
|
|
74
|
+
<stop stop-color="#58595A"/>
|
|
75
|
+
<stop offset="0.05" stop-color="#2D1E2C"/>
|
|
76
|
+
<stop offset="0.52" stop-color="#A7A8A9"/>
|
|
77
|
+
<stop offset="0.96" stop-color="#2D1E2C"/>
|
|
78
|
+
<stop offset="1" stop-color="#A7A8A9"/>
|
|
79
|
+
</linearGradient>
|
|
80
|
+
<linearGradient id="paint5_linear_247_40964" x1="1.16983" y1="165.683" x2="1.16983" y2="220.654" gradientUnits="userSpaceOnUse">
|
|
81
|
+
<stop stop-color="#58595A"/>
|
|
82
|
+
<stop offset="0.02" stop-color="#E0E1E3"/>
|
|
83
|
+
<stop offset="0.04" stop-color="#A7A8A9"/>
|
|
84
|
+
<stop offset="0.08" stop-color="#2D1E2C"/>
|
|
85
|
+
<stop offset="0.11" stop-color="#8C8C8C"/>
|
|
86
|
+
<stop offset="0.9" stop-color="#696969"/>
|
|
87
|
+
<stop offset="0.94" stop-color="#2D1E2C"/>
|
|
88
|
+
<stop offset="0.96" stop-color="#A7A8A9"/>
|
|
89
|
+
<stop offset="0.98" stop-color="#8C8C8C"/>
|
|
90
|
+
<stop offset="1" stop-color="#A7A8A9"/>
|
|
91
|
+
</linearGradient>
|
|
92
|
+
<linearGradient id="paint6_linear_247_40964" x1="0.300788" y1="165.7" x2="0.300789" y2="220.654" gradientUnits="userSpaceOnUse">
|
|
93
|
+
<stop stop-color="#676067"/>
|
|
94
|
+
<stop offset="0.06" stop-color="#707070"/>
|
|
95
|
+
<stop offset="0.19" stop-color="#8A8A8A"/>
|
|
96
|
+
<stop offset="0.81" stop-color="#8A8A8A"/>
|
|
97
|
+
<stop offset="0.92" stop-color="#707070"/>
|
|
98
|
+
<stop offset="1" stop-color="#676067"/>
|
|
99
|
+
</linearGradient>
|
|
100
|
+
<linearGradient id="paint7_linear_247_40964" x1="2.37317" y1="220.688" x2="2.37317" y2="165.7" gradientUnits="userSpaceOnUse">
|
|
101
|
+
<stop stop-color="#58595A"/>
|
|
102
|
+
<stop offset="0.05" stop-color="#2D1E2C"/>
|
|
103
|
+
<stop offset="0.52" stop-color="#A7A8A9"/>
|
|
104
|
+
<stop offset="0.96" stop-color="#2D1E2C"/>
|
|
105
|
+
<stop offset="1" stop-color="#A7A8A9"/>
|
|
106
|
+
</linearGradient>
|
|
107
|
+
<linearGradient id="paint8_linear_247_40964" x1="-1465.34" y1="113.746" x2="-1465.34" y2="141.969" gradientUnits="userSpaceOnUse">
|
|
108
|
+
<stop stop-color="#58595A"/>
|
|
109
|
+
<stop offset="0.02" stop-color="#E0E1E3"/>
|
|
110
|
+
<stop offset="0.04" stop-color="#A7A8A9"/>
|
|
111
|
+
<stop offset="0.08" stop-color="#2D1E2C"/>
|
|
112
|
+
<stop offset="0.11" stop-color="#8C8C8C"/>
|
|
113
|
+
<stop offset="0.9" stop-color="#696969"/>
|
|
114
|
+
<stop offset="0.94" stop-color="#2D1E2C"/>
|
|
115
|
+
<stop offset="0.96" stop-color="#A7A8A9"/>
|
|
116
|
+
<stop offset="0.98" stop-color="#8C8C8C"/>
|
|
117
|
+
<stop offset="1" stop-color="#A7A8A9"/>
|
|
118
|
+
</linearGradient>
|
|
119
|
+
<linearGradient id="paint9_linear_247_40964" x1="0.300789" y1="113.763" x2="0.300789" y2="141.969" gradientUnits="userSpaceOnUse">
|
|
120
|
+
<stop stop-color="#676067"/>
|
|
121
|
+
<stop offset="0.06" stop-color="#707070"/>
|
|
122
|
+
<stop offset="0.19" stop-color="#8A8A8A"/>
|
|
123
|
+
<stop offset="0.81" stop-color="#8A8A8A"/>
|
|
124
|
+
<stop offset="0.92" stop-color="#707070"/>
|
|
125
|
+
<stop offset="1" stop-color="#676067"/>
|
|
126
|
+
</linearGradient>
|
|
127
|
+
<linearGradient id="paint10_linear_247_40964" x1="0.000283675" y1="141.986" x2="2.38698" y2="113.764" gradientUnits="userSpaceOnUse">
|
|
128
|
+
<stop stop-color="#58595A"/>
|
|
129
|
+
<stop offset="0.05" stop-color="#2D1E2C"/>
|
|
130
|
+
<stop offset="0.52" stop-color="#A7A8A9"/>
|
|
131
|
+
<stop offset="0.96" stop-color="#2D1E2C"/>
|
|
132
|
+
<stop offset="1" stop-color="#A7A8A9"/>
|
|
133
|
+
</linearGradient>
|
|
134
|
+
</defs>
|
|
135
|
+
</svg>
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
<svg width="79" height="23" viewBox="0 0 79 23" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<g id="摄像头">
|
|
3
|
+
<path id="Base" d="M67.2764 22.843L11.3798 22.843C5.0967 22.843 3.87533e-07 17.7314 2.49808e-07 11.4299C1.12084e-07 5.12837 5.0967 1.60769e-06 11.3798 1.47037e-06L67.2764 2.48714e-07C73.5595 1.11392e-07 78.6562 5.11161 78.6562 11.4299C78.6562 17.7314 73.5595 22.843 67.2764 22.843Z" fill="#1D1D1B"/>
|
|
4
|
+
<g id="Lens">
|
|
5
|
+
<path id="Base_2" d="M64.1174 16.4242C66.8676 16.4242 69.0971 14.1882 69.0971 11.4299C69.0971 8.67163 66.8676 6.43561 64.1174 6.43561C61.3672 6.43561 59.1377 8.67163 59.1377 11.4299C59.1377 14.1882 61.3672 16.4242 64.1174 16.4242Z" fill="url(#paint0_linear_247_40986)"/>
|
|
6
|
+
<path id="Frame" d="M64.1171 14.279C65.6861 14.279 66.9579 13.0034 66.9579 11.4299C66.9579 9.85639 65.6861 8.58081 64.1171 8.58081C62.5482 8.58081 61.2764 9.85639 61.2764 11.4299C61.2764 13.0034 62.5482 14.279 64.1171 14.279Z" fill="url(#paint1_linear_247_40986)"/>
|
|
7
|
+
<path id="Bottom-Reflection" d="M66.6076 11.4299C66.6076 12.8042 65.488 13.9271 64.1178 13.9271C62.7475 13.9271 61.6279 12.8042 61.6279 11.4299C61.6279 10.0556 62.7308 8.93276 64.1178 8.93276C65.5048 8.93276 66.6076 10.0389 66.6076 11.4299Z" fill="url(#paint2_linear_247_40986)"/>
|
|
8
|
+
<path id="Top-Reflection" style="mix-blend-mode:multiply" d="M66.6076 11.4299C66.6076 12.8042 65.488 13.9271 64.1178 13.9271C62.7475 13.9271 61.6279 12.8042 61.6279 11.4299C61.6279 10.0556 62.7308 8.93276 64.1178 8.93276C65.5048 8.93276 66.6076 10.0389 66.6076 11.4299Z" fill="url(#paint3_radial_247_40986)"/>
|
|
9
|
+
<path id="Light" style="mix-blend-mode:screen" d="M66.3729 12.7371C66.3729 12.2511 65.9718 11.8489 65.4872 11.8489C65.0026 11.8489 64.6016 12.2511 64.6016 12.7371C64.6016 13.2232 65.0026 13.6254 65.4872 13.6254C65.9718 13.6254 66.3729 13.2232 66.3729 12.7371Z" fill="url(#paint4_radial_247_40986)"/>
|
|
10
|
+
</g>
|
|
11
|
+
</g>
|
|
12
|
+
<defs>
|
|
13
|
+
<linearGradient id="paint0_linear_247_40986" x1="64.1174" y1="16.1058" x2="64.1174" y2="6.28477" gradientUnits="userSpaceOnUse">
|
|
14
|
+
<stop stop-color="#666666"/>
|
|
15
|
+
<stop offset="1" stop-color="#010104"/>
|
|
16
|
+
</linearGradient>
|
|
17
|
+
<linearGradient id="paint1_linear_247_40986" x1="64.1339" y1="8.76517" x2="64.1339" y2="14.3796" gradientUnits="userSpaceOnUse">
|
|
18
|
+
<stop stop-color="#0B131C"/>
|
|
19
|
+
<stop offset="1" stop-color="#354039"/>
|
|
20
|
+
</linearGradient>
|
|
21
|
+
<linearGradient id="paint2_linear_247_40986" x1="65.8724" y1="13.1896" x2="62.3529" y2="9.68046" gradientUnits="userSpaceOnUse">
|
|
22
|
+
<stop stop-color="#231F20"/>
|
|
23
|
+
<stop offset="0.08" stop-color="#212226"/>
|
|
24
|
+
<stop offset="0.2" stop-color="#1F2C37"/>
|
|
25
|
+
<stop offset="0.33" stop-color="#1A3C53"/>
|
|
26
|
+
<stop offset="0.47" stop-color="#13537B"/>
|
|
27
|
+
<stop offset="0.62" stop-color="#0A70AE"/>
|
|
28
|
+
<stop offset="0.78" stop-color="#0095EE"/>
|
|
29
|
+
<stop offset="0.8" stop-color="#0387D6"/>
|
|
30
|
+
<stop offset="0.84" stop-color="#0D689F"/>
|
|
31
|
+
<stop offset="0.88" stop-color="#154D71"/>
|
|
32
|
+
<stop offset="0.91" stop-color="#1B394E"/>
|
|
33
|
+
<stop offset="0.95" stop-color="#1F2A34"/>
|
|
34
|
+
<stop offset="0.98" stop-color="#222225"/>
|
|
35
|
+
<stop offset="1" stop-color="#231F20"/>
|
|
36
|
+
</linearGradient>
|
|
37
|
+
<radialGradient id="paint3_radial_247_40986" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(64.1178 11.4299) scale(2.48986 2.49715)">
|
|
38
|
+
<stop stop-color="#231F20"/>
|
|
39
|
+
<stop offset="0.2" stop-color="#165068"/>
|
|
40
|
+
<stop offset="0.38" stop-color="#0C78A1"/>
|
|
41
|
+
<stop offset="0.54" stop-color="#0594CB"/>
|
|
42
|
+
<stop offset="0.66" stop-color="#01A6E4"/>
|
|
43
|
+
<stop offset="0.73" stop-color="#00ADEE"/>
|
|
44
|
+
<stop offset="0.76" stop-color="#01A5E3"/>
|
|
45
|
+
<stop offset="0.81" stop-color="#0693C8"/>
|
|
46
|
+
<stop offset="0.87" stop-color="#0D749B"/>
|
|
47
|
+
<stop offset="0.94" stop-color="#184A5E"/>
|
|
48
|
+
<stop offset="1" stop-color="#231F20"/>
|
|
49
|
+
</radialGradient>
|
|
50
|
+
<radialGradient id="paint4_radial_247_40986" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(65.4872 12.7371) scale(0.885654 0.888245)">
|
|
51
|
+
<stop stop-color="#CCCCCC"/>
|
|
52
|
+
<stop offset="0.02" stop-color="#C4C4C4"/>
|
|
53
|
+
<stop offset="0.22" stop-color="#898989"/>
|
|
54
|
+
<stop offset="0.41" stop-color="#585858"/>
|
|
55
|
+
<stop offset="0.59" stop-color="#313131"/>
|
|
56
|
+
<stop offset="0.75" stop-color="#161616"/>
|
|
57
|
+
<stop offset="0.89" stop-color="#050505"/>
|
|
58
|
+
<stop offset="1"/>
|
|
59
|
+
</radialGradient>
|
|
60
|
+
</defs>
|
|
61
|
+
</svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M1012.3915 297.221c-276.295-276.295-724.404-276.295-1000.699 0-15.59 15.59-15.59 40.798 0 56.277 15.59 15.589 40.797 15.589 56.276 0 245.227-245.228 642.92-245.228 888.147 0 15.59 15.589 40.797 15.589 56.276 0 15.479-15.48 15.479-40.687 0-56.277z m-850.666 171.15c-15.59 15.59-15.59 40.798 0 56.277 15.59 15.59 40.797 15.59 56.276 0 162.306-162.306 425.554-162.306 587.86 0 15.589 15.59 40.797 15.59 56.276 0 15.59-15.59 15.59-40.798 0-56.276-193.374-193.374-506.928-193.374-700.412 0z m551.042 181.544l0.221-0.221c-110.562-110.562-289.783-110.562-400.235 0-15.59 15.59-15.59 40.797 0 56.276 15.59 15.59 40.797 15.59 56.276 0 79.494-79.494 208.3-79.494 287.683 0l0.221-0.221a40.39 40.39 0 0 0 2.985 3.317c15.59 15.589 40.798 15.589 56.277 0 15.589-15.59 15.589-40.798 0-56.276-1.217-0.996-2.322-1.88-3.428-2.875zM453.3885 874.909c0 32.974 26.73 59.704 59.704 59.704 32.973 0 59.703-26.73 59.703-59.704 0-32.973-26.73-59.704-59.703-59.704-32.974 0-59.704 26.73-59.704 59.704z" fill="#000000" /></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M192.437 816.222c-23.575 0-42.863-19.288-42.863-42.863v-64.294c0-23.575 19.288-42.863 42.863-42.863s42.863 19.288 42.863 42.863v64.294c0.005 23.57-19.284 42.863-42.863 42.863zM406.754 816.222c-23.575 0-42.862-19.288-42.862-42.863v-171.458c0-23.575 19.288-42.862 42.862-42.862s42.863 19.288 42.863 42.862v171.458c0.005 23.57-19.284 42.863-42.863 42.863zM621.080 816.222c-23.575 0-42.862-19.288-42.862-42.863v-342.912c0-23.575 19.288-42.862 42.862-42.862s42.862 19.288 42.862 42.862v342.908c0 23.575-19.288 42.867-42.862 42.867zM835.397 816.222c-23.575 0-42.863-19.288-42.863-42.863v-557.234c0-23.575 19.288-42.863 42.863-42.863s42.863 19.288 42.863 42.863v557.229c0 23.575-19.288 42.867-42.863 42.867z" fill="#2c2c2c" /></svg>
|
package/SearchForm/index.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
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); }
|
|
1
2
|
import React, { useState, useRef, useEffect } from 'react';
|
|
2
3
|
import { Form, Button, Space, Row, Col } from 'antd';
|
|
3
4
|
import { SearchOutlined, DoubleRightOutlined, UndoOutlined } from '@ant-design/icons';
|
|
@@ -17,14 +18,45 @@ const SearchForm = ({
|
|
|
17
18
|
onFinish = () => {},
|
|
18
19
|
onExpand
|
|
19
20
|
}) => {
|
|
20
|
-
|
|
21
|
-
const
|
|
21
|
+
// 如果外部没有传入 form,使用 Form.useForm() 创建实例
|
|
22
|
+
const [internalFormInstance] = Form.useForm();
|
|
23
|
+
const internalFormRef = useRef(internalFormInstance);
|
|
24
|
+
|
|
25
|
+
// 判断外部传入的是 ref 还是 form 实例
|
|
26
|
+
// ref 对象有 current 属性,form 实例没有
|
|
27
|
+
const isExternalRef = externalForm && 'current' in externalForm;
|
|
28
|
+
|
|
29
|
+
// 警告:ref 用法将在后续版本中移除
|
|
30
|
+
useEffect(() => {
|
|
31
|
+
if (isExternalRef) {
|
|
32
|
+
console.warn('[SearchForm] 警告:通过 ref 传入 form 的方式已废弃,将在后续版本中移除。' + '请使用 Form.useForm() 创建 form 实例并直接传入,例如:\n' + ' const [form] = Form.useForm();\n' + ' <SearchForm form={form} />');
|
|
33
|
+
}
|
|
34
|
+
}, [isExternalRef]);
|
|
35
|
+
|
|
36
|
+
// 获取实际的 form 实例(兼容 ref 和直接传入实例两种情况)
|
|
37
|
+
const getFormInstance = () => {
|
|
38
|
+
if (externalForm) {
|
|
39
|
+
return isExternalRef ? externalForm.current : externalForm;
|
|
40
|
+
}
|
|
41
|
+
return internalFormInstance;
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
// 兼容性处理:用于 form.current 访问方式的 ref
|
|
45
|
+
const formRef = externalForm && isExternalRef ? externalForm : internalFormRef;
|
|
46
|
+
|
|
47
|
+
// 更新内部 ref,确保 formRef.current 始终指向正确的实例
|
|
48
|
+
useEffect(() => {
|
|
49
|
+
if (!isExternalRef && externalForm) {
|
|
50
|
+
// 如果外部传入的是实例,将其赋值给内部 ref 的 current
|
|
51
|
+
internalFormRef.current = externalForm;
|
|
52
|
+
}
|
|
53
|
+
}, [externalForm, isExternalRef]);
|
|
22
54
|
const [internalOpen, setInternalOpen] = useState(defaultExpand);
|
|
23
55
|
useEffect(() => {
|
|
24
56
|
if (onRef) {
|
|
25
|
-
onRef(
|
|
57
|
+
onRef(formRef);
|
|
26
58
|
}
|
|
27
|
-
}, [
|
|
59
|
+
}, [formRef, onRef]);
|
|
28
60
|
const isControlled = expand !== undefined;
|
|
29
61
|
const isOpen = isControlled ? expand : internalOpen;
|
|
30
62
|
const handleToggle = () => {
|
|
@@ -47,8 +79,9 @@ const SearchForm = ({
|
|
|
47
79
|
icon: /*#__PURE__*/React.createElement(UndoOutlined, null),
|
|
48
80
|
loading: loading,
|
|
49
81
|
onClick: () => {
|
|
50
|
-
|
|
51
|
-
|
|
82
|
+
const formInstance = getFormInstance();
|
|
83
|
+
formInstance.resetFields();
|
|
84
|
+
onReset(formInstance.getFieldsValue());
|
|
52
85
|
}
|
|
53
86
|
}, "\u91CD\u7F6E"), formLine.length / colSize > 1 && /*#__PURE__*/React.createElement(Button, {
|
|
54
87
|
icon: /*#__PURE__*/React.createElement(DoubleRightOutlined, {
|
|
@@ -58,8 +91,30 @@ const SearchForm = ({
|
|
|
58
91
|
}),
|
|
59
92
|
onClick: handleToggle
|
|
60
93
|
}, isOpen ? '收起' : '展开'));
|
|
94
|
+
|
|
95
|
+
/**
|
|
96
|
+
* 处理 formLine,确保所有 Form.Item 都有 noStyle 属性
|
|
97
|
+
* @param {ReactNode[]} nodes - 表单节点数组
|
|
98
|
+
* @returns {ReactNode[]} - 处理后的节点数组
|
|
99
|
+
*/
|
|
100
|
+
const processFormLine = nodes => {
|
|
101
|
+
return nodes.map(node => {
|
|
102
|
+
// 检查是否是 Form.Item 组件
|
|
103
|
+
if (/*#__PURE__*/React.isValidElement(node) && node.type === Form.Item) {
|
|
104
|
+
// 如果没有 noStyle 属性,则克隆并添加
|
|
105
|
+
if (!node.props.noStyle) {
|
|
106
|
+
return /*#__PURE__*/React.cloneElement(node, {
|
|
107
|
+
noStyle: true
|
|
108
|
+
});
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
return node;
|
|
112
|
+
});
|
|
113
|
+
};
|
|
61
114
|
const groupsList = () => {
|
|
62
|
-
|
|
115
|
+
// 先处理 formLine,确保所有 Form.Item 都有 noStyle
|
|
116
|
+
const processedFormLine = processFormLine(formLine);
|
|
117
|
+
const arr = processedFormLine.map(node => ({
|
|
63
118
|
show: true,
|
|
64
119
|
node
|
|
65
120
|
}));
|
|
@@ -73,12 +128,15 @@ const SearchForm = ({
|
|
|
73
128
|
};
|
|
74
129
|
const formItemList = groupsList();
|
|
75
130
|
if (formItemList.length === 0) return null;
|
|
76
|
-
return /*#__PURE__*/React.createElement(Form, {
|
|
77
|
-
ref:
|
|
131
|
+
return /*#__PURE__*/React.createElement(Form, _extends({}, externalForm && isExternalRef ? {
|
|
132
|
+
ref: externalForm
|
|
133
|
+
} : {
|
|
134
|
+
form: externalForm || internalFormInstance
|
|
135
|
+
}, {
|
|
78
136
|
style: style,
|
|
79
137
|
initialValues: initialValues,
|
|
80
138
|
onFinish: values => onFinish(values)
|
|
81
|
-
}, /*#__PURE__*/React.createElement(Row, {
|
|
139
|
+
}), /*#__PURE__*/React.createElement(Row, {
|
|
82
140
|
gutter: [16, 16]
|
|
83
141
|
}, formItemList.map((item, index) => /*#__PURE__*/React.createElement(Col, {
|
|
84
142
|
key: index,
|
package/Table/index.d.ts
CHANGED
|
@@ -1,17 +1,64 @@
|
|
|
1
|
-
// @ts-ignore
|
|
2
|
-
import * as React from 'react';
|
|
3
|
-
// @ts-ignore
|
|
4
|
-
import type { TableProps } from 'antd';
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
1
|
+
// @ts-ignore
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
// @ts-ignore
|
|
4
|
+
import type { TableProps } from 'antd';
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* 列设置配置项
|
|
8
|
+
*/
|
|
9
|
+
export interface SettingOptionType {
|
|
10
|
+
/** 是否可拖拽排序 */
|
|
11
|
+
draggable?: boolean;
|
|
12
|
+
/** 是否显示复选框 */
|
|
13
|
+
checkable?: boolean;
|
|
14
|
+
/** 是否显示列表项选项 */
|
|
15
|
+
showListItemOption?: boolean;
|
|
16
|
+
/** 重置时是否恢复选中状态 */
|
|
17
|
+
checkedReset?: boolean;
|
|
18
|
+
/** 列表高度 */
|
|
19
|
+
listsHeight?: number;
|
|
20
|
+
/** 额外内容 */
|
|
21
|
+
extra?: React.ReactNode;
|
|
22
|
+
/** 子元素 */
|
|
23
|
+
children?: React.ReactNode;
|
|
24
|
+
/** 自定义设置图标 */
|
|
25
|
+
settingIcon?: React.ReactNode;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
/**
|
|
29
|
+
* ProTable options 配置项
|
|
30
|
+
*/
|
|
31
|
+
export interface OptionConfig {
|
|
32
|
+
/** 是否显示密度切换 */
|
|
33
|
+
density?: boolean;
|
|
34
|
+
/** 是否显示全屏按钮,或自定义函数 */
|
|
35
|
+
fullScreen?: boolean | ((e: React.MouseEvent<HTMLSpanElement>, action?: any) => void);
|
|
36
|
+
/** 是否显示刷新按钮,或自定义函数 */
|
|
37
|
+
reload?: boolean | ((e: React.MouseEvent<HTMLSpanElement>, action?: any) => void);
|
|
38
|
+
/** 列设置配置 */
|
|
39
|
+
setting?: boolean | SettingOptionType;
|
|
40
|
+
/** 搜索配置 */
|
|
41
|
+
search?: boolean | {
|
|
42
|
+
name?: string;
|
|
43
|
+
[key: string]: any;
|
|
44
|
+
};
|
|
45
|
+
/** 自定义刷新图标 */
|
|
46
|
+
reloadIcon?: React.ReactNode;
|
|
47
|
+
/** 自定义密度图标 */
|
|
48
|
+
densityIcon?: React.ReactNode;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
export interface OverTableProps extends TableProps {
|
|
52
|
+
// 当一个路由下存在多个表格的情况下 需要给每一个表格设置一个唯一存储索引 若没有设置则使用默认索引,请注意缓存数据会被覆盖
|
|
53
|
+
storeIndex?: string;
|
|
54
|
+
// 是否启用自动计算滚动高度,默认-true
|
|
55
|
+
enableAutoScrollY?: boolean;
|
|
56
|
+
// ProTable options 配置项
|
|
57
|
+
options?: OptionConfig | false;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
interface TableFc extends React.FC<OverTableProps> {
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
declare const Table: TableFc;
|
|
64
|
+
export default Table;
|
package/Table/index.js
CHANGED
|
@@ -1,118 +1,100 @@
|
|
|
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 from 'react';
|
|
3
|
-
import { tools } from '@cqsjjb/jjb-common-lib';
|
|
2
|
+
import React, { useRef, useEffect, useState, useCallback } from 'react';
|
|
4
3
|
import { ProTable } from '@ant-design/pro-components';
|
|
5
|
-
import { useAntdResizableHeader } from 'use-antd-resizable-header';
|
|
6
|
-
import { antPrefix, setTableSize, getTableSize, getPersistenceKey } from './utils';
|
|
7
4
|
import './index.less';
|
|
8
|
-
|
|
5
|
+
import { antPrefix } from './utils';
|
|
9
6
|
export default function TablePro(props) {
|
|
10
7
|
const prefix = antPrefix || 'ant';
|
|
11
8
|
const baseCls = `.${prefix}-table`;
|
|
12
|
-
const
|
|
9
|
+
const ref = useRef(null);
|
|
13
10
|
const tableBodyCls = `${baseCls}-body`;
|
|
11
|
+
const tablePaginationCls = `${baseCls}-pagination`;
|
|
12
|
+
const tableFooterCls = `${baseCls}-footer`;
|
|
14
13
|
const {
|
|
15
|
-
|
|
14
|
+
enableAutoScrollY = true,
|
|
15
|
+
options = {
|
|
16
|
+
reload: false,
|
|
17
|
+
density: true,
|
|
18
|
+
fullScreen: true,
|
|
19
|
+
setting: {
|
|
20
|
+
checkedReset: true,
|
|
21
|
+
draggable: false,
|
|
22
|
+
checkable: true
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
...restProps
|
|
16
26
|
} = props;
|
|
17
|
-
const [
|
|
18
|
-
const
|
|
19
|
-
const
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
childList: true
|
|
38
|
-
});
|
|
27
|
+
const [scrollY, setScrollY] = useState(undefined);
|
|
28
|
+
const timerRef = useRef(null);
|
|
29
|
+
const calcTableScrollY = () => {
|
|
30
|
+
const tableBody = ref.current?.querySelector?.(tableBodyCls);
|
|
31
|
+
const tableBodyRect = tableBody?.getBoundingClientRect();
|
|
32
|
+
const tableFooter = ref.current?.querySelector?.(tableFooterCls);
|
|
33
|
+
const tableFooterRect = tableFooter?.getBoundingClientRect();
|
|
34
|
+
const tablePagination = ref.current?.querySelector?.(tablePaginationCls);
|
|
35
|
+
const tablePaginationRect = tablePagination?.getBoundingClientRect();
|
|
36
|
+
const tableFooterHeight = tableFooterRect?.height || 0;
|
|
37
|
+
const tablePaginationMargin = 16;
|
|
38
|
+
const tablePaginationHeight = tablePaginationRect?.height || 0;
|
|
39
|
+
const border = 2;
|
|
40
|
+
const margin = 20;
|
|
41
|
+
const scrollY = window.innerHeight - tableBodyRect.top - tableFooterHeight - tablePaginationHeight - tablePaginationMargin - border - margin;
|
|
42
|
+
return scrollY;
|
|
43
|
+
};
|
|
44
|
+
const debouncedCalcScrollY = useCallback(() => {
|
|
45
|
+
if (timerRef.current) {
|
|
46
|
+
clearTimeout(timerRef.current);
|
|
39
47
|
}
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
48
|
+
timerRef.current = setTimeout(() => {
|
|
49
|
+
const height = calcTableScrollY();
|
|
50
|
+
if (height) {
|
|
51
|
+
setScrollY(height);
|
|
44
52
|
}
|
|
45
|
-
};
|
|
53
|
+
}, 150);
|
|
46
54
|
}, []);
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
55
|
+
useEffect(() => {
|
|
56
|
+
if (!ref.current || !enableAutoScrollY) return;
|
|
57
|
+
|
|
58
|
+
// 创建 ResizeObserver 监听元素尺寸变化
|
|
59
|
+
const resizeObserver = new ResizeObserver(() => {
|
|
60
|
+
// 等待 table-pagination 元素生成后再计算
|
|
61
|
+
debouncedCalcScrollY();
|
|
62
|
+
});
|
|
63
|
+
const mutationObserver = new MutationObserver(() => {
|
|
64
|
+
debouncedCalcScrollY();
|
|
65
|
+
});
|
|
66
|
+
mutationObserver.observe(ref.current, {
|
|
67
|
+
childList: true,
|
|
68
|
+
subtree: true,
|
|
69
|
+
attributes: true
|
|
70
|
+
});
|
|
50
71
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
// table-body元素
|
|
57
|
-
const tableBodyEl = document.querySelector(tableBodyCls);
|
|
58
|
-
if (tableBodyEl && tableEl) {
|
|
59
|
-
// 获取table元素的矩形数据
|
|
60
|
-
const tableRect = tableEl.getBoundingClientRect();
|
|
61
|
-
// 获取table-body元素的矩形数据
|
|
62
|
-
const tableBodyRect = tableBodyEl.getBoundingClientRect();
|
|
63
|
-
// 获取底部的高度差
|
|
64
|
-
const bottomHeight = tableRect.bottom - tableBodyRect.bottom;
|
|
65
|
-
// 计算最终值
|
|
66
|
-
setTableHeight(innerHeight - tableBodyRect.top - bottomHeight - (window.__IN_BASE__ ? 38 : 22));
|
|
72
|
+
// 开始观察 ref.current 的尺寸变化
|
|
73
|
+
resizeObserver.observe(ref.current);
|
|
74
|
+
return () => {
|
|
75
|
+
if (timerRef.current) {
|
|
76
|
+
clearTimeout(timerRef.current);
|
|
67
77
|
}
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
}
|
|
71
|
-
};
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
resetColumns
|
|
77
|
-
// refresh
|
|
78
|
-
} = useAntdResizableHeader({
|
|
79
|
-
columns: props.columns,
|
|
80
|
-
columnsState: {
|
|
81
|
-
persistenceKey: persistenceKey.resizable,
|
|
82
|
-
persistenceType: 'localStorage'
|
|
78
|
+
resizeObserver.disconnect();
|
|
79
|
+
mutationObserver.disconnect();
|
|
80
|
+
};
|
|
81
|
+
}, [ref, enableAutoScrollY, debouncedCalcScrollY]);
|
|
82
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
83
|
+
ref: ref,
|
|
84
|
+
style: {
|
|
85
|
+
height: '100%'
|
|
83
86
|
}
|
|
84
|
-
}
|
|
85
|
-
const scroll = {
|
|
86
|
-
x: tableWidth
|
|
87
|
-
};
|
|
88
|
-
if (enabledResizer) {
|
|
89
|
-
scroll.y = tableHeight;
|
|
90
|
-
}
|
|
91
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ProTable, _extends({
|
|
87
|
+
}, /*#__PURE__*/React.createElement(ProTable, _extends({
|
|
92
88
|
ghost: true,
|
|
93
89
|
columnEmptyText: true,
|
|
94
|
-
size: size,
|
|
95
90
|
search: false,
|
|
96
|
-
scroll:
|
|
91
|
+
scroll: enableAutoScrollY ? {
|
|
92
|
+
y: scrollY || 0
|
|
93
|
+
} : undefined,
|
|
97
94
|
className: `${antPrefix}-gbs-pro-table`,
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
checkedReset: true,
|
|
103
|
-
extra: /*#__PURE__*/React.createElement("a", {
|
|
104
|
-
className: `${antPrefix}-pro-table-column-setting-action-rest-button`,
|
|
105
|
-
onClick: resetColumns
|
|
106
|
-
}, "\u91CD\u7F6E\u5217\u5BBD")
|
|
107
|
-
}
|
|
108
|
-
},
|
|
109
|
-
components: components,
|
|
110
|
-
columnsState: {
|
|
111
|
-
persistenceKey: persistenceKey.columnState,
|
|
112
|
-
persistenceType: 'localStorage'
|
|
113
|
-
},
|
|
114
|
-
onSizeChange: setSize
|
|
115
|
-
}, props, {
|
|
116
|
-
columns: resizableColumns
|
|
95
|
+
size: "default",
|
|
96
|
+
options: options
|
|
97
|
+
}, restProps, {
|
|
98
|
+
columns: restProps.columns
|
|
117
99
|
})));
|
|
118
100
|
}
|
package/Table/index.less
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
|
-
|
|
1
|
+
@com-prefix-cls: if(isdefined(@ant-prefix), @ant-prefix, ant);
|
|
2
|
+
|
|
3
|
+
.@{com-prefix-cls} {
|
|
2
4
|
&-gbs-pro-table {
|
|
3
|
-
.@{
|
|
5
|
+
.@{com-prefix-cls}-pro-card {
|
|
4
6
|
&-body {
|
|
5
|
-
.@{
|
|
7
|
+
.@{com-prefix-cls}-pro-table-list-toolbar {
|
|
6
8
|
&-container {
|
|
7
9
|
padding-top: 0;
|
|
8
10
|
}
|
package/package.json
CHANGED
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
@com-prefix-cls: if(isdefined(@ant-prefix), @ant-prefix, ant);
|
|
2
|
-
|
|
3
|
-
.@{com-prefix-cls}-form-item-control-label-wrapper {
|
|
4
|
-
.@{com-prefix-cls}-form-item-control-label-span {
|
|
5
|
-
border: 1px solid #d9d9d9;
|
|
6
|
-
height: 32px;
|
|
7
|
-
line-height: 30px;
|
|
8
|
-
box-sizing: border-box;
|
|
9
|
-
margin-right: -1px;
|
|
10
|
-
padding: 0 2px 0 8px;
|
|
11
|
-
border-top-left-radius: 4px;
|
|
12
|
-
border-bottom-left-radius: 4px;
|
|
13
|
-
white-space: nowrap;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
&.@{com-prefix-cls}-form-item-control-label-has {
|
|
17
|
-
.@{com-prefix-cls}-select-selector, .@{com-prefix-cls}-picker, .@{com-prefix-cls}-input, .@{com-prefix-cls}-input-affix-wrapper {
|
|
18
|
-
border-top-left-radius: 0;
|
|
19
|
-
border-bottom-left-radius: 0;
|
|
20
|
-
border-left-color: transparent !important;
|
|
21
|
-
&:hover, &:focus, &:focus-within{
|
|
22
|
-
border-left-color: @colorPrimary !important;
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
&-default {
|
|
28
|
-
.@{com-prefix-cls}-form-item-control-label-span {
|
|
29
|
-
border-color: #d9d9d9;
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
&-dark {
|
|
34
|
-
.@{com-prefix-cls}-form-item-control-label-span {
|
|
35
|
-
border-color: #424242;
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
}
|