vueadmin/src/pages/system/menu/index.vue

<template>
	<div class="system-menu">
		<a-card title="菜单管理">
			<template #extra>
				<a-button type="primary" @click="handleAdd">
					<PlusOutlined />
					新增菜单
				</a-button>
			</template>

			<a-table :columns="columns" :data-source="dataSource" :loading="loading" :pagination="false" row-key="id">
				<template #bodyCell="{ column, record }">
					<template v-if="column.key === 'icon'">
						<component :is="record.icon || 'MenuOutlined'" />
					</template>
					<template v-else-if="column.key === 'type'">
						<a-tag :color="getTypeColor(record.type)">
							{{ getTypeText(record.type) }}
						</a-tag>
					</template>
					<template v-else-if="column.key === 'status'">
						<a-tag :color="record.status === 1 ? 'green' : 'red'">
							{{ record.status === 1 ? '正常' : '禁用' }}
						</a-tag>
					</template>
					<template v-else-if="column.key === 'action'">
						<a-space>
							<a-button type="link" size="small" @click="handleEdit(record)">编辑</a-button>
							<a-button type="link" size="small" @click="handleAddChild(record)">新增子菜单</a-button>
							<a-button type="link" size="small" danger @click="handleDelete(record)">删除</a-button>
						</a-space>
					</template>
				</template>
			</a-table>
		</a-card>
	</div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { PlusOutlined, MenuOutlined } from '@ant-design/icons-vue'

const columns = [
	{
		title: '菜单名称',
		dataIndex: 'title',
		key: 'title'
	},
	{
		title: '图标',
		dataIndex: 'icon',
		key: 'icon',
		width: 80
	},
	{
		title: '路径',
		dataIndex: 'path',
		key: 'path'
	},
	{
		title: '类型',
		dataIndex: 'type',
		key: 'type',
		width: 100
	},
	{
		title: '排序',
		dataIndex: 'sort',
		key: 'sort',
		width: 80
	},
	{
		title: '状态',
		dataIndex: 'status',
		key: 'status',
		width: 100
	},
	{
		title: '操作',
		key: 'action',
		width: 220
	}
]

const dataSource = ref([])
const loading = ref(false)

// 模拟数据
const mockData = [
	{
		id: 1,
		title: '首页',
		path: '/home',
		icon: 'HomeOutlined',
		type: 1,
		sort: 1,
		status: 1,
		children: []
	},
	{
		id: 2,
		title: '系统管理',
		path: '/system',
		icon: 'SettingOutlined',
		type: 1,
		sort: 2,
		status: 1,
		children: [
			{
				id: 21,
				title: '用户管理',
				path: '/system/user',
				icon: 'UserOutlined',
				type: 2,
				sort: 1,
				status: 1
			},
			{
				id: 22,
				title: '角色管理',
				path: '/system/role',
				icon: 'TeamOutlined',
				type: 2,
				sort: 2,
				status: 1
			},
			{
				id: 23,
				title: '菜单管理',
				path: '/system/menu',
				icon: 'MenuOutlined',
				type: 2,
				sort: 3,
				status: 1
			}
		]
	}
]

const loadData = () => {
	loading.value = true
	// 模拟接口请求
	setTimeout(() => {
		dataSource.value = mockData
		loading.value = false
	}, 500)
}

const getTypeColor = (type) => {
	const colorMap = {
		1: 'blue',
		2: 'green',
		3: 'orange'
	}
	return colorMap[type] || 'default'
}

const getTypeText = (type) => {
	const textMap = {
		1: '目录',
		2: '菜单',
		3: '按钮'
	}
	return textMap[type] || '未知'
}

const handleAdd = () => {
	message.info('新增菜单功能开发中')
}

const handleEdit = (record) => {
	message.info('编辑菜单功能开发中')
}

const handleAddChild = (record) => {
	message.info(`新增 ${record.title} 的子菜单功能开发中`)
}

const handleDelete = (record) => {
	message.info('删除菜单功能开发中')
}

onMounted(() => {
	loadData()
})
</script>

<style scoped lang="scss">
.system-menu {
	// 样式
}
</style>