UPDATE:样式修改

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

@@ -0,0 +1,67 @@
+import { Table, Tag, Row,Col } from 'antd';
+import React, { useEffect } from 'react';
+import { connect } from 'umi';
+import styles from './index.less';
+
+const BugGuideTree = (props) => {
+  const { pathInfo, recommendPath, bugRecommendList } = props;
+
+  useEffect(() => {
+    bugRecommendList.map((item)=>{
+      item['key'] = item.id;
+    })
+  },[]);
+
+  const columns = [
+    {
+      title: '标题',
+      dataIndex: 'title',
+      key: 'title',
+      width: 150,
+    },
+    {
+      title: '分类',
+      dataIndex: 'bug_category',
+      width: 150,
+      key: 'bug_category',
+      render: bug_category => {
+        return (
+          <Tag color='geekblue'>
+            {bug_category}
+          </Tag>
+        );
+      },
+
+    },
+    // {
+    //   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>
+    //     );
+    //   },
+    // },
+  ];
+
+  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>
+    </Row>
+  );
+};
+
+export default connect(({ editReport }) => ({
+  pathInfo: editReport.pathInfo,
+  recommendPath: editReport.recommendPath,
+  bugRecommendList: editReport.bugRecommendList,
+}))(BugGuideTree);

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

@@ -0,0 +1,6 @@
+#myTable{
+  .myTableItemImg{
+    width:15%;
+    height: 100%;
+  }
+}

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 } from 'antd';
+import { Form, Row, Col, Card, Modal, Input, Select, Upload, Button, message, Tag ,Badge} from 'antd';
 import { connect } from 'umi';
 import styles from './index.less';
 import {
@@ -14,6 +14,8 @@ import * as echarts from 'echarts';
 import { recurrent, severity, bug_categories } from './const';
 import { timeToString } from '../../utils';
 
+import BugGuideTree from '../BugGuideTree';
+
 const formItemLayout = {
   labelCol: {
     span: 8,
@@ -361,9 +363,14 @@ const Step2 = (props) => {
       },
     });
     setTaskRecommendModal(true);
-    initEcharts();
   };
 
