添加单个用例管理模块

package-lock.json

@@ -2771,6 +2771,16 @@
       "integrity": "sha512-GRMWDxpOB6Dgk2E5Uo+3eEBvtOOlimMmpbFiKuLFnQzYDavtLFY3K5ona41jgN/WdRZtG7utuVSVTL4HbZHGkw==",
       "dev": true
     },
+    "clipboard": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.8.tgz",
+      "integrity": "sha512-Y6WO0unAIQp5bLmk1zdThRhgJt/x3ks6f30s3oE3H1mgIEU33XyQjEf8gsf6DxC7NPX8Y1SsNWjUjL/ywLnnbQ==",
+      "requires": {
+        "good-listener": "^1.2.2",
+        "select": "^1.1.2",
+        "tiny-emitter": "^2.0.0"
+      }
+    },
     "cliui": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-4.1.0.tgz",
@@ -4508,6 +4518,11 @@
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
       "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk="
     },
+    "delegate": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
+      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
+    },
     "depd": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
@@ -6214,6 +6229,14 @@
         "pinkie-promise": "^2.0.0"
       }
     },
+    "good-listener": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
+      "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
+      "requires": {
+        "delegate": "^3.1.2"
+      }
+    },
     "graceful-fs": {
       "version": "4.2.4",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz",
@@ -13543,6 +13566,11 @@
         }
       }
     },
+    "select": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
+      "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0="
+    },
     "select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -14653,6 +14681,11 @@
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
       "dev": true
     },
+    "tiny-emitter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
+      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
+    },
     "tmp": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
@@ -15308,6 +15341,15 @@
         "vue": "^2.2.6"
       }
     },
+    "vue-json-viewer": {
+      "version": "2.2.18",
+      "resolved": "https://registry.npmjs.org/vue-json-viewer/-/vue-json-viewer-2.2.18.tgz",
+      "integrity": "sha512-OytvjRrnmH2cUfz8hbXM34GuYW08LFCQIr7tppQRJIaqGfVpn96F0cOuV+8ezwoEpeRT8xmldpeATBhiimNYDQ==",
+      "requires": {
+        "clipboard": "^2.0.4",
+        "vue": "^2.6.9"
+      }
+    },
     "vue-loader": {
       "version": "13.7.3",
       "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-13.7.3.tgz",

package.json

@@ -22,6 +22,7 @@
     "vue-bus": "^1.2.1",
     "vue-events": "^3.1.0",
     "vue-json-editor": "^1.4.3",
+    "vue-json-viewer": "^2.2.18",
     "vue-router": "^3.0.1",
     "vuex": "^3.6.2"
   },

src/api/getAutoCase.js

+import request from '@/utils/holmesRequest'
+// 获取case列表
+export function singleCaseList(queryInfo) {
+  return request({
+    url: '/auto/testcase/list',
+    method: 'get',
+    params: queryInfo
+  })
+}
+// 获取接口详情
+export function getInterfaceDetail(queryInfo) {
+  return request({
+    url: '/auto/interface/detail',
+    method: 'get',
+    params: queryInfo
+  })
+}
+// 添加用例接口
+export function addCase(data) {
+  return request({
+    url: '/auto/testcase/add',
+    method: 'post',
+    data
+  })
+}
+// 删除case接口
+export function delCase(queryInfo) {
+  return request({
+    url: '/auto/testcase/delete',
+    method: 'get',
+    params: queryInfo
+  })
+}
+// 执行单个case
+export function executeCase(queryInfo) {
+  return request({
+    url: '/auto/execute/testcase',
+    method: 'get',
+    params: queryInfo
+  })
+}
+// 单个用例编辑接口
+export function editCase(data) {
+  return request({
+    url: '/auto/testcase/modify',
+    method: 'post',
+    data
+  })
+}

src/assets/css/global.css

@@ -17,7 +17,7 @@ html, body, #app {
 .jsoneditor-vue {
     height: 300px;
 }
