ADD:增加图片廊展示和截图预览

src/pages/edit/components/Step2/index.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Form, Row, Col, Card, Modal, Input, Select, Upload, Button, message, Tag, Badge } from 'antd';
+import { Form, Row, Col, Card, Modal, Input, Select, Upload, Button, message, Tag, Badge, Image } from 'antd';
 import { connect } from 'umi';
 import styles from './index.less';
 import {
@@ -256,6 +256,26 @@ const Step2 = (props) => {
     setFileList(fileList);
   };
 
+  const handleChangeImgToLeft = (item) => {
+    item.left--;
+    item.right--;
+    item['imgArr'] = item['originArr'].slice(item['left'], item['right']);
+    let newList = [...bugList];
+    let index = newList.findIndex(i => i.id === item.id);
+    newList.splice(index, 1, item);
+    setBugList(newList);
+  };
+
+  const handleChangeImgToRight = (item) => {
+    item.left++;
+    item.right++;
+    item['imgArr'] = item['originArr'].slice(item['left'], item['right']);
+    let newList = [...bugList];
+    let index = newList.findIndex(i => i.id === item.id);
+    newList.splice(index, 1, item);
+    setBugList(newList);
+  };
+
   useEffect(() => {
     //判断是否已经有报告
     dispatch({
@@ -285,23 +305,23 @@ const Step2 = (props) => {
     });
   }, [dispatch, reportCommonInfo.id]);
 
-  useEffect(()=>{
-    let bugs = caseBugList.map(item=>item.detail);
-    bugs.map(item=>{
-      let arr = item.img_url ? item.img_url.split(',') : [];
-      if(arr.length >= 3){
+  useEffect(() => {
+    let bugs = caseBugList.map(item => item.detail);
+    bugs.map(item => {
+      item['originArr'] = item.img_url ? item.img_url.split(',') : [];
+      if (item['originArr'].length >= 3) {
         //通过更改左右的标记值来更改显示的图片
-        item['imgArr'] = arr.splice(0,3);
         item['left'] = 0;
-        item['right'] = 2;
-      }else if(arr.length > 0){
-        item['imgArr'] = arr;
+        item['right'] = 3;
+        item['imgArr'] = item['originArr'].slice(item['left'], item['right']);
+      } else if (item['originArr'].length > 0 && item['originArr'].length < 3) {
+        item['imgArr'] = item['originArr'];
         item['left'] = 0;
-        item['right'] = arr.length-1;
+        item['right'] = item['originArr'].length;
       }
-    })
+    });
     setBugList(bugs);
-  },[caseBugList])
+  }, [caseBugList]);
 
   return (
     <div id="main">
@@ -443,14 +463,22 @@ const Step2 = (props) => {
                         </Col>
                         {
                           item.img_url ? (
-                            <Col span={12} className={styles.bugImgList}>
-                              <LeftOutlined />
-                              {item.imgArr.map(img => {
-                                return <img src={img} alt='bug_img' key={img} />;
-                              })}
-                              <RightOutlined />
-                            </Col>)
-                          : null}
+                              <Col span={12} className={styles.bugImgList}>
+                                {item.left > 0 ? <LeftOutlined
+                                  onClick={() => {
+                                    handleChangeImgToLeft(item);
+                                  }} /> : null}
+
+                                {item.imgArr.map(img => {
+                                  return <Image src={img} key={img} />;
+                                })}
+
+                                {item.right < (item.originArr.length - 1) ? <RightOutlined onClick={() => {
+                                  handleChangeImgToRight(item);
+                                }} /> : null}
+
+                              </Col>)
+                            : null}
                       </Row>
 
                     </div>

src/pages/edit/components/Step2/index.less

@@ -139,11 +139,16 @@
       }
     }
     .bugImgList {
+      display: flex;
       img {
         width: 100px;
         height: 100px;
         margin:5px 10px;
       }
+      span {
+        display: inline-block;
+        margin: 50px 0;
+      }
     }
   }