feat(接口调试): 参数增加启用/禁用勾选项

backend/src/main/java/io/metersphere/api/dto/scenario/KeyValue.java

@@ -12,7 +12,7 @@ public class KeyValue {
     private String type;
     private List<BodyFile> files;
     private String description;
-
+    private boolean checked;
     public KeyValue() {
     }
 

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

@@ -5,6 +5,10 @@
     </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="checkedValues" :disabled="isDisable(index) || isReadOnly"/>
+        </el-col>
+
         <el-col>
           <el-input v-if="!suggestions" :disabled="isReadOnly" v-model="item.name" size="small" maxlength="200"
                     @change="change"
@@ -44,7 +48,11 @@ export default {
     },
     suggestions: Array
   },
-
+  data() {
+    return {
+      checkedValues:[]
+    }
+  },
   computed: {
     keyText() {
       return this.keyPlaceholder || this.$t("api_test.key");
@@ -56,6 +64,10 @@ export default {
 
   methods: {
     remove: function (index) {
+      // 移除勾选内容
+      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);
     },
@@ -63,6 +75,9 @@ export default {
       let isNeedCreate = true;
       let removeIndex = -1;
       this.items.forEach((item, index) => {
+        // 启用行赋值
+        item.checked=this.checkedValues.indexOf(item.uuid) != -1 ? true:false;
+
         if (!item.name && !item.value) {
           // 多余的空行
           if (index !== this.items.length - 1) {
@@ -73,6 +88,10 @@ export default {
         }
       });
       if (isNeedCreate) {
+        // 往后台送入的复选框值布尔值
+        this.items[this.items.length-1].checked = true;
+        // v-model 选中状态
+        this.checkedValues.push(this.items[this.items.length-1].uuid);
         this.items.push(new KeyValue());
       }
       this.$emit('change', this.items);
@@ -86,6 +105,9 @@ export default {
       let results = queryString ? suggestions.filter(this.createFilter(queryString)) : suggestions;
       cb(results);
     },
+    uuid: function () {
+      return (((1+Math.random())*0x100000)|0).toString(16).substring(1);
+    },
     createFilter(queryString) {
       return (restaurant) => {
         return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
@@ -95,6 +117,14 @@ export default {
   created() {
     if (this.items.length === 0) {
       this.items.push(new KeyValue());
+    }else{
+      this.items.forEach((item, index) => {
+        let uuid = this.uuid();
+        item.uuid = uuid;
+        if(item.checked){
+          this.checkedValues.push(uuid);
+        }
+      })
     }
   }
 }
@@ -108,6 +138,10 @@ export default {
 .kv-row {
   margin-top: 10px;
 }
+.kv-checkbox {
+  width: 20px;
+  margin-right: 10px;
+}
 
 .kv-delete {
   width: 60px;

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

@@ -5,8 +5,11 @@
     </span>
     <div class="kv-row" v-for="(item, index) in parameters" :key="index">
       <el-row type="flex" :gutter="20" justify="space-between" align="middle">
-        <el-col>
 
+        <el-col 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>
           <el-input v-if="!suggestions" :disabled="isReadOnly" v-model="item.name" size="small" maxlength="200" @change="change" :placeholder="keyText" show-word-limit>
             <template v-slot:prepend>
               <el-select  v-if="type === 'body'" :disabled="isReadOnly" class="kv-type" v-model="item.type">
@@ -79,6 +82,7 @@ export default {
   data() {
     return {
       currentItem: null,
+      checkedValues:[]
     }
   },
   computed: {
@@ -91,6 +95,10 @@ export default {
   },
   methods: {
     remove: function (index) {
+      // 移除勾选内容
+      let checkIndex = this.checkedValues.indexOf(this.parameters[index].uuid);
+      checkIndex != -1 ? this.checkedValues.splice(checkIndex,1): this.checkedValues;
+      // 移除整行输入控件及内容
       this.parameters.splice(index, 1);
       this.$emit('change', this.parameters);
     },
@@ -98,6 +106,9 @@ export default {
       let isNeedCreate = true;
       let removeIndex = -1;
       this.parameters.forEach((item, index) => {
+        // 启用行赋值
+        item.checked=this.checkedValues.indexOf(item.uuid) != -1 ? true:false;
+
         if (!item.name && !item.value) {
           // 多余的空行
           if (index !== this.parameters.length - 1) {
@@ -108,7 +119,11 @@ export default {
         }
       });
       if (isNeedCreate) {
-        this.parameters.push(new KeyValue(null, null, 'text'));
+        // 往后台送入的复选框值布尔值
+        this.parameters[this.parameters.length-1].checked = true;
+        // v-model 选中状态
+        this.checkedValues.push(this.parameters[this.parameters.length-1].uuid);
+        this.parameters.push(new KeyValue(null, null, 'text',false,this.uuid()));
       }
       this.$emit('change', this.parameters);
       // TODO 检查key重复
@@ -137,7 +152,9 @@ export default {
         return (func.name.toLowerCase().indexOf(queryString.toLowerCase()) > -1);
       };
     },
-
+    uuid: function () {
+      return (((1+Math.random())*0x100000)|0).toString(16).substring(1);
+    },
     advanced(item) {
       this.$refs.variableAdvance.open();
       this.currentItem = item;
@@ -148,7 +165,15 @@ export default {
   },
   created() {
     if (this.parameters.length === 0) {
-      this.parameters.push(new KeyValue(null, null, 'text'));
+      this.parameters.push(new KeyValue(null, null, 'text',false,this.uuid()));
+    }else{
+      this.parameters.forEach((item, index) => {
+        let uuid = this.uuid();
+        item.uuid = uuid;
+        if(item.checked){
+          this.checkedValues.push(uuid);
+        }
+      })
     }
   }
 }
@@ -166,7 +191,10 @@ export default {
   .kv-delete {
     width: 60px;
   }
-
+  .kv-checkbox {
+    width: 20px;
+    margin-right: 10px;
+  }
   .el-autocomplete {
     width: 100%;
   }

frontend/src/business/components/api/test/model/JMX.js

@@ -318,14 +318,16 @@ export class HTTPSamplerArguments extends Element {
 
     let collectionProp = this.collectionProp('Arguments.arguments');
     this.args.forEach(arg => {
-      let elementProp = collectionProp.elementProp(arg.name, 'HTTPArgument');
+      if(arg.checked) { // 非禁用的条件加入执行
-      elementProp.boolProp('HTTPArgument.always_encode', arg.encode, true);
+        let elementProp = collectionProp.elementProp(arg.name, 'HTTPArgument');
-      elementProp.boolProp('HTTPArgument.use_equals', arg.equals, true);
+        elementProp.boolProp('HTTPArgument.always_encode', arg.encode, true);
-      if (arg.name) {
+        elementProp.boolProp('HTTPArgument.use_equals', arg.equals, true);
-        elementProp.stringProp('Argument.name', arg.name);
+        if (arg.name) {
+          elementProp.stringProp('Argument.name', arg.name);
+        }
+        elementProp.stringProp('Argument.value', arg.value);
+        elementProp.stringProp('Argument.metadata', arg.metadata || "=");
       }
-      elementProp.stringProp('Argument.value', arg.value);
-      elementProp.stringProp('Argument.metadata', arg.metadata || "=");
     });
   }
 }
@@ -462,11 +464,12 @@ export class HeaderManager extends DefaultTestElement {
 
     let collectionProp = this.collectionProp('HeaderManager.headers');
 
-
     this.headers.forEach(header => {
       let elementProp = collectionProp.elementProp('', 'Header');
-      elementProp.stringProp('Header.name', header.name);
+      if(header.checked) {
-      elementProp.stringProp('Header.value', header.value);
+        elementProp.stringProp('Header.name', header.name);
+        elementProp.stringProp('Header.value', header.value);
+      }
     });
   }
 }
@@ -477,12 +480,15 @@ export class Arguments extends DefaultTestElement {
     this.args = args || [];
 
     let collectionProp = this.collectionProp('Arguments.arguments');
+
     this.args.forEach(arg => {
-      let elementProp = collectionProp.elementProp(arg.name, 'Argument');
+      if(arg.checked) { // 非禁用的条件加入执行
-      elementProp.stringProp('Argument.name', arg.name);
+        let elementProp = collectionProp.elementProp(arg.name, 'Argument');
-      elementProp.stringProp('Argument.value', arg.value);
+        elementProp.stringProp('Argument.name', arg.name);
-      elementProp.stringProp('Argument.desc', arg.desc);
+        elementProp.stringProp('Argument.value', arg.value);
-      elementProp.stringProp('Argument.metadata', arg.metadata, "=");
+        elementProp.stringProp('Argument.desc', arg.desc);
+        elementProp.stringProp('Argument.metadata', arg.metadata, "=");
+      }
     });
   }
 }
@@ -501,10 +507,12 @@ export class ElementArguments extends Element {
     let collectionProp = this.collectionProp('Arguments.arguments');
     if (args) {
       args.forEach(arg => {
-        let elementProp = collectionProp.elementProp(arg.name, 'Argument');
+        if(arg.checked) { // 非禁用的条件加入执行
-        elementProp.stringProp('Argument.name', arg.name);
+          let elementProp = collectionProp.elementProp(arg.name, 'Argument');
-        elementProp.stringProp('Argument.value', arg.value);
+          elementProp.stringProp('Argument.name', arg.name);
-        elementProp.stringProp('Argument.metadata', arg.metadata, "=");
+          elementProp.stringProp('Argument.value', arg.value);
+          elementProp.stringProp('Argument.metadata', arg.metadata, "=");
+        }
       });
     }
   }

frontend/src/business/components/api/test/model/ScenarioModel.js

@@ -537,7 +537,7 @@ export class Body extends BaseConfig {
 
 export class KeyValue extends BaseConfig {
   constructor() {
-    let options, key, value, type;
+    let options, key, value, type,checked,uuid;
     if (arguments.length === 1) {
       options = arguments[0];
     }
@@ -551,13 +551,20 @@ export class KeyValue extends BaseConfig {
       value = arguments[1];
       type = arguments[2];
     }
-
+    if (arguments.length === 5) {
+      key = arguments[0];
+      value = arguments[1];
+      type = arguments[2];
+      checked = arguments[3];
+      uuid = arguments[4];
+    }
     super();
     this.name = key;
     this.value = value;
     this.type = type;
     this.files = undefined;
-
+    this.checked = checked;
+    this.uuid = uuid;
     this.set(options);
   }
 
@@ -759,7 +766,7 @@ class JMXHttpRequest {
     if (this.method.toUpperCase() !== "GET") {
       let parameters = [];
       request.parameters.forEach(parameter => {
-        if (parameter.name && parameter.value) {
+        if (parameter.name && parameter.value && parameter.checked) {
           parameters.push(parameter);
         }
       });