fix(接口自动化): 参数上下移动处理

frontend/src/business/components/api/automation/scenario/component/ApiComponent.vue

@@ -36,7 +36,7 @@
       </el-input>
     </div>
     <p class="tip">{{$t('api_test.definition.request.req_param')}} </p>
-    <ms-api-request-form :referenced="true" :headers="request.headers " :request="request" v-if="request.protocol==='HTTP' || request.type==='HTTPSamplerProxy'"/>
+    <ms-api-request-form :isShowEnable="true" :referenced="true" :headers="request.headers " :request="request" v-if="request.protocol==='HTTP' || request.type==='HTTPSamplerProxy'"/>
     <ms-tcp-basis-parameters :request="request" v-if="request.protocol==='TCP'|| request.type==='TCPSampler'"/>
     <ms-sql-basis-parameters :request="request" v-if="request.protocol==='SQL'|| request.type==='JDBCSampler'" :showScript="false"/>
     <ms-dubbo-basis-parameters :request="request" v-if="request.protocol==='DUBBO' || request.protocol==='dubbo://'|| request.type==='DubboSampler'" :showScript="false"/>

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

@@ -1,18 +1,19 @@
 <template>
-  <div>
+  <div v-loading="loading">
     <span class="kv-description" v-if="description">
       {{ description }}
     </span>
-    <ms-draggable element="ul" @update="endChange"
-                  v-model="keyValues" v-bind="{draggable:'.item'}">
-      <div class="kv-row item" v-for="(item, index) in keyValues" :key="index">
+    <div class="kv-row item" v-for="(item, index) in items" :key="index">
       <el-row type="flex" :gutter="20" justify="space-between" align="middle">
-          <el-button icon="el-icon-sort" circle size="mini"/>
-
         <el-col class="kv-checkbox" v-if="isShowEnable">
           <input type="checkbox" v-if="!isDisable(index)" v-model="item.enable"
                  :disabled="isReadOnly"/>
+
         </el-col>
+        <span style="margin-left: 10px" v-else></span>
+
+        <i class="el-icon-top" style="cursor:pointer" @click="moveTop(index)"/>
+        <i class="el-icon-bottom" style="cursor:pointer;" @click="moveBottom(index)"/>
 
         <el-col class="item">
           <el-input v-if="!suggestions" :disabled="isReadOnly" v-model="item.name" size="small" maxlength="200"
@@ -34,20 +35,16 @@
         </el-col>
       </el-row>
     </div>
-    </ms-draggable>
   </div>
 </template>
 
 <script>
   import {KeyValue} from "../model/ApiTestModel";
-  import MsDraggable from 'vuedraggable'
+  import Vue from 'vue';
+
 
   export default {
     name: "MsApiKeyValue",
-    components: {
-      MsDraggable
-    },
-
     props: {
       keyPlaceholder: String,
       valuePlaceholder: String,
@@ -66,6 +63,7 @@
     data() {
       return {
         keyValues: [],
+        loading: false,
       }
     },
     computed: {
@@ -78,6 +76,31 @@
     },
 
     methods: {
+      moveBottom(index) {
+        if (this.items.length < 2 || index === this.items.length - 2) {
+          return;
+        }
+        let thisRow = this.items[index];
+        let nextRow = this.items[index + 1];
+        Vue.set(this.items, index + 1, thisRow);
+        Vue.set(this.items, index, nextRow)
+      },
+      moveTop(index) {
+        if (index === 0) {
+          return;
+        }
+        let thisRow = this.items[index];
+        let lastRow = this.items[index - 1];
+        Vue.set(this.items, index - 1, thisRow);
+        Vue.set(this.items, index, lastRow)
+
+      },
+      reload() {
+        this.loading = true
+        this.$nextTick(() => {
+          this.loading = false
+        })
+      },
       remove: function (index) {
         // 移除整行输入控件及内容
         this.items.splice(index, 1);
@@ -115,27 +138,11 @@
           return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
         };
       },
-      endChange(env) {
-        if (env.newIndex == env.oldIndex) {
-          return;
-        }
-        let newItem = this.keyValues[env.newIndex];
-        let oldItem = this.keyValues[env.oldIndex];
-        this.$set(this.keyValues, env.oldIndex, oldItem);
-        this.$set(this.keyValues, env.newIndex, newItem)
-        this.items.forEach(item => {
-          this.items.splice(0);
-        })
-        this.keyValues.forEach(item => {
-          this.items.push(item);
-        })
-      }
     },
     created() {
       if (this.items.length === 0 || this.items[this.items.length - 1].name) {
         this.items.push(new KeyValue({enable: true}));
       }
-      this.keyValues = this.items;
     }
   }
 </script>
@@ -161,4 +168,8 @@
   .el-autocomplete {
     width: 100%;
   }
+
+  i:hover {
+    color: #783887;
+  }
 </style>

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

@@ -3,17 +3,16 @@
     <span class="kv-description" v-if="description">
       {{ description }}
     </span>
-    <ms-draggable element="ul" @update="endChange"
-               v-model="keyValues" v-bind="{draggable:'.item'}">
 
