style(接口测试): 导出html接口文档相关样式调整

Signed-off-by: fit2-zhao <yong.zhao@fit2cloud.com>

api-test/frontend/src/business/commons/json-schema/JsonSchemaEditor.vue

@@ -24,7 +24,7 @@
           </div>
         </div>
         <div :style="jsonSchemaDisable ? '' : 'min-height: 200px'">
-          <div style="overflow: auto">
+          <div style="overflow: auto; width: 100%">
             <json-schema-editor
               v-if="reloadedApiVariable"
               class="schema"

api-test/frontend/src/business/definition/components/document/ApiDocumentAnchor.vue

@@ -161,7 +161,7 @@
               :share-url="batchShareUrl"
               style="float: right; margin: 6px; font-size: 17px" />
 
-            <el-tooltip :content="$t('commons.export')" placement="top" v-xpack>
+            <el-tooltip :content="$t('commons.export')" placement="top" v-if="!isTemplate" v-xpack>
               <i
                 class="el-icon-download"
                 @click="handleExportHtml()"
@@ -176,6 +176,7 @@
               :key="apiInfo.id"
               :api-info="apiInfo"
               :project-id="projectId"
+              :isTemplate="isTemplate"
               @handleExportHtml="handleExportHtml"
               ref="apiDocInfoDivItem" />
           </div>
@@ -218,7 +219,7 @@ import { API_METHOD_COLOUR } from '@/business/definition/model/JsonData';
 import MsCodeEdit from 'metersphere-frontend/src/components/MsCodeEdit';
 import ApiStatus from '@/business/definition/components/list/ApiStatus';
 import MsJsonCodeEdit from '@/business/commons/json-schema/JsonSchemaEditor';
-import { generateApiDocumentShareInfo, documentShareUrl, selectApiInfoByParam } from '@/api/share';
+import { documentShareUrl, generateApiDocumentShareInfo, selectApiInfoByParam } from '@/api/share';
 import ApiInformation from '@/business/definition/components/document/components/ApiInformation';
 import { getCurrentUser } from 'metersphere-frontend/src/utils/token';
 import { request } from 'metersphere-frontend/src/plugins/request';
