From 28161744ed7c8177da0e4142e2922c26639f3ed5 Mon Sep 17 00:00:00 2001
From: fit2-zhao <yong.zhao@fit2cloud.com>
Date: Mon, 31 May 2021 13:54:31 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E6=8E=A5=E5=8F=A3=E8=87=AA=E5=8A=A8?=
 =?UTF-8?q?=E5=8C=96):=20=E4=BF=AE=E5=A4=8D=E8=87=AA=E5=AE=9A=E4=B9=89?=
 =?UTF-8?q?=E6=8E=A5=E5=8F=A3=E6=98=BE=E7=A4=BA=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../scenario/component/ApiComponent.vue       | 679 +++++++++---------
 1 file changed, 340 insertions(+), 339 deletions(-)

diff --git a/frontend/src/business/components/api/automation/scenario/component/ApiComponent.vue b/frontend/src/business/components/api/automation/scenario/component/ApiComponent.vue
index 8973f39193..8a5cef8302 100644
--- a/frontend/src/business/components/api/automation/scenario/component/ApiComponent.vue
+++ b/frontend/src/business/components/api/automation/scenario/component/ApiComponent.vue
@@ -15,10 +15,10 @@
       :title="displayTitle">
 
       <template v-slot:behindHeaderLeft>
-        <el-tag size="mini" class="ms-tag" v-if="request.referenced==='Deleted'" type="danger">{{$t('api_test.automation.reference_deleted')}}</el-tag>
+        <el-tag size="mini" class="ms-tag" v-if="request.referenced==='Deleted'" type="danger">{{ $t('api_test.automation.reference_deleted') }}</el-tag>
         <el-tag size="mini" class="ms-tag" v-if="request.referenced==='Copy'">{{ $t('commons.copy') }}</el-tag>
         <el-tag size="mini" class="ms-tag" v-if="request.referenced ==='REF'">{{ $t('api_test.scenario.reference') }}</el-tag>
-        <span class="ms-tag">{{getProjectName(request.projectId)}}</span>
+        <span class="ms-tag">{{ getProjectName(request.projectId) }}</span>
       </template>
 
       <template v-slot:button>
@@ -83,362 +83,363 @@
 </template>
 
 <script>
-  import MsSqlBasisParameters from "../../../definition/components/request/database/BasisParameters";
-  import MsTcpBasisParameters from "../../../definition/components/request/tcp/TcpBasisParameters";
-  import MsDubboBasisParameters from "../../../definition/components/request/dubbo/BasisParameters";
-  import MsApiRequestForm from "../../../definition/components/request/http/ApiHttpRequestForm";
-  import MsRequestResultTail from "../../../definition/components/response/RequestResultTail";
-  import MsRun from "../../../definition/components/Run";
-  import {getUUID, getCurrentProjectID} from "@/common/js/utils";
-  import ApiBaseComponent from "../common/ApiBaseComponent";
-  import ApiResponseComponent from "./ApiResponseComponent";
-  import CustomizeReqInfo from "@/business/components/api/automation/scenario/common/CustomizeReqInfo";
+import MsSqlBasisParameters from "../../../definition/components/request/database/BasisParameters";
+import MsTcpBasisParameters from "../../../definition/components/request/tcp/TcpBasisParameters";
+import MsDubboBasisParameters from "../../../definition/components/request/dubbo/BasisParameters";
+import MsApiRequestForm from "../../../definition/components/request/http/ApiHttpRequestForm";
+import MsRequestResultTail from "../../../definition/components/response/RequestResultTail";
+import MsRun from "../../../definition/components/Run";
+import {getUUID, getCurrentProjectID} from "@/common/js/utils";
+import ApiBaseComponent from "../common/ApiBaseComponent";
+import ApiResponseComponent from "./ApiResponseComponent";
+import CustomizeReqInfo from "@/business/components/api/automation/scenario/common/CustomizeReqInfo";
 
-  const requireComponent = require.context('@/business/components/xpack/', true, /\.vue$/);
-  const esbDefinition = (requireComponent != null && requireComponent.keys().length) > 0 ? requireComponent("./apidefinition/EsbDefinition.vue") : {};
-  const esbDefinitionResponse = (requireComponent != null && requireComponent.keys().length) > 0 ? requireComponent("./apidefinition/EsbDefinitionResponse.vue") : {};
+const requireComponent = require.context('@/business/components/xpack/', true, /\.vue$/);
+const esbDefinition = (requireComponent != null && requireComponent.keys().length) > 0 ? requireComponent("./apidefinition/EsbDefinition.vue") : {};
+const esbDefinitionResponse = (requireComponent != null && requireComponent.keys().length) > 0 ? requireComponent("./apidefinition/EsbDefinitionResponse.vue") : {};
 
