admin-ui/src/views/apihub/apilist.vue

<template>
	<div class="page">
		<div class="apihub-container">
			<!-- 左侧分组树 -->
			<div class="apihub-sidebar">
				<el-card shadow="never" class="group-card">
					<template #header>
						<div class="card-header">
							<span>API分组</span>
							<div class="header-actions">
								<el-button type="primary" size="small" @click="addGroup" v-auth="'add_group'">
									<el-icon><ele-Plus /></el-icon>
								</el-button>
								<el-button type="primary" size="small" @click="refreshGroups">
									<el-icon><ele-Refresh /></el-icon>
								</el-button>
							</div>
						</div>
					</template>
					<div class="group-search">
						<el-input
							v-model="groupSearchKey"
							placeholder="搜索分组"
							clearable
							prefix-icon="ele-Search"
							@input="filterGroups"
						/>
					</div>
					<div class="group-tree-container">
						<el-tree
							ref="groupTreeRef"
							:data="groupTreeData"
							:props="{ label: 'Name', children: 'Children' }"
							node-key="Id"
							highlight-current
							:expand-on-click-node="true"
							default-expand-all
							@node-click="handleGroupClick"
						>
							<template #default="{ node, data }">
								<div class="custom-tree-node">
									<span>{{ node.label }}</span>
									<span class="api-count" v-if="data.ApiCount">{{ data.ApiCount }}</span>
									<div class="node-actions">
										<el-dropdown @command="(command) => handleGroupCommand(command, data)" trigger="click">
											<el-icon><ele-More /></el-icon>
											<template #dropdown>
												<el-dropdown-menu>
													<el-dropdown-item command="edit" v-auth="'edit_group'">编辑</el-dropdown-item>
													<el-dropdown-item command="add_child" v-auth="'add_group'">添加子分组</el-dropdown-item>
													<el-dropdown-item command="delete" v-auth="'delete_group'">删除</el-dropdown-item>
												</el-dropdown-menu>
											</template>
										</el-dropdown>
									</div>
								</div>
							</template>
						</el-tree>
					</div>
				</el-card>
			</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>
					</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="220" align="center">
					<template #default="scope">
						<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) => handleCommand(command, scope.row)">
							<el-button size="small" text type="primary">
								更多<el-icon class="el-icon--right"><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>
					</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>

		<!-- 组件 -->
		<EditForm ref="editFormRef" @getList="getList(1)"></EditForm>
		<ViewDetail ref="viewDetailRef"></ViewDetail>
		<TestApi ref="testApiRef"></TestApi>
		<GroupForm ref="groupFormRef" @refresh="refreshGroups"></GroupForm>
	</div>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive } from 'vue'
import EditForm from './component/edit.vue'
import ViewDetail from './component/view.vue'
import TestApi from './component/test.vue'
import GroupForm from './component/group.vue'
import { useSearch } from '/@/hooks/useCommon'
import { ElMessageBox, ElMessage } from 'element-plus'
import { ArrowDown } from '@element-plus/icons-vue'
import request from '/@/utils/request'

// 定义API接口类型
interface ApiDefinition {
	id?: number
	name: string
	path: string
	method: string
	dataSourceId: number
	dataSourceName?: string
	sqlType: string
	sqlContent: string
	parameters?: any[]
	returnFormat: string
	version: string
	status: string
	plugins?: any[]
	description?: string
	createdAt?: string
	updatedAt?: string
}

// 引用组件
const editFormRef = ref()
const viewDetailRef = ref()
const testApiRef = ref()
const queryRef = ref()
const groupFormRef = ref()
const groupTreeRef = ref()

// 分组相关状态
const groupSearchKey = ref('')
const groupTreeData = ref([])
const currentGroup = reactive({
	Id: undefined,
	GroupKey: '',
	Name: '',
	ParentId: 0,
	Description: ''
})
const originalGroupTree = ref([])

// 数据源列表
const dataSources = ref([])

// API列表请求函数
const apiRequest = (params: any) => {
	// 这里使用request函数发起请求
	// 实际使用时替换为真实API路径
	return request({
		url: '/api/list',
		method: 'get',
		params
	})
}

// 获取分组树形结构
const getGroupTree = () => {
	return request({
		url: '/api_group/tree',
		method: 'get'
	})
}

// 删除分组
const deleteGroup = (ids: number[]) => {
	return request({
		url: '/api_group/delete',
		method: 'post',
		data: { ids }
	})
}

// 使用通用搜索钩子
const { params, tableData, getList, loading } = useSearch<ApiDefinition[]>(
	apiRequest,
	'data',
	{
		keyWord: '',
		dataSourceId: '',
		status: '',
		dateRange: [],
		orderBy: '',
		pageNum: 1,
		pageSize: 10
	}
)

