index.tsx 4.5 KB

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