From 0a47d283a2b1601c9fa79d9ef958c1601043ff6e Mon Sep 17 00:00:00 2001
From: wxg0103 <727495428@qq.com>
Date: Tue, 28 Sep 2021 10:26:45 +0800
Subject: [PATCH] =?UTF-8?q?feat=E6=8E=A5=E5=8F=A3=E5=AE=9A=E4=B9=89=5F?=
 =?UTF-8?q?=E8=AF=B7=E6=B1=82=E4=BD=93=E4=B8=BAform-data=5F=E7=9A=84json?=
 =?UTF-8?q?=E5=8F=82=E6=95=B0=E7=9A=84=E5=8F=AF=E4=BB=A5=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E5=8F=82=E6=95=B0=E7=9A=84=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../api/definition/components/ApiVariable.vue | 425 +++++++++---------
 1 file changed, 213 insertions(+), 212 deletions(-)

diff --git a/frontend/src/business/components/api/definition/components/ApiVariable.vue b/frontend/src/business/components/api/definition/components/ApiVariable.vue
index 13f2d3b02e..0a34327de3 100644
--- a/frontend/src/business/components/api/definition/components/ApiVariable.vue
+++ b/frontend/src/business/components/api/definition/components/ApiVariable.vue
@@ -10,7 +10,7 @@
       <el-row type="flex" :gutter="20" justify="space-between" align="middle">
         <el-col class="kv-checkbox" v-if="isShowEnable">
           <el-checkbox v-if="!isDisable(index)" v-model="item.enable"
-                 :disabled="isReadOnly"/>
+                       :disabled="isReadOnly"/>
         </el-col>
         <span style="margin-left: 10px" v-else></span>
         <i class="el-icon-top" style="cursor:pointer" @click="moveTop(index)"/>
@@ -100,247 +100,248 @@
 </template>
 
 <script>
-  import {KeyValue, Scenario} from "../model/ApiTestModel";
-  import {JMETER_FUNC, MOCKJS_FUNC} from "@/common/js/constants";
-  import MsApiVariableAdvance from "./ApiVariableAdvance";
-  import MsApiVariableJson from "./ApiVariableJson";
-  import MsApiBodyFileUpload from "./body/ApiBodyFileUpload";
-  import {REQUIRED} from "../model/JsonData";
-  import Vue from 'vue';
-  import ApiVariableSetting from "@/business/components/api/definition/components/ApiVariableSetting";
+import {KeyValue, Scenario} from "../model/ApiTestModel";
+import {JMETER_FUNC, MOCKJS_FUNC} from "@/common/js/constants";
+import MsApiVariableAdvance from "./ApiVariableAdvance";
+import MsApiVariableJson from "./ApiVariableJson";
+import MsApiBodyFileUpload from "./body/ApiBodyFileUpload";
+import {REQUIRED} from "../model/JsonData";
+import Vue from 'vue';
+import ApiVariableSetting from "@/business/components/api/definition/components/ApiVariableSetting";
 
