用例-增删改查

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

@@ -1,6 +1,6 @@
 <template>
   <folder-page type="api" @click="folderHandleSelected" ref="folder">
-    <div v-if="this.queryParams.groupId && this.queryParams.groupId !== 0">
+    <div v-if="queryParams.groupId && queryParams.groupId !== 0">
       <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
         <el-form-item label="接口名称" prop="name">
           <el-input v-model="queryParams.name" placeholder="请输入接口名称" clearable @keyup.enter.native="handleQuery"/>
@@ -120,7 +120,7 @@ export default {
       this.$tab.openPage("修改接口", "/api/edit", {id: row.id});
     },
     handleDelete(row) {
-      this.$modal.confirm('是否确认删除接口编号为"' + row.id + '"的数据项？').then(function () {
+      this.$modal.confirm('是否确认删除接口？').then(function () {
         return delApi(row.id);
       }).then(() => {
         this.getList();

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

@@ -0,0 +1,16 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: "test",
+  created() {
+    console.log(this.$route.query.id);
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

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

@@ -1,30 +1,102 @@
 <template>
   <folder-page type="case" @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="创建人" align="center" prop="createBy"/>
+        <el-table-column label="用例状态" align="center" prop="status" :formatter="row => ['','草稿', '通过', '不通过'][row.status]"/>
+        <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="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 {addCase, delCase, listCase} from "@/api/test/case";
 
 export default {
   name: "Case",
   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;
+      listCase(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) {
+          addCase({
+            groupId: this.queryParams.groupId,
+            name: value
+          }).then(res => {
+            this.$message.success("添加成功")
+            this.getList()
+          })
+        }
+      });
+    },
+    handleRowClick(row) {
+      this.$tab.openPage("用例 - " + row.name, "/case/detail", {id: row.id});
+    },
+    handleDelete(id) {
+      this.$modal.confirm('是否确认删除用例？').then(function () {
+        return delCase(id);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      });
     }
   }
 }
 </script>
 
 <style scoped lang="scss">
-
+::v-deep .el-table__row {
+  cursor: pointer;
+}
 </style>