添加创建测试的tab

.gitignore

@@ -15,7 +15,7 @@ yarn-error.log*
 
 # Editor directories and files
 .idea
-frontend.iml
+**/*.iml
 .vscode
 *.suo
 *.ntvs*

frontend/src/performance/App.vue

@@ -10,7 +10,7 @@
       </el-col>
       <el-col :span="4">
         <el-row type="flex" justify="center" align="middle">
-          <el-button type="primary" size="small">创建测试</el-button>
+          <el-button type="primary" size="small" @click="createTest">创建测试</el-button>
         </el-row>
       </el-col>
       <el-col :span="10">
@@ -47,7 +47,12 @@
         window.location.href = "/login"
       });
     },
-    components: {MsWebSocket, MsUser, MsMenus, MsSetting, MsView}
+    components: {MsWebSocket, MsUser, MsMenus, MsSetting, MsView},
+    methods: {
+      createTest() {
+        this.$router.push({path: '/createTest'})
+      }
+    }
   }
 </script>
 

frontend/src/performance/components/router/router.js

@@ -3,6 +3,7 @@ import VueRouter from 'vue-router'
 import RouterSidebar from "./RouterSidebar";
 import Setting from "../settings/Setting";
 import Workspace from "../settings/Workspace";
+import CreateTestPlan from "../testPlan/CreateTestPlan";
 
 Vue.use(VueRouter);
 
@@ -22,7 +23,12 @@ const router = new VueRouter({
           component: Workspace
         }
       ]
-    }]
+    },
+    {
+      path: "/createTest", components: {
+        content: CreateTestPlan
+      }
+    },]
 });
 
 export default router

frontend/src/performance/components/testPlan/CreateTestPlan.vue

+<template>
+  <div class="container">
+    <el-tabs v-model="active">
+      <el-tab-pane
+        v-for="item in tabs"
+        :key="item.id"
+        :label="item.title"
+        >
+        <component :is="active === item.id ? item.component : false"/>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+  import BasicConfig from './components/BasicConfig';
+  import PressureConfig from './components/PressureConfig';
+  import AdvancedConfig from './components/AdvancedConfig';
+
+  export default {
+    name: "CreateTestPlan",
+    components: {
+      BasicConfig,
+      PressureConfig,
+      AdvancedConfig
+    },
+    data () {
+      return {
+        active: '0',
+        tabs: [{
+          title: '场景配置',
+          id: '0',
+          component: 'BasicConfig'
+        }, {
+          title: '压力配置',
+          id: '1',
+          component: 'PressureConfig'
+        }, {
+          title: '高级配置',
+          id: '2',
+          component: 'AdvancedConfig'
+        }]
+      }
+    }
+  }
+</script>

frontend/src/performance/components/testPlan/components/AdvancedConfig.vue

+<style>
+
+</style>
+
+<template>
+  <div>我是第三个子组件</div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+      }
+    }
+  }
+</script>

frontend/src/performance/components/testPlan/components/BasicConfig.vue

+<style>
+
+</style>
+
+<template>
+  <div>我是第一个子组件</div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+      }
+    }
+  }
+</script>

frontend/src/performance/components/testPlan/components/PressureConfig.vue

+<style>
+
+</style>
+
+<template>
+  <div>我是第二个子组件</div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+      }
+    }
+  }
+</script>