From 4e38c73ac5097941cd22cac02417c10c0ed5cac5 Mon Sep 17 00:00:00 2001
From: fit2-zhao <yong.zhao@fit2cloud.com>
Date: Fri, 22 Jan 2021 18:12:05 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E6=8E=A5=E5=8F=A3=E8=87=AA=E5=8A=A8?=
 =?UTF-8?q?=E5=8C=96):=20=E4=BF=AE=E5=A4=8D=E9=83=A8=E5=88=86=E7=BC=BA?=
 =?UTF-8?q?=E9=99=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../base/mapper/ext/ExtApiTestCaseMapper.xml  |   2 +-
 frontend/package.json                         |   2 +-
 .../automation/scenario/EditApiScenario.vue   |  12 ++
 .../api/automation/scenario/MsInputTag.vue    |   5 +-
 .../api/automation/scenario/ReferenceView.vue |  64 ++++----
 .../scenario/ScenarioExtendBtns.vue           |  29 ++--
 .../api/definition/components/ApiKeyValue.vue |  77 ++++++---
 .../api/definition/components/ApiVariable.vue | 147 ++++++++++--------
 8 files changed, 203 insertions(+), 135 deletions(-)

diff --git a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiTestCaseMapper.xml b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiTestCaseMapper.xml
index b5c9256f6a..1d82a073eb 100644
--- a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiTestCaseMapper.xml
+++ b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiTestCaseMapper.xml
@@ -169,7 +169,7 @@
             </include>
         </if>
         <if test="${condition}.creator != null">
-            and t1.user_id
+            and t1.create_user_id
             <include refid="condition">
                 <property name="object" value="${condition}.creator"/>
             </include>
diff --git a/frontend/package.json b/frontend/package.json
index ab73330e9e..f0813079bd 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -42,7 +42,7 @@
     "vue-papa-parse": "^2.0.0",
     "vue-pdf": "^4.2.0",
     "vue-router": "^3.1.3",
-    "vuedraggable": "^2.23.2",
+    "vuedraggable": "^2.24.3",
     "vuex": "^3.1.2",
     "xml-js": "^1.6.11",
     "yan-progress": "^1.0.3"
diff --git a/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue b/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue
index 7353c73a1f..69a515bf11 100644
--- a/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue
+++ b/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue
@@ -1028,4 +1028,16 @@
     right: 50px;
     z-index: 1;
   }
+
+  /deep/ .el-tree-node__expand-icon.expanded {
+    color: #7C3985;
+  }
+
+  /deep/ .el-icon-caret-right {
+    color: #7C3985;
+  }
+
+  /deep/ .is-leaf {
+    color: transparent;
+  }
 </style>
diff --git a/frontend/src/business/components/api/automation/scenario/MsInputTag.vue b/frontend/src/business/components/api/automation/scenario/MsInputTag.vue
index 6e5b83d248..b8decca23f 100644
--- a/frontend/src/business/components/api/automation/scenario/MsInputTag.vue
+++ b/frontend/src/business/components/api/automation/scenario/MsInputTag.vue
@@ -4,7 +4,9 @@
     :class="[size ? 'el-input-tag--' + size : '']"
     style="height: auto"
     @click="foucusTagInput">
+
     <el-tag
+      class="ms-top"
       v-for="(tag, idx) in innerTags"
       v-bind="$attrs"
       type="info"
@@ -13,7 +15,7 @@
       :closable="!readOnly"
       :disable-transitions="false"
       @close="remove(idx)">
-      {{tag}}
+      {{tag && tag.length>10? tag.substring(0,10)+"...":tag}}
     </el-tag>
     <input
       v-if="!readOnly"
@@ -167,4 +169,5 @@
     height: 36px;
     line-height: 36px;
   }
+
 </style>
diff --git a/frontend/src/business/components/api/automation/scenario/ReferenceView.vue b/frontend/src/business/components/api/automation/scenario/ReferenceView.vue
index bea790b786..c46a71000b 100644
--- a/frontend/src/business/components/api/automation/scenario/ReferenceView.vue
+++ b/frontend/src/business/components/api/automation/scenario/ReferenceView.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :close-on-click-modal="false" :title="$t('api_test.automation.scenario_ref')" :visible.sync="visible"
-             width="45%" :destroy-on-close="true">
+             width="45%" :destroy-on-close="true" append-to-body>
     <span>{{ $t('api_test.automation.scenario_ref') }}：</span>
     <div class="refs" v-loading="scenarioLoading">
       <div v-for="(item, index) in scenarioRefs" :key="index" class="el-button--text">{{ item.name }}</div>
