完成简单的保存逻辑

backend/src/main/java/io/metersphere/controller/TestPlanController.java

@@ -1,6 +1,7 @@
 package io.metersphere.controller;
 
-import io.metersphere.requests.testplan.FileOperationRequest;
+import io.metersphere.controller.request.testplan.FileOperationRequest;
+import io.metersphere.controller.request.testplan.SaveTestPlanRequest;
 import io.metersphere.service.FileService;
 import org.springframework.http.HttpHeaders;
 import org.springframework.http.MediaType;
@@ -21,6 +22,11 @@ public class TestPlanController {
     @Resource
     private FileService fileService;
 
+    @PostMapping("/save")
+    public void save(@RequestBody SaveTestPlanRequest request) {
+        System.out.println(String.format("save test plan: %s", request.getName()));
+    }
+
     @PostMapping("/file/upload")
     public void uploadJmx(MultipartFile file) throws IOException {
         fileService.upload(file.getOriginalFilename(), file);

backend/src/main/java/io/metersphere/controller/request/testplan/FileOperationRequest.java

@@ -1,4 +1,4 @@
-package io.metersphere.requests.testplan;
+package io.metersphere.controller.request.testplan;
 
 public class FileOperationRequest {
     private String name;

backend/src/main/java/io/metersphere/controller/request/testplan/SaveTestPlanRequest.java

@@ -0,0 +1,31 @@
+package io.metersphere.controller.request.testplan;
+
+public class SaveTestPlanRequest {
+    private String fileId;
+    private String project;
+    private String name;
+
+    public String getFileId() {
+        return fileId;
+    }
+
+    public void setFileId(String fileId) {
+        this.fileId = fileId;
+    }
+
+    public String getProject() {
+        return project;
+    }
+
+    public void setProject(String project) {
+        this.project = project;
+    }
+
+    public String getName() {
+        return name;
+    }
+
+    public void setName(String name) {
+        this.name = name;
+    }
+}

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

@@ -2,8 +2,8 @@
   <div class="testplan-container">
     <el-row>
       <el-col :span="10">
-        <el-input placeholder="请输入名称" v-model="testplanName" class="input-with-select">
+        <el-input placeholder="请输入名称" v-model="testPlan.name" class="input-with-select">
-          <el-select v-model="project" slot="prepend" placeholder="请选择项目">
+          <el-select v-model="testPlan.project" slot="prepend" placeholder="请选择项目">
             <el-option
               v-for="item in projects"
               :key="item.id"
@@ -19,32 +19,35 @@
     </el-row>
 
     <el-tabs v-model="active" type="border-card" :stretch="true">
-      <el-tab-pane
+      <el-tab-pane label="基础配置">
-        v-for="item in tabs"
+        <test-plan-basic-config v-on:change-test-plan="changeTestPlan"/>
-        :key="item.id"
+      </el-tab-pane>
-        :label="item.title"
+      <el-tab-pane label="压力配置">
-      >
+        <test-plan-pressure-config v-on:change-test-plan="changeTestPlan"/>
-        <component :is="active === item.id ? item.component : false"/>
+      </el-tab-pane>
+      <el-tab-pane label="高级配置">
+        <test-plan-advanced-config v-on:change-test-plan="changeTestPlan"/>
       </el-tab-pane>
     </el-tabs>
   </div>
 </template>
 
 <script>
-  import BasicConfig from './components/BasicConfig';
+  import TestPlanBasicConfig from './components/BasicConfig';
-  import PressureConfig from './components/PressureConfig';
+  import TestPlanPressureConfig from './components/PressureConfig';
-  import AdvancedConfig from './components/AdvancedConfig';
+  import TestPlanAdvancedConfig from './components/AdvancedConfig';
 
   export default {
     name: "CreateTestPlan",
     components: {
-      BasicConfig,
+      TestPlanBasicConfig,
-      PressureConfig,
+      TestPlanPressureConfig,
-      AdvancedConfig
+      TestPlanAdvancedConfig,
     },
     data() {
       return {
-        project: '',
+        savePath: "/testplan/save",
+        testPlan: {},
         projects: [{
           id: '选项1',
           name: '黄金糕'
@@ -61,7 +64,6 @@
           id: '选项5',
           name: '北京烤鸭'
         }],
-        testplanName: '',
         active: '0',
         tabs: [{
           title: '场景配置',
@@ -80,16 +82,23 @@
     },
     methods: {
       save() {
-        window.console.log("save")
+        if (!this.validTestPlan()) {
+          return;
+        }
 
-        /// todo: save
+        this.$post(this.savePath, this.testPlan).then(response => {
+          if (response) {
             this.$message({
               message: '保存成功！',
               type: 'success'
             });
+          }
+        }).catch((response) => {
+          this.$message.error(response.message);
+        });
       },
       saveAndRun() {
-        window.console.log("saveAndRun")
+        window.console.log("saveAndRun");
 
         /// todo: saveAndRun
         this.$message({
@@ -97,6 +106,41 @@
           type: 'success'
         });
       },
+      changeTestPlan(updateFunc) {
+        updateFunc(this.testPlan);
+        window.console.log(this.testPlan);
+      },
+      validTestPlan() {
+        if (!this.testPlan.name) {
+          this.$message({
+            message: '测试名称不能为空！',
+            type: 'error'
+          });
+
+          return false;
+        }
+
+        if (!this.testPlan.project) {
+          this.$message({
+            message: '项目不能为空！',
+            type: 'error'
+          });
+
+          return false;
+        }
+
+        if (!this.testPlan.fileId) {
+          this.$message({
+            message: 'jmx文件不能为空！',
+            type: 'error'
+          });
+
+          return false;
+        }
+
+        /// todo: 其他校验
+        return true;
+      },
       cancel() {
         this.$router.push({path: '/'})
       }

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

@@ -3,14 +3,28 @@
 </style>
 
 <template>
-  <div>我是第三个子组件</div>
+  <div>
+    我是第三个子组件
+    <el-button @click="testChange()" type="text" size="small">修改TestPlan值</el-button>
+  </div>
 </template>
 
 <script>
   export default {
+    name: "TestPlanAdvancedConfig",
     data() {
       return {
       }
+    },
+    methods: {
+      testChange() {
+        this._changeTestPlan(function (testPlan) {
+          testPlan.advancedConfig = "2"
+        })
+      },
+      _changeTestPlan(updateTestPlanFunc) {
+        this.$emit('change-test-plan', updateTestPlanFunc);
+      },
     }
   }
 </script>

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

@@ -52,6 +52,7 @@
 
 <script>
   export default {
+    name: "TestPlanBasicConfig",
     data() {
       return {
         jmxUploadPath: '/testplan/file/upload',
@@ -65,6 +66,11 @@
       beforeUpload(file) {
         window.console.log(file);
 
+        /// todo: 上传的文件需要绑定到当前testPlan，这里暂时使用文件名
+        this._changeTestPlan(function (testPlan) {
+          testPlan.fileId = file.name;
+        });
+
         if (!this.fileValidator(file)) {
           /// todo: 显示错误信息
           return false;
@@ -133,6 +139,9 @@
           }
         });
       },
+      _changeTestPlan(updateTestPlanFunc) {
+        this.$emit('change-test-plan', updateTestPlanFunc);
+      },
       fileValidator(file) {
         /// todo: 是否需要对文件内容和大小做限制
         return file.size > 0;

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

@@ -3,14 +3,28 @@
 </style>
 
 <template>
-  <div>我是第二个子组件</div>
+  <div>
+    我是第二个子组件
+    <el-button @click="testChange()" type="text" size="small">修改TestPlan值</el-button>
+  </div>
 </template>
 
 <script>
   export default {
+    name: "TestPlanPressureConfig",
     data() {
       return {
       }
+    },
+    methods: {
+      testChange() {
+        this._changeTestPlan(function (testPlan) {
+          testPlan.pressureConifg = "1"
+        })
+      },
+      _changeTestPlan(updateTestPlanFunc) {
+        this.$emit('change-test-plan', updateTestPlanFunc);
+      },
     }
   }
 </script>