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

import React from "react";
import successImg from "./success.svg";
import { Spin } from "antd";
import { WeaTable } from "ecCom";

export default class ModalStep3 extends React.Component {
  componentWillMount() {
    this.columns = [
      {
        title: "错误信息",
        dataIndex: "message",
        key: "message"
      }
    ];
  }

  render() {
    const { importResult } = this.props;
    return (
      <div
        style={{
          textAlign: "center",
          marginTop: "10px",
          overflow: "hidden",
          height: "550px",
          display: "flex",
          flexFlow: "column"
        }}>
        <div style={{ flex: "1", display: "flex", flexFlow: "column" }}>
          {importResult.successCount === undefined
            ? <div style={{ textAlign: "center", marginTop: "20px" }}>
              <Spin/>
              正在导入请稍后...
            </div>
            : <div style={{ marginTop: "20px" }}>
              <img src={successImg} style={{ marginBottom: "10px" }} alt=""/>
              <div style={{ fontSize: "20px", marginBottom: "10px" }}>
                数据导入完成
              </div>
              <div>
                已导入
                <span style={{ color: "green" }}>
                    {importResult.successCount}{" "}
                  </span>
                条数据，失败<span style={{ color: "red" }}>
                    {importResult.errorCount}{" "}
                  </span>条数据
              </div>
            </div>}
          <div>
            {
              <WeaTable
                columns={this.columns}
                dataSource={importResult.errorData}
                pagination={false}
                scroll={{ y: `calc(100vh - 387px)` }}
              />
            }
          </div>
        </div>
      </div>
    );
  }
}