fix(接口测试): 修复请求/响应体描述信息不能删除问题

api-test/frontend/src/business/commons/json-schema/schema/custom-input/index.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="custom-input">
+    <input
+      :class="{'c-input-inner': true, 'is-disabled': disabled }"
+      :placeholder="placeholder"
+      :type="type"
+      :disabled="disabled"
+      :value="value"
+      @input="handleInput" />
+  </div>
+</template>
+<script>
+export default {
+  name: 'CustomInput',
+  props: {
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    type: {
+      type: String,
+      default: '',
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    value: {
+      type: String,
+      default: '',
+    },
+  },
+  methods: {
+    handleInput(e) {
+      this.$emit('input', e.target.value);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.custom-input{
+  .c-input-inner{
+    height: 32px;
+    line-height: 32px;
+    background-color: #FFF;
+    background-image: none;
+    border-radius: 4px;
+    border: 1px solid #DCDFE6;
+    box-sizing: border-box;
+    color: #606266;
+    display: inline-block;
+    font-size: inherit;
+    outline: 0;
+    padding: 0 15px;
+    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
+    width: 100%;
+    font-size: 13px;
+  }
+  .c-input-inner::placeholder{
+    color: #C0C4CC;
+  }
+  .is-disabled {
+    cursor: not-allowed;
+    background-color: #FBFBFB !important;
+    color: #606266 !important;
+  }
+}
+
+</style>

api-test/frontend/src/business/commons/json-schema/schema/custom-textarea/index.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="custom-textarea">
+    <textarea
+      :value="value"
+      :class="{ 'c-content-inner': true, 'is-disabled': disabled }"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      @input="handleInput"
+      :rows="rows"
+      :cols="cols"
+    />
+  </div>
+</template>
+<script>
+export default {
+  name: 'CustomTextarea',
+  props: {
+    value: {
+      type: String,
+      default: '',
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    rows: {
+      type: Number,
+      default: 2,
+    },
+    cols: {
+      type: Number,
+      default: 100,
+    },
+  },
+  methods: {
+    handleInput(e) {
+      this.$emit('input', e.target.value);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.custom-textarea {
+  .c-content-inner {
+    display: block;
+    height: 32px;
+    width: 100%;
+    line-height: 32px;
+    background-color: #fff;
+    background-image: none;
+    border-radius: 4px;
+    border: 1px solid #dcdfe6;
+    box-sizing: border-box;
+    color: #606266;
+    display: inline-block;
+    outline: 0;
+    padding: 0 15px;
+    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+    font-size: 13px;
+    resize: vertical;
+  }
+  .c-content-inner::placeholder{
+    color: #C0C4CC;
+  }
+  .is-disabled {
+    background-color: #f5f7fa;
+    color: #c0c4cc;
+    cursor: not-allowed;
+  }
+}
+</style>

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

@@ -95,7 +95,7 @@
       </el-col>
 
       <el-col v-if="showColumns('DEFAULT')" class="item kv-select ms-col-name" style="min-width: 200px; padding: 0 5px">
-        <el-input
+        <custom-input
           :disabled="
             disabled ||
             pickValue.type === 'object' ||
@@ -110,7 +110,7 @@
           size="small" />
       </el-col>
       <el-col v-if="showColumns('PATTERN')" class="ms-col-name" style="min-width: 200px; padding: 0 5px">
-        <el-input
+        <custom-input
           :disabled="
             disabled ||
             pickValue.type === 'object' ||
@@ -135,7 +135,8 @@
             "
             v-model="pickValue.format"
             style="width: 100%"
-            size="small">
+            size="small"
+            @change="formatChange">
             <el-option value="" :label="$t('schema.nothing')"></el-option>
             <el-option :key="t" :value="t" :label="t" v-for="t in advancedAttr.format.enums" />
           </el-select>
@@ -145,9 +146,7 @@
         </div>
       </el-col>
       <el-col v-if="showColumns('ENUM')" class="ms-col-name" style="min-width: 300px; padding: 0 5px">
-        <el-input
-          type="textarea"
-          :autosize="{ minRows: 1, maxRows: 2 }"
+        <custom-textarea
           :disabled="
             disabled ||
             pickValue.type === 'object' ||
@@ -158,10 +157,10 @@
           v-model="pickValue.enum"
           class="ms-col-title"
           :placeholder="$t('schema.enum')"
-          size="small" />
+          />
       </el-col>
       <el-col v-if="showColumns('DESCRIPTION')" class="ms-col-name" style="min-width: 300px; padding: 0 5px">
-        <el-input
+        <custom-input
           :disabled="disabled"
           v-model="pickValue.description"
           class="ms-col-title"
@@ -275,7 +274,7 @@
         </div>
       </el-form>
       <p class="tip">{{ $t('schema.preview') }}</p>
-      <pre style="width: 100%; white-space: pre-wrap;">{{ completeNodeValue }}</pre>
+      <pre style="width: 100%; white-space: pre-wrap">{{ completeNodeValue }}</pre>
 
       <span slot="footer" class="dialog-footer">
         <ms-dialog-footer @cancel="modalVisible = false" @confirm="handleOk" />
@@ -289,10 +288,12 @@ import { TYPE, TYPE_NAME, TYPES } from './type/type';
 import MsMock from './mock/MockComplete';
 import MsDialogFooter from 'metersphere-frontend/src/components/MsDialogFooter';
 import { getUUID } from 'metersphere-frontend/src/utils';
+import CustomInput from '../custom-input/index';
+import CustomTextarea from '../custom-textarea/index';
 
 export default {
   name: 'JsonSchemaEditor',
-  components: { MsMock, MsDialogFooter },
+  components: { MsMock, MsDialogFooter, CustomInput, CustomTextarea },
   props: {
     value: {
       type: Object,
@@ -626,6 +627,12 @@ export default {
     editScenarioAdvance(data) {
       this.$emit('editScenarioAdvance', data);
     },
+    formatChange(value) {
+      this.pickValue.format = value;
+      this.$nextTick(() => {
+        this.reloadSelf();
+      });
+    },
   },
 };
 </script>