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

4
.env.development
View File

@@ -4,4 +4,6 @@ ENV = 'development'
# 统一后端服务地址前缀（网关服务名：admin-go）
# 开发环境走本地代理，避免 CORS
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'

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

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