feat(接口测试): 给下拉框增加清除功能

frontend/src/business/components/api/test/components/request/dubbo/ConfigCenter.vue

 <template>
   <el-form :model="config" :rules="rules" ref="config" label-width="100px" size="small" :disabled="isReadOnly">
     <div class="dubbo-form-description" v-if="description">
-      {{description}}
+      {{ description }}
     </div>
     <el-form-item label="Protocol" prop="protocol" class="dubbo-form-item">
-      <el-select v-model="config.protocol" class="select-100">
+      <el-select v-model="config.protocol" class="select-100" clearable>
         <el-option v-for="p in protocols" :key="p" :label="p" :value="p"/>
       </el-select>
     </el-form-item>
@@ -43,41 +43,41 @@
 </template>
 
 <script>
-  import './dubbo.css'
-  import {ConfigCenter} from "@/business/components/api/test/model/ScenarioModel";
+import './dubbo.css'
+import {ConfigCenter} from "@/business/components/api/test/model/ScenarioModel";
 
-  export default {
-    name: "MsDubboConfigCenter",
-    props: {
-      description: String,
-      config: ConfigCenter,
-      isReadOnly: {
-        type: Boolean,
-        default: false
-      }
-    },
-    data() {
-      return {
-        protocols: ConfigCenter.PROTOCOLS,
-        methods: [],
-        rules: {
-          group: [
-            {max: 300, message: this.$t('commons.input_limit', [0, 300]), trigger: 'blur'}
-          ],
-          namespace: [
-            {max: 300, message: this.$t('commons.input_limit', [0, 300]), trigger: 'blur'}
-          ],
-          username: [
-            {max: 100, message: this.$t('commons.input_limit', [0, 300]), trigger: 'blur'}
-          ],
-          password: [
-            {max: 30, message: this.$t('commons.input_limit', [0, 300]), trigger: 'blur'}
-          ],
-          address: [
-            {max: 300, message: this.$t('commons.input_limit', [0, 300]), trigger: 'blur'}
-          ]
-        }
+export default {
+  name: "MsDubboConfigCenter",
+  props: {
+    description: String,
+    config: ConfigCenter,
+    isReadOnly: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      protocols: ConfigCenter.PROTOCOLS,
+      methods: [],
+      rules: {
+        group: [
+          {max: 300, message: this.$t('commons.input_limit', [0, 300]), trigger: 'blur'}
+        ],
+        namespace: [
+          {max: 300, message: this.$t('commons.input_limit', [0, 300]), trigger: 'blur'}
+        ],
+        username: [
+          {max: 100, message: this.$t('commons.input_limit', [0, 300]), trigger: 'blur'}
+        ],
+        password: [
+          {max: 30, message: this.$t('commons.input_limit', [0, 300]), trigger: 'blur'}
+        ],
+        address: [
+          {max: 300, message: this.$t('commons.input_limit', [0, 300]), trigger: 'blur'}
+        ]
       }
     }
   }
+}
 </script>

frontend/src/business/components/api/test/components/request/dubbo/ConsumerAndService.vue

@@ -2,7 +2,7 @@
 
   <el-form :model="consumer" :rules="rules" ref="consumer" label-width="100px" size="small" :disabled="isReadOnly">
     <div class="dubbo-form-description" v-if="description">
-      {{description}}
+      {{ description }}
     </div>
     <el-form-item label="Timeout" prop="timeout" class="dubbo-form-item">
       <el-input type="number" v-model="consumer.timeout" :placeholder="$t('commons.input_content')"/>
@@ -32,13 +32,13 @@
     </el-form-item>
 
     <el-form-item label="Async" prop="async" class="dubbo-form-item">
-      <el-select v-model="consumer.async" class="select-100">
+      <el-select v-model="consumer.async" class="select-100" clearable>
         <el-option v-for="option in asyncOptions" :key="option" :label="option" :value="option"/>
       </el-select>
     </el-form-item>
 
     <el-form-item label="LoadBalance" prop="loadBalance" class="dubbo-form-item">
-      <el-select v-model="consumer.loadBalance" class="select-100">
+      <el-select v-model="consumer.loadBalance" class="select-100" clearable>
         <el-option v-for="option in loadBalances" :key="option" :label="option" :value="option"/>
       </el-select>
     </el-form-item>
@@ -47,36 +47,36 @@
 </template>
 
 <script>
-  import './dubbo.css'
-  import {ConsumerAndService, RegistryCenter} from "@/business/components/api/test/model/ScenarioModel";
+import './dubbo.css'
+import {ConsumerAndService, RegistryCenter} from "@/business/components/api/test/model/ScenarioModel";
 
-  export default {
-    name: "MsDubboConsumerService",
-    props: {
-      description: String,
-      consumer: ConsumerAndService,
-      isReadOnly: {
-        type: Boolean,
-        default: false
-      }
-    },
-    data() {
-      return {
-        asyncOptions: ConsumerAndService.ASYNC_OPTIONS,
-        loadBalances: ConsumerAndService.LOAD_BALANCE_OPTIONS,
-        methods: [],
-        rules: {
-          version: [
-            {max: 30, message: this.$t('commons.input_limit', [0, 30]), trigger: 'blur'}
-          ],
-          cluster: [
-            {max: 300, message: this.$t('commons.input_limit', [0, 300]), trigger: 'blur'}
-          ],
-          group: [
-            {max: 300, message: this.$t('commons.input_limit', [0, 300]), trigger: 'blur'}
-          ]
-        }
+export default {
+  name: "MsDubboConsumerService",
+  props: {
+    description: String,
+    consumer: ConsumerAndService,
+    isReadOnly: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      asyncOptions: ConsumerAndService.ASYNC_OPTIONS,
+      loadBalances: ConsumerAndService.LOAD_BALANCE_OPTIONS,
+      methods: [],
+      rules: {
+        version: [
+          {max: 30, message: this.$t('commons.input_limit', [0, 30]), trigger: 'blur'}
+        ],
+        cluster: [
+          {max: 300, message: this.$t('commons.input_limit', [0, 300]), trigger: 'blur'}
+        ],
+        group: [
+          {max: 300, message: this.$t('commons.input_limit', [0, 300]), trigger: 'blur'}
+        ]
       }
     }
   }
+}
 </script>

frontend/src/business/components/api/test/components/request/dubbo/RegistryCenter.vue

 <template>
   <el-form :model="registry" :rules="rules" ref="registry" label-width="100px" size="small" :disabled="isReadOnly">
     <div class="dubbo-form-description" v-if="description">
-      {{description}}
+      {{ description }}
     </div>
     <el-form-item label="Protocol" prop="protocol" class="dubbo-form-item">
-      <el-select v-model="registry.protocol" class="select-100">
+      <el-select v-model="registry.protocol" class="select-100" clearable>
         <el-option v-for="p in protocols" :key="p" :label="p" :value="p"/>
       </el-select>
     </el-form-item>
@@ -36,38 +36,38 @@
 </template>
 
 <script>
-  import './dubbo.css'
-  import {RegistryCenter} from "@/business/components/api/test/model/ScenarioModel";
+import './dubbo.css'
+import {RegistryCenter} from "@/business/components/api/test/model/ScenarioModel";
 
-  export default {
-    name: "MsDubboRegistryCenter",
-    props: {
-      description: String,
-      registry: RegistryCenter,
-      isReadOnly: {
-        type: Boolean,
-        default: false
-      }
-    },
-    data() {
-      return {
-        protocols: RegistryCenter.PROTOCOLS,
-        methods: [],
-        rules: {
-          group: [
-            {max: 300, message: this.$t('commons.input_limit', [0, 300]), trigger: 'blur'}
-          ],
-          username: [
-            {max: 300, message: this.$t('commons.input_limit', [0, 300]), trigger: 'blur'}
-          ],
-          password: [
-            {max: 30, message: this.$t('commons.input_limit', [0, 30]), trigger: 'blur'}
-          ],
-          address: [
-            {max: 300, message: this.$t('commons.input_limit', [0, 300]), trigger: 'blur'}
-          ]
-        }
+export default {
+  name: "MsDubboRegistryCenter",
+  props: {
+    description: String,
+    registry: RegistryCenter,
+    isReadOnly: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      protocols: RegistryCenter.PROTOCOLS,
+      methods: [],
+      rules: {
+        group: [
+          {max: 300, message: this.$t('commons.input_limit', [0, 300]), trigger: 'blur'}
+        ],
+        username: [
+          {max: 300, message: this.$t('commons.input_limit', [0, 300]), trigger: 'blur'}
+        ],
+        password: [
+          {max: 30, message: this.$t('commons.input_limit', [0, 30]), trigger: 'blur'}
+        ],
+        address: [
+          {max: 300, message: this.$t('commons.input_limit', [0, 300]), trigger: 'blur'}
+        ]
       }
     }
   }
+}
 </script>