Add:添加测试用例，修改测试用例

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

@@ -19,7 +19,6 @@ const tailLayout = {
 const Step1 = (props) => {
   const { dispatch, data, osType } = props;
   const [form] = Form.useForm();
-  console.log(osType)
   if (!data) {
     return null;
   }
@@ -34,7 +33,6 @@ const Step1 = (props) => {
   },[dispatch])
 
   const onFinish = (values) => {
-    console.log('Success:', values);
     let formData = new FormData();
     formData.append("name", values.reportName);
     formData.append("case_id", "1718");
@@ -48,12 +46,12 @@ const Step1 = (props) => {
       type: 'editReport/saveReportCommonDetail',
       payload: formData,
     });
-
   };
 
   const onFinishFailed = (errorInfo) => {
     console.log('Failed:', errorInfo);
   };
+
   const onValidateForm = async () => {
     const isValid = await validateFields();
     if(!isValid.outOfDate){

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

@@ -1,5 +1,5 @@
-import React, { useState } from 'react';
-import { Form, Row, Col, Card, Modal, Input, Select, Upload, Button } from 'antd';
+import React, { useEffect, useRef, useState } from 'react';
+import { Form, Row, Col, Card, Modal, Input, Select, Upload, Button, message } from 'antd';
 import { connect } from 'umi';
 import styles from './index.less';
 import {
@@ -8,6 +8,7 @@ import {
   ExclamationCircleFilled,
   UploadOutlined,
   EditOutlined,
+  EyeOutlined,
 } from '@ant-design/icons';
 
 const formItemLayout = {
@@ -21,11 +22,14 @@ const formItemLayout = {
 
 const Step2 = (props) => {
   const [form] = Form.useForm();
-  const { data, dispatch, reportCommonInfo } = props;
-  console.log(reportCommonInfo,props)
+  const { data, dispatch, submitting, reportCommonInfo, testCaseList } = 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({});
 
   if (!data) {
     return null;
@@ -33,15 +37,45 @@ const Step2 = (props) => {
 
   const { validateFields, getFieldsValue } = form;
 
-  const handleOk = (type) => {
-    setAddTestCaseModal(false);
-    // type === 'case' ? setAddTestCaseModal(false) : setAddTestBugModal(false) ;
+  const handleAddTestCase = () => {
+    form.validateFields().then((res) => {
+      let formData = new FormData();
+      // formData.append("id", values.reportName);
+      formData.append('report_id', reportCommonInfo.id);
+      formData.append('name', res.name);
+      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,
+      });
+      setAddTestCaseModal(false);
+    });
   };
 
-  const handleCancel = (type) => {
-    // type === 'case' ? setAddTestCaseModal(false) : setAddTestBugModal(false) ;
+  const handleEditTestCase = (item) => {
+    //setCurrTestCase(item);
+    currentTestCaseRef.current = item;
+    //console.log(currTestCase)
+    setAddTestCaseModal(true);
   };
 
+  const handleClickAddCase = ()=>{
+   // setCurrTestCase({});
+    currentTestCaseRef.current = {};
+    addCaseform.resetFields();
+    //console.log(currTestCase)
+    setAddTestCaseModal(true);
+  }
+
   const onPrev = () => {
     if (dispatch) {
       const values = getFieldsValue();
@@ -67,11 +101,17 @@ const Step2 = (props) => {
     }
   };
 
+  useEffect(() => {
+    dispatch({
+      type: 'editReport/getTestCaseList',
+      payload: reportCommonInfo.id,
+    });
+  }, [dispatch]);
+
   const { payAccount, receiverAccount, receiverName, amount } = data;
 
   return (
     <div>
-      dsdd
       <Form
         {...formItemLayout}
         form={form}
@@ -81,31 +121,29 @@ const Step2 = (props) => {
         initialValues={data}
       >
         <Row gutter={10}>
-          <Col span={8}>
+          <Col span={5}>
             <Form.Item label="创建日期" rules={[{ required: true, message: '请输入报告名称' }]}>
               {'2021.4.12'}
             </Form.Item>
           </Col>
-          <Col span={8}>
+          <Col span={5}>
             <Form.Item label="报告名称" rules={[{ required: true, message: '请输入报告名称' }]}>
-              {/*{reportCommonInfo.name}*/}
+              {reportCommonInfo.name}
             </Form.Item>
           </Col>
-        </Row>
-        <Row>
-          <Col span={8}>
+          <Col span={5}>
             <Form.Item label="设备名称" required>
-              {/*{reportCommonInfo.device_brand}*/}
+              {reportCommonInfo.device_brand}
             </Form.Item>
           </Col>
-          <Col span={8}>
+          <Col span={5}>
             <Form.Item label="设备品牌" required>
-              {/*{reportCommonInfo.device_model}*/}
+              {reportCommonInfo.device_model}
             </Form.Item>
           </Col>
-          <Col span={8}>
+          <Col span={4}>
             <Form.Item label="操作系统" required>
-              {/*{reportCommonInfo.device_os}*/}
+              {reportCommonInfo.device_os}
             </Form.Item>
           </Col>
         </Row>
@@ -118,8 +156,8 @@ const Step2 = (props) => {
                 <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 size="small" onClick={()=>{handleClickAddCase()}}>
+                      <PlusOutlined className={styles.addIcon} />
                       用例
                     </Button>
                   </Col>
@@ -127,36 +165,32 @@ const Step2 = (props) => {
               </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>
+                {testCaseList.length && testCaseList.map((item) => {
+                  return (<div className={styles.testCaseItem} key={item.id}>
+                    <Row gutter={10}>
+                      <Col span={21}><p>{item.name}</p></Col>
+                      <Col span={3}>
+                        <EditOutlined className={styles.editTestBug}
+                                      onClick={() => handleEditTestCase(item)} />
+                      </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)} >
+                  <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}  />
+                    <ForkOutlined className={styles.addIcon} />
                     推荐
                   </Button>
                 </Col>
@@ -180,10 +214,10 @@ const Step2 = (props) => {
                       </Form>
                     </Col>
                     <Col span={4}>
-                      <Button size='small' style={{marginTop:10}}>查看详情</Button>
+                      <Button size='small' style={{ marginTop: 10 }}>
+                        <EyeOutlined />详情</Button>
                     </Col>
                   </Row>
-
                 </div>
               </div>
             </Col>
@@ -191,20 +225,29 @@ const Step2 = (props) => {
           </Row>
         </div>
       </Card>
-      <Modal title="添加测试用例" visible={showAddTestCaseModal} onOk={() => setAddTestCaseModal(false)}
-             onCancel={() => setAddTestCaseModal(false)} className="addModal">
+      <Modal title="添加测试用例" width={720}
+             forceRender={ true }
+             visible={showAddTestCaseModal}
+             className="addModal"
+             footer={[
+               <Button key='submit' type="primary" htmlType="submit" onClick={handleAddTestCase}>添加</Button>,
+               <Button key='cancel' htmlType="button" style={{ marginLeft: '10px' }}
+                       onClick={() => {
+                         setAddTestCaseModal(false);
+                       }}>取消</Button>]}
+             onCancel={() => {setAddTestCaseModal(false)}}
+      >
         <ExclamationCircleFilled className={styles.addModalInfo} />为了评分准确,请勿提交重复测试用例
         <Form
           {...formItemLayout}
-          form={form}
+          addCaseform={form}
+          initialValues={currentTestCaseRef.current}
           layout="horizontal"
           className={styles.stepForm}
-          hideRequiredMark
-          initialValues={data}
         >
           <Form.Item
             label="用例名称"
-            name="caseName"
+            name="name"
             rules={[
               {
                 required: true,
@@ -212,11 +255,11 @@ const Step2 = (props) => {
               },
             ]}
           >
-            <Input />
+            <Input/>
           </Form.Item>
           <Form.Item
             label="前置条件"
-            name="precondition"
+            name="front"
             rules={[
               {
                 required: true,
@@ -224,11 +267,11 @@ const Step2 = (props) => {
               },
             ]}
           >
-            <Input.TextArea />
+            <Input.TextArea autoSize={{ minRows: 3, maxRows: Infinity }}/>
           </Form.Item>
           <Form.Item
             label="测试步骤"
-            name="step"
+            name="behind"
             rules={[
               {
                 required: true,
@@ -236,11 +279,11 @@ const Step2 = (props) => {
               },
             ]}
           >
-            <Input.TextArea />
+            <Input.TextArea autoSize={{ minRows: 3, maxRows: Infinity }}/>
           </Form.Item>
           <Form.Item
             label="预期结果"
-            name="result"
+            name="description"
             rules={[
               {
                 required: true,
@@ -248,12 +291,15 @@ const Step2 = (props) => {
               },
             ]}
           >
-            <Input.TextArea />
+            <Input.TextArea autoSize={{ minRows: 3, maxRows: Infinity }}/>
           </Form.Item>
         </Form>
       </Modal>
-      <Modal title="添加用例缺陷" visible={showAddBugModal} onOk={() => setAddTestBugModal(false)}
-             onCancel={() => setAddTestBugModal(false)} className="addModal">
+
+      <Modal title="添加用例缺陷" visible={showAddBugModal} width={720}
+             onOk={() => setAddTestBugModal(false)}
+             onCancel={() => setAddTestBugModal(false)}
+             >
         <ExclamationCircleFilled className={styles.addModalInfo} />为了评分准确,请勿提交重复Bug
         <Form
           labelCol={{ span: 4 }}
@@ -269,7 +315,7 @@ const Step2 = (props) => {
               },
             ]}
           >
-            <Input />
+            <Input autoSize/>
           </Form.Item>
           <Form.Item
             label="前置条件"
@@ -281,7 +327,7 @@ const Step2 = (props) => {
               },
             ]}
           >
-            <Input.TextArea />
+            <Input.TextArea autoSize/>
           </Form.Item>
           <Form.Item
             label="三级页面"
@@ -369,7 +415,7 @@ const Step2 = (props) => {
       <Modal title="任务推荐" visible={showTaskRecommendModal} onOk={() => setTaskRecommendModal(false)}
              onCancel={() => setTaskRecommendModal(false)} className="addModal">
         <div>
-          <div id="forceChart" ></div>
+          <div id="forceChart"></div>
         </div>
       </Modal>
     </div>
@@ -378,5 +424,7 @@ const Step2 = (props) => {
 
 export default connect(({ editReport, loading }) => ({
   submitting: loading.effects['editReport/submitStepForm'],
+  data: editReport.step,
   reportCommonInfo: editReport.reportCommonInfo,
+  testCaseList: editReport.testCaseList,
 }))(Step2);

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

@@ -49,8 +49,14 @@
   .testCaseItem {
     padding:10px;
     border-left: 5px solid #efefef;
-    box-shadow: 0 0 2px 2px #efefef;
+    box-shadow: 0 0 5px #aaa;
     margin-bottom:20px;
+    .editTestBug{
+      cursor: pointer;
+    }
+    .editTestBug:hover {
+      color: #1890ff;
+    }
     p {
       line-height: 28px;
       height: 28px;
@@ -66,7 +72,6 @@
 
 }
 .testBugList {
-
   .testBugItem {
     padding:10px;
     box-shadow: 0 0 5px #aaa;;
@@ -84,6 +89,7 @@
 .reportContainer {
   height: 500px;
 }
+
 .addModalInfo {
   color: #1890ff;
   margin-top: -20px;

src/pages/edit/model.js

@@ -2,6 +2,9 @@ import {
   fakeSubmitForm,
   getOsType,
   createReportCommon,
+  createTestCase,
+  getTestCaseList,
+  getTestBugList
 } from './service';
 
 const Model = {
@@ -16,6 +19,8 @@ const Model = {
       amount: '500',
     },
     reportCommonInfo: {},
+    testCaseList:[],
+    testBugList:[]
   },
   effects: {
     * submitStepForm({ payload }, { call, put }) {
@@ -39,12 +44,20 @@ const Model = {
         payload: osType,
       });
     },
+    * getTestCaseList({ payload },{call,put}){
+      const {reportId} = payload;
+      let res = yield call(getTestCaseList,reportId);
+      yield put({
+        type: 'saveTestCaseList',
+        payload: res.result,
+      });
+    },
     * saveReportCommonDetail({ payload }, { call, put }) {
       let res = yield call(createReportCommon, payload);
       //res拿到报告id,组装生成report对象
       let report = { id: res.id };
       for (let key of payload.keys()) {
-        report[key] = payload.get(key)
+        report[key] = payload.get(key);
       }
       yield put({
         type: 'saveReportCommonInfo',
@@ -55,6 +68,15 @@ const Model = {
         payload: 'detail',
       });
     },
+    * createTestCase({ payload }, { call, put }) {
+      let res = yield call(createTestCase,payload);
+      console.log(res)
+    },
+    //todo:获取bug列表
+    * getTestBugList({payload},{call,put}){
+      let res = yield call(getTestBugList,payload);
+
+    }
   },
   reducers: {
     saveCurrentStep(state, { payload }) {
@@ -69,6 +91,12 @@ const Model = {
     saveReportCommonInfo(state, { payload }) {
       return { ...state, reportCommonInfo: payload };
     },
+    saveTestCaseList(state,{payload}){
+      return { ...state, testCaseList: payload };
+    },
+    saveTestBugList(state,{payload}){
+      return { ...state, testBugList: payload };
+    }
   },
 };
 export default Model;

src/pages/edit/service.js

@@ -21,3 +21,29 @@ export async function createReportCommon(data){
     data
   })
 }
+//todo:创建测试用例
+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
+    }
+  });
+}
+//todo:获取测试bug列表
+export async function getTestBugList(report_id,case_take_id) {
+  return request('/api/extra/getBugList', {
+    method: 'get',
+    params:{
+      report_id,
+      case_take_id
+    }
+  });
+}