aizuda-web-vue3/src/views/setting/menu/index.vue

<template>
	<div class="pageWrap bgc">
		<div class="aside-box-system">
			<el-aside v-loading="menuLoading" width="300px" style="height: 100%">
				<el-container style="height: 100%">
					<header style="padding: 13px 15px; border-bottom: 1px solid var(--el-border-color-light)">
						<el-input v-model="menuFilterText" placeholder="输入关键字进行过滤" clearable></el-input>
					</header>
					<el-main class="nopadding">
						<el-tree
							ref="menuRef"
							class="menu-tree"
							node-key="id"
							:data="menuList"
							:props="menuProps"
							highlight-current
							:expand-on-click-node="false"
							check-strictly
							show-checkbox
							:filter-node-method="menuFilterNode"
							@node-click="menuClick"
						>
							<template #default="{ node, data }">
								<span class="custom-tree-node el-tree-node__label">
									<span class="label">
										{{ generateTitle(node.label) }}
									</span>
									<span class="do">
										<el-icon @click.stop="add(node, data)"><Plus /></el-icon>
									</span>
								</span>
							</template>
						</el-tree>
					</el-main>
					<el-footer style="height: 51px">
						<el-button :icon="Refresh" @click="getMenu()"></el-button>
						<el-button type="primary" :icon="Plus" @click="add()"></el-button>
						<el-button type="danger" plain :icon="Delete" @click="delMenu"></el-button>
					</el-footer>
				</el-container>
			</el-aside>
		</div>

		<el-container class="container-bg">
			<el-main ref="mainRef" class="nopadding" style="padding: 20px">
				<save ref="saveRef" :menu="menuList"></save>
			</el-main>
		</el-container>
	</div>
</template>

<script setup name="menu">
import Save from './save'
import resource from '@/api/system/resource'
import { Plus, Refresh, Delete } from '@element-plus/icons-vue'
import { onMounted, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { generateTitle } from '@/utils/i18n'
const menuLoading = ref(false)
const menuList = ref([])
const menuFilterText = ref('')
const mainRef = ref(null) // 右侧的大容器
const saveRef = ref(null) // 右侧的表单
const menuRef = ref(null) // 左侧菜单树
const menuProps = {
	label: data => {
		return data.title
	}
}
let newMenuIndex = 1

// methods
const getMenu = async () => {
	//加载树数据
	menuLoading.value = true
	try {
		let data = await resource.resourceListTreeApi()
		menuLoading.value = false
		menuList.value = data
	} catch (e) {
		console.log(e)
		menuLoading.value = false
	}
}

const menuClick = (data, node) => {
	//树点击
	let pid = +node.level === 1 ? undefined : node.parent.data.id
	saveRef.value.setData(data, pid)
	mainRef.value.$el.scrollTop = 0
}

const menuFilterNode = (value, data) => {
	//树过滤
	if (!value) return true
	let targetText = data.title
	return targetText.indexOf(value) !== -1
}

const add = async (node, data) => {
	let newMenuName = '未命名' + newMenuIndex++
	let newMenuData = {
		pid: '0',
		parentName: '',
		path: '',
		component: '',
		title: newMenuName,
		type: '0'
	}
	if (data) {
		newMenuData.pid = data.id
		newMenuData.parentName = data.title
	}
	menuLoading.value = true
	try {
		let res = await resource.resourceAddOrEditSaveApi(newMenuData)
		menuLoading.value = false
		newMenuData.id = res
		menuRef.value.append(newMenuData, node)
		menuRef.value.setCurrentKey(newMenuData.id)
		let pid = node ? node.data.id : ''
		saveRef.value.setData(newMenuData, pid)
	} catch (e) {
		menuLoading.value = false
		console.log(e, '新增菜单失败')
	}
}

const delMenu = () => {
	//删除菜单
	let checkedNodes = menuRef.value.getCheckedNodes()
	if (!checkedNodes.length) {
		return ElMessage.warning('请选择需要删除的项')
	}
	ElMessageBox.confirm(`确认删除已选择的菜单吗？`, '提示', {
		type: 'warning',
		confirmButtonText: '删除',
		confirmButtonClass: 'el-button--danger'
	})
		.then(async () => {
			menuLoading.value = true
			let reqData = checkedNodes.map(item => item.id)
			try {
				await resource.resourceDeleteApi(reqData)
				checkedNodes.forEach(item => {
					let node = menuRef.value.getNode(item)
					if (node.isCurrent) {
						saveRef.value.setData({ id: node.id })
					}
					menuRef.value.remove(item)
				})
				menuLoading.value = false
				ElMessage.success('操作成功')
			} catch (e) {
				menuLoading.value = false
				ElMessage.error('操作失败')
				console.log('删除左侧菜单失败', e)
			}
		})
		.catch(() => {})
}

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

<style scoped lang="scss">

.nopadding {
	padding: 0px;
}

.container-bg {
	background: var(--el-bg-color-overlay);
}
.custom-tree-node {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	padding-right: 24px;
	height: 100%;
}

.custom-tree-node .label {
	display: flex;
	align-items: center;
	height: 100%;
}

.custom-tree-node .label .el-tag {
	margin-left: 5px;
}

.custom-tree-node .do {
	display: none;
}

.custom-tree-node .do i {
	margin-left: 5px;
	color: #999;
	padding: 5px;
	font-size: 24px;
}

.custom-tree-node .do i:hover {
	color: #333;
}

.custom-tree-node:hover .do {
	display: inline-block;
}
</style>