/* * @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 { postInProject,getDownProject } 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(postInProject(postData)).then((res) => { console.log(res) if (res.success) { message.success("上传成功"); handleCancel() } setLoading(false); }); } else { message.warn("没有数据可以提交,请上传数据文件"); } }; return ( { setMsg(""); setLoading(false); setPostData([]); handleCancel(); }} destroyOnClose > {/* */}
下载模板后填写完整后上传
{ 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 part_people_in = String(d["投入人力"]).trim(); let build_time = String(d["构建时间"]).trim(); let publish_time = String(d["发布时间"]).trim(); let progress = String(d["目前进度"]).trim(); if (!name_project || !part_people_in || !build_time || !publish_time||!progress) { error(`第${i + 1} 行有空值,请填写后重新上传`); return; } let part_people = part_people_in.split('、').map((i) => { return {name_people:i} }) postData.push({ name_project, part_people, build_time, publish_time,progress }); } if (postData.length) { setPostData(postData); } let msg = "文件解析完成,点击确定按钮上传保存!"; setMsg(msg); onSuccess({ message: msg }); }; reader.readAsArrayBuffer(file); // 读取数据 }, }} >
{msg}
); }; function mapStateToProps(state) { const { auth, customizeList } = state; return { user: auth.user, }; } export default connect(mapStateToProps)(ImportUser);