import { Form, Upload, Modal, Input, Button } from 'antd';
|
import { UploadOutlined } from '@ant-design/icons';
|
import React, { forwardRef, useImperativeHandle, useState } from 'react';
|
import { useEffect } from 'react';
|
import { downLoad } from '@/utils/utils';
|
const formItemLayout = {
|
labelCol: { span: 4 },
|
wrapperCol: { span: 18 },
|
};
|
|
const { TextArea } = Input;
|
const ImportExport = ({ visible, onSave, onCancel }, ref) => {
|
const [form] = Form.useForm();
|
const [status, setStatus] = useState(true);
|
const okHandle = () => {
|
// onSave()
|
form.validateFields().then((values) => {
|
if(status){
|
message.warning('请上传文件')
|
return
|
}
|
onSave(values.file.file);
|
});
|
};
|
|
const downLod = () => {
|
downLoad('/api/huacheng-sangeshenbian/party-member/download', '导入模版');
|
};
|
|
const onChange = (e) => {
|
if (e.fileList && e.fileList.length > 0) {
|
setStatus(false);
|
} else {
|
setStatus(true);
|
}
|
};
|
|
useImperativeHandle(ref, () => {
|
return {
|
refreshData: (data) => {},
|
clean: () => {
|
setStatus(true)
|
form.resetFields();
|
},
|
};
|
});
|
|
return (
|
<Modal
|
getContainer={false}
|
width="30%"
|
destroyOnClose
|
title={'导入党员信息'}
|
open={visible}
|
okText="立即导入"
|
onCancel={() => onCancel(false)}
|
onOk={okHandle}
|
>
|
<Form layout="horizontal" {...formItemLayout} form={form}>
|
<div style={{ width: '100%', textAlign: 'end', marginBottom: '32px' }}>
|
<a
|
onClick={() => { downLod();}}
|
>
|
模版下载
|
</a>
|
</div>
|
<Form.Item name="file" label="导入文件" rules={[{ required: true, message: '请上传文件' }]}>
|
<Upload
|
name="file"
|
maxCount="1"
|
listType="text"
|
accept=".xls,.xlsx,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
|
onChange={(e) => {
|
onChange(e);
|
}}
|
showUploadList={true}
|
>
|
{status && <Button icon={<UploadOutlined />}>去选择</Button>}
|
</Upload>
|
</Form.Item>
|
</Form>
|
</Modal>
|
);
|
};
|
|
export default forwardRef(ImportExport);
|
