|
@@ -0,0 +1,308 @@
|
|
|
+import PageContent from '@/components/PageContent';
|
|
|
+import PageTitle from '@/components/PageTitle';
|
|
|
+import ScrollLoading from '@/components/ScrollLoading';
|
|
|
+import TopFilter from '@/pages/TaskManage/components/TopFilter';
|
|
|
+import {
|
|
|
+ MandateClass,
|
|
|
+ MandateStatus,
|
|
|
+ MandateType,
|
|
|
+ OrderStatus,
|
|
|
+ OrderType,
|
|
|
+} from '@/pages/TaskManage/constent';
|
|
|
+import { getMandateList } from '@/services/TaskManage';
|
|
|
+import { DownOutlined } from '@ant-design/icons';
|
|
|
+import { connect, useLocation, useNavigate, useRequest } from '@umijs/max';
|
|
|
+import { Col, Collapse, Divider, List, Row } from 'antd';
|
|
|
+import dayjs from 'dayjs';
|
|
|
+import { useEffect, useState } from 'react';
|
|
|
+import styles from './taskList.less';
|
|
|
+
|
|
|
+const MyTaskList = (props) => {
|
|
|
+ const { userList, loading, dispatch } = props;
|
|
|
+
|
|
|
+ const location = useLocation();
|
|
|
+
|
|
|
+ const queryParams = new URLSearchParams(location.search);
|
|
|
+ const project_id = Number(queryParams.get('project_id'));
|
|
|
+ const mandateType = Number(queryParams.get('mandateType'));
|
|
|
+ const userID = queryParams.get('user_id');
|
|
|
+
|
|
|
+ const navigate = useNavigate();
|
|
|
+
|
|
|
+ const [currentParams, setCurrentParams] = useState({
|
|
|
+ project_id,
|
|
|
+ mandate_type: mandateType,
|
|
|
+ pageSize: 20,
|
|
|
+ currentPage: 1,
|
|
|
+ responsible_people: userID !== null ? Number(userID) : '',
|
|
|
+ });
|
|
|
+ const [pagination, setPagination] = useState({
|
|
|
+ current: 1,
|
|
|
+ total: 0,
|
|
|
+ pageSize: 20,
|
|
|
+ });
|
|
|
+ const [topFiltersConfig, setTopFiltersConfig] = useState([]);
|
|
|
+ const [mandateList, setMandateList] = useState([]);
|
|
|
+
|
|
|
+ // 获取用户
|
|
|
+ useEffect(() => {
|
|
|
+ if (userList.length === 0) {
|
|
|
+ dispatch({
|
|
|
+ type: 'taskUser/fetchUserList',
|
|
|
+ payload: { project_id },
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }, []);
|
|
|
+
|
|
|
+ // 配置顶部下拉过滤器
|
|
|
+ useEffect(() => {
|
|
|
+ const filters = [];
|
|
|
+ filters.push({
|
|
|
+ key: 'mandate_class',
|
|
|
+ placeholder: '任务类别',
|
|
|
+ // @ts-ignore
|
|
|
+ options: MandateClass.map((item) => {
|
|
|
+ if (item.MandateType === mandateType) {
|
|
|
+ return {
|
|
|
+ value: item.value,
|
|
|
+ label: item.label,
|
|
|
+ key: item.value + '任务类别',
|
|
|
+ };
|
|
|
+ }
|
|
|
+ return undefined;
|
|
|
+ }).filter((item) => item),
|
|
|
+ });
|
|
|
+
|
|
|
+ filters.push({
|
|
|
+ key: 'status',
|
|
|
+ placeholder: '任务状态',
|
|
|
+ options: MandateStatus.map((item) => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ };
|
|
|
+ }),
|
|
|
+ });
|
|
|
+
|
|
|
+ setTopFiltersConfig(filters);
|
|
|
+ }, [mandateType]);
|
|
|
+
|
|
|
+ const { run: getList, loading: loadData } = useRequest(getMandateList, {
|
|
|
+ defaultParams: [currentParams],
|
|
|
+ formatResult: (result) => {
|
|
|
+ const pageInfo = result.data.pagination;
|
|
|
+ if (result.data.pagination.current === 1) {
|
|
|
+ setMandateList(result.data.list);
|
|
|
+ } else {
|
|
|
+ if (mandateList.length < pageInfo.total) {
|
|
|
+ setMandateList([...mandateList, ...result.data.list]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ setPagination(pageInfo);
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ const onTopFilterChange = (value) => {
|
|
|
+ if (topFiltersConfig.length === 0) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const params = {
|
|
|
+ project_id,
|
|
|
+ mandate_type: mandateType,
|
|
|
+ pageSize: 20,
|
|
|
+ currentPage: 1,
|
|
|
+ };
|
|
|
+
|
|
|
+ if (userID !== null) {
|
|
|
+ params.responsible_people = Number(userID);
|
|
|
+ }
|
|
|
+
|
|
|
+ for (let i = 0; i < value.length; i++) {
|
|
|
+ if (value[i] !== null && topFiltersConfig[i] !== undefined) {
|
|
|
+ params[topFiltersConfig[i].key] = value[i];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ setCurrentParams(params);
|
|
|
+ getList(params);
|
|
|
+ };
|
|
|
+
|
|
|
+ const goMyTaskDetail = (mandate) => {
|
|
|
+ navigate(
|
|
|
+ `/task-manage/list/detail?project_id=${project_id}&mandate_id=${mandate.Id}`,
|
|
|
+ );
|
|
|
+ };
|
|
|
+
|
|
|
+ const goMyWorkOrder = (orderID, orderType, mandateClass) => {
|
|
|
+ if (orderType === undefined) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ navigate(
|
|
|
+ `/task-manage/list/order-detail?project_id=${project_id}&order_id=${orderID}&order_type=${orderType}&mandate_class=${mandateClass}`,
|
|
|
+ );
|
|
|
+ };
|
|
|
+
|
|
|
+ const buildTaskList = (item) => {
|
|
|
+ const formatItem = {
|
|
|
+ ...item,
|
|
|
+ Status: MandateStatus.find((status) => status.value === item.Status),
|
|
|
+ MandateType: MandateType.find((type) => type.value === item.MandateType),
|
|
|
+ MandateClass: MandateClass.find(
|
|
|
+ (itemClass) => itemClass.value === item.MandateClass,
|
|
|
+ ),
|
|
|
+ ResponsiblePeople: userList.find(
|
|
|
+ (user) => user.ID === item.ResponsiblePeople,
|
|
|
+ ),
|
|
|
+ CreateTime: dayjs(item.CreateTime).format('YYYY-MM-DD HH:mm'),
|
|
|
+ };
|
|
|
+
|
|
|
+ const workOrder = item.Records.map((record) => {
|
|
|
+ return {
|
|
|
+ ...record,
|
|
|
+ key: record.Id,
|
|
|
+ Status: OrderStatus.find((status) => status.value === record.Status),
|
|
|
+ RecordType: OrderType.find((type) => type.value === record.RecordType),
|
|
|
+ Responsible: userList.find((user) => user.ID === record.Responsible),
|
|
|
+ CreateTime: dayjs(record.CreateTime).format('YYYY-MM-DD HH:mm'),
|
|
|
+ };
|
|
|
+ });
|
|
|
+
|
|
|
+ const collapseData = [
|
|
|
+ {
|
|
|
+ key: '1',
|
|
|
+ label: (
|
|
|
+ <span style={{ color: '#5697e4' }}>关联工单({workOrder.length})</span>
|
|
|
+ ),
|
|
|
+ children: workOrder.map((order) => {
|
|
|
+ return (
|
|
|
+ <div key={order.Id} className={styles.workOrderCard}>
|
|
|
+ <div className={styles.leftInfo}>
|
|
|
+ <Row style={{ marginBottom: '15px' }}>
|
|
|
+ <Col className={styles.fontS24} span={12}>
|
|
|
+ 工单类型:{order.RecordType?.label || '-'}
|
|
|
+ </Col>
|
|
|
+ <Col className={styles.fontS24} span={12}>
|
|
|
+ 时间:{order.CreateTime}
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ <Row>
|
|
|
+ <Col className={styles.fontS24} span={12}>
|
|
|
+ 工单状态:
|
|
|
+ <span style={{ color: '#5697e4' }}>
|
|
|
+ {order.Status?.label}
|
|
|
+ </span>
|
|
|
+ </Col>
|
|
|
+ <Col className={styles.fontS24} span={12}>
|
|
|
+ 工单负责人:{order.Responsible?.CName}
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ </div>
|
|
|
+ <Divider type="vertical" style={{ height: '40px' }} />
|
|
|
+ <div
|
|
|
+ className={styles.rightButton}
|
|
|
+ style={{ color: '#5697e4' }}
|
|
|
+ onClick={() => {
|
|
|
+ goMyWorkOrder(
|
|
|
+ order.Id,
|
|
|
+ order.RecordType?.value,
|
|
|
+ item.MandateClass,
|
|
|
+ );
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ 查看工单
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ }),
|
|
|
+ },
|
|
|
+ ];
|
|
|
+
|
|
|
+ return (
|
|
|
+ <List.Item style={{ borderBottom: '0' }}>
|
|
|
+ <div className={`${styles.cardContainer} card-box`}>
|
|
|
+ <Row justify="space-between" style={{ marginBottom: '20px' }}>
|
|
|
+ <Col className={styles.fontS24}>时间:{formatItem.CreateTime}</Col>
|
|
|
+ <Col className={styles.fontS24}>
|
|
|
+ 任务类别:{formatItem.MandateClass?.label}
|
|
|
+ </Col>
|
|
|
+ <Col className={styles.fontS24}>
|
|
|
+ 任务负责人:{formatItem.ResponsiblePeople?.CName || '-'}
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ <Row
|
|
|
+ justify="space-between"
|
|
|
+ style={{
|
|
|
+ paddingBottom: '10px',
|
|
|
+ borderBottom: '1px solid #D5D5D5',
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <Col className={styles.fontS24}>
|
|
|
+ 任务状态:{formatItem.Status?.label || '-'}
|
|
|
+ </Col>
|
|
|
+ <Col>
|
|
|
+ <div
|
|
|
+ className={styles.fontS24}
|
|
|
+ style={{
|
|
|
+ backgroundColor: '#f5a623',
|
|
|
+ color: 'white',
|
|
|
+ width: '150px',
|
|
|
+ height: '50px',
|
|
|
+ display: 'flex',
|
|
|
+ justifyContent: 'center',
|
|
|
+ alignItems: 'center',
|
|
|
+ }}
|
|
|
+ onClick={() => {
|
|
|
+ goMyTaskDetail(item);
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ 任务详情
|
|
|
+ </div>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ <Row>
|
|
|
+ <Collapse
|
|
|
+ className={styles.collapseLabel}
|
|
|
+ ghost
|
|
|
+ expandIcon={({ isActive }) => (
|
|
|
+ <DownOutlined
|
|
|
+ style={{ color: '#5697e4' }}
|
|
|
+ rotate={isActive ? 180 : 0}
|
|
|
+ />
|
|
|
+ )}
|
|
|
+ items={collapseData}
|
|
|
+ />
|
|
|
+ </Row>
|
|
|
+ </div>
|
|
|
+ </List.Item>
|
|
|
+ );
|
|
|
+ };
|
|
|
+
|
|
|
+ return (
|
|
|
+ <PageContent closeable={false}>
|
|
|
+ <PageTitle returnable>
|
|
|
+ {MandateType.find((item) => item.value === mandateType)?.label}
|
|
|
+ </PageTitle>
|
|
|
+ <TopFilter filters={topFiltersConfig} onChange={onTopFilterChange} />
|
|
|
+
|
|
|
+ <ScrollLoading
|
|
|
+ height={180}
|
|
|
+ loading={loading || loadData}
|
|
|
+ pagination={pagination}
|
|
|
+ handleLoadData={(current) => {
|
|
|
+ getList({ ...currentParams, currentPage: current });
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <List
|
|
|
+ itemLayout="horizontal"
|
|
|
+ dataSource={mandateList}
|
|
|
+ renderItem={buildTaskList}
|
|
|
+ />
|
|
|
+ </ScrollLoading>
|
|
|
+ </PageContent>
|
|
|
+ );
|
|
|
+};
|
|
|
+
|
|
|
+export default connect(({ taskUser, loading }) => {
|
|
|
+ return {
|
|
|
+ userList: taskUser.userList,
|
|
|
+ loading: loading.models['taskUser'],
|
|
|
+ };
|
|
|
+})(MyTaskList);
|