|
|
@@ -14,9 +14,10 @@ import { Col, Row } from 'antd';
|
|
|
import dayjs from 'dayjs';
|
|
|
import { DefaultOptionType } from 'rc-select/es/Select';
|
|
|
import React, { useEffect, useState } from 'react';
|
|
|
+import 'react-photo-view/dist/react-photo-view.css';
|
|
|
import styles from './taskOrder.less';
|
|
|
|
|
|
-import ReactZmage from 'react-zmage';
|
|
|
+import { PhotoProvider, PhotoView } from 'react-photo-view';
|
|
|
|
|
|
interface IPropsType {
|
|
|
userList: IUserType[];
|
|
|
@@ -229,6 +230,28 @@ const TaskOrder: React.FC<IPropsType> = (props) => {
|
|
|
// '[{"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"}]',
|
|
|
// );
|
|
|
|
|
|
+ const renderImg = () => {
|
|
|
+ return (
|
|
|
+ <PhotoProvider>
|
|
|
+ <Col className={styles.fontS28} span={18}>
|
|
|
+ {orderInfo?.MandateImages?.map((photo) => (
|
|
|
+ <PhotoView src={photo.src}>
|
|
|
+ <img
|
|
|
+ style={{
|
|
|
+ maxWidth: `${Math.floor(
|
|
|
+ 100 / (orderInfo?.MandateImages?.length || 1),
|
|
|
+ )}%`,
|
|
|
+ }}
|
|
|
+ src={photo.src}
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </PhotoView>
|
|
|
+ ))}
|
|
|
+ </Col>
|
|
|
+ </PhotoProvider>
|
|
|
+ );
|
|
|
+ };
|
|
|
+
|
|
|
return (
|
|
|
<PageContent closeable={false}>
|
|
|
<PageTitle returnable>工单详情</PageTitle>
|
|
|
@@ -287,34 +310,7 @@ const TaskOrder: React.FC<IPropsType> = (props) => {
|
|
|
{orderInfo?.MandateImages?.length > 0 && (
|
|
|
<Row className={styles.rowMarginTop}>
|
|
|
<Col className={styles.fontS28}>任务图片：</Col>
|
|
|
- <Col className={styles.fontS28} span={18}>
|
|
|
- {orderInfo?.MandateImages?.length > 0 &&
|
|
|
- orderInfo?.MandateImages?.map((item, index) => (
|
|
|
- <ReactZmage
|
|
|
- controller={{
|
|
|
- // 关闭按钮
|
|
|
- close: true,
|
|
|
- // 缩放按钮
|
|
|
- zoom: false,
|
|
|
- // 下载按钮
|
|
|
- download: false,
|
|
|
- // 翻页按钮
|
|
|
- flip: true,
|
|
|
- // 多页指示
|
|
|
- pagination: true,
|
|
|
- }}
|
|
|
- backdrop="rgba(255,255,255,0.5)"
|
|
|
- style={{
|
|
|
- maxWidth: `${Math.floor(
|
|
|
- 100 / orderInfo?.MandateImages?.length,
|
|
|
- )}%`,
|
|
|
- }}
|
|
|
- src={item.src}
|
|
|
- set={orderInfo?.MandateImages}
|
|
|
- defaultPage={index}
|
|
|
- />
|
|
|
- ))}
|
|
|
- </Col>
|
|
|
+ {renderImg()}
|
|
|
</Row>
|
|
|
)}
|
|
|
</div>
|
