index.js 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  1. import React, { Component } from 'react';
  2. import PropTypes from 'prop-types';
  3. import queryString from 'query-string';
  4. import { connect } from 'dva';
  5. import { routerRedux } from 'dva/router';
  6. import { Card } from 'antd';
  7. import CampusTableList from './table';
  8. import CampusModalForm from './modal';
  9. import Search from './search';
  10. import PageHeaderLayout from '../../layouts/PageHeaderLayout';
  11. import { Codes } from '../../utils/config';
  12. @connect(state => ({
  13. campus: state.campus,
  14. }))
  15. export default class CampusList extends Component {
  16. render() {
  17. const { location, dispatch, campus } = this.props;
  18. const {
  19. list,
  20. listLoading,
  21. pagination,
  22. currentItem,
  23. modalVisible,
  24. modalType,
  25. } = campus;
  26. location.query = queryString.parse(location.search);
  27. const { query, pathname } = location;
  28. const { field, keyword, ...filters } = query;
  29. // 把携带的参数中空值项删除
  30. Object.keys(filters).map((key) => { filters[key] ? null : delete filters[key]; });
  31. // 如果搜索内容不为空则添加进filters中
  32. if (field && keyword) {
  33. filters.field = field;
  34. filters.keyword = keyword;
  35. }
  36. const modalProps = {
  37. item: modalType === 'create' ? {} : currentItem,
  38. visible: modalVisible,
  39. maskClosable: false,
  40. title: `${modalType === 'create' ? '添加校区' : '编辑校区'}`,
  41. wrapClassName: 'vertical-center-modal',
  42. onOk(data) {
  43. dispatch({
  44. type: `campus/${modalType}`,
  45. payload: data,
  46. callback: () => {
  47. dispatch(routerRedux.push({
  48. pathname: '/terminal/campus',
  49. search: queryString.stringify(filters),
  50. }));
  51. },
  52. });
  53. },
  54. onCancel() {
  55. dispatch({
  56. type: 'campus/hideModal',
  57. });
  58. },
  59. };
  60. const searchProps = {
  61. field,
  62. keyword,
  63. onSearch: (payload) => {
  64. if (!payload.keyword.length) {
  65. delete payload.field;
  66. delete payload.keyword;
  67. }
  68. dispatch(routerRedux.push({
  69. pathname,
  70. search: queryString.stringify({
  71. ...payload,
  72. }),
  73. }));
  74. },
  75. onAdd: () => {
  76. dispatch({
  77. type: 'campus/showModal',
  78. payload: { modalType: 'create' },
  79. });
  80. },
  81. };
  82. const listProps = {
  83. dataSource: list,
  84. loading: listLoading,
  85. pagination,
  86. location,
  87. onChange: (pagination, filterArgs) => {
  88. const getValue = obj => Object.keys(obj).map(key => obj[key]).join(',');
  89. const tableFilters = Object.keys(filterArgs).reduce((obj, key) => {
  90. const newObj = { ...obj };
  91. newObj[key] = getValue(filterArgs[key]);
  92. return newObj;
  93. }, {});
  94. const data = { ...filters, ...tableFilters };
  95. Object.keys(data).map(key => (data[key] ? null : delete data[key]));
  96. dispatch(routerRedux.push({
  97. pathname,
  98. search: queryString.stringify({
  99. ...data,
  100. pageNo: pagination.current,
  101. pageSize: pagination.pageSize,
  102. }),
  103. }));
  104. },
  105. onEditItem: (item) => {
  106. dispatch({
  107. type: 'campus/showModal',
  108. payload: {
  109. modalType: 'update',
  110. currentItem: item,
  111. },
  112. });
  113. },
  114. onDeleteItem: () => {
  115. // TODO: 暂不提供删除校区功能
  116. },
  117. };
  118. return (
  119. <PageHeaderLayout>
  120. <Card>
  121. <Search {...searchProps} />
  122. <CampusTableList {...listProps} />
  123. {modalVisible && <CampusModalForm {...modalProps} />}
  124. </Card>
  125. </PageHeaderLayout>
  126. );
  127. }
  128. }