拖拽

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

@@ -1,5 +1,6 @@
 <template>
   <div class="request-container">
+    <draggable :list="requests" group="Request" class="request-draggable" ghost-class="request-ghost">
       <div class="request-item" v-for="(request, index) in requests" :key="index" @click="select(request)"
            :class="{'selected': isSelected(request)}">
         <el-row type="flex">
@@ -24,15 +25,20 @@
           </div>
         </el-row>
       </div>
+    </draggable>
     <el-button class="request-create" type="primary" size="mini" icon="el-icon-plus" plain @click="createRequest"/>
   </div>
 </template>
 
 <script>
   import {Request} from "../model/ScenarioModel";
+  import draggable from 'vuedraggable';
 
   export default {
     name: "MsApiRequestConfig",
+
+    components: {draggable},
+
     props: {
       requests: Array,
       open: Function
@@ -136,4 +142,9 @@
   .request-create {
     width: 100%;
   }
+
+  .request-ghost {
+    opacity: 0.5;
+    background-color: #909399;
+  }
 </style>

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

@@ -3,6 +3,7 @@
     <el-aside class="scenario-aside">
       <div class="scenario-list">
         <ms-api-collapse v-model="activeName" @change="handleChange" accordion>
+          <draggable :list="scenarios" group="Scenario" class="scenario-draggable" ghost-class="scenario-ghost">
             <ms-api-collapse-item v-for="(scenario, index) in scenarios" :key="index"
                                   :title="scenario.name" :name="index">
               <template slot="title">
@@ -26,6 +27,7 @@
               </template>
               <ms-api-request-config :requests="scenario.requests" :open="select"/>
             </ms-api-collapse-item>
+          </draggable>
         </ms-api-collapse>
       </div>
       <el-button class="scenario-create" type="primary" size="mini" icon="el-icon-plus" plain @click="createScenario"/>
@@ -48,6 +50,7 @@
   import MsApiRequestForm from "./ApiRequestForm";
   import MsApiScenarioForm from "./ApiScenarioForm";
   import {Scenario, Request} from "../model/ScenarioModel";
+  import draggable from 'vuedraggable';
 
   export default {
     name: "MsApiScenarioConfig",
@@ -57,7 +60,8 @@
       MsApiScenarioForm,
       MsApiRequestForm,
       MsApiCollapse,
-      MsApiCollapseItem
+      MsApiCollapseItem,
+      draggable
     },
 
     props: {
@@ -183,4 +187,12 @@
     right: 0;
     bottom: 0;
   }
+
+  .scenario-ghost {
+    opacity: 0.5;
+  }
+
+  .scenario-draggable {
+    background-color: #909399;
+  }
 </style>