ADD:样式修改

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

@@ -9,10 +9,12 @@ import {
   UploadOutlined,
   EditOutlined,
   EyeOutlined,
+  LeftOutlined,
+  RightOutlined,
 } from '@ant-design/icons';
 import * as echarts from 'echarts';
 import { recurrent, severity, bug_categories } from './const';
-import { timeToString,getBase64 } from '../../utils';
+import { timeToString, getBase64 } from '../../utils';
 
 import BugGuideTree from '../BugGuideTree';
 
@@ -59,16 +61,17 @@ const Step2 = (props) => {
   // const [currActiveTestCase, setCurrActiveTestCase] = useState({});
 
   //上传图片廊需要的字段
-  const [fileList,setFileList] = useState([]);
-  const [previewTitle,setPreviewTitle] = useState('');
-  const [previewImage,setPreviewImage] = useState('');
-  const [previewVisible,setPreviewVisible] = useState(false);
+  const [fileList, setFileList] = useState([]);
+  const [previewTitle, setPreviewTitle] = useState('');
+  const [previewImage, setPreviewImage] = useState('');
+  const [previewVisible, setPreviewVisible] = useState(false);
 
   const [page2List, setPage2List] = useState([]);
   const [page3List, setPage3List] = useState([]);
+  const [bugList, setBugList] = useState([]);
 
   const handleEditReportInfo = () => {
-    editReportForm.validateFields().then((res)=> {
+    editReportForm.validateFields().then((res) => {
       let formData = new FormData();
       formData.append('name', res.name);
       formData.append('report_id', reportCommonInfo.id);
@@ -79,10 +82,10 @@ const Step2 = (props) => {
       formData.append('device_os', res.device_os);
       dispatch({
         type: 'editReport/updateReportCommonDetail',
-        payload: { formData }
-      })
-    })
-    setEditReportModal(false)
+        payload: { formData },
+      });
+    });
+    setEditReportModal(false);
   };
 
   const handleAddOrEditTestCase = () => {
@@ -116,13 +119,13 @@ const Step2 = (props) => {
             formData,
             report_id: reportCommonInfo.id,
           },
-        }).then(({ res, testCaseList}) => {
+        }).then(({ res, testCaseList }) => {
           if (res && res.id) {
             message.success('添加成功！');
             //添加成功后要把currCase指向新的
-            const currCase = testCaseList.filter(item=>
-              item.id === res.id
-            )
+            const currCase = testCaseList.filter(item =>
+              item.id === res.id,
+            );
             handleClickTestCase(currCase[0]);
           }
         });
