feat: 工单显示图片且支持滑动查看

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

@@ -324,6 +324,38 @@ function TaskDetail(props: IPropsType) {
             </Row>
           )}
 
+          {mandateDetail?.Files && (
+            <Row className={styles.infoRow}>
+              <Col className={styles.fontS24} span={4}>
+                截图
+              </Col>
+              <Col className={styles.fontS24}>
+                <ReactZmage
+                  controller={{
+                    // 关闭按钮
+                    close: true,
+                    // 缩放按钮
+                    zoom: false,
+                    // 下载按钮
+                    download: false,
+                    // 翻页按钮
+                    flip: true,
+                    // 多页指示
+                    pagination: true,
+                  }}
+                  backdrop="rgba(255,255,255,0.5)"
+                  style={{ width: '350px' }}
+                  src={mandateDetail?.Files[0].url}
+                  set={mandateDetail?.Files.map((item) => {
+                    return {
+                      src: item.url,
+                    };
+                  })}
+                />
+              </Col>
+            </Row>
+          )}
+
           <Row>
             <Col className={styles.fontS24} span={4}>
               任务内容

src/pages/TaskManage/Detail/TaskList/TaskList.tsx

@@ -166,14 +166,15 @@ const TaskList: React.FC<IPropsType> = (props) => {
     getList(params);
   };
 
-  const loadMoreMandate = !isLoadAll && !loadData ? (
-    <div
-      ref={bottomAreaOfList}
-      style={{
-        height: '1px',
-      }}
-    />
-  ) : null;
+  const loadMoreMandate =
+    !isLoadAll && !loadData ? (
+      <div
+        ref={bottomAreaOfList}
+        style={{
+          height: '1px',
+        }}
+      />
+    ) : null;
 
   const goTaskDetail = (mandate: IMandateType) => {
     navigate(
@@ -181,12 +182,16 @@ const TaskList: React.FC<IPropsType> = (props) => {
     );
   };
 
-  const goTaskOrder = (orderID: number, orderType: number | undefined) => {
+  const goTaskOrder = (
+    orderID: number,
+    orderType: number | undefined,
+    mandateClass: number,
+  ) => {
     if (orderType === undefined) {
       return;
     }
     navigate(
-      `/task-manage/list/order-detail?project_id=${project_id}&order_id=${orderID}&order_type=${orderType}`,
+      `/task-manage/list/order-detail?project_id=${project_id}&order_id=${orderID}&order_type=${orderType}&mandate_class=${mandateClass}`,
     );
   };
 
@@ -250,7 +255,11 @@ const TaskList: React.FC<IPropsType> = (props) => {
                 className={styles.rightButton}
                 style={{ color: '#5697e4' }}
                 onClick={() => {
-                  goTaskOrder(order.Id, order.RecordType?.value);
+                  goTaskOrder(
+                    order.Id,
+                    order.RecordType?.value,
+                    item.MandateClass,
+                  );
                 }}
               >
                 查看工单

src/pages/TaskManage/Detail/TaskList/taskList.types.ts

@@ -47,6 +47,7 @@ export interface IMandateDetailType {
   OperationPeople: number;
   ExtendId: number;
   img?: string;
+  Files?: any[];
 }
 
 export interface IUserType {

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

@@ -14,6 +14,7 @@ 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 {
@@ -113,10 +114,14 @@ const TaskOrder: React.FC<IPropsType> = (props) => {
     console.log(content, title);
     console.log(Object.values(content));
     const result = [];
-    result.push(<Row className={styles.fontS28}>{title}</Row>);
+    result.push(
+      <Row className={[styles.fontS28, styles.rowMargin].join(' ')}>
+        {title}
+      </Row>,
+    );
     Object.values(content).forEach((item: any) => {
       result.push(
-        <Row className={styles.fontS28}>
+        <Row className={[styles.fontS28, styles.rowMargin].join(' ')}>
           {item['item_alias'] +
             ' 现有数值：' +
             item['old_value'] +
@@ -175,6 +180,11 @@ const TaskOrder: React.FC<IPropsType> = (props) => {
     }
   }, []);
 
+  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>
@@ -230,6 +240,35 @@ const TaskOrder: React.FC<IPropsType> = (props) => {
                 {orderInfo?.Reason}
               </Col>
             </Row>
+            {image?.length > 0 && (
+              <Row>
+                <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: '400px' }}
+                    src={image[0].url}
+                    set={image.map((item: any) => {
+                      return {
+                        src: item.url,
+                      };
+                    })}
+                  />
+                </Col>
+              </Row>
+            )}
           </div>
         </div>
         {order_type === 3 && (