-/* .el-collapse-item__header{
+.el-collapse-item__header{
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
@@ -30,10 +30,9 @@ html, body, #app {
     color: #303133;
     cursor: pointer;
     border-bottom: 1px solid #EBEEF5;
-    font-size: 13px;
-    font-weight: 500;
+    font-size: 15px !important;
+    font-weight: 550 !important;
     -webkit-transition: border-bottom-color .3s;
     transition: border-bottom-color .3s;
     outline: 0;
-    font-size: 15px;
-} */
\ No newline at end of file
+}
\ No newline at end of file

src/main.js

@@ -9,6 +9,7 @@ import echarts from 'echarts'
 import 'element-ui/lib/theme-chalk/index.css'
 import axios from 'axios'
 import store from './store/store'
+import JsonViewer from 'vue-json-viewer'
 import {
   Container,
   Header,
@@ -89,6 +90,7 @@ Vue.use(Radio)
 Vue.use(Row)
 Vue.use(Col)
 Vue.use(VueBus)
+Vue.use(JsonViewer)
 /* eslint-disable no-new */
 new Vue({
   el: '#app',

src/router/index.js

@@ -20,6 +20,8 @@ import ModelList from '../views/auto/Model'
 import InterfaceDetail from '../views/auto/InterfaceDetail'
 import JiraNotify from '../views/jira/Notify'
 import AddInterface from '../views/auto/AddInterface'
+import CaseList from '../views/auto/CaseList'
+import AddCase from '../views/auto/AddCase'
 
 Vue.use(Router)
 const router = new Router({
@@ -96,24 +98,34 @@ const router = new Router({
         // 2021-4-08新添加项目管理页面
         {
           path: '/auto/Project',
-          name: '项目管理',
+          name: ProjectList,
           component: ProjectList
         },
         {
           path: '/auto/Model',
-          name: '模块管理',
+          name: ModelList,
           component: ModelList
         },
         {
           path: '/auto/InterfaceDetail',
-          name: '接口详情',
+          name: InterfaceDetail,
           component: InterfaceDetail
         },
         {
           path: '/auto/AddInterface',
-          name: 'AddInterface',
+          name: AddInterface,
           component: AddInterface
         },
+        {
+          path: '/auto/CaseList',
+          name: CaseList,
+          component: CaseList
+        },
+        {
+          path: '/auto/AddCase',
+          name: AddCase,
+          component: AddCase
+        },
         {
           'path': '/effect/jira/notify',
           component: JiraNotify

src/views/auto/CaseList.vue

+<template>
+  <div>
+    <el-card>
+      <div>
+        模块:
+        <el-select v-model="selectModelId" placeholder="请选择模块" @change="selectChangeModel" clearable>
+          <el-option v-for="item in modelList" :key="item.id" :label="item.name" :value="item.id"></el-option>
+        </el-select>
+        <el-input v-model="queryModuleInfo.testcaseName" clearable placeholder="请输入用例名称" style="width: 300px;"></el-input>
+        <el-button type="primary" style="margin-left:20px" @click="queryData">查询</el-button>
+        <el-button type="primary" style="margin-left:20px" @click="addPage">新增</el-button>
+      </div>
+      <el-table :data="singleCaseList" border style="width: 100%;margin-top:20px">
+        <el-table-column type='index' width="50px"></el-table-column>
+        <el-table-column prop="moduleName" label="模块名称" width="200px"></el-table-column>
+        <el-table-column prop="interfaceName" label="接口名称" width="200px"></el-table-column>
+        <el-table-column prop="name" label="用例名称" width="200px"></el-table-column>
+        <el-table-column prop="createTime" label="创建日期" width="200px"></el-table-column>
+        <el-table-column prop="updateTime" label="修改日期" width="200px"></el-table-column>
+        <el-table-column label="操作">
+          <slot slot-scope="scope">
+            <el-button type="warning" @click="executeCaseFrom(scope.row)">执行</el-button>
+            <el-button type="success" @click="editCaseFrom(scope.row)">编辑</el-button>
+            <el-button type="danger" @click="delCaseFrom(scope.row)">删除</el-button>
+          </slot>
+        </el-table-column>
+      </el-table>
+      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="queryModuleInfo.pageNum" :page-size="queryModuleInfo.pageSize" layout="total, prev, pager, next"
+        :total="totalNum"></el-pagination>
+    </el-card>
+    <!-- 接口返回数据 -->
+    <el-card v-if="isShow">
+      <div slot="header">
+        <el-row>
+          <el-col :span="3">
+            <div>响应结果 :</div>
+          </el-col>
+        </el-row>
+        <json-viewer :value="requestData"></json-viewer>
+      </div>
+    </el-card>
+  </div>
+</template>
+<script>
+import { getModulList } from '@/api/getAotoInterface'
+import { singleCaseList, delCase, executeCase } from '@/api/getAutoCase'
+import bus from '@/utils/bus'
+export default {
+  data() {
+    return {
+      queryModuleInfo: {
+        pageNum: 1,
+        pageSize: 20,
+        moduleId: '',
+        testcaseName: ''
+      },
+      moduleInfo: {
+        pageNum: 1,
+        pageSize: 100
+      },
+      totalNum: 0,
+      modelList: [],
+      selectModelId: '',
+      singleCaseList: [],
+      delCase: {
+        testcaseId: ''
+      },
+      executeCaseParam: {
+        namespace: '',
+        testcaseId: ''
+      },
+      isShow: false,
+      requestData: ''
+    }
+  },
+  created() {
+    this.getModulList()
+    this.getCaseList()
+    bus.$on('refresh', () => {
+      this.isShow = false
+      this.getCaseList()
+    })
+  },
+  methods: {
+    // 获取模块列表
+    getModulList() {
+      getModulList(this.moduleInfo).then((resp) => {
+        this.modelList = resp.data.data.list
+      })
+    },
+    // 下拉框改变事件
+    selectChangeModel() {
+      this.queryModuleInfo.moduleId = this.selectModelId
+    },
+    // 查询方法
+    queryData() {
+      this.getCaseList()
+    },
+    // 获取case列表
+    getCaseList() {
+      singleCaseList(this.queryModuleInfo).then((resp) => {
+        this.singleCaseList = resp.data.data.list
+        this.totalNum = resp.data.data.total
+      })
+    },
+    // 添加方法
+    addPage() {
+      this.$router.push('AddCase')
+      this.$nextTick(function () {
+        // DOM 现在更新了
+        var row = '新增'
+        bus.$emit('casemsg', row)
+      })
+    },
+    // 执行用例
+    executeCaseFrom(row) {
+      this.isShow = true
+      // 获取用例id
+      this.executeCaseParam.testcaseId = row.id
+      this.executeCaseParam.namespace = window.sessionStorage.getItem('env')
+      // 获取当前场景
+      executeCase(this.executeCaseParam).then((resp) => {
+        this.requestData = resp.data.data
+      })
+    },
+    // 编辑用例
+    editCaseFrom(row) {
+      this.$router.push({ path: 'AddCase' })
+      // bus使用
+      this.$nextTick(function () {
+        // DOM 现在更新了
+        bus.$emit('casemsg', row)
+      })
+    },
+    // 对话框方法
+    openMessage(message, confirmText, doit) {
+      this.$messageBox
+        .confirm(message, '确定', {
+          cancelButtonText: '取消',
+          confirmButtonText: confirmText,
+          type: 'warning'
+        })
+        .then(() => {
+          doit()
+        })
+        .catch(() => {})
+    },
+    // 删除用例
+    delCaseFrom(row) {
+      this.delCase.testcaseId = row.id
+      this.openMessage('您确定要删除吗？', '删除', () => {
+        delCase(this.delCase)
+          .then((resp) => {
+            if (resp.data.data === true) {
+              this.$message.success('删除成功！')
+              this.getCaseList()
+            } else if (resp.data.data === false) {
+              this.$message.error(resp.data.msg)
+            }
+          })
+          .catch((error) => {
+            this.$message({ type: 'error', message: error })
+          })
+      })
+    },
+    handleSizeChange(newSize) {
+      this.queryModuleInfo.pageSize = newSize
+      this.getCaseList()
+    },
+    handleCurrentChange(newPage) {
+      this.queryModuleInfo.pageNum = newPage
+      this.getCaseList()
+    }
+  }
+}
+</script>

src/views/auto/InterfaceDetail.vue

@@ -10,7 +10,7 @@
         <el-select v-model="selectModelId" placeholder="请选择模块" @change="selectChangeModel" clearable>
           <el-option v-for="item in modelList" :key="item.id" :label="item.name" :value="item.id"></el-option>
         </el-select>
-        <el-input v-model="interfaceName" clearable placeholder="请输入接口名称" style="width: 300px;"></el-input>
+        <el-input v-model="queryModuleInfo.interfaceName" clearable placeholder="请输入接口名称" style="width: 300px;"></el-input>
         <el-button type="primary" style="margin-left:20px" @click="queryData">查询</el-button>
         <el-button type="primary" style="margin-left:20px" @click="addPage">新增</el-button>
       </div>
@@ -51,9 +51,10 @@ export default {
     return {
       queryModuleInfo: {
         pageNum: 1,
-        pageSize: 10,
+        pageSize: 20,
         projectId: '',
-        moduleId: ''
+        moduleId: '',
+        interfaceName: ''
       },
       totalNum: 0,
       projectList: [],
@@ -99,10 +100,18 @@ export default {
     // 查询方法
     queryData() {
       this.getInterfaceDetailList()
+      // this.queryModuleInfo.projectId = ''
+      // this.queryModuleInfo.moduleId = ''
+      // this.queryModuleInfo.interfaceName = ''
     },
     // 添加跳转页面
     addPage() {
       this.$router.push('AddInterface')
+      this.$nextTick(function () {
+        // DOM 现在更新了
+        var row = '新增'
+        bus.$emit('msg', row)
+      })
     },
     // 获取接口列表
     getInterfaceDetailList() {
@@ -121,10 +130,7 @@ export default {
     },
     // 编辑接口方法
     editInterfaceFrom(row) {
-      this.$router.push({
-        path: 'AddInterface',
-        name: 'AddInterface'
-      })
+      this.$router.push({ path: 'AddInterface' })
       // bus使用
       this.$nextTick(function () {
         // DOM 现在更新了

src/views/auto/Model.vue

@@ -30,7 +30,7 @@
         <el-form-item label="模块名称:" prop="name" style="width:400px">
           <el-input v-model="modelForm.name"></el-input>
         </el-form-item>
-        <el-form-item label="所属项目:" prop="projectName">
+        <el-form-item label="所属项目:" prop="projectId">
           <el-select v-model="modelForm.projectId" placeholder="请选择项目" clearable style="width:310px">
             <el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id"></el-option>
           </el-select>
@@ -87,7 +87,7 @@ export default {
             trigger: 'blur'
           }
         ],
-        projectName: [
+        projectId: [
           {
             required: true,
             message: '模块名称不能为空！',

src/views/layout/leftAside/menu.json

@@ -107,17 +107,24 @@
         },
         {
           "id": 3,
-          "title": "接口列表",
+          "title": "接口管理",
           "icon": "el-icon-bank-card",
           "path": "/auto/InterfaceDetail"
         },
         {
           "id": 4,
+          "title": "用例管理",
+          "icon": "el-icon-postcard",
+          "path": "/auto/CaseList"
+        },
+        {
+          "id": 6,
           "title": "新增接口",
           "show": "false",
           "icon": "el-icon-bank-card",
           "path": "/auto/AddInterface"
         }
+        
       ]
     }
   ]