数组合并
let a = [
{ id: 12, name: 'zhangsan', age: 18,like:"fb"},
{ id: 13, name: 'lisi', age: 18},
{ id: 14, name: 'wangwu', age: 18},
{ id: 15, name: 'zhaoliu', age: 18},
]
let b = [
{ id: 12, name: 'zhangsan', age: 19 },
{ id: 16, name: 'wanger', age: 18 },
{ id: 17, name: 'xiaohongs', age: 18 },
]
b.forEach((item) => {
let index = a.findIndex(e =>
e.id == item.id
)
if (index > -1) {
a[index] = { ...a[index],...item}
} else {
a.push(item)
}
})
console.log(a)
文件导入
弹窗表单中，导出文件一般有两种形式，一种是通常UI框架中Upload最长用的，即在选择文件确定后，直接调用上传的接口，这种是上次文件后，返回文件id，然后在表单提交的时候将文件id带上给后端，这种最常见的看看UI框架文档就行。下面我们讲的是另一种，在点击弹窗确定按钮的时候将选择的文件一起带给后端，
/**
* @Description: 关联人员弹窗
* @Author: chenshaoyang
* @Date: 2023-04-20
* @LastEditTime: 2023-04-20
* @LastEditors: Please set LastEditors
*/
import React from 'react';
import { Form, Select, Modal, Row, Col, Upload, Icon, message, Input } from 'antd';
import Util from '../../../app/util';
import axios from 'axios';
const { Dragger } = Upload;
const RelatedPerModel = Form.create()(
class extends React.Component {
constructor(props) {
super(props);
this.state = {
fileList: [],
loading: false,
}
}
onClickDownModel = () => {
const config = {
responseType: 'blob',
headers: {
'Content-Type': 'application/json;charset=UTF-8;',
},
}
const params = null;
let url = `/terminal/template/download`;
Util.downloadFileDataOrError('get', url, config, Util.downloadFile, params);
Util.modalSuccess('导出成功！')
}
onClickCancel = () => {
this.setState({
loading: false,
fileList: []
})
this.props.onCancel && this.props.onCancel()
}
handleUploadOk = () => {
const t = this
let { form } = this.props
const { getFieldDecorator } = form
const formData = new FormData();//创建formData对象deb
let fileSize = 0;
this.state.fileList.forEach(item => {
//将fileList中每个元素的file添加到formdata对象中
//formdata对Key值相同的，会自动封装成一个数组
fileSize += item.size
formData.append('file', item);
});
axios({
method: 'post',
url: '/terminal/import_terminal',
data: formData,
headers: {
'Authorization': sessionStorage.getItem('_token'),
},
}).then(res => {
console.log('=================', res, res.data, Util.repeatSubmit)
Util.repeatSubmit = false;
if (res.data.status === 0) {
this.setState({
loading: false,
fileList: []
})
this.props.onOk && this.props.onOk()
message.success("上传成功")
//上传成功后执行的函数
} else if (res.data.status === 1) {
message.error(res.data.errorMessage)
}
})
}
onClickOk = () => {
if (Util.repeatSubmit) return;
Util.repeatSubmit = true;
this.props.form.validateFields([`${this.state.fileList.length ? null : 'fileId'}`], (err, fieldsValue) => {
if (err || fieldsValue && fieldsValue.hasOwnProperty('fileId')) {
message.warning("请上传模板！")
Util.repeatSubmit = false
return
}
this.handleUploadOk()
})
}
render () {
let { visible, onCancel, onOk, form } = this.props;
const { getFieldDecorator } = form;
const fileProps = {
accept: ".xls,.xlsx",
fileList: this.state.fileList || [],
beforeUpload: file => {
console.log(file)
let { name } = file;
let { fileList, loading } = this.state
var fileExtension = name.substring(name.lastIndexOf('.') + 1);//截取文件后缀名
if (!['xls', 'xlsx'].includes(fileExtension)) {
return message.warning('导入文件格式不对')
}
let fileListArr = [...fileList, file]
if (fileListArr && fileListArr.length > 1) {
fileListArr = fileListArr.splice(0, 1)
message.warning('有且只能导入一个文件')
}
this.setState(state => ({
fileList: fileListArr,
}));
return false;
},
onRemove: file => {
//移除时清空值
this.setState({ fileList: [] })
},
};
return (
<Modal
width="600px"
height="500px"
maskClosable={false}
visible={visible}
title="关联人员"
confirmLoading={Util.repeatSubmit}
onCancel={() => this.onClickCancel()}
onOk={() => this.onClickOk()}
cancelText={"取消"}
okText={"确定"}
>
<Row>
<Col >
<a href='javascript:;' onClick={() => this.onClickDownModel()}>下载模板</a>
</Col>
<Col>
<Form>
<Form.Item label='' style={{ cursor: 'pointer' }}>
{getFieldDecorator('fileId', {
rules: [{ required: true, message: ' ' }],
})(<Input type='hidden' />)}
<Dragger {...fileProps}>
<p className="ant-upload-drag-icon">
<Icon type="cloud-upload" />
</p>
<p className="ant-upload-text">点击或将文件拖拽到这里上传</p>
<p className="ant-upload-hint">
只能上传1条数据，支持.xls或.xlsx格式
</p>
</Dragger>
</Form.Item>
</Form>
</Col>
<Col>
</Col>
</Row>
</Modal >
)
}
}
);
export default RelatedPerModel
