fix (接口定义): 修复执行接口定义相关优化问题

frontend/src/business/components/api/definition/components/EditCompleteContainer.vue

@@ -89,6 +89,11 @@
         @showExecResult="showExecResult"
         ref="trashCaseList"/>
     </div>
+    <!-- 加载用例 -->
+    <ms-api-case-list
+      :createCase="createCase"
+      :currentApi="api"
+      ref="caseList"/>
   </el-card>
 </template>
 
@@ -101,6 +106,8 @@ import MsRunTestDubboPage from "./runtest/RunTestDubboPage";
 import MockConfig from "@/business/components/api/definition/components/mock/MockConfig";
 import TcpMockConfig from "@/business/components/api/definition/components/mock/TcpMockConfig";
 import ApiCaseSimpleList from "./list/ApiCaseSimpleList";
+import MsApiCaseList from "./case/ApiCaseList";
+import {getUUID} from "@/common/js/utils";
 
 export default {
   name: "EditCompleteContainer",
@@ -112,7 +119,8 @@ export default {
     MsRunTestDubboPage,
     MockConfig,
     TcpMockConfig,
-    ApiCaseSimpleList
+    ApiCaseSimpleList,
+    MsApiCaseList
   },
   data() {
     return {
@@ -122,7 +130,9 @@ export default {
       showMock: false,
       showTestCaseList: false,
       baseMockConfigData: {},
-      loading: false
+      loading: false,
+      createCase: "",
+      api: {},
     }
   },
   props: {
@@ -151,6 +161,15 @@ export default {
   watch: {
     showMock() {
       this.mockSetting();
+    },
+    '$store.state.currentApiCase.case'() {
+      if (this.$store.state.currentApiCase && this.$store.state.currentApiCase.api) {
+        this.refreshButtonActiveClass("testCase");
+      }
+    },
+    '$store.state.currentApiCase.mock'() {
+      this.mockSetting();
+      this.refreshButtonActiveClass("mock");
     }
   },
   methods: {
@@ -221,21 +240,29 @@ export default {
         this.showTestCaseList = true;
         this.showTest = false;
         this.showMock = false;
+        if (this.$store.state.currentApiCase && this.$store.state.currentApiCase.api) {
+          this.createCase = getUUID();
+          this.api = this.$store.state.currentApiCase.api;
+          this.$refs.caseList.open();
+        }
       } else if (tabType === "test") {
         this.showApiList = false;
         this.showTestCaseList = false;
         this.showTest = true;
         this.showMock = false;
+        this.$store.state.currentApiCase = undefined;
       } else if (tabType === "mock") {
         this.showApiList = false;
         this.showTestCaseList = false;
         this.showTest = false;
         this.showMock = true;
+        this.$store.state.currentApiCase = undefined;
       } else {
         this.showApiList = true;
         this.showTestCaseList = false;
         this.showTest = false;
         this.showMock = false;
+        this.$store.state.currentApiCase = undefined;
       }
     }
   },

frontend/src/business/components/api/definition/components/case/ApiCaseItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-card style="margin-top: 5px" @click.native="selectTestCase(apiCase,$event)">
+  <el-card style="margin-top: 5px" @click.native="selectTestCase(apiCase,$event)" v-loading="loading">
     <div @click="active(apiCase)" v-if="type!=='detail'">
       <el-row>
         <el-col :span="3">
@@ -68,10 +68,10 @@
                        :placeholder="$t('api_test.automation.follow_people')" filterable size="small"
                        @change="saveTestCase(apiCase)">
               <el-option
-                  v-for="item in maintainerOptions"
-                  :key="item.id"
-                  :label="item.id + ' (' + item.name + ')'"
-                  :value="item.id">
+                v-for="item in maintainerOptions"
+                :key="item.id"
+                :label="item.id + ' (' + item.name + ')'"
+                :value="item.id">
               </el-option>
             </el-select>
           </div>
@@ -220,7 +220,6 @@ export default {
         {name: this.$t('test_track.case.batch_edit_case'), handleClick: this.handleEditBatch}
       ],
       methodColorMap: new Map(API_METHOD_COLOUR),
-      maintainerOptions: [],
     }
   },
   props: {
@@ -252,13 +251,13 @@ export default {
       default() {
         return false;
       }
-    }
+    },
+    maintainerOptions: Array,
   },
   created() {
     if (requireComponent != null && JSON.stringify(esbDefinition) != '{}' && JSON.stringify(esbDefinitionResponse) != '{}') {
       this.showXpackCompnent = true;
     }
-    this.getMaintainerOptions();
   },
   watch: {
     'apiCase.selected'() {
@@ -266,11 +265,6 @@ export default {
     }
   },
   methods: {
-    getMaintainerOptions() {
-      this.$post('/user/project/member/tester/list', {projectId: getCurrentProjectID()}, response => {
-        this.maintainerOptions = response.data;
-      });
-    },
     openHis(row) {
       this.$refs.changeHistory.open(row.id);
     },
@@ -372,6 +366,12 @@ export default {
         }
       });
     },
