MissionBoard/web/client/src/sections/article/components/import_model.js

/*
 * @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 (
    <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 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); // 读取数据
            },
          }}
        >
          <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);