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 dayjs from 'dayjs';
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;
  DispatchMan: string | IUserType;
  OrderStatus: string | DefaultOptionType;
  Lubrication?: number;
  Fasten?: number;
  RustRemoval?: number;
  AntiCorrosive?: number;
  Clean?: number;
  Check?: number;
}

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: dayjs(temp.CreateTime).format('YYYY-MM-DD HH:mm'),
        PlanTime: dayjs(temp.PlanTime).format('YYYY-MM-DD HH:mm'),
        RepairTime: dayjs(temp.RepairTime).format('YYYY-MM-DD HH:mm') || '-',
        Reason: temp.Note,
        Lubrication: temp.Lubrication,
        Fasten: temp.Fasten,
        RustRemoval: temp.RustRemoval,
        AntiCorrosive: temp.Anticorrosive,
        Clean: temp.Clean,
        Check: temp.Check,
        Repairman:
          userList.find((item) => item.ID === temp.MaintenancePerson) || '-',
        DispatchMan:
          userList.find(
            (item) => (item.ID = temp.Operators[0]?.Operator?.ID),
          ) || '-',
        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];
      if (temp === undefined) {
        return;
      }
      const tempDetail: IOrderInfo = {
        CreateTime: dayjs(temp.CreateTime).format('YYYY-MM-DD HH:mm'),
        PlanTime: dayjs(temp.PlanTime).format('YYYY-MM-DD HH:mm'),
        RepairTime:
          (temp.RepairTime &&
            dayjs(temp.RepairTime).format('YYYY-MM-DD HH:mm')) ||
          '-',
        Reason: temp.Reason,
        Repairman: userList.find((item) => item.ID === temp.Repairman) || '-',
        DispatchMan:
          userList.find((item) => {
            item.ID === temp.operator_id;
          }) || '-',
        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: dayjs(temp.start_time).format('YYYY-MM-DD HH:mm'),
        PlanTime: dayjs(temp.plan_end_time).format('YYYY-MM-DD HH:mm'),
        RepairTime:
          (temp.actual_end_time &&
            dayjs(temp.actual_end_time).format('YYYY-MM-DD HH:mm')) ||
          '-',
        Reason: temp.detail,
        Repairman: userList.find((item) => item.ID === temp.checker_id) || '-',
        DispatchMan:
          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 closeable={false}>
      <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', letterSpacing: '1.5px' }}>
            <Row className={styles.rowMargin}>
              <Col className={styles.fontS28} span={16}>
                {/*// @ts-ignore*/}
                工单类型：
                {order_type === 1 ? '工艺' : order_type === 2 ? '维修' : '保养'}
              </Col>
              <Col className={styles.fontS28} span={8}>
                {/*// @ts-ignore*/}
                工单负责人：{orderInfo?.Repairman?.CName || '-'}
              </Col>
            </Row>
            <Row className={styles.rowMargin}>
              <Col className={styles.fontS28} span={16}>
                {/*// @ts-ignore*/}
                工单状态：{orderInfo?.OrderStatus?.label}
              </Col>
              <Col className={styles.fontS28} span={8}>
                {/*// @ts-ignore*/}
                派单人员：{orderInfo?.DispatchMan?.CName}
              </Col>
            </Row>
            <Row className={styles.rowMargin}>
              <Col className={styles.fontS28}>
                派单时间：{orderInfo?.CreateTime || '-'}
              </Col>
            </Row>
            <Row className={styles.rowMargin}>
              <Col className={styles.fontS28}>
                计划完成时间：{orderInfo?.PlanTime || '-'}
              </Col>
            </Row>
            <Row className={styles.rowMargin}>
              <Col className={styles.fontS28}>
                实际完成时间：{orderInfo?.RepairTime || '-'}
              </Col>
            </Row>
            <Row>
              <Col className={styles.fontS28}>工单详情：</Col>
              <Col className={styles.fontS28} span={18}>
                {orderInfo?.Reason}
                {/*<Table />*/}
              </Col>
            </Row>
          </div>
        </div>
        {order_type === 3 && (
          <div>
            <SubTitle title="维修内容" />
            <div style={{ padding: '15px' }}>
              <Row className={styles.rowMargin} justify={'space-around'}>
                <Col className={styles.fontS28} span={8}>
                  是否润滑/加油：{orderInfo?.Lubrication === 1 ? '是' : '否'}
                </Col>
                <Col className={styles.fontS28} span={8}>
                  是否拆检：{orderInfo?.Check === 1 ? '是' : '否'}
                </Col>
                <Col className={styles.fontS28} span={8}>
                  是否清洁：{orderInfo?.Clean === 1 ? '是' : '否'}
                </Col>
              </Row>
              <Row justify={'space-around'}>
                <Col className={styles.fontS28} span={8}>
                  是否紧固：{orderInfo?.Fasten === 1 ? '是' : '否'}
                </Col>
                <Col className={styles.fontS28} span={8}>
                  是否除锈：{orderInfo?.AntiCorrosive === 1 ? '是' : '否'}
                </Col>
                <Col className={styles.fontS28} span={8}>
                  是否防腐：{orderInfo?.RustRemoval === 1 ? '是' : '否'}
                </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);