From d71969b2fa8135d75f5c068c0eb892a00692e21b Mon Sep 17 00:00:00 2001
From: fit2-zhao <yong.zhao@fit2cloud.com>
Date: Wed, 16 Sep 2020 16:43:44 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E6=8E=A5=E5=8F=A3=E8=B0=83=E8=AF=95):=20?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=9C=BA=E6=99=AF=E4=B8=AD=E8=87=AA=E5=AE=9A?=
 =?UTF-8?q?=E4=B9=89=E5=8F=98=E9=87=8F=E5=92=8C=E8=AF=B7=E6=B1=82=E5=A4=B4?=
 =?UTF-8?q?=E4=B8=8D=E8=83=BD=E9=80=89=E6=8B=A9=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../api/test/components/ApiScenarioForm.vue   |  4 +-
 .../test/components/ApiScenarioVariables.vue  | 46 ++++++++++++++++++-
 2 files changed, 47 insertions(+), 3 deletions(-)

diff --git a/frontend/src/business/components/api/test/components/ApiScenarioForm.vue b/frontend/src/business/components/api/test/components/ApiScenarioForm.vue
index afe9aaedb5..850bb1c1c1 100644
--- a/frontend/src/business/components/api/test/components/ApiScenarioForm.vue
+++ b/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>
diff --git a/frontend/src/business/components/api/test/components/ApiScenarioVariables.vue b/frontend/src/business/components/api/test/components/ApiScenarioVariables.vue
index 92fadac1db..6725d8fc30 100644
--- a/frontend/src/business/components/api/test/components/ApiScenarioVariables.vue
+++ b/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;
   }