salary-management-front/pc4mobx/hrmSalary/components/importModal/modalStep1.js

import React from "react";
import { WeaCheckbox,WeaTools } from "ecCom";
import { inject, observer } from "mobx-react";
import { Icon, message, Upload } from "antd";

const Dragger = Upload.Dragger;

@inject("taxAgentStore")
@observer
export default class ModalStep1 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      datetime: "",
      taxAgentId: "",
      hasData: "0",
      fileList: WeaTools.ls.getJSONObj('fileList') || []
    };
  }

  componentWillMount() { // 初始化渲染页面
    // const { taxAgentStore: {fetchTaxAgentOption} } = this.props;
    // fetchTaxAgentOption();
  }

  handleChange(info) {
    let fileList = info.fileList;

    // 1. 上传列表数量的限制
    //    只显示最近上传的一个，旧的会被新的顶掉
    fileList = fileList.slice(-1);
    // 2. 读取远程路径并显示链接
    fileList = fileList.map((file) => {
      if (file.response) {
        // 组件会将 file.url 作为链接进行展示
        file.url = file.response.url;
      }
      return file;
    });

    // 3. 按照服务器返回信息筛选成功上传的文件
    fileList = fileList.filter((file) => {
      if (file.response) {
        return file.response.status === 1;
      }
      return true;
    });

    if (fileList && fileList.length > 0 && fileList[0].response && fileList[0].response.status === 1) {
      this.props.onFileIdChange(fileList[0].response.data.fileid);
    } else if (fileList && fileList.length === 0) {
      this.props.onFileIdChange("");
    }

    this.setState({ fileList },()=>localStorage.setItem("fileList", JSON.stringify(this.state.fileList)));
  }

  render() {
    const { datetime, taxAgentId, hasData } = this.state;
    const { taxAgentStore: { taxAgentOption }, isInit, needimportSelected, params } = this.props;
    let downloadExtra = "";
    if (isInit) {
      downloadExtra = hasData === "1" ? `&hasData=true` : `&hasData=false`;
    }
    const dragger = {
      accept: ".xlsx",
      name: "file",
      multiple: false,
      action: "/api/doc/upload/uploadFile",	//上传地址
      onChange: (info) => {
        this.handleChange(info);
      }
    };
    return (
      <div style={{ display: "flex", flexFlow: "column" }}>
        <div>
          {
            this.props.formComponent && <div className="stepInformItem">
              <div className="stepInformTitle" style={{ margin: "10px 0 10px 0" }}>
                导入选项
              </div>
              <div className="formWrapper" style={{ border: "1px solid #eee", borderRadiu: "5px", padding: "10px" }}>
                {this.props.formComponent}
              </div>
            </div>
          }

          <div className="stepInformItem">
            <div className="stepInformTitle" style={{ margin: "10px 0 10px 0" }}>
              导入Excel
            </div>
            <div>
              <Dragger {...dragger} fileList={this.state.fileList}>
                <div style={{ padding: "25px 0" }}>
                  <p className="ant-upload-drag-icon">
                    <Icon type="inbox"/>
                  </p>
                  <p className="ant-upload-text">点击或将文件拖拽到此区域上传</p>
                  <p className="ant-upload-hint">支持单个或批量上传，严禁上传公司内部资料及其他违禁文件</p>
                </div>
              </Dragger>
            </div>

          </div>

          <div className="stepInformItem">
            <div className="stepInformTitle" style={{ margin: "10px 0 10px 0" }}>
              操作步骤
            </div>

            <div style={{ lineHeight: "30px" }}>
              <p>1. 第一步，请选择导出的Excel文件或
                {
                  (typeof this.props.templateLink) == "string" ?
                    <a href="javascript:void(0);" onClick={() => {
                      let url = `${this.props.templateLink}${downloadExtra}`;
                      if (needimportSelected) {
                        try {
                          params && Object.keys(params).forEach((key) => {
                            if (!params[key] || params[key] == "") {
                              message.warning("请完善导入选项,再下载!");
                              throw new Error("请完善导入选项,再下载!");
                            } else {
                              if (url.indexOf("?") > 0) {
                                url = `${url}&${key}=${params[key]}`;
                              } else {
                                url = `${url}?${key}=${params[key]}`;
                              }
                            }
                          });
                        } catch (e) {
                          return;
                        }
                      }
                      window.open(url, "_blank");
                    }}>点击这里下载模板</a>
                    :
                    <a onClick={() => {
                      this.props.templateLink(hasData === "1" ? `true` : `false`);
                    }}>点击这里下载模板</a>
                }

                {this.props.headerSetCompoent && this.props.headerSetCompoent};
                {
                  this.props.isInit &&
                  <WeaCheckbox
                    value={hasData}
                    content="导出现有数据"
                    helpfulTip="提示：建议先导出现有最新数据，修改后再导入"
                    style={{ marginLeft: 10 }}
                    onChange={(hasData) => this.setState({ hasData })}
                  />
                }
              </p>
              <p>2. 第二步，请一定要确定Excel文档中的格式是模板中的格式，没有被修改掉；</p>
              <p>3. 第三步，选择填写好的Excel文档，点击“下一步”按钮进行数据预览；</p>
              <p>4. 第四步，如果以上步骤和Excel文档正确的话，数据会被正确导入，导入成功会有提示。如果有问题，则会提示Excel文档的错误之处。</p>
            </div>

          </div>

          <div className="stepInformItem">
            <div className="stepInformTitle" style={{ margin: "10px 0 10px 0" }}>
              Excel文件说明
            </div>

            <div style={{ lineHeight: "30px" }}>
              1. 后缀名为xls或者xlsx；<br/>
              2. 数据请勿放在合并的单元格中；<br/>
              {
                this.props.isStandingBook &&
                <span>3. 账单月份格式必须为：YYYY-MM；</span>
              }
            </div>

          </div>
        </div>
      </div>
    );
  }
}