ADD:查看推荐列表与详情

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

@@ -1,17 +1,18 @@
-import { Table, Tag, Row,Col } from 'antd';
-import React, { useEffect } from 'react';
+import { Table, Tag, Row, Col, Image,Button } from 'antd';
+import React, { useEffect, useState } from 'react';
 import { connect } from 'umi';
 import styles from './index.less';
+import { timeToString } from '../../utils';
+import {
+  RollbackOutlined,
+} from '@ant-design/icons';
+import { recurrent, severity, bug_categories } from '../Step2/const';
 
 const BugGuideTree = (props) => {
-  const { pathInfo, recommendPath, bugRecommendList } = props;
-
-  useEffect(() => {
-    bugRecommendList.map((item)=>{
-      item['key'] = item.id;
-    })
-  },[]);
+  const { dispatch, pathInfo, recommendPath, bugRecommendList } = props;
 
+  const [showTable, setShowTable] = useState(true);
+  const [currDetail, setCurrDetail] = useState({});
   const columns = [
     {
       title: '标题',
@@ -33,29 +34,102 @@ const BugGuideTree = (props) => {
       },
 
     },
-    // {
-    //   title: '截图',
-    //   dataIndex: 'img_url',
-    //   key: 'img_url',
-    //   width: 150,
-    //   render: (img_url) => {
-    //     return (
-    //       img_url ? <img className={styles.myTableItemImg} src={img_url} alt="bug_img"/> : <span>暂未上传</span>
-    //     );
-    //   },
-    // },
+    {
+      title: '截图',
+      dataIndex: 'img_url',
+      key: 'img_url',
+      width: 150,
+      render: (img_url) => {
+        return (
+          img_url ?
+            <img className={styles.myTableItemImg} src={img_url} alt="bug_img" />
+            : <span>暂未上传</span>
+        );
+      },
+    },
   ];
 
+  const handleClickTableRow = (item) => {
+    dispatch({
+      type: 'editReport/getBugDetail',
+      payload: {
+        id: item.id,
+      },
+    }).then(res => {
+      res && setCurrDetail(res.detail);
+    });
+  };
+
+  const handleClickBack = ()=>{
+    setCurrDetail({});
+  }
+
+  useEffect(() => {
+    if (JSON.stringify(currDetail) !== '{}') {
+      setShowTable(false);
+    }else{
+      console.log(currDetail)
+      setShowTable(true)
+    }
+  }, [currDetail]);
+
   return (
     <Row gutter={10}>
       <Col span={12}>
         <div id="myChart"></div>
       </Col>
-      <Col span={12}>
-        <div id="myTable">
-          <Table columns={columns} dataSource={bugRecommendList} />
-        </div>
-      </Col>
+      {
+        showTable ? <Col span={12}>
+            <div className={styles.myTable}>
+              <Table columns={columns}
+                     rowKey={record => record.id}
+                     dataSource={bugRecommendList}
+                     onRow={record => {
+                       return {
+                         onClick: event => {
+                           handleClickTableRow(record);
+                         }, // 点击行
+                       };
+                     }} />
+            </div>
+          </Col> :
+          <Col span={12}>
+            <div className={styles.myTableItemDetail}>
+              <div className={styles.detailItem}>
+                <span className={styles.detailLabel}>Bug 标识：</span>{currDetail.id}
+                <span className={styles.backIcon}>
+                  <Button><RollbackOutlined onClick={()=>{handleClickBack()}}/></Button>
+                </span>
+              </div>
+              <div className={styles.detailItem}><span className={styles.detailLabel}>Bug 题目：</span>{currDetail.title}
+              </div>
+              <div className={styles.detailItem}><span
+                className={styles.detailLabel}>Bug 描述：</span>{currDetail.description}</div>
+              <div className={styles.detailItem}><span
+                className={styles.detailLabel}>创建时间：</span>{timeToString(currDetail.create_time_millis)}</div>
+              <div className={styles.detailItem}><span className={styles.detailLabel}>页面路径：</span>{currDetail.bug_page}
+              </div>
+              <div className={styles.detailItem}><span
+                className={styles.detailLabel}>漏洞分类：</span>{recurrent[currDetail.recurrent]}</div>
+              <div className={styles.detailItem}><span
+                className={styles.detailLabel}>严重等级：</span>{severity[currDetail.severity]}</div>
+              <div className={styles.detailItem}><span
+                className={styles.detailLabel}>复现程度：</span>{currDetail.bug_category}</div>
+              <div className={`${styles.detailItem} ${styles.detailItemOperator}`}><span
+                className={styles.detailLabel}>具体操作：</span>
+                <Image
+                  width={120}
+                  src={currDetail.img_url}
+                  className={styles.detailItemImg}
+                />
+
+              </div>
+            </div>
+
+          </Col>
+      }
+
+
     </Row>
   );
 };

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

@@ -1,6 +1,40 @@
-#myTable{
+.myTable {
   .myTableItemImg{
-    width:15%;
-    height: 100%;
+    width:auto;
+    height: 45px;
+  }
+}
+.myTableItemDetail {
+  .detailItem{
+    height: 50px;
+    line-height: 50px;
+    box-sizing: border-box;
+    padding: 0 20px;
+    border-bottom: 1px solid #eee;
+    font-size: 14px;
+    .detailLabel {
+      width: 120px;
+      line-height: 30px;
+      height: 30px;
+      display: inline-block;
+    }
+    .backIcon {
+      float: right;
+    }
+  }
+  .detailItemOperator {
+    border: none;
+    height: auto;
+    padding: 10px 20px;
+    display: flex;
+    .detailLabel {
+      line-height: 80px;
+      height: 80px;
+      display: table-cell;
+      vertical-align: center;
+    }
+    .detailItemImg {
+      display: inline-block;
+    }
   }
 }

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

@@ -49,7 +49,7 @@ const Step2 = (props) => {
     testCaseList, caseBugList, categories, pathInfo,
   } = props;
 
-  const [showTaskRecommendModal, setTaskRecommendModal] = useState(true);
+  const [showTaskRecommendModal, setTaskRecommendModal] = useState(false);
   const [showAddTestCaseModal, setAddTestCaseModal] = useState(false);
   const [showAddBugModal, setAddTestBugModal] = useState(false);
   const currentTestCaseRef = useRef({});

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

@@ -101,6 +101,7 @@
   margin-left: 15px;
   &:hover{
     background-color: #8dd06b;
+    border: 1px solid #67c23a;
     color: white;
   }
 }

src/pages/edit/model.js

@@ -142,7 +142,13 @@ const Model = {
       let bugIdList = yield call(getCaseBugList, payload);//bug id list
       yield put({ type: 'getBugInfo', payload: { bugIdList } });
     },
-    //todo:获取bug详情
+    //todo:根据bug id获取bug detail
+    * getBugDetail({ payload }, { call, put }) {
+      const {id} = payload;
+      let bugInfo = yield call(getBugInfo, id);//bug id list
+      return bugInfo;
+    },
+    //todo:根据bugIdList获取bug详情
     * getBugInfo({ payload }, { call, put }) {
       const { bugIdList } = payload;
       let newBugList = [];