UPDATE:添加fork功能的依赖接口

src/pages/bugs/components/BugList/index.jsx

@@ -0,0 +1,41 @@
+import { Button, Result, Descriptions, Statistic } from 'antd';
+import React, { useEffect, useState } from 'react';
+import { connect } from 'umi';
+import styles from './index.less';
+
+const BugList = (props) => {
+  const { data, dispatch,bugLists,commonId} = props;
+  const [start,setStart] = useState(0);
+  const [page,setPage] = useState('null');
+
+  useEffect(()=>{
+    dispatch({
+      type:'allBugs/getTreeList',
+      payload:{
+        case_take_id:`${commonId.caseId}-${commonId.examId}`,
+        start,
+        count:"10",
+        page
+      }
+    })
+  })
+
+  return (
+    <div>
+      <div className={styles.bugList}>
+        {
+
+        }
+        <div className={`${styles.bugListItem} ${styles.bugListItemActive}`}>
+          <span className={styles.bugListItemNum}>Bug1:</span>邮箱校验规则不严谨
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default connect(({ allBugs , editReport}) => ({
+  data: allBugs.step,
+  reportCommonInfo: editReport.reportCommonInfo,
+  commonId: editReport.commonId,
+}))(BugList);

src/pages/bugs/components/BugList/index.less

@@ -0,0 +1,24 @@
+@import '~antd/es/style/themes/default.less';
+
+.bugList {
+  .bugListItem {
+    padding: 10px 20px;
+    border: 1px dashed #1890ff;
+    border-bottom: none;
+    border-radius: 7px;
+    max-width: 350px;
+    .bugListItemNum {
+      font-weight: bold;
+    }
+  }
+  .bugListItem:last-child{
+    border-bottom: 1px dashed #1890ff;
+  }
+  .bugListItem:hover {
+    background-color: #e6f7ff;
+  }
+  .bugListItemActive {
+    background-color: #e6f7ff;
+  }
+
+}

src/pages/bugs/components/Step1/index.jsx

@@ -1,79 +0,0 @@
-import React from 'react';
-import { Form, Button, Divider, Input, Select } from 'antd';
-import { connect } from 'umi';
-import styles from './index.less';
-
-const { Option } = Select;
-const formItemLayout = {
-  labelCol: {
-    span: 5,
-  },
-  wrapperCol: {
-    span: 19,
-  },
-};
-const tailLayout = {
-  wrapperCol: { offset: 8, span: 16 },
-};
-
-const Step1 = (props) => {
-  const { dispatch, data } = props;
-  const [form] = Form.useForm();
-
-  if (!data) {
-    return null;
-  }
-
-  const { validateFields } = form;
-
-  const onValidateForm = async () => {
-    const values = await validateFields();
-    if (dispatch) {
-      dispatch({
-        type: 'editReport/saveStepFormData',
-        payload: values,
-      });
-      dispatch({
-        type: 'editReport/saveCurrentStep',
-        payload: 'confirm',
-      });
-    }
-  };
-
-  return (
-    <>
-      <Form
-        {...formItemLayout}
-        form={form}
-        layout="horizontal"
-        className={styles.stepForm}
-        initialValues={data}
-      >
-        <Form.Item label="报告名称" name="reportName"rules={[{ required: true, message: '请输入报告名称'}]}>
-          <Input placeholder="请输入报告名称"  />
-        </Form.Item>
-        <Form.Item label="设备品牌" name="deviceBrand" rules={[{ required: true, message: '请输入设备品牌'}]}>
-          <Input placeholder="请输入设备品牌" />
-        </Form.Item>
-        <Form.Item label="操作系统" name="os" rules={[{ required: true, message: '请输入操作系统'}]}>
-          <Select  placeholder="请选择操作系统">
-            <Select.Option value="Windows">Windows</Select.Option>
-            <Select.Option value="Linux">Linux</Select.Option>
-            <Select.Option value="MacOS">MacOS</Select.Option>
-          </Select>
-        </Form.Item>
-        <Form.Item {...tailLayout}>
-          <Button colSpan={12} type="primary" onClick={onValidateForm} style={{float:'right'}}>
-            下一步
-          </Button>
-        </Form.Item>
-      </Form>
-
-    </>
-  )
-    ;
-};
-
-export default connect(({ editReport }) => ({
-  data: editReport.step,
-}))(Step1);

src/pages/bugs/components/Step1/index.less

@@ -1,78 +0,0 @@
-@import '~antd/es/style/themes/default.less';
-
-.stepForm {
-  max-width: 500px;
-  margin: 40px auto 0;
-}
-
-.stepFormText {
-  margin-bottom: 24px;
-  :global {
-    .ant-form-item-label,
-    .ant-form-item-control {
-      line-height: 22px;
-    }
-  }
-}
-
-.result {
-  max-width: 560px;
-  margin: 0 auto;
-  padding: 24px 0 8px;
-}
-
-.desc {
-  padding: 0 56px;
-  color: @text-color-secondary;
-  h3 {
-    margin: 0 0 12px 0;
-    color: @text-color-secondary;
-    font-size: 16px;
-    line-height: 32px;
-  }
-  h4 {
-    margin: 0 0 4px 0;
-    color: @text-color-secondary;
-    font-size: 14px;
-    line-height: 22px;
-  }
-  p {
-    margin-top: 0;
-    margin-bottom: 12px;
-    line-height: 22px;
-  }
-}
-
-@media screen and (max-width: @screen-md) {
-  .desc {
-    padding: 0;
-  }
-}
-
-.information {
-  line-height: 22px;
-  :global {
-    .ant-row:not(:last-child) {
-      margin-bottom: 24px;
-    }
-  }
-  .label {
-    padding-right: 8px;
-    color: @heading-color;
-    text-align: right;
-    @media screen and (max-width: @screen-sm) {
-      text-align: left;
-    }
-  }
-}
-
-.money {
-  font-weight: 500;
-  font-size: 20px;
-  font-family: 'Helvetica Neue', sans-serif;
-  line-height: 14px;
-}
-
-.uppercase {
-  font-size: 12px;
-}

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

@@ -1,384 +0,0 @@
-import React, { useState } from 'react';
-import { Form, Row, Col, Card, Modal, Input, Select, Upload, Button } from 'antd';
-import { connect } from 'umi';
-import styles from './index.less';
-import {
-  ForkOutlined,
-  PlusOutlined,
-  ExclamationCircleFilled,
-  UploadOutlined,
-  EditOutlined,
-} from '@ant-design/icons';
-
-const formItemLayout = {
-  labelCol: {
-    span: 5,
-  },
-  wrapperCol: {
-    span: 19,
-  },
-};
-
-const Step2 = (props) => {
-  const [form] = Form.useForm();
-  const { data, dispatch, submitting } = props;
-  const [showTaskRecommendModal, setTaskRecommendModal] = useState(false);
-  const [showAddTestCaseModal, setAddTestCaseModal] = useState(false);
-  const [showAddBugModal, setAddTestBugModal] = useState(false);
-
-  if (!data) {
-    return null;
-  }
-
-  const { validateFields, getFieldsValue } = form;
-
-  const handleOk = (type) => {
-    setAddTestCaseModal(false);
-    // type === 'case' ? setAddTestCaseModal(false) : setAddTestBugModal(false) ;
-  };
-
-  const handleCancel = (type) => {
-    // type === 'case' ? setAddTestCaseModal(false) : setAddTestBugModal(false) ;
-  };
-
-  const testApi = ()=>{
-
-  }
-
-  const onPrev = () => {
-    if (dispatch) {
-      const values = getFieldsValue();
-      dispatch({
-        type: 'editReport/saveStepFormData',
-        payload: { ...data, ...values },
-      });
-      dispatch({
-        type: 'editReport/saveCurrentStep',
-        payload: 'info',
-      });
-    }
-  };
-
-  const onValidateForm = async () => {
-    const values = await validateFields();
-
-    if (dispatch) {
-      dispatch({
-        type: 'formAndstepForm/submitStepForm',
-        payload: { ...data, ...values },
-      });
-    }
-  };
-
-  const { payAccount, receiverAccount, receiverName, amount } = data;
-
-  return (
-    <div>
-      <Form
-        {...formItemLayout}
-        form={form}
-        layout="horizontal"
-        className={styles.stepForm}
-        hideRequiredMark
-        initialValues={data}
-      >
-        <Row gutter={10}>
-          <Col span={8}>
-            <Form.Item label="创建日期" rules={[{ required: true, message: '请输入报告名称' }]}>
-              {'2021.4.12'}
-            </Form.Item>
-          </Col>
-          <Col span={8}>
-            <Form.Item label="报告名称" rules={[{ required: true, message: '请输入报告名称' }]}>
-              {'测试报告名称'}
-            </Form.Item>
-          </Col>
-        </Row>
-        <Row>
-          <Col span={8}>
-            <Form.Item label="设备名称" required>
-              {'PC'}
-            </Form.Item>
-          </Col>
-          <Col span={8}>
-            <Form.Item label="设备品牌" required>
-              {'DELL'}
-            </Form.Item>
-          </Col>
-          <Col span={8}>
-            <Form.Item label="操作系统" required>
-              {'Windows'}
-            </Form.Item>
-          </Col>
-        </Row>
-      </Form>
-      <Card>
-        <div className={styles.reportContainer}>
-          <Row gutter={10}>
-            <Col span={8}>
-              <div>
-                <Row gutter={10} style={{ marginBottom: 10 }}>
-                  <Col span={20}><h3>测试用例列表</h3></Col>
-                  <Col span={4}>
-                    <Button size="small" onClick={() => setAddTestCaseModal(true)} >
-                      <PlusOutlined className={styles.addIcon}/>
-                      用例
-                    </Button>
-                  </Col>
-                </Row>
-              </div>
-
-              <div className={styles.testCaseList}>
-                <div className={styles.testCaseItem}>
-                  <Row gutter={10}>
-                    <Col span={21}><p>case1 case1</p></Col>
-                    <Col span={3}>
-                      <EditOutlined className={styles.testCaseEditIcon} />
-                    </Col>
-                  </Row>
-                </div>
-                <div className={styles.testCaseItem}>
-                  <Row gutter={10}>
-                    <Col span={21}><p>case2 case2</p></Col>
-                    <Col span={3}><EditOutlined /></Col>
-                  </Row>
-                </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" onClick={() => setAddTestBugModal(true)} >
-                    <PlusOutlined className={styles.addIcon} />
-                    缺陷
-                  </Button>
-                </Col>
-                <Col span={2}>
-                  <Button size="small" onClick={() => setTaskRecommendModal(true)}>
-                    <ForkOutlined className={styles.addIcon}  />
-                    推荐
-                  </Button>
-                </Col>
-              </Row>
-              <div className={styles.testBugList}>
-                <div className={styles.testBugItem}>
-                  <Row gutter={10}>
-                    <Col span={20}>
-                      <Form
-                        {...formItemLayout}
-                        form={form}
-                        layout="horizontal"
-                        className={styles.stepForm}
-                        hideRequiredMark
-                        initialValues={data}
-                      >
-                        <Form.Item label="Bug题目">{'不支持修改邮箱类型'}</Form.Item>
-                        <Form.Item label="复现程度">{'必现'}</Form.Item>
-                        <Form.Item label="严重程度">{'一般'}</Form.Item>
-                        <Form.Item label="缺陷分类">{'用户体验'}</Form.Item>
-                      </Form>
-                    </Col>
-                    <Col span={4}>
-                      <Button size='small' style={{marginTop:10}}>查看详情</Button>
-                    </Col>
-                  </Row>
-
-                </div>
-              </div>
-            </Col>
-
-          </Row>
-        </div>
-      </Card>
-      <Modal title="添加测试用例" visible={showAddTestCaseModal} onOk={() => setAddTestCaseModal(false)}
-             onCancel={() => setAddTestCaseModal(false)} className="addModal">
-        <ExclamationCircleFilled className={styles.addModalInfo} />为了评分准确,请勿提交重复测试用例
-        <Form
-          {...formItemLayout}
-          form={form}
-          layout="horizontal"
-          className={styles.stepForm}
-          hideRequiredMark
-          initialValues={data}
-        >
-          <Form.Item
-            label="用例名称"
-            name="caseName"
-            rules={[
-              {
-                required: true,
-                message: '请输入用例名称！',
-              },
-            ]}
-          >
-            <Input />
-          </Form.Item>
-          <Form.Item
-            label="前置条件"
-            name="precondition"
-            rules={[
-              {
-                required: true,
-                message: '请输入前置条件！',
-              },
-            ]}
-          >
-            <Input.TextArea />
-          </Form.Item>
-          <Form.Item
-            label="测试步骤"
-            name="step"
-            rules={[
-              {
-                required: true,
-                message: '请输入测试步骤！',
-              },
-            ]}
-          >
-            <Input.TextArea />
-          </Form.Item>
-          <Form.Item
-            label="预期结果"
-            name="result"
-            rules={[
-              {
-                required: true,
-                message: '请输入预期结果！',
-              },
-            ]}
-          >
-            <Input.TextArea />
-          </Form.Item>
-        </Form>
-      </Modal>
-      <Modal title="添加用例缺陷" visible={showAddBugModal} onOk={() => setAddTestBugModal(false)}
-             onCancel={() => setAddTestBugModal(false)} className="addModal">
-        <ExclamationCircleFilled className={styles.addModalInfo} />为了评分准确,请勿提交重复Bug
-        <Form
-          labelCol={{ span: 4 }}
-          layout="horizontal"
-        >
-          <Form.Item
-            label="测试题目"
-            name="testName"
-            rules={[
-              {
-                required: true,
-                message: '请输入测试题目！',
-              },
-            ]}
-          >
-            <Input />
-          </Form.Item>
-          <Form.Item
-            label="前置条件"
-            name="precondition"
-            rules={[
-              {
-                required: true,
-                message: '请输入前置条件！',
-              },
-            ]}
-          >
-            <Input.TextArea />
-          </Form.Item>
-          <Form.Item
-            label="三级页面"
-            name="pages"
-            rules={[
-              {
-                required: true,
-                message: '请确保输入了三级页面',
-              },
-            ]}
-          >
-            <Row gutter={5}>
-              <Col span={8}>
-                <Select>
-                  <Select.Option value="demo">Demo1</Select.Option>
-                </Select>
-              </Col>
-              <Col span={8}>
-                <Select>
-                  <Select.Option value="demo">Demo2</Select.Option>
-                </Select>
-              </Col>
-              <Col span={8}>
-                <Select>
-                  <Select.Option value="demo">Demo3</Select.Option>
-                </Select>
-              </Col>
-            </Row>
-          </Form.Item>
-          <Form.Item
-            label="漏洞分类"
-            name="bugType"
-            rules={[
-              {
-                required: true,
-                message: '请输入漏洞分类！',
-              },
-            ]}
-          >
-            <Select>
-              <Select.Option value="demo">Demo</Select.Option>
-            </Select>
-          </Form.Item>
-          <Form.Item
-            label="严重等级"
-            name="service"
-            rules={[
-              {
-                required: true,
-                message: '请输入严重等级！',
-              },
-            ]}
-          >
-            <Select>
-              <Select.Option value="demo">Demo</Select.Option>
-            </Select>
-          </Form.Item>
-          <Form.Item
-            label="复现程度"
-            name="testName"
-            rules={[
-              {
-                required: true,
-                message: '请输入测试题目！',
-              },
-            ]}
-          >
-            <Select>
-              <Select.Option value="demo">Demo</Select.Option>
-            </Select>
-          </Form.Item>
-          <Form.Item
-            label="上传截图"
-            name="testName"
-          >
-            <Upload
-              action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
-              listType="picture"
-            >
-              <Button icon={<UploadOutlined />}>Upload</Button>
-            </Upload>
-          </Form.Item>
-        </Form>
-      </Modal>
-      <Modal title="任务推荐" visible={showTaskRecommendModal} onOk={() => setTaskRecommendModal(false)}
-             onCancel={() => setTaskRecommendModal(false)} className="addModal">
-        <div>
-          <div id="forceChart" ></div>
-        </div>
-      </Modal>
-    </div>
-  );
-};
-
-export default connect(({ editReport, loading }) => ({
-  submitting: loading.effects['editReport/submitStepForm'],
-  data: editReport.step,
-}))(Step2);

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

@@ -1,124 +0,0 @@
-@import '~antd/es/style/themes/default.less';
-
-.stepForm {
-  margin: 10px;
-}
-
-.stepFormText {
-  margin-bottom: 24px;
-  :global {
-    .ant-form-item-label,
-    .ant-form-item-control {
-      line-height: 22px;
-    }
-  }
-}
-
-.result {
-  max-width: 560px;
-  margin: 0 auto;
-  padding: 24px 0 8px;
-}
-
-.desc {
-  padding: 0 56px;
-  color: @text-color-secondary;
-  h3 {
-    margin: 0 0 12px 0;
-    color: @text-color-secondary;
-    font-size: 16px;
-    line-height: 32px;
-  }
-  h4 {
-    margin: 0 0 4px 0;
-    color: @text-color-secondary;
-    font-size: 14px;
-    line-height: 22px;
-  }
-  p {
-    margin-top: 0;
-    margin-bottom: 12px;
-    line-height: 22px;
-  }
-}
-.testCaseList {
-  width:100%;
-  height: 500px;
-  padding-right: 30px;
-  border-right: 1px solid #eee;
-  .testCaseItem {
-    padding:10px;
-    border-left: 5px solid #efefef;
-    box-shadow: 0 0 2px 2px #efefef;
-    margin-bottom:20px;
-    p {
-      line-height: 28px;
-      height: 28px;
-      margin: 0;
-    }
-    p:hover {
-      color: #1890ff;
-    }
-    .testCaseEditIcon:hover{
-      color: #1890ff;
-    }
-  }
-
-}
-.testBugList {
-
-  .testBugItem {
-    padding:10px;
-    box-shadow: 0 0 5px #aaa;;
-    margin-bottom:20px;
-  }
-  :global {
-    .ant-form-item {
-      margin-bottom: 0;
-    }
-    .ant-form-item-label > label {
-      font-weight: bold;
-    }
-  }
-}
-.reportContainer {
-  height: 500px;
-}
-.addModalInfo {
-  color: #1890ff;
-  margin-top: -20px;
-}
-
-@media screen and (max-width: @screen-md) {
-  .desc {
-    padding: 0;
-  }
-}
-
-.information {
-  line-height: 22px;
-  :global {
-    .ant-row:not(:last-child) {
-      margin-bottom: 24px;
-    }
-  }
-  .label {
-    padding-right: 8px;
-    color: @heading-color;
-    text-align: right;
-    @media screen and (max-width: @screen-sm) {
-      text-align: left;
-    }
-  }
-}
-
-.money {
-  font-weight: 500;
-  font-size: 20px;
-  font-family: 'Helvetica Neue', sans-serif;
-  line-height: 14px;
-}
-
-.uppercase {
-  font-size: 12px;
-}

src/pages/bugs/components/Step3/index.jsx

@@ -1,59 +0,0 @@
-import { Button, Result, Descriptions, Statistic } from 'antd';
-import React from 'react';
-import { connect } from 'umi';
-import styles from './index.less';
-
-const Step3 = (props) => {
-  const { data, dispatch } = props;
-
-  if (!data) {
-    return null;
-  }
-
-  const { payAccount, receiverAccount, receiverName, amount } = data;
-
-  const onFinish = () => {
-    if (dispatch) {
-      dispatch({
-        type: 'editReport/saveCurrentStep',
-        payload: 'info',
-      });
-    }
-  };
-
-  const information = (
-    <div className={styles.information}>
-      <Descriptions column={1}>
-        <Descriptions.Item label="付款账户"> {payAccount}</Descriptions.Item>
-        <Descriptions.Item label="收款账户"> {receiverAccount}</Descriptions.Item>
-        <Descriptions.Item label="收款人姓名"> {receiverName}</Descriptions.Item>
-        <Descriptions.Item label="转账金额">
-          <Statistic value={amount} suffix="元" />
-        </Descriptions.Item>
-      </Descriptions>
-    </div>
-  );
-  const extra = (
-    <>
-      <Button type="primary" onClick={onFinish}>
-        再转一笔
-      </Button>
-      <Button>查看账单</Button>
-    </>
-  );
-  return (
-    <Result
-      status="success"
-      title="操作成功"
-      subTitle="预计两小时内到账"
-      extra={extra}
-      className={styles.result}
-    >
-      {information}
-    </Result>
-  );
-};
-
-export default connect(({ editReport }) => ({
-  data: editReport.step,
-}))(Step3);

src/pages/bugs/components/Step3/index.less

@@ -1,71 +0,0 @@
-@import '~antd/es/style/themes/default.less';
-
-.stepForm {
-  max-width: 500px;
-  margin: 40px auto 0;
-}
-
-.stepFormText {
-  margin-bottom: 24px;
-  :global {
-    .ant-form-item-label,
-    .ant-form-item-control {
-      line-height: 22px;
-    }
-  }
-}
-
-.result {
-  max-width: 560px;
-  margin: 0 auto;
-  padding: 24px 0 8px;
-}
-
-.desc {
-  padding: 0 56px;
-  color: @text-color-secondary;
-  h3 {
-    margin: 0 0 12px 0;
-    color: @text-color-secondary;
-    font-size: 16px;
-    line-height: 32px;
-  }
-  h4 {
-    margin: 0 0 4px 0;
-    color: @text-color-secondary;
-    font-size: 14px;
-    line-height: 22px;
-  }
-  p {
-    margin-top: 0;
-    margin-bottom: 12px;
-    line-height: 22px;
-  }
-}
-
-@media screen and (max-width: @screen-md) {
-  .desc {
-    padding: 0;
-  }
-}
-
-.information {
-  line-height: 22px;
-  :global {
-    .ant-row:not(:last-child) {
-      margin-bottom: 24px;
-    }
-  }
-  .label {
-    padding-right: 8px;
-    color: @heading-color;
-    text-align: right;
-    @media screen and (max-width: @screen-sm) {
-      text-align: left;
-    }
-  }
-}
-
-.uppercase {
-  font-size: 12px;
-}

src/pages/bugs/index.jsx

@@ -1,7 +1,11 @@
 import React, { useState, useEffect } from 'react';
-import { Cascader, Radio ,Card ,Row,Col} from 'antd';
+import { Cascader, Radio ,Card ,Row,Col,Select} from 'antd';
 import { PageContainer } from '@ant-design/pro-layout';
 import { connect } from 'umi';
+const { Option } = Select;
+
+import BugList from './components/BugList';
+
 import {
   ApartmentOutlined,
   MoreOutlined
@@ -45,18 +49,46 @@ const options2 = [
       },
     ],
   },
-];
-const BugsList = ({ current }) => {
-  const [value, setValue] = useState('tree');
+]
+
+const AllBugs = (props) => {
+  const {dispatch,commonId,reportCommonInfo,reportReview} = props;
+  const [status, setStatus] = useState('tree');
 
   const onChange = e => {
     console.log('radio checked', e.target.value);
-    setValue(e.target.value);
+    setStatus(e.target.value);
   };
-  const onChange2 = (value) => {
-    console.log(value);
+
+  const handlePage1Change = val => {
+    console.log(val)
   }
 
+  const getReportReview = ()=>{
+    dispatch({
+      type: 'allBugs/getReportReview',
+      payload: {
+        report_id:reportCommonInfo.id,
+        case_take_id:`${commonId.caseId}-${commonId.examId}`
+      }
+    });
+  }
+
+  useEffect(()=>{
+    //从edit页面进来的时候就已经在redux中缓存过了，没有的话就需要重新自己获取
+    if(reportCommonInfo&&reportCommonInfo.id){
+      dispatch({
+        type: 'editReport/getReportInfo',
+        payload: {
+          case_take_id: `${commonId.caseId}-${commonId.examId}`,
+          worker_id: commonId.userId,
+        },
+      }).then(getReportReview);
+    }else{
+      getReportReview();
+    }
+
+  },[dispatch])
 
   return (
       <Card bordered={false}>
@@ -65,37 +97,28 @@ const BugsList = ({ current }) => {
             <Col span={16}>
               <Radio.Group
                 onChange={onChange}
-                value={value}
+                value={status}
                 style={{marginRight:40}}
               >
                 <Radio.Button value="tree"><ApartmentOutlined /> 树状</Radio.Button>
                 <Radio.Button value="single"><MoreOutlined /> 单一</Radio.Button>
               </Radio.Group>
 
+              {/*三级菜单*/}
+              <Select defaultValue="lucy" style={{ width: 120 }} onChange={handlePage1Change}>
+                <Option value="jack">Jack</Option>
+              </Select>
 
-              <Cascader
-                options={options2}
-                expandTrigger="hover"
-                onChange={onChange2}
-                placeholder="请选择三级菜单"
-              />
             </Col>
             <Col span={8}>
-              <span className={styles.bugInfoCount}>已点赞：{'10'}</span>
-              <span className={styles.bugInfoCount}>已点踩：{'10'}</span>
-              <span className={styles.bugInfoCount}>bug总数：{'10'}</span>
+              <span className={styles.bugInfoCount}>已点赞：{reportReview.thumsup}</span>
+              <span className={styles.bugInfoCount}>已点踩：{reportReview.diss}</span>
+              <span className={styles.bugInfoCount}>bug总数：{reportReview.bug}</span>
             </Col>
           </Row>
           <Row>
             <Col span={8}>
-              <div className={styles.bugList}>
-                <div className={`${styles.bugListItem} ${styles.bugListItemActive}`}>
-                  <span className={styles.bugListItemNum}>Bug1:</span>邮箱校验规则不严谨
-                </div>
-                <div className={styles.bugListItem}>
-                  <span className={styles.bugListItemNum}>Bug2:</span>级联选择缺少默认值
-                </div>
-              </div>
+              <BugList/>
             </Col>
             <Col span={8}>
               这里是树状图
@@ -116,6 +139,9 @@ const BugsList = ({ current }) => {
   );
 };
 
-export default connect(({ bugsList }) => ({
-  current: bugsList.current,
-}))(BugsList);
+export default connect(({ allBugs,editReport }) => ({
+  commonId: editReport.commonId,
+  reportCommonInfo: editReport.reportCommonInfo,
+  allBugList: allBugs.allBugList,
+  reportReview: allBugs.reportReview,
+}))(AllBugs);

src/pages/bugs/model.js

@@ -1,29 +1,43 @@
-import { fakeSubmitForm } from './service';
+import {
+  getReportReview,
+  getTreeList
+} from './service';
+
 const Model = {
-  namespace: 'bugsList',
+  namespace: 'allBugs',
   state: {
-    current: 'info',
+    allBugList: [],
+    reportReview:{},
+    bugTreeList:[]
   },
   effects: {
-    *submitStepForm({ payload }, { call, put }) {
-      yield call(fakeSubmitForm, payload);
+    //todo:获取bug总数，点赞、点踩总数
+    * getReportReview({ payload }, { call, put }) {
+      const {report_id,case_take_id} = payload;
+      let res = yield call(getReportReview, report_id,case_take_id);
       yield put({
-        type: 'saveStepFormData',
-        payload,
+        type: 'saveReportReview',
+        payload: res,
       });
+    },
+
+    //todo:获取bug树状列表
+    * getTreeList({ payload }, { call, put }) {
+      const {case_take_id,start,count,page} = payload;
+      let res = yield call(getTreeList, case_take_id,start,count,page);
+      console.log(res);
       yield put({
-        type: 'saveCurrentStep',
-        payload: 'result',
+        type: 'saveBugTreeList',
+        payload: res,
       });
     },
   },
   reducers: {
-    saveCurrentStep(state, { payload }) {
-      return { ...state, current: payload };
+    saveReportReview(state, { payload }) {
+      return { ...state, reportReview: payload };
     },
-
-    saveStepFormData(state, { payload }) {
-      return { ...state, step: { ...state.step, ...payload } };
+    saveBugTreeList(state, { payload }) {
+      return { ...state, bugTreeList: payload };
     },
   },
 };

src/pages/bugs/service.js

@@ -1,13 +1,25 @@
 import request from 'umi-request';
-export async function fakeSubmitForm(params) {
-  return request('/api/forms', {
-    method: 'POST',
-    data: params,
+
+//todo:获取bug总数，点赞、点踩总数
+export async function getReportReview(report_id,case_take_id) {
+  return request('/api/report/reportReview', {
+    method: 'get',
+    params: {
+      case_take_id,
+      report_id
+    }
   });
 }
-export async function submitForm(params) {
-  return request('/api/forms', {
-    method: 'POST',
-    data: params,
+
+//todo:获取树状列表
+export async function getTreeList(case_take_id,start,count,page) {
+  return request('/api/history/getTreesStu', {
+    method: 'get',
+    params: {
+      case_take_id,
+      start,
+      count,
+      page
+    }
   });
 }

src/pages/bugs/style.less

@@ -9,28 +9,7 @@
   margin-right: 20px;
 }
 
-.bugList {
-  .bugListItem {
-    padding: 10px 20px;
-    border: 1px dashed #1890ff;
-    border-bottom: none;
-    border-radius: 7px;
-    max-width: 350px;
-    .bugListItemNum {
-      font-weight: bold;
-    }
-  }
-  .bugListItem:last-child{
-    border-bottom: 1px dashed #1890ff;
-  }
-  .bugListItem:hover {
-    background-color: #e6f7ff;
-  }
-  .bugListItemActive {
-    background-color: #e6f7ff;
-  }
 
-}
 .bugDetail {
   border: 1px dashed #1890ff;
   border-radius: 8px;

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

@@ -17,8 +17,6 @@ const tailLayout = {
 };
 
 const Step1 = (props) => {
-  console.log('step1')
-
   const { dispatch, data, osType ,commonId} = props;
   const [form] = Form.useForm();
   if (!data) {
@@ -26,7 +24,6 @@ const Step1 = (props) => {
   }
 
   useEffect(() => {
-    console.log(commonId.examId)
     dispatch({
       type: 'editReport/getOsType',
       payload: { examId: commonId.examId },

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

@@ -274,7 +274,18 @@ const Step2 = (props) => {
       type: 'editReport/getBugDetail',
       payload: { id: value},
     }).then(res=>{
-      setCurrBugDetail(res.detail)
+      setCurrBugDetail(res.detail);
+      const {bug_page, bug_category, severity, recurrent}  = res.detail;
+      const pages = bug_page.split("-");
+      const page1 = pages[0];
+      const page2 = pages[1];
+      const page3 = pages[2];
+      dispatch({
+        type: 'editReport/forkReport',
+        payload: {
+          page1, page2, page3, bug_category, severity, recurrent
+        },
+      })
     })
   }
 
@@ -302,7 +313,6 @@ const Step2 = (props) => {
     handleInitThreePages();
   },[currBugDetail,page2List])
 
-
   useEffect(() => {
       //能到第二步，说明是有报告信息的
       //有报告，获取对应信息。没有就直接转去了第一步
@@ -471,6 +481,10 @@ const Step2 = (props) => {
                               <Tag color="geekblue">{item.bug_category}</Tag>
                             </div>
                             <div className={styles.testBugItemTitleBlock}>
+                              <span className={styles.testBugItemTitle}>标识：</span>
+                              {item.id}
+                            </div>
+                            <div className={styles.testBugItemTitleBlock}>
                               <span className={styles.testBugItemTitle}>路径：</span>
                               {item.bug_page}
                             </div>
@@ -583,13 +597,14 @@ const Step2 = (props) => {
       <Modal visible={showAddBugModal} width={720}
              forceRender={true}
              title={[
-               <span className={styles.modalTitle}>添加用例缺陷</span>,
+               <span className={styles.modalTitle} key="title">添加用例缺陷</span>,
                <Search
                  placeholder="输入Bug标识进行fork"
                  allowClear
                  enterButton="fork"
                  onSearch={searchBugToFork}
                  className={styles.forkBtn}
+                 key="search"
                />
              ]}
              footer={[
@@ -604,7 +619,6 @@ const Step2 = (props) => {
              className={styles.bugForm}
       >
         <ExclamationCircleFilled className={styles.addModalInfo} />为了评分准确,请勿提交重复Bug
-        {currBugDetail&&currBugDetail.id}
         <Form
           form={addBugForm}
           {...modalFormItemLayout}

src/pages/edit/index.jsx

@@ -26,7 +26,6 @@ const getCurrentStepAndComponent = (current) => {
 };
 
 const EditReport = ( props ) => {
-  console.log('index')
   const { dispatch,current,commonId,reportCommonInfo } = props;
 
   const [stepComponent, setStepComponent] = useState(null);

src/pages/edit/model.js

@@ -19,7 +19,8 @@ import {
   cancelBadReport,
   recordAction,
   uploadImage,
-  getIdByToken
+  getIdByToken,
+  forkReport
 } from './service';
 
 const Model = {
@@ -44,13 +45,13 @@ const Model = {
     commonId:{
       result:"success",
       roleId:1,
-      caseId:"3656",
-      examId:"3656",
+      caseId:"1718",
+      examId:"1718",
       beginTime:"1621945823000",
       endTime:"1624291200000",
       userId:"99222",
       case_take_id:"3656_3656",
-    }
+    },
   },
   effects: {
     * submitStepForm({ payload }, { call, put }) {
@@ -74,7 +75,7 @@ const Model = {
         payload: osType,
       });
     },
-    //
+    //todo:根据id获取token
     * getIdByToken({ payload }, { call, put }) {
       const { token } = payload;
       let res = yield call(getIdByToken, token)
@@ -273,6 +274,11 @@ const Model = {
       return res;
     },
 
+    //todo:fork report
+    * forkReport({ payload }, { call, put }) {
+      const { page1, page2, page3, bug_category, severity, recurrent } = payload;
+      yield call(forkReport, page1, page2, page3, bug_category, severity, recurrent);
+    },
   },
   reducers: {
     saveCurrentStep(state, { payload }) {

src/pages/edit/service.js

@@ -12,8 +12,8 @@ export async function getIdByToken(token) {
   return request('/api/analyze/tokenToDetail', {
     method: 'get',
     params: {
-      token
-    }
+      token,
+    },
   });
 }
 
@@ -34,7 +34,7 @@ export async function getExamInfo(id) {
 }
 
 //todo:获取报告信息
-export async function getReportInfo(case_take_id,worker_id) {
+export async function getReportInfo(case_take_id, worker_id) {
   return request(`/api/extra/findByWorker?case_take_id=${case_take_id}&worker_id=${worker_id}`, {
     method: 'get',
   });
@@ -71,7 +71,7 @@ export async function getTestCaseList(report_id) {
 export async function updateTestCaseList(data) {
   return request('/api/extra/updateTestCase', {
     method: 'post',
-    data
+    data,
   });
 }
 
@@ -91,35 +91,35 @@ export async function getBugInfo(bugId) {
 }
 
 //todo:返回路径信息
-export async function getPathInfo(case_take_id,report_id) {
+export async function getPathInfo(case_take_id, report_id) {
   return request('/api/analyze/path', {
     method: 'get',
     params: {
       case_take_id,
-      report_id
-    }
+      report_id,
+    },
   });
 }
 
 //todo:返回推荐路径
-export async function getRecommendPath(case_take_id,report_id) {
+export async function getRecommendPath(case_take_id, report_id) {
   return request('/api/report/pageRec', {
     method: 'get',
     params: {
       case_take_id,
-      report_id
-    }
+      report_id,
+    },
   });
 }
 
 //todo:获取bug推荐列表
-export async function getRecommendList(case_take_id,report_id) {
+export async function getRecommendList(case_take_id, report_id) {
   return request('/api/report/bugRec', {
     method: 'get',
     params: {
       case_take_id,
-      report_id
-    }
+      report_id,
+    },
   });
 }
 
@@ -132,58 +132,58 @@ export async function createCaseBug(data) {
 }
 
 //todo:给别人的报告点赞
-export async function goodReport(id,report_id) {
+export async function goodReport(id, report_id) {
   return request('/api/upload/good', {
     method: 'get',
-    params:{
+    params: {
       id,
-      report_id
-    }
+      report_id,
+    },
   });
 }
 
 //todo:取消报告点赞
-export async function cancelGoodReport(id,report_id) {
+export async function cancelGoodReport(id, report_id) {
   return request('/api/upload/cancelGood', {
     method: 'get',
-    params:{
+    params: {
       id,
-      report_id
-    }
+      report_id,
+    },
   });
 }
 
 //todo:报告点踩
-export async function badReport(id,report_id) {
+export async function badReport(id, report_id) {
   return request('/api/upload/bad', {
     method: 'get',
-    params:{
+    params: {
       id,
-      report_id
-    }
+      report_id,
+    },
   });
 }
 
 //todo:取消报告点踩
-export async function cancelBadReport(id,report_id) {
+export async function cancelBadReport(id, report_id) {
   return request('/api/upload/cancelBad', {
     method: 'get',
-    params:{
+    params: {
       id,
-      report_id
-    }
+      report_id,
+    },
   });
 }
 
 //todo:记录用户行为
-export async function recordAction(user_id,report_id,action) {
+export async function recordAction(user_id, report_id, action) {
   return request('/api/report/record', {
     method: 'get',
-    params:{
+    params: {
       user_id,
       report_id,
-      action
-    }
+      action,
+    },
   });
 }
 
@@ -195,4 +195,19 @@ export async function uploadImage(data) {
   });
 }
 
+//todo:fork
+export async function forkReport(page1, page2, page3, bug_category, severity, recurrent) {
+  return request('/api/rec/fork', {
+    method: 'get',
+    params: {
+      page1,
+      page2,
+      page3,
+      bug_category,
+      severity,
+      recurrent,
+    },
+  });
+}
+