@cqsjjb/jjb-react-admin-component 3.2.0-beta.1 → 3.2.0-rc.1
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/BMap/index.js +2 -20
- package/ControlWrapper/index.d.ts +0 -2
- package/ControlWrapper/index.js +5 -33
- package/Editor/{index.ts → index.d.ts} +2 -0
- package/Editor/index.js +6 -26
- package/FileUploader/index.d.ts +0 -2
- package/FileUploader/index.js +24 -97
- package/FormilyDescriptions/index.js +0 -1
- package/ImageCropper/index.js +4 -19
- package/ImageUploader/index.d.ts +0 -2
- package/ImageUploader/index.js +45 -97
- package/PageLayout/index.js +0 -25
- package/SearchForm/index.js +0 -17
- package/package.json +1 -1
package/BMap/index.js
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import React, { useEffect, useRef, useState, useCallback } from 'react';
|
|
2
|
-
import PropTypes from 'prop-types';
|
|
3
2
|
import { Button, Col, message, Modal, Result, Row } from 'antd';
|
|
4
3
|
import './index.less';
|
|
5
4
|
const _B_MAP_SEARCH_ = '_B_MAP_SEARCH_';
|
|
@@ -10,8 +9,8 @@ const _B_MAP_DEFAULT_POINT_ = {
|
|
|
10
9
|
const BMap = ({
|
|
11
10
|
lng: propLng,
|
|
12
11
|
lat: propLat,
|
|
13
|
-
title,
|
|
14
|
-
width,
|
|
12
|
+
title = '百度地图',
|
|
13
|
+
width = 700,
|
|
15
14
|
onOk,
|
|
16
15
|
onCancel
|
|
17
16
|
}) => {
|
|
@@ -165,21 +164,4 @@ const BMap = ({
|
|
|
165
164
|
title: "\u52A0\u8F7D\u5730\u56FE\u5931\u8D25\uFF0C\u7F3A\u5C11\u5FC5\u8981\u7684\u6587\u4EF6\uFF01"
|
|
166
165
|
}));
|
|
167
166
|
};
|
|
168
|
-
BMap.defaultProps = {
|
|
169
|
-
lng: 0,
|
|
170
|
-
lat: 0,
|
|
171
|
-
title: '百度地图',
|
|
172
|
-
width: 700
|
|
173
|
-
};
|
|
174
|
-
BMap.propTypes = {
|
|
175
|
-
lng: PropTypes.number,
|
|
176
|
-
lat: PropTypes.number,
|
|
177
|
-
width: PropTypes.number,
|
|
178
|
-
// 地图宽度
|
|
179
|
-
title: PropTypes.string,
|
|
180
|
-
// 标题
|
|
181
|
-
onOk: PropTypes.func,
|
|
182
|
-
// 确认事件
|
|
183
|
-
onCancel: PropTypes.func // 取消事件
|
|
184
|
-
};
|
|
185
167
|
export default BMap;
|
package/ControlWrapper/index.js
CHANGED
|
@@ -1,12 +1,6 @@
|
|
|
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
2
|
import React from 'react';
|
|
3
|
-
import
|
|
4
|
-
import { Row, Col, Input as OriginInput, Select as OriginSelect, Cascader as OriginCascader, DatePicker as OriginDatePicker, TreeSelect as OriginTreeSelect } from 'antd';
|
|
5
|
-
import { tools } from '@cqsjjb/jjb-common-lib';
|
|
6
|
-
import { getAlgorithm, getPrefixCls } from '../tools/index.js';
|
|
7
|
-
import './index.less';
|
|
8
|
-
const algorithm = getAlgorithm();
|
|
9
|
-
const prefixCls = getPrefixCls();
|
|
3
|
+
import { Input as OriginInput, Select as OriginSelect, Cascader as OriginCascader, DatePicker as OriginDatePicker, TreeSelect as OriginTreeSelect } from 'antd';
|
|
10
4
|
|
|
11
5
|
/**
|
|
12
6
|
* 通用包裹组件
|
|
@@ -17,8 +11,6 @@ function withLabel(WrappedComponent, extraProps = {}) {
|
|
|
17
11
|
return function Wrapper(props) {
|
|
18
12
|
const {
|
|
19
13
|
label,
|
|
20
|
-
labelSpan,
|
|
21
|
-
style,
|
|
22
14
|
onChange,
|
|
23
15
|
...restProps
|
|
24
16
|
} = props;
|
|
@@ -28,23 +20,14 @@ function withLabel(WrappedComponent, extraProps = {}) {
|
|
|
28
20
|
onChange(val === '' ? undefined : val, ...args);
|
|
29
21
|
}
|
|
30
22
|
};
|
|
31
|
-
return /*#__PURE__*/React.createElement(
|
|
32
|
-
style: style,
|
|
33
|
-
className: tools.classNames(`${prefixCls}-form-item-control-label-wrapper`, `${prefixCls}-form-item-control-label-wrapper-${algorithm}`, label && `${prefixCls}-form-item-control-label-has`)
|
|
34
|
-
}, /*#__PURE__*/React.createElement(Row, {
|
|
35
|
-
align: "middle"
|
|
36
|
-
}, label && /*#__PURE__*/React.createElement(Col, {
|
|
37
|
-
span: labelSpan,
|
|
38
|
-
className: `${prefixCls}-form-item-control-label-span`
|
|
39
|
-
}, label), /*#__PURE__*/React.createElement(Col, {
|
|
40
|
-
flex: 1
|
|
41
|
-
}, /*#__PURE__*/React.createElement(WrappedComponent, _extends({
|
|
23
|
+
return /*#__PURE__*/React.createElement(WrappedComponent, _extends({
|
|
42
24
|
style: {
|
|
43
25
|
width: '100%'
|
|
44
|
-
}
|
|
26
|
+
},
|
|
27
|
+
prefix: label
|
|
45
28
|
}, extraProps, restProps, {
|
|
46
29
|
onChange: handleChange
|
|
47
|
-
}))
|
|
30
|
+
}));
|
|
48
31
|
};
|
|
49
32
|
}
|
|
50
33
|
|
|
@@ -73,17 +56,6 @@ DatePicker.WeekPicker = withLabel(OriginDatePicker.WeekPicker);
|
|
|
73
56
|
DatePicker.MonthPicker = withLabel(OriginDatePicker.MonthPicker);
|
|
74
57
|
DatePicker.QuarterPicker = withLabel(OriginDatePicker.QuarterPicker);
|
|
75
58
|
DatePicker.YearPicker = withLabel(OriginDatePicker.YearPicker);
|
|
76
|
-
|
|
77
|
-
// ============ PropTypes 公共扩展 ============
|
|
78
|
-
const commonPropTypes = {
|
|
79
|
-
label: PropTypes.string,
|
|
80
|
-
labelSpan: PropTypes.number,
|
|
81
|
-
style: PropTypes.object,
|
|
82
|
-
onChange: PropTypes.func
|
|
83
|
-
};
|
|
84
|
-
[Input, Select, Cascader, TreeSelect, DatePicker, DatePicker.RangePicker, DatePicker.TimePicker, DatePicker.WeekPicker, DatePicker.MonthPicker, DatePicker.QuarterPicker, DatePicker.YearPicker].forEach(cmp => {
|
|
85
|
-
cmp.propTypes = commonPropTypes;
|
|
86
|
-
});
|
|
87
59
|
export default {
|
|
88
60
|
Input,
|
|
89
61
|
Select,
|
package/Editor/index.js
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import PropTypes from 'prop-types';
|
|
2
1
|
import '@wangeditor-next/editor/dist/css/style.css';
|
|
3
2
|
import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
|
|
4
3
|
import { message } from 'antd';
|
|
@@ -99,7 +98,8 @@ const RCEditor = /*#__PURE__*/forwardRef(function RCEditor(props, ref) {
|
|
|
99
98
|
bordered = true,
|
|
100
99
|
mode = 'default',
|
|
101
100
|
height = 300,
|
|
102
|
-
disabled,
|
|
101
|
+
disabled = false,
|
|
102
|
+
zIndex = 1000,
|
|
103
103
|
uploadUrl = `${window.process.env.app.API_HOST}/attachment/files/upload-speed-simple`,
|
|
104
104
|
uploadFileName = 'file',
|
|
105
105
|
uploadHeaders = {},
|
|
@@ -111,9 +111,9 @@ const RCEditor = /*#__PURE__*/forwardRef(function RCEditor(props, ref) {
|
|
|
111
111
|
borderColor = '#e8e8e8',
|
|
112
112
|
borderWidth = 1,
|
|
113
113
|
borderRadius = 2,
|
|
114
|
-
onBlur,
|
|
115
|
-
onFocus,
|
|
116
|
-
onChange
|
|
114
|
+
onBlur = tools.noop,
|
|
115
|
+
onFocus = tools.noop,
|
|
116
|
+
onChange = tools.noop
|
|
117
117
|
} = props;
|
|
118
118
|
|
|
119
119
|
// 编辑器
|
|
@@ -289,6 +289,7 @@ const RCEditor = /*#__PURE__*/forwardRef(function RCEditor(props, ref) {
|
|
|
289
289
|
}));
|
|
290
290
|
return /*#__PURE__*/React.createElement("div", {
|
|
291
291
|
style: {
|
|
292
|
+
zIndex,
|
|
292
293
|
border: bordered ? `${borderWidth}px ${borderStyle} ${borderColor}` : 'none',
|
|
293
294
|
overflow: 'hidden',
|
|
294
295
|
borderRadius
|
|
@@ -306,25 +307,4 @@ const RCEditor = /*#__PURE__*/forwardRef(function RCEditor(props, ref) {
|
|
|
306
307
|
}
|
|
307
308
|
}));
|
|
308
309
|
});
|
|
309
|
-
RCEditor.propTypes = {
|
|
310
|
-
bordered: PropTypes.bool,
|
|
311
|
-
borderStyle: PropTypes.string,
|
|
312
|
-
borderColor: PropTypes.string,
|
|
313
|
-
borderWidth: PropTypes.number,
|
|
314
|
-
borderRadius: PropTypes.number,
|
|
315
|
-
mode: PropTypes.string,
|
|
316
|
-
value: PropTypes.string,
|
|
317
|
-
height: PropTypes.number,
|
|
318
|
-
disabled: PropTypes.bool,
|
|
319
|
-
uploadUrl: PropTypes.string,
|
|
320
|
-
uploadFileName: PropTypes.string,
|
|
321
|
-
uploadImageFileSize: PropTypes.number,
|
|
322
|
-
uploadVideoFileSize: PropTypes.number,
|
|
323
|
-
uploadHeaders: PropTypes.object,
|
|
324
|
-
uploadCustomRequest: PropTypes.func,
|
|
325
|
-
placeholder: PropTypes.string,
|
|
326
|
-
onBlur: PropTypes.func,
|
|
327
|
-
onFocus: PropTypes.func,
|
|
328
|
-
onChange: PropTypes.func
|
|
329
|
-
};
|
|
330
310
|
export default RCEditor;
|
package/FileUploader/index.d.ts
CHANGED
package/FileUploader/index.js
CHANGED
|
@@ -1,10 +1,9 @@
|
|
|
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
2
|
import MD5 from 'spark-md5';
|
|
3
3
|
import React from 'react';
|
|
4
|
-
import PropTypes from 'prop-types';
|
|
5
4
|
import { Tooltip, Button, message } from 'antd';
|
|
6
5
|
import { DeleteOutlined, PaperClipOutlined } from '@ant-design/icons';
|
|
7
|
-
import { getAppKey, getToken, isHttpUrl
|
|
6
|
+
import { getAppKey, getToken, isHttpUrl } from '../tools/index.js';
|
|
8
7
|
import { tools } from '@cqsjjb/jjb-common-lib';
|
|
9
8
|
import './index.less';
|
|
10
9
|
const {
|
|
@@ -26,10 +25,10 @@ class FileUploader extends React.Component {
|
|
|
26
25
|
*/
|
|
27
26
|
get httpConfig() {
|
|
28
27
|
const {
|
|
29
|
-
data,
|
|
28
|
+
data = {},
|
|
30
29
|
action,
|
|
31
|
-
headers,
|
|
32
|
-
fieldName
|
|
30
|
+
headers = {},
|
|
31
|
+
fieldName = 'file'
|
|
33
32
|
} = this.props;
|
|
34
33
|
const {
|
|
35
34
|
API_HOST
|
|
@@ -39,7 +38,7 @@ class FileUploader extends React.Component {
|
|
|
39
38
|
data,
|
|
40
39
|
action,
|
|
41
40
|
headers: {
|
|
42
|
-
...headers,
|
|
41
|
+
...tools.toObject(headers),
|
|
43
42
|
token: getToken(),
|
|
44
43
|
appKey: getAppKey()
|
|
45
44
|
},
|
|
@@ -64,9 +63,9 @@ class FileUploader extends React.Component {
|
|
|
64
63
|
*/
|
|
65
64
|
get disabled() {
|
|
66
65
|
const {
|
|
67
|
-
multiple,
|
|
68
|
-
maxCount,
|
|
69
|
-
disabled
|
|
66
|
+
multiple = false,
|
|
67
|
+
maxCount = 99,
|
|
68
|
+
disabled = false
|
|
70
69
|
} = this.props;
|
|
71
70
|
if (disabled) {
|
|
72
71
|
return disabled;
|
|
@@ -138,14 +137,6 @@ class FileUploader extends React.Component {
|
|
|
138
137
|
}
|
|
139
138
|
}
|
|
140
139
|
|
|
141
|
-
/**
|
|
142
|
-
* @description 获取版本
|
|
143
|
-
* @return {string}
|
|
144
|
-
*/
|
|
145
|
-
get version() {
|
|
146
|
-
return this.props.version;
|
|
147
|
-
}
|
|
148
|
-
|
|
149
140
|
/**
|
|
150
141
|
* @description 发起上传请求
|
|
151
142
|
* @param file {File}
|
|
@@ -195,17 +186,13 @@ class FileUploader extends React.Component {
|
|
|
195
186
|
Object.keys(this.httpConfig.data).forEach(key => form.append(key, this.httpConfig.data[key]));
|
|
196
187
|
xhr.send(form);
|
|
197
188
|
});
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
form.append('md5', md5.end());
|
|
203
|
-
fn();
|
|
204
|
-
};
|
|
205
|
-
read.readAsDataURL(file);
|
|
206
|
-
} else {
|
|
189
|
+
const read = new FileReader();
|
|
190
|
+
read.onload = e => {
|
|
191
|
+
md5.appendBinary(e.target.result);
|
|
192
|
+
form.append('md5', md5.end());
|
|
207
193
|
fn();
|
|
208
|
-
}
|
|
194
|
+
};
|
|
195
|
+
read.readAsDataURL(file);
|
|
209
196
|
});
|
|
210
197
|
}
|
|
211
198
|
|
|
@@ -241,12 +228,12 @@ class FileUploader extends React.Component {
|
|
|
241
228
|
type: fileType
|
|
242
229
|
} = file;
|
|
243
230
|
const {
|
|
244
|
-
accept,
|
|
245
|
-
multiple,
|
|
246
|
-
size: maxSize
|
|
231
|
+
accept = '*',
|
|
232
|
+
multiple = false,
|
|
233
|
+
size: maxSize = 5120
|
|
247
234
|
} = this.props;
|
|
248
235
|
this.verifyFileAccept(fileType, accept).then(() => this.verifyFileSize(fileSize, maxSize).then(() => this.onFormRequest(file).then(res => {
|
|
249
|
-
const data =
|
|
236
|
+
const data = {
|
|
250
237
|
fileId: res.fileId || res.url,
|
|
251
238
|
fileUrl: res.fileUrl || res.fileName
|
|
252
239
|
};
|
|
@@ -256,10 +243,10 @@ class FileUploader extends React.Component {
|
|
|
256
243
|
}
|
|
257
244
|
render() {
|
|
258
245
|
const {
|
|
259
|
-
accept,
|
|
260
|
-
preview,
|
|
261
|
-
showDelete,
|
|
262
|
-
buttonProps,
|
|
246
|
+
accept = '*',
|
|
247
|
+
preview = false,
|
|
248
|
+
showDelete = true,
|
|
249
|
+
buttonProps = {},
|
|
263
250
|
// ---------
|
|
264
251
|
children
|
|
265
252
|
} = this.props;
|
|
@@ -268,7 +255,7 @@ class FileUploader extends React.Component {
|
|
|
268
255
|
} = this.state;
|
|
269
256
|
return /*#__PURE__*/React.createElement("div", {
|
|
270
257
|
className: `${prefixCls}_file-uploader_`
|
|
271
|
-
}, /*#__PURE__*/React.createElement(Button, _extends({}, buttonProps, {
|
|
258
|
+
}, /*#__PURE__*/React.createElement(Button, _extends({}, tools.toObject(buttonProps), {
|
|
272
259
|
loading: loading,
|
|
273
260
|
disabled: this.disabled,
|
|
274
261
|
className: `${prefixCls}_file-uploader-select_`,
|
|
@@ -283,7 +270,7 @@ class FileUploader extends React.Component {
|
|
|
283
270
|
disabled: this.disabled,
|
|
284
271
|
onChange: e => this.onUpload(e)
|
|
285
272
|
}), /*#__PURE__*/React.createElement("span", null, children)), this.value.map((value, index) => {
|
|
286
|
-
const $value =
|
|
273
|
+
const $value = value?.fileUrl;
|
|
287
274
|
return /*#__PURE__*/React.createElement("div", {
|
|
288
275
|
key: index,
|
|
289
276
|
className: `${prefixCls}-upload-list-text-container`
|
|
@@ -314,66 +301,6 @@ class FileUploader extends React.Component {
|
|
|
314
301
|
}));
|
|
315
302
|
}
|
|
316
303
|
}
|
|
317
|
-
FileUploader.defaultProps = {
|
|
318
|
-
size: 5120,
|
|
319
|
-
data: {},
|
|
320
|
-
accept: '*',
|
|
321
|
-
headers: {},
|
|
322
|
-
version: 'v2',
|
|
323
|
-
preview: false,
|
|
324
|
-
maxCount: 99,
|
|
325
|
-
buttonProps: {
|
|
326
|
-
icon: undefined,
|
|
327
|
-
size: 'middle',
|
|
328
|
-
type: 'default',
|
|
329
|
-
block: false,
|
|
330
|
-
shape: 'default',
|
|
331
|
-
ghost: false,
|
|
332
|
-
danger: false
|
|
333
|
-
},
|
|
334
|
-
disabled: false,
|
|
335
|
-
multiple: false,
|
|
336
|
-
fieldName: 'file',
|
|
337
|
-
showDelete: true
|
|
338
|
-
};
|
|
339
|
-
FileUploader.propTypes = {
|
|
340
|
-
// 版本 v1旧版 / v2新版
|
|
341
|
-
version: PropTypes.string,
|
|
342
|
-
// 上传资源文件大小 默认5MB
|
|
343
|
-
size: PropTypes.number,
|
|
344
|
-
// 按钮图标
|
|
345
|
-
buttonProps: PropTypes.object,
|
|
346
|
-
// http上传携带的其他数据 默认{}
|
|
347
|
-
data: PropTypes.object,
|
|
348
|
-
// 填充值 默认undefined
|
|
349
|
-
value: PropTypes.any,
|
|
350
|
-
// 上传资源类型
|
|
351
|
-
accept: PropTypes.string,
|
|
352
|
-
// http上传接口
|
|
353
|
-
action: PropTypes.string.isRequired,
|
|
354
|
-
// 预览 默认false
|
|
355
|
-
preview: PropTypes.bool,
|
|
356
|
-
// http请求头配置 默认{}
|
|
357
|
-
headers: PropTypes.object,
|
|
358
|
-
// 最大上传数 multiple模式下有效 默认最大上传数99
|
|
359
|
-
maxCount: PropTypes.any,
|
|
360
|
-
// 开启多个文件上传 默认false
|
|
361
|
-
multiple: PropTypes.bool,
|
|
362
|
-
// 是否禁用上传 默认false
|
|
363
|
-
disabled: PropTypes.bool,
|
|
364
|
-
// 上传字段 默认ossFile
|
|
365
|
-
fieldName: PropTypes.string,
|
|
366
|
-
// 显示删除按钮 默认true
|
|
367
|
-
showDelete: PropTypes.bool,
|
|
368
|
-
// 数据回调
|
|
369
|
-
onChange: PropTypes.func,
|
|
370
|
-
// 上传之前验证资源大小回调
|
|
371
|
-
onBeforeUploadVerifySize: PropTypes.func,
|
|
372
|
-
// 上传之前验证资源类型回调
|
|
373
|
-
onBeforeUploadVerifyAccept: PropTypes.func,
|
|
374
|
-
// 可以自定义自己的上传实现
|
|
375
|
-
customRequest: PropTypes.func
|
|
376
|
-
};
|
|
377
304
|
export default FileUploader;
|
|
378
305
|
export const getValueProps = value => ({
|
|
379
306
|
value: value ? {
|
|
@@ -24,7 +24,6 @@ export default function FormilyDescriptions({
|
|
|
24
24
|
const dataSource = tools.getDynamicFormilyFields(schema, values, {
|
|
25
25
|
regions
|
|
26
26
|
});
|
|
27
|
-
console.log(schema, values);
|
|
28
27
|
if (!dataSource.length) return /*#__PURE__*/React.createElement(Empty, {
|
|
29
28
|
image: Empty.PRESENTED_IMAGE_SIMPLE
|
|
30
29
|
});
|
package/ImageCropper/index.js
CHANGED
|
@@ -1,22 +1,20 @@
|
|
|
1
1
|
import MD5 from 'spark-md5';
|
|
2
2
|
import React, { useEffect, useRef, useState, forwardRef, useImperativeHandle } from 'react';
|
|
3
3
|
import Cropper from 'react-cropper';
|
|
4
|
-
import PropTypes from 'prop-types';
|
|
5
4
|
import 'cropperjs/dist/cropper.css';
|
|
6
5
|
import { Empty } from 'antd';
|
|
7
6
|
import { tools } from '@cqsjjb/jjb-common-lib';
|
|
8
7
|
import { isHttpUrl } from '../tools/index.js';
|
|
9
8
|
const ImageCropper = /*#__PURE__*/forwardRef((props, ref) => {
|
|
10
9
|
const {
|
|
11
|
-
width,
|
|
12
|
-
height,
|
|
13
|
-
aspect,
|
|
14
|
-
locked,
|
|
10
|
+
width = 400,
|
|
11
|
+
height = 400,
|
|
12
|
+
aspect = 16 / 9,
|
|
13
|
+
locked = false,
|
|
15
14
|
resource
|
|
16
15
|
} = props;
|
|
17
16
|
const cropRef = useRef(null);
|
|
18
17
|
const [src, setSrc] = useState(undefined);
|
|
19
|
-
console.log('props', locked);
|
|
20
18
|
|
|
21
19
|
// 更新 src
|
|
22
20
|
const onUpdateSrc = () => {
|
|
@@ -115,17 +113,4 @@ const ImageCropper = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
115
113
|
description: "\u672A\u5BFC\u5165\u56FE\u7247\u8D44\u6E90\uFF0C\u65E0\u6CD5\u88C1\u526A"
|
|
116
114
|
}));
|
|
117
115
|
});
|
|
118
|
-
ImageCropper.defaultProps = {
|
|
119
|
-
width: 400,
|
|
120
|
-
height: 400,
|
|
121
|
-
aspect: 16 / 9,
|
|
122
|
-
locked: false
|
|
123
|
-
};
|
|
124
|
-
ImageCropper.propTypes = {
|
|
125
|
-
width: PropTypes.number,
|
|
126
|
-
height: PropTypes.number,
|
|
127
|
-
locked: PropTypes.bool,
|
|
128
|
-
aspect: PropTypes.number,
|
|
129
|
-
resource: PropTypes.any.isRequired
|
|
130
|
-
};
|
|
131
116
|
export default ImageCropper;
|
package/ImageUploader/index.d.ts
CHANGED
package/ImageUploader/index.js
CHANGED
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
import MD5 from 'spark-md5';
|
|
2
2
|
import React, { useState, useRef, useCallback } from 'react';
|
|
3
|
-
import PropTypes from 'prop-types';
|
|
4
3
|
import { tools } from '@cqsjjb/jjb-common-lib';
|
|
5
4
|
import { Button, Col, Image as ImageFunc, Modal, Row, message } from 'antd';
|
|
6
5
|
import { PlusOutlined, EyeOutlined, DeleteOutlined, SyncOutlined, ScissorOutlined } from '@ant-design/icons';
|
|
7
6
|
import ImageCropper from '../ImageCropper';
|
|
8
7
|
import './index.less';
|
|
9
|
-
import {
|
|
8
|
+
import { getToken, getViewAsp, getAppKey, isHttpUrl } from '../tools/index.js';
|
|
10
9
|
const {
|
|
11
10
|
toObject,
|
|
12
11
|
isPromise,
|
|
@@ -23,7 +22,6 @@ const ImageUploader = props => {
|
|
|
23
22
|
const [resource, setResource] = useState(undefined);
|
|
24
23
|
const cropperRef = useRef(null);
|
|
25
24
|
const fileInputRef = useRef(null);
|
|
26
|
-
const version = props.version;
|
|
27
25
|
const algorithm = (() => {
|
|
28
26
|
const value = document.documentElement.style.getPropertyValue('--saas-algorithm');
|
|
29
27
|
return value ? value === '#FFF' ? 'default' : 'dark' : 'default';
|
|
@@ -31,12 +29,12 @@ const ImageUploader = props => {
|
|
|
31
29
|
const onLoadFile = useCallback(file => {
|
|
32
30
|
const md5 = new MD5();
|
|
33
31
|
const {
|
|
34
|
-
svg
|
|
32
|
+
svg = false
|
|
35
33
|
} = props;
|
|
36
34
|
return new Promise(resolve => {
|
|
37
35
|
const reader = new FileReader();
|
|
38
36
|
reader.onload = e => {
|
|
39
|
-
|
|
37
|
+
md5.appendBinary(e.target.result);
|
|
40
38
|
const isImage = (svg ? FILE_TYPE_POWER : FILE_TYPE).includes(file.type);
|
|
41
39
|
if (isImage) {
|
|
42
40
|
const image = new Image();
|
|
@@ -46,7 +44,7 @@ const ImageUploader = props => {
|
|
|
46
44
|
resolve({
|
|
47
45
|
file,
|
|
48
46
|
base64,
|
|
49
|
-
md5:
|
|
47
|
+
md5: md5.end(),
|
|
50
48
|
size: file.size,
|
|
51
49
|
type: file.type,
|
|
52
50
|
name: file.name,
|
|
@@ -57,7 +55,7 @@ const ImageUploader = props => {
|
|
|
57
55
|
} else {
|
|
58
56
|
resolve({
|
|
59
57
|
file,
|
|
60
|
-
md5:
|
|
58
|
+
md5: md5.end(),
|
|
61
59
|
size: file.size,
|
|
62
60
|
type: file.type,
|
|
63
61
|
name: file.name,
|
|
@@ -69,7 +67,7 @@ const ImageUploader = props => {
|
|
|
69
67
|
};
|
|
70
68
|
reader.readAsDataURL(file);
|
|
71
69
|
});
|
|
72
|
-
}, [props
|
|
70
|
+
}, [props]);
|
|
73
71
|
const onCompression = useCallback(data => {
|
|
74
72
|
const {
|
|
75
73
|
compressionConfig
|
|
@@ -110,12 +108,12 @@ const ImageUploader = props => {
|
|
|
110
108
|
API_HOST
|
|
111
109
|
} = window.process.env.app;
|
|
112
110
|
const {
|
|
113
|
-
data,
|
|
111
|
+
data = {},
|
|
114
112
|
action,
|
|
115
|
-
headers: $headers,
|
|
116
|
-
needToken,
|
|
113
|
+
headers: $headers = {},
|
|
114
|
+
needToken = true,
|
|
117
115
|
customRequest,
|
|
118
|
-
fieldName,
|
|
116
|
+
fieldName = 'file',
|
|
119
117
|
onChange
|
|
120
118
|
} = props;
|
|
121
119
|
const requestURL = isHttpUrl(action) ? action : `${API_HOST}${action}`;
|
|
@@ -123,9 +121,10 @@ const ImageUploader = props => {
|
|
|
123
121
|
const form = new FormData();
|
|
124
122
|
const headers = toObject($headers);
|
|
125
123
|
headers.appKey = getAppKey();
|
|
126
|
-
if (needToken)
|
|
127
|
-
|
|
128
|
-
|
|
124
|
+
if (needToken) {
|
|
125
|
+
headers.token = getToken();
|
|
126
|
+
}
|
|
127
|
+
transfer.md5 && form.append('md5', transfer.md5);
|
|
129
128
|
setLoading(true);
|
|
130
129
|
xhr.open('POST', requestURL);
|
|
131
130
|
Object.keys(headers).forEach(key => xhr.setRequestHeader(key, headers[key]));
|
|
@@ -135,19 +134,22 @@ const ImageUploader = props => {
|
|
|
135
134
|
const res = parseObject(xhr.responseText);
|
|
136
135
|
if (isFunction(customRequest)) {
|
|
137
136
|
const fn = customRequest(res);
|
|
138
|
-
if (isPromise(fn))
|
|
137
|
+
if (isPromise(fn)) {
|
|
138
|
+
fn.then(value => onChange && onChange(value));
|
|
139
|
+
}
|
|
139
140
|
} else {
|
|
140
141
|
const {
|
|
141
142
|
success,
|
|
142
|
-
respCode,
|
|
143
143
|
errMessage
|
|
144
144
|
} = res;
|
|
145
|
-
if (
|
|
145
|
+
if (success) {
|
|
146
146
|
const result = toObject(res.data);
|
|
147
|
-
if (typeof onChange === 'undefined')
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
147
|
+
if (typeof onChange === 'undefined') {
|
|
148
|
+
console.warn('ImageUploader警告:缺少必要的onChange回调,可能无法正确显示图片!');
|
|
149
|
+
}
|
|
150
|
+
onChange && onChange({
|
|
151
|
+
fileId: result.fileId,
|
|
152
|
+
fileUrl: result.fileUrl
|
|
151
153
|
});
|
|
152
154
|
message.success('上传成功!');
|
|
153
155
|
} else {
|
|
@@ -159,17 +161,17 @@ const ImageUploader = props => {
|
|
|
159
161
|
form.append(fieldName, transfer.file);
|
|
160
162
|
Object.keys(data).forEach(key => form.append(key, data[key]));
|
|
161
163
|
xhr.send(form);
|
|
162
|
-
}, [props
|
|
164
|
+
}, [props]);
|
|
163
165
|
const onUpload = useCallback(e => {
|
|
164
166
|
const target = e.target;
|
|
165
167
|
const files = target.files;
|
|
166
168
|
const file = files[0];
|
|
167
169
|
const {
|
|
168
|
-
wh,
|
|
169
|
-
svg,
|
|
170
|
-
size,
|
|
171
|
-
cropper,
|
|
172
|
-
compression
|
|
170
|
+
wh = '50*50',
|
|
171
|
+
svg = false,
|
|
172
|
+
size = 5120,
|
|
173
|
+
cropper = false,
|
|
174
|
+
compression = false
|
|
173
175
|
} = props;
|
|
174
176
|
onLoadFile(file).then(load => {
|
|
175
177
|
const [w, h] = getViewAsp(wh);
|
|
@@ -205,19 +207,20 @@ const ImageUploader = props => {
|
|
|
205
207
|
});
|
|
206
208
|
}, [props, onLoadFile, onCompression, onUploadHttp]);
|
|
207
209
|
const {
|
|
208
|
-
tip,
|
|
209
|
-
svg,
|
|
210
|
+
tip = '点击上传',
|
|
211
|
+
svg = false,
|
|
210
212
|
value,
|
|
211
|
-
disabled,
|
|
212
|
-
width,
|
|
213
|
-
height,
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
213
|
+
disabled = false,
|
|
214
|
+
width = 120,
|
|
215
|
+
height = 120,
|
|
216
|
+
preview: _preview = true,
|
|
217
|
+
cropper = false,
|
|
218
|
+
borderStyle = 'dashed',
|
|
219
|
+
borderColor = '#d9d9d9',
|
|
220
|
+
borderWidth = 1,
|
|
221
|
+
borderRadius = 2,
|
|
222
|
+
backgroundColor = '#fafafa',
|
|
223
|
+
cropperConfig: $cropperConfig = {},
|
|
221
224
|
onChange
|
|
222
225
|
} = props;
|
|
223
226
|
const cropperConfig = toObject($cropperConfig);
|
|
@@ -235,14 +238,14 @@ const ImageUploader = props => {
|
|
|
235
238
|
}, value ? /*#__PURE__*/React.createElement("div", {
|
|
236
239
|
className: `${prefixCls}_image-file-uploader-preview_`
|
|
237
240
|
}, value && /*#__PURE__*/React.createElement(ImageFunc, {
|
|
238
|
-
src:
|
|
241
|
+
src: toObject(value).fileUrl,
|
|
239
242
|
preview: !disabled ? {
|
|
240
243
|
visible: preview,
|
|
241
244
|
onVisibleChange: () => setPreview(false)
|
|
242
245
|
} : true
|
|
243
246
|
}), !disabled && /*#__PURE__*/React.createElement("div", {
|
|
244
247
|
className: `${prefixCls}_image-file-uploader-preview-control_`
|
|
245
|
-
},
|
|
248
|
+
}, _preview && /*#__PURE__*/React.createElement(EyeOutlined, {
|
|
246
249
|
title: "\u9884\u89C8",
|
|
247
250
|
onClick: () => setPreview(true)
|
|
248
251
|
}), /*#__PURE__*/React.createElement(DeleteOutlined, {
|
|
@@ -296,61 +299,6 @@ const ImageUploader = props => {
|
|
|
296
299
|
resource: resource
|
|
297
300
|
})));
|
|
298
301
|
};
|
|
299
|
-
ImageUploader.defaultProps = {
|
|
300
|
-
wh: '50*50',
|
|
301
|
-
tip: '点击上传',
|
|
302
|
-
svg: false,
|
|
303
|
-
size: 5120,
|
|
304
|
-
data: {},
|
|
305
|
-
width: 120,
|
|
306
|
-
height: 120,
|
|
307
|
-
headers: {},
|
|
308
|
-
preview: true,
|
|
309
|
-
cropper: false,
|
|
310
|
-
version: 'v2',
|
|
311
|
-
disabled: false,
|
|
312
|
-
fieldName: 'file',
|
|
313
|
-
borderColor: '#d9d9d9',
|
|
314
|
-
borderWidth: 1,
|
|
315
|
-
borderStyle: 'dashed',
|
|
316
|
-
borderRadius: 2,
|
|
317
|
-
cropperConfig: {},
|
|
318
|
-
backgroundColor: '#fafafa',
|
|
319
|
-
compression: false,
|
|
320
|
-
compressionConfig: {
|
|
321
|
-
quality: 0.6,
|
|
322
|
-
backType: 'file'
|
|
323
|
-
},
|
|
324
|
-
needToken: true
|
|
325
|
-
};
|
|
326
|
-
ImageUploader.propTypes = {
|
|
327
|
-
version: PropTypes.string,
|
|
328
|
-
wh: PropTypes.string,
|
|
329
|
-
svg: PropTypes.bool,
|
|
330
|
-
tip: PropTypes.string,
|
|
331
|
-
size: PropTypes.number,
|
|
332
|
-
data: PropTypes.object,
|
|
333
|
-
value: PropTypes.any,
|
|
334
|
-
width: PropTypes.number,
|
|
335
|
-
height: PropTypes.number,
|
|
336
|
-
action: PropTypes.string.isRequired,
|
|
337
|
-
preview: PropTypes.bool,
|
|
338
|
-
cropper: PropTypes.bool,
|
|
339
|
-
headers: PropTypes.object,
|
|
340
|
-
disabled: PropTypes.bool,
|
|
341
|
-
fieldName: PropTypes.string,
|
|
342
|
-
borderStyle: PropTypes.string,
|
|
343
|
-
borderColor: PropTypes.string,
|
|
344
|
-
borderWidth: PropTypes.number,
|
|
345
|
-
borderRadius: PropTypes.number,
|
|
346
|
-
cropperConfig: PropTypes.object,
|
|
347
|
-
backgroundColor: PropTypes.string,
|
|
348
|
-
customRequest: PropTypes.func,
|
|
349
|
-
onChange: PropTypes.func,
|
|
350
|
-
compression: PropTypes.bool,
|
|
351
|
-
compressionConfig: PropTypes.object,
|
|
352
|
-
needToken: PropTypes.bool
|
|
353
|
-
};
|
|
354
302
|
export default ImageUploader;
|
|
355
303
|
export const getValueProps = value => ({
|
|
356
304
|
value: value ? {
|
package/PageLayout/index.js
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import PropTypes from 'prop-types';
|
|
2
1
|
import React, { memo, useCallback } from 'react';
|
|
3
2
|
import { PageHeader } from '@ant-design/pro-layout';
|
|
4
3
|
import './index.less';
|
|
@@ -58,28 +57,4 @@ const PageLayout = /*#__PURE__*/memo(props => {
|
|
|
58
57
|
style: footerStyle
|
|
59
58
|
}, footer));
|
|
60
59
|
});
|
|
61
|
-
PageLayout.propTypes = {
|
|
62
|
-
style: PropTypes.object,
|
|
63
|
-
title: PropTypes.string,
|
|
64
|
-
extra: PropTypes.node,
|
|
65
|
-
header: PropTypes.node,
|
|
66
|
-
footer: PropTypes.any,
|
|
67
|
-
history: PropTypes.object,
|
|
68
|
-
noStyle: PropTypes.bool,
|
|
69
|
-
noBorder: PropTypes.bool,
|
|
70
|
-
formLine: PropTypes.node,
|
|
71
|
-
previous: PropTypes.bool,
|
|
72
|
-
transparent: PropTypes.bool,
|
|
73
|
-
formLineStyle: PropTypes.object,
|
|
74
|
-
contentStyle: PropTypes.object,
|
|
75
|
-
footerStyle: PropTypes.object,
|
|
76
|
-
pageHeaderStyle: PropTypes.object,
|
|
77
|
-
onBack: PropTypes.func
|
|
78
|
-
};
|
|
79
|
-
PageLayout.defaultProps = {
|
|
80
|
-
style: {},
|
|
81
|
-
history: {},
|
|
82
|
-
noBorder: false,
|
|
83
|
-
previous: false
|
|
84
|
-
};
|
|
85
60
|
export default PageLayout;
|
package/SearchForm/index.js
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import React, { useState, useRef, useEffect } from 'react';
|
|
2
|
-
import PropTypes from 'prop-types';
|
|
3
2
|
import { Form, Button, Space, Row, Col } from 'antd';
|
|
4
3
|
import { SearchOutlined, DoubleRightOutlined, UndoOutlined } from '@ant-design/icons';
|
|
5
4
|
const SearchForm = ({
|
|
@@ -93,20 +92,4 @@ const SearchForm = ({
|
|
|
93
92
|
noStyle: true
|
|
94
93
|
}, getButtons()))));
|
|
95
94
|
};
|
|
96
|
-
SearchForm.propTypes = {
|
|
97
|
-
form: PropTypes.object,
|
|
98
|
-
style: PropTypes.object,
|
|
99
|
-
expand: PropTypes.bool,
|
|
100
|
-
// 受控
|
|
101
|
-
defaultExpand: PropTypes.bool,
|
|
102
|
-
// 内部默认展开
|
|
103
|
-
colSize: PropTypes.number,
|
|
104
|
-
loading: PropTypes.bool,
|
|
105
|
-
formLine: PropTypes.array,
|
|
106
|
-
initialValues: PropTypes.object,
|
|
107
|
-
onRef: PropTypes.func,
|
|
108
|
-
onReset: PropTypes.func,
|
|
109
|
-
onFinish: PropTypes.func,
|
|
110
|
-
onExpand: PropTypes.func
|
|
111
|
-
};
|
|
112
95
|
export default SearchForm;
|