From c9cf9b8e8f185552ecc8b6a9170c73dc7a0dea45 Mon Sep 17 00:00:00 2001
From: q4speed <kun@fit2cloud.com>
Date: Mon, 7 Sep 2020 16:11:06 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=8E=A5=E5=8F=A3=E6=B5=8B=E8=AF=95):=20?=
 =?UTF-8?q?=E8=AF=B7=E6=B1=82=E6=94=AF=E6=8C=81=E8=B7=A8=E5=9C=BA=E6=99=AF?=
 =?UTF-8?q?=E6=8B=96=E6=8B=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../api/test/components/ApiScenarioConfig.vue |   2 +-
 .../components/request/ApiRequestConfig.vue   | 320 +++++++++---------
 .../api/test/model/ScenarioModel.js           |   2 +-
 3 files changed, 165 insertions(+), 159 deletions(-)

diff --git a/frontend/src/business/components/api/test/components/ApiScenarioConfig.vue b/frontend/src/business/components/api/test/components/ApiScenarioConfig.vue
index ba91dce801..34f42086ef 100644
--- a/frontend/src/business/components/api/test/components/ApiScenarioConfig.vue
+++ b/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}">
diff --git a/frontend/src/business/components/api/test/components/request/ApiRequestConfig.vue b/frontend/src/business/components/api/test/components/request/ApiRequestConfig.vue
index a3c69ac094..6c4461b941 100644
--- a/frontend/src/business/components/api/test/components/request/ApiRequestConfig.vue
+++ b/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,173 +51,176 @@
 </template>
 
 <script>
-  import {RequestFactory} from "../../model/ScenarioModel";
-  import draggable from 'vuedraggable';
+import {RequestFactory} from "../../model/ScenarioModel";
+import draggable from 'vuedraggable';
 
