Merge branch 'dev' of github.com:fit2cloudrd/metersphere-server into dev

frontend/src/business/components/track/plan/TestPlanView.vue

@@ -22,7 +22,6 @@
         <el-main>
           <test-plan-test-case-list
             @openTestCaseRelevanceDialog="openTestCaseRelevanceDialog"
-            @editTestPlanTestCase="editTestPlanTestCase"
             @refresh="refresh"
             :plan-id="planId"
             ref="testCasePlanList"></test-plan-test-case-list>
@@ -34,11 +33,6 @@
         :plan-id="planId"
         ref="testCaseRelevance"></test-case-relevance>
 
-      <test-plan-test-case-edit
-        ref="testPlanTestCaseEdit"
-        @refresh="refresh">
-      </test-plan-test-case-edit>
-
     </div>
   </div>
 
@@ -49,12 +43,11 @@
     import PlanNodeTree from "./components/PlanNodeTree";
     import TestPlanTestCaseList from "./components/TestPlanTestCaseList";
     import TestCaseRelevance from "./components/TestCaseRelevance";
-    import TestPlanTestCaseEdit from "./components/TestPlanTestCaseEdit";
     import SelectMenu from "../common/SelectMenu";
 
     export default {
       name: "TestPlanView",
-      components: {PlanNodeTree, TestPlanTestCaseList, TestCaseRelevance, TestPlanTestCaseEdit, SelectMenu},
+      components: {PlanNodeTree, TestPlanTestCaseList, TestCaseRelevance, SelectMenu},
       data() {
         return {
           testPlans: [],
@@ -85,22 +78,6 @@
         openTestCaseRelevanceDialog() {
           this.$refs.testCaseRelevance.openTestCaseRelevanceDialog();
         },
-        editTestPlanTestCase(testCase) {
-          let item = {};
-          Object.assign(item, testCase);
-          item.results = JSON.parse(item.results);
-          item.steps = JSON.parse(item.steps);
-          item.steptResults = [];
-          for (let i = 0; i < item.steps.length; i++){
-            if(item.results[i]){
-              item.steps[i].actualResult = item.results[i].actualResult;
-              item.steps[i].executeResult = item.results[i].executeResult;
-            }
-            item.steptResults.push(item.steps[i]);
-          }
-          this.$refs.testPlanTestCaseEdit.testCase = item;
-          this.$refs.testPlanTestCaseEdit.dialog = true;
-        },
         getTestPlans() {
           this.result = this.$post('/test/plan/list/all', {}, response => {
             this.testPlans = response.data;

frontend/src/business/components/track/plan/common/TestPlanTestCaseStatusButton.vue

 <template>
-  <el-row type="flex" justify="start" :gutter="20">
+  <el-row type="flex" justify="start" :gutter="20" class="status-button">
     <el-col>
-      <el-button type="success" round
+      <el-button type="success" round size="mini"
                  :icon="status == 'Pass' ? 'el-icon-check' : ''"
                  @click="setStatus('Pass')"> {{$t('test_track.pass')}}</el-button>
     </el-col>
     <el-col >
-      <el-button type="danger" round
+      <el-button type="danger" round size="mini"
                  :icon="status == 'Failure' ? 'el-icon-check' : ''"
                  @click="setStatus('Failure')"> {{$t('test_track.failure')}}</el-button>
     </el-col>
     <el-col >
-      <el-button type="warning" round
+      <el-button type="warning" round size="mini"
                  :icon="status == 'Blocking' ? 'el-icon-check' : ''"
                  @click="setStatus('Blocking')"> {{$t('test_track.blocking')}}</el-button>
     </el-col>
     <el-col >
-      <el-button type="info" round
+      <el-button type="info" round size="mini"
                  :icon="status == 'Skip' ? 'el-icon-check' : ''"
                  @click="setStatus('Skip')"> {{$t('test_track.skip')}}</el-button>
     </el-col>

frontend/src/business/components/track/plan/components/TestPlanTestCaseEdit.vue

 <template>
 
   <el-drawer
-    :title="testCase.name"
     :before-close="handleClose"
-    :visible.sync="dialog"
-    direction="ttb"
+    :visible.sync="showDialog"
+    :with-header="false"
     size="100%"
     ref="drawer">
 
-    <div class="case_container">
+    <template v-slot:default="scope">
+
+      <el-header>
+
+        <el-row type="flex" style="margin-top: 1%" justify="end">
+
+          <el-col :span="12">
+            <el-button plain size="mini"
+                       icon="el-icon-back"
+                       @click="cancel">返回</el-button>
+          </el-col>
+
+          <el-col :span="12" class="head-right">
+            <span v-if="index + 1 == tableData.length">
+              上一条用例 : {{tableData[index - 1].name}}
+            </span>
+            <span v-if="index + 1 < tableData.length">
+              下一条用例 : {{tableData[index + 1].name}}
+            </span>
+
+            <el-button plain size="mini" icon="el-icon-arrow-up"
+                       :disabled="index + 1 <= 1"
+                       @click="handlePre()"/>
+            <span>  {{index + 1}}/{{tableData.length}} </span>
+            <el-button plain size="mini" icon="el-icon-arrow-down"
+                       :disabled="index + 1 >= tableData.length"
+                       @click="handleNext()"/>
+            <el-divider direction="vertical"></el-divider>
+
+            <el-button type="primary" size="mini" @click="saveCase">{{$t('test_track.save')}}</el-button>
+          </el-col>
+
+        </el-row>
+
+        <el-row style="margin-top: 0px;">
+          <el-col>
+            <el-divider content-position="left">{{testCase.name}}</el-divider>
+          </el-col>
+        </el-row>
+
+      </el-header>
+
+      <div class="case_container">
         <el-row >
           <el-col :span="4" :offset="1">
             <span class="cast_label">{{$t('test_track.priority')}}：</span>
@@ -20,6 +61,11 @@
             <span class="cast_item" v-if="testCase.type == 'performance'">{{$t('commons.performance')}}</span>
             <span class="cast_item" v-if="testCase.type == 'api'">{{$t('commons.api')}}</span>
           </el-col>
+          <el-col :span="13">
+            <test-plan-test-case-status-button class="status-button"
+                                               @statusChange="statusChange"
+                                               :status="testCase.status"/>
+          </el-col>
         </el-row>
 
         <el-row>
@@ -36,11 +82,15 @@
 
         <el-row>
           <el-col :span="20" :offset="1">
+            <div>
+              <span class="cast_label">测试步骤：</span>
+            </div>
             <el-table
               :data="testCase.steptResults"
               class="tb-edit"
               size="mini"
-              height="200px"
+              height="250px"
+              border="true"
               :default-sort = "{prop: 'num', order: 'ascending'}"
               highlight-current-row>
               <el-table-column :label="$t('test_track.number')" prop="num" min-width="5%"></el-table-column>
@@ -84,7 +134,7 @@
 
         <el-row>
           <el-col :span="15" :offset="1">
-            <div style="margin-bottom: 5px;">
+            <div>
               <span class="cast_label">{{$t('commons.remark')}}：</span>
               <span v-if="testCase.remark == null || testCase.remark == ''" style="color: darkgrey">{{$t('commons.not_filled')}}</span>
             </div>
@@ -98,20 +148,9 @@
           </el-col>
         </el-row>
 
-      <test-plan-test-case-status-button class="status-button"
-        @statusChange="statusChange"
-        :status="testCase.status"/>
-
-        <el-row type="flex" justify="end">
-          <el-col :span="5">
-            <div>
-              <el-button @click="cancel">{{$t('test_track.cancel')}}</el-button>
-              <el-button type="primary" @click="saveCase">{{$t('test_track.save')}}</el-button>
-            </div>
-          </el-col>
-        </el-row>
 
-    </div>
+      </div>
+    </template>
   </el-drawer>
 
 </template>
@@ -120,44 +159,77 @@
   import TestPlanTestCaseStatusButton from '../common/TestPlanTestCaseStatusButton';
 
   export default {
-      name: "TestPlanTestCaseEdit",
+    name: "TestPlanTestCaseEdit",
     components: {TestPlanTestCaseStatusButton},
     data() {
-        return {
-          dialog: false,
-          testCase: {TestPlanTestCaseStatusButton}
-        };
+      return {
+        showDialog: false,
+        testCase: {},
+        index: 0
+      };
+    },
+    props: {
+      tableData: {
+        type: Array
+      },
+      total: {
+        type: Number
+      }
+    },
+    methods: {
+      handleClose(done) {
+        this.showDialog = false;
+      },
+      cancel() {
+        this.showDialog = false;
+      },
+      statusChange(status) {
+        this.testCase.status = status;
+      },
+      saveCase() {
+        let param = {};
+        param.id = this.testCase.id;
+        param.status = this.testCase.status;
+        param.results = [];
+        this.testCase.steptResults.forEach(item => {
+          let result = {};
+          result.actualResult = item.actualResult;
+          result.executeResult = item.executeResult;
+          param.results.push(result);
+        });
+        param.results = JSON.stringify(param.results);
+        this.$post('/test/plan/case/edit', param, () => {
+          this.$refs.drawer.closeDrawer();
+          this.$message.success("保存成功！");
+          this.$emit('refresh');
+        });
+      },
+      handleNext() {
+        this.index++;
+        this.getTestCase(this.index);
+      },
+      handlePre() {
+        this.index--;
+        this.getTestCase(this.index);
       },
-      methods: {
-        handleClose(done) {
-          this.dialog = false;
-        },
-        cancel() {
-          this.dialog = false;
-        },
-        statusChange(status) {
-          this.testCase.status = status;
-        },
-        saveCase() {
-          let param = {};
-          param.id = this.testCase.id;
-          param.status = this.testCase.status;
-          param.results = [];
-          this.testCase.steptResults.forEach(item => {
-            let result = {};
-            result.actualResult = item.actualResult;
-            result.executeResult = item.executeResult;
-            param.results.push(result);
-          });
-          param.results = JSON.stringify(param.results);
-          this.$post('/test/plan/case/edit', param, () => {
-            this.$refs.drawer.closeDrawer();
-            this.$message.success("保存成功！");
-            this.$emit('refresh');
-          });
+      getTestCase(index) {
+        let testCase = this.tableData[index];
+        let item = {};
+        Object.assign(item, testCase);
+        item.results = JSON.parse(item.results);
+        item.steps = JSON.parse(item.steps);
+        item.steptResults = [];
+        for (let i = 0; i < item.steps.length; i++){
+          if(item.results[i]){
+            item.steps[i].actualResult = item.results[i].actualResult;
+            item.steps[i].executeResult = item.results[i].executeResult;
+          }
+          item.steptResults.push(item.steps[i]);
         }
+        this.testCase = item;
       }
     }
+  }
 </script>
 
 <style scoped>
@@ -173,10 +245,6 @@
     display: none;
   }
 
-  .el-row {
-    margin-bottom: 2%;
-  }
-
   .cast_label {
     color: dimgray;
   }
@@ -185,4 +253,17 @@
     padding-left: 4%;
   }
 
+  .head-right {
+    text-align: right;
+  }
+
+  .el-col {
+    line-height: 50px;
+  }
+
+  .status-button {
+    float: right;
+    margin-right: 1px;
+  }
+
 </style>

frontend/src/business/components/track/plan/components/TestPlanTestCaseList.vue

@@ -131,7 +131,7 @@
         <el-table-column
           :label="$t('commons.operating')">
           <template v-slot:default="scope">
-            <el-button @click="handleEdit(scope.row)" type="primary" icon="el-icon-edit" size="mini" circle/>
+            <el-button @click="handleEdit(scope.row, scope.$index)" type="primary" icon="el-icon-edit" size="mini" circle/>
             <el-button @click="handleDelete(scope.row)" type="danger" icon="el-icon-unlock" size="mini" circle/>
           </template>
         </el-table-column>
@@ -140,6 +140,11 @@
       <ms-table-pagination :change="search" :current-page.sync="currentPage" :page-size.sync="pageSize"
                            :total="total"/>
 
+      <test-plan-test-case-edit
+        ref="testPlanTestCaseEdit"
+        :table-data="tableData"
+        @refresh="initTableData"/>
+
     </el-card>
   </el-main>
 </template>
@@ -148,13 +153,14 @@
   import PlanNodeTree from './PlanNodeTree';
   import ExecutorEdit from './ExecutorEdit';
   import StatusEdit from './StatusEdit';
+  import TestPlanTestCaseEdit from "../components/TestPlanTestCaseEdit";
   import MsTipButton from '../../../../components/common/components/MsTipButton';
   import MsTablePagination from '../../../../components/common/pagination/TablePagination';
   import {TokenKey} from '../../../../../common/js/constants';
 
   export default {
       name: "TestPlanTestCaseList",
-      components: {PlanNodeTree, StatusEdit, ExecutorEdit, MsTipButton, MsTablePagination},
+      components: {PlanNodeTree, StatusEdit, ExecutorEdit, MsTipButton, MsTablePagination, TestPlanTestCaseEdit},
       data() {
         return {
           result: {},
@@ -165,6 +171,7 @@
           currentPage: 1,
           pageSize: 5,
           total: 0,
+          currentDataIndex: 0,
           selectIds: new Set(),
         }
       },
@@ -201,8 +208,11 @@
         buildPagePath(path) {
           return path + "/" + this.currentPage + "/" + this.pageSize;
         },
-        handleEdit(testCase) {
-          this.$emit('editTestPlanTestCase', testCase);
+        handleEdit(testCase, index) {
+          this.currentDataIndex = index;
+          this.$refs.testPlanTestCaseEdit.index = index;
+          this.$refs.testPlanTestCaseEdit.getTestCase(index);
+          this.$refs.testPlanTestCaseEdit.showDialog = true;
         },
         handleDelete(testCase) {
           this.$alert(this.$t('test_track.confirm_cancel_relevance') + ' ' + testCase.name + " ？", '', {