Skip to content

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

接口信息

parent 0dd85af0
Show whitespace changes
Inline Side-by-side
Showing with 403 additions and 68 deletions
src/api/getAotoInterface.js
View file @ 9140cd93
......@@ -68,3 +68,27 @@ export function interfaceDetailList(queryInfo) {
params: queryInfo
})
}
// 添加接的口接口
export function addInterface(data) {
return request({
url: '/auto/interface/add',
method: 'post',
data
})
}
// 编辑接口的接口
export function editInterface(data) {
return request({
url: '/auto/interface/modify',
method: 'post',
data
})
}
// 删除接口的接口
export function delInterface(queryInfo) {
return request({
url: '/auto/interface/delete',
method: 'get',
params: queryInfo
})
}
src/assets/css/global.css
View file @ 9140cd93
......@@ -17,3 +17,23 @@ html, body, #app {
.jsoneditor-vue {
height: 300px;
}
/* .el-collapse-item__header{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 48px;
line-height: 48px;
background-color: #FFF;
color: #303133;
cursor: pointer;
border-bottom: 1px solid #EBEEF5;
font-size: 13px;
font-weight: 500;
-webkit-transition: border-bottom-color .3s;
transition: border-bottom-color .3s;
outline: 0;
font-size: 15px;
} */
\ No newline at end of file
src/main.js
View file @ 9140cd93
......@@ -40,7 +40,9 @@ import {
Switch,
RadioGroup,
Radio,
MessageBox
MessageBox,
Row,
Col
} from 'element-ui'
Vue.config.productionTip = false
......@@ -83,6 +85,8 @@ Vue.use(TabPane)
Vue.use(Switch)
Vue.use(RadioGroup)
Vue.use(Radio)
Vue.use(Row)
Vue.use(Col)
/* eslint-disable no-new */
new Vue({
el: '#app',
......
src/router/index.js
View file @ 9140cd93
......@@ -111,7 +111,7 @@ const router = new Router({
},
{
path: '/auto/AddInterface',
name: '添加接口',
name: 'AddInterface',
component: AddInterface
},
{
......
src/views/auto/AddInterface.vue
View file @ 9140cd93
<template>
<div>
<el-form ref="interfaceForm" :model="interfaceForm" >
<el-form ref="interfaceForm" :rules="rules" :model="interfaceForm" label-width="100px">
<el-collapse v-model="activeNames">
<el-collapse-item title="基本信息" name="1">
<el-row>
<el-col :span="8">
<el-form-item label="接口名称:" >
<el-input v-model="interfaceForm.name"></el-input>
<el-form-item label="接口名称:" prop="name">
<el-input v-model="interfaceForm.name" style="width:200px"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="所属模块:">
<el-select v-model="interfaceForm.moduleName" placeholder="请选择模块">
<el-form-item label="所属模块:" prop="modelName" style="margin-left:-200px">
<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-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="请求方式:">
<el-form-item label="请求方式:" prop="method" style="margin-left:-350px">
<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-select>
</el-form-item>
</el-col>
</el-row>
<!-- <el-row>
<el-row>
<el-col :span="8">
<el-form-item label="请求路径:" style="float:left">
<el-input v-model="interfaceForm.url"></el-input>
<el-form-item label="请求路径:" prop="url">
<el-input v-model="interfaceForm.url" style="width:200px"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="参数类型:" class="col-style">
<el-select v-model="interfaceForm.reqType" placeholder="请选择参数类型">
<el-form-item label="参数类型:" prop="reqType" style="margin-left:-200px">
<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-select>
</el-form-item>
</el-col>
</el-row> -->
</el-row>
</el-collapse-item>
<!-- Headers添加 -->
<el-collapse-item title="请求头Headers" name="2">
<el-button type="success" round @click="AddHeaderListRow()">添加行</el-button>
<!-- Header参数添加 -->
<el-table :data="headersList" border style="width:95%;margin-top: 15px;">
<el-table-column label="参数名称" width="277">
<template slot-scope="scope">
<el-input v-model="scope.row.paramsName">
</el-input>
</template>
</el-table-column>
<el-table-column label="参数值" width="300">
<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($event,'1')"></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="320">
<template slot-scope="scope">
<el-input v-model="scope.row.remarks"></el-input>
</template>
</el-table-column>
<el-table-column label="操作" width="220">
<template slot-scope="scope">
<el-button size="mini" type="danger" @click="headerDelete(scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-collapse-item>
<!-- 参数添加 -->
<el-collapse-item title="请求参数" name="3">
<el-button type="success" round @click="AddParamsListRow()">添加行</el-button>
<el-table :data="paramList" border style="width:95%;margin-top: 15px;">
<el-table-column label="参数名称" width="277">
<template slot-scope="scope">
<el-input v-model="scope.row.paramsName">
</el-input>
</template>
</el-table-column>
<el-table-column label="参数值" width="300">
<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($event,'2')"></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="320">
<template slot-scope="scope">
<el-input v-model="scope.row.remarks"></el-input>
</template>
</el-table-column>
<el-table-column label="操作" width="220">
<template slot-scope="scope">
<el-button size="mini" type="danger" @click="paramsDelete(scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-collapse-item>
<!-- 响应参数添加 -->
<el-collapse-item title="响应参数" name="4">
<el-button type="success" round @click="AddResponseListRow()">添加行</el-button>
<el-table :data="responseList" border style="width:95%;margin-top: 15px;">
<el-table-column label="参数名称" width="277">
<template slot-scope="scope">
<el-input v-model="scope.row.paramsName">
</el-input>
</template>
</el-table-column>
<el-table-column label="参数值" width="300">
<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($event,'3')"></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="320">
<template slot-scope="scope">
<el-input v-model="scope.row.remarks"></el-input>
</template>
</el-table-column>
<el-table-column label="操作" width="220">
<template slot-scope="scope">
<el-button size="mini" type="danger" @click="responseDelete(scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-collapse-item>
</el-collapse>
</el-form>
<div style="margin-left:700px;margin-top:20px">
<el-button type="primary" @click="addInterfaceFrom">确 定</el-button>
</div>
</div>
</template>
<script>
import { getModulList } from '@/api/getAotoInterface'
import { getModulList, addInterface } from '@/api/getAotoInterface'
export default {
data() {
return {
......@@ -50,13 +172,20 @@ export default {
pageNum: 1,
pageSize: 10
},
activeNames: '1',
interfaceForm: {
name: '',
moduleName: '',
moduleId: '',
method: '',
url: '',
reqType: ''
paramType: '',
headers: '',
paramTemplate: '',
responseTemplate: ''
},
headersList: [],
paramList: [],
responseList: [],
modelList: [],
rules: {
name: [
......@@ -118,28 +247,133 @@ export default {
id: 'form',
name: 'form'
}
]
],
new_header: ''
}
},
watch: {
$route(to, from) {
console.log('参数信息', to)
if (to.params !== '{}') {
this.interfaceForm.name = to.params.row.name
this.interfaceForm.moduleId = to.params.row.moduleName
this.interfaceForm.method = to.params.row.method
this.interfaceForm.url = to.params.row.url
this.interfaceForm.paramType = to.params.row.paramType
this.headersList = JSON.parse(to.params.row.headers)
this.paramList = JSON.parse(to.params.row.paramTemplate)
this.responseList = JSON.parse(to.params.row.responseTemplate)
console.log('111', JSON.parse(to.params.row.headers))
// for (var i in this.headersList) {
// console.log('555', i)
// console.log('666', this.headersList[i])
// }
}
}
},
created() {
this.getModelList()
},
methods: {
// 接受参数信息
getParamsMes() {},
// 模块列表
getModelList() {
getModulList(this.queryModuleInfo).then((resp) => {
this.modelList = resp.data.data.list
})
},
// 添加行信息
AddHeaderListRow() {
this.headersList.push({
paramsName: '',
paramsValue: '',
isRequired: true,
examples: '',
remarks: ''
})
},
AddParamsListRow() {
this.paramList.push({
paramsName: '',
paramsValue: '',
isRequired: true,
examples: '',
remarks: ''
})
},
AddResponseListRow() {
this.responseList.push({
paramsName: '',
paramsValue: '',
isRequired: true,
examples: '',
remarks: ''
})
},
// 删除header行信息
headerDelete(index) {
this.headersList.splice(index, 1)
},
// 删除参数行
paramsDelete(index) {
this.paramList.splice(index, 1)
},
// 删除响应参数
responseDelete(index) {
this.responseList.splice(index, 1)
},
// 状态按钮
changeState(e, str) {
if (e === true && str === '1') {
this.headersList.isRequired = e
} else {
this.headersList.isRequired = e
}
if (e === true && str === '2') {
this.paramList.isRequired = e
} else {
this.paramList.isRequired = e
}
if (e === true && str === '3') {
this.responseList.isRequired = e
} else {
this.responseList.isRequired = e
}
},
// 保存接口信息
addInterfaceFrom() {
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) => {
console.log('信息', this.interfaceForm)
if (resp.data.data === true) {
this.$message.success('添加成功！')
// 返回列表页
this.$router.push('InterfaceDetail')
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 {
this.$message.error(resp.data.msg)
}
})
}
}
}
</script>
<style lang="less" scoped>
// .col-style {
// margin-left: 50px;
// float: left;
// }
// .col-new-style {
// margin-left: 20px;
// }
.el-collapse-item__header {
padding-left: 5px;
background: rgb(230, 235, 241);
border-bottom: solid white 1px;
font-weight: bolder;
}
</style>
src/views/auto/InterfaceDetail.vue
View file @ 9140cd93
......@@ -3,11 +3,11 @@
<el-card>
<div>
项目:
<el-select v-model="selectProjectId" placeholder="请选择项目" @change="selectChange">
<el-select v-model="selectProjectId" placeholder="请选择项目" @change="selectChange" clearable>
<el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
模块:
<el-select v-model="interfaceDetailForm.moduleId" placeholder="请选择模块">
<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>
......@@ -16,17 +16,18 @@
</div>
<el-table :data="interfaceList" border style="width: 100%;margin-top:20px">
<el-table-column type='index' width="50px"></el-table-column>
<el-table-column prop="name" label="接口名称" width="200px"></el-table-column>
<el-table-column prop="name" label="接口名称" width="150px"></el-table-column>
<el-table-column prop="projectName" label="所属项目" width="150px"></el-table-column>
<el-table-column prop="moduleName" label="所属模块" width="200px"></el-table-column>
<el-table-column prop="url" label="接口路径" width="300px"></el-table-column>
<el-table-column prop="method" label="请求方式" width="100px"></el-table-column>
<el-table-column prop="paramType" label="参数类型" width="100px"></el-table-column>
<el-table-column prop="method" label="请求方式" width="70px"></el-table-column>
<el-table-column prop="paramType" label="参数类型" width="80px"></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="success" @click="openEditDialog(scope.row)">编辑</el-button>
<el-button type="danger" @click="delModelFrom(scope.row)">删除</el-button>
<el-button type="success" @click="editInterfaceFrom(scope.row)">编辑</el-button>
<el-button type="danger" @click="delInterfaceFrom(scope.row)">删除</el-button>
</slot>
</el-table-column>
</el-table>
......@@ -40,7 +41,8 @@
import {
getModulList,
getProjectList,
interfaceDetailList
interfaceDetailList,
delInterface
} from '@/api/getAotoInterface'
export default {
data() {
......@@ -48,16 +50,22 @@ export default {
queryModuleInfo: {
pageNum: 1,
pageSize: 10,
projectId: ''
projectId: '',
moduleId: ''
},
totalNum: 0,
projectList: [],
modelList: [],
// 下来项目id
selectProjectId: '',
// 下拉模块id
selectModelId: '',
interfaceName: '',
interfaceList: [],
interfaceDetailForm: {}
interfaceDetailForm: {},
delInterfaceParam: {
interfaceId: ''
}
}
},
created() {
......@@ -79,8 +87,14 @@ export default {
this.modelList = resp.data.data.list
})
},
// 模块下拉框改变事件
selectChangeModel() {
this.queryModuleInfo.moduleId = this.selectModelId
},
// 查询方法
queryData() {},
queryData() {
this.getInterfaceDetailList()
},
// 添加跳转页面
addPage() {
this.$router.push('AddInterface')
......@@ -89,6 +103,7 @@ export default {
getInterfaceDetailList() {
interfaceDetailList(this.queryModuleInfo).then((resp) => {
this.interfaceList = resp.data.data.list
this.totalNum = resp.data.data.total
})
},
handleSizeChange(newSize) {
......@@ -98,6 +113,48 @@ export default {
handleCurrentChange(newPage) {
this.queryModuleInfo.pageNum = newPage
this.getInterfaceDetailList()
},
// 编辑接口方法
editInterfaceFrom(row) {
console.log('编辑按钮')
this.$router.push({
path: 'AddInterface',
name: 'AddInterface',
params: {
row: row
}
})
},
// 对话框方法
openMessage(message, confirmText, doit) {
this.$messageBox
.confirm(message, '确定', {
cancelButtonText: '取消',
confirmButtonText: confirmText,
type: 'warning'
})
.then(() => {
doit()
})
.catch(() => {})
},
// 删除接口方法
delInterfaceFrom(row) {
this.delInterfaceParam.interfaceId = row.id
this.openMessage('您确定要删除吗？', '删除', () => {
delInterface(this.delInterfaceParam)
.then((resp) => {
if (resp.data.data === true) {
this.$message.success('删除成功！')
this.getInterfaceDetailList()
} else if (resp.data.data === false) {
this.$message.error(resp.data.msg)
}
})
.catch((error) => {
this.$message({ type: 'error', message: error })
})
})
}
}
}
......
src/views/layout/Home.vue
View file @ 9140cd93
......@@ -10,10 +10,7 @@
<el-main>
<AsideTitle></AsideTitle>
<!--页面的展示-->
<transition
name="compAnimate"
appear
>
<transition name="compAnimate" appear>
<keep-alive>
<router-view :style="{marginTop: '55px'}"></router-view>
</keep-alive>
......@@ -22,7 +19,6 @@
</el-container>
</el-container>
</template>
<script>
import Aside from './leftAside/Aside'
import Header from './rightMain/Header'
......
src/views/layout/leftAside/menu.json
View file @ 9140cd93
......@@ -107,7 +107,7 @@
},
{
"id": 3,
"title": "接口详情",
"title": "接口列表",
"icon": "el-icon-bank-card",
"path": "/auto/InterfaceDetail"
}
......
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