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