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) { ...@@ -68,3 +68,27 @@ export function interfaceDetailList(queryInfo) {
params: 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 { ...@@ -17,3 +17,23 @@ html, body, #app {
.jsoneditor-vue { .jsoneditor-vue {
height: 300px; 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 { ...@@ -40,7 +40,9 @@ import {
Switch, Switch,
RadioGroup, RadioGroup,
Radio, Radio,
MessageBox MessageBox,
Row,
Col
} from 'element-ui' } from 'element-ui'
Vue.config.productionTip = false Vue.config.productionTip = false
...@@ -83,6 +85,8 @@ Vue.use(TabPane) ...@@ -83,6 +85,8 @@ Vue.use(TabPane)
Vue.use(Switch) Vue.use(Switch)
Vue.use(RadioGroup) Vue.use(RadioGroup)
Vue.use(Radio) Vue.use(Radio)
Vue.use(Row)
Vue.use(Col)
/* eslint-disable no-new */ /* eslint-disable no-new */
new Vue({ new Vue({
el: '#app', el: '#app',
......
src/router/index.js
View file @ 9140cd93
...@@ -111,7 +111,7 @@ const router = new Router({ ...@@ -111,7 +111,7 @@ const router = new Router({
}, },
{ {
path: '/auto/AddInterface', path: '/auto/AddInterface',
name: '添加接口', name: 'AddInterface',
component: AddInterface component: AddInterface
}, },
{ {
......
src/views/auto/AddInterface.vue
View file @ 9140cd93
<template> <template>
<div> <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-row>
<el-col :span="8"> <el-col :span="8">
<el-form-item label="接口名称:" > <el-form-item label="接口名称:" prop="name">
<el-input v-model="interfaceForm.name"></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="8">
<el-form-item label="所属模块:"> <el-form-item label="所属模块:" prop="modelName" style="margin-left:-200px">
<el-select v-model="interfaceForm.moduleName" 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="8">
<el-form-item label="请求方式:"> <el-form-item label="请求方式:" prop="method" style="margin-left:-350px">
<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="8">
<el-form-item label="请求路径:" style="float:left"> <el-form-item label="请求路径:" prop="url">
<el-input v-model="interfaceForm.url"></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="8">
<el-form-item label="参数类型:" class="col-style"> <el-form-item label="参数类型:" prop="reqType" style="margin-left:-200px">
<el-select v-model="interfaceForm.reqType" 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>
</el-form-item> </el-form-item>
</el-col> </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> </el-form>
<div style="margin-left:700px;margin-top:20px">
<el-button type="primary" @click="addInterfaceFrom">确 定</el-button>
</div>
</div> </div>
</template> </template>
<script> <script>
import { getModulList } from '@/api/getAotoInterface' import { getModulList, addInterface } from '@/api/getAotoInterface'
export default { export default {
data() { data() {
return { return {
...@@ -50,13 +172,20 @@ export default { ...@@ -50,13 +172,20 @@ export default {
pageNum: 1, pageNum: 1,
pageSize: 10 pageSize: 10
}, },
activeNames: '1',
interfaceForm: { interfaceForm: {
name: '', name: '',
moduleName: '', moduleId: '',
method: '', method: '',
url: '', url: '',
reqType: '' paramType: '',
headers: '',
paramTemplate: '',
responseTemplate: ''
}, },
headersList: [],
paramList: [],
responseList: [],
modelList: [], modelList: [],
rules: { rules: {
name: [ name: [
...@@ -118,28 +247,133 @@ export default { ...@@ -118,28 +247,133 @@ export default {
id: 'form', id: 'form',
name: '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() { created() {
this.getModelList() this.getModelList()
}, },
methods: { methods: {
// 接受参数信息
getParamsMes() {},
// 模块列表 // 模块列表
getModelList() { getModelList() {
getModulList(this.queryModuleInfo).then((resp) => { getModulList(this.queryModuleInfo).then((resp) => {
this.modelList = resp.data.data.list 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> </script>
<style lang="less" scoped> <style lang="less" scoped>
// .col-style { .el-collapse-item__header {
// margin-left: 50px; padding-left: 5px;
// float: left; background: rgb(230, 235, 241);
// } border-bottom: solid white 1px;
// .col-new-style { font-weight: bolder;
// margin-left: 20px; }
// }
</style> </style>
src/views/auto/InterfaceDetail.vue
View file @ 9140cd93
...@@ -3,11 +3,11 @@ ...@@ -3,11 +3,11 @@
<el-card> <el-card>
<div> <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-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select> </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-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="interfaceName" clearable placeholder="请输入接口名称" style="width: 300px;"></el-input>
...@@ -16,17 +16,18 @@ ...@@ -16,17 +16,18 @@
</div> </div>
<el-table :data="interfaceList" border style="width: 100%;margin-top:20px"> <el-table :data="interfaceList" border style="width: 100%;margin-top:20px">
<el-table-column type='index' width="50px"></el-table-column> <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="moduleName" label="所属模块" width="200px"></el-table-column>
<el-table-column prop="url" label="接口路径" width="300px"></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="method" label="请求方式" width="70px"></el-table-column>
<el-table-column prop="paramType" label="参数类型" width="100px"></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="createTime" label="创建时间" width="200px"></el-table-column>
<el-table-column prop="updateTime" label="修改时间" width="200px"></el-table-column> <el-table-column prop="updateTime" label="修改时间" width="200px"></el-table-column>
<el-table-column label="操作"> <el-table-column label="操作">
<slot slot-scope="scope"> <slot slot-scope="scope">
<el-button type="success" @click="openEditDialog(scope.row)">编辑</el-button> <el-button type="success" @click="editInterfaceFrom(scope.row)">编辑</el-button>
<el-button type="danger" @click="delModelFrom(scope.row)">删除</el-button> <el-button type="danger" @click="delInterfaceFrom(scope.row)">删除</el-button>
</slot> </slot>
</el-table-column> </el-table-column>
</el-table> </el-table>
...@@ -40,7 +41,8 @@ ...@@ -40,7 +41,8 @@
import { import {
getModulList, getModulList,
getProjectList, getProjectList,
interfaceDetailList interfaceDetailList,
delInterface
} from '@/api/getAotoInterface' } from '@/api/getAotoInterface'
export default { export default {
data() { data() {
...@@ -48,16 +50,22 @@ export default { ...@@ -48,16 +50,22 @@ export default {
queryModuleInfo: { queryModuleInfo: {
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 10,
projectId: '' projectId: '',
moduleId: ''
}, },
totalNum: 0, totalNum: 0,
projectList: [], projectList: [],
modelList: [], modelList: [],
// 下来项目id // 下来项目id
selectProjectId: '', selectProjectId: '',
// 下拉模块id
selectModelId: '',
interfaceName: '', interfaceName: '',
interfaceList: [], interfaceList: [],
interfaceDetailForm: {} interfaceDetailForm: {},
delInterfaceParam: {
interfaceId: ''
}
} }
}, },
created() { created() {
...@@ -79,8 +87,14 @@ export default { ...@@ -79,8 +87,14 @@ export default {
this.modelList = resp.data.data.list this.modelList = resp.data.data.list
}) })
}, },
// 模块下拉框改变事件
selectChangeModel() {
this.queryModuleInfo.moduleId = this.selectModelId
},
// 查询方法 // 查询方法
queryData() {}, queryData() {
this.getInterfaceDetailList()
},
// 添加跳转页面 // 添加跳转页面
addPage() { addPage() {
this.$router.push('AddInterface') this.$router.push('AddInterface')
...@@ -89,6 +103,7 @@ export default { ...@@ -89,6 +103,7 @@ export default {
getInterfaceDetailList() { getInterfaceDetailList() {
interfaceDetailList(this.queryModuleInfo).then((resp) => { interfaceDetailList(this.queryModuleInfo).then((resp) => {
this.interfaceList = resp.data.data.list this.interfaceList = resp.data.data.list
this.totalNum = resp.data.data.total
}) })
}, },
handleSizeChange(newSize) { handleSizeChange(newSize) {
...@@ -98,6 +113,48 @@ export default { ...@@ -98,6 +113,48 @@ export default {
handleCurrentChange(newPage) { handleCurrentChange(newPage) {
this.queryModuleInfo.pageNum = newPage this.queryModuleInfo.pageNum = newPage
this.getInterfaceDetailList() 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 @@ ...@@ -10,10 +10,7 @@
<el-main> <el-main>
<AsideTitle></AsideTitle> <AsideTitle></AsideTitle>
<!--页面的展示--> <!--页面的展示-->
<transition <transition name="compAnimate" appear>
name="compAnimate"
appear
>
<keep-alive> <keep-alive>
<router-view :style="{marginTop: '55px'}"></router-view> <router-view :style="{marginTop: '55px'}"></router-view>
</keep-alive> </keep-alive>
...@@ -22,7 +19,6 @@ ...@@ -22,7 +19,6 @@
</el-container> </el-container>
</el-container> </el-container>
</template> </template>
<script> <script>
import Aside from './leftAside/Aside' import Aside from './leftAside/Aside'
import Header from './rightMain/Header' import Header from './rightMain/Header'
......
src/views/layout/leftAside/menu.json
View file @ 9140cd93
...@@ -107,7 +107,7 @@ ...@@ -107,7 +107,7 @@
}, },
{ {
"id": 3, "id": 3,
"title": "接口详情", "title": "接口列表",
"icon": "el-icon-bank-card", "icon": "el-icon-bank-card",
"path": "/auto/InterfaceDetail" "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