@bit-sun/business-component 2.0.23 → 2.0.26
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/.editorconfig +16 -16
- package/.fatherrc.ts +4 -4
- package/.gitlab-ci.yml +174 -174
- package/.prettierignore +7 -7
- package/.prettierrc +11 -11
- package/.umirc.ts +74 -74
- package/README.md +27 -27
- package/dist/index.esm.js +6237 -4356
- package/dist/index.js +6235 -4354
- package/docs/index.md +21 -21
- package/package.json +52 -52
- package/src/assets/drag.svg +17 -17
- package/src/assets/exportFail.svg +37 -37
- package/src/assets/exportProcessing.svg +28 -28
- package/src/assets/exportSuccess.svg +34 -34
- package/src/assets/label_icon_bottom.svg +25 -25
- package/src/assets/upExport.svg +22 -22
- package/src/components/Business/AddSelectBusiness/index.md +41 -41
- package/src/components/Business/AddSelectBusiness/index.tsx +290 -289
- package/src/components/Business/CommodityEntry/index.md +70 -70
- package/src/components/Business/CommodityEntry/index.tsx +80 -80
- package/src/components/Business/CommonGuideWrapper/index.less +111 -111
- package/src/components/Business/CommonGuideWrapper/index.md +39 -39
- package/src/components/Business/CommonGuideWrapper/index.tsx +83 -83
- package/src/components/Business/SearchSelect/BusinessUtils.ts +1446 -1445
- package/src/components/Business/SearchSelect/common.ts +53 -53
- package/src/components/Business/SearchSelect/index.md +1137 -1137
- package/src/components/Business/SearchSelect/index.tsx +51 -48
- package/src/components/Business/SearchSelect/utils.ts +99 -99
- package/src/components/Business/StateFlow/index.less +130 -130
- package/src/components/Business/StateFlow/index.md +60 -60
- package/src/components/Business/StateFlow/index.tsx +29 -29
- package/src/components/Business/TreeSearchSelect/index.md +126 -126
- package/src/components/Business/TreeSearchSelect/index.tsx +34 -34
- package/src/components/Business/TreeSearchSelect/utils.ts +60 -60
- package/src/components/Functional/AddSelect/index.less +367 -367
- package/src/components/Functional/AddSelect/index.md +122 -121
- package/src/components/Functional/AddSelect/index.tsx +952 -952
- package/src/components/Functional/BillEntry/index.less +371 -371
- package/src/components/Functional/BillEntry/index.md +37 -37
- package/src/components/Functional/BillEntry/index.tsx +547 -547
- package/src/components/Functional/DataImport/index.less +63 -63
- package/src/components/Functional/DataImport/index.md +44 -44
- package/src/components/Functional/DataImport/index.tsx +689 -689
- package/src/components/Functional/DataValidation/index.less +63 -63
- package/src/components/Functional/DataValidation/index.md +38 -38
- package/src/components/Functional/DataValidation/index.tsx +681 -681
- package/src/components/Functional/ExportFunctions/ExportIcon/index.md +37 -37
- package/src/components/Functional/ExportFunctions/ExportIcon/index.tsx +58 -58
- package/src/components/Functional/QueryMutipleInput/index.less +37 -37
- package/src/components/Functional/QueryMutipleInput/index.md +33 -33
- package/src/components/Functional/QueryMutipleInput/index.tsx +128 -128
- package/src/components/Functional/SearchSelect/index.less +115 -115
- package/src/components/Functional/SearchSelect/index.md +141 -141
- package/src/components/Functional/SearchSelect/index.tsx +803 -803
- package/src/components/Functional/TreeSearchSelect/index.md +47 -47
- package/src/components/Functional/TreeSearchSelect/index.tsx +149 -149
- package/src/index.ts +25 -25
- package/src/utils/CheckOneUser/index.md +39 -39
- package/src/utils/CheckOneUser/index.ts +51 -51
- package/src/utils/requestUtils.ts +32 -32
- package/src/utils/utils.ts +22 -22
- package/tsconfig.json +29 -29
- package/typings.d.ts +3 -3
|
@@ -1,37 +1,37 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: 导出按钮
|
|
3
|
-
order: 5
|
|
4
|
-
nav:
|
|
5
|
-
title: 组件
|
|
6
|
-
order: 1
|
|
7
|
-
group:
|
|
8
|
-
path: /components/functional
|
|
9
|
-
order: 0
|
|
10
|
-
title: 功能组件
|
|
11
|
-
---
|
|
12
|
-
|
|
13
|
-
## ExportIcon
|
|
14
|
-
|
|
15
|
-
导出按钮demo
|
|
16
|
-
|
|
17
|
-
```tsx
|
|
18
|
-
import React, { useState, useRef } from 'react';
|
|
19
|
-
import {ExportIcon} from '../../../../index';
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
export default () => {
|
|
24
|
-
|
|
25
|
-
const tableRef = useRef()
|
|
26
|
-
|
|
27
|
-
return (
|
|
28
|
-
<div>
|
|
29
|
-
<ExportIcon request={{url:'abc'}} tableRef={tableRef}/>
|
|
30
|
-
</div>
|
|
31
|
-
);
|
|
32
|
-
};
|
|
33
|
-
```
|
|
34
|
-
|
|
35
|
-
<API></API>
|
|
36
|
-
|
|
37
|
-
More skills for writing demo: https://d.umijs.org/guide/demo-principle
|
|
1
|
+
---
|
|
2
|
+
title: 导出按钮
|
|
3
|
+
order: 5
|
|
4
|
+
nav:
|
|
5
|
+
title: 组件
|
|
6
|
+
order: 1
|
|
7
|
+
group:
|
|
8
|
+
path: /components/functional
|
|
9
|
+
order: 0
|
|
10
|
+
title: 功能组件
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
## ExportIcon
|
|
14
|
+
|
|
15
|
+
导出按钮demo
|
|
16
|
+
|
|
17
|
+
```tsx
|
|
18
|
+
import React, { useState, useRef } from 'react';
|
|
19
|
+
import {ExportIcon} from '../../../../index';
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
export default () => {
|
|
24
|
+
|
|
25
|
+
const tableRef = useRef()
|
|
26
|
+
|
|
27
|
+
return (
|
|
28
|
+
<div>
|
|
29
|
+
<ExportIcon request={{url:'abc'}} tableRef={tableRef}/>
|
|
30
|
+
</div>
|
|
31
|
+
);
|
|
32
|
+
};
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
<API></API>
|
|
36
|
+
|
|
37
|
+
More skills for writing demo: https://d.umijs.org/guide/demo-principle
|
|
@@ -1,58 +1,58 @@
|
|
|
1
|
-
import React, {Ref} from 'react'
|
|
2
|
-
import {message, Popconfirm, Tooltip} from "antd";
|
|
3
|
-
import axios from 'axios'
|
|
4
|
-
import exportlogo from '../../../../assets/exportlogo.png'
|
|
5
|
-
import {omit} from 'lodash'
|
|
6
|
-
interface exportIconType{
|
|
7
|
-
/** others选填,使用axios发请求,*/
|
|
8
|
-
request:{
|
|
9
|
-
url: string,
|
|
10
|
-
params: Function | Object,
|
|
11
|
-
others?: Object
|
|
12
|
-
},
|
|
13
|
-
/** BsSulaQueryTable的tableRef*/
|
|
14
|
-
tableRef: any,
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
const ExportIcon = ({request, tableRef}: exportIconType) => {
|
|
18
|
-
const {url, params, others} = request
|
|
19
|
-
|
|
20
|
-
return (
|
|
21
|
-
<div style={{ cursor: 'pointer' }}>
|
|
22
|
-
<Tooltip title="导出数据">
|
|
23
|
-
<img width={32} src={exportlogo} onClick={() =>{
|
|
24
|
-
const convertedParams = tableRef?.current?.getExportParams()
|
|
25
|
-
let requestData: any
|
|
26
|
-
|
|
27
|
-
if(typeof params === 'function'){
|
|
28
|
-
requestData = {...omit(params(convertedParams),'selectedRows')}
|
|
29
|
-
}else if(typeof params === 'object'){
|
|
30
|
-
requestData = {...params}
|
|
31
|
-
}
|
|
32
|
-
if(!params){
|
|
33
|
-
requestData = omit(convertedParams, 'selectedRows')
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
requestData['qp-id-in'] = convertedParams?.selectedRows?.map((d: any) => d.id)?.join(',')
|
|
37
|
-
|
|
38
|
-
axios({
|
|
39
|
-
url,
|
|
40
|
-
method:'POST',
|
|
41
|
-
data:requestData,
|
|
42
|
-
...others,
|
|
43
|
-
})
|
|
44
|
-
.then((result: any) => {
|
|
45
|
-
result = result.data;
|
|
46
|
-
if (result.code !== '000000') {
|
|
47
|
-
message.error(result?.msg);
|
|
48
|
-
return;
|
|
49
|
-
}
|
|
50
|
-
message.success('任务已排入导出队列')
|
|
51
|
-
})
|
|
52
|
-
}} />
|
|
53
|
-
</Tooltip>
|
|
54
|
-
</div>
|
|
55
|
-
)
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
export default ExportIcon
|
|
1
|
+
import React, {Ref} from 'react'
|
|
2
|
+
import {message, Popconfirm, Tooltip} from "antd";
|
|
3
|
+
import axios from 'axios'
|
|
4
|
+
import exportlogo from '../../../../assets/exportlogo.png'
|
|
5
|
+
import {omit} from 'lodash'
|
|
6
|
+
interface exportIconType{
|
|
7
|
+
/** others选填,使用axios发请求,*/
|
|
8
|
+
request:{
|
|
9
|
+
url: string,
|
|
10
|
+
params: Function | Object,
|
|
11
|
+
others?: Object
|
|
12
|
+
},
|
|
13
|
+
/** BsSulaQueryTable的tableRef*/
|
|
14
|
+
tableRef: any,
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
const ExportIcon = ({request, tableRef}: exportIconType) => {
|
|
18
|
+
const {url, params, others} = request
|
|
19
|
+
|
|
20
|
+
return (
|
|
21
|
+
<div style={{ cursor: 'pointer' }}>
|
|
22
|
+
<Tooltip title="导出数据">
|
|
23
|
+
<img width={32} src={exportlogo} onClick={() =>{
|
|
24
|
+
const convertedParams = tableRef?.current?.getExportParams()
|
|
25
|
+
let requestData: any
|
|
26
|
+
|
|
27
|
+
if(typeof params === 'function'){
|
|
28
|
+
requestData = {...omit(params(convertedParams),'selectedRows')}
|
|
29
|
+
}else if(typeof params === 'object'){
|
|
30
|
+
requestData = {...params}
|
|
31
|
+
}
|
|
32
|
+
if(!params){
|
|
33
|
+
requestData = omit(convertedParams, 'selectedRows')
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
requestData['qp-id-in'] = convertedParams?.selectedRows?.map((d: any) => d.id)?.join(',')
|
|
37
|
+
|
|
38
|
+
axios({
|
|
39
|
+
url,
|
|
40
|
+
method:'POST',
|
|
41
|
+
data:requestData,
|
|
42
|
+
...others,
|
|
43
|
+
})
|
|
44
|
+
.then((result: any) => {
|
|
45
|
+
result = result.data;
|
|
46
|
+
if (result.code !== '000000') {
|
|
47
|
+
message.error(result?.msg);
|
|
48
|
+
return;
|
|
49
|
+
}
|
|
50
|
+
message.success('任务已排入导出队列')
|
|
51
|
+
})
|
|
52
|
+
}} />
|
|
53
|
+
</Tooltip>
|
|
54
|
+
</div>
|
|
55
|
+
)
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
export default ExportIcon
|
|
@@ -1,37 +1,37 @@
|
|
|
1
|
-
.query_input {
|
|
2
|
-
&_show {
|
|
3
|
-
display: flex;
|
|
4
|
-
}
|
|
5
|
-
|
|
6
|
-
&_expand_button {
|
|
7
|
-
position: relative;
|
|
8
|
-
width: 30px;
|
|
9
|
-
color: #ffffff;
|
|
10
|
-
cursor: pointer;
|
|
11
|
-
|
|
12
|
-
span {
|
|
13
|
-
position: absolute;
|
|
14
|
-
height: 20px;
|
|
15
|
-
line-height: 14px;
|
|
16
|
-
left: 50%;
|
|
17
|
-
top: 50%;
|
|
18
|
-
transform: translate(-50%, -50%);
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
&_wrapper {
|
|
23
|
-
display: flex;
|
|
24
|
-
|
|
25
|
-
&_left {
|
|
26
|
-
width: 100px;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
&_right {
|
|
30
|
-
color: #9e9e9e;
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
&_textArea {
|
|
35
|
-
margin-top: 15px;
|
|
36
|
-
}
|
|
37
|
-
}
|
|
1
|
+
.query_input {
|
|
2
|
+
&_show {
|
|
3
|
+
display: flex;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
&_expand_button {
|
|
7
|
+
position: relative;
|
|
8
|
+
width: 30px;
|
|
9
|
+
color: #ffffff;
|
|
10
|
+
cursor: pointer;
|
|
11
|
+
|
|
12
|
+
span {
|
|
13
|
+
position: absolute;
|
|
14
|
+
height: 20px;
|
|
15
|
+
line-height: 14px;
|
|
16
|
+
left: 50%;
|
|
17
|
+
top: 50%;
|
|
18
|
+
transform: translate(-50%, -50%);
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
&_wrapper {
|
|
23
|
+
display: flex;
|
|
24
|
+
|
|
25
|
+
&_left {
|
|
26
|
+
width: 100px;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
&_right {
|
|
30
|
+
color: #9e9e9e;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
&_textArea {
|
|
35
|
+
margin-top: 15px;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
@@ -1,33 +1,33 @@
|
|
|
1
|
-
---
|
|
2
|
-
nav:
|
|
3
|
-
title: '组件'
|
|
4
|
-
order: 1
|
|
5
|
-
group:
|
|
6
|
-
title: 功能组件
|
|
7
|
-
order: 0
|
|
8
|
-
title: 批量查询组件
|
|
9
|
-
order: 2
|
|
10
|
-
---
|
|
11
|
-
|
|
12
|
-
## QueryMutipleInput
|
|
13
|
-
|
|
14
|
-
Demo:
|
|
15
|
-
|
|
16
|
-
```tsx
|
|
17
|
-
import React, { useRef } from 'react';
|
|
18
|
-
import { QueryMutipleInput } from '../../../index';
|
|
19
|
-
|
|
20
|
-
export default () => {
|
|
21
|
-
const handleOnChange = (value) => {
|
|
22
|
-
console.log(value);
|
|
23
|
-
};
|
|
24
|
-
|
|
25
|
-
return (
|
|
26
|
-
<div>
|
|
27
|
-
<QueryMutipleInput onValueChange={handleOnChange} />
|
|
28
|
-
</div>
|
|
29
|
-
);
|
|
30
|
-
};
|
|
31
|
-
```
|
|
32
|
-
|
|
33
|
-
More skills for writing demo: https://d.umijs.org/guide/demo-principle
|
|
1
|
+
---
|
|
2
|
+
nav:
|
|
3
|
+
title: '组件'
|
|
4
|
+
order: 1
|
|
5
|
+
group:
|
|
6
|
+
title: 功能组件
|
|
7
|
+
order: 0
|
|
8
|
+
title: 批量查询组件
|
|
9
|
+
order: 2
|
|
10
|
+
---
|
|
11
|
+
|
|
12
|
+
## QueryMutipleInput
|
|
13
|
+
|
|
14
|
+
Demo:
|
|
15
|
+
|
|
16
|
+
```tsx
|
|
17
|
+
import React, { useRef } from 'react';
|
|
18
|
+
import { QueryMutipleInput } from '../../../index';
|
|
19
|
+
|
|
20
|
+
export default () => {
|
|
21
|
+
const handleOnChange = (value) => {
|
|
22
|
+
console.log(value);
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
return (
|
|
26
|
+
<div>
|
|
27
|
+
<QueryMutipleInput onValueChange={handleOnChange} />
|
|
28
|
+
</div>
|
|
29
|
+
);
|
|
30
|
+
};
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
More skills for writing demo: https://d.umijs.org/guide/demo-principle
|
|
@@ -1,128 +1,128 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* @Description:
|
|
3
|
-
* @Author: rodchen
|
|
4
|
-
* @Date: 2021-12-01 10:52:08
|
|
5
|
-
* @LastEditTime: 2021-12-29 19:14:56
|
|
6
|
-
* @LastEditors: rodchen
|
|
7
|
-
*/
|
|
8
|
-
// @ts-nocheck
|
|
9
|
-
import React, { useState, useEffect } from 'react';
|
|
10
|
-
import { useDebounceFn } from 'ahooks';
|
|
11
|
-
import { Input, Button, Modal } from 'antd';
|
|
12
|
-
import './index.less';
|
|
13
|
-
|
|
14
|
-
const QueryMutipleInput = ({ onValueChange }) => {
|
|
15
|
-
const [isModalVisible, setIsModalVisible] = useState(false);
|
|
16
|
-
const [value, setValue] = useState('');
|
|
17
|
-
const [popvalue, setPopValue] = useState('');
|
|
18
|
-
const { run } = useDebounceFn(
|
|
19
|
-
() => {
|
|
20
|
-
formaData(value);
|
|
21
|
-
},
|
|
22
|
-
{
|
|
23
|
-
wait: 1000,
|
|
24
|
-
},
|
|
25
|
-
);
|
|
26
|
-
|
|
27
|
-
useEffect(() => {
|
|
28
|
-
setPopValue(value);
|
|
29
|
-
onValueChange(value);
|
|
30
|
-
}, [value]);
|
|
31
|
-
|
|
32
|
-
const showModal = () => {
|
|
33
|
-
setIsModalVisible(true);
|
|
34
|
-
};
|
|
35
|
-
|
|
36
|
-
const handleOk = () => {
|
|
37
|
-
formaData(popvalue);
|
|
38
|
-
setIsModalVisible(false);
|
|
39
|
-
};
|
|
40
|
-
|
|
41
|
-
const formaData = (value) => {
|
|
42
|
-
let formatValue = ToCDB(value)
|
|
43
|
-
.split(/[/\n/\s,;]/)
|
|
44
|
-
.filter((item) => item)
|
|
45
|
-
.join(',');
|
|
46
|
-
setValue(formatValue);
|
|
47
|
-
};
|
|
48
|
-
|
|
49
|
-
const handleCancel = () => {
|
|
50
|
-
setIsModalVisible(false);
|
|
51
|
-
};
|
|
52
|
-
|
|
53
|
-
const outerChange = (e) => {
|
|
54
|
-
setValue(e.target.value);
|
|
55
|
-
run();
|
|
56
|
-
};
|
|
57
|
-
|
|
58
|
-
const onChange = (e) => {
|
|
59
|
-
setPopValue(e.target.value);
|
|
60
|
-
};
|
|
61
|
-
|
|
62
|
-
return (
|
|
63
|
-
<div className={'query_input'}>
|
|
64
|
-
<div className="query_input_show">
|
|
65
|
-
<Input
|
|
66
|
-
value={value}
|
|
67
|
-
onChange={outerChange}
|
|
68
|
-
onBlur={(e) => {
|
|
69
|
-
formaData(e.target.value);
|
|
70
|
-
}}
|
|
71
|
-
onPaste={(e) => {
|
|
72
|
-
formaData(e.clipboardData.getData('text'));
|
|
73
|
-
e.preventDefault();
|
|
74
|
-
}}
|
|
75
|
-
style={{ width: 'calc(100% - 30px)' }}
|
|
76
|
-
placeholder="请输入(查询多个值请用 ; 或 , 分割)"
|
|
77
|
-
/>
|
|
78
|
-
<Button style={{width: '30px', padding: '2px', height: 'auto'}} onClick={showModal} type="primary">...</Button>
|
|
79
|
-
</div>
|
|
80
|
-
<Modal
|
|
81
|
-
width={600}
|
|
82
|
-
title="多值录入"
|
|
83
|
-
visible={isModalVisible}
|
|
84
|
-
onOk={handleOk}
|
|
85
|
-
onCancel={handleCancel}
|
|
86
|
-
footer={[
|
|
87
|
-
<Button key="back" onClick={handleCancel}>
|
|
88
|
-
取消
|
|
89
|
-
</Button>,
|
|
90
|
-
<Button key="submit" type="primary" onClick={handleOk}>
|
|
91
|
-
录入
|
|
92
|
-
</Button>,
|
|
93
|
-
]}
|
|
94
|
-
>
|
|
95
|
-
<div className={'query_input_wrapper'}>
|
|
96
|
-
<div className={'query_input_wrapper_left'}>录入区:</div>
|
|
97
|
-
<div className={'query_input_wrapper_right'}>
|
|
98
|
-
<div>
|
|
99
|
-
如需同时使用多个值进行查询,请使用逗号、分号、空格或换行进行值的分隔,中英文格式的符号均支持
|
|
100
|
-
</div>
|
|
101
|
-
<div className={'query_input_textArea'}>
|
|
102
|
-
<Input.TextArea
|
|
103
|
-
value={popvalue}
|
|
104
|
-
onChange={onChange}
|
|
105
|
-
rows={6}
|
|
106
|
-
showCount
|
|
107
|
-
/>
|
|
108
|
-
</div>
|
|
109
|
-
</div>
|
|
110
|
-
</div>
|
|
111
|
-
</Modal>
|
|
112
|
-
</div>
|
|
113
|
-
);
|
|
114
|
-
};
|
|
115
|
-
|
|
116
|
-
function ToCDB(str) {
|
|
117
|
-
var tmp = '';
|
|
118
|
-
for (var i = 0; i < str.length; i++) {
|
|
119
|
-
if (str.charCodeAt(i) > 65248 && str.charCodeAt(i) < 65375) {
|
|
120
|
-
tmp += String.fromCharCode(str.charCodeAt(i) - 65248);
|
|
121
|
-
} else {
|
|
122
|
-
tmp += String.fromCharCode(str.charCodeAt(i));
|
|
123
|
-
}
|
|
124
|
-
}
|
|
125
|
-
return tmp;
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
export default QueryMutipleInput;
|
|
1
|
+
/*
|
|
2
|
+
* @Description:
|
|
3
|
+
* @Author: rodchen
|
|
4
|
+
* @Date: 2021-12-01 10:52:08
|
|
5
|
+
* @LastEditTime: 2021-12-29 19:14:56
|
|
6
|
+
* @LastEditors: rodchen
|
|
7
|
+
*/
|
|
8
|
+
// @ts-nocheck
|
|
9
|
+
import React, { useState, useEffect } from 'react';
|
|
10
|
+
import { useDebounceFn } from 'ahooks';
|
|
11
|
+
import { Input, Button, Modal } from 'antd';
|
|
12
|
+
import './index.less';
|
|
13
|
+
|
|
14
|
+
const QueryMutipleInput = ({ onValueChange }) => {
|
|
15
|
+
const [isModalVisible, setIsModalVisible] = useState(false);
|
|
16
|
+
const [value, setValue] = useState('');
|
|
17
|
+
const [popvalue, setPopValue] = useState('');
|
|
18
|
+
const { run } = useDebounceFn(
|
|
19
|
+
() => {
|
|
20
|
+
formaData(value);
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
wait: 1000,
|
|
24
|
+
},
|
|
25
|
+
);
|
|
26
|
+
|
|
27
|
+
useEffect(() => {
|
|
28
|
+
setPopValue(value);
|
|
29
|
+
onValueChange(value);
|
|
30
|
+
}, [value]);
|
|
31
|
+
|
|
32
|
+
const showModal = () => {
|
|
33
|
+
setIsModalVisible(true);
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
const handleOk = () => {
|
|
37
|
+
formaData(popvalue);
|
|
38
|
+
setIsModalVisible(false);
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
const formaData = (value) => {
|
|
42
|
+
let formatValue = ToCDB(value)
|
|
43
|
+
.split(/[/\n/\s,;]/)
|
|
44
|
+
.filter((item) => item)
|
|
45
|
+
.join(',');
|
|
46
|
+
setValue(formatValue);
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
const handleCancel = () => {
|
|
50
|
+
setIsModalVisible(false);
|
|
51
|
+
};
|
|
52
|
+
|
|
53
|
+
const outerChange = (e) => {
|
|
54
|
+
setValue(e.target.value);
|
|
55
|
+
run();
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
const onChange = (e) => {
|
|
59
|
+
setPopValue(e.target.value);
|
|
60
|
+
};
|
|
61
|
+
|
|
62
|
+
return (
|
|
63
|
+
<div className={'query_input'}>
|
|
64
|
+
<div className="query_input_show">
|
|
65
|
+
<Input
|
|
66
|
+
value={value}
|
|
67
|
+
onChange={outerChange}
|
|
68
|
+
onBlur={(e) => {
|
|
69
|
+
formaData(e.target.value);
|
|
70
|
+
}}
|
|
71
|
+
onPaste={(e) => {
|
|
72
|
+
formaData(e.clipboardData.getData('text'));
|
|
73
|
+
e.preventDefault();
|
|
74
|
+
}}
|
|
75
|
+
style={{ width: 'calc(100% - 30px)' }}
|
|
76
|
+
placeholder="请输入(查询多个值请用 ; 或 , 分割)"
|
|
77
|
+
/>
|
|
78
|
+
<Button style={{width: '30px', padding: '2px', height: 'auto'}} onClick={showModal} type="primary">...</Button>
|
|
79
|
+
</div>
|
|
80
|
+
<Modal
|
|
81
|
+
width={600}
|
|
82
|
+
title="多值录入"
|
|
83
|
+
visible={isModalVisible}
|
|
84
|
+
onOk={handleOk}
|
|
85
|
+
onCancel={handleCancel}
|
|
86
|
+
footer={[
|
|
87
|
+
<Button key="back" onClick={handleCancel}>
|
|
88
|
+
取消
|
|
89
|
+
</Button>,
|
|
90
|
+
<Button key="submit" type="primary" onClick={handleOk}>
|
|
91
|
+
录入
|
|
92
|
+
</Button>,
|
|
93
|
+
]}
|
|
94
|
+
>
|
|
95
|
+
<div className={'query_input_wrapper'}>
|
|
96
|
+
<div className={'query_input_wrapper_left'}>录入区:</div>
|
|
97
|
+
<div className={'query_input_wrapper_right'}>
|
|
98
|
+
<div>
|
|
99
|
+
如需同时使用多个值进行查询,请使用逗号、分号、空格或换行进行值的分隔,中英文格式的符号均支持
|
|
100
|
+
</div>
|
|
101
|
+
<div className={'query_input_textArea'}>
|
|
102
|
+
<Input.TextArea
|
|
103
|
+
value={popvalue}
|
|
104
|
+
onChange={onChange}
|
|
105
|
+
rows={6}
|
|
106
|
+
showCount
|
|
107
|
+
/>
|
|
108
|
+
</div>
|
|
109
|
+
</div>
|
|
110
|
+
</div>
|
|
111
|
+
</Modal>
|
|
112
|
+
</div>
|
|
113
|
+
);
|
|
114
|
+
};
|
|
115
|
+
|
|
116
|
+
function ToCDB(str) {
|
|
117
|
+
var tmp = '';
|
|
118
|
+
for (var i = 0; i < str.length; i++) {
|
|
119
|
+
if (str.charCodeAt(i) > 65248 && str.charCodeAt(i) < 65375) {
|
|
120
|
+
tmp += String.fromCharCode(str.charCodeAt(i) - 65248);
|
|
121
|
+
} else {
|
|
122
|
+
tmp += String.fromCharCode(str.charCodeAt(i));
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
return tmp;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
export default QueryMutipleInput;
|