diff --git a/test-ui/src/api/test/task.js b/test-ui/src/api/test/task.js
new file mode 100644
index 0000000..3d892a2
--- /dev/null
+++ b/test-ui/src/api/test/task.js
@@ -0,0 +1,46 @@
+import request from '@/utils/request'
+
+// 查询用例列表
+export function listTask(query) {
+  return request({
+    url: '/test/task/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询用例详细
+export function getTask(id) {
+  return request({
+    url: '/test/task/detail',
+    method: 'post',
+    data: {id}
+  })
+}
+
+// 新增用例
+export function addTask(data) {
+  return request({
+    url: '/test/task/add',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改用例
+export function updateTask(data) {
+  return request({
+    url: '/test/task/edit',
+    method: 'post',
+    data: data
+  })
+}
+
+// 删除用例
+export function delTask(id) {
+  return request({
+    url: '/test/task/del',
+    method: 'post',
+    data: {id}
+  })
+}
diff --git a/test-ui/src/router/index.js b/test-ui/src/router/index.js
index d27ec4b..0bad751 100644
--- a/test-ui/src/router/index.js
+++ b/test-ui/src/router/index.js
@@ -130,6 +130,20 @@ export const constantRoutes = [
       }
     ]
   },
+  {
+    path: '/task/detail',
+    component: Layout,
+    hidden: true,
+    children: [
+      {
+        path: '',
+        component: () => import('@/views/test/task/edit'),
+        name: 'TaskDetail',
+        noCache: true,
+        meta: { title: '自动化测试', activeMenu: '/task' }
+      }
+    ]
+  },
 ]
 
 // 动态路由，基于用户权限动态去加载
diff --git a/test-ui/src/views/test/task/index.vue b/test-ui/src/views/test/task/index.vue
index 98deb69..266bef9 100644
--- a/test-ui/src/views/test/task/index.vue
+++ b/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>