zl-opd-view/src/pages/auth/Menu.vue

<template>
	<div class="page-container">
		<div class="page-side">
			<el-scrollbar style="height:100%;padding:5px;box-sizing: border-box;">
				<el-tree :data="menus" :props="defaultProps" :highlight-current="true" class="tree"  @node-click="nodeClickHandle">
					   
				</el-tree>
				
			</el-scrollbar>
		</div>
		<div class="page-split"></div>
		<div class="page-main">
			<el-form :model="formModel" ref="formcomp"  label-position="right" label-width="auto" :inline="false" :rules="rules" :inline-message="true">
			    <el-form-item label="上级菜单">
					<el-tree-select v-model="formModel.fatherMenuId" :data="menus" :props="defaultProps" :render-after-expand="false" check-strictly  class="edit-form-item"/>
			        <!-- <el-input v-model="formModel.fatherMenuName" autocomplete="off"  class="edit-form-item" :readonly="true"/> -->
					<el-button type="primary" plain size="default" @click="clearSuperHandle">清除</el-button>
					<span class="footnote">(为0或空表示顶级)</span>
			    </el-form-item>
				
			     
				
				  
				<el-form-item label="菜单名" prop="menuName">
				    <el-input v-model="formModel.menuName"  autocomplete="off" placeholder="请输入菜单名" class="edit-form-item" clearable/>
				</el-form-item>
				
				<el-form-item label="链接地址">
				    <el-input v-model="formModel.menuLink"  autocomplete="off" placeholder="请输入链接地址" class="edit-form-item" clearable/>
				</el-form-item>
				
				<el-form-item label="图标">
				    <el-input v-model="formModel.menuIcon"  autocomplete="off" placeholder="请输入图标名" class="edit-form-item" clearable/>
				</el-form-item>
				  
				<el-form-item label="显示序号">
				    <el-input-number v-model="formModel.displayNum" :min="1" :max="10000"/>
				</el-form-item>
				  
	
				<el-form-item label=" ">
					<el-button type="primary" @click="saveSubmit">保存</el-button>
					<el-button type="success" @click="addSubmit">新增</el-button>
					<el-button @click="delSubmit">删除</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script setup>
	import {ref,reactive,toRefs,toRaw } from 'vue'
	import headerAPI from "../../api/header.js"
	import {ElMessageBox,ElMessage} from 'element-plus'
	import  menuAPI from "../../api/menu.js"
	
	const formModel = reactive({
	  fatherMenuName:null,
	  fatherMenuId:'',
	  menuId: '',
	  menuName:'',
	  menuLink:'',
	  menuIcon:null,
	  displayNum:1
	  
	})
	
	const formcomp = ref(null);
	
	const rules =reactive({
		menuName:[
			{required:true,message:'菜单名还未填写',trigger:'blur'},
			{ min: 2, max: 20, message: '菜单名长度应该为3-20', trigger: 'blur' }
			]
	})
	
	
	
	const defaultProps = {
		children: 'subMenus',
		label: 'menuName',
		value:'menuId'           //兼容treeSelect
	}
	
	const menus = ref([])
	
	const getData = () => {
	    headerAPI.fetchData().then( resp => {
			//console.log(resp)
			if(resp.code===0){
				menus.value=headerAPI.processMenus(resp.data||[])
			}
			else{
				console.log(resp.msg)
			}
	        
			
	    });
	};
	getData();
	
	const nodeClickHandle = (item) =>{
		console.log(item)
		
		let {fatherMenuName,fatherMenuId,menuId,menuName,menuLink,menuIcon,displayNum}=item
		fatherMenuId=fatherMenuId=='0'?null:fatherMenuId
		Object.assign(formModel,{fatherMenuName,fatherMenuId,menuId,menuName,menuLink,menuIcon,displayNum})
		
	}
	
	const clearForm=()=>{
		let [fatherMenuName,fatherMenuId,menuId,menuName,menuLink,menuIcon,displayNum]=[null,null,null,null,null,null,1]
		Object.assign(formModel,{fatherMenuName,fatherMenuId,menuId,menuName,menuLink,menuIcon,displayNum})
	}
	
	const clearSuperHandle=()=>{
		formModel.fatherMenuName=''
		formModel.fatherMenuId=''
	}
	
	
	
	const saveSubmit=()=>{
		formcomp.value.validate((valid) => {
			if(!valid){
				ElMessage.error("请按要求填写数据");
				return
			}
			menuAPI.saveMenu(toRaw(formModel)).then(resp=>{
				if(resp.code!=0){
					ElMessage.error(resp.msg)
					return
				}
				ElMessage.success('操作成功')
				getData();
				
			}).catch(err=>{
				ElMessage.error(err||'操作失败')
			})
		})
	}
	
	const addSubmit=()=>{
		formcomp.value.validate((valid) => {
			if(!valid){
				ElMessage.error("请按要求填写数据");
				return
			}
			menuAPI.addMenu(toRaw(formModel)).then(resp=>{
				if(resp.code!=0){
					ElMessage.error(resp.msg)
					return
				}
				ElMessage.success('操作成功')
				clearForm()
				getData();
				
			}).catch(err=>{
				ElMessage.error(err||'操作失败')
			})
		})
	}
	
	
	const delSubmit=()=>{
		if(!formModel.menuId){
			ElMessage.error("请先选择一个菜单，再继续");
			return;
		}
		ElMessageBox.confirm(
			'确定要删除吗?',
			'操作确认',
			{
				confirmButtonText:'确定',
				cancelButtonText:'取消',
				type: 'warning'
			}
		).then(()=>{
			menuAPI.delMenu({menuId:formModel.menuId}).then(resp=>{
				if(resp.code!=0){
					ElMessage.error(resp.msg)
					return
				}
				ElMessage.success('操作成功')
				clearForm()
				getData();
				
			}).catch(err=>{
				ElMessage.error(err||'操作失败')
			})
			
		}).catch(()=>{
			console.log('cancel del')
		})
	}
	
</script>

<style scoped>
	.page-container{
		padding: 5px 10px;
		box-sizing: border-box;
		height: 100%;
		display: flex;
		flex-flow: row nowrap;
	}
	.page-side{
		width:240px;
		height: 100%;
	}
	.page-split{
		width:5px;
		height: 100%;
		background-color: #f2f2f2;
	}
	.page-main{
		flex:1;
		padding:0 50px;
	}
	
	.el-form--inline.el-form--label-top{
		justify-content: space-between;
	}
	.edit-form-item{
		width:350px;
	}
	.footnote{
		font-size:12px;
		color:#999;
	}
	
	.page-side:deep(.el-menu){
		border-right: none;
	}
	
	.tree {
		/* background-color: #324157;
		color: #c2c2d2; */
	}
</style>