fix(接口自动化): 修复部分缺陷

2021-01-22 18:12:05 +08:00 · 2021-01-22 18:12:05 +08:00 · 4e38c73ac5
parent 8f45254225
commit 4e38c73ac5
8 changed files with 203 additions and 135 deletions
--- 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>
--- 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"
--- 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>
--- 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>
--- 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>
--- 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() {

      }
    }
--- 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>
--- 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>