// 加载数据源列表
const loadDataSources = () => {
	// 实际使用时替换为真实API调用
	// 模拟数据
	dataSources.value = [
		{ id: 1, name: '主数据库' },
		{ id: 2, name: '业务数据库' },
		{ id: 3, name: '日志数据库' }
	]
}

// 页面加载时获取列表数据
onMounted(() => {
	// 获取API列表
	getList(1)
	
	// 加载数据源列表
	loadDataSources()
	
	// 加载分组树
	refreshGroups()
})

// 将扁平数组转换为树形结构
const convertToTree = (flatData) => {
	// 创建一个映射表，用于快速查找节点
	const map = {}
	const result = []
	
	// 首先创建所有节点的映射
	flatData.forEach(item => {
		// 确保每个节点都有Children属性
		map[item.Id] = { ...item, Children: [] }
	})
	
	// 然后建立父子关系
	flatData.forEach(item => {
		const node = map[item.Id]
		
		if (item.ParentId === 0 || !map[item.ParentId]) {
			// 如果ParentId为0或者父节点不存在，则为顶级节点
			result.push(node)
		} else {
			// 否则将该节点添加到父节点的Children中
			map[item.ParentId].Children.push(node)
		}
	})
	
	// 清理空的Children数组
	flatData.forEach(item => {
		if (map[item.Id].Children.length === 0) {
			map[item.Id].Children = null
		}
	})
	
	return result
}

// 检查数据是否已经是树形结构
const isTreeStructure = (data) => {
	// 检查数据中是否有包含非空的Children字段的项
	return data.some(item => item.Children && Array.isArray(item.Children) && item.Children.length > 0)
}

// 刷新分组树
const refreshGroups = async () => {
	try {
		// 调用API获取分组树
		const res = await getGroupTree()
		console.log('获取到的API分组数据:', res)

		// 使用API返回的数据
		if (res.data && res.data.list) {
			// 获取原始数据
			const apiData = res.data.list || []
			console.log('原始数据:', apiData)
			
			// 检查数据是否已经是树形结构
			const hasTreeStructure = isTreeStructure(apiData)
			console.log('是否已经是树形结构:', hasTreeStructure)
			
			let treeData
			if (hasTreeStructure) {
				// 如果已经是树形结构，直接使用
				treeData = apiData
				console.log('使用原始树形结构')
			} else {
				// 如果是扁平结构，通过ParentId构建树形结构
				treeData = convertToTree(apiData)
				console.log('通过ParentId构建的树形结构:', treeData)
			}
			
			// 手动设置测试数据，确认组件是否正常工作
			const testData = [
				{
					"Id": 10,
					"GroupKey": "group_1746503398664_968",
					"Name": "巡检管理",
					"ParentId": 0,
					"Sort": 0,
					"Description": "",
					"Children": [
						{
							"Id": 11,
							"GroupKey": "group_1746515959076_509",
							"Name": "能耗分析",
							"ParentId": 10,
							"Sort": 0,
							"Description": "",
							"Children": null,
							"ApiCount": 0
						}
					],
					"ApiCount": 0
				}
			]
			console.log('测试数据:', testData)
			
			// 设置到组件中
			groupTreeData.value = testData
			originalGroupTree.value = JSON.parse(JSON.stringify(testData))
			console.log('设置后的分组数据:', groupTreeData.value)
			return
		}

		// 如果没有数据，初始化为空数组
		groupTreeData.value = []
		originalGroupTree.value = []
	} catch (error) {
		ElMessage.error('获取分组数据失败')
	}
}

// 搜索过滤分组
const filterGroups = () => {
	if (!groupSearchKey.value) {
		// 如果搜索关键字为空，恢复原始数据
		groupTreeData.value = JSON.parse(JSON.stringify(originalGroupTree.value))
		return
	}

	// 递归搜索函数
	const searchTree = (nodes) => {
		return nodes.filter(node => {
			// 当前节点名称匹配
			const matchesName = node.Name.toLowerCase().includes(groupSearchKey.value.toLowerCase())

			// 递归搜索子节点
			if (node.Children && node.Children.length) {
				node.Children = searchTree(node.Children)
				// 如果子节点有匹配项，则保留父节点
				return matchesName || node.Children.length > 0
			}

			return matchesName
		})
	}

	groupTreeData.value = searchTree(JSON.parse(JSON.stringify(originalGroupTree.value)))
}

// 点击分组节点
const handleGroupClick = (data) => {
	// 设置当前选中分组
	Object.assign(currentGroup, data)

	// 更新查询参数，加入分组条件
	params.groupKey = data.GroupKey

	// 重新获取列表
	getList(1)
}

// 添加分组
const addGroup = () => {
	groupFormRef.value.open()
}