@@ -155,12 +158,12 @@ const Step2 = (props) => {
       formData.append('case_take_id', '1718-1718');
       formData.append('worker_id', '2');
       formData.append('page', `${res.page1}-${res.page2}-${res.page3}`);
-      if(fileList.length){
+      if (fileList.length) {
         let str = '';
-        fileList.map(item=>{
-          str += (item.response + ',')
-        })
-        str = str.substring(0,str.length-1);
+        fileList.map(item => {
+          str += (item.response + ',');
+        });
+        str = str.substring(0, str.length - 1);
         formData.append('img_url', str);
       }
       //新建bug
@@ -244,7 +247,7 @@ const Step2 = (props) => {
     }
     setPreviewImage(file.url || file.preview);
     setPreviewVisible(true);
-    setPreviewTitle(file.name || file.url.substring(file.url.lastIndexOf('/') + 1))
+    setPreviewTitle(file.name || file.url.substring(file.url.lastIndexOf('/') + 1));
   };
 
   const handleCancel = () => setPreviewVisible(false);
@@ -262,8 +265,6 @@ const Step2 = (props) => {
         worker_id: '2',
       },
     }).then((res) => {
-      // console.log(res)
-      // console.log(reportCommonInfo)
       //有报告，获取对应信息。没有就直接转去了第一步
       dispatch({
         type: 'editReport/getTestCaseList',
@@ -284,9 +285,27 @@ 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){
+        //通过更改左右的标记值来更改显示的图片
+        item['imgArr'] = arr.splice(0,3);
+        item['left'] = 0;
+        item['right'] = 2;
+      }else if(arr.length > 0){
+        item['imgArr'] = arr;
+        item['left'] = 0;
+        item['right'] = arr.length-1;
+      }
+    })
+    setBugList(bugs);
+  },[caseBugList])
+
   return (
     <div id="main">
-      <Row gutter={10}>
+      <Row gutter={10} className={styles.reportInfoContainer}>
         <Col span={23}>
           <Form
             {...formItemLayout}
@@ -399,35 +418,39 @@ const Step2 = (props) => {
 
               </div>
               <div className={styles.testBugList}>
-                {caseBugList && caseBugList.length ? caseBugList.map((item) => {
+                {bugList && bugList.length ? bugList.map((item) => {
                   return (
-                    <div className={styles.testBugItem} key={item.detail.id}>
+                    <div className={styles.testBugItem} key={item.id}>
                       <Row gutter={10}>
                         <Col span={12}>
                           <div>
                             <div className={styles.testBugItemTitleBlock}>
                               <span className={styles.testBugItemTitle}>标题：</span>
-                              <span className={styles.testBugItemTitleDetail}>{item.detail.title}</span>
-                              <Tag color="cyan">{recurrent[item.detail.recurrent -1]}</Tag>
-                              <Tag color="red">{severity[item.detail.severity -1]}</Tag>
-                              <Tag color="geekblue">{item.detail.bug_category}</Tag>
+                              <span className={styles.testBugItemTitleDetail}>{item.title}</span>
+                              <Tag color="cyan">{recurrent[item.recurrent - 1]}</Tag>
+                              <Tag color="red">{severity[item.severity - 1]}</Tag>
+                              <Tag color="geekblue">{item.bug_category}</Tag>
                             </div>
                             <div className={styles.testBugItemTitleBlock}>
                               <span className={styles.testBugItemTitle}>路径：</span>
-                              {item.detail.bug_page}
+                              {item.bug_page}
                             </div>
                             <div className={styles.testBugItemTitleBlock}>
                               <span className={styles.testBugItemTitle}>描述：</span>
-                              {item.detail.description}
+                              {item.description}
                             </div>
                           </div>
                         </Col>
-                        {item.detail.img_url ?
-                          <Col span={12} className={styles.bugImgList}>
-                            {item.detail.img_url.split(',').map(img=>{
-                              return <img src={img} alt='bug_img' key={img}/>
-                            })}
-                          </Col> : null}
+                        {
+                          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}
                       </Row>
 
                     </div>
@@ -680,8 +703,8 @@ const Step2 = (props) => {
               action='/api/upload/image'
               data={file => ({ // data里存放的是接口的请求参数
                 file,
-                caseId:currentTestCaseRef.current.id,
-                work_id:'2'
+                caseId: currentTestCaseRef.current.id,
+                work_id: '2',
               })}
               listType="picture-card"
               fileList={fileList}
@@ -694,7 +717,7 @@ const Step2 = (props) => {
               visible={previewVisible}
               title={previewTitle}
               footer={null}
-              onCancel={()=>handleCancel()}
+              onCancel={() => handleCancel()}
             >
               <img alt="example" style={{ width: '100%' }} src={previewImage} />
             </Modal>

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

@@ -41,6 +41,17 @@
     line-height: 22px;
   }
 }
+.reportInfoContainer {
+  border: 1px solid #eee;
+  padding: 0 !important;
+  margin: 14px 0 !important;
+
+  :global {
+    .ant-form-item {
+      margin-bottom: 0;
+    }
+  }
+}
 .editReportInfoIcon{
   cursor: pointer;
   margin-top: 20px;

src/pages/edit/model.js

@@ -141,7 +141,6 @@ const Model = {
       const testCaseList = yield select(state => {
         return state.editReport.testCaseList;
       })
-      console.log(testCaseList);
       return {res,testCaseList};
     },
     //todo:更新用例