api测试界面，未完待续

frontend/src/business/App.vue

@@ -13,7 +13,6 @@
     </el-row>
 
     <ms-view/>
-    <ms-web-socket/>
   </el-col>
 </template>
 
@@ -21,7 +20,6 @@
   import MsTopMenus from "./components/common/head/HeaderTopMenus";
   import MsView from "./components/common/router/View";
   import MsUser from "./components/common/head/HeaderUser";
-  import MsWebSocket from "./components/common/websocket/WebSocket";
 
   export default {
     name: 'app',
@@ -33,7 +31,6 @@
     beforeCreate() {
       this.$get("/isLogin").then(response => {
         if (response.data.success) {
-          window.console.log(response.data);
           this.$setLang(response.data.data);
           this.auth = true;
         } else {
@@ -43,7 +40,7 @@
         window.location.href = "/login"
       });
     },
-    components: {MsWebSocket, MsUser, MsView, MsTopMenus},
+    components: {MsUser, MsView, MsTopMenus},
     methods: {}
   }
 </script>

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

@@ -11,7 +11,7 @@
                   <el-option v-for="project in projects" :key="project.id" :label="project.name" :value="project.id"/>
                 </el-select>
               </el-input>
-              <el-button type="primary" plain :disabled="isDisabled" @click="saveTest">保存</el-button>
+              <el-button type="primary" plain :disabled="isDisabled" @click="saveTest">{{$t('commons.save')}}</el-button>
             </el-row>
           </el-header>
           <ms-api-scenario-config :scenarios="test.scenarioDefinition" ref="config"/>
@@ -41,17 +41,15 @@
       }
     },
 
