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