rax-medical/src/views/permissions-manage/menu-manage.vue

<template>
	<div class="table-page">
		<div class="search-part" v-show="isSearch">
			<div class="search-cell">
				<span class="label">菜单名称</span>
				<el-input v-model="queryParams" placeholder="请输入菜单名称"></el-input>
			</div>
			<el-button type="primary" icon="Search" @click="searchList">查询</el-button>
			<el-button icon="Refresh" @click="resetSearch">重置</el-button>
		</div>
		<div class="button-part" style="justify-content: space-between;">
			<div>
				<el-button type="primary" icon="FirstAidKit" @click="addData()">新增</el-button>
				<el-button @click="expandTable">展开/折叠</el-button>
			</div>
			<TableAbility :isDownload="false" @searchBtn="isSearch = !isSearch" @refreshBtn="initData()"></TableAbility>
		</div>
		<div class="table-part">
			<el-table ref="tableRef" :data="tableData" row-key="id" height="100%" border show-overflow-tooltip
								@row-click="tableRowClick">
				<el-table-column property="name" label="菜单名称" width="180" align="center"/>
				<el-table-column property="sortOrder" label="排序" width="80" align="center"/>
				<el-table-column label="图标" width="80" align="center">
					<template #default="scope"><i class="main-color f20" :class="scope.row.meta.icon"></i></template>
				</el-table-column>
				<el-table-column property="path" label="路由" width="260" align="center"/>
				<el-table-column property="menuType" label="类型" width="180" align="center"/>
				<el-table-column label="操作" align="center">
					<template #default="scope">
						<div @click.stop>
							<el-button link icon="EditPen" @click="addData(scope.row)">新建下级</el-button>
							<el-button link icon="EditPen" @click="editData(scope.row)">修改</el-button>
							<el-button link icon="Delete" @click="removeData(scope.row)">删除</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
	<el-dialog v-model="isFormDialog" :title="formDialogTitle" width="30%">
		<MenuForm ref="menuFormRef" :type="formDialogTitle === '添加' ? 'add' : 'edit'"
							@save-or-update-event="formSaveUpdateEvent" @close="isFormDialog = false"/>
	</el-dialog>
</template>

<script lang='ts' setup>
import {onMounted, ref} from 'vue'
import MenuForm from './form/menu-form.vue'
import * as menuApi from "@/api/menu";
import {ElMessage, ElMessageBox} from "element-plus";

let isExpand = false // 表格展开状态

const tableRef = ref()
const menuFormRef = ref()
const isSearch = ref(true)
const loading = ref(true)
const isFormDialog = ref(false)
const formDialogTitle = ref('')
const queryParams = ref('')
const tableData = ref([] as any)

onMounted(() => {
	initData();
})

function initData() {
	loading.value = true;
	tableData.value = [];
	getMenuTree();
}

function searchList() {
	loading.value = true;
	tableData.value = [];
	getMenuTree(queryParams.value)
}

function resetSearch() {
	queryParams.value = '';
	initData();
}

function getMenuTree(name?: string) {
	menuApi.getMenuTree(name).then((res: any) => {
		tableData.value = res.data;
		updateMenuTree(res.data, tableData.value);
	})
}

function updateMenuTree(source: any[], target: any[]) {
	target.forEach((row: any) => {
	});
}

const queryData = (e: any) => {
	loading.value = true
	tableData.value = []
	setTimeout(() => {
		while (tableData.value.length < 10) {
			tableData.value.push({
				id: tableData.value.length,
				menuName: e.menuName,
				order: tableData.value.length + 1,
				icon: 'icon-shouye-zhihui',
				route: '/permissions-manage',
				type: '菜单',
			})
		}
		loading.value = false
	}, 200);
}
const addData = (menu?: any) => {
	isFormDialog.value = true
	formDialogTitle.value = '添加'
	setTimeout(() => {
		menuFormRef.value.resetData(menu)
	}, 0)
}
const expandTable = () => {
	isExpand = !isExpand
	tableData.value.forEach((row: any) => {
		tableRef.value.toggleRowExpansion(row, isExpand)
	})
}
const removeData = (e?: any) => {
	ElMessageBox.confirm(
		'是否删除？',
		{
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning',
			draggable: true
		}
	).then(() => {
		menuApi.deleteById(e.id).then((res: any) => {
			if (res.code == 0) {
				ElMessage.success("删除成功");
				initData();
			} else {
				ElMessage.error(res.msg ? res.msg : "删除失败");
			}
		})
	})
}
const editData = (e: any) => {
	isFormDialog.value = true
	formDialogTitle.value = '修改'
	setTimeout(() => {
		menuFormRef.value.resetData(null, JSON.parse(JSON.stringify(e)))
	}, 0)
}
const tableRowClick = (row: any) => {
	tableRef.value.toggleRowExpansion(row)
}

function formSaveUpdateEvent() {
	isFormDialog.value = false;
	initData();
}

</script>

<style lang='scss' scoped></style>