index.js 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. import { CloseOutlined } from '@ant-design/icons';
  2. import { connect, useLocation, useParams } from '@umijs/max';
  3. import { Button, Tabs } from 'antd';
  4. import { useEffect, useState } from 'react';
  5. import MandateDetail from '../components/MandateDetail';
  6. import styles from './index.less';
  7. const TaskModal = (props) => {
  8. const { projectID } = useParams();
  9. const location = useLocation();
  10. const queryParams = new URLSearchParams(location.search);
  11. const mandateIDs =
  12. queryParams.get('mandate_id')?.split(',').length === 1
  13. ? queryParams.get('mandate_id')
  14. : queryParams.get('mandate_id')?.split(',');
  15. const { userList, dispatch } = props;
  16. const [modalTitle, setModalTitle] = useState(null);
  17. const [tabItems, setTabItems] = useState([]);
  18. const [activeKey, setActiveKey] = useState();
  19. const onTabChange = (key) => {
  20. setActiveKey(String(key));
  21. };
  22. const closePage = () => {
  23. // send message to unity close this modal page
  24. };
  25. useEffect(() => {
  26. if (mandateIDs !== undefined) {
  27. if (Array.isArray(mandateIDs)) {
  28. setModalTitle(null);
  29. setTabItems(
  30. mandateIDs.map((item, index) => {
  31. return {
  32. key: String(item),
  33. label: <span className={styles.fontS24}>任务{index + 1}</span>,
  34. children: (
  35. <MandateDetail
  36. key={item}
  37. mandateID={item}
  38. userList={userList}
  39. projectID={projectID}
  40. />
  41. ),
  42. };
  43. }),
  44. );
  45. } else {
  46. setModalTitle(<div className={styles.modalTitle}>任务详情</div>);
  47. }
  48. }
  49. }, []);
  50. useEffect(() => {
  51. if (userList.length === 0) {
  52. dispatch({
  53. type: 'taskUser/fetchUserList',
  54. payload: { project_id: projectID },
  55. });
  56. }
  57. }, []);
  58. return (
  59. <div className={styles.modalContainer}>
  60. <Button
  61. className={styles.closeModalBtn}
  62. type="text"
  63. icon={<CloseOutlined style={{ fontSize: '24px' }} />}
  64. onClick={closePage}
  65. />
  66. {mandateIDs && Array.isArray(mandateIDs) ? (
  67. <Tabs
  68. defaultActiveKey={String(mandateIDs[0])}
  69. activeKey={activeKey}
  70. items={tabItems}
  71. onChange={onTabChange}
  72. />
  73. ) : (
  74. <>
  75. {modalTitle}
  76. <MandateDetail
  77. mandateID={mandateIDs}
  78. userList={userList}
  79. projectID={projectID}
  80. />
  81. </>
  82. )}
  83. </div>
  84. );
  85. };
  86. export default connect(({ taskUser }) => {
  87. return {
  88. userList: taskUser.userList,
  89. };
  90. })(TaskModal);