+  // useEffect(() => {
+  //   if(showTaskRecommendModal){
+  //     // initEcharts();
+  //   }
+  // }, [showTaskRecommendModal])
+
   const handleSelectPage1 = (val) => {
     let item = categories.find(x => x.item === val);
     setPage2List(item.children);
@@ -390,18 +397,23 @@ const Step2 = (props) => {
         type: 'editReport/getTestCaseList',
         payload: { report_id: reportCommonInfo.id },
       }).then((res) => {
-        currentTestCaseRef.current = res;
-        // setCurrActiveTestCase(res);
+        if(res&&res.length){
+          currentTestCaseRef.current = res[0];
+          dispatch({
+            type: 'editReport/getCaseBugList',
+            payload: currentTestCaseRef.current.id,
+          });
+        }
       });
       dispatch({
         type: 'editReport/getCategories',
-        payload: { examId: 1945 },
+        payload: { examId: 1718 },
       });
     });
   }, [dispatch, reportCommonInfo.id]);
 
   return (
-    <div>
+    <div id="main">
       <Row gutter={10}>
         <Col span={23}>
           <Form
@@ -466,7 +478,7 @@ const Step2 = (props) => {
 
 
               <div className={styles.testCaseList}>
-                {testCaseList && testCaseList.map((item) => {
+                { testCaseList&&testCaseList.length ? testCaseList.map((item) => {
                   return (
                     <div
                       className={`${styles.testCaseItem} ${currentTestCaseRef.current.id === item.id ? styles.activeCase : ''}`}
@@ -475,34 +487,43 @@ const Step2 = (props) => {
                         handleClickTestCase(item);
                       }}>
                       <Row gutter={10}>
-                        <Col span={21}><p>{item.name}</p></Col>
+                        <Col span={6}>
+                          <Badge color="#2db7f5" text={(item.id).substring((item.id.length) - 6)} />
+                        </Col>
+                        <Col span={15}>
+                          <span >{item.name}</span>
+                        </Col>
                         <Col span={3}>
                           <EditOutlined className={styles.editTestBug}
                                         onClick={() => handleEditTestCase(item)} />
                         </Col>
                       </Row>
                     </div>);
-                })}
+                }) : <div>快来创建你的第一个测试用例吧~</div>}
               </div>
             </Col>
 
-            <Col span={16} style={{ paddingLeft: 20 }}>
-              <Row gutter={10} style={{ marginBottom: 10 }}>
-                <Col span={20}><h3>缺陷列表</h3></Col>
-                <Col span={2}>
-                  <Button size="small" type="primary" onClick={() => handleClickAddBug()}>
+            <Col span={16} >
+              <div gutter={10} className={styles.testBugTitle}>
+                <h3>缺陷列表</h3>
+                <div>
+                  <Button size="small" type="primary"
+                          disabled={JSON.stringify(currentTestCaseRef.current) === "{}"}
+                          onClick={() => handleClickAddBug()}>
                     <PlusOutlined className={styles.addIcon} />
                     缺陷
                   </Button>
-                </Col>
-                <Col span={2}>
-                  <Button size="small" className={styles.recommendBtn}
+
+                  <Button size="small" type="primary"
+                          className={styles.recommendBtn}
+                          disabled={JSON.stringify(currentTestCaseRef.current) === "{}"}
                           onClick={() => handleClickRecommendBtn()}>
                     <ForkOutlined className={styles.addIcon} />
                     推荐
                   </Button>
-                </Col>
-              </Row>
+                </div>
+
+              </div>
               <div className={styles.testBugList}>
                 {caseBugList&&caseBugList.length ? caseBugList.map((item) => {
                   return (
@@ -539,7 +560,6 @@ const Step2 = (props) => {
                 }) : <div>当前用例暂无提交记录，快去创建第一个BUG吧~</div>}
               </div>
             </Col>
-
           </Row>
         </div>
       </Card>
@@ -790,10 +810,13 @@ const Step2 = (props) => {
       {/*    <div id="forceChart"></div>*/}
       {/*  </div>*/}
       {/*</Modal>*/}
-      <Modal title="任务推荐" visible={showTaskRecommendModal} onOk={() => setTaskRecommendModal(false)}
-             onCancel={() => setTaskRecommendModal(false)} className="addModal">
+      <Modal title="任务推荐" visible={showTaskRecommendModal} width={1000}
+             onOk={() => setTaskRecommendModal(false)}
+             onCancel={() => setTaskRecommendModal(false)}
+             className="addModal">
         <div>
-          <div id="myChart" ref={chartRef}></div>
+          <BugGuideTree />
+
         </div>
       </Modal>
     </div>

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

@@ -49,7 +49,13 @@
   color: #1890ff;
 }
 .testCaseTitle{
-  margin-right: 30px;
+  margin-right: 20px;
+  margin-bottom: 10px;
+  display:flex;
+  justify-content: space-between;
+}
+.testBugTitle{
+  margin-left: 10px;
   margin-bottom: 10px;
   display:flex;
   justify-content: space-between;
@@ -57,7 +63,7 @@
 .testCaseList {
   width:100%;
   height: 500px;
-  padding-right: 30px;
+  padding-right: 20px;
   border-right: 1px solid #eee;
   .activeCase {
     color:black;
@@ -90,14 +96,16 @@
 }
 .recommendBtn{
   background-color:#67c23a;
-  border: none;
+  border: 1px solid #67c23a;
   color: white;
+  margin-left: 15px;
   &:hover{
     background-color: #8dd06b;
     color: white;
   }
 }
 .testBugList {
+  padding-left: 10px;
   .testBugItem {
     padding:10px;
     font-size: 16px;

src/pages/edit/model.js

@@ -32,7 +32,8 @@ const Model = {
     caseBugList: [],
     categories: [],
     pathInfo:[],
-    recommendPath:[]
+    recommendPath:[],
+    bugRecommendList:[]
   },
   effects: {
     * submitStepForm({ payload }, { call, put }) {