测试任务执行前端功能

test-ui/src/api/test/task.js

@@ -44,3 +44,12 @@ export function delTask(id) {
     data: {id}
   })
 }
+
+// 执行用例
+export function runTask(id) {
+  return request({
+    url: '/test/task/run',
+    method: 'post',
+    data: {id}
+  })
+}

test-ui/src/views/test/case/detail/index.vue

@@ -1,13 +1,29 @@
 <template>
   <div class="app-container" v-loading="loading">
     <el-form :model="form" ref="form">
-      <el-form-item label="用例名称" prop="name">
-        <el-input v-model="form.name" placeholder="请输入用例名称"/>
-      </el-form-item>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="用例名称" prop="name">
+            <el-input v-model="name" placeholder="请输入用例名称" :disabled="isDisabled"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="用例状态" prop="status">
+            <el-select v-model="status" placeholder="请选择用例状态" :disabled="isDisabled">
+              <el-option
+                v-for="item in caseStatusOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
     </el-form>
     <el-tabs>
       <el-tab-pane label="接口编排">
-        <step @submit="submit"/>
+        <step @data-from-child="handleChildData" @submit="submit"/>
       </el-tab-pane>
 <!--      <el-tab-pane label="操作日志">-->
 <!--      </el-tab-pane>-->
@@ -27,19 +43,37 @@ export default {
     getCase(this.$route.query.id).then(res => {
       this.form = res.data;
       this.name = res.data.name
+      this.status = res.data.status
     })
   },
   data(){
     return {
       form: {},
       name: "",
+      status: "",
+      isDisabled: true,
+      caseStatusOptions: [{
+        value: 1,
+        label: '草稿'
+      }, {
+        value: 2,
+        label: '通过'
+      }, {
+        value: 3,
+        label: '不通过'
+      }],
       loading: false
     }
   },
   methods: {
+    handleChildData(data) {
+      this.isDisabled = data;
+    },
     submit(list) {
       this.loading = true;
-      if (this.form.name !== this.name) {
+      if (this.form.name !== this.name || this.form.status !== this.status) {
+        this.form.name = this.name;
+        this.form.status = this.status;
         updateCase(this.form).then(res => {
           this.saveStep(list)
         })

test-ui/src/views/test/case/detail/step.vue

@@ -160,6 +160,7 @@ export default {
   methods: {
     caseEditVisible() {
       this.isVisible = true;
+      this.$emit('data-from-child', false);
     },
     handleRun(id) {
       this.$modal.confirm('是否确认执行用例？').then(function () {
@@ -216,6 +217,7 @@ export default {
     },
     submit() {
       this.isVisible = false;
+      this.$emit('data-from-child', true);
       this.$emit("submit", this.list);
     },
     cancel() {

test-ui/src/views/test/task/index.vue

@@ -10,7 +10,7 @@
       <el-table v-loading="loading" :data="dataList" @row-click="handleRowClick">
         <el-table-column label="自动化测试名称" align="center" prop="name"/>
         <el-table-column label="cron表达式" align="center" prop="crontab"/>
-        <el-table-column label="定时任务开关" align="center" prop="status" :formatter="row => row.status ? '开启' : '关闭'"/>
+        <el-table-column label="定时任务开关" align="center" prop="status" :formatter="row => row.status === 0? '开启' : '关闭'"/>
         <el-table-column label="创建人" align="center" prop="createBy"/>
         <el-table-column label="创建时间" align="center" prop="createTime"/>
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
@@ -29,7 +29,7 @@
 <script>
 
 import FolderPage from "@/components/FolderPage/index.vue";
-import {addTask, delTask, listTask} from "@/api/test/task";
+import {addTask, delTask, listTask, runTask} from "@/api/test/task";
 
 export default {
   name: "Task",
@@ -94,7 +94,12 @@ export default {
       });
     },
     handleRun(id) {
-
+      this.$modal.confirm('是否确认立即执行任务？').then(function () {
+        return runTask(id);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("执行成功");
+      });
     }
   }
 }