const UploadButton = (props) => {
const { btnProps, uploadProps } = props;
const [isModalVisible, setIsModalVisible] = useState(false);
const [fileData, setFileData] = useState([]);
const [fileList, setFileList] = useState([]);
const [uploading, setUploading] = useState(false);
const [list, setlist] = useState();
// 默认选中
const [value, setValue] = useState();
// 导入文件更新显示的内容
const Display = async () => {
let model, result;
model = new Productions();
result = await model.Updisplay();
}
// 确定选中二次上传
const handleOk = () => {
setIsModalVisible(false);
const formData = new FormData(); // 创建formData对象
// 因为是单选所以不需要循环
formData.append('file', fileList);
formData.append('list', value.sheetName);
setUploading(true);
axios({
method: 'post',
url: 'http://',
processData: false,
contentType: false,
data: formData
})
.then(res => {
// 获取axios返回的值
console.log(res)
if (res.data.message.includes('导入成功')){
message.success('上传成功');
Display();
} else {
message.error('上传失败');
}
})
.finally(() => {
setUploading(false);
});
};
const handleCancel = () => {
setIsModalVisible(false);
};
const onChange = (info) => {
// 文件上传中
if (info.file.status !== 'uploading') {
console.log(info.file, info.fileList);
let res = info.file.response;
// message.warning(`${res.message}`);
}
// 文件已经上传
if (info.file.status === 'done') {
let res = info.file.response;
let resp = info.file.originFileObj;
console.log(res.data);
setFileData(res.data);
setFileList(resp);
if (res.code === 200){
if (res.message.includes('sheet')){
message.success(res.message);
setIsModalVisible(true);
}
} else if (res.code === 400){
if (res.message.includes('导入失败')){
message.error(res.message);
} else {
message.error(res.message);
}
} else {
message.warning(res.message);
}
} else if (info.file.status === 'error') {
message.error(`${info.file.name} 上传失败`);
}
}
// 判断
const onChang = (e) => {
console.log('radio checked', e.target.value);
setValue(e.target.value);
setlist(value);
};
const beforeUpload = (file) => {
// setFileList([...fileList, file]);
return false;
}
return (
<>
<Upload
showUploadList={false}
data={list}
beforeUpload={beforeUpload}
onChange={onChange}
{...props}
{...uploadProps}
>
<Button
icon={<ImportOutlined />}
{...btnProps}
{props.children}
</Button>
</Upload>
{/* 展示文件中有的sheet页 */}
<Modal
title={'选择sheet页'}
centered
visible={isModalVisible}
onCancel={handleCancel}
onOk={handleOk}
>
<Radio.Group value={value} onChange={onChang}>
<Space direction="vertical">
{fileData.map((item) => {
return <Radio value={item}>{item.sheetName}</Radio>
})}
</Space>
</Radio.Group>
</Modal>
</>
);
};
export default UploadButton;