-  export default {
-    name: "MsApiRequestConfig",
+export default {
+  name: "MsApiRequestConfig",
 
-    components: {draggable},
+  components: {draggable},
 
-    props: {
-      scenario: Object,
-      isReadOnly: {
-        type: Boolean,
-        default: false
-      }
-    },
-
-    data() {
-      return {
-        selected: 0,
-        visible: false,
-        types: RequestFactory.TYPES,
-        type: ""
-      }
-    },
-
-    computed: {
-      isSelected() {
-        return function (request) {
-          return this.selected === request;
-        }
-      }
-    },
-
-    methods: {
-      createRequest: function (type) {
-        let request = new RequestFactory({type: type});
-        if (this.scenario.environmentId) {
-          request.useEnvironment = true;
-        }
-        this.scenario.requests.push(request);
-        this.type = "";
-        this.visible = false;
-      },
-      copyRequest: function (index) {
-        let request = this.scenario.requests[index];
-        this.scenario.requests.push(new RequestFactory(request));
-      },
-      disableRequest: function (index) {
-        this.scenario.requests[index].enable = false;
-      },
-      enableRequest: function (index) {
-        this.scenario.requests[index].enable = true;
-      },
-      deleteRequest: function (index) {
-        this.scenario.requests.splice(index, 1);
-        if (this.scenario.requests.length === 0) {
-          this.createRequest();
-        }
-      },
-      handleCommand: function (command) {
-        switch (command.type) {
-          case "copy":
-            this.copyRequest(command.index);
-            break;
-          case "delete":
-            this.deleteRequest(command.index);
-            break;
-          case "disable":
-            this.disableRequest(command.index);
-            break;
-          case "enable":
-            this.enableRequest(command.index);
-            break;
-        }
-      },
-      select: function (request) {
-        request.environment = this.scenario.environment;
-        if (!request.useEnvironment) {
-          request.useEnvironment = false;
-        }
-        request.dubboConfig = this.scenario.dubboConfig;
-        this.selected = request;
-        this.$emit("select", request, this.scenario);
-      }
-    },
-
-    created() {
-      this.select(this.scenario.requests[0]);
+  props: {
+    scenario: Object,
+    isReadOnly: {
+      type: Boolean,
+      default: false
     }
+  },
+
+  data() {
+    return {
+      selected: 0,
+      visible: false,
+      types: RequestFactory.TYPES,
+      type: ""
+    }
+  },
+
+  computed: {
+    isSelected() {
+      return function (request) {
+        return this.selected === request;
+      }
+    },
+    isReference() {
+      return this.scenario.isReference();
+    }
+  },
+
+  methods: {
+    createRequest: function (type) {
+      let request = new RequestFactory({type: type});
+      if (this.scenario.environmentId) {
+        request.useEnvironment = true;
+      }
+      this.scenario.requests.push(request);
+      this.type = "";
+      this.visible = false;
+    },
+    copyRequest: function (index) {
+      let request = this.scenario.requests[index];
+      this.scenario.requests.push(new RequestFactory(request));
+    },
+    disableRequest: function (index) {
+      this.scenario.requests[index].enable = false;
+    },
+    enableRequest: function (index) {
+      this.scenario.requests[index].enable = true;
+    },
+    deleteRequest: function (index) {
+      this.scenario.requests.splice(index, 1);
+      if (this.scenario.requests.length === 0) {
+        this.createRequest();
+      }
+    },
+    handleCommand: function (command) {
+      switch (command.type) {
+        case "copy":
+          this.copyRequest(command.index);
+          break;
+        case "delete":
+          this.deleteRequest(command.index);
+          break;
+        case "disable":
+          this.disableRequest(command.index);
+          break;
+        case "enable":
+          this.enableRequest(command.index);
+          break;
+      }
+    },
+    select: function (request) {
+      request.environment = this.scenario.environment;
+      if (!request.useEnvironment) {
+        request.useEnvironment = false;
+      }
+      request.dubboConfig = this.scenario.dubboConfig;
+      this.selected = request;
+      this.$emit("select", request, this.scenario);
+    }
+  },
+
+  created() {
+    this.select(this.scenario.requests[0]);
   }
+}
 </script>
 
 <style scoped>
-  .request-item {
-    border-left: 5px solid #1E90FF;
-    max-height: 40px;
-    border-top: 1px solid #EBEEF5;
-    cursor: pointer;
-  }
+.request-item {
+  border-left: 5px solid #1E90FF;
+  max-height: 40px;
+  border-top: 1px solid #EBEEF5;
+  cursor: pointer;
+}
 
-  .request-item:first-child {
-    border-top: 0;
-  }
+.request-item:first-child {
+  border-top: 0;
+}
 
-  .request-item:hover, .request-item.selected:hover {
-    background-color: #ECF5FF;
-  }
+.request-item:hover, .request-item.selected:hover {
+  background-color: #ECF5FF;
+}
 
-  .request-item.selected {
-    background-color: #F5F5F5;
-  }
+.request-item.selected {
+  background-color: #F5F5F5;
+}
 
-  .request-type {
-    background-color: #409eff;
-    color: #fff;
-    margin-left: 5px;
-    padding: 4px 8px;
-    border-radius: 20px;
-    white-space: nowrap;
-    font-size: 12px;
-    display: inline-block;
-    line-height: 1;
-    text-align: center;
-  }
+.request-type {
+  background-color: #409eff;
+  color: #fff;
+  margin-left: 5px;
+  padding: 4px 8px;
+  border-radius: 20px;
+  white-space: nowrap;
+  font-size: 12px;
+  display: inline-block;
+  line-height: 1;
+  text-align: center;
+}
 
-  .request-method {
-    padding: 0 5px;
-    color: #1E90FF;
-  }
+.request-method {
+  padding: 0 5px;
+  color: #1E90FF;
+}
 
-  .request-name {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    font-size: 14px;
-    width: 100%;
-  }
+.request-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 14px;
+  width: 100%;
+}
 
-  .request-btn {
-    float: right;
-    text-align: center;
-    height: 40px;
-  }
+.request-btn {
+  float: right;
+  text-align: center;
+  height: 40px;
+}
 
-  .request-btn .el-icon-more {
-    padding: 13px;
-  }
+.request-btn .el-icon-more {
+  padding: 13px;
+}
 
-  .request-create {
-    width: 100%;
-  }
+.request-create {
+  width: 100%;
+}
 
-  .request-ghost {
-    opacity: 0.5;
-    background-color: #909399;
-  }
+.request-ghost {
+  opacity: 0.5;
+  background-color: #909399;
+}
 
-  .request-item.disable-request {
-    border-left-color: #909399;
-  }
+.request-item.disable-request {
+  border-left-color: #909399;
+}
 
-  .disable-request .request-type {
-    background-color: #909399;
-  }
+.disable-request .request-type {
+  background-color: #909399;
+}
 
-  .disable-request .request-method {
-    color: #909399;
-  }
+.disable-request .request-method {
+  color: #909399;
+}
 
 </style>
diff --git a/frontend/src/business/components/api/test/model/ScenarioModel.js b/frontend/src/business/components/api/test/model/ScenarioModel.js
index 05acfdfac9..cbab697e3a 100644
--- a/frontend/src/business/components/api/test/model/ScenarioModel.js
+++ b/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);