red-future/admin-ui
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

接口管理改动

Browse Source
This commit is contained in:
吴思建
2026-06-18 11:05:56 +08:00
parent ffab3be854
commit 9fbe2c6d64
2 changed files with 104 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.env.development
View File

@@ -5,3 +5,5 @@ ENV = 'development'
# 开发环境走本地代理，避免 CORS # 开发环境走本地代理，避免 CORS
VITE_API_URL = 'http://116.204.74.41:8000' VITE_API_URL = 'http://116.204.74.41:8000'
# VITE_API_URL = 'http://192.168.3.30:8000' # VITE_API_URL = 'http://192.168.3.30:8000'
# VITE_API_URL = 'http://192.168.3.135:8000'

191
src/views/report-engine/apis/index.vue
View File

@@ -1,75 +1,55 @@
<template> <template>
<div class="cid-apis-container"> <div class="cid-apis-container">
<el-card shadow="hover" <el-card shadow="hover">
><el-tabs v-model="tab" @tab-change="onTab" <template #header>
><el-tab-pane label="平台管理" name="platform" <span style="font-weight: 600">平台管理</span>
><el-form ref="pqf" :model="pq" :inline="true" label-width="68px" class="mb15" </template>
><el-form-item label="关键字" prop="keyword" <el-form ref="pqf" :model="pq" :inline="true" label-width="68px" class="mb15">
><el-input <el-form-item label="关键字" prop="keyword">
v-model="pq.keyword" <el-input v-model="pq.keyword" placeholder="请输入平台名称/编码" clearable style="width: 240px" @keyup.enter.native="searchPlatform" />
placeholder="请输入平台名称/编码" </el-form-item>
clearable <el-form-item label="状态" prop="status">
style="width: 240px" <el-select v-model="pq.status" placeholder="平台状态" clearable style="width: 160px">
@keyup.enter.native="searchPlatform" /></el-form-item <el-option label="启用" value="ACTIVE" />
><el-form-item label="状态" prop="status" <el-option label="禁用" value="INACTIVE" />
><el-select v-model="pq.status" placeholder="平台状态" clearable style="width: 160px" </el-select>
><el-option label="启用" value="ACTIVE" /><el-option label="禁用" value="INACTIVE" /></el-select></el-form-item </el-form-item>
><el-form-item <el-form-item>
><el-button type="primary" @click="searchPlatform" <el-button type="primary" @click="searchPlatform"><el-icon><ele-Search /></el-icon>查询</el-button>
><el-icon><ele-Search /></el-icon>查询</el-button <el-button @click="resetPlatformQuery"><el-icon><ele-Refresh /></el-icon>重置</el-button>
><el-button @click="resetPlatformQuery" <el-button type="success" @click="openPlatform()"><el-icon><ele-FolderAdd /></el-icon>新增平台</el-button>
><el-icon><ele-Refresh /></el-icon>重置</el-button </el-form-item>
><el-button type="success" @click="openPlatform()" </el-form>
><el-icon><ele-FolderAdd /></el-icon>新增平台</el-button <el-table :data="platformRows" row-key="id" v-loading="platformLoading">
></el-form-item <el-table-column type="index" label="序号" width="60" />
></el-form <el-table-column prop="platformCode" label="平台编码" min-width="140" show-overflow-tooltip />
><el-table :data="platformRows" row-key="id" v-loading="platformLoading" <el-table-column prop="platformName" label="平台名称" min-width="160" show-overflow-tooltip />
><el-table-column type="index" label="序号" width="60" /><el-table-column <el-table-column prop="apiBaseUrl" label="API地址" min-width="220" show-overflow-tooltip />
prop="platformCode" <el-table-column prop="authType" label="认证" width="100" align="center" />
label="平台编码" <el-table-column prop="status" label="状态" width="90" align="center">
min-width="140" <template #default="s">
show-overflow-tooltip <el-tag size="small" :type="s.row.status === 'ACTIVE' ? 'success' : 'danger'">{{ s.row.status === 'ACTIVE' ? '启用' : '禁用' }}</el-tag>
/><el-table-column prop="platformName" label="平台名称" min-width="160" show-overflow-tooltip /><el-table-column </template>
prop="apiBaseUrl" </el-table-column>
label="API地址" <el-table-column prop="rateLimitPerMinute" label="限流/分钟" width="110" align="center" />
min-width="220" <el-table-column prop="requestTimeoutMs" label="超时(ms)" width="110" align="center" />
show-overflow-tooltip <el-table-column label="创建时间" width="170">
/><el-table-column prop="authType" label="认证" width="100" align="center" /><el-table-column <template #default="s">{{ ft(s.row.createdAt) }}</template>
prop="status" </el-table-column>
label="状态" <el-table-column label="操作" width="240" fixed="right">
width="90" <template #default="s">
align="center" <el-button size="small" text type="primary" @click="manageApis(s.row)">接口管理</el-button>
><template #default="s" <el-button size="small" text type="primary" @click="openPlatform(s.row)">修改</el-button>
><el-tag size="small" :type="s.row.status === 'ACTIVE' ? 'success' : 'danger'">{{ <el-button size="small" text type="danger" @click="delPlatform(s.row)">删除</el-button>
s.row.status === 'ACTIVE' ? '启用' : '禁用' </template>
}}</el-tag></template </el-table-column>
></el-table-column </el-table>
><el-table-column prop="rateLimitPerMinute" label="限流/分钟" width="110" align="center" /><el-table-column <pagination :total="platformTotal" v-model:page="pq.pageNum" v-model:limit="pq.pageSize" @pagination="getPlatforms" />
prop="requestTimeoutMs" </el-card>
label="超时(ms)" <el-dialog v-model="apiListDialog.visible" :title="apiListDialog.title" width="1100px" :close-on-click-modal="false" destroy-on-close @closed="handleApiListClose"
width="110"
align="center"
/><el-table-column label="创建时间" width="170"
><template #default="s">{{ ft(s.row.createdAt) }}</template></el-table-column
><el-table-column label="操作" width="150" fixed="right"
><template #default="s"
><el-button size="small" text type="primary" @click="openPlatform(s.row)">修改</el-button
><el-button size="small" text type="danger" @click="delPlatform(s.row)">删除</el-button></template
></el-table-column
></el-table
><pagination :total="platformTotal" v-model:page="pq.pageNum" v-model:limit="pq.pageSize" @pagination="getPlatforms" /></el-tab-pane
><el-tab-pane label="接口管理" name="api"
><el-form ref="aqf" :model="aq" :inline="true" label-width="68px" class="mb15" ><el-form ref="aqf" :model="aq" :inline="true" label-width="68px" class="mb15"
><el-form-item label="关键字" prop="keyword" ><el-form-item label="关键字" prop="keyword"
><el-input ><el-input v-model="aq.keyword" placeholder="请输入接口名称/编码" clearable style="width: 220px" @keyup.enter.native="searchApi" /></el-form-item
v-model="aq.keyword"
placeholder="请输入接口名称/编码"
clearable
style="width: 220px"
@keyup.enter.native="searchApi" /></el-form-item
><el-form-item label="平台" prop="platformId"
><el-select v-model="aq.platformId" placeholder="请选择平台" clearable filterable style="width: 180px"
><el-option v-for="i in platforms" :key="i.id" :label="i.platformName" :value="String(i.id)" /></el-select></el-form-item
><el-form-item label="状态" prop="status" ><el-form-item label="状态" prop="status"
><el-select v-model="aq.status" placeholder="状态" clearable style="width: 130px" ><el-select v-model="aq.status" placeholder="状态" clearable style="width: 130px"
><el-option label="启用" value="active" /><el-option label="禁用" value="inactive" /></el-select></el-form-item ><el-option label="启用" value="active" /><el-option label="禁用" value="inactive" /></el-select></el-form-item
@@ -77,47 +57,29 @@
><el-select v-model="aq.method" placeholder="请求方式" clearable style="width: 130px" ><el-select v-model="aq.method" placeholder="请求方式" clearable style="width: 130px"
><el-option v-for="m in methods" :key="m" :label="m" :value="m" /></el-select></el-form-item ><el-option v-for="m in methods" :key="m" :label="m" :value="m" /></el-select></el-form-item
><el-form-item ><el-form-item
><el-button type="primary" @click="searchApi" ><el-button type="primary" @click="searchApi"><el-icon><ele-Search /></el-icon>查询</el-button
><el-icon><ele-Search /></el-icon>查询</el-button ><el-button @click="resetApiQuery"><el-icon><ele-Refresh /></el-icon>重置</el-button
><el-button @click="resetApiQuery" ><el-button type="success" @click="openApiForCurrentPlatform()"><el-icon><ele-FolderAdd /></el-icon>新增接口</el-button></el-form-item></el-form
><el-icon><ele-Refresh /></el-icon>重置</el-button ><el-table :data="apiRows" v-loading="apiLoading" max-height="420"
><el-button type="success" @click="openApi()" ><el-table-column type="index" label="序号" width="60" /><el-table-column prop="code" label="接口编码" min-width="140" show-overflow-tooltip
><el-icon><ele-FolderAdd /></el-icon>新增接口</el-button /><el-table-column prop="name" label="接口名称" min-width="150" show-overflow-tooltip /><el-table-column prop="url" label="URL" min-width="220"
></el-form-item show-overflow-tooltip /><el-table-column prop="method" label="请求方式" width="100" align="center"
></el-form
><el-table :data="apiRows" v-loading="apiLoading"
><el-table-column type="index" label="序号" width="60" /><el-table-column
prop="code"
label="接口编码"
min-width="140"
show-overflow-tooltip
/><el-table-column prop="name" label="接口名称" min-width="150" show-overflow-tooltip /><el-table-column
prop="url"
label="URL"
min-width="220"
show-overflow-tooltip
/><el-table-column prop="method" label="请求方式" width="100" align="center"
><template #default="s" ><template #default="s"
><el-tag size="small" :type="s.row.method === 'GET' ? 'success' : 'primary'">{{ s.row.method }}</el-tag></template ><el-tag size="small" :type="s.row.method === 'GET' ? 'success' : 'primary'">{{ s.row.method }}</el-tag></template></el-table-column
></el-table-column
><el-table-column prop="status" label="状态" width="90" align="center" ><el-table-column prop="status" label="状态" width="90" align="center"
><template #default="s" ><template #default="s"
><el-tag size="small" :type="ns(s.row.status) === 'active' ? 'success' : 'danger'">{{ ><el-tag size="small" :type="ns(s.row.status) === 'active' ? 'success' : 'danger'">{{ ns(s.row.status) === 'active' ? '启用' : '禁用' }}</el-tag></template></el-table-column
ns(s.row.status) === 'active' ? '启用' : '禁用' ><el-table-column prop="platformName" label="所属平台" min-width="140" show-overflow-tooltip /><el-table-column label="创建时间" width="170"
}}</el-tag></template
></el-table-column
><el-table-column prop="platformName" label="所属平台" min-width="140" show-overflow-tooltip /> ><el-table-column
label="创建时间"
width="170"
><template #default="s">{{ ft(s.row.createdAt) }}</template></el-table-column ><template #default="s">{{ ft(s.row.createdAt) }}</template></el-table-column
><el-table-column label="操作" width="160" fixed="right" ><el-table-column label="操作" width="160" fixed="right"
><template #default="s" ><template #default="s"
><el-button size="small" text type="primary" @click="openApi(String(s.row.id))">修改</el-button ><el-button size="small" text type="primary" @click="openApi(String(s.row.id))">修改</el-button
><el-button size="small" text type="danger" @click="delApi(s.row)">删除</el-button></template ><el-button size="small" text type="danger" @click="delApi(s.row)">删除</el-button></template></el-table-column></el-table
></el-table-column ><template #footer
></el-table ><div style="display: flex; justify-content: space-between; align-items: center; width: 100%;"
><pagination :total="apiTotal" v-model:page="aq.pageNum" v-model:limit="aq.pageSize" @pagination="getApis" /></el-tab-pane></el-tabs ><pagination :total="apiTotal" v-model:page="aq.pageNum" v-model:limit="aq.pageSize" @pagination="getApis" />
></el-card> <el-button type="primary" @click="apiListDialog.visible = false">关闭</el-button></div></template
></el-dialog>
<el-dialog v-model="platformDialog.visible" :title="platformDialog.title" width="720px" :close-on-click-modal="false" destroy-on-close <el-dialog v-model="platformDialog.visible" :title="platformDialog.title" width="720px" :close-on-click-modal="false" destroy-on-close
><el-form ref="platformFormRef" :model="platformForm" :rules="platformRules" label-width="120px" v-loading="platformDialog.loading" ><el-form ref="platformFormRef" :model="platformForm" :rules="platformRules" label-width="120px" v-loading="platformDialog.loading"
><el-row :gutter="16" ><el-row :gutter="16"
@@ -235,7 +197,7 @@ import {
type ApiInterfaceInfo, type ApiInterfaceInfo,
} from '/@/api/cid/apis'; } from '/@/api/cid/apis';
defineOptions({ name: 'cidApis' }); defineOptions({ name: 'cidApis' });
const tab = ref('platform'), const currentPlatform = ref<any>(null),
methods = ['GET', 'POST', 'PUT', 'DELETE'], methods = ['GET', 'POST', 'PUT', 'DELETE'],
platforms = ref<any[]>([]), platforms = ref<any[]>([]),
platformRows = ref<any[]>([]), platformRows = ref<any[]>([]),
@@ -251,7 +213,8 @@ const pqf = ref<FormInstance>(),
const pq = reactive({ pageNum: 1, pageSize: 10, keyword: '', status: '' }), const pq = reactive({ pageNum: 1, pageSize: 10, keyword: '', status: '' }),
aq = reactive({ pageNum: 1, pageSize: 10, keyword: '', platformId: '', status: '', method: '' }); aq = reactive({ pageNum: 1, pageSize: 10, keyword: '', platformId: '', status: '', method: '' });
const platformDialog = reactive({ visible: false, title: '', loading: false, saving: false }), const platformDialog = reactive({ visible: false, title: '', loading: false, saving: false }),
apiDialog = reactive({ visible: false, title: '', loading: false, saving: false }); apiDialog = reactive({ visible: false, title: '', loading: false, saving: false }),
apiListDialog = reactive({ visible: false, title: '' });
const dpf = () => ({ const dpf = () => ({
id: '', id: '',
platformCode: '', platformCode: '',
@@ -356,7 +319,6 @@ const getApis = async () => {
apiLoading.value = false; apiLoading.value = false;
} }
}; };
const onTab = () => (tab.value === 'platform' ? getPlatforms() : getApis());
const searchPlatform = () => { const searchPlatform = () => {
pq.pageNum = 1; pq.pageNum = 1;
getPlatforms(); getPlatforms();
@@ -373,6 +335,23 @@ const resetApiQuery: any = () => {
aqf.value?.resetFields(); aqf.value?.resetFields();
searchApi(); searchApi();
}; };
const manageApis = (row: any) => {
currentPlatform.value = row;
aq.platformId = String(row.id);
aq.pageNum = 1;
aq.keyword = '';
aq.status = '';
aq.method = '';
apiListDialog.title = `${row.platformName} - 接口管理`;
apiListDialog.visible = true;
getApis();
};
const handleApiListClose = () => {
currentPlatform.value = null;
};
const openApiForCurrentPlatform = () => {
openApi('', currentPlatform.value?.id || '');
};
const openPlatform = async (row?: any) => { const openPlatform = async (row?: any) => {
Object.assign(platformForm, dpf()); Object.assign(platformForm, dpf());
platformFormRef.value?.clearValidate(); platformFormRef.value?.clearValidate();
@@ -535,6 +514,6 @@ const delApi = (row: any) => {
}; };
onMounted(async () => { onMounted(async () => {
await loadPlatforms(); await loadPlatforms();
await Promise.all([getPlatforms(), getApis()]); await getPlatforms();
}); });
</script> </script>