From 9f0614f030450d3114eac3a14b83d181dd07acee Mon Sep 17 00:00:00 2001
From: fit2-zhao <yong.zhao@fit2cloud.com>
Date: Wed, 26 Jan 2022 15:52:46 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E6=8E=A5=E5=8F=A3=E6=B5=8B=E8=AF=95):=20?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8Dapi=E6=B5=8B=E8=AF=95=E5=90=8E=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0=E6=8E=A5=E5=8F=A3=E5=88=B7=E6=96=B0=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

--bug=1009997 --user=赵勇 【接口测试】接口定义-test，更新接口没有及时刷新 https://www.tapd.cn/55049933/s/1099254
---
 .../components/EditCompleteContainer.vue      | 496 +++++++++---------
 1 file changed, 260 insertions(+), 236 deletions(-)

diff --git a/frontend/src/business/components/api/definition/components/EditCompleteContainer.vue b/frontend/src/business/components/api/definition/components/EditCompleteContainer.vue
index f40f23be16..b9c544a555 100644
--- a/frontend/src/business/components/api/definition/components/EditCompleteContainer.vue
+++ b/frontend/src/business/components/api/definition/components/EditCompleteContainer.vue
@@ -108,265 +108,289 @@
 </template>
 
 <script>
-  import MsApiConfig from "./ApiConfig";
-  import MsRunTestHttpPage from "./runtest/RunTestHTTPPage";
-  import MsRunTestTcpPage from "./runtest/RunTestTCPPage";
-  import MsRunTestSqlPage from "./runtest/RunTestSQLPage";
-  import MsRunTestDubboPage from "./runtest/RunTestDubboPage";
-  import MockTab from "@/business/components/api/definition/components/mock/MockTab";
-  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";
-  import {TYPE_TO_C} from "@/business/components/api/automation/scenario/Setting";
+import MsApiConfig from "./ApiConfig";
+import MsRunTestHttpPage from "./runtest/RunTestHTTPPage";
+import MsRunTestTcpPage from "./runtest/RunTestTCPPage";
+import MsRunTestSqlPage from "./runtest/RunTestSQLPage";
+import MsRunTestDubboPage from "./runtest/RunTestDubboPage";
+import MockTab from "@/business/components/api/definition/components/mock/MockTab";
+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";
+import {TYPE_TO_C} from "@/business/components/api/automation/scenario/Setting";
 
