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

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

const Dragger = Upload.Dragger;
const getLabel = WeaLocaleProvider.getLabel;
;

@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" }}>
                {getLabel(543201, "导入选项")}
              </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" }}>
              {getLabel(543202, "导入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">{getLabel(543203, "点击或将文件拖拽到此区域上传")}</p>
                  <p
                    className="ant-upload-hint">{getLabel(543204, "支持单个或批量上传，严禁上传公司内部资料及其他违禁文件")}</p>
                </div>
              </Dragger>
            </div>

          </div>

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

            <div style={{ lineHeight: "30px" }}>
              <p>{`1. ${getLabel(30907, "第一步")},${getLabel(543205, "请选择导出的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(`${getLabel(543199, "请完善导入选项")}, ${getLabel(543206, "再下载")}！`);
                              throw new Error(`${getLabel(543199, "请完善导入选项")}, ${getLabel(543206, "再下载")}！`);
                            } else {
                              if (url.indexOf("?") > 0) {
                                url = `${url}&${key}=${params[key]}`;
                              } else {
                                url = `${url}?${key}=${params[key]}`;
                              }
                            }
                          });
                        } catch (e) {
                          return;
                        }
                      }
                      window.open(url, "_blank");
                    }}>{getLabel(543207, "点击这里下载模板")}</a>
                    :
                    <a onClick={() => {
                      this.props.templateLink(hasData === "1" ? `true` : `false`);
                    }}>{getLabel(543207, "点击这里下载模板")}</a>
                }

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

          </div>

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

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

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