@@ -23,41 +23,41 @@
 
 <script>
 
-export default {
-  name: "MsReferenceView",
-  components: {},
-  data() {
-    return {
-      visible: false,
-      scenarioLoading: false,
-      scenarioRefs: [],
-      planRefs: []
-    }
-  },
-  methods: {
-    getReferenceData(row) {
-      this.scenarioLoading = true;
-      this.scenarioRefs = [];
-      this.$post("/api/automation/getReference/", row, response => {
-        this.scenarioRefs = response.data.scenarioList;
-        this.planRefs = response.data.testPlanList;
-        this.scenarioLoading = false;
-      })
+  export default {
+    name: "MsReferenceView",
+    components: {},
+    data() {
+      return {
+        visible: false,
+        scenarioLoading: false,
+        scenarioRefs: [],
+        planRefs: []
+      }
     },
-    open(row) {
-      this.getReferenceData(row);
-      this.visible = true
+    methods: {
+      getReferenceData(row) {
+        this.scenarioLoading = true;
+        this.scenarioRefs = [];
+        this.$post("/api/automation/getReference/", row, response => {
+          this.scenarioRefs = response.data.scenarioList;
+          this.planRefs = response.data.testPlanList;
+          this.scenarioLoading = false;
+        })
+      },
+      open(row) {
+        this.getReferenceData(row);
+        this.visible = true
+      }
     }
   }
-}
 </script>
 
 <style scoped>
-.refs {
-  min-height: 50px;
-  max-height: 200px;
-  overflow-y: auto;
-  font-size: 12px;
-  padding-bottom: 10px;
-}
+  .refs {
+    min-height: 50px;
+    max-height: 200px;
+    overflow-y: auto;
+    font-size: 12px;
+    padding-bottom: 10px;
+  }
 </style>
diff --git a/frontend/src/business/components/api/automation/scenario/ScenarioExtendBtns.vue b/frontend/src/business/components/api/automation/scenario/ScenarioExtendBtns.vue
index a17c2d65fb..d10bf34863 100644
--- a/frontend/src/business/components/api/automation/scenario/ScenarioExtendBtns.vue
+++ b/frontend/src/business/components/api/automation/scenario/ScenarioExtendBtns.vue
@@ -1,16 +1,19 @@
 <template>
-  <el-dropdown @command="handleCommand" class="scenario-ext-btn">
-    <el-link type="primary" :underline="false">
-      <el-icon class="el-icon-more"></el-icon>
-    </el-link>
-    <el-dropdown-menu slot="dropdown">
-      <el-dropdown-item command="ref">{{ $t('api_test.automation.view_ref') }}</el-dropdown-item>
-      <el-dropdown-item command="schedule" v-tester>{{ $t('api_test.automation.schedule') }}</el-dropdown-item>
-      <el-dropdown-item command="create_performance" v-tester>{{ $t('api_test.create_performance_test') }}</el-dropdown-item>
-    </el-dropdown-menu>
+  <div>
+    <el-dropdown @command="handleCommand" class="scenario-ext-btn">
+      <el-link type="primary" :underline="false">
+        <el-icon class="el-icon-more"></el-icon>
+      </el-link>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item command="ref">{{ $t('api_test.automation.view_ref') }}</el-dropdown-item>
+        <el-dropdown-item command="schedule" v-tester>{{ $t('api_test.automation.schedule') }}</el-dropdown-item>
+        <el-dropdown-item command="create_performance" v-tester>{{ $t('api_test.create_performance_test') }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
     <ms-reference-view ref="viewRef"/>
-    <ms-schedule-maintain ref="scheduleMaintain" @refreshTable="refreshTable" />
-  </el-dropdown>
+    <ms-schedule-maintain ref="scheduleMaintain" @refreshTable="refreshTable"/>
+
+  </div>
 </template>
 
 <script>
@@ -20,7 +23,7 @@
 
   export default {
     name: "MsScenarioExtendButtons",
-    components: { MsReferenceView,MsScheduleMaintain},
+    components: {MsReferenceView, MsScheduleMaintain},
     props: {
       row: Object
     },
@@ -61,7 +64,7 @@
           })
         });
       },
-      refreshTable(){
+      refreshTable() {
 
       }
     }
