receiveLog.jsx 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  1. import React, { Component } from "react";
  2. import { message, Modal, Spin, Table, Tooltip } from "antd";
  3. import $ from "jquery/src/ajax";
  4. class ReceiveLog extends Component {
  5. constructor(props) {
  6. super(props);
  7. this.state = {
  8. loading: false,
  9. pagination: {
  10. defaultCurrent: 1,
  11. defaultPageSize: 10,
  12. showQuickJumper: true,
  13. pageSize: 10,
  14. onChange: function (page) {
  15. this.loadData(page);
  16. }.bind(this),
  17. showTotal: function (total) {
  18. return '共' + total + '条数据';
  19. }
  20. },
  21. dataSource: [],
  22. columns: [
  23. {
  24. title: '序号',
  25. dataIndex: 'id',
  26. key: 'id',
  27. width: 60,
  28. },
  29. {
  30. title: '内容',
  31. dataIndex: 'remarks',
  32. key: 'remarks',
  33. render: (text, record) => {
  34. return `${record.adminName},领取了客户:${record.userName}`;
  35. }
  36. },
  37. {
  38. title: '时间',
  39. dataIndex: 'createTime',
  40. key: 'createTime',
  41. width: 160,
  42. },
  43. ],
  44. expandedRowKeys: [],
  45. previewVisible: false,
  46. previewImage: ""
  47. }
  48. this.expandedRowRender = this.expandedRowRender.bind(this);
  49. }
  50. componentDidMount() {
  51. this.loadData();
  52. }
  53. loadData(pageNo) {
  54. const { pagination } = this.state;
  55. this.setState({
  56. loading: true,
  57. });
  58. $.ajax({
  59. method: 'get',
  60. dataType: "json",
  61. crossDomain: false,
  62. url: globalConfig.context + '/api/admin/userRecevieLog/list',
  63. data: {
  64. uid: this.props.uid,
  65. // uid: "7a6edc3e-c9e3-41f2-9161-319bf3ce3d7e",
  66. pageNo: pageNo || 1,
  67. pageSize: pagination.pageSize,
  68. },
  69. success: function (data) {
  70. if (data.error.length === 0) {
  71. this.setState({
  72. dataSource: data.data.list,
  73. });
  74. } else {
  75. message.warning(data.error[0].message);
  76. }
  77. }.bind(this),
  78. }).always(function () {
  79. this.setState({
  80. loading: false
  81. });
  82. }.bind(this));
  83. }
  84. expandedRowRender(record) {
  85. let imgList = !!record.materialUrl ? record.materialUrl.split(',') : [];
  86. return imgList.map(url => {
  87. return (<div
  88. style={{ width: "60px", height: "60px", padding: "6px", border: "1px solid #eee", cursor: "pointer", marginRight: "6px" }}
  89. onClick={() => {
  90. this.setState({ previewVisible: true, previewImage: globalConfig.context + "/upload" + url });
  91. }}
  92. >
  93. <img src={globalConfig.context + "/upload" + url} style={{ width: "100%" }} />
  94. </div>)
  95. })
  96. }
  97. handleExpandChange(rows) {
  98. console.log(rows)
  99. this.setState({ expandedRowKeys: rows });
  100. }
  101. render() {
  102. return (
  103. <Modal
  104. maskClosable={false}
  105. className="customeDetails"
  106. footer=""
  107. title="领取日志"
  108. width="900px"
  109. visible={this.props.visible}
  110. onOk={this.props.onCancel}
  111. onCancel={this.props.onCancel}
  112. >
  113. <div>
  114. <Spin spinning={this.state.loading}>
  115. <Table
  116. size="middle"
  117. columns={this.state.columns}
  118. rowKey={record => record.id}
  119. dataSource={this.state.dataSource}
  120. pagination={this.state.pagination}
  121. expandedRowKeys={this.state.expandedRowKeys}
  122. expandedRowRender={this.expandedRowRender}
  123. onExpandedRowsChange={this.handleExpandChange.bind(this)}
  124. />
  125. </Spin>
  126. <Modal
  127. maskClosable={false}
  128. footer={null}
  129. visible={this.state.previewVisible}
  130. onCancel={() => { this.setState({ previewVisible: false }) }}>
  131. <img alt="" style={{ width: '100%' }} src={this.state.previewImage || ''} />
  132. </Modal>
  133. </div>
  134. </Modal>
  135. )
  136. }
  137. }
  138. export default ReceiveLog;