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

fix

Browse Source
This commit is contained in:
赵昱涵
2025-02-20 10:21:45 +08:00
parent dc23ab70ac
commit b4b6482e18
3 changed files with 79 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
test-ui/src/router/index.js
View File

@@ -116,20 +116,6 @@ export const constantRoutes = [
} }
] ]
}, },
{
path: '/api/import',
component: Layout,
hidden: true,
children: [
{
path: '',
component: () => import('@/views/test/api/import'),
name: 'ApiImport',
noCache: true,
meta: { title: '导入接口', activeMenu: '/api' }
}
]
},
] ]
// 动态路由，基于用户权限动态去加载 // 动态路由，基于用户权限动态去加载

58
test-ui/src/views/test/api/import.vue
View File

@@ -1,58 +0,0 @@
<template>
<div>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="swagger" prop="url">
<el-input v-model="form.url" placeholder="请输入swagger文档链接"/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</div>
</template>
<script>
import {importApi} from "@/api/test/api";
export default {
name: "ApiImport",
dicts: ['http_method'],
data() {
return {
// 表单参数
form: {},
// 表单校验
rules: {
url: [{required: true, message: "swagger文档链接不能为空", trigger: "blur"}]
}
}
},
methods: {
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
importApi({url: this.form.url}).then((res) => {
loading.close();
this.$message.success("导入成功")
this.cancel();
})
}
})
},
cancel() {
this.$emit('close')
}
}
}
</script>
<style scoped lang="scss">
</style>

128
test-ui/src/views/test/api/index.vue
View File

