ADD:完成测试用例的添加和编辑

src/layouts/BasicLayout.jsx

@@ -11,7 +11,7 @@ import { Result, Button } from 'antd';
 import Authorized from '@/utils/Authorized';
 import RightContent from '@/components/GlobalHeader/RightContent';
 import { getMatchMenu } from '@umijs/route-utils';
-import logo from '../assets/logo.svg';
+import logo from '../assets/logo.png';
 const noMatch = (
   <Result
     status={403}

src/layouts/UserLayout.jsx

@@ -2,7 +2,7 @@ import { DefaultFooter, getMenuData, getPageTitle } from '@ant-design/pro-layout
 import { Helmet, HelmetProvider } from 'react-helmet-async';
 import { Link, SelectLang, useIntl, connect, FormattedMessage } from 'umi';
 import React from 'react';
-import logo from '../assets/logo.svg';
+import logo from '../assets/logo.png';
 import styles from './UserLayout.less';
 
 const UserLayout = (props) => {

src/pages/edit/components/Step2/const.js

@@ -0,0 +1,4 @@
+export const recurrent = new Map([[0,''],[1,'其他'],[2,'无规律复现'],
+  [3,'小概率复现'],[4,'大概率复现'],[5,'必现']]);
+export const severity = new Map([[0,''],[1,'待定'],[2,'较轻'],
+  [3,'一般'],[4,'严重'],[5,'紧急']]);

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

@@ -11,6 +11,8 @@ import {
   EyeOutlined,
 } from '@ant-design/icons';
 
+import {recurrent,severity} from './const'
+
 const formItemLayout = {
   labelCol: {
     span: 5,
@@ -23,14 +25,17 @@ const formItemLayout = {
 const Step2 = (props) => {
   const [form] = Form.useForm();
   const [addCaseForm] = Form.useForm();
-  const { data, dispatch, submitting, reportCommonInfo, testCaseList } = props;
+  const { data, dispatch, reportCommonInfo, testCaseList ,caseBugList} = props;
   // console.log(reportCommonInfo,props)
   const [showTaskRecommendModal, setTaskRecommendModal] = useState(false);
   const [showAddTestCaseModal, setAddTestCaseModal] = useState(false);
   const [showAddBugModal, setAddTestBugModal] = useState(false);
-  const [currTestCase , setCurrTestCase] = useState({});
+
   const currentTestCaseRef = useRef({});
-  const [currTestBug , setCurrTestBug ] = useState({});
+
+  const [isAddCaseStatus , setIsAddCaseStatus ] = useState(true);
+  const [currActiveTestCase , setCurrActiveTestCase ] = useState({});
+
 
   if (!data) {
     return null;
@@ -38,7 +43,8 @@ const Step2 = (props) => {
 
   const { validateFields, getFieldsValue } = addCaseForm;
 
-  const handleAddTestCase = () => {
+  const handleAddOrEditTestCase = () => {
+
     addCaseForm.validateFields().then((res) => {
       let formData = new FormData();
       // formData.append("id", values.reportName);
@@ -47,22 +53,49 @@ const Step2 = (props) => {
       formData.append('front', res.front);
       formData.append('behind', res.behind);
       formData.append('description', res.description);
-      formData.append('if_execute', undefined);
-      formData.append('if_bug', undefined);
-      dispatch({
-        type: 'editReport/createTestCase',
-        payload: formData,
-      });
-      message.success('添加成功！');
-      dispatch({
-        type: 'editReport/getTestCaseList',
-        payload: reportCommonInfo.id,
-      });
+      if(!isAddCaseStatus){
+        //处理编辑用例
+        formData.append('id',currentTestCaseRef.current.id);
+        dispatch({
+          type: 'editReport/updateTestCase',
+          payload: {
+            formData,
+            report_id:reportCommonInfo.id
+          },
+        }).then((res)=>{
+          if(res&&res.status === 200){
+            message.success('修改成功！');
+          }
+        });
+      }else{
+        //处理添加用例
+        dispatch({
+          type: 'editReport/createTestCase',
+          payload: {
+            formData,
+            report_id:reportCommonInfo.id
+          },
+        }).then((res)=>{
+          if(res&&res.id){
+            message.success('添加成功！');
+          }
+        });
+      }
+
       setAddTestCaseModal(false);
     });
   };
 
+  const handleClickTestCase = (caseItem)=>{
+    setCurrActiveTestCase(caseItem)
+    dispatch({
+      type: 'editReport/getCaseBugList',
+      payload: caseItem.id,
+    });
+  }
+
   const handleEditTestCase = (item) => {
+    setIsAddCaseStatus(false);
     currentTestCaseRef.current = item;
     addCaseForm.setFieldsValue(currentTestCaseRef.current)
     setAddTestCaseModal(true);
@@ -74,39 +107,13 @@ const Step2 = (props) => {
     setAddTestCaseModal(true);
   }
 
-  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 },
-      });
-    }
-  };
 
   useEffect(() => {
     dispatch({
       type: 'editReport/getTestCaseList',
-      payload: reportCommonInfo.id,
+      payload: {report_id:reportCommonInfo.id},
     });
-  }, [dispatch]);
-
-  const { payAccount, receiverAccount, receiverName, amount } = data;
+  }, [dispatch,reportCommonInfo]);
 
   return (
     <div>
@@ -164,7 +171,11 @@ const Step2 = (props) => {
 
               <div className={styles.testCaseList}>
                 {testCaseList.length && testCaseList.map((item) => {
-                  return (<div className={styles.testCaseItem} key={item.id}>
+                  return (
+                    <div className={`${styles.testCaseItem} ${currActiveTestCase.id===item.id ? styles.activeCase :""}`}
+                         key={item.id}
+                         onClick={()=>{
+                           handleClickTestCase(item)}}>
                     <Row gutter={10}>
                       <Col span={21}><p>{item.name}</p></Col>
                       <Col span={3}>
@@ -194,41 +205,35 @@ const Step2 = (props) => {
                 </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 }}>
-                        <EyeOutlined />详情</Button>
-                    </Col>
-                  </Row>
-                </div>
+                {caseBugList.map((item)=>{
+                  return (<div className={styles.testBugItem} key={item.id}>
+                    <Row gutter={10}>
+                      <Col span={20}>
+                        <div><span className={styles.bugItemTitle}>Bug标题:</span>{item.detail.title}</div>
+                        <div><span className={styles.bugItemTitle}>复现程度:</span>{recurrent.get(item.detail.recurrent)}</div>
+                        <div><span className={styles.bugItemTitle}>严重程度:</span>{item.detail.severity}</div>
+                        <div><span className={styles.bugItemTitle}>缺陷分类:</span>{severity.get(item.detail.bug_category)}</div>
+                      </Col>
+                      <Col span={4}>
+                        <Button size='small' style={{ marginTop: 10 }}>
+                          <EyeOutlined />详情</Button>
+                      </Col>
+                    </Row>
+                  </div>)
+                })}
+
               </div>
             </Col>
 
           </Row>
         </div>
       </Card>
-      <Modal title="添加测试用例" width={720}
+      <Modal title={isAddCaseStatus ? '添加测试用例' : '编辑测试用例'} width={720}
              visible={showAddTestCaseModal}
              forceRender={true}
              className="addModal"
              footer={[
-               <Button key='submit' type="primary" htmlType="submit" onClick={handleAddTestCase}>添加</Button>,
+               <Button key='submit' type="primary" htmlType="submit" onClick={handleAddOrEditTestCase}>确定</Button>,
                <Button key='cancel' htmlType="button" style={{ marginLeft: '10px' }}
                        onClick={() => {
                          setAddTestCaseModal(false);
@@ -424,4 +429,5 @@ export default connect(({ editReport, loading }) => ({
   data: editReport.step,
   reportCommonInfo: editReport.reportCommonInfo,
   testCaseList: editReport.testCaseList,
+  caseBugList: editReport.caseBugList,
 }))(Step2);

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

@@ -46,11 +46,22 @@
   height: 500px;
   padding-right: 30px;
   border-right: 1px solid #eee;
+  .activeCase {
+    background-color: #88c8f3;
+    color:white;
+    border-left: 5px solid #015e9d;
+  }
+
   .testCaseItem {
     padding:10px;
     border-left: 5px solid #efefef;
     box-shadow: 0 0 5px #aaa;
     margin-bottom:20px;
+    .bugItemTitle {
+      font-size: 18px;
+      line-height: 26px;
+      font-weight: bold;
+    }
     .editTestBug{
       cursor: pointer;
     }
@@ -69,8 +80,8 @@
       color: #1890ff;
     }
   }
-
 }
+
 .testBugList {
   .testBugItem {
     padding:10px;

src/pages/edit/model.js

@@ -4,7 +4,9 @@ import {
   createReportCommon,
   createTestCase,
   getTestCaseList,
-  getTestBugList
+  getCaseBugList,
+  getBugInfo,
+  updateTestCaseList
 } from './service';
 
 const Model = {
@@ -19,8 +21,8 @@ const Model = {
       amount: '500',
     },
     reportCommonInfo: {},
-    testCaseList:[],
-    testBugList:[]
+    testCaseList: [],
+    caseBugList: [],
   },
   effects: {
     * submitStepForm({ payload }, { call, put }) {
@@ -44,14 +46,15 @@ const Model = {
         payload: osType,
       });
     },
-    * getTestCaseList({ payload },{call,put}){
-      const {reportId} = payload;
-      let res = yield call(getTestCaseList,reportId);
+    * getTestCaseList({ payload }, { call, put }) {
+      const { report_id } = payload;
+      let res = yield call(getTestCaseList, report_id);
       yield put({
         type: 'saveTestCaseList',
         payload: res.result,
       });
     },
+    //todo:保存报告基础信息
     * saveReportCommonDetail({ payload }, { call, put }) {
       let res = yield call(createReportCommon, payload);
       //res拿到报告id,组装生成report对象
@@ -68,15 +71,47 @@ const Model = {
         payload: 'detail',
       });
     },
+    //todo:创建新用例
     * createTestCase({ payload }, { call, put }) {
-      let res = yield call(createTestCase,payload);
-      console.log(res)
+      let { formData , report_id} = payload;
+      let res = yield call(createTestCase, formData);
+      yield put({
+        type: 'getTestCaseList',
+        payload: { report_id }
+      })
+      return res;
+    },
+    //todo:更新用例
+    * updateTestCase({ payload }, { call, put }) {
+      let { formData,report_id } = payload;
+      let res = yield call(updateTestCaseList, formData);
+      yield put({
+        type: 'getTestCaseList',
+        payload: { report_id }
+      })
+      return res;
     },
     //todo:获取bug列表
-    * getTestBugList({payload},{call,put}){
-      let res = yield call(getTestBugList,payload);
-
-    }
+    * getCaseBugList({ payload }, { call, put }) {
+      let bugIdList = yield call(getCaseBugList, payload);//bug id list
+      let newBugList = [];
+      for (const item of bugIdList) {
+        let p = yield put({ type: 'getBugInfo', payload: { item } });
+        p.then(res=>{
+          newBugList.push(res)
+        });
+      }
+      yield put({
+        type:'saveCaseBugList',
+        payload:newBugList
+      })
+    },
+    //todo:获取bug详情
+    * getBugInfo({ payload }, { call, put }) {
+      const {item} = payload;
+      let bugInfo = yield call(getBugInfo, item);
+      return bugInfo;
+    },
   },
   reducers: {
     saveCurrentStep(state, { payload }) {
@@ -91,12 +126,12 @@ const Model = {
     saveReportCommonInfo(state, { payload }) {
       return { ...state, reportCommonInfo: payload };
     },
-    saveTestCaseList(state,{payload}){
+    saveTestCaseList(state, { payload }) {
       return { ...state, testCaseList: payload };
     },
-    saveTestBugList(state,{payload}){
-      return { ...state, testBugList: payload };
-    }
+    saveCaseBugList(state, { payload }) {
+      return { ...state, caseBugList: payload };
+    },
   },
 };
 export default Model;

src/pages/edit/service.js

@@ -1,49 +1,67 @@
 import request from 'umi-request';
+
 export async function fakeSubmitForm(params) {
   return request('/api/forms', {
     method: 'POST',
     data: params,
   });
 }
+
 //todo:获取操作系统的类型
 export async function getOsType(id) {
   return request('/api/extra/getExam', {
     method: 'get',
-    params:{
-      id
-    }
+    params: {
+      id,
+    },
   });
 }
+
 //todo:点击下一步，提交测试报告的基础信息
-export async function createReportCommon(data){
-  return request('/api/extra/uploadReport',{
-    method:'post',
-    data
-  })
+export async function createReportCommon(data) {
+  return request('/api/extra/uploadReport', {
+    method: 'post',
+    data,
+  });
 }
+
 //todo:创建测试用例
-export async function createTestCase(data){
-  return request('/api/extra/uploadTestCase',{
-    method:'post',
-    data
-  })
+export async function createTestCase(data) {
+  return request('/api/extra/uploadTestCase', {
+    method: 'post',
+    data,
+  });
 }
+
 //todo:获取测试用例列表
 export async function getTestCaseList(report_id) {
   return request('/api/extra/getCaseList', {
     method: 'get',
-    params:{
-      report_id
-    }
+    params: {
+      report_id,
+    },
+  });
+}
+
+//todo:编辑测试用例
+export async function updateTestCaseList(data) {
+  return request('/api/extra/updateTestCase', {
+    method: 'post',
+    data
+  });
+}
+
+
+//todo:根据用例ID获取测试bug列表
+export async function getCaseBugList(useCase) {
+  return request(`/api/relation/CTB?useCase=${useCase}`, {
+    method: 'get',
   });
 }
-//todo:获取测试bug列表
-export async function getTestBugList(report_id,case_take_id) {
-  return request('/api/extra/getBugList', {
+
+//todo:根据bugID获取bug信息
+export async function getBugInfo(bugId) {
+  return request(`/api/rec/getDetail?id=${bugId}`, {
     method: 'get',
-    params:{
-      report_id,
-      case_take_id
-    }
   });
 }