Merge branch 'master' of https://github.com/metersphere/metersphere

frontend/src/business/components/api/definition/components/body/ApiBody.vue

@@ -130,12 +130,14 @@
         })
         if (!isType) {
           this.headers.unshift(new KeyValue({name: "Content-Type", value: value}));
+          this.$emit('headersChange');
         }
       },
       removeContentType() {
         for (let index in this.headers) {
           if (this.headers[index].name === "Content-Type") {
             this.headers.splice(index, 1);
+            this.$emit('headersChange');
             return;
           }
         }

frontend/src/business/components/api/definition/components/request/http/ApiHttpRequestForm.vue

@@ -3,7 +3,7 @@
     <el-col :span="21">
       <!-- HTTP 请求参数 -->
       <div style="border:1px #DCDFE6 solid; height: 100%;border-radius: 4px ;width: 100%">
-        <el-tabs v-model="activeName" style="margin: 20px;min-height: 200px">
+        <el-tabs v-model="activeName" class="request-tabs">
           <!-- 请求头-->
           <el-tab-pane :label="$t('api_test.request.headers')" name="headers">
             <el-tooltip class="item-tabs" effect="dark" :content="$t('api_test.request.headers')" placement="top-start" slot="label">
@@ -43,8 +43,8 @@
           </el-tab-pane>
 
           <!--请求体-->
-          <el-tab-pane :label="$t('api_test.request.body')" name="body">
+          <el-tab-pane v-if="isBodyShow" :label="$t('api_test.request.body')" name="body">
-            <ms-api-body :is-read-only="isReadOnly" :isShowEnable="isShowEnable" :headers="headers" :body="request.body"/>
+            <ms-api-body @headersChange="reloadBody" :is-read-only="isReadOnly" :isShowEnable="isShowEnable" :headers="headers" :body="request.body"/>
           </el-tab-pane>
 
           <!-- 认证配置 -->
@@ -75,13 +75,13 @@
     </el-col>
     <!--操作按钮-->
     <el-col :span="3" class="ms-left-cell">
-      <el-button class="ms-left-buttion" size="small" style="color: #B8741A;background-color: #F9F1EA" @click="addPre">+{{$t('api_test.definition.request.pre_script')}}</el-button>
+      <el-button class="ms-left-buttion" size="small" @click="addPre">+{{$t('api_test.definition.request.pre_script')}}</el-button>
       <br/>
-      <el-button class="ms-left-buttion" size="small" style="color: #783887;background-color: #F2ECF3" @click="addPost">+{{$t('api_test.definition.request.post_script')}}</el-button>
+      <el-button class="ms-left-buttion" size="small" @click="addPost">+{{$t('api_test.definition.request.post_script')}}</el-button>
       <br/>
-      <el-button class="ms-left-buttion" size="small" style="color: #A30014;background-color: #F7E6E9" @click="addAssertions">+{{$t('api_test.definition.request.assertions_rule')}}</el-button>
+      <el-button class="ms-left-buttion" size="small" @click="addAssertions">+{{$t('api_test.definition.request.assertions_rule')}}</el-button>
       <br/>
-      <el-button class="ms-left-buttion" size="small" style="color: #015478;background-color: #E6EEF2" @click="addExtract">+{{$t('api_test.definition.request.extract_param')}}</el-button>
+      <el-button class="ms-left-buttion" size="small" @click="addExtract">+{{$t('api_test.definition.request.extract_param')}}</el-button>
     </el-col>
   </el-row>
 </template>
@@ -148,6 +148,7 @@
         },
         headerSuggestions: REQUEST_HEADERS,
         isReloadData: false,
+        isBodyShow: true
       }
     },
 
@@ -207,8 +208,15 @@
         if (!this.request.arguments) {
           this.request.arguments = [];
         }
+      },
+      // 解决修改请求头后 body 显示错位
+      reloadBody() {
+        this.isBodyShow = false;
+        this.$nextTick(() => {
+          this.isBodyShow = true;
+        });
       }
-    },
+    }
   }
 </script>
 
@@ -222,7 +230,7 @@
   }
 
   .ms-query {
-    background: #7F7F7F;
+    background: #783887;
     color: white;
     height: 18px;
     border-radius: 42%;
@@ -234,4 +242,34 @@
     height: 18px;
     border-radius: 42%;
   }
