Skip to content

Q
qa-platform-ui
Commit 83bf00cc authored by 王晓铜's avatar 王晓铜
Browse files
Options

添加单个用例管理模块

parent 75ee64d9
Hide whitespace changes
Inline Side-by-side
Showing with 882 additions and 81 deletions
package-lock.json
View file @ 83bf00cc
...@@ -2771,6 +2771,16 @@ ...@@ -2771,6 +2771,16 @@
"integrity": "sha512-GRMWDxpOB6Dgk2E5Uo+3eEBvtOOlimMmpbFiKuLFnQzYDavtLFY3K5ona41jgN/WdRZtG7utuVSVTL4HbZHGkw==", "integrity": "sha512-GRMWDxpOB6Dgk2E5Uo+3eEBvtOOlimMmpbFiKuLFnQzYDavtLFY3K5ona41jgN/WdRZtG7utuVSVTL4HbZHGkw==",
"dev": true "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": { "cliui": {
"version": "4.1.0", "version": "4.1.0",
"resolved": "https://registry.npmjs.org/cliui/-/cliui-4.1.0.tgz", "resolved": "https://registry.npmjs.org/cliui/-/cliui-4.1.0.tgz",
...@@ -4508,6 +4518,11 @@ ...@@ -4508,6 +4518,11 @@
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
"integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=" "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": { "depd": {
"version": "1.1.2", "version": "1.1.2",
"resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz", "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
...@@ -6214,6 +6229,14 @@ ...@@ -6214,6 +6229,14 @@
"pinkie-promise": "^2.0.0" "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": { "graceful-fs": {
"version": "4.2.4", "version": "4.2.4",
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz", "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz",
...@@ -13543,6 +13566,11 @@ ...@@ -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": { "select-hose": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz", "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
...@@ -14653,6 +14681,11 @@ ...@@ -14653,6 +14681,11 @@
"integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=", "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
"dev": true "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": { "tmp": {
"version": "0.0.33", "version": "0.0.33",
"resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz", "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
...@@ -15308,6 +15341,15 @@ ...@@ -15308,6 +15341,15 @@
"vue": "^2.2.6" "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": { "vue-loader": {
"version": "13.7.3", "version": "13.7.3",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-13.7.3.tgz", "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-13.7.3.tgz",
......
package.json
View file @ 83bf00cc
...@@ -22,6 +22,7 @@ ...@@ -22,6 +22,7 @@
"vue-bus": "^1.2.1", "vue-bus": "^1.2.1",
"vue-events": "^3.1.0", "vue-events": "^3.1.0",
"vue-json-editor": "^1.4.3", "vue-json-editor": "^1.4.3",
"vue-json-viewer": "^2.2.18",
"vue-router": "^3.0.1", "vue-router": "^3.0.1",
"vuex": "^3.6.2" "vuex": "^3.6.2"
}, },
......
src/api/getAutoCase.js 0 → 100644
View file @ 83bf00cc
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
View file @ 83bf00cc
...@@ -17,7 +17,7 @@ html, body, #app { ...@@ -17,7 +17,7 @@ html, body, #app {
.jsoneditor-vue { .jsoneditor-vue {
height: 300px; height: 300px;
} }
/* .el-collapse-item__header{ .el-collapse-item__header{
display: -webkit-box; display: -webkit-box;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
...@@ -30,10 +30,9 @@ html, body, #app { ...@@ -30,10 +30,9 @@ html, body, #app {
color: #303133; color: #303133;
cursor: pointer; cursor: pointer;
border-bottom: 1px solid #EBEEF5; border-bottom: 1px solid #EBEEF5;
font-size: 13px; font-size: 15px !important;
font-weight: 500; font-weight: 550 !important;
-webkit-transition: border-bottom-color .3s; -webkit-transition: border-bottom-color .3s;
transition: border-bottom-color .3s; transition: border-bottom-color .3s;
outline: 0; outline: 0;
font-size: 15px; }
} */ \ No newline at end of file
\ No newline at end of file
src/main.js
View file @ 83bf00cc
...@@ -9,6 +9,7 @@ import echarts from 'echarts' ...@@ -9,6 +9,7 @@ import echarts from 'echarts'
import 'element-ui/lib/theme-chalk/index.css' import 'element-ui/lib/theme-chalk/index.css'
import axios from 'axios' import axios from 'axios'
import store from './store/store' import store from './store/store'
import JsonViewer from 'vue-json-viewer'
import { import {
Container, Container,
Header, Header,
...@@ -89,6 +90,7 @@ Vue.use(Radio) ...@@ -89,6 +90,7 @@ Vue.use(Radio)
Vue.use(Row) Vue.use(Row)
Vue.use(Col) Vue.use(Col)
Vue.use(VueBus) Vue.use(VueBus)
Vue.use(JsonViewer)
/* eslint-disable no-new */ /* eslint-disable no-new */
new Vue({ new Vue({
el: '#app', el: '#app',
......
src/router/index.js
View file @ 83bf00cc
...@@ -20,6 +20,8 @@ import ModelList from '../views/auto/Model' ...@@ -20,6 +20,8 @@ import ModelList from '../views/auto/Model'
import InterfaceDetail from '../views/auto/InterfaceDetail' import InterfaceDetail from '../views/auto/InterfaceDetail'
import JiraNotify from '../views/jira/Notify' import JiraNotify from '../views/jira/Notify'
import AddInterface from '../views/auto/AddInterface' import AddInterface from '../views/auto/AddInterface'
import CaseList from '../views/auto/CaseList'
import AddCase from '../views/auto/AddCase'
Vue.use(Router) Vue.use(Router)
const router = new Router({ const router = new Router({
...@@ -96,24 +98,34 @@ const router = new Router({ ...@@ -96,24 +98,34 @@ const router = new Router({
// 2021-4-08新添加项目管理页面 // 2021-4-08新添加项目管理页面
{ {
path: '/auto/Project', path: '/auto/Project',
name: '项目管理', name: ProjectList,
component: ProjectList component: ProjectList
}, },
{ {
path: '/auto/Model', path: '/auto/Model',
name: '模块管理', name: ModelList,
component: ModelList component: ModelList
}, },
{ {
path: '/auto/InterfaceDetail', path: '/auto/InterfaceDetail',
name: '接口详情', name: InterfaceDetail,
component: InterfaceDetail component: InterfaceDetail
}, },
{ {
path: '/auto/AddInterface', path: '/auto/AddInterface',
name: 'AddInterface', name: AddInterface,
component: AddInterface component: AddInterface
}, },
{
path: '/auto/CaseList',
name: CaseList,
component: CaseList
},
{
path: '/auto/AddCase',
name: AddCase,
component: AddCase
},
{ {
'path': '/effect/jira/notify', 'path': '/effect/jira/notify',
component: JiraNotify component: JiraNotify
......
src/views/auto/AddCase.vue 0 → 100644
View file @ 83bf00cc
<template>
<div>
<el-form ref="caseForm" :rules="rules" :model="caseForm" label-width="90px">
<el-form-item label="模块名称:" prop="moduleId">
<el-select v-model="caseForm.moduleId" 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-form-item>
<el-form-item label="接口名称:" prop="interfaceId">
<el-select v-model="caseForm.interfaceId" placeholder="请选择接口" @change="selectChangeInterface" clearable>
<el-option v-for="item in interfaceList" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
</el-form-item>
<el-card v-if="this.isShow">
<el-form-item label="用例名称:" prop="name" style="width:310px;margin-left:-20px">
<el-input v-model="caseForm.name" placeholder="请输入用例名称"></el-input>
</el-form-item>
<el-collapse v-model="activeNames">
<!-- Headers -->
<el-collapse-item name="1" title="请求头">
<el-button type="success" plain @click="AddHeaderListRow()" class="el-icon-circle-plus">添加行</el-button>
<el-form-item>
<el-row>
<el-col :span="6">
<div class="grid-content" style="margin-left:15px">参数名称</div>
</el-col>
<el-col :span="6">
<div class="grid-content" style="margin-left:15px">参数值</div>
</el-col>
<el-col :span="6">
<div class="grid-content" style="margin-left:25px">操作</div>
</el-col>
</el-row>
<el-row v-for="(item,index) in headersList" :key="index">
<el-col :span="6">
<div>
<el-input v-model.trim="item.paramsName" placeholder="请输入参数名称"></el-input>
</div>
</el-col>
<el-col :span="6">
<div>
<el-input v-model.trim="item.paramsValue" placeholder="请输入参数值"></el-input>
</div>
</el-col>
<el-col :span="6">
<div>
<el-button size="mini" type="danger" @click="advanceDelss(index)" style="height:40px;margin-left:20px">删除</el-button>
</div>
</el-col>
</el-row>
</el-form-item>
</el-collapse-item>
<!-- 请求参数 -->
<el-collapse-item name="2" title="请求参数">
<el-button type="success" plain @click="AddRequestParamsListRow()" class="el-icon-circle-plus">添加行</el-button>
<el-form-item>
<el-row>
<el-col :span="6">
<div class="grid-content" style="margin-left:15px">参数名称</div>
</el-col>
<el-col :span="6">
<div class="grid-content" style="margin-left:15px">参数值</div>
</el-col>
<el-col :span="6">
<div class="grid-content" style="margin-left:25px">操作</div>
</el-col>
</el-row>
<el-row v-for="(item,index) in requestParamsList" :key="index">
<el-col :span="6">
<div>
<el-input v-model.trim="item.paramsName" placeholder="请输入参数名称"></el-input>
</div>
</el-col>
<el-col :span="6">
<div>
<el-input v-model.trim="item.paramsValue" placeholder="请输入参数值"></el-input>
</div>
</el-col>
<el-col :span="6">
<div>
<el-button size="mini" type="danger" @click="requestParamsDel(index)" style="height:40px;margin-left:20px">删除</el-button>
</div>
</el-col>
</el-row>
</el-form-item>
</el-collapse-item>
<!-- 参数列表 -->
<el-collapse-item name="3" title="参数列表">
<el-button type="success" plain @click="AddParamsListRow()" class="el-icon-circle-plus">添加行</el-button>
<el-form-item>
<el-row>
<el-col :span="6">
<div class="grid-content" style="margin-left:15px">参数名称</div>
</el-col>
<el-col :span="6">
<div class="grid-content" style="margin-left:15px">参数值</div>
</el-col>
<el-col :span="6">
<div class="grid-content" style="margin-left:25px">操作</div>
</el-col>
</el-row>
<el-row v-for="(item,index) in paramsList" :key="index">
<el-col :span="6">
<div>
<el-input v-model.trim="item.paramsName" placeholder="请输入参数名称"></el-input>
</div>
</el-col>
<el-col :span="6">
<div>
<el-input v-model.trim="item.paramsValue" placeholder="请输入参数值"></el-input>
</div>
</el-col>
<el-col :span="6">
<div>
<el-button size="mini" type="danger" @click="paramsDel(index)" style="height:40px;margin-left:20px">删除</el-button>
</div>
</el-col>
</el-row>
</el-form-item>
</el-collapse-item>
<!-- 响应解析列表 -->
<el-collapse-item name="4" title="响应列表">
<el-button type="success" plain @click="AddResponseListRow()" class="el-icon-circle-plus">添加行</el-button>
<el-form-item>
<el-row>
<el-col :span="6">
<div class="grid-content" style="margin-left:15px">参数名称</div>
</el-col>
<el-col :span="6">
<div class="grid-content" style="margin-left:15px">参数值</div>
</el-col>
<el-col :span="6">
<div class="grid-content" style="margin-left:25px">操作</div>
</el-col>
</el-row>
<el-row v-for="(item,index) in responseList" :key="index">
<el-col :span="6">
<div>
<el-input v-model.trim="item.paramsName" placeholder="请输入参数名称"></el-input>
</div>
</el-col>
<el-col :span="6">
<div>
<el-input v-model.trim="item.paramsValue" placeholder="请输入参数值"></el-input>
</div>
</el-col>
<el-col :span="6">
<div>
<el-button size="mini" type="danger" @click="responeDel(index)" style="height:40px;margin-left:20px">删除</el-button>
</div>
</el-col>
</el-row>
</el-form-item>
</el-collapse-item>
<!-- 断言 -->
<el-collapse-item name="5" title="结果断言">
<el-button type="success" plain @click="AddAssertionListRow()" class="el-icon-circle-plus">添加行</el-button>
<el-table :data="assertionList" border style="width:100%;margin-top: 15px;">
<el-table-column label="参数名称" width="150">
<template slot-scope="scope">
<el-input v-model="scope.row.paramsName">
</el-input>
</template>
</el-table-column>
<el-table-column label="参数值" width="150">
<template slot-scope="scope">
<el-input v-model="scope.row.paramsValue">
</el-input>
</template>
</el-table-column>
<el-table-column label="是否必填" width="150" style="text-align:center">
<template slot-scope="scope">
<el-switch v-model="scope.row.isRequired" active-color="#13ce66" inactive-color="#A9A9A9" active-text="是" inactive-text="否" @change="changeState()"></el-switch>
</template>
</el-table-column>
<el-table-column label="示例" width="300">
<template slot-scope="scope">
<el-input v-model="scope.row.examples"></el-input>
</template>
</el-table-column>
<el-table-column label="备注" width="300">
<template slot-scope="scope">
<el-input v-model="scope.row.remarks"></el-input>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" type="danger" @click="AssertionDelete(scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-collapse-item>
</el-collapse>
<div style="margin-left:700px;margin-top:20px">
<el-button type="primary" @click="addCaseFrom">确 定</el-button>
</div>
</el-card>
</el-form>
</div>
</template>
<script>
import { getModulList, interfaceDetailList } from '@/api/getAotoInterface'
import { getInterfaceDetail, addCase, editCase } from '@/api/getAutoCase'
import bus from '@/utils/bus'
export default {
data() {
return {
queryModuleInfo: {
pageNum: 1,
pageSize: 10
},
moduleInfo: {
pageNum: 1,
pageSize: 100
},
interfaceInfo: {
pageNum: 1,
pageSize: 100,
moduleId: ''
},
caseForm: {
id: '',
name: '',
moduleId: '',
moduleName: '',
interfaceName: '',
interfaceId: '',
headers: '',
variables: '',
parameters: '',
extract: '',
validate: ''
},
modelList: [],
interfaceList: [],
selectInterfacelId: '',
rules: {
moduleId: [
{
required: true,
message: '模块名称不能为空！',
trigger: 'blur'
}
],
interfaceId: [
{
required: true,
message: '接口名称不能为空！',
trigger: 'blur'
}
],
name: [
{
required: true,
message: '用例不能为空！',
trigger: 'blur'
}
]
},
isShow: false,
activeNames: '1',
interfaceForm: {
interfaceId: ''
},
assertionList: [],
headersList: [],
requestParamsList: [],
paramsList: [],
responseList: []
}
},
created() {
this.getModelList()
bus.$on('casemsg', (row) => {
// console.log('接收到的信息', row)
if (row !== null) {
if (row === '新增') {
this.isShow = false
this.caseForm.name = ''
this.caseForm.moduleId = ''
this.caseForm.interfaceId = ''
this.headersList = []
this.requestParamsList = []
this.paramsList = []
this.responseList = []
this.assertionList = []
} else {
// 编辑接收到的信息
this.isShow = true
this.caseForm.id = row.id
this.caseForm.name = row.name
this.caseForm.moduleId = row.moduleId
this.caseForm.interfaceId = row.interfaceId
this.caseForm.moduleName = row.moduleName
this.caseForm.interfaceName = row.interfaceName
// 请求头（将json字符串转化为对象）
var newHeaders = JSON.parse(row.headers)
this.headersList = []
for (var i in newHeaders) {
this.headersList.push({
paramsName: i,
paramsValue: newHeaders[i]
})
}
// 请求参数
var newParamters = JSON.parse(row.parameters)
this.requestParamsList = []
for (var j in newParamters) {
this.requestParamsList.push({
paramsName: j,
paramsValue: newParamters[j]
})
}
// 参数列表
var newVariables = JSON.parse(row.variables)
this.paramsList = []
for (var k in newVariables) {
this.paramsList.push({
paramsName: k,
paramsValue: newVariables[k]
})
}
// 响应解析列表
var newExtract = JSON.parse(row.extract)
this.responseList = []
for (var o in newExtract) {
this.responseList.push({
paramsName: o,
paramsValue: newExtract[o]
})
}
// 返回断言
this.assertionList = JSON.parse(row.validate)
}
}
})
},
methods: {
// 获取模块列表
getModelList() {
getModulList(this.moduleInfo).then((resp) => {
this.modelList = resp.data.data.list
})
},
// 模块下拉框改变事件
selectChangeModel() {
interfaceDetailList(this.interfaceInfo).then((resp) => {
this.interfaceList = resp.data.data.list
})
},
// 接口下拉框改变事件
selectChangeInterface() {
this.isShow = true
this.interfaceForm.interfaceId = this.caseForm.interfaceId
// 获取接口详情
getInterfaceDetail(this.interfaceForm).then((resp) => {
this.headersList = JSON.parse(resp.data.data.headers)
this.requestParamsList = JSON.parse(resp.data.data.paramTemplate)
this.responseList = JSON.parse(resp.data.data.responseTemplate)
})
},
// 添加Headers
AddHeaderListRow() {
this.headersList.push({
paramsName: '',
paramsValue: ''
})
},
// 删除Headers
advanceDelss(index) {
this.headersList.splice(index, 1)
},
// 添加请求参数
AddRequestParamsListRow() {
this.requestParamsList.push({
paramsName: '',
paramsValue: ''
})
},
// 删除请求参数
requestParamsDel(index) {
this.requestParamsList.splice(index, 1)
},
// 参数列表
AddParamsListRow() {
this.paramsList.push({
paramsName: '',
paramsValue: ''
})
},
// 参数列表删除
paramsDel(index) {
this.paramsList.splice(index, 1)
},
// 添加响应解析列表
AddResponseListRow() {
this.responseList.push({
paramsName: '',
paramsValue: ''
})
},
// 删除响应解析信息
responeDel(index) {
this.responseList.splice(index, 1)
},
// 添加断言行
AddAssertionListRow() {
this.assertionList.push({
paramsName: '',
paramsValue: '',
isRequired: true,
examples: '',
remarks: ''
})
},
// 断言改变
changeState(e) {
if (e === true) {
this.assertionList.isRequired = e
} else {
this.assertionList.isRequired = e
}
},
// 断言删除
AssertionDelete(index) {
this.assertionList.splice(index, 1)
},
// 添加case信息
addCaseFrom() {
// 将数组转化为对象
var headersObj = {}
this.headersList.forEach((item) => {
headersObj[item.paramsName] = item.paramsValue
})
// 将对象转化为Json
this.caseForm.headers = JSON.stringify(headersObj)
// 请求参数
var requestParamsObj = {}
this.requestParamsList.forEach((item) => {
requestParamsObj[item.paramsName] = item.paramsValue
})
this.caseForm.parameters = JSON.stringify(requestParamsObj)
// 参数列表
var paramsListObj = {}
this.paramsList.forEach((item) => {
paramsListObj[item.paramsName] = item.paramsValue
})
this.caseForm.variables = JSON.stringify(paramsListObj)
// 响应解析列表
var responseObj = {}
this.responseList.forEach((item) => {
responseObj[item.paramsName] = item.paramsValue
})
this.caseForm.extract = JSON.stringify(responseObj)
// 断言
this.caseForm.validate = JSON.stringify(this.assertionList)
// console.log('保存信息', this.caseForm)
if (this.caseForm.id) {
// 编辑接口
editCase(this.caseForm).then((resp) => {
if (resp.data.data === true) {
this.$message.success('修改成功！')
this.$router.push('CaseList')
// 刷新列表页
this.sendResh()
} else {
this.$message.error(resp.data.msg)
}
})
} else {
// 添加接口
addCase(this.caseForm).then((resp) => {
if (resp.data.data === true) {
this.$message.success('添加成功！')
// 返回列表页
this.$router.push('CaseList')
// 刷新列表页
this.sendResh()
} else {
this.$message.error(resp.data.msg)
}
})
}
},
// 刷新列表
sendResh() {
// bus使用
this.$nextTick(function () {
// DOM 现在更新了
bus.$emit('refresh')
})
}
}
}
</script>
<style lang="less" scoped>
.h-list {
line-height: 20px;
padding: 10px 0;
font-size: 14px;
color: #161b22;
border-bottom: 1px solid #e9eaf1;
div {
padding-right: 5px;
max-height: 150px;
//overflow-y: auto;
overflow-x: hidden;
word-wrap: break-word;
}
}
</style>
src/views/auto/AddInterface.vue
View file @ 83bf00cc
<template> <template>
<div> <div>
<el-form ref="interfaceForm" :rules="rules" :model="interfaceForm" label-width="100px"> <el-form ref="interfaceForm" :rules="rules" :model="interfaceForm">
<el-collapse v-model="activeNames"> <el-collapse v-model="activeNames">
<el-collapse-item title="基本信息" name="1"> <el-collapse-item name="1" title="基本信息">
<el-row> <el-row>
<el-col :span="8"> <el-col :span="5">
<el-form-item label="接口名称:" prop="name"> <el-form-item label="接口名称:" prop="name">
<el-input v-model="interfaceForm.name" style="width:200px"></el-input> <el-input v-model="interfaceForm.name" style="width:200px"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="5">
<el-form-item label="所属模块:" prop="modelName" style="margin-left:-200px"> <el-form-item label="所属模块:" prop="moduleId">
<el-select v-model="interfaceForm.moduleId" placeholder="请选择模块"> <el-select v-model="interfaceForm.moduleId" placeholder="请选择模块">
<el-option v-for="item in modelList" :key="item.id" :label="item.name" :value="item.id"></el-option> <el-option v-for="item in modelList" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="5">
<el-form-item label="请求方式:" prop="method" style="margin-left:-350px"> <el-form-item label="请求方式:" prop="method">
<el-select v-model="interfaceForm.method" placeholder="请选择模块"> <el-select v-model="interfaceForm.method" placeholder="请选择">
<el-option v-for="item in optionMethod" :key="item.id" :label="item.name" :value="item.id"></el-option> <el-option v-for="item in optionMethod" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="8"> <el-col :span="5">
<el-form-item label="请求路径:" prop="url"> <el-form-item label="请求路径:" prop="url">
<el-input v-model="interfaceForm.url" style="width:200px"></el-input> <el-input v-model="interfaceForm.url" style="width:200px"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="5">
<el-form-item label="参数类型:" prop="reqType" style="margin-left:-200px"> <el-form-item label="参数类型:" prop="paramType">
<el-select v-model="interfaceForm.paramType" placeholder="请选择参数类型"> <el-select v-model="interfaceForm.paramType" placeholder="请选择参数类型">
<el-option v-for="item in optionReqType" :key="item.id" :label="item.name" :value="item.id"></el-option> <el-option v-for="item in optionReqType" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select> </el-select>
...@@ -40,17 +40,17 @@ ...@@ -40,17 +40,17 @@
</el-row> </el-row>
</el-collapse-item> </el-collapse-item>
<!-- Headers添加 --> <!-- Headers添加 -->
<el-collapse-item title="请求头Headers" name="2"> <el-collapse-item title="请求头" name="2">
<el-button type="success" round @click="AddHeaderListRow()">添加行</el-button> <el-button type="success" plain class="el-icon-circle-plus" @click="AddHeaderListRow()">添加行</el-button>
<!-- Header参数添加 --> <!-- Header参数添加 -->
<el-table :data="headersList" border style="width:95%;margin-top: 15px;"> <el-table :data="headersList" border style="width:100%;margin-top:15px;">
<el-table-column label="参数名称" width="277"> <el-table-column label="参数名称" width="150">
<template slot-scope="scope"> <template slot-scope="scope">
<el-input v-model="scope.row.paramsName"> <el-input v-model="scope.row.paramsName">
</el-input> </el-input>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="参数值" width="300"> <el-table-column label="参数值" width="150">
<template slot-scope="scope"> <template slot-scope="scope">
<el-input v-model="scope.row.paramsValue"> <el-input v-model="scope.row.paramsValue">
</el-input> </el-input>
...@@ -66,12 +66,12 @@ ...@@ -66,12 +66,12 @@
<el-input v-model="scope.row.examples"></el-input> <el-input v-model="scope.row.examples"></el-input>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="备注" width="320"> <el-table-column label="备注" width="300">
<template slot-scope="scope"> <template slot-scope="scope">
<el-input v-model="scope.row.remarks"></el-input> <el-input v-model="scope.row.remarks"></el-input>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" width="220"> <el-table-column label="操作">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button size="mini" type="danger" @click="headerDelete(scope.$index)">删除</el-button> <el-button size="mini" type="danger" @click="headerDelete(scope.$index)">删除</el-button>
</template> </template>
...@@ -80,15 +80,15 @@ ...@@ -80,15 +80,15 @@
</el-collapse-item> </el-collapse-item>
<!-- 参数添加 --> <!-- 参数添加 -->
<el-collapse-item title="请求参数" name="3"> <el-collapse-item title="请求参数" name="3">
<el-button type="success" round @click="AddParamsListRow()">添加行</el-button> <el-button type="success" plain class="el-icon-circle-plus" @click="AddParamsListRow()">添加行</el-button>
<el-table :data="paramList" border style="width:95%;margin-top: 15px;"> <el-table :data="paramList" border style="width:100%;margin-top: 15px;">
<el-table-column label="参数名称" width="277"> <el-table-column label="参数名称" width="150">
<template slot-scope="scope"> <template slot-scope="scope">
<el-input v-model="scope.row.paramsName"> <el-input v-model="scope.row.paramsName">
</el-input> </el-input>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="参数值" width="300"> <el-table-column label="参数值" width="150">
<template slot-scope="scope"> <template slot-scope="scope">
<el-input v-model="scope.row.paramsValue"> <el-input v-model="scope.row.paramsValue">
</el-input> </el-input>
...@@ -104,12 +104,12 @@ ...@@ -104,12 +104,12 @@
<el-input v-model="scope.row.examples"></el-input> <el-input v-model="scope.row.examples"></el-input>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="备注" width="320"> <el-table-column label="备注" width="300">
<template slot-scope="scope"> <template slot-scope="scope">
<el-input v-model="scope.row.remarks"></el-input> <el-input v-model="scope.row.remarks"></el-input>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" width="220"> <el-table-column label="操作">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button size="mini" type="danger" @click="paramsDelete(scope.$index)">删除</el-button> <el-button size="mini" type="danger" @click="paramsDelete(scope.$index)">删除</el-button>
</template> </template>
...@@ -118,15 +118,15 @@ ...@@ -118,15 +118,15 @@
</el-collapse-item> </el-collapse-item>
<!-- 响应参数添加 --> <!-- 响应参数添加 -->
<el-collapse-item title="响应参数" name="4"> <el-collapse-item title="响应参数" name="4">
<el-button type="success" round @click="AddResponseListRow()">添加行</el-button> <el-button type="success" plain class="el-icon-circle-plus" @click="AddResponseListRow()">添加行</el-button>
<el-table :data="responseList" border style="width:95%;margin-top: 15px;"> <el-table :data="responseList" border style="width:100%;margin-top: 15px;">
<el-table-column label="参数名称" width="277"> <el-table-column label="参数名称" width="150">
<template slot-scope="scope"> <template slot-scope="scope">
<el-input v-model="scope.row.paramsName"> <el-input v-model="scope.row.paramsName">
</el-input> </el-input>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="参数值" width="300"> <el-table-column label="参数值" width="150">
<template slot-scope="scope"> <template slot-scope="scope">
<el-input v-model="scope.row.paramsValue"> <el-input v-model="scope.row.paramsValue">
</el-input> </el-input>
...@@ -142,12 +142,12 @@ ...@@ -142,12 +142,12 @@
<el-input v-model="scope.row.examples"></el-input> <el-input v-model="scope.row.examples"></el-input>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="备注" width="320"> <el-table-column label="备注" width="300">
<template slot-scope="scope"> <template slot-scope="scope">
<el-input v-model="scope.row.remarks"></el-input> <el-input v-model="scope.row.remarks"></el-input>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" width="220"> <el-table-column label="操作">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button size="mini" type="danger" @click="responseDelete(scope.$index)">删除</el-button> <el-button size="mini" type="danger" @click="responseDelete(scope.$index)">删除</el-button>
</template> </template>
...@@ -201,7 +201,7 @@ export default { ...@@ -201,7 +201,7 @@ export default {
trigger: 'blur' trigger: 'blur'
} }
], ],
modelName: [ moduleId: [
{ {
required: true, required: true,
message: '接口名称不能为空！', message: '接口名称不能为空！',
...@@ -222,7 +222,7 @@ export default { ...@@ -222,7 +222,7 @@ export default {
trigger: 'blur' trigger: 'blur'
} }
], ],
reqType: [ paramType: [
{ {
required: true, required: true,
message: '接口名称不能为空！', message: '接口名称不能为空！',
...@@ -257,18 +257,30 @@ export default { ...@@ -257,18 +257,30 @@ export default {
} }
}, },
created() { created() {
console.log('2222')
bus.$on('msg', (row) => { bus.$on('msg', (row) => {
console.log('传递的参数信息', row) if (row !== null) {
this.interfaceForm.id = row.id if (row === '新增') {
this.interfaceForm.name = row.name this.interfaceForm.id = ''
this.interfaceForm.moduleId = row.moduleId this.interfaceForm.name = ''
this.interfaceForm.method = row.method this.interfaceForm.moduleId = ''
this.interfaceForm.url = row.url this.interfaceForm.method = ''
this.interfaceForm.paramType = row.paramType this.interfaceForm.url = ''
this.headersList = JSON.parse(row.headers) this.interfaceForm.paramType = ''
this.paramList = JSON.parse(row.paramTemplate) this.headersList = []
this.responseList = JSON.parse(row.responseTemplate) this.paramList = []
this.responseList = []
} else {
this.interfaceForm.id = row.id
this.interfaceForm.name = row.name
this.interfaceForm.moduleId = row.moduleId
this.interfaceForm.method = row.method
this.interfaceForm.url = row.url
this.interfaceForm.paramType = row.paramType
this.headersList = JSON.parse(row.headers)
this.paramList = JSON.parse(row.paramTemplate)
this.responseList = JSON.parse(row.responseTemplate)
}
}
}) })
this.getModelList() this.getModelList()
}, },
...@@ -356,29 +368,16 @@ export default { ...@@ -356,29 +368,16 @@ export default {
if (this.interfaceForm.id) { if (this.interfaceForm.id) {
// 编辑接口 // 编辑接口
editInterface(this.interfaceForm).then((resp) => { editInterface(this.interfaceForm).then((resp) => {
console.log('编辑信息', this.interfaceForm)
if (resp.data.data === true) { if (resp.data.data === true) {
this.$message.success('修改成功！') this.$message.success('修改成功！')
this.$router.push('InterfaceDetail') this.$router.push('InterfaceDetail')
// 刷新列表页 // 刷新列表页
this.sendResh() this.sendResh()
this.interfaceForm.id = ''
this.interfaceForm.name = ''
this.interfaceForm.moduleId = ''
this.interfaceForm.method = ''
this.interfaceForm.url = ''
this.interfaceForm.paramType = ''
this.interfaceForm.headers = ''
this.interfaceForm.paramTemplate = ''
this.interfaceForm.responseTemplate = ''
} else { } else {
this.$message.error(resp.data.msg) this.$message.error(resp.data.msg)
} }
}) })
} else { } else {
// this.interfaceForm.headers = JSON.stringify(this.headersList)
// this.interfaceForm.paramTemplate = JSON.stringify(this.paramList)
// this.interfaceForm.responseTemplate = JSON.stringify(this.responseList)
addInterface(this.interfaceForm).then((resp) => { addInterface(this.interfaceForm).then((resp) => {
if (resp.data.data === true) { if (resp.data.data === true) {
this.$message.success('添加成功！') this.$message.success('添加成功！')
...@@ -405,10 +404,4 @@ export default { ...@@ -405,10 +404,4 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.el-collapse-item__header {
padding-left: 5px;
background: rgb(230, 235, 241);
border-bottom: solid white 1px;
font-weight: bolder;
}
</style> </style>
src/views/auto/CaseList.vue 0 → 100644
View file @ 83bf00cc
<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
View file @ 83bf00cc
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
<el-select v-model="selectModelId" placeholder="请选择模块" @change="selectChangeModel" clearable> <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-option v-for="item in modelList" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select> </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="queryData">查询</el-button>
<el-button type="primary" style="margin-left:20px" @click="addPage">新增</el-button> <el-button type="primary" style="margin-left:20px" @click="addPage">新增</el-button>
</div> </div>
...@@ -51,9 +51,10 @@ export default { ...@@ -51,9 +51,10 @@ export default {
return { return {
queryModuleInfo: { queryModuleInfo: {
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 20,
projectId: '', projectId: '',
moduleId: '' moduleId: '',
interfaceName: ''
}, },
totalNum: 0, totalNum: 0,
projectList: [], projectList: [],
...@@ -99,10 +100,18 @@ export default { ...@@ -99,10 +100,18 @@ export default {
// 查询方法 // 查询方法
queryData() { queryData() {
this.getInterfaceDetailList() this.getInterfaceDetailList()
// this.queryModuleInfo.projectId = ''
// this.queryModuleInfo.moduleId = ''
// this.queryModuleInfo.interfaceName = ''
}, },
// 添加跳转页面 // 添加跳转页面
addPage() { addPage() {
this.$router.push('AddInterface') this.$router.push('AddInterface')
this.$nextTick(function () {
// DOM 现在更新了
var row = '新增'
bus.$emit('msg', row)
})
}, },
// 获取接口列表 // 获取接口列表
getInterfaceDetailList() { getInterfaceDetailList() {
...@@ -121,10 +130,7 @@ export default { ...@@ -121,10 +130,7 @@ export default {
}, },
// 编辑接口方法 // 编辑接口方法
editInterfaceFrom(row) { editInterfaceFrom(row) {
this.$router.push({ this.$router.push({ path: 'AddInterface' })
path: 'AddInterface',
name: 'AddInterface'
})
// bus使用 // bus使用
this.$nextTick(function () { this.$nextTick(function () {
// DOM 现在更新了 // DOM 现在更新了
......
src/views/auto/Model.vue
View file @ 83bf00cc
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
<el-form-item label="模块名称:" prop="name" style="width:400px"> <el-form-item label="模块名称:" prop="name" style="width:400px">
<el-input v-model="modelForm.name"></el-input> <el-input v-model="modelForm.name"></el-input>
</el-form-item> </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-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-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select> </el-select>
...@@ -87,7 +87,7 @@ export default { ...@@ -87,7 +87,7 @@ export default {
trigger: 'blur' trigger: 'blur'
} }
], ],
projectName: [ projectId: [
{ {
required: true, required: true,
message: '模块名称不能为空！', message: '模块名称不能为空！',
......
src/views/layout/leftAside/menu.json
View file @ 83bf00cc
...@@ -107,17 +107,24 @@ ...@@ -107,17 +107,24 @@
}, },
{ {
"id": 3, "id": 3,
"title": "接口列表", "title": "接口管理",
"icon": "el-icon-bank-card", "icon": "el-icon-bank-card",
"path": "/auto/InterfaceDetail" "path": "/auto/InterfaceDetail"
}, },
{ {
"id": 4, "id": 4,
"title": "用例管理",
"icon": "el-icon-postcard",
"path": "/auto/CaseList"
},
{
"id": 6,
"title": "新增接口", "title": "新增接口",
"show": "false", "show": "false",
"icon": "el-icon-bank-card", "icon": "el-icon-bank-card",
"path": "/auto/AddInterface" "path": "/auto/AddInterface"
} }
] ]
} }
] ]
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment