task

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

@@ -1,30 +1,108 @@
 <template>
   <folder-page type="task" @click="folderHandleSelected">
-    case
+    <div v-if="queryParams.groupId && queryParams.groupId !== 0">
+      <el-row :gutter="10" class="mb8">
+        <el-col :span="1.5">
+          <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新建自动化测试</el-button>
+        </el-col>
+        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      </el-row>
+      <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="createBy"/>
+        <el-table-column label="创建时间" align="center" prop="createTime"/>
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+          <template slot-scope="scope">
+            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleRun(scope.row.id)">执行</el-button>
+            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row.id)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/>
+    </div>
+    <el-empty v-else/>
   </folder-page>
 </template>
 
 <script>
 
 import FolderPage from "@/components/FolderPage/index.vue";
+import {addTask, delTask, listTask} from "@/api/test/task";
 
 export default {
   name: "Task",
   components: {FolderPage},
   data() {
     return {
-
+      loading: false,
+      showSearch: true,
+      total: 0,
+      dataList: [],
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        groupId: null,
+      },
     }
   },
   methods: {
     folderHandleSelected(id) {
-      console.log(id)
+      if (id) {
+        this.queryParams.groupId = id;
+        this.getList();
+      } else {
+        this.dataList = [];
+      }
+    },
+    getList() {
+      this.loading = true;
+      listTask(this.queryParams).then(response => {
+        this.dataList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    handleAdd() {
+      this.$prompt('请输入名称', '新增', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        inputPattern: /^(?!\s*$).+/,
+        inputErrorMessage: '名称不能为空'
+      }).then(({value}) => {
+        if (value) {
+          addTask({
+            groupId: this.queryParams.groupId,
+            name: value
+          }).then(res => {
+            this.$message.success("添加成功")
+            this.getList()
+          })
+        }
+      });
+    },
+    handleRowClick(row) {
+      this.$tab.openPage(`自动化测试[${row.name}]`, "/task/detail", {id: row.id});
+    },
+    handleDelete(id) {
+      this.$modal.confirm('是否确认删除用例？').then(function () {
+        return delTask(id);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      });
+    },
+    handleRun(id) {
+
     }
   }
 }
 </script>
 
 <style scoped lang="scss">
-
+::v-deep .el-table__row {
+  cursor: pointer;
+}
 </style>