feat(接口测试): 请求支持跨场景拖拽

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

@@ -2,7 +2,7 @@
   <el-container>
     <el-aside class="scenario-aside">
       <div class="scenario-list">
-        <ms-api-collapse v-model="activeName" @change="handleChange" accordion>
+        <ms-api-collapse v-model="activeName" @change="handleChange">
           <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" :class="{'disable-scenario': !scenario.enable}">

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

@@ -1,33 +1,36 @@
 <template>
   <div class="request-container">
-    <draggable :list="this.scenario.requests" group="Request" class="request-draggable" ghost-class="request-ghost">
+    <draggable :list="this.scenario.requests" group="Request" class="request-draggable" ghost-class="request-ghost"
+               :disabled="isReference">
       <div class="request-item" v-for="(request, index) in this.scenario.requests" :key="index" @click="select(request)"
            :class="{'selected': isSelected(request), 'disable-request': !request.enable || !scenario.enable}">
         <el-row type="flex" align="middle">
           <div class="request-type">
-            {{request.showType()}}
+            {{ request.showType() }}
           </div>
           <div class="request-method">
-            {{request.showMethod()}}
+            {{ request.showMethod() }}
           </div>
           <div class="request-name">
-            {{request.name}}
+            {{ request.name }}
           </div>
           <div class="request-btn">
             <el-dropdown trigger="click" @command="handleCommand">
               <span class="el-dropdown-link el-icon-more"/>
               <el-dropdown-menu slot="dropdown">
                 <el-dropdown-item :disabled="isReadOnly" :command="{type: 'copy', index: index}">
-                  {{$t('api_test.request.copy')}}
+                  {{ $t('api_test.request.copy') }}
                 </el-dropdown-item>
                 <el-dropdown-item :disabled="isReadOnly" :command="{type: 'delete', index: index}">
-                  {{$t('api_test.request.delete')}}
+                  {{ $t('api_test.request.delete') }}
                 </el-dropdown-item>
-                <el-dropdown-item v-if="request.enable" :disabled="isReadOnly" :command="{type: 'disable', index: index}">
-                  {{$t('api_test.scenario.disable')}}
+                <el-dropdown-item v-if="request.enable" :disabled="isReadOnly"
+                                  :command="{type: 'disable', index: index}">
+                  {{ $t('api_test.scenario.disable') }}
                 </el-dropdown-item>
-                <el-dropdown-item v-if="!request.enable" :disabled="isReadOnly" :command="{type: 'enable', index: index}">
-                  {{$t('api_test.scenario.enable')}}
+                <el-dropdown-item v-if="!request.enable" :disabled="isReadOnly"
+                                  :command="{type: 'enable', index: index}">
+                  {{ $t('api_test.scenario.enable') }}
                 </el-dropdown-item>
               </el-dropdown-menu>
             </el-dropdown>
@@ -48,10 +51,10 @@
 </template>
 
 <script>
-  import {RequestFactory} from "../../model/ScenarioModel";
-  import draggable from 'vuedraggable';
+import {RequestFactory} from "../../model/ScenarioModel";
+import draggable from 'vuedraggable';
 
-  export default {
+export default {
   name: "MsApiRequestConfig",
 
   components: {draggable},
@@ -78,6 +81,9 @@
       return function (request) {
         return this.selected === request;
       }
+    },
+    isReference() {
+      return this.scenario.isReference();
     }
   },
 
@@ -137,30 +143,30 @@
   created() {
     this.select(this.scenario.requests[0]);
   }
-  }
+}
 </script>
 
 <style scoped>
-  .request-item {
+.request-item {
   border-left: 5px solid #1E90FF;
   max-height: 40px;
   border-top: 1px solid #EBEEF5;
   cursor: pointer;
-  }
+}
 
-  .request-item:first-child {
+.request-item:first-child {
   border-top: 0;
-  }
+}
 
-  .request-item:hover, .request-item.selected:hover {
+.request-item:hover, .request-item.selected:hover {
   background-color: #ECF5FF;
-  }
+}
 
-  .request-item.selected {
+.request-item.selected {
   background-color: #F5F5F5;
-  }
+}
 
-  .request-type {
+.request-type {
   background-color: #409eff;
   color: #fff;
   margin-left: 5px;
@@ -171,50 +177,50 @@
   display: inline-block;
   line-height: 1;
   text-align: center;
-  }
+}
 
-  .request-method {
+.request-method {
   padding: 0 5px;
   color: #1E90FF;
-  }
+}
 
-  .request-name {
+.request-name {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   font-size: 14px;
   width: 100%;
-  }
+}
 
-  .request-btn {
+.request-btn {
   float: right;
   text-align: center;
   height: 40px;
-  }
+}
 
-  .request-btn .el-icon-more {
+.request-btn .el-icon-more {
   padding: 13px;
-  }
+}
 
-  .request-create {
+.request-create {
   width: 100%;
-  }
+}
 
-  .request-ghost {
+.request-ghost {
   opacity: 0.5;
   background-color: #909399;
-  }
+}
 
-  .request-item.disable-request {
+.request-item.disable-request {
   border-left-color: #909399;
-  }
+}
 
-  .disable-request .request-type {
+.disable-request .request-type {
   background-color: #909399;
-  }
+}
 
-  .disable-request .request-method {
+.disable-request .request-method {
   color: #909399;
-  }
+}
 
 </style>

frontend/src/business/components/api/test/model/ScenarioModel.js

@@ -405,7 +405,7 @@ export class DubboRequest extends Request {
     this.debugReport = undefined;
     this.beanShellPreProcessor = new BeanShellProcessor(options.beanShellPreProcessor);
     this.beanShellPostProcessor = new BeanShellProcessor(options.beanShellPostProcessor);
-    this.enable = options.enable == undefined ? true : options.enable;
+    this.enable = options.enable === undefined ? true : options.enable;
     this.jsr223PreProcessor = new JSR223Processor(options.jsr223PreProcessor);
     this.jsr223PostProcessor = new JSR223Processor(options.jsr223PostProcessor);