fix(接口调试): 修复场景中自定义变量和请求头不能选择问题

frontend/src/business/components/api/test/components/ApiScenarioForm.vue

@@ -29,11 +29,11 @@
 
     <el-tabs v-model="activeName" :disabled="isReadOnly">
       <el-tab-pane :label="$t('api_test.scenario.variables')" name="parameters">
-        <ms-api-scenario-variables :is-read-only="isReadOnly" :items="scenario.variables"
+        <ms-api-scenario-variables :isShowEnable="true" :is-read-only="isReadOnly" :items="scenario.variables"
                                    :description="$t('api_test.scenario.kv_description')"/>
       </el-tab-pane>
       <el-tab-pane :label="$t('api_test.scenario.headers')" name="headers">
-        <ms-api-key-value :is-read-only="isReadOnly" :items="scenario.headers" :suggestions="headerSuggestions"
+        <ms-api-key-value :is-read-only="isReadOnly" :isShowEnable="true" :items="scenario.headers" :suggestions="headerSuggestions"
                           :environment="scenario.environment"
                           :description="$t('api_test.scenario.kv_description')"/>
       </el-tab-pane>

frontend/src/business/components/api/test/components/ApiScenarioVariables.vue

@@ -5,6 +5,11 @@
     </span>
     <div class="kv-row" v-for="(item, index) in items" :key="index">
       <el-row type="flex" :gutter="20" justify="space-between" align="middle">
+        <el-col v-if="isShowEnable" class="kv-checkbox">
+          <input type="checkbox" v-if="!isDisable(index)" @change="change" :value="item.uuid" v-model="checkedValues"
+                 :disabled="isDisable(index) || isReadOnly"/>
+        </el-col>
+
         <el-col>
           <ms-api-variable-input :show-variable="showVariable" :is-read-only="isReadOnly" v-model="item.name" size="small" maxlength="200" @change="change"
                                  :placeholder="$t('api_test.variable_name')" show-word-limit/>
@@ -36,14 +41,27 @@
         type: Boolean,
         default: false
       },
+      isShowEnable: {
+        type: Boolean,
+        default: false
+      },
       showVariable: {
         type: Boolean,
         default: true
       },
     },
-
+    data() {
+      return {
+        checkedValues: []
+      }
+    },
     methods: {
       remove: function (index) {
+        if (this.isShowEnable) {
+          // 移除勾选内容
+          let checkIndex = this.checkedValues.indexOf(this.items[index].uuid);
+          checkIndex != -1 ? this.checkedValues.splice(checkIndex, 1) : this.checkedValues;
+        }
         this.items.splice(index, 1);
         this.$emit('change', this.items);
       },
@@ -51,6 +69,10 @@
         let isNeedCreate = true;
         let removeIndex = -1;
         this.items.forEach((item, index) => {
+          // 启用行赋值
+          if (this.isShowEnable) {
+            item.enable = this.checkedValues.indexOf(item.uuid) != -1 ? true : false;
+          }
           if (!item.name && !item.value) {
             // 多余的空行
             if (index !== this.items.length - 1) {
@@ -61,11 +83,20 @@
           }
         });
         if (isNeedCreate) {
+          // 往后台送入的复选框值布尔值
+          if (this.isShowEnable) {
+            this.items[this.items.length - 1].enable = true;
+            // v-model 选中状态
+            this.checkedValues.push(this.items[this.items.length - 1].uuid);
+          }
           this.items.push(new KeyValue());
         }
         this.$emit('change', this.items);
         // TODO 检查key重复
       },
+      uuid: function () {
+        return (((1 + Math.random()) * 0x100000) | 0).toString(16).substring(1);
+      },
       isDisable: function (index) {
         return this.items.length - 1 === index;
       }
@@ -74,6 +105,14 @@
     created() {
       if (this.items.length === 0) {
         this.items.push(new KeyValue());
+      }else if (this.isShowEnable) {
+        this.items.forEach((item, index) => {
+          let uuid = this.uuid();
+          item.uuid = uuid;
+          if (item.enable) {
+            this.checkedValues.push(uuid);
+          }
+        })
       }
     }
   }
@@ -84,6 +123,11 @@
     font-size: 13px;
   }
 
+  .kv-checkbox {
+    width: 20px;
+    margin-right: 10px;
+  }
+
   .kv-row {
     margin-top: 10px;
   }