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, OrderType } 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 ReactZmage from 'react-zmage';
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;
  MandateImages?: any[];
}

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 mandate_class = Number(queryParams.get('mandate_class'));

  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) || '-',
        MandateImages:
          temp?.mandate_images?.length > 0
            ? temp.mandate_images.map((item: any) => {
                console.log(item);
                if (item.type === 2) {
                  return {
                    src: item.val,
                  };
                }
                return {
                  src: `data:image/png;base64,${item.val}`,
                };
              })
            : [],
      };
      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) ||
          '-',
        MandateImages:
          temp?.mandate_images?.length > 0
            ? temp.mandate_images.map((item: any) => {
                console.log(item);
                if (item.type === 2) {
                  return {
                    src: item.val,
                  };
                }
                return {
                  src: `data:image/png;base64,${item.val}`,
                };
              })
            : [],
      };
      setOrderInfo(tempDetail);
    },
  });

  const renderReason = (detail: any) => {
    const title = detail.match(/^(.*?)(?=\{)/g)[0];
    const content = JSON.parse(detail.match(/\{.*\}/g)[0]);
    console.log(content, title);
    console.log(Object.values(content));
    const result = [];
    result.push(
      <Row className={[styles.fontS28, styles.rowMargin].join(' ')}>
        {title}
      </Row>,
    );
    Object.values(content).forEach((item: any) => {
      result.push(
        <Row className={[styles.fontS28, styles.rowMargin].join(' ')}>
          {item['item_alias'] +
            ' 现有数值：' +
            item['old_value'] +
            ' 建议调整数值' +
            item['new_value']}
        </Row>,
      );
    });
    return result;
  };

  // 根据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: mandate_class !== 2 ? temp.detail : renderReason(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) || '-',
        MandateImages:
          temp?.mandate_images?.length > 0
            ? temp.mandate_images.map((item: any) => {
                console.log(item);
                if (item.type === 2) {
                  return {
                    src: item.val,
                  };
                }
                return {
                  src: `data:image/png;base64,${item.val}`,
                };
              })
            : [],
      };
      setOrderInfo(tempDetail);
    },
  });

  useEffect(() => {
    if (userList.length === 0) {
      dispatch({
        type: 'taskUser/fetchUserList',
        payload: { project_id },
      });
    }
    switch (order_type) {
      // 工艺
      case 1:
      case 6:
        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;
    }
  }, []);

  const image = [];
  // JSON.parse(
  //   '[{"name":"1694762306412_Screenshot_20230815_180902_uni.UNI7E61B21.jpg","path":"work_order_files/1694762306412_Screenshot_20230815_180902_uni.UNI7E61B21.jpg","created_time":"2023-09-15 15:18:29","url":"https://water-service-test.oss-cn-hangzhou.aliyuncs.com/work_order_files/1694762306412_Screenshot_20230815_180902_uni.UNI7E61B21.jpg"},{"name":"1694762306230_Screenshot_20230815_180907_uni.UNI7E61B21.jpg","path":"work_order_files/1694762306230_Screenshot_20230815_180907_uni.UNI7E61B21.jpg","created_time":"2023-09-15 15:18:29","url":"https://water-service-test.oss-cn-hangzhou.aliyuncs.com/work_order_files/1694762306230_Screenshot_20230815_180907_uni.UNI7E61B21.jpg"}]',
  // );

  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*/}
                工单类型：
                {OrderType.find((item) => item.value === order_type)?.label ||
                  '-'}
              </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}
              </Col>
            </Row>
            {orderInfo?.MandateImages?.length > 0 && (
              <Row className={styles.rowMarginTop}>
                <Col className={styles.fontS28}>任务图片：</Col>
                <Col className={styles.fontS28} span={18}>
                  <ReactZmage
                    controller={{
                      // 关闭按钮
                      close: true,
                      // 缩放按钮
                      zoom: false,
                      // 下载按钮
                      download: false,
                      // 翻页按钮
                      flip: true,
                      // 多页指示
                      pagination: true,
                    }}
                    backdrop="rgba(255,255,255,0.5)"
                    style={{ width: '350px', height: '350px' }}
                    src={orderInfo?.MandateImages[0].src}
                    set={orderInfo?.MandateImages}
                  />
                </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);