-  export default {
-    name: "MsApiVariable",
-    components: {ApiVariableSetting, MsApiBodyFileUpload, MsApiVariableAdvance , MsApiVariableJson},
-    props: {
-      keyPlaceholder: String,
-      valuePlaceholder: String,
-      description: String,
-      parameters: Array,
-      rest: Array,
-      environment: Object,
-      scenario: Scenario,
-      type: {
-        type: String,
-        default: ''
-      },
-      isReadOnly: {
-        type: Boolean,
-        default: false
-      },
-      isShowEnable: {
-        type: Boolean,
-        default: true
-      },
-      suggestions: Array,
-      withMorSetting: Boolean
+export default {
+  name: "MsApiVariable",
+  components: {ApiVariableSetting, MsApiBodyFileUpload, MsApiVariableAdvance, MsApiVariableJson},
+  props: {
+    keyPlaceholder: String,
+    valuePlaceholder: String,
+    description: String,
+    parameters: Array,
+    rest: Array,
+    environment: Object,
+    scenario: Scenario,
+    type: {
+      type: String,
+      default: ''
     },
-    data() {
-      return {
-        currentItem: null,
-        requireds: [
-          {name: this.$t('commons.selector.required'), id: true},
-          {name: this.$t('commons.selector.not_required'), id: false}
-        ],
-        isSelectAll: true,
-        isActive: true,
+    isReadOnly: {
+      type: Boolean,
+      default: false
+    },
+    isShowEnable: {
+      type: Boolean,
+      default: true
+    },
+    suggestions: Array,
+    withMorSetting: Boolean
+  },
+  data() {
+    return {
+      currentItem: null,
+      requireds: [
+        {name: this.$t('commons.selector.required'), id: true},
+        {name: this.$t('commons.selector.not_required'), id: false}
+      ],
+      isSelectAll: true,
+      isActive: true,
+    }
+  },
+  watch: {
+    isSelectAll: function (to, from) {
+      if (from == false && to == true) {
+        this.selectAll();
+      } else if (from == true && to == false) {
+        this.invertSelect();
       }
     },
-    watch: {
-      isSelectAll: function(to, from) {
-        if(from == false && to == true) {
-          this.selectAll();
-        } else if(from == true && to == false) {
-          this.invertSelect();
-        }
-      },
+  },
+  computed: {
+    keyText() {
+      return this.keyPlaceholder || this.$t("api_test.key");
     },
-    computed: {
-      keyText() {
-        return this.keyPlaceholder || this.$t("api_test.key");
-      },
-      valueText() {
-        return this.valuePlaceholder || this.$t("api_test.value");
+    valueText() {
+      return this.valuePlaceholder || this.$t("api_test.value");
+    }
+  },
+  methods: {
+    moveBottom(index) {
+      if (this.parameters.length < 2 || index === this.parameters.length - 2) {
+        return;
       }
+      let thisRow = this.parameters[index];
+      let nextRow = this.parameters[index + 1];
+      Vue.set(this.parameters, index + 1, thisRow);
+      Vue.set(this.parameters, index, nextRow)
     },
-    methods: {
-      moveBottom(index) {
-        if (this.parameters.length < 2 || index === this.parameters.length - 2) {
-          return;
-        }
-        let thisRow = this.parameters[index];
-        let nextRow = this.parameters[index + 1];
-        Vue.set(this.parameters, index + 1, thisRow);
-        Vue.set(this.parameters, index, nextRow)
-      },
-      moveTop(index) {
-        if (index === 0) {
-          return;
-        }
-        let thisRow = this.parameters[index];
-        let lastRow = this.parameters[index - 1];
-        Vue.set(this.parameters, index - 1, thisRow);
-        Vue.set(this.parameters, index, lastRow)
+    moveTop(index) {
+      if (index === 0) {
+        return;
+      }
+      let thisRow = this.parameters[index];
+      let lastRow = this.parameters[index - 1];
+      Vue.set(this.parameters, index - 1, thisRow);
+      Vue.set(this.parameters, index, lastRow)
 
-      },
-      remove: function (index) {
-        // 移除整行输入控件及内容
-        this.parameters.splice(index, 1);
-        this.$emit('change', this.parameters);
-      },
-      change: function () {
-        let isNeedCreate = true;
-        let removeIndex = -1;
-        this.parameters.forEach((item, index) => {
-          if (!item.name && !item.value) {
-            // 多余的空行
-            if (index !== this.parameters.length - 1) {
-              removeIndex = index;
-            }
-            // 没有空行，需要创建空行
-            isNeedCreate = false;
+    },
+    remove: function (index) {
+      // 移除整行输入控件及内容
+      this.parameters.splice(index, 1);
+      this.$emit('change', this.parameters);
+    },
+    change: function () {
+      let isNeedCreate = true;
+      let removeIndex = -1;
+      this.parameters.forEach((item, index) => {
+        if (!item.name && !item.value) {
+          // 多余的空行
+          if (index !== this.parameters.length - 1) {
+            removeIndex = index;
           }
-        });
-        if (isNeedCreate) {
-          this.parameters.push(new KeyValue({
-            type: 'text',
-            enable: true,
-            uuid: this.uuid(),
-            contentType: 'text/plain'
-          }));
+          // 没有空行，需要创建空行
+          isNeedCreate = false;
         }
-        this.$emit('change', this.parameters);
-        // TODO 检查key重复
-      },
-      isDisable: function (index) {
-        return this.parameters.length - 1 == index;
-      },
-      querySearch(queryString, cb) {
-        let suggestions = this.suggestions;
-        let results = queryString ? suggestions.filter(this.createFilter(queryString)) : suggestions;
-        cb(results);
-      },
-      createFilter(queryString) {
-        return (restaurant) => {
-          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
-        };
-      },
-      funcSearch(queryString, cb) {
-        let funcs = MOCKJS_FUNC.concat(JMETER_FUNC);
-        let results = queryString ? funcs.filter(this.funcFilter(queryString)) : funcs;
-        // 调用 callback 返回建议列表的数据
-        cb(results);
-      },
-      funcFilter(queryString) {
-        return (func) => {
-          return (func.name.toLowerCase().indexOf(queryString.toLowerCase()) > -1);
-        };
-      },
-      uuid: function () {
-        return (((1 + Math.random()) * 0x100000) | 0).toString(16).substring(1);
-      },
-      advanced(item) {
-        if (item.type === 'json'){
-          this.$refs.variableJson.open(item);
-          this.currentItem = item;
-        }else {
-          this.$refs.variableAdvance.open();
-          this.currentItem = item;
-        }
-
-      },
-      typeChange(item) {
-        if (item.type === 'file') {
-          item.contentType = 'application/octet-stream';
-        } else if (item.type === 'text'){
-          item.contentType = 'text/plain';
-        } else {
-          item.contentType = 'application/json'
-        }
-        this.reload();
-      },
-      selectAll() {
-        this.parameters.forEach(item => {
-          item.enable = true;
-        });
-      },
-      invertSelect() {
-        this.parameters.forEach(item => {
-          item.enable = false;
-        });
-      },
-      reload() {
-        this.isActive = false;
-        this.$nextTick(() => {
-          this.isActive = true;
-        });
-      },
-      openApiVariableSetting(item) {
-        this.$refs.apiVariableSetting.open(item);
-      },
-      callback(item){
-        this.currentItem.value=item;
-      }
-    },
-    created() {
-      if (this.parameters.length === 0 || this.parameters[this.parameters.length - 1].name) {
+      });
+      if (isNeedCreate) {
         this.parameters.push(new KeyValue({
           type: 'text',
           enable: true,
-          required: true,
           uuid: this.uuid(),
           contentType: 'text/plain'
         }));
       }
+      this.$emit('change', this.parameters);
+      // TODO 检查key重复
+    },
+    isDisable: function (index) {
+      return this.parameters.length - 1 == index;
+    },
+    querySearch(queryString, cb) {
+      let suggestions = this.suggestions;
+      let results = queryString ? suggestions.filter(this.createFilter(queryString)) : suggestions;
+      cb(results);
+    },
+    createFilter(queryString) {
+      return (restaurant) => {
+        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
+      };
+    },
+    funcSearch(queryString, cb) {
+      let funcs = MOCKJS_FUNC.concat(JMETER_FUNC);
+      let results = queryString ? funcs.filter(this.funcFilter(queryString)) : funcs;
+      // 调用 callback 返回建议列表的数据
+      cb(results);
+    },
+    funcFilter(queryString) {
+      return (func) => {
+        return (func.name.toLowerCase().indexOf(queryString.toLowerCase()) > -1);
+      };
+    },
+    uuid: function () {
+      return (((1 + Math.random()) * 0x100000) | 0).toString(16).substring(1);
+    },
+    advanced(item) {
+      if (item.type === 'json') {
+        this.$refs.variableJson.open(item);
+        this.currentItem = item;
+      } else {
+        this.$refs.variableAdvance.open();
+        this.currentItem = item;
+      }
+
+    },
+    typeChange(item) {
+      if (item.type === 'file') {
+        item.contentType = 'application/octet-stream';
+      } else if (item.type === 'text') {
+        item.contentType = 'text/plain';
+      } else {
+        item.contentType = 'application/json'
+      }
+      this.reload();
+    },
+    selectAll() {
+      this.parameters.forEach(item => {
+        item.enable = true;
+      });
+    },
+    invertSelect() {
+      this.parameters.forEach(item => {
+        item.enable = false;
+      });
+    },
+    reload() {
+      this.isActive = false;
+      this.$nextTick(() => {
+        this.isActive = true;
+      });
+    },
+    openApiVariableSetting(item) {
+      this.$refs.apiVariableSetting.open(item);
+    },
+    callback(item) {
+      this.currentItem.value = item;
+      this.currentItem = null;
+    }
+  },
+  created() {
+    if (this.parameters.length === 0 || this.parameters[this.parameters.length - 1].name) {
+      this.parameters.push(new KeyValue({
+        type: 'text',
+        enable: true,
+        required: true,
+        uuid: this.uuid(),
+        contentType: 'text/plain'
+      }));
     }
   }
+}
 </script>
 
 <style scoped>
-  .kv-description {
-    font-size: 13px;
-  }
+.kv-description {
+  font-size: 13px;
+}
 
-  .kv-row {
-    margin-top: 10px;
-  }
+.kv-row {
+  margin-top: 10px;
+}
 
-  .kv-delete {
-    width: 60px;
-  }
+.kv-delete {
+  width: 60px;
+}
 
-  .kv-select {
-    width: 50%;
-  }
+.kv-select {
+  width: 50%;
+}
 
-  .el-autocomplete {
-    width: 100%;
-  }
+.el-autocomplete {
+  width: 100%;
+}
 
-  .kv-checkbox {
-    width: 20px;
-    margin-right: 10px;
-  }
+.kv-checkbox {
+  width: 20px;
+  margin-right: 10px;
+}
 
-  .advanced-item-value >>> .el-dialog__body {
-    padding: 15px 25px;
-  }
+.advanced-item-value >>> .el-dialog__body {
+  padding: 15px 25px;
+}
 
-  .el-row {
-    margin-bottom: 5px;
-  }
+.el-row {
+  margin-bottom: 5px;
+}
 
-  .kv-type {
-    width: 70px;
-  }
+.kv-type {
+  width: 70px;
+}
 
-  .pointer {
-    cursor: pointer;
-    color: #1E90FF;
-  }
+.pointer {
+  cursor: pointer;
+  color: #1E90FF;
+}
 
-  .kv-setting {
-    width: 40px;
-    padding: 0px !important;
-  }
+.kv-setting {
+  width: 40px;
+  padding: 0px !important;
+}
 </style>