index.js 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
  1. import PageContent from '@/components/PageContent';
  2. import TabsContent from '@/components/TabsContent';
  3. import { MandateType, OrderType } from '@/pages/TaskManage/constent';
  4. import { getMandateList } from '@/services/TaskManage';
  5. import { CaretRightFilled } from '@ant-design/icons';
  6. import { connect, useLocation, useNavigate, useParams } from '@umijs/max';
  7. import { List, Spin } from 'antd';
  8. import { useEffect, useState } from 'react';
  9. import styles from './index.less';
  10. const MyTask = (props) => {
  11. const { userList, dispatch } = props;
  12. const { projectId } = useParams();
  13. const project_id = Number(projectId === '' ? '0' : projectId);
  14. const location = useLocation();
  15. const queryParams = new URLSearchParams(location.search);
  16. const userID = queryParams.get('user_id');
  17. const navigate = useNavigate();
  18. const [mandateCount, setMandateCount] = useState([0, 0, 0]);
  19. const [loading, setLoading] = useState(false);
  20. const [tab, setTab] = useState(localStorage.taskTab || '1');
  21. useEffect(() => {
  22. const requests = [];
  23. for (let i = 0; i < 4; i++) {
  24. requests.push(
  25. getMandateList({
  26. project_id,
  27. pageSize: 1,
  28. currentPage: 1,
  29. mandate_type: i + 1,
  30. responsible_people: userID !== null ? Number(userID) : '',
  31. }),
  32. );
  33. }
  34. setLoading(true);
  35. Promise.all(requests)
  36. .then((resList) => {
  37. if (resList.filter((item) => item.code !== 200).length) {
  38. throw new Error('请求错误');
  39. }
  40. const typeCount = [0, 0, 0, 0];
  41. resList.forEach((item, index) => {
  42. typeCount[index] = item.data.pagination?.total;
  43. });
  44. setMandateCount(typeCount);
  45. })
  46. .catch((err) => {
  47. console.log(err);
  48. })
  49. .finally(() => {
  50. setLoading(false);
  51. });
  52. }, []);
  53. useEffect(() => {
  54. if (userList.length === 0) {
  55. dispatch({
  56. type: 'taskUser/fetchUserList',
  57. payload: { project_id },
  58. });
  59. }
  60. }, []);
  61. const onTabChange = (key) => {
  62. setTab(key);
  63. localStorage.setItem('taskTab', key);
  64. };
  65. const goTaskList = (item) => {
  66. navigate(
  67. `/center/my-task/task-list?project_id=${project_id}&mandateType=${item}${
  68. userID !== null ? '&user_id=' + userID : ''
  69. }`,
  70. );
  71. };
  72. const goWorkOrderList = (item) => {
  73. navigate(
  74. `/center/my-task/work-order-list?project_id=${project_id}&order_type=${item}${
  75. userID !== null ? '&user_id=' + userID : ''
  76. }`,
  77. );
  78. };
  79. const makeTaskList = (item, index) => {
  80. return (
  81. <List.Item
  82. className={styles.listItem}
  83. onClick={() => {
  84. goTaskList(item.value);
  85. }}
  86. >
  87. <List.Item.Meta
  88. title={<span className={styles.itemLabel}>{item.label}</span>}
  89. />
  90. <div className={styles.itemCount}>
  91. <div className={styles.countNumber}>{mandateCount[index]}</div>
  92. <div className={styles.counterText}>任务数量</div>
  93. </div>
  94. <CaretRightFilled style={{ fontSize: '0.3rem', color: '#BCBABA' }} />
  95. </List.Item>
  96. );
  97. };
  98. const makeWorkOrderList = (item) => {
  99. return (
  100. <List.Item
  101. className={styles.listItem}
  102. onClick={() => {
  103. goWorkOrderList(item.value);
  104. }}
  105. >
  106. <List.Item.Meta
  107. title={<span className={styles.itemLabel}>{item.label}</span>}
  108. />
  109. <CaretRightFilled style={{ fontSize: '0.3rem', color: '#BCBABA' }} />
  110. </List.Item>
  111. );
  112. };
  113. return (
  114. <PageContent tabs closeable={false} returnable>
  115. <TabsContent
  116. defaultActiveKey={tab}
  117. onChange={onTabChange}
  118. items={[
  119. {
  120. label: `我的任务`,
  121. key: '1',
  122. children: (
  123. <div className={styles.container}>
  124. <Spin spinning={loading}>
  125. <List
  126. className={styles.taskList}
  127. bordered
  128. itemLayout="horizontal"
  129. dataSource={MandateType}
  130. renderItem={makeTaskList}
  131. pagination={false}
  132. />
  133. </Spin>
  134. </div>
  135. ),
  136. },
  137. {
  138. label: `我的工单`,
  139. key: '2',
  140. children: (
  141. <div className={styles.container}>
  142. <Spin spinning={false}>
  143. <List
  144. className={styles.taskList}
  145. bordered
  146. itemLayout="horizontal"
  147. dataSource={OrderType}
  148. renderItem={makeWorkOrderList}
  149. pagination={false}
  150. />
  151. </Spin>
  152. </div>
  153. ),
  154. },
  155. ]}
  156. />
  157. </PageContent>
  158. );
  159. };
  160. export default connect(({ taskUser }) => {
  161. return {
  162. userList: taskUser.userList,
  163. };
  164. })(MyTask);