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;