-  export default {
-    name: "MsApiComponent",
-    props: {
-      request: {},
-      currentScenario: {},
-      node: {},
-      draggable: {
-        type: Boolean,
-        default: false,
-      },
-      isMax: {
-        type: Boolean,
-        default: false,
-      },
-      showBtn: {
-        type: Boolean,
-        default: true,
-      },
-      currentEnvironmentId: String,
-      projectList: Array,
-      expandedNode: Array,
-      envMap: Map
+export default {
+  name: "MsApiComponent",
+  props: {
+    request: {},
+    currentScenario: {},
+    node: {},
+    draggable: {
+      type: Boolean,
+      default: false,
     },
-    components: {
-      CustomizeReqInfo,
-      ApiBaseComponent, ApiResponseComponent,
-      MsSqlBasisParameters, MsTcpBasisParameters, MsDubboBasisParameters, MsApiRequestForm, MsRequestResultTail, MsRun,
-      "esbDefinition": esbDefinition.default,
-      "esbDefinitionResponse": esbDefinitionResponse.default
+    isMax: {
+      type: Boolean,
+      default: false,
     },
-    data() {
-      return {
-        loading: false,
-        reportId: "",
-        runData: [],
-        isShowInput: false,
-        showXpackCompnent: false,
-        environment: {},
-      }
+    showBtn: {
+      type: Boolean,
+      default: true,
     },
-    created() {
-      if (!this.request.requestResult) {
-        this.request.requestResult = {responseResult: {}};
-      }
-      // 跨项目关联，如果没有ID，则赋值本项目ID
-      if (!this.request.projectId) {
-        this.request.projectId = getCurrentProjectID();
-      }
-      this.request.customizeReq = this.isCustomizeReq;
-      // 加载引用对象数据
-      this.getApiInfo();
-      if (this.request.protocol === 'HTTP') {
-        this.setUrl(this.request.url);
-        this.setUrl(this.request.path);
-        // 历史数据 auth 处理
-        if (this.request.hashTree) {
-          for (let index in this.request.hashTree) {
-            if (this.request.hashTree[index].type == 'AuthManager') {
-              this.request.authManager = this.request.hashTree[index];
-              this.request.hashTree.splice(index, 1);
-            }
+    currentEnvironmentId: String,
+    projectList: Array,
+    expandedNode: Array,
+    envMap: Map
+  },
+  components: {
+    CustomizeReqInfo,
+    ApiBaseComponent, ApiResponseComponent,
+    MsSqlBasisParameters, MsTcpBasisParameters, MsDubboBasisParameters, MsApiRequestForm, MsRequestResultTail, MsRun,
+    "esbDefinition": esbDefinition.default,
+    "esbDefinitionResponse": esbDefinitionResponse.default
+  },
+  data() {
+    return {
+      loading: false,
+      reportId: "",
+      runData: [],
+      isShowInput: false,
+      showXpackCompnent: false,
+      environment: {},
+    }
+  },
+  created() {
+    if (!this.request.requestResult) {
+      this.request.requestResult = {responseResult: {}};
+    }
+    // 跨项目关联，如果没有ID，则赋值本项目ID
+    if (!this.request.projectId) {
+      this.request.projectId = getCurrentProjectID();
+    }
+    this.request.customizeReq = this.isCustomizeReq;
+    // 加载引用对象数据
+    this.getApiInfo();
+    if (this.request.protocol === 'HTTP') {
+      this.setUrl(this.request.url);
+      this.setUrl(this.request.path);
+      // 历史数据 auth 处理
+      if (this.request.hashTree) {
+        for (let index in this.request.hashTree) {
+          if (this.request.hashTree[index].type == 'AuthManager') {
+            this.request.authManager = this.request.hashTree[index];
+            this.request.hashTree.splice(index, 1);
           }
         }
       }
-      if (requireComponent != null && JSON.stringify(esbDefinition) != '{}' && JSON.stringify(esbDefinitionResponse) != '{}') {
-        this.showXpackCompnent = true;
-      }
-      this.getEnvironments();
-    },
-    watch: {
-      envMap() {
-        this.getEnvironments();
-      },
-    },
-    computed: {
-      displayColor() {
-        if (this.isApiImport) {
-          return {
-            color: "#F56C6C",
-            backgroundColor: "#FCF1F1"
-          }
-        } else if (this.isExternalImport) {
-          return {
-            color: "#409EFF",
-            backgroundColor: "#EEF5FE"
-          }
-        } else if (this.isCustomizeReq) {
-          return {
-            color: "#008080",
-            backgroundColor: "#EBF2F2"
-          }
-        }
-        return {};
-      },
-      displayTitle() {
-        if (this.isApiImport) {
-          return this.$t('api_test.automation.api_list_import');
-        } else if (this.isExternalImport) {
-          return this.$t('api_test.automation.external_import');
-        } else if (this.isCustomizeReq) {
-          return this.$t('api_test.automation.customize_req');
-        }
-        return "";
-      },
-      isApiImport() {
-        if (this.request.referenced != undefined && this.request.referenced === 'Deleted' || this.request.referenced == 'REF' || this.request.referenced === 'Copy') {
-          return true
-        }
-        return false;
-      },
-      isExternalImport() {
-        if (this.request.referenced != undefined && this.request.referenced === 'OT_IMPORT') {
-          return true
-        }
-        return false;
-      },
-      isCustomizeReq() {
-        if (this.request.referenced == undefined || this.request.referenced === 'Created') {
-          return true;
-        }
-        return false;
-      },
-      isDeletedOrRef() {
-        if (this.request.referenced != undefined && this.request.referenced === 'Deleted' || this.request.referenced === 'REF') {
-          return true;
-        }
-        return false;
-      },
-      projectId() {
-        return this.$store.state.projectId;
-      },
-    },
-    methods: {
-      initDataSource() {
-        let databaseConfigsOptions = [];
-        if (this.request.protocol === 'SQL' || this.request.type === 'JDBCSampler') {
-          if (this.environment.config) {
-            let config = JSON.parse(this.environment.config);
-            config.databaseConfigs.forEach(item => {
-              databaseConfigsOptions.push(item);
-            });
-          }
-        }
-        if (databaseConfigsOptions.length > 0) {
-          this.request.dataSourceId = databaseConfigsOptions[0].id;
-          this.request.environmentId = this.environment.id;
-        }
-      },
-      getEnvironments() {
-        this.environment = {};
-        let id = this.envMap.get(this.request.projectId);
-        if (id) {
-          this.$get('/api/environment/get/' + id, response => {
-            this.environment = response.data;
-            this.initDataSource();
-          });
-        }
-      },
-      remove() {
-        this.$emit('remove', this.request, this.node);
-      },
-      copyRow() {
-        this.$emit('copyRow', this.request, this.node);
-      },
-      setUrl(url) {
-        try {
-          new URL(url);
-          this.request.url = url;
-        } catch (e) {
-          if (url && (!url.startsWith("http://") || !url.startsWith("https://"))) {
-            if (!this.isCustomizeReq) {
-              this.request.path = url;
-              this.request.url = undefined;
-            }
-          }
-        }
-      },
-      getApiInfo() {
-        if (this.request.id && this.request.referenced === 'REF') {
-          let requestResult = this.request.requestResult;
-          let url = this.request.refType && this.request.refType === 'CASE' ? "/api/testcase/get/" : "/api/definition/get/";
-          let enable = this.request.enable;
-          this.$get(url + this.request.id, response => {
-            if (response.data) {
-              Object.assign(this.request, JSON.parse(response.data.request));
-              this.request.name = response.data.name;
-              this.request.enable = enable;
-              if (response.data.path && response.data.path != null) {
-                this.request.path = response.data.path;
-                this.request.url = response.data.url;
-                this.setUrl(this.request.path);
-              }
-              if (response.data.method && response.data.method != null) {
-                this.request.method = response.data.method;
-              }
-              this.request.requestResult = requestResult;
-              this.request.id = response.data.id;
-              this.request.disabled = true;
-              this.request.root = true;
-              this.request.projectId = response.data.projectId;
-              this.reload();
-              this.sort();
-            } else {
-              this.request.referenced = "Deleted";
-            }
-          })
-        }
-      },
-      recursiveSorting(arr) {
-        for (let i in arr) {
-          arr[i].disabled = true;
-          arr[i].index = Number(i) + 1;
-          if (!arr[i].resourceId) {
-            arr[i].resourceId = getUUID();
-          }
-          if (arr[i].hashTree != undefined && arr[i].hashTree.length > 0) {
-            this.recursiveSorting(arr[i].hashTree);
-          }
-        }
-      },
-      sort() {
-        for (let i in this.request.hashTree) {
-          if (!this.request.hashTree[i].resourceId) {
-            this.request.hashTree[i].resourceId = getUUID();
-          }
-          this.request.hashTree[i].disabled = true;
-          this.request.hashTree[i].index = Number(i) + 1;
-          if (this.request.hashTree[i].hashTree != undefined && this.request.hashTree[i].hashTree.length > 0) {
-            this.recursiveSorting(this.request.hashTree[i].hashTree);
-          }
-        }
-      },
-      active(item) {
-        this.request.active = !this.request.active;
-        if (this.node) {
-          this.node.expanded = this.request.active;
-        }
-        if (this.node.expanded && this.expandedNode.indexOf(this.request.resourceId) === -1) {
-          this.expandedNode.push(this.request.resourceId);
-        } else {
-          if (this.expandedNode.indexOf(this.request.resourceId) !== -1) {
-            this.expandedNode.splice(this.expandedNode.indexOf(this.request.resourceId), 1);
-          }
-        }
-        this.reload();
-      },
-      run() {
-        if (this.isApiImport || this.request.isRefEnvironment) {
-          if (this.request.type && (this.request.type === "HTTPSamplerProxy" || this.request.type === "JDBCSampler" || this.request.type === "TCPSampler")) {
-            if (!this.envMap || this.envMap.size === 0) {
-              this.$warning("请在环境配置中为该步骤所属项目选择运行环境！");
-              return false;
-            } else if (this.envMap && this.envMap.size > 0) {
-              const env = this.envMap.get(this.request.projectId);
-              if (!env) {
-                this.$warning("请在环境配置中为该步骤所属项目选择运行环境！");
-                return false;
-              }
-            }
-          }
-        }
-        this.request.active = true;
-        this.loading = true;
-        this.runData = [];
-        this.runData.projectId = this.request.projectId;
-        this.request.useEnvironment = this.currentEnvironmentId;
-        this.request.customizeReq = this.isCustomizeReq;
-        let debugData = {
-          id: this.currentScenario.id, name: this.currentScenario.name, type: "scenario",
-          variables: this.currentScenario.variables, referenced: 'Created', headers: this.currentScenario.headers,
-          enableCookieShare: this.enableCookieShare, environmentId: this.currentEnvironmentId, hashTree: [this.request],
-        };
-        this.runData.push(debugData);
-        /*触发执行操作*/
-        this.reportId = getUUID();
-      },
-      errorRefresh() {
-        this.loading = false;
-      },
-      runRefresh(data) {
-        this.request.requestResult = data;
-        this.request.result = undefined;
-        this.loading = false;
-        this.$emit('refReload', this.request, this.node);
-      },
-      reload() {
-        this.loading = true
-        this.$nextTick(() => {
-          this.loading = false
-        })
-      },
-      getProjectName(id) {
-        if (this.projectId !== id) {
-          const project = this.projectList.find(p => p.id === id);
-          return project ? project.name : "";
-        }
-
-      }
+    }
+    if (requireComponent != null && JSON.stringify(esbDefinition) != '{}' && JSON.stringify(esbDefinitionResponse) != '{}') {
+      this.showXpackCompnent = true;
+    }
+    this.getEnvironments();
+  },
+  watch: {
+    envMap() {
+      this.getEnvironments();
+    },
+  },
+  computed: {
+    displayColor() {
+      if (this.isApiImport) {
+        return {
+          color: "#F56C6C",
+          backgroundColor: "#FCF1F1"
+        }
+      } else if (this.isExternalImport) {
+        return {
+          color: "#409EFF",
+          backgroundColor: "#EEF5FE"
+        }
+      } else if (this.isCustomizeReq) {
+        return {
+          color: "#008080",
+          backgroundColor: "#EBF2F2"
+        }
+      }
+      return {};
+    },
+    displayTitle() {
+      if (this.isApiImport) {
+        return this.$t('api_test.automation.api_list_import');
+      } else if (this.isExternalImport) {
+        return this.$t('api_test.automation.external_import');
+      } else if (this.isCustomizeReq) {
+        return this.$t('api_test.automation.customize_req');
+      }
+      return "";
+    },
+    isApiImport() {
+      if (this.request.referenced != undefined && this.request.referenced === 'Deleted' || this.request.referenced == 'REF' || this.request.referenced === 'Copy') {
+        return true
+      }
+      return false;
+    },
+    isExternalImport() {
+      if (this.request.referenced != undefined && this.request.referenced === 'OT_IMPORT') {
+        return true
+      }
+      return false;
+    },
+    isCustomizeReq() {
+      if (this.request.referenced == undefined || this.request.referenced === 'Created') {
+        return true;
+      }
+      return false;
+    },
+    isDeletedOrRef() {
+      if (this.request.referenced != undefined && this.request.referenced === 'Deleted' || this.request.referenced === 'REF') {
+        return true;
+      }
+      return false;
+    },
+    projectId() {
+      return this.$store.state.projectId;
+    },
+  },
+  methods: {
+    initDataSource() {
+      let databaseConfigsOptions = [];
+      if (this.request.protocol === 'SQL' || this.request.type === 'JDBCSampler') {
+        if (this.environment.config) {
+          let config = JSON.parse(this.environment.config);
+          config.databaseConfigs.forEach(item => {
+            databaseConfigsOptions.push(item);
+          });
+        }
+      }
+      if (databaseConfigsOptions.length > 0) {
+        this.request.dataSourceId = databaseConfigsOptions[0].id;
+        this.request.environmentId = this.environment.id;
+      }
+    },
+    getEnvironments() {
+      this.environment = {};
+      let id = this.envMap.get(this.request.projectId);
+      if (id) {
+        this.$get('/api/environment/get/' + id, response => {
+          this.environment = response.data;
+          this.initDataSource();
+        });
+      }
+    },
+    remove() {
+      this.$emit('remove', this.request, this.node);
+    },
+    copyRow() {
+      this.$emit('copyRow', this.request, this.node);
+    },
+    setUrl(url) {
+      try {
+        new URL(url);
+        this.request.url = url;
+      } catch (e) {
+        if (url && (!url.startsWith("http://") || !url.startsWith("https://"))) {
+          if (!this.isCustomizeReq) {
+            this.request.path = url;
+            this.request.url = undefined;
+          }
+        }
+      }
+    },
+    getApiInfo() {
+      if (this.request.id && this.request.referenced === 'REF') {
+        let requestResult = this.request.requestResult;
+        let url = this.request.refType && this.request.refType === 'CASE' ? "/api/testcase/get/" : "/api/definition/get/";
+        let enable = this.request.enable;
+        this.$get(url + this.request.id, response => {
+          if (response.data) {
+            Object.assign(this.request, JSON.parse(response.data.request));
+            this.request.name = response.data.name;
+            this.request.referenced = "REF";
+            this.request.enable = enable;
+            if (response.data.path && response.data.path != null) {
+              this.request.path = response.data.path;
+              this.request.url = response.data.url;
+              this.setUrl(this.request.path);
+            }
+            if (response.data.method && response.data.method != null) {
+              this.request.method = response.data.method;
+            }
+            this.request.requestResult = requestResult;
+            this.request.id = response.data.id;
+            this.request.disabled = true;
+            this.request.root = true;
+            this.request.projectId = response.data.projectId;
+            this.reload();
+            this.sort();
+          } else {
+            this.request.referenced = "Deleted";
+          }
+        })
+      }
+    },
+    recursiveSorting(arr) {
+      for (let i in arr) {
+        arr[i].disabled = true;
+        arr[i].index = Number(i) + 1;
+        if (!arr[i].resourceId) {
+          arr[i].resourceId = getUUID();
+        }
+        if (arr[i].hashTree != undefined && arr[i].hashTree.length > 0) {
+          this.recursiveSorting(arr[i].hashTree);
+        }
+      }
+    },
+    sort() {
+      for (let i in this.request.hashTree) {
+        if (!this.request.hashTree[i].resourceId) {
+          this.request.hashTree[i].resourceId = getUUID();
+        }
+        this.request.hashTree[i].disabled = true;
+        this.request.hashTree[i].index = Number(i) + 1;
+        if (this.request.hashTree[i].hashTree != undefined && this.request.hashTree[i].hashTree.length > 0) {
+          this.recursiveSorting(this.request.hashTree[i].hashTree);
+        }
+      }
+    },
+    active(item) {
+      this.request.active = !this.request.active;
+      if (this.node) {
+        this.node.expanded = this.request.active;
+      }
+      if (this.node.expanded && this.expandedNode.indexOf(this.request.resourceId) === -1) {
+        this.expandedNode.push(this.request.resourceId);
+      } else {
+        if (this.expandedNode.indexOf(this.request.resourceId) !== -1) {
+          this.expandedNode.splice(this.expandedNode.indexOf(this.request.resourceId), 1);
+        }
+      }
+      this.reload();
+    },
+    run() {
+      if (this.isApiImport || this.request.isRefEnvironment) {
+        if (this.request.type && (this.request.type === "HTTPSamplerProxy" || this.request.type === "JDBCSampler" || this.request.type === "TCPSampler")) {
+          if (!this.envMap || this.envMap.size === 0) {
+            this.$warning("请在环境配置中为该步骤所属项目选择运行环境！");
+            return false;
+          } else if (this.envMap && this.envMap.size > 0) {
+            const env = this.envMap.get(this.request.projectId);
+            if (!env) {
+              this.$warning("请在环境配置中为该步骤所属项目选择运行环境！");
+              return false;
+            }
+          }
+        }
+      }
+      this.request.active = true;
+      this.loading = true;
+      this.runData = [];
+      this.runData.projectId = this.request.projectId;
+      this.request.useEnvironment = this.currentEnvironmentId;
+      this.request.customizeReq = this.isCustomizeReq;
+      let debugData = {
+        id: this.currentScenario.id, name: this.currentScenario.name, type: "scenario",
+        variables: this.currentScenario.variables, referenced: 'Created', headers: this.currentScenario.headers,
+        enableCookieShare: this.enableCookieShare, environmentId: this.currentEnvironmentId, hashTree: [this.request],
+      };
+      this.runData.push(debugData);
+      /*触发执行操作*/
+      this.reportId = getUUID();
+    },
+    errorRefresh() {
+      this.loading = false;
+    },
+    runRefresh(data) {
+      this.request.requestResult = data;
+      this.request.result = undefined;
+      this.loading = false;
+      this.$emit('refReload', this.request, this.node);
+    },
+    reload() {
+      this.loading = true
+      this.$nextTick(() => {
+        this.loading = false
+      })
+    },
+    getProjectName(id) {
+      if (this.projectId !== id) {
+        const project = this.projectList.find(p => p.id === id);
+        return project ? project.name : "";
+      }
+
     }
   }
+}
 </script>
 
 <style scoped>
-  .ms-api-col-ot-import-button {
-    background-color: #EEF5FE;
-    margin-right: 20px;
-    color: #409EFF;
-  }
+.ms-api-col-ot-import-button {
+  background-color: #EEF5FE;
+  margin-right: 20px;
+  color: #409EFF;
+}
 
-  /deep/ .el-card__body {
-    padding: 10px;
-  }
+/deep/ .el-card__body {
+  padding: 10px;
+}
 
-  .tip {
-    padding: 3px 5px;
-    font-size: 16px;
-    border-radius: 4px;
-    border-left: 4px solid #783887;
-    margin: 20px 0;
-  }
+.tip {
+  padding: 3px 5px;
+  font-size: 16px;
+  border-radius: 4px;
+  border-left: 4px solid #783887;
+  margin: 20px 0;
+}
 
-  .icon.is-active {
-    transform: rotate(90deg);
-  }
+.icon.is-active {
+  transform: rotate(90deg);
+}
 
-  .ms-tabs >>> .el-icon-close:before {
-    content: "";
+.ms-tabs >>> .el-icon-close:before {
+  content: "";
 
-  }
+}
 
-  .ms-btn {
-    background-color: #409EFF;
-    color: white;
-  }
+.ms-btn {
+  background-color: #409EFF;
+  color: white;
+}
 
-  .ms-btn-flot {
-    margin: 20px;
-    float: right;
-  }
+.ms-btn-flot {
+  margin: 20px;
+  float: right;
+}
 
-  .ms-tag {
-    margin-left: 20px;
-  }
+.ms-tag {
+  margin-left: 20px;
+}
 </style>