index.js 3.3 KB
Newer Older
1
import React, { useCallback, useState, useEffect } from 'react';
2
import { Modal, Alert, Transfer, message } from 'antd';
3 4 5
import qs from 'qs';
import { getToken } from '@/utils/authority';
import reqwest from 'reqwest';
6
import ButtonDiy from '@/baseComponent/ButtonDiy';
7

8
function getThisInfo(data, url) {
9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
	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;
		},
	});
27 28 29
}

function formateObjToArr(obj) {
30
	return Object.keys(obj).reduce((acc, key) => acc.concat({ key, title: obj[key] }), []);
31 32 33 34 35 36 37
}

/**
 * text: '按钮名称' 默认 自定义导出
 * modalProps: '弹窗props'
 * */

38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54
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);
	}
55

56 57 58
	function defaultUrl() {
		return api + '/exportApi';
	}
59

60 61 62 63 64 65 66 67 68 69 70 71 72
	function getColumns() {
		let url = defaultUrl() + '/findExportColumnHeader?token=' + getToken();
		let data = {
			serviceKey,
			serviceBean,
			serviceParam,
		};
		getThisInfo(data, url).then((y) => {
			if (y) {
				setColumns(formateObjToArr(y));
			}
		});
	}
73

74 75 76 77 78 79 80
	function exportExcel() {
		let data = {
			serviceKey,
			serviceBean,
			serviceParam,
			fieldNames: targetKeys.length ? targetKeys : columns.map((y) => y.key),
		};
81

82 83 84 85 86 87 88 89 90 91 92 93
		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('正在下载导出文件');
94

95 96 97 98
				return true;
			}
		});
	}
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
	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>
		</>
	);
151 152 153
}

DynamicExportButton.defaultProps = {
154
	text: '自定义导出',
155
};