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,53 +1,50 @@
 <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">
-        <el-row type="flex" :gutter="20" justify="space-between" align="middle">
-          <el-button icon="el-icon-sort" circle size="mini"/>
+    <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-col class="kv-checkbox" v-if="isShowEnable">
+          <input type="checkbox" v-if="!isDisable(index)" v-model="item.enable"
+                 :disabled="isReadOnly"/>
 
-          <el-col class="kv-checkbox" v-if="isShowEnable">
-            <input type="checkbox" v-if="!isDisable(index)" v-model="item.enable"
-                   :disabled="isReadOnly"/>
-          </el-col>
+        </el-col>
+        <span style="margin-left: 10px" v-else></span>
 
-          <el-col class="item">
-            <el-input v-if="!suggestions" :disabled="isReadOnly" v-model="item.name" size="small" maxlength="200"
-                      @change="change"
-                      :placeholder="keyText" show-word-limit/>
-            <el-autocomplete :disabled="isReadOnly" :maxlength="200" v-if="suggestions" v-model="item.name" size="small"
-                             :fetch-suggestions="querySearch" @change="change" :placeholder="keyText"
-                             show-word-limit/>
+        <i class="el-icon-top" style="cursor:pointer" @click="moveTop(index)"/>
+        <i class="el-icon-bottom" style="cursor:pointer;" @click="moveBottom(index)"/>
 
-          </el-col>
+        <el-col class="item">
+          <el-input v-if="!suggestions" :disabled="isReadOnly" v-model="item.name" size="small" maxlength="200"
+                    @change="change"
+                    :placeholder="keyText" show-word-limit/>
+          <el-autocomplete :disabled="isReadOnly" :maxlength="200" v-if="suggestions" v-model="item.name" size="small"
+                           :fetch-suggestions="querySearch" @change="change" :placeholder="keyText"
+                           show-word-limit/>
 
-          <el-col class="item">
-            <el-input :disabled="isReadOnly" v-model="item.value" size="small" @change="change"
-                      :placeholder="valueText" show-word-limit/>
-          </el-col>
-          <el-col class="item kv-delete">
-            <el-button size="mini" class="el-icon-delete-solid" circle @click="remove(index)"
-                       :disabled="isDisable(index) || isReadOnly"/>
-          </el-col>
-        </el-row>
-      </div>
-    </ms-draggable>
+        </el-col>
+
+        <el-col class="item">
+          <el-input :disabled="isReadOnly" v-model="item.value" size="small" @change="change"
+                    :placeholder="valueText" show-word-limit/>
+        </el-col>
+        <el-col class="item 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>
 </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,85 +3,83 @@
     <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">
-        <el-row type="flex" :gutter="20" justify="space-between" align="middle">
-          <el-button icon="el-icon-sort" circle size="mini"/>
+    <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-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="kv-checkbox" v-if="isShowEnable">
-            <input type="checkbox" v-if="!isDisable(index)" v-model="item.enable"
-                   :disabled="isReadOnly"/>
-          </el-col>
+        <el-col class="item">
+          <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"
+                         @change="typeChange(item)">
+                <el-option value="text"/>
+                <el-option value="file"/>
+              </el-select>
+            </template>
+          </el-input>
 
-          <el-col class="item">
-            <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"
-                           @change="typeChange(item)">
-                  <el-option value="text"/>
-                  <el-option value="file"/>
-                </el-select>
-              </template>
-            </el-input>
+          <el-autocomplete :disabled="isReadOnly" v-if="suggestions" v-model="item.name" size="small"
+                           :fetch-suggestions="querySearch" @change="change" :placeholder="keyText" show-word-limit/>
 
-            <el-autocomplete :disabled="isReadOnly" v-if="suggestions" v-model="item.name" size="small"
-                             :fetch-suggestions="querySearch" @change="change" :placeholder="keyText" show-word-limit/>
+        </el-col>
 
-          </el-col>
+        <el-col class="item kv-select">
+          <el-select v-model="item.required" size="small">
+            <el-option v-for="req in requireds" :key="req.id" :label="req.name" :value="req.id"/>
+          </el-select>
+        </el-col>
 
-          <el-col class="item kv-select">
-            <el-select v-model="item.required" size="small">
-              <el-option v-for="req in requireds" :key="req.id" :label="req.name" :value="req.id"/>
-            </el-select>
-          </el-col>
+        <el-col class="item" v-if="item.type !== 'file'">
+          <el-autocomplete
+            :disabled="isReadOnly"
+            size="small"
+            class="input-with-autocomplete"
+            v-model="item.value"
+            :fetch-suggestions="funcSearch"
+            :placeholder="valueText"
+            value-key="name"
+            highlight-first-item
+            @select="change">
+            <i slot="suffix" class="el-input__icon el-icon-edit pointer" @click="advanced(item)"></i>
+          </el-autocomplete>
+        </el-col>
 
-          <el-col class="item" v-if="item.type !== 'file'">
-            <el-autocomplete
-              :disabled="isReadOnly"
-              size="small"
-              class="input-with-autocomplete"
-              v-model="item.value"
-              :fetch-suggestions="funcSearch"
-              :placeholder="valueText"
-              value-key="name"
-              highlight-first-item
-              @select="change">
-              <i slot="suffix" class="el-input__icon el-icon-edit pointer" @click="advanced(item)"></i>
-            </el-autocomplete>
-          </el-col>
+        <el-col class="item">
+          <el-input v-model="item.description" size="small" maxlength="200"
+                    :placeholder="$t('commons.description')" show-word-limit>
+          </el-input>
 
-          <el-col class="item">
-            <el-input v-model="item.description" size="small" maxlength="200"
-                      :placeholder="$t('commons.description')" show-word-limit>
-            </el-input>
+          <el-autocomplete :disabled="isReadOnly" v-if="suggestions" v-model="item.name" size="small"
+                           :fetch-suggestions="querySearch" @change="change" :placeholder="keyText" show-word-limit/>
 
-            <el-autocomplete :disabled="isReadOnly" v-if="suggestions" v-model="item.name" size="small"
-                             :fetch-suggestions="querySearch" @change="change" :placeholder="keyText" show-word-limit/>
+        </el-col>
 
-          </el-col>
+        <el-col v-if="item.type === 'file'" class="item">
+          <ms-api-body-file-upload :parameter="item"/>
+        </el-col>
 
-          <el-col v-if="item.type === 'file'" class="item">
-            <ms-api-body-file-upload :parameter="item"/>
-          </el-col>
+        <el-col v-if="type === 'body'" class="item kv-select">
+          <el-input :disabled="isReadOnly" v-model="item.contentType" size="small"
+                    @change="change" :placeholder="$t('api_test.request.content_type')" show-word-limit>
+          </el-input>
+        </el-col>
 
-          <el-col v-if="type === 'body'" class="item kv-select">
-            <el-input :disabled="isReadOnly" v-model="item.contentType" size="small"
-                      @change="change" :placeholder="$t('api_test.request.content_type')" show-word-limit>
-            </el-input>
-          </el-col>
-
-          <el-col class="item kv-delete">
-            <el-button size="mini" class="el-icon-delete-solid" circle @click="remove(index)"
-                       :disabled="isDisable(index) || isReadOnly"/>
-          </el-col>
+        <el-col class="item kv-delete">
+          <el-button size="mini" class="el-icon-delete-solid" circle @click="remove(index)"
+                     :disabled="isDisable(index) || isReadOnly"/>
+        </el-col>
 
 
-        </el-row>
-      </div>
-    </ms-draggable>
+      </el-row>
+    </div>
     <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>
       <!--返回结果-->