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