// 处理分组操作
const handleGroupCommand = (command, data) => {
	switch (command) {
		case 'edit':
			groupFormRef.value.open(data)
			break
		case 'add_child':
			groupFormRef.value.open(null, data.GroupKey)
			break
		case 'delete':
			deleteGroupConfirm(data)
			break
	}
}

// 删除分组确认
const deleteGroupConfirm = (data) => {
	ElMessageBox.confirm(`确定要删除分组「${data.Name}」吗？如果包含子分组或API，将一并删除。`, '警告', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning'
	}).then(async () => {
		try {
			// 实际使用时调用API
			await deleteGroup([data.Id])
			ElMessage.success('删除成功')

			// 如果当前选中的是要删除的分组，则清空当前分组
			if (currentGroup.GroupKey === data.GroupKey) {
				Object.assign(currentGroup, {
					Id: undefined,
					GroupKey: '',
					Name: '',
					ParentId: 0,
					Description: ''
				})
				params.groupKey = ''
				getList(1)
			}

			// 刷新分组树
			refreshGroups()
		} catch (error) {
			ElMessage.error('删除失败')
		}
	}).catch(() => {})
}

// 根据请求方法返回不同的标签类型
const getMethodTagType = (method: string) => {
	switch (method.toUpperCase()) {
		case 'GET':
			return 'success'
		case 'POST':
			return 'primary'
		case 'PUT':
			return 'warning'
		case 'DELETE':
			return 'danger'
		default:
			return 'info'
	}
}

// 重置查询表单
const resetQuery = () => {
	queryRef.value.resetFields()
	getList(1)
}

// 新增或编辑API
const addOrEdit = (row?: ApiDefinition) => {
	if (row) {
		// 编辑现有API
		// 实际使用时，可能需要先获取详情
		editFormRef.value.open(row)
	} else {
		// 新增API，如果有选中分组，则传递分组标识
		editFormRef.value.open(null, currentGroup.groupKey)
	}
}

// 查看API详情
const viewDetail = (row: ApiDefinition) => {
	viewDetailRef.value.open(row)
}

// 测试API
const testApi = (row: ApiDefinition) => {
	testApiRef.value.open(row)
}

// 处理下拉菜单命令
const handleCommand = (command: string, row: ApiDefinition) => {
	switch (command) {
		case 'publish':
			publishApi(row)
			break
		case 'deprecate':
			deprecateApi(row)
			break
		case 'delete':
			deleteApi(row)
			break
	}
}

// 发布API
const publishApi = (row: ApiDefinition) => {
	ElMessageBox.confirm(`确定要发布API「${row.name}」吗？`, '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning'
	}).then(async () => {
		// 实际使用时替换为真实API调用
		// await api.apihub.publish({ id: row.id })
		ElMessage.success('发布成功')
		getList()
	}).catch(() => {})
}

// 废弃API
const deprecateApi = (row: ApiDefinition) => {
	ElMessageBox.confirm(`确定要废弃API「${row.name}」吗？`, '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning'
	}).then(async () => {
		// 实际使用时替换为真实API调用
		// await api.apihub.deprecate({ id: row.id })
		ElMessage.success('废弃成功')
		getList()
	}).catch(() => {})
}

// 删除API
const deleteApi = (row: ApiDefinition) => {
	ElMessageBox.confirm(`确定要删除API「${row.name}」吗？此操作不可恢复！`, '警告', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'error'
	}).then(async () => {
		// 实际使用时替换为真实API调用
		// await api.apihub.delete({ ids: [row.id] })
		ElMessage.success('删除成功')
		getList()
	}).catch(() => {})
}
</script>

<style scoped>
.ml10 {
	margin-left: 10px;
}

.apihub-container {
	display: flex;
	height: calc(100vh - 160px);
}

.apihub-sidebar {
	width: 280px;
	margin-right: 16px;
	overflow: hidden;
}

.apihub-content {
	flex: 1;
	overflow: hidden;
}

.group-card {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.header-actions {
	display: flex;
	gap: 8px;
}

.group-search {
	margin-bottom: 12px;
}

.group-tree-container {
	overflow-y: auto;
	flex: 1;
	min-height: 200px; /* 确保容器有最小高度 */
	border: 1px solid #ebeef5; /* 添加边框以便于调试 */
	padding: 10px;
}

.custom-tree-node {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	padding-right: 8px;
}

.api-count {
	padding: 0 6px;
	background-color: #f0f0f0;
	border-radius: 10px;
	font-size: 12px;
	color: #606266;
}

.node-actions {
	margin-left: 8px;
	visibility: hidden;
}

.custom-tree-node:hover .node-actions {
	visibility: visible;
}

.api-header {
	margin-bottom: 16px;
	font-size: 16px;
}

.group-name {
	font-weight: bold;
	color: #409EFF;
}
</style>