xiaoe/test
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

api新增修改

Browse Source
This commit is contained in:
赵昱涵
2025-02-18 13:58:29 +08:00
parent c552e6abbd
commit c4db7512a0
5 changed files with 318 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
test-ui/src/api/test/api.js
View File

@@ -14,7 +14,7 @@ export function getApi(id) {
return request({
url: '/test/api/detail',
method: 'post',
params: {id}
data: {id}
})
}

182
test-ui/src/views/test/api/add.vue
View File

@@ -1,49 +1,63 @@
<template>
<div class="app-container">
<el-input v-model="form.name" placeholder="请输入接口名称" />
<el-input v-model="form.name" placeholder="请输入接口名称"/>
<div class="uri">
<el-select v-model="form.method">
<el-option v-for="dict in dict.type.http_method" :key="dict.value" :label="dict.label" :value="dict.value"/>
</el-select>
<el-input v-model="form.uri" placeholder="请输入接口路径" >
<template slot="prepend">路径</template>
<el-input placeholder="请输入接口路径" v-model="form.uri" class="input-with-select">
<el-select v-model="form.method" slot="prepend">
<el-option v-for="dict in dict.type.http_method" :key="dict.value" :label="dict.label" :value="dict.value"/>
</el-select>
</el-input>
</div>
<el-collapse v-model="activeNames">
<el-collapse-item title="请求参数" name="1">
<el-tabs>
<el-tab-pane label="Headers" name="Headers">
<el-table>
<el-table-column label="参数名" align="center" prop="key"/>
<el-table-column label="示例值" align="center" prop="value"/>
</el-table>
</el-tab-pane>
<el-tab-pane label="Params" name="Params">
<el-table>
<el-table-column label="参数名" align="center" prop="key"/>
<el-table-column label="示例值" align="center" prop="value"/>
</el-table>
</el-tab-pane>
<el-tab-pane label="Body" name="Body">
<JsonEditorVue mode="text" :value="json" class="jse-theme-dark" />
</el-tab-pane>
</el-tabs>
</el-collapse-item>
<el-collapse-item title="响应结果" name="2">
<el-tabs>
<el-tab-pane label="Headers" name="Headers">
<table>
</table>
</el-tab-pane>
<el-tab-pane label="Params" name="Params">Params</el-tab-pane>
<el-tab-pane label="Body" name="Body">Body</el-tab-pane>
</el-tabs>
</el-collapse-item>
</el-collapse>
<!-- <el-button type="primary" @click="submitForm">确 定</el-button>-->
<!-- <el-button @click="cancel">取 消</el-button>-->
<el-tabs v-model="activeName">
<el-tab-pane label="Headers" name="Headers">
<el-table :data="form.header">
<el-table-column label="参数名">
<template slot-scope="scope">
<el-input placeholder="请输入参数名" v-model="form.header[scope.$index].key" @input="e => handleTableEdit(e, 'header', scope)" clearable/>
</template>
</el-table-column>
<el-table-column label="示例值">
<template slot-scope="scope">
<el-input placeholder="请输入参数名" v-model="form.header[scope.$index].value" @input="e => handleTableEdit(e, 'header', scope)" clearable/>
</template>
</el-table-column>
<el-table-column label="操作" width="60">
<template slot-scope="scope">
<el-button v-if="form.header.length > scope.$index+1" size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope)">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="Params" name="Params">
<el-table :data="form.param">
<el-table-column label="参数名">
<template slot-scope="scope">
<el-input placeholder="请输入参数名" v-model="form.param[scope.$index].key" @input="e => handleTableEdit(e, 'param', scope)" clearable/>
</template>
</el-table-column>
<el-table-column label="示例值">
<template slot-scope="scope">
<el-input placeholder="请输入示例值" v-model="form.param[scope.$index].value" @input="e => handleTableEdit(e, 'param', scope)" clearable/>
</template>
</el-table-column>
<el-table-column label="操作" width="60">
<template slot-scope="scope">
<el-button v-if="form.header.length > scope.$index+1" size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope)">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="Body" name="Body">
<el-select v-model="form.contentType" style="width: 200px; margin-bottom: 16px">
<el-option v-for="dict in dict.type.content_type" :key="dict.value" :label="dict.label" :value="dict.value"/>
</el-select>
<JsonEditorVue mode="text" v-model="form.body" class="jse-theme-dark"/>
</el-tab-pane>
</el-tabs>
<div class="footer">
<el-button type="primary" @click="submit">提 交</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</div>
</template>
@@ -52,30 +66,84 @@ import VCA from '@vue/composition-api'
import JsonEditorVue from 'json-editor-vue'
import 'vanilla-jsoneditor/themes/jse-theme-dark.css'
import Vue from 'vue'
import {addApi} from "@/api/test/api";
Vue.use(VCA)
export default {
name: "ApiAdd",
dicts: ['http_method'],
components: { JsonEditorVue },
dicts: ['http_method', 'content_type'],
components: {JsonEditorVue},
data() {
return {
activeNames: ['1', '2'],
activeName: "Headers",
form: {
name: "",
method: 'POST',
groupId: this.$route.query.groupId
uri: "",
header: [{
key: "",
value: "",
}],
param: [{
key: "",
value: "",
}],
contentType: "application/json",
body: "",
},
json: {},
rules: {}
}
},
methods: {
submitForm () {
console.log(this.form)
},
cancel () {
submit() {
if (!this.form.name) {
this.$message.error("请输入接口名称")
return
}
if (!this.form.uri) {
this.$message.error("请输入接口路径")
return
}
this.form.header.pop();
this.form.param.pop();
addApi({
groupId: this.$route.query.groupId,
name: this.form.name,
method: this.form.method,
uri: this.form.uri,
header: JSON.stringify(this.form.header),
param: JSON.stringify(this.form.param),
contentType: this.form.contentType,
body: this.form.body,
}).then(res => {
this.$message.success("新增成功");
this.cancel();
})
},
handleTableEdit(e, flag, scope) {
if (flag === "header") {
if (e && this.form.header.length === scope.$index + 1) {
this.form.header.push({
key: "",
value: ""
})
}
}
if (flag === "param") {
if (e && this.form.param.length === scope.$index + 1) {
this.form.param.push({
key: "",
value: ""
})
}
}
},
handleDelete(scope) {
this.form.header.splice(scope.$index, 1)
},
cancel() {
this.$tab.closeOpenPage({ path: "/api" });
}
}
}
@@ -86,7 +154,19 @@ export default {
display: flex;
margin: 16px 0;
}
::v-deep .el-collapse-item__wrap {
padding: 0 16px;
}
::v-deep.el-select {
width: 130px;
}
.input-with-select ::v-deep .el-input-group__prepend {
background-color: #fff;
}
.footer {
margin-top: 16px;
text-align: right;
}
</style>

187
test-ui/src/views/test/api/edit.vue
View File

@@ -1,27 +1,194 @@
<template>
<div class="app-container">
edit
<el-input v-model="form.name" placeholder="请输入接口名称"/>
<div class="uri">
<el-input placeholder="请输入接口路径" v-model="form.uri" class="input-with-select">
<el-select v-model="form.method" slot="prepend">
<el-option v-for="dict in dict.type.http_method" :key="dict.value" :label="dict.label" :value="dict.value"/>
</el-select>
</el-input>
</div>
<el-tabs v-model="activeName">
<el-tab-pane label="Headers" name="Headers">
<el-table :data="form.header">
<el-table-column label="参数名">
<template slot-scope="scope">
<el-input placeholder="请输入参数名" v-model="form.header[scope.$index].key" @input="e => handleTableEdit(e, 'header', scope)" clearable/>
</template>
</el-table-column>
<el-table-column label="示例值">
<template slot-scope="scope">
<el-input placeholder="请输入参数名" v-model="form.header[scope.$index].value" @input="e => handleTableEdit(e, 'header', scope)" clearable/>
</template>
</el-table-column>
<el-table-column label="操作" width="60">
<template slot-scope="scope">
<el-button v-if="form.header.length > scope.$index+1" size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope)">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="Params" name="Params">
<el-table :data="form.param">
<el-table-column label="参数名">
<template slot-scope="scope">
<el-input placeholder="请输入参数名" v-model="form.param[scope.$index].key" @input="e => handleTableEdit(e, 'param', scope)" clearable/>
</template>
</el-table-column>
<el-table-column label="示例值">
<template slot-scope="scope">
<el-input placeholder="请输入示例值" v-model="form.param[scope.$index].value" @input="e => handleTableEdit(e, 'param', scope)" clearable/>
</template>
</el-table-column>
<el-table-column label="操作" width="60">
<template slot-scope="scope">
<el-button v-if="form.header.length > scope.$index+1" size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope)">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="Body" name="Body">
<el-select v-model="form.contentType" style="width: 200px; margin-bottom: 16px">
<el-option v-for="dict in dict.type.content_type" :key="dict.value" :label="dict.label" :value="dict.value"/>
</el-select>
<JsonEditorVue mode="text" v-model="form.body" class="jse-theme-dark"/>
</el-tab-pane>
</el-tabs>
<div class="footer">
<el-button type="primary" @click="submit">提 交</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</div>
</template>
<script>
import VCA from '@vue/composition-api'
import JsonEditorVue from 'json-editor-vue'
import 'vanilla-jsoneditor/themes/jse-theme-dark.css'
import Vue from 'vue'
import {getApi, updateApi} from "@/api/test/api";
Vue.use(VCA)
export default {
name: "ApiEdit",
dicts: ['http_method'],
created () {
console.log(this.$route.query.id)
},
name: "EditAdd",
dicts: ['http_method', 'content_type'],
components: {JsonEditorVue},
data() {
return {
// 表单参数
form: {},
// 表单校验
rules: {}
activeName: "Headers",
form: {
groupId: null,
name: "",
method: 'POST',
uri: "",
header: [{
key: "",
value: "",
}],
param: [{
key: "",
value: "",
}],
contentType: "application/json",
body: "",
},
}
},
created() {
getApi(this.$route.query.id).then(res => {
this.form = {
groupId: res.data.groupId,
name: res.data.name,
method: res.data.method,
uri: res.data.uri,
header: JSON.parse(res.data.header),
param: JSON.parse(res.data.param),
contentType: res.data.contentType,
body: res.data.body,
}
this.form.header.push({
key: "",
value: ""
})
this.form.param.push({
key: "",
value: ""
})
})
},
methods: {
submit() {
if (!this.form.name) {
this.$message.error("请输入接口名称")
return
}
if (!this.form.uri) {
this.$message.error("请输入接口路径")
return
}
this.form.header.pop();
this.form.param.pop();
updateApi({
id: this.$route.query.id,
name: this.form.name,
method: this.form.method,
uri: this.form.uri,
header: JSON.stringify(this.form.header),
param: JSON.stringify(this.form.param),
contentType: this.form.contentType,
body: this.form.body,
}).then(res => {
this.$message.success("新增成功");
this.cancel();
})
},
handleTableEdit(e, flag, scope) {
if (flag === "header") {
if (e && this.form.header.length === scope.$index + 1) {
this.form.header.push({
key: "",
value: ""
})
}
}
if (flag === "param") {
if (e && this.form.param.length === scope.$index + 1) {
this.form.param.push({
key: "",
value: ""
})
}
}
},
handleDelete(scope) {
this.form.header.splice(scope.$index, 1)
},
cancel() {
this.$tab.closeOpenPage({ path: "/api" });
}
}
}
</script>
<style scoped lang="scss">
.uri {
display: flex;
margin: 16px 0;
}
::v-deep .el-collapse-item__wrap {
padding: 0 16px;
}
::v-deep.el-select {
width: 130px;
}
.input-with-select ::v-deep .el-input-group__prepend {
background-color: #fff;
}
.footer {
margin-top: 16px;
text-align: right;
}
</style>