refactor(接口测试): 断言表达式内容过长显示提示

--story=1007679 --user=赵勇 #13627[企业用户] 断言中如果字符过长显示不全，期望有悬浮显示的功能
https://www.tapd.cn/55049933/s/1180364

frontend/src/business/components/api/definition/components/assertion/ApiAssertionJsonPath.vue

@@ -2,8 +2,10 @@
   <div v-loading="loading">
     <el-row :gutter="10" type="flex" justify="space-between" align="middle">
       <el-col>
-        <el-input :disabled="isReadOnly" v-model="jsonPath.expression" maxlength="500" size="small" show-word-limit
+        <el-tooltip :disabled="showTip" placement="top" :content="jsonPath.expression">
-                  :placeholder="$t('api_test.request.extract.json_path_expression')"/>
+          <el-input :disabled="isReadOnly" v-model="jsonPath.expression" maxlength="500" size="small" show-word-limit
+                    :placeholder="$t('api_test.request.extract.json_path_expression')"/>
+        </el-tooltip>
       </el-col>
       <el-col>
         <el-select :disabled="isReadOnly" v-model="jsonPath.option" class="ms-col-type" size="small"
@@ -37,89 +39,91 @@
 </template>
 
 <script>
-  import {JSONPath} from "../../model/ApiTestModel";
+import {JSONPath} from "../../model/ApiTestModel";
 
-  export default {
+export default {
-    name: "MsApiAssertionJsonPath",
+  name: "MsApiAssertionJsonPath",
 
-    props: {
+  props: {
-      jsonPath: {
+    jsonPath: {
-        default: () => {
+      default: () => {
-          return new JSONPath();
+        return new JSONPath();
-        }
-      },
-      edit: {
-        type: Boolean,
-        default: false
-      },
-      index: Number,
-      list: Array,
-      callback: Function,
-      isReadOnly: {
-        type: Boolean,
-        default: false
       }
     },
-
+    edit: {
-    created() {
+      type: Boolean,
-      if (!this.jsonPath.option) {
+      default: false
-        this.jsonPath.option = "REGEX";
-      }
     },
+    index: Number,
+    list: Array,
+    callback: Function,
+    isReadOnly: {
+      type: Boolean,
+      default: false
+    }
+  },
 
-    data() {
+  created() {
-      return {
+    if (!this.jsonPath.option) {
-        loading: false
+      this.jsonPath.option = "REGEX";
-      }
+    }
+  },
+
+  data() {
+    return {
+      loading: false,
+      showTip: true,
+    }
+  },
+
+  watch: {
+    'jsonPath.expect'() {
+      this.setJSONPathDescription();
     },
+    'jsonPath.expression'() {
+      this.setJSONPathDescription();
+    }
+  },
 
-    watch: {
+  methods: {
-      'jsonPath.expect'() {
+    add: function () {
-        this.setJSONPathDescription();
+      this.list.push(this.getJSONPath());
-      },
+      this.callback();
-      'jsonPath.expression'() {
-        this.setJSONPathDescription();
-      }
     },
-
+    remove: function () {
-    methods: {
+      this.list.splice(this.index, 1);
-      add: function () {
+    },
-        this.list.push(this.getJSONPath());
+    getJSONPath() {
-        this.callback();
+      let jsonPath = new JSONPath(this.jsonPath);
-      },
+      jsonPath.enable = true;
-      remove: function () {
+      jsonPath.description = jsonPath.expression + " expect: " + (jsonPath.expect ? jsonPath.expect : '');
-        this.list.splice(this.index, 1);
+      return jsonPath;
-      },
+    },
-      getJSONPath() {
+    reload() {
-        let jsonPath = new JSONPath(this.jsonPath);
+      this.loading = true
-        jsonPath.enable = true;
+      this.$nextTick(() => {
-        jsonPath.description = jsonPath.expression + " expect: " + (jsonPath.expect ? jsonPath.expect : '');
+        this.loading = false
-        return jsonPath;
+      })
-      },
+    },
-      reload() {
+    setJSONPathDescription() {
-        this.loading = true
+      this.showTip = this.jsonPath.expression.length < 50;
-        this.$nextTick(() => {
+      this.jsonPath.description = this.jsonPath.expression + " expect: " + (this.jsonPath.expect ? this.jsonPath.expect : '');
-          this.loading = false
-        })
-      },
-      setJSONPathDescription() {
-        this.jsonPath.description = this.jsonPath.expression + " expect: " + (this.jsonPath.expect ? this.jsonPath.expect : '');
-      }
     }
   }
+}
 </script>
 
 <style scoped>
-  .assertion-select {
+.assertion-select {
-    width: 250px;
+  width: 250px;
-  }
+}
 
-  .assertion-item {
+.assertion-item {
-    width: 100%;
+  width: 100%;
-  }
+}
 
-  .assertion-btn {
+.assertion-btn {
-    text-align: center;
+  text-align: center;
-    width: 80px;
+  width: 80px;
-  }
+}
 </style>

frontend/src/business/components/api/definition/components/assertion/ApiAssertionRegex.vue

@@ -10,8 +10,10 @@
         </el-select>
       </el-col>
       <el-col>
-        <el-input :disabled="isReadOnly" v-model="regex.expression" size="small" show-word-limit
+        <el-tooltip :disabled="showTip" placement="top" :content="regex.expression">
+          <el-input :disabled="isReadOnly" v-model="regex.expression" size="small" show-word-limit
                   :placeholder="$t('api_test.request.assertions.expression')"/>
+        </el-tooltip>
       </el-col>
       <el-col class="assertion-checkbox">
         <el-checkbox v-model="regex.assumeSuccess" :disabled="isReadOnly">
@@ -61,6 +63,7 @@ export default {
   data() {
     return {
       subjects: ASSERTION_REGEX_SUBJECT,
+      showTip: true,
     }
   },
 
@@ -88,6 +91,7 @@ export default {
       return regex;
     },
     setRegexDescription() {
+      this.showTip = this.regex.description.length < 80;
       this.regex.description = this.regex.subject + " has: " + this.regex.expression;
     }
   }