index.jsx 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
  1. import React, { useState, useEffect, useCallback, useRef } from 'react';
  2. import { FormattedMessage, history, useModel } from 'umi';
  3. import { Spin, Popover } from 'antd';
  4. import styles from './index.less';
  5. import cx from 'classnames';
  6. import PageHeader from '@/sagacare_components/PageHeader';
  7. import Search from '@/sagacare_components/Search';
  8. import Table from '@/sagacare_components/Table';
  9. import Empty from '../components/Empty';
  10. import { EllipsisOutlined } from '@ant-design/icons';
  11. import { queryUserList } from '@/services/sagacare_service/member';
  12. export default (props) => {
  13. const { initialState } = useModel('@@initialState');
  14. const [userList, setUserList] = useState([]);
  15. const [total, setTotal] = useState(10);
  16. const [loading, setLoading] = useState(false);
  17. const [page, setPage] = useState({
  18. pageNum: 1,
  19. pageSize: 10,
  20. });
  21. const [sorter, setSorter] = useState({
  22. updateDate: 'DESC', //'ASC' : 'DESC'
  23. });
  24. const [searchStr, setSearchStr] = useState('');
  25. const userTpeyArr = {
  26. 1: '普通成员',
  27. 2: '临时成员',
  28. 3: '管理员',
  29. };
  30. const [showFilterIds, setShowFilterIds] = useState([]);
  31. useEffect(() => {
  32. debugger;
  33. var paramObj = {
  34. criteria: {
  35. param: searchStr,
  36. status: 5,
  37. companyId: initialState?.currentUser?.companyId,
  38. },
  39. page: page.pageNum,
  40. size: page.pageSize,
  41. orders: [
  42. {
  43. column: 'updateDate',
  44. asc: sorter.updateDate == 'DESC' ? true : false,
  45. },
  46. ],
  47. };
  48. setLoading(true);
  49. if (showFilterIds.length > 0) {
  50. paramObj.criteria = { ...paramObj.criteria, ...{ manageUserType: showFilterIds } };
  51. }
  52. queryUserList(paramObj)
  53. .then((res) => {
  54. debugger;
  55. setLoading(false);
  56. var uarr = res.content || [];
  57. var count = res.count || 0;
  58. setUserList(uarr);
  59. setTotal(count);
  60. })
  61. .catch((err) => {
  62. setLoading(false);
  63. });
  64. }, [searchStr, page, sorter, showFilterIds]);
  65. const getColumns = () => {
  66. return [
  67. {
  68. title: '姓名',
  69. dataIndex: 'name',
  70. width: 140,
  71. },
  72. {
  73. title: '类型',
  74. dataIndex: 'manageUserType',
  75. filteredValue: showFilterIds,
  76. single: false,
  77. filters: [
  78. { value: 1, label: '普通成员' },
  79. { value: 2, label: '临时成员' },
  80. { value: 3, label: '管理员' },
  81. ],
  82. render: function (content, item, index) {
  83. return <span>{userTpeyArr[content]}</span>;
  84. },
  85. },
  86. {
  87. title: '手机号',
  88. dataIndex: 'phone',
  89. },
  90. {
  91. title: '职务',
  92. dataIndex: 'duties',
  93. },
  94. {
  95. title: '作废时间',
  96. dataIndex: 'updateDate',
  97. sorter: true,
  98. sortered: sorter.updateDate,
  99. },
  100. {
  101. title: '状态',
  102. dataIndex: 'status',
  103. render: function (content, item, index) {
  104. return (
  105. <div>
  106. <span className={styles.circle}></span>
  107. <span>{content}</span>
  108. </div>
  109. );
  110. },
  111. },
  112. ];
  113. };
  114. return (
  115. <div className={styles.memberwrap}>
  116. <PageHeader
  117. title={<FormattedMessage id="menu.member.invalid" />}
  118. action={<Search changeSearchStr={setSearchStr} />}
  119. />
  120. <div className={styles.bottomTable}>
  121. <Table
  122. columns={getColumns()}
  123. rowKey="phone"
  124. dataSource={userList}
  125. loading={loading}
  126. page={page}
  127. total={total}
  128. pagination={!!userList.length}
  129. onFilterChange={(key, options) => {
  130. setShowFilterIds(options);
  131. }}
  132. onRowClick={(record) => {}}
  133. onSortChange={(col, direction) => {
  134. debugger;
  135. setSorter({ [col['dataIndex']]: direction });
  136. }}
  137. onPageChange={(p) => {
  138. debugger;
  139. setPage(p);
  140. }}
  141. />
  142. {!userList.length && !loading && <Empty />}
  143. </div>
  144. </div>
  145. );
  146. };