-  export default {
-    name: "EditCompleteContainer",
-    components: {
-      MsApiConfig,
-      MsRunTestHttpPage,
-      MsRunTestTcpPage,
-      MsRunTestSqlPage,
-      MsRunTestDubboPage,
-      MockTab,
-      TcpMockConfig,
-      ApiCaseSimpleList,
-      MsApiCaseList
+export default {
+  name: "EditCompleteContainer",
+  components: {
+    MsApiConfig,
+    MsRunTestHttpPage,
+    MsRunTestTcpPage,
+    MsRunTestSqlPage,
+    MsRunTestDubboPage,
+    MockTab,
+    TcpMockConfig,
+    ApiCaseSimpleList,
+    MsApiCaseList
+  },
+  data() {
+    return {
+      isShow: true,
+      showApiList: true,
+      showTest: false,
+      showMock: false,
+      showTestCaseList: false,
+      baseMockConfigData: {},
+      loading: false,
+      createCase: "",
+      api: {},
+    };
+  },
+  props: {
+    activeDom: String,
+    isShowChangeButton: {
+      type: Boolean,
+      default: true
     },
-    data() {
-      return {
-        isShow: true,
-        showApiList: true,
-        showTest: false,
-        showMock: false,
-        showTestCaseList: false,
-        baseMockConfigData: {},
-        loading: false,
-        createCase: "",
-        api: {},
-      };
+    currentApi: {},
+    moduleOptions: {},
+    currentProtocol: String,
+    syncTabs: Array,
+    projectId: String,
+    selectNodeIds: Array,
+    visible: {
+      type: Boolean,
+      default: false,
     },
-    props: {
-      activeDom: String,
-      isShowChangeButton: {
-        type: Boolean,
-        default: true
-      },
-      currentApi: {},
-      moduleOptions: {},
-      currentProtocol: String,
-      syncTabs: Array,
-      projectId: String,
-      selectNodeIds: Array,
-      visible: {
-        type: Boolean,
-        default: false,
-      },
+  },
+  created() {
+    this.refreshButtonActiveClass(this.activeDom);
+    if (this.currentApi.id && (this.currentProtocol === "HTTP" || this.currentProtocol === "TCP")) {
+      this.mockSetting();
+    }
+    this.formatApi();
+  },
+  watch: {
+    showMock() {
+      this.mockSetting();
     },
-    created() {
-      this.refreshButtonActiveClass(this.activeDom);
-      if (this.currentApi.id && (this.currentProtocol === "HTTP" || this.currentProtocol === "TCP")) {
-        this.mockSetting();
-      }
-      this.formatApi();
-    },
-    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");
+    '$store.state.currentApiCase.case'() {
+      if (this.$store.state.currentApiCase && this.$store.state.currentApiCase.api) {
+        this.refreshButtonActiveClass("testCase");
       }
     },
-    methods: {
-      reLoadCase() {
-        this.$refs.trashCaseList.initTable();
-      },
-      sort(stepArray) {
-        if (stepArray) {
-          for (let i in stepArray) {
-            if (!stepArray[i].clazzName) {
-              stepArray[i].clazzName = TYPE_TO_C.get(stepArray[i].type);
-            }
-            if (stepArray[i] && stepArray[i].authManager && !stepArray[i].authManager.clazzName) {
-              stepArray[i].authManager.clazzName = TYPE_TO_C.get(stepArray[i].authManager.type);
-            }
-            if (stepArray[i].type === "Assertions" && !stepArray[i].document) {
-              stepArray[i].document = {
-                type: "JSON",
-                data: {xmlFollowAPI: false, jsonFollowAPI: false, json: [], xml: []}
-              };
-            }
-            if (stepArray[i].hashTree && stepArray[i].hashTree.length > 0) {
-              this.sort(stepArray[i].hashTree);
-            }
+    '$store.state.currentApiCase.mock'() {
+      this.mockSetting();
+      this.refreshButtonActiveClass("mock");
+    }
+  },
+  methods: {
+    reLoadCase() {
+      this.$refs.trashCaseList.initTable();
+    },
+    sort(stepArray) {
+      if (stepArray) {
+        for (let i in stepArray) {
+          if (!stepArray[i].clazzName) {
+            stepArray[i].clazzName = TYPE_TO_C.get(stepArray[i].type);
+          }
+          if (stepArray[i] && stepArray[i].authManager && !stepArray[i].authManager.clazzName) {
+            stepArray[i].authManager.clazzName = TYPE_TO_C.get(stepArray[i].authManager.type);
+          }
+          if (stepArray[i].type === "Assertions" && !stepArray[i].document) {
+            stepArray[i].document = {
+              type: "JSON",
+              data: {xmlFollowAPI: false, jsonFollowAPI: false, json: [], xml: []}
+            };
+          }
+          if (stepArray[i].hashTree && stepArray[i].hashTree.length > 0) {
+            this.sort(stepArray[i].hashTree);
           }
         }
-      },
-      formatApi() {
-        if (this.currentApi.response != null && this.currentApi.response != 'null' && this.currentApi.response != undefined) {
-          if (Object.prototype.toString.call(this.currentApi.response).match(/\[object (\w+)\]/)[1].toLowerCase() !== 'object') {
-            this.currentApi.response = JSON.parse(this.currentApi.response);
-          }
+      }
+    },
+    formatApi() {
+      if (this.currentApi.response != null && this.currentApi.response != 'null' && this.currentApi.response != undefined) {
+        if (Object.prototype.toString.call(this.currentApi.response).match(/\[object (\w+)\]/)[1].toLowerCase() !== 'object') {
+          this.currentApi.response = JSON.parse(this.currentApi.response);
         }
-        if (this.currentApi.request != null && this.currentApi.request != 'null' && this.currentApi.request != undefined) {
-          if (Object.prototype.toString.call(this.currentApi.request).match(/\[object (\w+)\]/)[1].toLowerCase() !== 'object') {
-            this.currentApi.request = JSON.parse(this.currentApi.request);
-          }
+      }
+      if (this.currentApi.request != null && this.currentApi.request != 'null' && this.currentApi.request != undefined) {
+        if (Object.prototype.toString.call(this.currentApi.request).match(/\[object (\w+)\]/)[1].toLowerCase() !== 'object') {
+          this.currentApi.request = JSON.parse(this.currentApi.request);
         }
-        if (this.currentApi && this.currentApi.request && !this.currentApi.request.hashTree) {
-          this.currentApi.request.hashTree = [];
-        }
-        if (this.currentApi && this.currentApi.request && this.currentApi.request.body && !this.currentApi.request.body.binary) {
-          this.currentApi.request.body.binary = [];
-        }
-        if (this.currentApi.request) {
-          this.currentApi.request.clazzName = TYPE_TO_C.get(this.currentApi.request.type);
-          this.sort(this.currentApi.request.hashTree);
-        }
-      },
-      mockSetting() {
-        let mockParam = {};
-        mockParam.projectId = this.projectId;
-        if (this.currentApi.id) {
-          mockParam.apiId = this.currentApi.id;
-          this.$post('/mockConfig/genMockConfig', mockParam, response => {
-            let mockConfig = response.data;
-            mockConfig.apiName = this.currentApi.name;
-            mockConfig.versionName = this.currentApi.versionName;
-            this.baseMockConfigData = mockConfig;
-          });
-        }
-      },
-      runTest(data) {
-        this.$emit("runTest", data);
-      },
-      saveApi(data) {
-        this.$emit("saveApi", data);
-        if (data != null && data.tags !== 'null' && data.tags !== undefined) {
-          if (Object.prototype.toString.call(data.tags) === "[object String]") {
-            data.tags = JSON.parse(data.tags);
-          }
-        }
-        Object.assign(this.currentApi, data);
-        this.currentApi.isCopy = false;
-        this.mockSetting();
-        this.reload();
-      },
-      createRootModel() {
-        this.$emit("createRootModel");
-      },
-      editApi(data) {
-        this.$emit("editApi", data);
-      },
-      refresh() {
-        this.$emit("refresh");
-      },
-      checkout(data) {
-        Object.assign(this.currentApi, data);
-        this.reload();
-      },
-      changeTab(tabType) {
-        this.refreshButtonActiveClass(tabType);
-      },
-      removeListener() {
-        if (this.$refs && this.$refs.apiConfig) {
-          this.$refs.apiConfig.removeListener();
-        }
-      },
-      changeSelectDataRangeAll() {
-        this.$emit("changeSelectDataRangeAll");
-      },
-      handleCase(api) {
-        this.$emit("handleCase", api);
-      },
-      showExecResult(data) {
-        this.$emit("showExecResult", data);
-      },
-      addListener() {
-        if (this.$refs && this.$refs.apiConfig) {
-          this.$refs.apiConfig.addListener();
-        }
-      },
-      reload() {
-        this.loading = true;
-        this.$nextTick(() => {
-          this.loading = false;
+      }
+      if (this.currentApi && this.currentApi.request && !this.currentApi.request.hashTree) {
+        this.currentApi.request.hashTree = [];
+      }
+      if (this.currentApi && this.currentApi.request && this.currentApi.request.body && !this.currentApi.request.body.binary) {
+        this.currentApi.request.body.binary = [];
+      }
+      if (this.currentApi.request) {
+        this.currentApi.request.clazzName = TYPE_TO_C.get(this.currentApi.request.type);
+        this.sort(this.currentApi.request.hashTree);
+      }
+    },
+    mockSetting() {
+      let mockParam = {};
+      mockParam.projectId = this.projectId;
+      if (this.currentApi.id) {
+        mockParam.apiId = this.currentApi.id;
+        this.$post('/mockConfig/genMockConfig', mockParam, response => {
+          let mockConfig = response.data;
+          mockConfig.apiName = this.currentApi.name;
+          mockConfig.versionName = this.currentApi.versionName;
+          this.baseMockConfigData = mockConfig;
         });
-      },
-      saveAsCase(api) {
+      }
+    },
+    runTest(data) {
+      this.$emit("runTest", data);
+    },
+    saveApi(data) {
+      this.$emit("saveApi", data);
+      if (data != null && data.tags !== 'null' && data.tags !== undefined) {
+        if (Object.prototype.toString.call(data.tags) === "[object String]") {
+          data.tags = JSON.parse(data.tags);
+        }
+      }
+      Object.assign(this.currentApi, data);
+      this.currentApi.isCopy = false;
+      this.mockSetting();
+      this.reload();
+    },
+    createRootModel() {
+      this.$emit("createRootModel");
+    },
+    editApi(data) {
+      this.$emit("editApi", data);
+    },
+    refresh() {
+      this.$emit("refresh");
+    },
+    checkout(data) {
+      Object.assign(this.currentApi, data);
+      this.reload();
+    },
+    changeTab(tabType) {
+      this.refreshButtonActiveClass(tabType);
+    },
+    removeListener() {
+      if (this.$refs && this.$refs.apiConfig) {
+        this.$refs.apiConfig.removeListener();
+      }
+    },
+    changeSelectDataRangeAll() {
+      this.$emit("changeSelectDataRangeAll");
+    },
+    handleCase(api) {
+      this.$emit("handleCase", api);
+    },
+    showExecResult(data) {
+      this.$emit("showExecResult", data);
+    },
+    addListener() {
+      if (this.$refs && this.$refs.apiConfig) {
+        this.$refs.apiConfig.addListener();
+      }
+    },
+    reload() {
+      this.loading = true;
+      this.$nextTick(() => {
+        this.loading = false;
+      });
+    },
+    saveAsCase(api) {
+      this.showApiList = false;
+      this.showTestCaseList = true;
+      this.showTest = false;
+      this.showMock = false;
+      this.createCase = getUUID();
+      this.api = api;
+      this.$refs.caseList.open();
+    },
+    refreshButtonActiveClass(tabType) {
+      if (tabType === "testCase") {
         this.showApiList = false;
         this.showTestCaseList = true;
         this.showTest = false;
         this.showMock = false;
-        this.createCase = getUUID();
-        this.api = api;
-        this.$refs.caseList.open();
-      },
-      refreshButtonActiveClass(tabType) {
-        if (tabType === "testCase") {
-          this.showApiList = false;
-          this.showTestCaseList = true;
-          this.showTest = false;
-          this.showMock = false;
-          this.$store.state.currentApiCase = {case: true};
-        } 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;
-        }
+        this.$store.state.currentApiCase = {case: true};
+      } 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.syncApi();
       }
     },
-  };
+    changeApi() {
+      this.showApiList = true;
+      this.showTestCaseList = false;
+      this.showTest = false;
+      this.showMock = false;
+      this.$store.state.currentApiCase = undefined;
+    },
+    syncApi() {
+      if (this.syncTabs && this.syncTabs.length > 0 && this.syncTabs.includes(this.currentApi.id)) {
+        // 标示接口在其他地方更新过，当前页面需要同步
+        let url = "/api/definition/get/";
+        this.$get(url + this.currentApi.id, response => {
+          if (response.data) {
+            let request = JSON.parse(response.data.request);
+            let index = this.syncTabs.findIndex(item => {
+              if (item === this.currentApi.id) {
+                return true;
+              }
+            });
+            this.syncTabs.splice(index, 1);
+            this.currentApi.request = request;
+            this.changeApi();
+          }
+        });
+      } else {
+        this.changeApi();
+      }
+    }
+  }
+};
 </script>
 
 <style scoped>
-  .active {
-    border: solid 1px #6d317c !important;
-    background-color: var(--primary_color) !important;
-    color: #FFFFFF !important;
-  }
+.active {
+  border: solid 1px #6d317c !important;
+  background-color: var(--primary_color) !important;
+  color: #FFFFFF !important;
+}
 
-  .case-button {
-    border-left: solid 1px var(--primary_color);
-  }
+.case-button {
+  border-left: solid 1px var(--primary_color);
+}
 
-  .item {
-    border: solid 1px var(--primary_color);
-  }
+.item {
+  border: solid 1px var(--primary_color);
+}
 
 
-  .api-case-simple-list >>> .el-table {
-    height: calc(100vh - 262px) !important;
-  }
+.api-case-simple-list >>> .el-table {
+  height: calc(100vh - 262px) !important;
+}
 
-  /deep/ .ms-opt-btn {
-    position: fixed;
-    right: 50px;
-    z-index: 1;
-    top: 128px;
-    float: right;
-    margin-right: 20px;
-    margin-top: 5px;
-  }
+/deep/ .ms-opt-btn {
+  position: fixed;
+  right: 50px;
+  z-index: 1;
+  top: 128px;
+  float: right;
+  margin-right: 20px;
+  margin-top: 5px;
+}
 </style>