diff --git a/frontend/src/business/components/api/definition/components/ApiKeyValue.vue b/frontend/src/business/components/api/definition/components/ApiKeyValue.vue
index c528e245e5..b323da0d26 100644
--- a/frontend/src/business/components/api/definition/components/ApiKeyValue.vue
+++ b/frontend/src/business/components/api/definition/components/ApiKeyValue.vue
@@ -3,41 +3,50 @@
     <span class="kv-description" v-if="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" v-if="isShowEnable">
-          <input type="checkbox" v-if="!isDisable(index)" v-model="item.enable"
-                 :disabled="isReadOnly"/>
-        </el-col>
+    <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"/>
 
-        <el-col>
-          <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="kv-checkbox" v-if="isShowEnable">
+            <input type="checkbox" v-if="!isDisable(index)" v-model="item.enable"
+                   :disabled="isReadOnly"/>
+          </el-col>
 
-        </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>
-          <el-input :disabled="isReadOnly" v-model="item.value" size="small" @change="change"
-                    :placeholder="valueText" 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>
+          </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>
+    </ms-draggable>
   </div>
 </template>
 
 <script>
   import {KeyValue} from "../model/ApiTestModel";
+  import MsDraggable from 'vuedraggable'
 
   export default {
     name: "MsApiKeyValue",
+    components: {
+      MsDraggable
+    },
 
     props: {
       keyPlaceholder: String,
@@ -55,7 +64,9 @@
       suggestions: Array,
     },
     data() {
-      return {}
+      return {
+        keyValues: [],
+      }
     },
     computed: {
       keyText() {
@@ -104,11 +115,27 @@
           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>
diff --git a/frontend/src/business/components/api/definition/components/ApiVariable.vue b/frontend/src/business/components/api/definition/components/ApiVariable.vue
index bfc7423322..d5f1a133c9 100644
--- a/frontend/src/business/components/api/definition/components/ApiVariable.vue
+++ b/frontend/src/business/components/api/definition/components/ApiVariable.vue
@@ -3,80 +3,85 @@
     <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" 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>
+      <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"/>
 
-        <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"
-                         @change="typeChange(item)">
-                <el-option value="text"/>
-                <el-option value="file"/>
-              </el-select>
-            </template>
-          </el-input>
+          <el-col class="kv-checkbox" v-if="isShowEnable">
+            <input type="checkbox" v-if="!isDisable(index)" v-model="item.enable"
+                   :disabled="isReadOnly"/>
+          </el-col>
 
-          <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 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>
+            <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 class="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>
 
-        <el-col 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 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>
-          <el-input v-model="item.description" size="small" maxlength="200"
-                    :placeholder="$t('commons.description')" show-word-limit>
-          </el-input>
+          <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-autocomplete :disabled="isReadOnly" 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 v-model="item.description" size="small" maxlength="200"
+                      :placeholder="$t('commons.description')" show-word-limit>
+            </el-input>
 
-        </el-col>
+            <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 v-if="item.type === 'file'">
-          <ms-api-body-file-upload :parameter="item"/>
-        </el-col>
+          </el-col>
 
-        <el-col v-if="type === 'body'" class="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="item.type === 'file'" class="item">
+            <ms-api-body-file-upload :parameter="item"/>
+          </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-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-row>
-    </div>
+        </el-row>
+      </div>
+    </ms-draggable>
     <ms-api-variable-advance ref="variableAdvance" :environment="environment" :scenario="scenario"
                              :parameters="parameters"
                              :current-item="currentItem"/>
@@ -89,10 +94,11 @@
   import MsApiVariableAdvance from "./ApiVariableAdvance";
   import MsApiBodyFileUpload from "./body/ApiBodyFileUpload";
   import {REQUIRED} from "../model/JsonData";
+  import MsDraggable from 'vuedraggable'
 
   export default {
     name: "MsApiVariable",
-    components: {MsApiBodyFileUpload, MsApiVariableAdvance},
+    components: {MsApiBodyFileUpload, MsApiVariableAdvance, MsDraggable},
     props: {
       keyPlaceholder: String,
       valuePlaceholder: String,
@@ -118,7 +124,8 @@
     data() {
       return {
         currentItem: null,
-        requireds: REQUIRED
+        requireds: REQUIRED,
+        keyValues: [],
       }
     },
     computed: {
@@ -196,6 +203,21 @@
         } else {
           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() {
@@ -208,6 +230,7 @@
           contentType: 'text/plain'
         }));
       }
+      this.keyValues = this.parameters;
     }
   }
 </script>