+
+  .request-tabs {
+    margin: 20px;
+    min-height: 200px;
+  }
+
+  .ms-left-cell .el-button:nth-of-type(1) {
+    color: #B8741A;
+    background-color: #F9F1EA;
+    border: #F9F1EA;
+  }
+
+  .ms-left-cell .el-button:nth-of-type(2) {
+    color: #783887;
+    background-color: #F2ECF3;
+    border: #F2ECF3;
+  }
+
+  .ms-left-cell .el-button:nth-of-type(3) {
+    color: #A30014;
+    background-color: #F7E6E9;
+    border: #F7E6E9;
+  }
+
+  .ms-left-cell .el-button:nth-of-type(4) {
+    color: #015478;
+    background-color: #E6EEF2;
+    border: #E6EEF2;
+  }
+
 </style>

frontend/src/business/components/common/components/MsCodeEdit.vue

@@ -54,6 +54,9 @@
         }
       },
       mounted() {
+        if (!this.data) {
+          this.formatData = "";
+        }
         this.format();
       },
       watch: {
@@ -81,20 +84,20 @@
         },
         format() {
           if (this.enableFormat) {
-            switch (this.mode) {
+            if (this.data) {
-              case 'json':
+              switch (this.mode) {
-                this.formatData = formatJson(this.data);
+                case 'json':
-                break;
+                  this.formatData = formatJson(this.data);
-              case 'html':
+                  break;
-                this.formatData = toDiffableHtml(this.data);
+                case 'html':
-                break;
+                  this.formatData = toDiffableHtml(this.data);
-              case 'xml':
+                  break;
-                this.formatData = formatXml(this.data);
+                case 'xml':
-                break;
+                  this.formatData = formatXml(this.data);
-              default:
+                  break;
-                if (this.data) {
+                default:
                   this.formatData = this.data;
-                }
+              }
             }
           } else {
             this.formatData = this.data;

frontend/src/business/components/common/head/SearchList.vue

@@ -16,7 +16,7 @@
         <template slot="title">
           <div class="title">
             {{ i.name }}
-            <i class="el-icon-check" v-if="i.id === projectId"></i>
+            <i class="el-icon-check" v-if="i.id === currentProjectId"></i>
           </div>
         </template>
       </el-menu-item>
@@ -26,7 +26,7 @@
 </template>
 
 <script>
-import {getCurrentUser, hasRoles} from "@/common/js/utils";
+import {getCurrentProjectID, getCurrentUser, hasRoles} from "@/common/js/utils";
 import {PROJECT_ID, ROLE_TEST_MANAGER, ROLE_TEST_USER, ROLE_TEST_VIEWER} from "@/common/js/constants";
 
 export default {
@@ -43,7 +43,7 @@ export default {
       items: [],
       search_text: '',
       userId: getCurrentUser().id,
-      projectId: localStorage.getItem(PROJECT_ID)
+      currentProjectId: localStorage.getItem(PROJECT_ID)
     }
   },
   watch: {
@@ -61,6 +61,9 @@ export default {
         this.result = this.$get(this.options.url, (response) => {
           this.items = response.data;
           this.items = this.items.splice(0, 3);
+          if (!getCurrentProjectID() && this.items.length > 0) {
+            this.change(this.items[0].id);
+          }
         });
       }
     },
@@ -72,7 +75,6 @@ export default {
       }
     },
     change(projectId) {
-      // todo 初始化的时候切换默认项目
       this.$post("/user/update/current", {id: this.userId, lastProjectId: projectId}, () => {
         localStorage.setItem(PROJECT_ID, projectId);
         window.location.reload();

frontend/src/common/js/utils.js

@@ -96,6 +96,7 @@ export function getCurrentProjectID() {
 export function saveLocalStorage(response) {
   // 登录信息保存 cookie
   localStorage.setItem(TokenKey, JSON.stringify(response.data));
+  localStorage.setItem(PROJECT_ID, response.data.lastProjectId);
   let rolesArray = response.data.roles;
   let roles = rolesArray.map(r => r.id);
   // 保存角色