-    beforeRouteUpdate(to, from, next) {
-      if (to.params.type === "edit") {
-        this.getTest(to.query.id);
-      } else {
-        this.test = new Test();
-        this.$refs.config.reset();
-      }
-      next();
-    },
-
     watch: {
+      '$route'(to) {
+        if (to.params.type === "edit") {
+          this.getTest(to.query.id);
+        } else {
+          this.test = new Test();
+          this.$refs.config.reset();
+        }
+      },
       test: {
         handler: function () {
           this.change = true;
@@ -65,7 +63,7 @@
         this.result = this.$get("/api/get/" + id, response => {
           let item = response.data;
 
-          this.test.reset({
+          this.test = new Test({
             id: item.id,
             projectId: item.projectId,
             name: item.name,

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

@@ -3,17 +3,8 @@
     <div class="main-content">
       <el-card>
         <template v-slot:header>
-          <div>
-            <el-row type="flex" justify="space-between" align="middle">
-              <span class="title">{{$t('commons.test')}}</span>
-              <span class="search">
-                <el-input type="text" size="small" :placeholder="$t('load_test.search_by_name')"
-                          prefix-icon="el-icon-search"
-                          maxlength="60"
-                          v-model="condition" @change="search" clearable/>
-              </span>
-            </el-row>
-          </div>
+          <ms-table-header :condition.sync="condition" @search="search" :title="$t('commons.test')"
+                           @create="create"/>
         </template>
         <el-table :data="tableData" class="test-content">
           <el-table-column
@@ -65,13 +56,14 @@
 
 <script>
   import MsTablePagination from "../../common/pagination/TablePagination";
+  import MsTableHeader from "../../common/components/MsTableHeader";
 
   export default {
-    components: {MsTablePagination},
+    components: {MsTableHeader, MsTablePagination},
     data() {
       return {
         result: {},
-        condition: "",
+        condition: {name: ""},
         projectId: null,
         tableData: [],
         multipleSelection: [],
@@ -83,10 +75,11 @@
       }
     },
 
-    beforeRouteUpdate(to, from, next) {
-      this.projectId = to.params.projectId;
-      this.search();
-      next();
+    watch: {
+      '$route'(to) {
+        this.projectId = to.params.projectId;
+        this.initTableData();
+      }
     },
 
     created: function () {
@@ -95,9 +88,12 @@
     },
 
     methods: {
+      create() {
+        this.$router.push('/api/test/create');
+      },
       search() {
         let param = {
-          name: this.condition,
+          name: this.condition.name,
         };
 
         if (this.projectId !== 'all') {
@@ -129,7 +125,7 @@
                   message: this.$t('commons.delete_success'),
                   type: 'success'
                 });
-                this.initTableData();
+                this.search();
               });
             }
           }

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

@@ -1,27 +1,5 @@
 import {generateId} from "element-ui/src/utils/util";
 
-const assign = function (obj, options) {
-  if (options) {
-    for (let name in options) {
-      if (options.hasOwnProperty(name)) {
-        if (!(obj[name] instanceof Array)) {
-          obj[name] = options[name];
-        }
-      }
-    }
-  }
-}
-
-const assigns = function (target, source, type) {
-  if (target instanceof Array && source instanceof Array) {
-    if (source && source.length > 0) {
-      source.forEach((options) => {
-        target.push(new type(options));
-      })
-    }
-  }
-}
-
 export const BODY_TYPE = {
   KV: "KV",
   TEXT: "TEXT"
@@ -33,54 +11,80 @@ export const ASSERTION_TYPE = {
   RESPONSE_TIME: "RESPONSE_TIME"
 }
 
-export class Test {
-  constructor(options) {
-    this.reset(options);
+class BaseConfig {
+
+  set(options) {
+    options = this.initOptions(options)
+
+    for (let name in options) {
+      if (options.hasOwnProperty(name)) {
+        if (!(this[name] instanceof Array)) {
+          this[name] = options[name];
+        }
+      }
+    }
   }
 
-  reset(options) {
-    options = this.getDefaultOptions(options);
+  sets(types, options) {
+    options = this.initOptions(options)
+    if (types) {
+      for (let name in types) {
+        if (types.hasOwnProperty(name) && options.hasOwnProperty(name)) {
+          options[name].forEach((o) => {
+            this[name].push(new types[name](o));
+          })
+        }
+      }
+    }
+  }
+
+  initOptions(options) {
+    return options || {};
+  }
+}
+
+export class Test extends BaseConfig {
+  constructor(options) {
+    super();
     this.id = null;
     this.name = null;
     this.projectId = null;
     this.scenarioDefinition = [];
 
-    assign(this, options);
-    assigns(this.scenarioDefinition, options.scenarioDefinition, Scenario);
+    this.set(options);
+    this.sets({scenarioDefinition: Scenario}, options);
   }
 
-  getDefaultOptions(options) {
+  initOptions(options) {
     options = options || {};
     options.scenarioDefinition = options.scenarioDefinition || [new Scenario()];
     return options;
   }
 }
 
-export class Scenario {
+export class Scenario extends BaseConfig {
   constructor(options) {
-    options = this.getDefaultOptions(options);
+    super();
     this.name = null;
     this.url = null;
     this.variables = [];
     this.headers = [];
     this.requests = [];
 
-    assign(this, options);
-    assigns(this.variables, options.variables, KeyValue);
-    assigns(this.headers, options.headers, KeyValue);
-    assigns(this.requests, options.requests, Request);
+    this.set(options);
+    this.sets({variables: KeyValue, headers: KeyValue, requests: Request}, options);
   }
 
-  getDefaultOptions(options) {
+  initOptions(options) {
     options = options || {};
     options.requests = options.requests || [new Request()];
     return options;
   }
 }
 
-export class Request {
+export class Request extends BaseConfig {
   constructor(options) {
-    options = this.getDefaultOptions(options);
+    super();
     this.randomId = generateId();
     this.name = null;
     this.url = null;
@@ -91,13 +95,12 @@ export class Request {
     this.assertions = null;
     this.extract = [];
 
-    assign(this, options);
-    assigns(this.parameters, options.parameters, KeyValue);
-    assigns(this.headers, options.headers, KeyValue);
+    this.set(options);
+    this.sets({parameters: KeyValue, headers: KeyValue}, options);
     // TODO assigns extract
   }
 
-  getDefaultOptions(options) {
+  initOptions(options) {
     options = options || {};
     options.method = "GET";
     options.body = new Body(options.body);
@@ -106,15 +109,15 @@ export class Request {
   }
 }
 
-export class Body {
+export class Body extends BaseConfig {
   constructor(options) {
-    options = options || {};
+    super();
     this.type = null;
     this.text = null;
     this.kvs = [];
 
-    assign(this, options);
-    assigns(this.kvs, options.kvs, KeyValue);
+    this.set(options);
+    this.sets({kvs: KeyValue}, options);
   }
 
   isKV() {
@@ -122,72 +125,69 @@ export class Body {
   }
 }
 
-export class KeyValue {
+export class KeyValue extends BaseConfig {
   constructor(options) {
-    options = options || {};
+    super();
     this.key = null;
     this.value = null;
 
-    assign(this, options);
+    this.set(options);
   }
 }
 
-export class Assertions {
+export class Assertions extends BaseConfig {
   constructor(options) {
-    options = this.getDefaultOptions(options);
+    super();
     this.text = [];
     this.regex = [];
     this.responseTime = null;
 
-    assign(this, options);
-    assigns(this.text, options.text, KeyValue);
-    assigns(this.regex, options.regex, KeyValue);
+    this.set(options);
+    this.sets({text: KeyValue, regex: KeyValue}, options);
   }
 
-  getDefaultOptions(options) {
+  initOptions(options) {
     options = options || {};
     options.responseTime = new ResponseTime(options.responseTime);
     return options;
   }
 }
 
-class AssertionType {
+class AssertionType extends BaseConfig {
   constructor(type) {
+    super();
     this.type = type;
   }
 }
 
 export class Text extends AssertionType {
   constructor(options) {
-    options = options || {};
     super(ASSERTION_TYPE.TEXT);
     this.subject = null;
     this.condition = null;
     this.value = null;
 
-    assign(this, options);
+    this.set(options);
   }
 }
 
 export class Regex extends AssertionType {
   constructor(options) {
-    options = options || {};
     super(ASSERTION_TYPE.REGEX);
     this.subject = null;
     this.expression = null;
     this.description = null;
 
-    assign(this, options);
+    this.set(options);
   }
 }
 
 export class ResponseTime extends AssertionType {
   constructor(options) {
-    options = options || {};
     super(ASSERTION_TYPE.RESPONSE_TIME);
     this.responseInTime = null;
 
-    assign(this, options);
+    this.set(options);
   }
 }
 

frontend/src/business/components/common/head/RecentList.vue

@@ -1,11 +1,11 @@
 <template>
-  <div>
+  <div v-loading="result.loading">
     <div class="recent-text">
       <i class="el-icon-time"/>
       <span>{{options.title}}</span>
+      <i class="el-icon-refresh" @click="recent"/>
     </div>
-    <el-menu-item :key="i.id" v-for="i in items"
-                  :index="getIndex(i)" :route="getRouter(i)">
+    <el-menu-item :key="i.id" v-for="i in items" :index="getIndex(i)" :route="getRouter(i)">
       <span class="title">{{ i.name }}</span>
     </el-menu-item>
   </div>
@@ -21,14 +21,11 @@
       options: Object
     },
     mounted() {
-      if (hasRoles(ROLE_TEST_VIEWER, ROLE_TEST_USER, ROLE_TEST_MANAGER)) {
-        this.$get(this.options.url, (response) => {
-          this.items = response.data;
-        });
-      }
+      this.recent();
     },
     data() {
       return {
+        result: {},
         items: []
       }
     },
@@ -45,6 +42,16 @@
           }
         }
       }
+    },
+
+    methods: {
+      recent: function () {
+        if (hasRoles(ROLE_TEST_VIEWER, ROLE_TEST_USER, ROLE_TEST_MANAGER)) {
+          this.result = this.$get(this.options.url, (response) => {
+            this.items = response.data;
+          });
+        }
+      }
     }
   }
 </script>
@@ -60,6 +67,17 @@
 
   .recent-text span {
     padding-left: 6px;
+    line-height: 36px;
+  }
+
+  .recent-text .el-icon-refresh {
+    cursor: pointer;
+    float: right;
+    line-height: 36px;
+  }
+
+  .recent-text .el-icon-refresh:hover {
+    color: #BBBBBB;
   }
 
   .title {