@@ -1,56 +1,68 @@
<template> <template>
<folder-page type="api" @click="folderHandleSelected"> <folder-page type="api" @click="folderHandleSelected" ref="folder">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"> <div v-if="this.queryParams.groupId && this.queryParams.groupId !== 0">
<el-form-item label="接口名称" prop="name"> <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-input v-model="queryParams.name" placeholder="请输入接口名称" clearable @keyup.enter.native="handleQuery"/> <el-form-item label="接口名称" prop="name">
</el-form-item> <el-input v-model="queryParams.name" placeholder="请输入接口名称" clearable @keyup.enter.native="handleQuery"/>
<el-form-item label="请求类型" prop="method"> </el-form-item>
<el-select v-model="queryParams.method" placeholder="请输入接口请求类型" clearable @keyup.enter.native="handleQuery"> <el-form-item label="请求类型" prop="method">
<el-option v-for="dict in dict.type.http_method" :key="dict.value" :label="dict.label" :value="dict.value"/> <el-select v-model="queryParams.method" placeholder="请输入接口请求类型" clearable @keyup.enter.native="handleQuery">
</el-select> <el-option v-for="dict in dict.type.http_method" :key="dict.value" :label="dict.label" :value="dict.value"/>
</el-form-item> </el-select>
<el-form-item label="接口路径" prop="uri"> </el-form-item>
<el-input v-model="queryParams.uri" placeholder="请输入接口路径" clearable @keyup.enter.native="handleQuery"/> <el-form-item label="接口路径" prop="uri">
</el-form-item> <el-input v-model="queryParams.uri" placeholder="请输入接口路径" clearable @keyup.enter.native="handleQuery"/>
<el-form-item> </el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> <el-form-item>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
</el-form-item> <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form> </el-form-item>
<el-row :gutter="10" class="mb8"> </el-form>
<el-col :span="1.5"> <el-row :gutter="10" class="mb8">
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button> <el-col :span="1.5">
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleImport">导入</el-button> <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
</el-col> <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleImport">导入</el-button>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> </el-col>
</el-row> <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
<el-table v-loading="loading" :data="apiList"> </el-row>
<el-table-column label="接口名称" align="center" prop="name"/> <el-table v-loading="loading" :data="apiList">
<el-table-column label="接口请求类型" align="center" prop="method"/> <el-table-column label="接口名称" align="center" prop="name"/>
<el-table-column label="接口路径" align="center" prop="uri"/> <el-table-column label="接口请求类型" align="center" prop="method"/>
<el-table-column label="创建时间" align="center" prop="createTime"/> <el-table-column label="接口路径" align="center" prop="uri"/>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width"> <el-table-column label="创建时间" align="center" prop="createTime"/>
<template slot-scope="scope"> <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button> <template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button> <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
</template> <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
</el-table-column> </template>
</el-table> </el-table-column>
<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/> </el-table>
<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/>
</div>
<el-empty v-else>
<el-button type="primary" plain icon="el-icon-plus" @click="handleImport">导入</el-button>
</el-empty>
<el-dialog title="导入接口" :visible.sync="dialogVisible" :close-on-click-modal="false" destroy-on-close> <el-dialog title="导入接口" :visible.sync="dialogVisible" :close-on-click-modal="false" destroy-on-close>
<api-import @close="() => dialogVisible = false"/> <el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="swagger" prop="url">
<el-input v-model="form.url" placeholder="请输入swagger文档链接"/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog> </el-dialog>
</folder-page> </folder-page>
</template> </template>
<script> <script>
import {listApi, delApi} from "@/api/test/api"; import {listApi, delApi, importApi} from "@/api/test/api";
import FolderPage from "@/components/FolderPage/index.vue"; import FolderPage from "@/components/FolderPage/index.vue";
import ApiImport from "@/views/test/api/import.vue";
export default { export default {
name: "Api", name: "Api",
components: {ApiImport, FolderPage}, components: {FolderPage},
dicts: ['http_method'], dicts: ['http_method'],
data() { data() {
return { return {
@@ -67,6 +79,10 @@ export default {
uri: null, uri: null,
}, },
dialogVisible: false, dialogVisible: false,
form: {},
rules: {
url: [{required: true, message: "swagger文档链接不能为空", trigger: "blur"}]
}
}; };
}, },
methods: { methods: {
@@ -78,7 +94,6 @@ export default {
this.apiList = []; this.apiList = [];
} }
}, },
/** 查询接口列表 */
getList() { getList() {
this.loading = true; this.loading = true;
listApi(this.queryParams).then(response => { listApi(this.queryParams).then(response => {
@@ -87,37 +102,52 @@ export default {
this.loading = false; this.loading = false;
}); });
}, },
/** 搜索按钮操作 */
handleQuery() { handleQuery() {
this.queryParams.pageNum = 1; this.queryParams.pageNum = 1;
this.getList(); this.getList();
}, },
/** 重置按钮操作 */
resetQuery() { resetQuery() {
this.resetForm("queryForm"); this.resetForm("queryForm");
this.handleQuery(); this.handleQuery();
}, },
/** 新增按钮操作 */
handleAdd() { handleAdd() {
this.$tab.openPage("添加接口", "/api/add", {groupId: this.queryParams.groupId}); this.$tab.openPage("添加接口", "/api/add", {groupId: this.queryParams.groupId});
}, },
handleImport() { handleImport() {
this.dialogVisible = true; this.dialogVisible = true;
}, },
/** 修改按钮操作 */
handleUpdate(row) { handleUpdate(row) {
this.$tab.openPage("修改接口", "/api/edit", {id: row.id}); this.$tab.openPage("修改接口", "/api/edit", {id: row.id});
}, },
/** 删除按钮操作 */
handleDelete(row) { handleDelete(row) {
this.$modal.confirm('是否确认删除接口编号为"' + row.id + '"的数据项？').then(function () { this.$modal.confirm('是否确认删除接口编号为"' + row.id + '"的数据项？').then(function () {
return delApi(row.id); return delApi(row.id);
}).then(() => { }).then(() => {
this.getList(); this.getList();
this.$modal.msgSuccess("删除成功"); this.$modal.msgSuccess("删除成功");
}).catch(() => {
}); });
}, },
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
importApi({url: this.form.url}).then((res) => {
loading.close();
this.$message.success("导入成功")
this.$refs.folder.getGroup();
this.cancel();
})
}
})
},
cancel() {
this.dialogVisible = false
}
} }
}; };
</script> </script>