@@ -446,14 +447,13 @@ export default {
         let response = '#export-doc';
         this.apiInfoArray = response.listObject;
         this.total = response.itemCount;
-        if (response.length > this.maxComponentSize) {
-          this.needAsyncSelect = true;
-        } else {
-          this.needAsyncSelect = false;
-        }
+        this.needAsyncSelect = response.length > this.maxComponentSize;
         //每次查询完成之后定位右侧的步骤
         this.$nextTick(() => {
-          this.handleScroll();
+          let apiNodeDom = document.getElementsByName('apiInfoStepNode');
+          if (apiNodeDom) {
+            this.changeApiStepNodeClass(apiNodeDom[0], true);
+          }
         });
       } else {
         selectApiInfoByParam(simpleRequest, this.currentPage, this.pageSize).then((response) => {
@@ -527,8 +527,8 @@ export default {
     handleScroll() {
       if (!this.clickStepFlag && this.$refs.apiDocInfoDiv) {
         //apiNodeDom:设置右侧节点的样式
-        let apiNodeDoms = document.getElementsByName('apiInfoStepNode');
-        if (!apiNodeDoms) {
+        let apiNodeDom = document.getElementsByName('apiInfoStepNode');
+        if (!apiNodeDom) {
           return;
         }
 
@@ -539,16 +539,15 @@ export default {
         let mainDivHeight = this.$refs.apiDocInfoDiv.clientHeight;
 
         let apiDocDivScrollTop = scrollTopCount;
-        let screenHeight = mainDivHeight;
         for (let index = 0; index < this.apiInfoArray.length; index++) {
           let itemHeight = this.$refs.apiDocInfoDivItem[index].getHeight() + 3;
           if (apiDocDivScrollTop > itemHeight) {
-            this.changeApiStepNodeClass(apiNodeDoms[index], false);
+            this.changeApiStepNodeClass(apiNodeDom[index], false);
           } else {
-            if (screenHeight + apiDocDivScrollTop > 0) {
-              this.changeApiStepNodeClass(apiNodeDoms[index], true);
+            if (mainDivHeight + apiDocDivScrollTop > 0) {
+              this.changeApiStepNodeClass(apiNodeDom[index], true);
             } else {
-              this.changeApiStepNodeClass(apiNodeDoms[index], false);
+              this.changeApiStepNodeClass(apiNodeDom[index], false);
             }
           }
           apiDocDivScrollTop = apiDocDivScrollTop - itemHeight;

api-test/frontend/src/business/definition/components/document/components/ApiInformation.vue

@@ -8,7 +8,7 @@
         </div>
         <i class="el-icon-share" slot="reference" style="margin-right: 10px; cursor: pointer"></i>
       </el-popover>
-      <el-tooltip :content="$t('commons.export')" placement="top">
+      <el-tooltip :content="$t('commons.export')" placement="top" v-if="!isTemplate">
         <i
           class="el-icon-download"
           @click="handleExportHtml()"
@@ -173,6 +173,7 @@ export default {
   },
   props: {
     projectId: String,
+    isTemplate: String,
     apiInfo: Object,
   },
   computed: {},

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

@@ -227,7 +227,7 @@ import { getApiParamsConfigFields } from 'metersphere-frontend/src/utils/custom_
 import MsApiVariable from '../../ApiVariable';
 import MsApiAssertions from '../../assertion/ApiAssertions';
 import MsApiExtract from '../../extract/ApiExtract';
-import { Body, KeyValue } from '../../../model/ApiTestModel';
+import { Body, BODY_TYPE, KeyValue } from '../../../model/ApiTestModel';
 import { hasLicense, hasPermission } from 'metersphere-frontend/src/utils/permission';
 import { getUUID } from 'metersphere-frontend/src/utils';
 import BatchAddParameter from '../../basis/BatchAddParameter';
@@ -371,17 +371,35 @@ export default {
       return this.request.authManager && this.request.authManager.verification !== 'No Auth';
     },
     showSubscript() {
+      if (!this.request.body || !this.request.body.type) {
+        return false;
+      }
+      switch (this.request.body.type) {
+        case BODY_TYPE.RAW:
+        case BODY_TYPE.XML:
+          return this.request.body.raw;
+        case BODY_TYPE.BINARY:
           return (
-        (this.request.body.kvs && this.request.body.kvs.length > 1) ||
-        this.request.body.raw ||
-        this.request.body.xml ||
-        this.request.body.json ||
-        this.request.body.jsonSchema ||
-        (this.request.body.binary &&
+            this.request.body.binary &&
             this.request.body.binary.length > 0 &&
             this.request.body.binary[0].files &&
-          this.request.body.binary[0].files.length > 0)
+            this.request.body.binary[0].files.length > 0
           );
+        case BODY_TYPE.KV:
+          return this.request.body.kvs && this.request.body.kvs.length > 1;
+        case BODY_TYPE.JSON: {
+          if (this.request.body.format && this.request.body.format === 'JSON-SCHEMA') {
+            return this.request.body.jsonSchema;
+          } else {
+            return this.request.body.raw;
+          }
+        }
+        case BODY_TYPE.FORM_DATA:
+        case BODY_TYPE.WWW_FORM:
+          return this.request.body.kvs && this.request.body.kvs.length > 1;
+        default:
+          return false;
+      }
     },
     refreshApiParamsField() {
       let oldActiveName = this.activeName;

api-test/frontend/src/template/document/api-document.html

@@ -4,7 +4,6 @@
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-    <link rel="shortcut icon" href="<%= BASE_URL %>favicon.ico" />
     <title>api doc</title>
     <link inline rel="stylesheet" href="/prd/element-ui/element-font.css" />
   </head>