添加若干交互组件

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

@@ -1,11 +1,29 @@
 <template>
   <div class="testplan-container">
+    <el-row>
+      <el-col :span="10">
+        <el-input placeholder="请输入名称" v-model="testplanName" class="input-with-select">
+          <el-select v-model="project" slot="prepend" placeholder="请选择项目">
+            <el-option
+              v-for="item in projects"
+              :key="item.id"
+              :label="item.name"
+              :value="item.name">
+            </el-option>
+          </el-select>
+        </el-input>
+      </el-col>
+      <el-button type="primary" plain @click="save">保存</el-button>
+      <el-button type="primary" plain @click="saveAndRun">保存并执行</el-button>
+      <el-button type="warning" plain @click="cancel">取消</el-button>
+    </el-row>
+
     <el-tabs v-model="active" type="border-card" :stretch="true">
       <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>
@@ -24,8 +42,26 @@
       PressureConfig,
       AdvancedConfig
     },
-    data () {
+    data() {
       return {
+        project: '',
+        projects: [{
+          id: '选项1',
+          name: '黄金糕'
+        }, {
+          id: '选项2',
+          name: '双皮奶'
+        }, {
+          id: '选项3',
+          name: '蚵仔煎'
+        }, {
+          id: '选项4',
+          name: '龙须面'
+        }, {
+          id: '选项5',
+          name: '北京烤鸭'
+        }],
+        testplanName: '',
         active: '0',
         tabs: [{
           title: '场景配置',
@@ -41,6 +77,29 @@
           component: 'AdvancedConfig'
         }]
       }
+    },
+    methods: {
+      save() {
+        window.console.log("save")
+
+        /// todo: save
+        this.$message({
+          message: '保存成功！',
+          type: 'success'
+        });
+      },
+      saveAndRun() {
+        window.console.log("saveAndRun")
+
+        /// todo: saveAndRun
+        this.$message({
+          message: '保存成功，开始运行！',
+          type: 'success'
+        });
+      },
+      cancel() {
+        this.$router.push({path: '/'})
+      }
     }
   }
 </script>
@@ -50,4 +109,12 @@
     float: none;
     text-align: center;
   }
+
+  .testplan-container .el-select .el-input {
+    width: 130px;
+  }
+
+  .testplan-container .input-with-select .el-input-group__prepend {
+    background-color: #fff;
+  }
 </style>