-      <div class="item kv-row" v-for="(item, index) in keyValues" :key="index">
+    <div class="item kv-row" v-for="(item, index) in parameters" :key="index">
       <el-row type="flex" :gutter="20" justify="space-between" align="middle">
-          <el-button icon="el-icon-sort" circle size="mini"/>
-
         <el-col class="kv-checkbox" v-if="isShowEnable">
           <input type="checkbox" v-if="!isDisable(index)" v-model="item.enable"
                  :disabled="isReadOnly"/>
         </el-col>
+        <span style="margin-left: 10px" v-else></span>
+        <i class="el-icon-top" style="cursor:pointer" @click="moveTop(index)"/>
+        <i class="el-icon-bottom" style="cursor:pointer;" @click="moveBottom(index)"/>
 
         <el-col class="item">
           <el-input v-if="!suggestions" :disabled="isReadOnly" v-model="item.name" size="small" maxlength="200"
@@ -81,7 +80,6 @@
 
       </el-row>
     </div>
-    </ms-draggable>
     <ms-api-variable-advance ref="variableAdvance" :environment="environment" :scenario="scenario"
                              :parameters="parameters"
                              :current-item="currentItem"/>
@@ -94,11 +92,11 @@
   import MsApiVariableAdvance from "./ApiVariableAdvance";
   import MsApiBodyFileUpload from "./body/ApiBodyFileUpload";
   import {REQUIRED} from "../model/JsonData";
-  import MsDraggable from 'vuedraggable'
+  import Vue from 'vue';
 
   export default {
     name: "MsApiVariable",
-    components: {MsApiBodyFileUpload, MsApiVariableAdvance, MsDraggable},
+    components: {MsApiBodyFileUpload, MsApiVariableAdvance},
     props: {
       keyPlaceholder: String,
       valuePlaceholder: String,
@@ -125,7 +123,6 @@
       return {
         currentItem: null,
         requireds: REQUIRED,
-        keyValues: [],
       }
     },
     computed: {
@@ -137,6 +134,25 @@
       }
     },
     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)
+
+      },
       remove: function (index) {
         // 移除整行输入控件及内容
         this.parameters.splice(index, 1);
@@ -204,21 +220,6 @@
           item.contentType = 'text/plain';
         }
       },
-      endChange(env) {
-        if (env.newIndex == env.oldIndex) {
-          return;
-        }
-        let newItem = this.keyValues[env.newIndex];
-        let oldItem = this.keyValues[env.oldIndex];
-        this.$set(this.keyValues, env.oldIndex, oldItem);
-        this.$set(this.keyValues, env.newIndex, newItem)
-        this.parameters.forEach(item => {
-          this.parameters.splice(0);
-        })
-        this.keyValues.forEach(item => {
-          this.parameters.push(item);
-        })
-      }
     },
     created() {
       if (this.parameters.length === 0 || this.parameters[this.parameters.length - 1].name) {
@@ -230,7 +231,6 @@
           contentType: 'text/plain'
         }));
       }
-      this.keyValues = this.parameters;
     }
   }
 </script>

frontend/src/business/components/api/definition/components/case/ApiCaseItem.vue

@@ -85,7 +85,7 @@
 
         <p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
 
-        <ms-api-request-form :showScript="true" :is-read-only="isReadOnly" :headers="apiCase.request.headers " :request="apiCase.request" v-if="api.protocol==='HTTP'"/>
+        <ms-api-request-form :isShowEnable="true" :showScript="true" :is-read-only="isReadOnly" :headers="apiCase.request.headers " :request="apiCase.request" v-if="api.protocol==='HTTP'"/>
         <ms-tcp-basis-parameters :showScript="true" :request="apiCase.request" v-if="api.protocol==='TCP'"/>
         <ms-sql-basis-parameters :showScript="true" :request="apiCase.request" v-if="api.protocol==='SQL'"/>
         <ms-dubbo-basis-parameters :showScript="true" :request="apiCase.request" v-if="api.protocol==='DUBBO'"/>

frontend/src/business/components/api/definition/components/debug/DebugHttpPage.vue

@@ -26,7 +26,7 @@
 
         <p class="tip">{{$t('api_test.definition.request.req_param')}} </p>
         <!-- HTTP 请求参数 -->
-        <ms-api-request-form :headers="request.headers" :request="request" :response="responseData"/>
+        <ms-api-request-form :isShowEnable="true" :headers="request.headers" :request="request" :response="responseData"/>
       </el-form>
       <!-- HTTP 请求返回数据 -->
       <p class="tip">{{$t('api_test.definition.request.res_param')}} </p>

frontend/src/business/components/api/definition/components/runtest/RunTestHTTPPage.vue

@@ -43,7 +43,7 @@
 
         <p class="tip">{{$t('api_test.definition.request.req_param')}} </p>
         <!-- HTTP 请求参数 -->
-        <ms-api-request-form :headers="api.request.headers" :request="api.request"/>
+        <ms-api-request-form :isShowEnable="true" :headers="api.request.headers" :request="api.request"/>
 
       </el-form>
       <!--返回结果-->