10 changed files with 446 additions and 54 deletions
Binary file not shown.
@ -0,0 +1,162 @@ |
|||
/* |
|||
* @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 { postInWait } from "../actions/article"; |
|||
|
|||
//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 = () => { |
|||
handleCancel |
|||
if (postData.length) { |
|||
console.log(postData) |
|||
setLoading(true); |
|||
dispatch(postInWait(postData)).then((res) => { |
|||
console.log(res) |
|||
|
|||
if (res.success) { |
|||
message.success("上传成功"); |
|||
handleCancel() |
|||
} |
|||
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 = []; |
|||
|
|||
for (let i = 0; i < res.length; i++) { |
|||
let d = res[i]; |
|||
let name_project = String(d["项目"]).trim(); |
|||
|
|||
let from_project = String(d["需求来源"]).trim(); |
|||
let contacts = String(d["对接人"]).trim(); |
|||
let consum_time = String(d["评估工时"]).trim(); |
|||
let progress = String(d["处理进度"]).trim(); |
|||
let o_name_project='' |
|||
if (!name_project || !from_project || !consum_time || !contacts||!progress) { |
|||
error(`第${i + 1} 行有空值，请填写后重新上传`); |
|||
return; |
|||
} |
|||
|
|||
|
|||
postData.push({ |
|||
name_project, |
|||
from_project,contacts,consum_time,progress |
|||
}); |
|||
} |
|||
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