fix(接口测试): 接口定义请求体里的tooltip显示异常

api-test/frontend/src/App.vue

@@ -3,3 +3,11 @@
     <router-view />
   </div>
 </template>
+<style>
+/* table tooltip */
+.ms-table-tooltip{
+  max-width: 50vw;
+  max-height: 30vh;
+  overflow-y: auto;
+}
+</style>

api-test/frontend/src/business/automation/scenario/EditApiScenario.vue

@@ -85,7 +85,8 @@
         <!-- header 调试部分 -->
         <div class="ms-debug-div" @click="showAll" ref="debugHeader">
           <div class="debug-header">
-            <div class="ms-col-one mt-2" v-show="scenarioDefinition.length > 1">
+            <div class="ms-col-one mt-2">
+              <div class="mt-2" v-show="scenarioDefinition.length > 1">
               <el-tooltip
                 :content="$t('test_track.case.batch_operate')"
                 placement="top"
@@ -106,7 +107,6 @@
                   @click="cancelBatchProcessing" />
               </el-tooltip>
             </div>
-            <div class="ms-col-one mt-2">
               <div class="ml-10">{{ $t('api_test.automation.step_total') }}：{{ scenarioDefinition.length }}</div>
               <div class="ml-10">
                 <el-link class="head" @click="showScenarioParameters"

api-test/frontend/src/business/definition/components/ApiVariable.vue

@@ -11,7 +11,7 @@
           :prop="item.prop"
           :label="item.label"
           :min-width="getTableMinWidth(item.prop)"
-          show-overflow-tooltip>
+          :show-overflow-tooltip="item.prop !== 'value'">
           <template v-slot:default="scope">
             <div v-show="!scope.row.isEdit">
               <div v-if="item.prop === 'required' || item.prop === 'urlEncode'">
@@ -21,6 +21,9 @@
               <div v-else-if="item.prop === 'value' && isActive && scope.row.type === 'file'">
                 <ms-api-body-file-upload :parameter="scope.row" :id="id" :is-read-only="true" :disabled="true" />
               </div>
+              <div v-else-if="item.prop === 'value' && isActive && scope.row.type !== 'file'">
+                <overflow-tooltip :content="scope.row.value" :autoEnterable="true" popperClass="ms-table-tooltip" />
+              </div>
               <span v-else>
                 {{ scope.row[item.prop] }}
               </span>
@@ -191,6 +194,7 @@ import MsApiBodyFileUpload from './body/ApiBodyFileUpload';
 import Vue from 'vue';
 import ApiVariableSetting from '@/business/definition/components/ApiVariableSetting';
 import { getShowFields } from 'metersphere-frontend/src/utils/custom_field';
+import OverflowTooltip from '@/business/definition/components/overflow-tooltip/index.vue';
 
 export default {
   name: 'MsApiVariable',
@@ -199,6 +203,7 @@ export default {
     MsApiBodyFileUpload,
     MsApiVariableAdvance,
     MsApiVariableJson,
+    OverflowTooltip,
   },
   props: {
     id: String,

api-test/frontend/src/business/definition/components/overflow-tooltip/index.vue

@@ -0,0 +1,90 @@
+<template>
+  <el-tooltip
+    ref="tooltip"
+    :disabled="disabled"
+    effect="dark"
+    :content="content"
+    :placement="placement"
+    :enterable="autoEnter === null ? enterable : autoEnter"
+    :popper-class="popperClass"
+    :visible-arrow="false"
+  >
+    <div class="overflow-content-wrapper">
+      <span
+        ref="overflowTooltipContent"
+        class="overflow-content"
+        :class="className"
+        @mouseover="isOverflow"
+      >{{ content }}</span>
+    </div>
+  </el-tooltip>
+</template>
+
+<script>
+export default {
+  name: 'OverflowTooltip',
+  props: {
+    className: {
+      type: String,
+      default: ''
+    },
+    content: {
+      type: String,
+      default: ''
+    },
+    enterable: {
+      type: Boolean,
+      default: false
+    },
+    autoEnterable: {
+      type: Boolean,
+      default: false
+    },
+    popperClass: {
+      type: String,
+      default: ''
+    },
+    placement: {
+      type: String,
+      default: 'top'
+    }
+  },
+  data() {
+    return {
+      disabled: true,
+      autoEnter: null
+    };
+  },
+  methods: {
+    isOverflow() {
+      const el = this.$refs.overflowTooltipContent;
+      if (el) {
+        const parent = el.parentNode;
+        this.disabled = parent.offsetWidth >= el.offsetWidth;
+      }
+      if (this.autoEnterable) {
+        setTimeout(() => {
+          const popper = this.$refs.tooltip.$refs.popper;
+          if (popper) {
+            this.autoEnter = popper.offsetHeight < popper.scrollHeight;
+          }
+        }, 100);
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+.overflow-content-wrapper {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.overflow-content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>