|
|
@@ -46,110 +46,108 @@
|
|
|
</div>
|
|
|
|
|
|
<!-- 右侧API列表 -->
|
|
|
- <div class="apihub-content">
|
|
|
- <el-card shadow="never">
|
|
|
- <div class="api-header">
|
|
|
- <div class="current-group" v-if="currentGroup.name">
|
|
|
- 当前分组: <span class="group-name">{{ currentGroup.name }}</span>
|
|
|
- </div>
|
|
|
- <div class="current-group" v-else>全部API</div>
|
|
|
+ <el-card shadow="never">
|
|
|
+ <div class="api-header">
|
|
|
+ <div class="current-group" v-if="currentGroup.Name">
|
|
|
+ 当前分组: <span class="group-name">{{ currentGroup.Name }}</span>
|
|
|
</div>
|
|
|
- <el-form :model="params" inline ref="queryRef">
|
|
|
- <el-form-item label="API名称" prop="keyWord">
|
|
|
- <el-input v-model="params.keyWord" placeholder="请输入API名称" clearable style="width: 180px" @keyup.enter.native="getList(1)" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="数据源" prop="dataSourceId">
|
|
|
- <el-select v-model="params.dataSourceId" placeholder="请选择数据源" clearable style="width: 180px">
|
|
|
- <el-option v-for="item in dataSources" :key="item.id" :label="item.name" :value="item.id" />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="状态" prop="status">
|
|
|
- <el-select v-model="params.status" placeholder="请选择状态" clearable style="width: 120px">
|
|
|
- <el-option label="全部" value="" />
|
|
|
- <el-option label="草稿" value="Draft" />
|
|
|
- <el-option label="已发布" value="Published" />
|
|
|
- <el-option label="已废弃" value="Deprecated" />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="日期范围" prop="dateRange">
|
|
|
- <el-date-picker v-model="params.dateRange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD" style="width: 240px" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item>
|
|
|
- <el-button type="primary" class="ml10" @click="getList(1)">
|
|
|
- <el-icon>
|
|
|
- <ele-Search />
|
|
|
- </el-icon>
|
|
|
- 查询
|
|
|
- </el-button>
|
|
|
- <el-button @click="resetQuery()">
|
|
|
- <el-icon>
|
|
|
- <ele-Refresh />
|
|
|
- </el-icon>
|
|
|
- 重置
|
|
|
- </el-button>
|
|
|
- <el-button type="primary" @click="addOrEdit()" v-auth="'add'">
|
|
|
- <el-icon>
|
|
|
- <ele-FolderAdd />
|
|
|
- </el-icon>
|
|
|
- 新增API
|
|
|
- </el-button>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- <el-table :data="tableData" style="width: 100%" v-loading="loading" row-key="id">
|
|
|
- <el-table-column type="selection" width="55" align="center" />
|
|
|
- <el-table-column prop="id" label="ID" width="80" align="center" />
|
|
|
- <el-table-column prop="name" label="API名称" min-width="120" show-overflow-tooltip></el-table-column>
|
|
|
- <el-table-column prop="path" label="API路径" min-width="150" show-overflow-tooltip></el-table-column>
|
|
|
- <el-table-column prop="method" label="请求方法" width="100" align="center">
|
|
|
- <template #default="scope">
|
|
|
- <el-tag :type="getMethodTagType(scope.row.method)" size="small">
|
|
|
- {{ scope.row.method }}
|
|
|
- </el-tag>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="dataSourceName" label="数据源" width="120" show-overflow-tooltip></el-table-column>
|
|
|
- <el-table-column prop="sqlType" label="SQL类型" width="100" align="center">
|
|
|
- <template #default="scope">
|
|
|
- <el-tag size="small" type="info" v-if="scope.row.sqlType === 'query'">查询</el-tag>
|
|
|
- <el-tag size="small" type="warning" v-else-if="scope.row.sqlType === 'procedure'">存储过程</el-tag>
|
|
|
- <span v-else>{{ scope.row.sqlType }}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="version" label="版本" width="80" align="center"></el-table-column>
|
|
|
- <el-table-column prop="status" label="状态" width="100" align="center">
|
|
|
- <template #default="scope">
|
|
|
- <el-tag size="small" v-if="scope.row.status === 'Draft'">草稿</el-tag>
|
|
|
- <el-tag size="small" type="success" v-else-if="scope.row.status === 'Published'">已发布</el-tag>
|
|
|
- <el-tag size="small" type="info" v-else-if="scope.row.status === 'Deprecated'">已废弃</el-tag>
|
|
|
- <span v-else>{{ scope.row.status }}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="createdAt" label="创建时间" width="160" align="center"></el-table-column>
|
|
|
- <el-table-column label="操作" width="190" align="center" fixed="right">
|
|
|
- <template #default="scope">
|
|
|
- <div class="flex-row">
|
|
|
- <el-button size="small" text type="primary" @click="viewDetail(scope.row)" v-auth="'view'">查看</el-button>
|
|
|
- <el-button size="small" text type="warning" @click="addOrEdit(scope.row)" v-auth="'edit'">编辑</el-button>
|
|
|
- <el-button size="small" text type="success" @click="testApi(scope.row)" v-auth="'test'">测试</el-button>
|
|
|
- <el-dropdown @command="(command: string) => handleCommand(command, scope.row)">
|
|
|
- <el-button size="small" text type="primary" style="margin-left: 12px; vertical-align: top">
|
|
|
- 更多<el-icon class="el-icon--right" style="font-size: 12px !important"><arrow-down /></el-icon>
|
|
|
- </el-button>
|
|
|
- <template #dropdown>
|
|
|
- <el-dropdown-menu>
|
|
|
- <el-dropdown-item command="publish" v-if="scope.row.status === 'Draft'" v-auth="'publish'">发布</el-dropdown-item>
|
|
|
- <el-dropdown-item command="deprecate" v-if="scope.row.status === 'Published'" v-auth="'deprecate'">废弃</el-dropdown-item>
|
|
|
- <el-dropdown-item command="delete" v-auth="'delete'">删除</el-dropdown-item>
|
|
|
- </el-dropdown-menu>
|
|
|
- </template>
|
|
|
- </el-dropdown>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- <pagination v-if="params.total" :total="params.total" v-model:page="params.pageNum" v-model:limit="params.pageSize" @pagination="getList()" />
|
|
|
- </el-card>
|
|
|
- </div>
|
|
|
+ <div class="current-group" v-else>全部API</div>
|
|
|
+ </div>
|
|
|
+ <el-form :model="params" inline ref="queryRef">
|
|
|
+ <el-form-item label="API名称" prop="keyWord">
|
|
|
+ <el-input v-model="params.keyWord" placeholder="请输入API名称" clearable style="width: 180px" @keyup.enter.native="getList(1)" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="数据源" prop="dataSourceId">
|
|
|
+ <el-select v-model="params.dataSourceId" placeholder="请选择数据源" clearable style="width: 180px">
|
|
|
+ <el-option v-for="item in dataSources" :key="item.id" :label="item.name" :value="item.id" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="状态" prop="status">
|
|
|
+ <el-select v-model="params.status" placeholder="请选择状态" clearable style="width: 120px">
|
|
|
+ <el-option label="全部" value="" />
|
|
|
+ <el-option label="草稿" value="Draft" />
|
|
|
+ <el-option label="已发布" value="Published" />
|
|
|
+ <el-option label="已废弃" value="Deprecated" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="日期范围" prop="dateRange">
|
|
|
+ <el-date-picker v-model="params.dateRange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD" style="width: 240px" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" class="ml10" @click="getList(1)">
|
|
|
+ <el-icon>
|
|
|
+ <ele-Search />
|
|
|
+ </el-icon>
|
|
|
+ 查询
|
|
|
+ </el-button>
|
|
|
+ <el-button @click="resetQuery()">
|
|
|
+ <el-icon>
|
|
|
+ <ele-Refresh />
|
|
|
+ </el-icon>
|
|
|
+ 重置
|
|
|
+ </el-button>
|
|
|
+ <el-button type="primary" @click="addOrEdit()" v-auth="'add'">
|
|
|
+ <el-icon>
|
|
|
+ <ele-FolderAdd />
|
|
|
+ </el-icon>
|
|
|
+ 新增API
|
|
|
+ </el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <el-table :data="tableData" style="width: 100%" v-loading="loading" row-key="id">
|
|
|
+ <el-table-column type="selection" width="55" align="center" />
|
|
|
+ <el-table-column prop="id" label="ID" width="80" align="center" />
|
|
|
+ <el-table-column prop="name" label="API名称" min-width="120" show-overflow-tooltip></el-table-column>
|
|
|
+ <el-table-column prop="path" label="API路径" min-width="150" show-overflow-tooltip></el-table-column>
|
|
|
+ <el-table-column prop="method" label="请求方法" width="100" align="center">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-tag :type="getMethodTagType(scope.row.method)" size="small">
|
|
|
+ {{ scope.row.method }}
|
|
|
+ </el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="dataSourceName" label="数据源" width="120" show-overflow-tooltip></el-table-column>
|
|
|
+ <el-table-column prop="sqlType" label="SQL类型" width="100" align="center">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-tag size="small" type="info" v-if="scope.row.sqlType === 'query'">查询</el-tag>
|
|
|
+ <el-tag size="small" type="warning" v-else-if="scope.row.sqlType === 'procedure'">存储过程</el-tag>
|
|
|
+ <span v-else>{{ scope.row.sqlType }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="version" label="版本" width="80" align="center"></el-table-column>
|
|
|
+ <el-table-column prop="status" label="状态" width="100" align="center">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-tag size="small" v-if="scope.row.status === 'Draft'">草稿</el-tag>
|
|
|
+ <el-tag size="small" type="success" v-else-if="scope.row.status === 'Published'">已发布</el-tag>
|
|
|
+ <el-tag size="small" type="info" v-else-if="scope.row.status === 'Deprecated'">已废弃</el-tag>
|
|
|
+ <span v-else>{{ scope.row.status }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="createdAt" label="创建时间" width="160" align="center"></el-table-column>
|
|
|
+ <el-table-column label="操作" width="190" align="center" fixed="right">
|
|
|
+ <template #default="scope">
|
|
|
+ <div class="flex-row">
|
|
|
+ <el-button size="small" text type="primary" @click="viewDetail(scope.row)" v-auth="'view'">查看</el-button>
|
|
|
+ <el-button size="small" text type="warning" @click="addOrEdit(scope.row)" v-auth="'edit'">编辑</el-button>
|
|
|
+ <el-button size="small" text type="success" @click="testApi(scope.row)" v-auth="'test'">测试</el-button>
|
|
|
+ <el-dropdown @command="(command: string) => handleCommand(command, scope.row)">
|
|
|
+ <el-button size="small" text type="primary" style="margin-left: 12px; vertical-align: top">
|
|
|
+ 更多<el-icon class="el-icon--right" style="font-size: 12px !important"><arrow-down /></el-icon>
|
|
|
+ </el-button>
|
|
|
+ <template #dropdown>
|
|
|
+ <el-dropdown-menu>
|
|
|
+ <el-dropdown-item command="publish" v-if="scope.row.status === 'Draft'" v-auth="'publish'">发布</el-dropdown-item>
|
|
|
+ <el-dropdown-item command="deprecate" v-if="scope.row.status === 'Published'" v-auth="'deprecate'">废弃</el-dropdown-item>
|
|
|
+ <el-dropdown-item command="delete" v-auth="'delete'">删除</el-dropdown-item>
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </template>
|
|
|
+ </el-dropdown>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <pagination v-if="params.total" :total="params.total" v-model:page="params.pageNum" v-model:limit="params.pageSize" @pagination="getList()" />
|
|
|
+ </el-card>
|
|
|
</div>
|
|
|
|
|
|
<!-- 组件 -->
|
|
|
@@ -522,18 +520,22 @@ const deleteApi = (row: ApiDefinition) => {
|
|
|
|
|
|
.apihub-container {
|
|
|
display: flex;
|
|
|
- height: calc(100vh - 160px);
|
|
|
+ height: 100%;
|
|
|
+ align-items: stretch;
|
|
|
}
|
|
|
|
|
|
.apihub-sidebar {
|
|
|
width: 280px;
|
|
|
+ min-width: 280px;
|
|
|
margin-right: 16px;
|
|
|
- overflow: hidden;
|
|
|
+ overflow-y: auto;
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
|
|
|
.apihub-content {
|
|
|
flex: 1;
|
|
|
- overflow: hidden;
|
|
|
+ overflow-y: auto;
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
|
|
|
.group-card {
|
