From bc133e8fd0fe79aef6a57e7bb9a79da698528cab Mon Sep 17 00:00:00 2001
From: "Captain.B" <bin@fit2cloud.com>
Date: Tue, 6 Jul 2021 16:58:53 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E6=8E=A5=E5=8F=A3=E8=87=AA=E5=8A=A8?=
 =?UTF-8?q?=E5=8C=96):=20=E7=8E=AF=E5=A2=83=E5=8F=98=E9=87=8F=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E6=89=B9=E9=87=8F=E6=B7=BB=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../test/components/ApiScenarioVariables.vue  | 225 +++++++++++-------
 1 file changed, 134 insertions(+), 91 deletions(-)

diff --git a/frontend/src/business/components/api/test/components/ApiScenarioVariables.vue b/frontend/src/business/components/api/test/components/ApiScenarioVariables.vue
index ec0e8b7caa..2737af1fe4 100644
--- a/frontend/src/business/components/api/test/components/ApiScenarioVariables.vue
+++ b/frontend/src/business/components/api/test/components/ApiScenarioVariables.vue
@@ -1,116 +1,159 @@
 <template>
   <div>
     <span class="kv-description" v-if="description">
-      {{description}}
+      {{ description }}
     </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 class="kv-checkbox">
-          <input type="checkbox" v-if="!isDisable(index)" @change="change" :value="item.uuid" v-model="item.enable"
-                 :disabled="isDisable(index) || isReadOnly"/>
-        </el-col>
-
-        <el-col>
-          <ms-api-variable-input :show-copy="showCopy" :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/>
-        </el-col>
-        <el-col>
-          <el-input :disabled="isReadOnly" v-model="item.value" size="small" @change="change"
-                    :placeholder="$t('api_test.value')" show-word-limit/>
-        </el-col>
-        <el-col>
-          <el-input :disabled="isReadOnly" v-model="item.remark" size="small" @change="change"
-                    :placeholder="$t('commons.remark')" show-word-limit/>
-        </el-col>
-        <el-col class="kv-delete">
-          <el-button size="mini" class="el-icon-delete-solid" circle @click="remove(index)"
-                     :disabled="isDisable(index) || isReadOnly"/>
-        </el-col>
-      </el-row>
+    <div style="padding-bottom: 10px;">
+      <el-link style="float: right;" @click="batchAdd" type="primary" :disabled="isReadOnly">
+        {{ $t("commons.batch_add") }}
+      </el-link>
     </div>
+    <div style="display: none;">nothing</div>
+    <div>
+      <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 class="kv-checkbox">
+            <input type="checkbox" v-if="!isDisable(index)" @change="change" :value="item.uuid" v-model="item.enable"
+                   :disabled="isDisable(index) || isReadOnly"/>
+          </el-col>
+
+          <el-col>
+            <ms-api-variable-input :show-copy="showCopy" :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/>
+          </el-col>
+          <el-col>
+            <el-input :disabled="isReadOnly" v-model="item.value" size="small" @change="change"
+                      :placeholder="$t('api_test.value')" show-word-limit/>
+          </el-col>
+          <el-col>
+            <el-input :disabled="isReadOnly" v-model="item.remark" size="small" @change="change"
+                      :placeholder="$t('commons.remark')" show-word-limit/>
+          </el-col>
+          <el-col class="kv-delete">
+            <el-button size="mini" class="el-icon-delete-solid" circle @click="remove(index)"
+                       :disabled="isDisable(index) || isReadOnly"/>
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+    <batch-add-parameter @batchSave="batchSave" ref="batchAdd"/>
   </div>
 </template>
 
 <script>
-  import {KeyValue} from "../model/ScenarioModel";
-  import MsApiVariableInput from "./ApiVariableInput";
+import {KeyValue} from "../model/ScenarioModel";
+import MsApiVariableInput from "./ApiVariableInput";
+import BatchAddParameter from "@/business/components/api/definition/components/basis/BatchAddParameter";
 
