kede-client/js/component/manageCenter/order/orderNew/changeComponent/rizhi.js

import React, { Component } from "react";
import { Modal, Table, Button, message, Spin } from "antd";
import $ from "jquery/src/ajax";
import "./table.less";
// import ReactToPrint from "react-to-print";

const status = [
  {
    value: "0",
    key: "发起",
    color: "blue",
  },
  {
    value: "1",
    key: "审核中",
    color: "yellow",
  },
  {
    value: "2",
    key: "通过",
    color: "green",
  },
  {
    value: "3",
    key: "驳回",
    color: "red",
  },
  {
    value: "4",
    key: "完成",
    color: "#58a3ff",
  },
  {
    value: "5",
    key: "撤销",
    color: "black",
  },
];

const getStatus = function (e) {
  if (e || e == 0) {
    let str = e.toString();
    let theType = "";
    let theColor = "black";
    status.map(function (item) {
      if (item.value == str) {
        theType = item.key;
        theColor = item.color;
      }
    });
    return <span style={{ color: theColor, fontWeight: "bold" }}>{theType}</span>;
  }
};

class Rizhi extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      dataSource: [],
      loading: false,
      columns: [
        {
          title: "创建时间",
          dataIndex: "createTimes",
          key: "createTimes",
          width: 160
        },
        {
          title: "操作人名称",
          dataIndex: "aname",
          key: "aname",
          width: 150
        },
        {
          title: "状态",
          dataIndex: "status",
          key: "status",
          width: 100,
          render: text => {
            return getStatus(text);
          }
        },
        {
          title: "备注",
          dataIndex: "remarks",
          key: "remarks",
          render: text => {
            return <div style={{ width: 300 }}>{text}</div>;
          }
        }
      ]
    };
  }

  loadData() {
    this.setState({
      loading: true
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/orderChange/orderChangeLogList",
      data: {
        changeId: this.props.changeId
      },
      success: function (data) {
        if (data.error.length || data.data.list == "") {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
          }
        } else {
          this.setState({
            dataSource: data.data
          });
        }
      }.bind(this)
    }).always(
      function () {
        this.setState({
          loading: false
        });
      }.bind(this)
    );
  }

  changeModal() {
    this.setState({
      visible: !this.state.visible
    });
  }

  render() {
    return (
      <div
        style={{
          display: "inline-block",
          verticalAlign: "top",
        }}
      >
        <Button
          style={{ position: "relative", zIndex: 999 }}
          onClick={() => {
            this.loadData();
            this.changeModal();
          }}
        >
          查看变更日志
        </Button>
        {/* <div>
          {this.state.dataSource.map((item) =>  <div>{item.aname}</div> )}
        </div> */}
        <Modal
          maskClosable={false}
          visible={this.state.visible}
          title="变更日志"
          footer=""
          width={800}
          onCancel={() => {
            this.changeModal();
          }}
        >
          <Spin spinning={this.state.loading}>
            <div
              ref={e => {
                this.refs = e;
              }}
              style={{ marginTop: 20 }}
            >
              <h2 style={{ textAlign: "center", marginBottom: 10 }}>
                合同变更日志
              </h2>
              <Table
                columns={this.state.columns}
                dataSource={this.state.dataSource}
                pagination={false}
              />
            </div>
          </Spin>
          {/* <ReactToPrint
            trigger={() => (
              <div className="clearfix">
                <Button
                  type="primary"
                  style={{ float: "right", marginTop: 10 }}
                >
                  打印
                </Button>
              </div>
            )}
            content={() => this.refs}
          /> */}
        </Modal>
      </div>
    );
  }
}

export default Rizhi;