编辑测试详情添加上一个、下一个快速选项

2020-04-20 14:24:17 +08:00 · 2020-04-20 14:24:17 +08:00 · 54d28eaf0c
parent eb7c2ddba0
commit 54d28eaf0c
4 changed files with 156 additions and 88 deletions
--- a/frontend/src/business/components/track/plan/TestPlanView.vue
+++ b/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;
--- a/frontend/src/business/components/track/plan/common/TestPlanTestCaseStatusButton.vue
+++ b/frontend/src/business/components/track/plan/common/TestPlanTestCaseStatusButton.vue
@ -1,22 +1,22 @@
 <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>
--- a/frontend/src/business/components/track/plan/components/TestPlanTestCaseEdit.vue
+++ b/frontend/src/business/components/track/plan/components/TestPlanTestCaseEdit.vue
@ -1,14 +1,55 @@
 <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
      },
-      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');
-          });
+      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);
+      },
+      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>
--- a/frontend/src/business/components/track/plan/components/TestPlanTestCaseList.vue
+++ b/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 + " ？", '', {