PersonalizeList.js 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263
  1. /* eslint-disable prefer-destructuring */
  2. import React, { Component } from 'react';
  3. import moment from 'moment';
  4. import { connect } from 'dva';
  5. import { routerRedux } from 'dva/router';
  6. import { Card, Modal, Form, Button, message } from 'antd';
  7. import { StandardTableList } from '../../../components/AXList';
  8. import AXRemoteSelect from '../../../components/AXRemoteSelect';
  9. import Ellipsis from '../../../components/Ellipsis';
  10. import { addRowKey, renderStatus, renderBindStatus } from '../../../utils/utils';
  11. const Message = message;
  12. const formItemLayout = {
  13. labelCol: {
  14. xs: { span: 24 },
  15. sm: { span: 7 },
  16. },
  17. wrapperCol: {
  18. xs: { span: 24 },
  19. sm: { span: 15 },
  20. md: { span: 13 },
  21. },
  22. };
  23. function arrayDataFormatter(data) {
  24. return data.map((item) => {
  25. return {
  26. text: item.name,
  27. value: `${item.name}||${item.id}`,
  28. };
  29. });
  30. }
  31. @Form.create()
  32. @connect(({ loading, campus, terminal }) => ({
  33. campus,
  34. terminal,
  35. fetching: loading.models.campus,
  36. loading: loading.models.terminal,
  37. }))
  38. export default class PersonalizeListPage extends Component {
  39. constructor(props) {
  40. super(props);
  41. const { state } = props.location;
  42. this.state = {
  43. UIParams: (state || {}).UIParams, // 组件的状态参数
  44. Queryers: (state || {}).Queryers, // 查询的条件参数
  45. campuses: (state || {}).campuses || [], // 记录筛选的校区
  46. filterModalDestroy: true,
  47. };
  48. }
  49. componentWillMount() {
  50. this.props.dispatch({
  51. type: 'terminal/cleanState',
  52. });
  53. }
  54. componentDidMount() {
  55. const { campuses } = this.state;
  56. let campusId;
  57. if (campuses && campuses.length) {
  58. campusId = campuses[0].split('||')[1];
  59. }
  60. this.props.dispatch({
  61. type: 'terminal/fetchTerminalList',
  62. payload: {
  63. campusId,
  64. ...this.state.Queryers,
  65. },
  66. });
  67. }
  68. handleEditOperation = (item) => {
  69. this.props.dispatch(routerRedux.push({
  70. pathname: `/frontend/personalize/edit/${item.id}`,
  71. state: { ...this.state },
  72. }));
  73. };
  74. handleFilterOperation = (params, states) => {
  75. this.setState({
  76. UIParams: states,
  77. Queryers: params,
  78. });
  79. const { campuses } = this.state;
  80. let campusId;
  81. if (campuses && campuses.length) {
  82. campusId = campuses[0].split('||')[1];
  83. }
  84. this.props.dispatch({
  85. type: 'terminal/fetchTerminalList',
  86. payload: {
  87. campusId,
  88. ...params,
  89. },
  90. });
  91. };
  92. handleModalFilterOperation = () => {
  93. const { getFieldsValue } = this.props.form;
  94. const { campuses } = getFieldsValue();
  95. let campusId;
  96. if (campuses && campuses.length) {
  97. campusId = campuses[0].split('||')[1];
  98. }
  99. this.props.dispatch({
  100. type: 'terminal/fetchTerminalList',
  101. payload: {
  102. ...this.state.Queryers,
  103. campusId,
  104. },
  105. });
  106. this.setState({ campuses });
  107. this.handleFilterModalDestroy();
  108. };
  109. handleBatchOperation = () => {
  110. Message.info('暂不支持批量操作!');
  111. };
  112. handleFilterModalShow = () => {
  113. this.setState({ filterModalDestroy: false });
  114. };
  115. handleFilterModalDestroy = () => {
  116. this.setState({ filterModalDestroy: true });
  117. };
  118. handleMerchantRemoteSelectSearch = (value) => {
  119. this.props.dispatch({
  120. type: 'merchant/fetchMerchantList',
  121. payload: {
  122. pageSize: 50,
  123. name: value,
  124. },
  125. });
  126. };
  127. handleCampusRemoteSelectSearch = (value) => {
  128. this.props.dispatch({
  129. type: 'campus/fetchCampusList',
  130. payload: {
  131. pageSize: 50,
  132. name: value,
  133. },
  134. });
  135. };
  136. render() {
  137. const { campuses } = this.state;
  138. const { loading, fetching, form, campus, terminal } = this.props;
  139. const { list, totalSize, pageSize, pageNo } = terminal;
  140. const { getFieldDecorator } = form;
  141. const renderCampusName = (name) => {
  142. return (
  143. <Ellipsis tooltip lines={1}>{name}</Ellipsis>
  144. );
  145. };
  146. const renderOperation = (item) => {
  147. return (
  148. <div>
  149. <Button
  150. size="small"
  151. className="editBtn"
  152. onClick={() => this.handleEditOperation(item)}
  153. >用户配置
  154. </Button>
  155. </div>
  156. );
  157. };
  158. const batchActions = [{
  159. key: 'config',
  160. name: '批量配置',
  161. }];
  162. const basicSearch = {
  163. keys: [{
  164. name: '终端编号',
  165. field: 'code',
  166. }, {
  167. name: '终端名称',
  168. field: 'name',
  169. }],
  170. };
  171. const pagination = {
  172. pageNo,
  173. pageSize,
  174. totalSize,
  175. };
  176. const columns = [{
  177. title: '终端编号',
  178. dataIndex: 'code',
  179. width: '15%',
  180. }, {
  181. title: '终端名称',
  182. dataIndex: 'name',
  183. width: '15%',
  184. }, {
  185. title: '所属校区',
  186. dataIndex: 'campusName',
  187. render: text => renderCampusName(text),
  188. width: '25%',
  189. }, {
  190. title: '账号状态',
  191. dataIndex: 'status',
  192. render: text => renderStatus(text, '已禁用'),
  193. width: '8%',
  194. }, {
  195. title: '绑定状态',
  196. dataIndex: 'deviceStatus',
  197. render: text => renderBindStatus(text),
  198. width: '9%',
  199. }, {
  200. title: '更新时间',
  201. dataIndex: 'gmtModified',
  202. render: text => moment(text).format('YYYY-MM-DD HH:mm:ss'),
  203. width: '15%',
  204. }, {
  205. title: '操作',
  206. dataIndex: 'operation',
  207. render: (_, record) => renderOperation(record),
  208. width: '13%',
  209. align: 'right',
  210. }];
  211. return (
  212. <Card>
  213. <StandardTableList
  214. columns={columns}
  215. loading={loading}
  216. dataSource={addRowKey(list)}
  217. header={{
  218. basicSearch,
  219. onAdvanceFilterClick: this.handleFilterModalShow,
  220. onFilterClick: this.handleFilterOperation,
  221. onCreateClick: this.handleCreateOperation,
  222. }}
  223. footer={{
  224. pagination,
  225. batchActions,
  226. onBatchClick: this.handleBatchOperation,
  227. }}
  228. keepUIState={{ ...this.state.UIParams }}
  229. />
  230. {!this.state.filterModalDestroy && (
  231. <Modal
  232. width={600}
  233. visible
  234. title="高级筛选"
  235. okText="筛选"
  236. cancelText="取消"
  237. maskClosable={false}
  238. onCancel={this.handleFilterModalDestroy}
  239. onOk={this.handleModalFilterOperation}
  240. >
  241. <Form>
  242. <Form.Item label="所属校区" {...formItemLayout}>
  243. {getFieldDecorator('campuses', {
  244. initialValue: campuses,
  245. })(
  246. <AXRemoteSelect
  247. fetching={fetching}
  248. dataSource={arrayDataFormatter(campus.list)}
  249. onSearch={this.handleCampusRemoteSelectSearch}
  250. />
  251. )}
  252. </Form.Item>
  253. </Form>
  254. </Modal>
  255. )}
  256. </Card>
  257. );
  258. }
  259. }