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

import PageContent from '@/components/PageContent';
import PageTitle from '@/components/PageTitle';
import { IUserType } from '@/pages/TaskManage/Detail/TaskList/taskList.types';
import SubTitle from '@/pages/TaskManage/components/SubTitle';
import { OrderStatus } from '@/pages/TaskManage/constent';
import {
  getCraftRecordList,
  getMaintainRecordList,
  getRepairRecordList,
} from '@/services/TaskManage';
import { useLocation } from '@@/exports';
import { connect, useRequest } from '@umijs/max';
import { Col, Row } from 'antd';
import { DefaultOptionType } from 'rc-select/es/Select';
import React, { useEffect, useState } from 'react';
import styles from './taskOrder.less';

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

interface IOrderInfo {
  CreateTime: string;
  PlanTime: string;
  RepairTime: string;
  Reason: string;
  Repairman: string | IUserType;
  OrderStatus: string | DefaultOptionType;
}

const TaskOrder: React.FC<IPropsType> = (props) => {
  const { userList, dispatch } = props;

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

  const [orderInfo, setOrderInfo] = useState<IOrderInfo>();

  // 根据type请求详情
  const { run: getMaintainDetail } = useRequest(getMaintainRecordList, {
    manual: true,
    formatResult: (result) => {
      const temp = result.data.list[0];
      const tempDetail = {
        CreateTime: temp.CreateTime,
        PlanTime: temp.PlanTime,
        RepairTime: '-',
        Reason: temp.Note,
        Repairman:
          userList.find((item) => item.ID === temp.MaintenancePerson) || '-',
        OrderStatus:
          OrderStatus.find((item) => item.value === temp.Status) || '-',
      };
      setOrderInfo(tempDetail);
    },
  });

  // 根据type请求详情
  const { run: getRepairDetail } = useRequest(getRepairRecordList, {
    manual: true,
    formatResult: (result: any) => {
      const temp = result.data.list[0];
      const tempDetail: IOrderInfo = {
        CreateTime: temp.CreateTime,
        PlanTime: temp.PlanTime,
        RepairTime: temp.RepairTime,
        Reason: temp.Reason,
        Repairman: userList.find((item) => item.ID === temp.Repairman) || '-',
        OrderStatus:
          OrderStatus.find((item) => item.value === temp.AcceptanceStatus) ||
          '-',
      };
      setOrderInfo(tempDetail);
    },
  });

  // 根据type请求详情
  const { run: getCraftDetail } = useRequest(getCraftRecordList, {
    manual: true,
    formatResult: (result) => {
      const temp = result.data.list[0];
      const tempDetail = {
        CreateTime: temp.start_time,
        PlanTime: temp.plan_end_time,
        RepairTime: temp.actual_end_time || '-',
        Reason: temp.detail,
        Repairman: userList.find((item) => item.ID === temp.operator_id) || '-',
        OrderStatus:
          OrderStatus.find((item) => item.value === temp.status) || '-',
      };
      setOrderInfo(tempDetail);
    },
  });

  useEffect(() => {
    if (userList.length === 0) {
      dispatch({
        type: 'taskUser/fetchUserList',
        payload: { project_id },
      });
    }
    switch (order_type) {
      // 工艺
      case 1:
        getCraftDetail({ project_id, work_id: order_id });
        break;
      // 维修
      case 2:
        getRepairDetail({ project_id, id: order_id });
        break;
      // 保养
      case 3:
        getMaintainDetail({ project_id, id: order_id });
        break;
    }
  }, []);

  return (
    <PageContent>
      <PageTitle returnable>工单详情</PageTitle>
      <div className={styles.selfCardBox}>
        <div className={styles.orderInfo}>
          <SubTitle
            title="工单信息"
            // @ts-ignore
            showStatus={orderInfo?.OrderStatus.value === 2}
            radius
          />
          <div style={{ padding: '15px' }}>
            <Row className={styles.rowMargin}>
              <Col className={styles.fontS18} span={16}>
                时间：{'-'}
              </Col>
              <Col className={styles.fontS18} span={8}>
                {/*// @ts-ignore*/}
                工单负责人：{orderInfo?.Repairman?.CName || '-'}
              </Col>
            </Row>
            <Row className={styles.rowMargin}>
              <Col className={styles.fontS18} span={16}>
                {/*// @ts-ignore*/}
                工单状态：{orderInfo?.OrderStatus?.label}
              </Col>
              <Col className={styles.fontS18} span={8}>
                派单人员：{'-'}
              </Col>
            </Row>
            <Row className={styles.rowMargin}>
              <Col className={styles.fontS18}>
                派单时间：{orderInfo?.CreateTime || '-'}
              </Col>
            </Row>
            <Row className={styles.rowMargin}>
              <Col className={styles.fontS18}>
                计划完成时间：{orderInfo?.PlanTime || '-'}
              </Col>
            </Row>
            <Row className={styles.rowMargin}>
              <Col className={styles.fontS18}>
                实际完成时间：{orderInfo?.RepairTime || '-'}
              </Col>
            </Row>
            <Row>
              <Col className={styles.fontS18}>工单详情：</Col>
              <Col className={styles.fontS18} span={20}>
                {orderInfo?.Reason}
                {/*<Table />*/}
              </Col>
            </Row>
          </div>
        </div>
        {/*<div>*/}
        {/*  <SubTitle title="维修内容" />*/}
        {/*  <div style={{ padding: '15px' }}>*/}
        {/*    <Row className={styles.rowMargin}>*/}
        {/*      <Col className={styles.fontS18}>是否润滑加油：否</Col>*/}
        {/*    </Row>*/}
        {/*    <Row>*/}
        {/*      <Col className={styles.fontS18} >是否清洁：否</Col>*/}
        {/*    </Row>*/}
        {/*  </div>*/}
        {/*</div>*/}
        {/*<div>*/}
        {/*  <SubTitle title="工单流程" />*/}
        {/*  <div style={{ padding: '15px' }}>*/}
        {/*    <Steps*/}
        {/*      direction="vertical"*/}
        {/*      style={{ fontSize: '14px' }}*/}
        {/*      current={1}*/}
        {/*      items={[*/}
        {/*        {*/}
        {/*          title: '工单已派遣至值班人员张**',*/}
        {/*          description: '2023-08-02 13:23',*/}
        {/*        },*/}
        {/*        {*/}
        {/*          title: '张**接收工单',*/}
        {/*          description: '2023-08-02 13:23',*/}
        {/*        },*/}
        {/*        {*/}
        {/*          title: '张**提交处理结果',*/}
        {/*          description: '2023-08-02 13:23',*/}
        {/*        },*/}
        {/*        {*/}
        {/*          title: '工单审批通过',*/}
        {/*          description: '2023-08-02 13:23',*/}
        {/*        },*/}
        {/*      ]}*/}
        {/*    />*/}
        {/*  </div>*/}
        {/*</div>*/}
      </div>
    </PageContent>
  );
};

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