TrainingList.js 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
  1. import React, { Component } from 'react';
  2. import moment from 'moment';
  3. import { connect } from 'dva';
  4. import { routerRedux } from 'dva/router';
  5. import { Card, Modal, Button, message } from 'antd';
  6. import { StandardTableList } from '../../../components/AXList';
  7. import { renderStatus, addRowKey } from '../../../utils/utils';
  8. const Message = message;
  9. @connect(({ loading, product }) => ({
  10. product,
  11. loading: loading.models.product,
  12. }))
  13. export default class TrainingListPage extends Component {
  14. constructor(props) {
  15. super(props);
  16. const { state } = props.location;
  17. this.state = {
  18. UIParams: (state || {}).UIParams, // 组件的状态参数
  19. Queryers: (state || {}).Queryers, // 查询的条件参数
  20. };
  21. }
  22. componentDidMount() {
  23. this.props.dispatch({
  24. type: 'product/fetchTrainingList',
  25. payload: { ...this.state.Queryers },
  26. });
  27. }
  28. handleCreateOperation = () => {
  29. this.props.dispatch(routerRedux.push({
  30. pathname: '/product/training/create',
  31. state: this.state,
  32. }));
  33. };
  34. handleDeleteOperation = (item) => {
  35. Modal.confirm({
  36. okText: '确定',
  37. cancelText: '取消',
  38. title: '你确定要删除该师训吗?',
  39. onOk: () => {
  40. this.props.dispatch({
  41. type: 'product/deleteTrainingItem',
  42. payload: { id: item.id },
  43. states: this.state,
  44. });
  45. },
  46. });
  47. };
  48. handleEditOperation = (item) => {
  49. this.props.dispatch(routerRedux.push({
  50. pathname: `/product/training/edit/${item.pid}`,
  51. state: this.state,
  52. }));
  53. };
  54. handleFilterOperation = (params, states) => {
  55. this.props.dispatch({
  56. type: 'product/fetchTrainingList',
  57. payload: params,
  58. });
  59. this.setState({
  60. UIParams: states,
  61. Queryers: params,
  62. });
  63. };
  64. handleBatchOperation = () => {
  65. Message.info('暂不支持批量操作!');
  66. };
  67. render() {
  68. const { loading, product } = this.props;
  69. const { list, totalSize, pageSize, pageNo } = product;
  70. const renderOperation = (item) => {
  71. return (
  72. <div>
  73. <Button
  74. size="small"
  75. className="editBtn"
  76. onClick={() => this.handleEditOperation(item)}
  77. >编辑
  78. </Button>
  79. <Button
  80. size="small"
  81. className="delBtn"
  82. onClick={() => this.handleDeleteOperation(item)}
  83. >删除
  84. </Button>
  85. </div>
  86. );
  87. };
  88. const batchActions = [{
  89. key: 'delete',
  90. name: '批量删除',
  91. }, {
  92. key: 'recovery',
  93. name: '批量恢复',
  94. }];
  95. const basicSearch = {
  96. keys: [{
  97. name: '师训编号',
  98. field: 'code',
  99. }, {
  100. name: '师训名称',
  101. field: 'name',
  102. }],
  103. };
  104. const pagination = {
  105. pageNo,
  106. pageSize,
  107. totalSize,
  108. };
  109. const columns = [{
  110. title: '师训编号',
  111. key: 1,
  112. dataIndex: 'code',
  113. width: '20%',
  114. }, {
  115. title: '师训主题',
  116. key: 2,
  117. dataIndex: 'name',
  118. width: '35%',
  119. }, {
  120. title: '状态',
  121. key: 3,
  122. dataIndex: 'status',
  123. render: text => renderStatus(text),
  124. width: '12%',
  125. }, {
  126. title: '更新时间',
  127. key: 4,
  128. dataIndex: 'gmtModified',
  129. render: text => moment(text).format('YYYY-MM-DD HH:mm:ss'),
  130. width: '20%',
  131. }, {
  132. title: '操作',
  133. key: 5,
  134. dataIndex: 'operation',
  135. render: (_, record) => renderOperation(record),
  136. width: '13%',
  137. align: 'right',
  138. }];
  139. return (
  140. <Card>
  141. <StandardTableList
  142. columns={columns}
  143. loading={loading}
  144. dataSource={addRowKey(list)}
  145. header={{
  146. basicSearch,
  147. onFilterClick: this.handleFilterOperation,
  148. onCreateClick: this.handleCreateOperation,
  149. }}
  150. footer={{
  151. pagination,
  152. batchActions,
  153. onBatchClick: this.handleBatchOperation,
  154. }}
  155. keepUIState={{ ...this.state.UIParams }}
  156. />
  157. </Card>
  158. );
  159. }
  160. }