gt_client_pad/src/pages/TaskManage/Detail/TaskDetail/TaskDetail.tsx

import PageContent from '@/components/PageContent';
import PageTitle from '@/components/PageTitle';
import {
  IMandateDetailType,
  IUserType,
  IWorkOrderType,
} from '@/pages/TaskManage/Detail/TaskList/taskList.types';
import {
  MandateClass,
  MandateStatus,
  MandateType,
  OrderStatus,
  OrderType,
} from '@/pages/TaskManage/constent';
import { getMandateDetail } from '@/services/TaskManage';
import { useLocation } from '@@/exports';
import { connect, useRequest } from '@umijs/max';
import { Button, Col, Divider, Row } from 'antd';
import { useEffect, useState } from 'react';
import { useNavigate } from 'umi';
import styles from './taskDetail.less';

interface IPropsType {
  userList: IUserType[];
  dispatch: (args: { type: string; payload: object }) => void;
}

function TaskDetail(props: IPropsType) {
  const { userList, dispatch } = props;

  const location = useLocation();
  const queryParams = new URLSearchParams(location.search);
  const project_id = Number(queryParams.get('project_id'));
  const mandate_id = Number(queryParams.get('mandate_id'));

  const navigate = useNavigate();

  const [mandateDetail, setMandateDetail] = useState<IMandateDetailType>();
  const [handledWorkOrder, setHandledWorkOrder] = useState<IWorkOrderType[]>(
    [],
  );

  const { refresh: refreshDetail } = useRequest(getMandateDetail, {
    defaultParams: [
      {
        mandate_id,
        project_id,
      },
    ],
    formatResult: (result) => {
      const tempMandate: IMandateDetailType = {
        ...result.data,
        Status: MandateStatus.find((item) => item.value === result.data.Status),
        MandateClass: MandateClass.find(
          (item) => item.value === result.data.MandateClass,
        ),
        MandateType: MandateType.find(
          (item) => item.value === result.data.MandateType,
        ),
        ResponsiblePeople: userList.find(
          (item) => item.ID === result.data.ResponsiblePeople,
        ),
      };
      const workOrder = result.data.Records;
      const tempOrder = workOrder.map((record: IWorkOrderType) => {
        return {
          ...record,
          RecordType: OrderType.find(
            (item) => item.value === record.RecordType,
          ),
          Status: OrderStatus.find((item) => item.value === record.Status),
          Responsible: userList.find((item) => item.ID === record.Responsible),
        };
      });
      setMandateDetail(tempMandate);
      setHandledWorkOrder(tempOrder);
    },
  });

  useEffect(() => {
    if (userList.length === 0) {
      dispatch({
        type: 'taskUser/fetchUserList',
        payload: { project_id },
      });
    }
  }, []);

  const goTaskOrder = (orderID: number, orderType: number) => {
    navigate(
      `/task-manage/list/order-detail?project_id=${project_id}&order_id=${orderID}&order_type=${orderType}`,
    );
  };

  return (
    <PageContent>
      <PageTitle returnable>任务详情</PageTitle>
      <div className={`${styles.cardContainer} card-box`}>
        <div className={styles.normalInfo}>
          <Row className={styles.infoRow}>
            <Col className={styles.fontS18} span={16}>
              时间：{mandateDetail?.CreateTime}
            </Col>
            {/*// @ts-ignore*/}
            <Col className={styles.fontS18} span={8}>
              {/*//@ts-ignore*/}
              任务类别：{mandateDetail?.MandateClass?.label}
            </Col>
          </Row>
          <Row>
            <Col className={styles.fontS18} span={16}>
              {/*//@ts-ignore*/}
              任务状态：{mandateDetail?.Status?.label}
            </Col>
            <Col className={styles.fontS18} span={8}>
              {/*// @ts-ignore*/}
              任务负责人：{mandateDetail?.ResponsiblePeople?.CName}
            </Col>
          </Row>
        </div>
        <div className={styles.detailInfo}>
          <Row className={styles.infoRow}>
            <Col className={styles.fontS18} span={4}>
              任务总结
            </Col>
            <Col className={styles.fontS18}>{mandateDetail?.Summary}</Col>
          </Row>
          <Row>
            <Col className={styles.fontS18} span={4}>
              任务内容
            </Col>
            <Col className={styles.fontS18} span={20}>
              <Col>{mandateDetail?.Detail}</Col>
              {/*<Table />*/}
            </Col>
          </Row>
        </div>
        <div className={styles.relatedOrder}>
          <div
            className={styles.fontS22}
            style={{ marginLeft: '15px', marginBottom: '15px' }}
          >
            关联工单
          </div>
          {handledWorkOrder.map((order) => {
            return (
              <div key={order.Id} className={styles.workOrderCard}>
                <div className={styles.leftInfo}>
                  <Row className={styles.infoRow}>
                    <Col className={styles.fontS18} span={12}>
                      工单编号：{order.Id}
                    </Col>
                    <Col className={styles.fontS18} span={12}>
                      时间：{order.CreateTime}
                    </Col>
                  </Row>
                  <Row>
                    <Col className={styles.fontS18} span={12}>
                      工单状态：
                      <span style={{ color: '#5697e4' }}>
                        {/*// @ts-ignore*/}
                        {order.Status?.label}
                      </span>
                    </Col>
                    <Col className={styles.fontS18} span={12}>
                      {/*// @ts-ignore*/}
                      工单负责人：{order.Responsible?.CName}
                    </Col>
                  </Row>
                </div>
                <Divider type="vertical" style={{ height: '40px' }} />
                <div className={styles.rightButton}>
                  <Button
                    className={styles.fontS18}
                    style={{ color: '#5697e4' }}
                    type="text"
                    size="large"
                    onClick={() => {
                      // @ts-ignore
                      goTaskOrder(order.Id, order.RecordType?.value);
                    }}
                  >
                    查看工单
                  </Button>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </PageContent>
  );
}

export default connect(({ taskUser }: any): { userList: IUserType[] } => {
  return {
    userList: taskUser.userList,
  };
})(TaskDetail);