4 changed files with 23 additions and 167 deletions
@ -1,163 +0,0 @@ |
|||
/* |
|||
* @description : |
|||
* @Date : 2021-04-07 14:39:33 |
|||
* @FilePath : \web\client\src\sections\user\components\userManagement\importUser.js |
|||
* @useStrict : use strict |
|||
*/ |
|||
|
|||
'use strict'; |
|||
import React, { useState } from 'react'; |
|||
import { connect } from 'react-redux'; |
|||
import { Button, Input, Card, Modal, Upload, message } from 'antd'; |
|||
import { Request } from '@peace/utils' |
|||
import request from 'superagent' |
|||
import XLSX from 'xlsx' |
|||
// import { userBulkAdd } from '../../actions'
|
|||
|
|||
//TODO 下载模板和上传文件读取
|
|||
const ImportUser = props => { |
|||
const { user, dispatch, handleCancel, params,editData } = props |
|||
const [msg, setMsg] = useState('') |
|||
const [loading, setLoading] = useState('') |
|||
const [postData, setPostData] = useState([]) |
|||
|
|||
const confirm = () => { |
|||
if (postData.length) { |
|||
setLoading(true) |
|||
// dispatch(userBulkAdd(postData, params.departmentId ? params.departmentId : null)).then(res => {
|
|||
// if (res.success) {
|
|||
|
|||
// }
|
|||
// setLoading(false)
|
|||
// })
|
|||
} else { |
|||
message.warn('没有数据可以提交，请上传数据文件') |
|||
} |
|||
} |
|||
|
|||
return ( |
|||
<Modal |
|||
visible={props.importVisible} |
|||
onOk={confirm} |
|||
confirmLoading={loading} |
|||
onCancel={() => { |
|||
setMsg('') |
|||
setLoading(false) |
|||
setPostData([]) |
|||
handleCancel() |
|||
}} |
|||
destroyOnClose |
|||
> |
|||
{/* <Button size="small" type='primary' onClick={() => { |
|||
Request.get(`attachments?src=upload/files/1.jpg&filename=${encodeURIComponent('1.jpg')}&token=${user.token}`).then(res => { |
|||
|
|||
}) |
|||
}}>下载模板</Button> */} |
|||
<a href={`/assets/人员信息.xlsx`} > |
|||
<Button size="small" type='primary' >下载模板</Button> |
|||
</a> |
|||
<div style={{ marginTop: 10 }}>下载模板后填写完整后上传</div> |
|||
<div style={{ marginTop: 10 }}> |
|||
<Upload {...{ |
|||
name: 'user_d', |
|||
action: '/', |
|||
maxCount: 1, |
|||
showUploadList: { |
|||
showRemoveIcon: false |
|||
}, |
|||
beforeUpload: (file) => { |
|||
setMsg('') |
|||
setPostData([]) |
|||
const extNames = file.name.split('.'); |
|||
let isDAE = false; |
|||
if (extNames.length > 0) { |
|||
let fileType = extNames[extNames.length - 1].toLowerCase(); |
|||
isDAE = ['xlsx', 'xls'].some((f) => f == fileType); |
|||
} |
|||
if (!isDAE) { |
|||
setMsg(`只能上传 ${['xlsx', 'xls'].join()} 格式的文件!`); |
|||
return false; |
|||
} |
|||
}, |
|||
onChange(info) { |
|||
|
|||
}, |
|||
customRequest: async (data) => { |
|||
const { file, onSuccess, onError } = data |
|||
|
|||
const reader = new FileReader(); // 使用 FileReader 读取数据
|
|||
reader.onload = function (e) { // 数据读取完成后的回调函数
|
|||
const data = new Uint8Array(e.target.result); |
|||
const workbook = XLSX.read(data, { type: 'array' }); // workbook 是 xlsx 解析 excel 后返回的对象
|
|||
|
|||
const firstSheetName = workbook.SheetNames[0]; // 获取第一个 sheet 的名字
|
|||
const worksheet = workbook.Sheets[firstSheetName]; // 获取第一个 sheet 的内容
|
|||
const res = XLSX.utils.sheet_to_json(worksheet); // 使用 utils 里的方法转换内容为便于使用的数组
|
|||
const error = (msg) => { |
|||
setMsg(msg) |
|||
onError({ message: msg }) |
|||
} |
|||
if (res.length > 1000) { |
|||
error('一次性上传数据行数应小于1000行，请分批上传') |
|||
return |
|||
} |
|||
if (!res.length) { |
|||
error('请填写至少一行数据') |
|||
return |
|||
} |
|||
let postData = [] |
|||
const pattern = /^1[3|4|5|6|7|8|9]\d{9}$/ |
|||
for (let i = 0; i < res.length; i++) { |
|||
let d = res[i] |
|||
let name = String(d['姓名']).trim(); |
|||
let phone = String(d['手机号码']).trim(); |
|||
let account = String(d['账号']).trim(); |
|||
let peopleCode = d['人员编号'] && String(d['人员编号']).trim(); |
|||
if (!name || !phone || !account || !peopleCode) { |
|||
error(`第${i + 1} 行有空值，请填写后重新上传`) |
|||
return |
|||
} |
|||
if (!pattern.test(phone)) { |
|||
error(`第${i + 1} 行手机号码错误`) |
|||
return |
|||
} |
|||
if (name.length > 128 || account.length > 128) { |
|||
error(`第${i + 1} 行数据字符长度大于 128，请更改后重新上传`) |
|||
return |
|||
} |
|||
if (postData.some(p => p.account == account)) { |
|||
error(`第${i + 1} 行账号重复，请更改后重新上传`) |
|||
return |
|||
} |
|||
postData.push({ |
|||
name, phone, account, peopleCode |
|||
}) |
|||
} |
|||
if (postData.length) { |
|||
setPostData(postData) |
|||
} |
|||
let msg = '文件解析完成，点击确定按钮上传保存！' |
|||
setMsg(msg) |
|||
onSuccess({ message: msg }) |
|||
}; |
|||
reader.readAsArrayBuffer(file); // 读取数据
|
|||
}, |
|||
}}> |
|||
<Button>上传文件</Button> |
|||
</Upload> |
|||
<br /> |
|||
<span>{msg}</span> |
|||
</div> |
|||
</Modal > |
|||
) |
|||
} |
|||
|
|||
function mapStateToProps(state) { |
|||
const { auth, customizeList } = state; |
|||
return { |
|||
user: auth.user, |
|||
} |
|||
} |
|||
|
|||
|
|||
export default connect(mapStateToProps)(ImportUser); |
|||
Loading…
Reference in new issue