+    reload() {
+      this.loading = true
+      this.$nextTick(() => {
+        this.loading = false
+      });
+    },
     saveCase(row, hideAlert) {
       let tmp = JSON.parse(JSON.stringify(row));
       this.isShowInput = false;
@@ -411,6 +411,7 @@ export default {
         row.updateTime = data.updateTime;
         if (!row.message) {
           this.$success(this.$t('commons.save_success'));
+          this.reload();
           if (!hideAlert) {
             this.$emit('refresh');
           }

frontend/src/business/components/api/definition/components/case/ApiCaseList.vue

@@ -3,19 +3,19 @@
     <ms-drawer :size="60" @close="apiCaseClose" direction="bottom">
       <template v-slot:header>
         <api-case-header
-          :api="api"
-          @getApiTest="getApiTest"
-          @setEnvironment="setEnvironment"
-          @addCase="addCase"
-          @selectAll="selectAll"
-          :condition="condition"
-          :priorities="priorities"
-          :apiCaseList="apiCaseList"
-          :is-read-only="isReadOnly"
-          :project-id="projectId"
-          :useEnvironment="environment"
-          :is-case-edit="isCaseEdit"
-          ref="header"
+            :api="api"
+            @getApiTest="getApiTest"
+            @setEnvironment="setEnvironment"
+            @addCase="addCase"
+            @selectAll="selectAll"
+            :condition="condition"
+            :priorities="priorities"
+            :apiCaseList="apiCaseList"
+            :is-read-only="isReadOnly"
+            :project-id="projectId"
+            :useEnvironment="environment"
+            :is-case-edit="isCaseEdit"
+            ref="header"
         />
       </template>
 
@@ -38,6 +38,7 @@
                            :is-case-edit="isCaseEdit"
                            :api="api"
                            :runResult="runResult"
+                           :maintainerOptions="maintainerOptions"
                            :api-case="item" :index="index" ref="apiCaseItem"/>
           </div>
         </el-main>
@@ -122,6 +123,7 @@ export default {
         method: REQ_METHOD,
       },
       envMap: new Map,
+      maintainerOptions: [],
     };
   },
   watch: {
@@ -145,6 +147,7 @@ export default {
     if (!this.environment && this.$store.state.useEnvironment) {
       this.environment = this.$store.state.useEnvironment;
     }
+    this.getMaintainerOptions();
   },
   computed: {
     isCaseEdit() {
@@ -155,6 +158,11 @@ export default {
     },
   },
   methods: {
+    getMaintainerOptions() {
+      this.$post('/user/project/member/tester/list', {projectId: getCurrentProjectID()}, response => {
+        this.maintainerOptions = response.data;
+      });
+    },
     apiCaseSelected() {
       this.selectSize = 0;
       if (this.apiCaseList.length > 0) {
@@ -172,6 +180,7 @@ export default {
       this.condition = {components: API_CASE_CONFIGS};
       this.getApiTest(true);
       this.visible = true;
+      this.$store.state.currentApiCase = undefined;
     },
     add(api) {
       this.api = api;

frontend/src/business/components/api/definition/components/complete/EditCompleteHTTPApi.vue

@@ -99,12 +99,15 @@
         <p class="tip">{{ $t('test_track.plan_view.mock_info') }} </p>
         <div class="base-info mock-info">
           <el-row>
-            <el-col :span="24">
+            <el-col :span="20">
               Mock地址：
               <el-link :href="getUrlPrefix" target="_blank" style="color: black"
                        type="primary">{{ this.getUrlPrefix }}
               </el-link>
             </el-col>
+            <el-col :span="4">
+              <el-link @click="mockSetting" type="primary">Mock设置</el-link>
+            </el-col>
           </el-row>
 
         </div>
@@ -139,7 +142,7 @@
   import MsJsr233Processor from "../../../automation/scenario/component/Jsr233Processor";
   import MsSelectTree from "../../../../common/select-tree/SelectTree";
   import MsChangeHistory from "../../../../history/ChangeHistory";
-  import {getCurrentProjectID} from "@/common/js/utils";
+  import {getCurrentProjectID, getUUID} from "@/common/js/utils";
 
   export default {
     name: "MsAddCompleteHttpApi",
@@ -246,6 +249,9 @@
       openHis(){
         this.$refs.changeHistory.open(this.httpForm.id);
       },
+      mockSetting() {
+        this.$store.state.currentApiCase={mock : getUUID()};
+      },
       runTest() {
         this.$refs['httpForm'].validate((valid) => {
           if (valid) {

frontend/src/business/components/api/definition/components/runtest/RunTestDubboPage.vue

@@ -165,9 +165,7 @@ export default {
     },
     saveAsCase() {
       //用于触发创建操作
-      this.createCase = getUUID();
-      this.$refs.caseList.open();
-      this.loaded = false;
+      this.$store.state.currentApiCase = {case: getUUID(), api: this.api};
     },
     saveAsApi() {
       let data = {};

frontend/src/business/components/api/definition/components/runtest/RunTestHTTPPage.vue

@@ -44,7 +44,6 @@
         </el-form-item>
 
 
-
       </el-form>
       <div v-loading="loading">
         <p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
@@ -204,9 +203,7 @@ export default {
     },
     saveAsCase() {
       //用于触发创建操作
-      this.createCase = getUUID();
-      this.$refs.caseList.open();
-      this.loaded = false;
+      this.$store.state.currentApiCase = {case: getUUID(), api: this.api};
     },
     saveAsApi() {
       let data = {};

frontend/src/business/components/api/definition/components/runtest/RunTestSQLPage.vue

@@ -163,9 +163,7 @@ export default {
         return bodyUploadFiles;
       },
       saveAsCase() {
-        this.createCase = getUUID();
-        this.$refs.caseList.open();
-        this.loaded = false;
+        this.$store.state.currentApiCase = {case: getUUID(), api: this.api};
       },
       saveAsApi() {
         let data = {};

frontend/src/business/components/api/definition/components/runtest/RunTestTCPPage.vue

@@ -194,9 +194,7 @@ export default {
       return bodyUploadFiles;
     },
     saveAsCase() {
-      this.createCase = getUUID();
-      this.$refs.caseList.open();
-      this.loaded = false;
+      this.$store.state.currentApiCase = {case: getUUID(), api: this.api};
     },
     saveAsApi() {
       let data = {};

frontend/src/store/index.js

@@ -24,6 +24,7 @@ const state = {
   useEnvironment: "",
   testPlanViewSelectNode: {},
   selectStep: {},
+  currentApiCase: {},
 }
 
 const store = new Vuex.Store({