1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
import React, { useCallback, useState, useEffect } from 'react';
import { Modal, Alert, Transfer, message } from 'antd';
import qs from 'qs';
import { getToken } from '@/utils/authority';
import reqwest from 'reqwest';
import ButtonDiy from '@/baseComponent/ButtonDiy';
function getThisInfo(data, url) {
return reqwest({
url,
type: 'json',
method: 'post',
data: JSON.stringify(data),
headers: {
Accept: 'application/json;charset=UTF-8',
'Content-Type': 'application/json',
},
crossOrigin: true,
withCredentials: false,
error: (err) => {
message.warning('网络故障');
},
success: (res) => {
return res;
},
});
}
function formateObjToArr(obj) {
return Object.keys(obj).reduce((acc, key) => acc.concat({ key, title: obj[key] }), []);
}
/**
* text: '按钮名称' 默认 自定义导出
* modalProps: '弹窗props'
* */
export default function DynamicExportButton(
{
text,
modalProps,
serviceBean,
serviceKey,
api,
serviceParam,
}) {
const [visible, setVisible] = useState(false);
const [targetKeys, setTargetKeys] = useState([]);
const [columns, setColumns] = useState([]);
const handleChange = useCallback((keys) => {
setTargetKeys(keys)
}, []);
function btnClick() {
setVisible(!visible);
}
function defaultUrl() {
return api + '/exportApi';
}
function getColumns() {
let url = defaultUrl() + '/findExportColumnHeader?token=' + getToken();
let data = {
serviceKey,
serviceBean,
serviceParam,
};
getThisInfo(data, url).then((y) => {
if(y){
setColumns(formateObjToArr(y));
}
})
}
function exportExcel(){
let data = {
serviceKey,
serviceBean,
serviceParam,
fieldNames: targetKeys.length ? targetKeys : columns.map((y) => y.key),
};
let url = defaultUrl() + '/exportData?token=' + getToken();
getThisInfo(data, url).then((y) => {
if(y){
let data = {
serviceBean,
serviceKey,
fileKey: y.cacheKey,
token: getToken(),
};
window.open(defaultUrl() + '/downLoadExcel?' + qs.stringify(data));
setVisible(false);
message.success('正在下载导出文件');
return true;
}
})
}
useEffect(() => {
if (visible) {
getColumns();
}
}, [visible]);
return (
<>
<ButtonDiy name={text}
type='default'
className='defaultBlue'
handleClick={btnClick}/>
<Modal
visible={visible}
width={1000}
title='自定义导出'
bodyStyle={{
padding: '24px 36px',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'column',
}}
{...modalProps}
onOk={exportExcel}
onCancel={() => setVisible(false)}
>
<Transfer
showSearch
style={{ flex: '1',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
width: '100%',
}}
dataSource={columns}
titles={['可选项目', '已选项目']}
targetKeys={targetKeys}
listStyle={{ height: 400, flex: 1 }}
onChange={handleChange}
operations={['增加导出项', '移除导出项']}
render={item => item.title || ''}
/>
<Alert showIcon
style={{ marginTop: 12 }}
message="在不选择任何导出项时，默认导出所有项目。"
type="warning"/>
</Modal>
</>
);
}
DynamicExportButton.defaultProps = {
text: '自定义导出',
};