-  export default {
-    name: "MsApiScenarioVariables",
-    components: {MsApiVariableInput},
-    props: {
-      description: String,
-      items: Array,
-      isReadOnly: {
-        type: Boolean,
-        default: false
-      },
-      showVariable: {
-        type: Boolean,
-        default: true
-      },
-      showCopy: {
-        type: Boolean,
-        default: true
-      },
+export default {
+  name: "MsApiScenarioVariables",
+  components: {BatchAddParameter, MsApiVariableInput},
+  props: {
+    description: String,
+    items: Array,
+    isReadOnly: {
+      type: Boolean,
+      default: false
     },
-    data() {
-      return {
-      }
+    showVariable: {
+      type: Boolean,
+      default: true
     },
-    methods: {
-      remove: function (index) {
-        this.items.splice(index, 1);
-        this.$emit('change', this.items);
-      },
-      change: function () {
-        let isNeedCreate = true;
-        let removeIndex = -1;
-        this.items.forEach((item, index) => {
-          if (!item.name && !item.value) {
-            // 多余的空行
-            if (index !== this.items.length - 1) {
-              removeIndex = index;
-            }
-            // 没有空行，需要创建空行
-            isNeedCreate = false;
+    showCopy: {
+      type: Boolean,
+      default: true
+    },
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    remove: function (index) {
+      this.items.splice(index, 1);
+      this.$emit('change', this.items);
+    },
+    change: function () {
+      let isNeedCreate = true;
+      let removeIndex = -1;
+      this.items.forEach((item, index) => {
+        if (!item.name && !item.value) {
+          // 多余的空行
+          if (index !== this.items.length - 1) {
+            removeIndex = index;
           }
-        });
-        if (isNeedCreate) {
-          this.items.push(new KeyValue({enable: true}));
+          // 没有空行，需要创建空行
+          isNeedCreate = false;
         }
-        this.$emit('change', this.items);
-        // TODO 检查key重复
-      },
-      isDisable: function (index) {
-        return this.items.length - 1 === index;
-      },
-    },
-
-    created() {
-      if (this.items.length === 0) {
+      });
+      if (isNeedCreate) {
         this.items.push(new KeyValue({enable: true}));
       }
+      this.$emit('change', this.items);
+      // TODO 检查key重复
+    },
+    isDisable: function (index) {
+      return this.items.length - 1 === index;
+    },
+    _handleBatchVars(data) {
+      let params = data.split("\n");
+      let keyValues = [];
+      params.forEach(item => {
+        let line = item.split(/，|,/);
+        let required = false;
+        if (line[1] === '必填' || line[1] === 'true') {
+          required = true;
+        }
+        keyValues.push(new KeyValue({
+          name: line[0],
+          required: required,
+          value: line[2],
+          description: line[3],
+          type: "text",
+          valid: false,
+          file: false,
+          encode: true,
+          enable: true,
+          contentType: "text/plain"
+        }));
+      });
+      return keyValues;
+    },
+    batchAdd() {
+      this.$refs.batchAdd.open();
+    },
+    batchSave(data) {
+      if (data) {
+        let keyValues = this._handleBatchVars(data);
+        keyValues.forEach(item => {
+          this.items.unshift(item);
+        });
+      }
+    },
+  },
+  created() {
+    if (this.items.length === 0) {
+      this.items.push(new KeyValue({enable: true}));
     }
   }
+};
 </script>
 
 <style scoped>
-  .kv-description {
-    font-size: 13px;
-  }
+.kv-description {
+  font-size: 13px;
+}
 
-  .kv-checkbox {
-    width: 20px;
-    margin-right: 10px;
-  }
+.kv-checkbox {
+  width: 20px;
+  margin-right: 10px;
+}
 
-  .kv-row {
-    margin-top: 10px;
-  }
+.kv-row {
+  margin-top: 10px;
+}
 
-  .kv-delete {
-    width: 60px;
-  }
+.kv-delete {
+  width: 60px;
+}
 </style>