fix: 菜单创建管理

src/views/setting/menu/index.vue

@@ -2,9 +2,9 @@
 	<div class="pageWrap">
 		<el-aside v-loading="menuLoading" width="300px" style="background: #fff; margin-right: 10px">
 			<el-container style="height: 100%">
-				<el-header>
+				<header style="padding: 13px 15px; border-bottom: 1px solid var(--el-border-color-light)">
 					<el-input v-model="menuFilterText" placeholder="输入关键字进行过滤" clearable></el-input>
-				</el-header>
+				</header>
 				<el-main class="nopadding">
 					<el-tree
 						ref="menuRef"
@@ -97,13 +97,17 @@ const menuFilterNode = (value, data) => {
 const add = async (node, data) => {
 	let newMenuName = '未命名' + newMenuIndex++
 	let newMenuData = {
-		pid: data ? data.id : '0',
-		name: newMenuName,
+		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)

src/views/setting/menu/save.vue

@@ -6,13 +6,13 @@
 		<template v-else>
 			<el-col :lg="12">
 				<h2>{{ form.title || '新增菜单' }}</h2>
-				<el-form :model="form" :rules="rules" ref="dialogForm" label-width="80px" label-position="left">
+				<el-form ref="dialogForm" :model="form" :rules="rules" label-width="80px" label-position="left">
+					<el-form-item label="上级菜单" prop="parentName">
+						<el-input v-model="form.parentName" disabled clearable placeholder="顶级菜单"></el-input>
+					</el-form-item>
 					<el-form-item label="显示名称" prop="title">
 						<el-input v-model="form.title" clearable placeholder="菜单显示名字"></el-input>
 					</el-form-item>
-					<el-form-item label="上级菜单" prop="name">
-						<el-input v-model="form.parentName" clearable placeholder="顶级菜单"></el-input>
-					</el-form-item>
 					<el-form-item label="类型" prop="type">
 						<el-radio-group v-model="form.type">
 							<el-radio-button label="0">菜单</el-radio-button>
@@ -26,19 +26,33 @@
 						<div class="el-form-item-msg">系统唯一且与内置组件名一致，否则导致缓存失效。如类型为Iframe的菜单，别名将代替源地址显示在地址栏</div>
 					</el-form-item>
 					<el-form-item label="菜单图标" prop="icon">
-						<icon-select></icon-select>
+						<icon-select v-model="form.icon" />
 					</el-form-item>
 					<el-form-item label="路由地址" prop="path">
+						<template #label>
+							<span class="flex flex-align-pack-center"
+								>路由
+								<el-tooltip content="次顶级菜单记得“/”开头" placement="right">
+									<Warning style="width: 16px; margin-left: 4px; color: var(--el-color-danger)" /> </el-tooltip
+							></span>
+						</template>
 						<el-input v-model="form.path" clearable placeholder=""></el-input>
 					</el-form-item>
 					<el-form-item label="重定向" prop="redirect">
 						<el-input v-model="form.redirect" clearable placeholder=""></el-input>
 					</el-form-item>
-					<el-form-item label="菜单高亮" prop="active">
+					<!--					<el-form-item label="菜单高亮" prop="active">
 						<el-input v-model="form.active" clearable placeholder=""></el-input>
 						<div class="el-form-item-msg">子节点或详情页需要高亮的上级菜单路由地址</div>
-					</el-form-item>
+					</el-form-item>-->
 					<el-form-item label="视图" prop="component">
+						<template #label>
+							<span class="flex flex-align-pack-center"
+								>视图
+								<el-tooltip content="若没有填默认“Layout”" placement="right">
+									<Warning style="width: 16px; margin-left: 4px; color: var(--el-color-danger)" /> </el-tooltip
+							></span>
+						</template>
 						<el-input v-model="form.component" clearable placeholder="">
 							<template #prepend>views/</template>
 						</el-input>
@@ -48,23 +62,23 @@
 						<el-input-number v-model="form.sort" :min="0" :max="9999"></el-input-number>
 						<div class="el-form-item-msg">排序规则、由大到小排序</div>
 					</el-form-item>
-					<el-form-item label="颜色" prop="color">
+					<!--					<el-form-item label="颜色" prop="color">
 						<el-color-picker v-model="form.color" :predefine="predefineColors"></el-color-picker>
-					</el-form-item>
+					</el-form-item>-->
 					<el-form-item label="是否隐藏" prop="hidden">
 						<el-checkbox v-model="form.hidden">隐藏菜单</el-checkbox>
-						<el-checkbox v-model="form.hiddenBreadcrumb">隐藏面包屑</el-checkbox>
+						<!--						<el-checkbox v-model="form.hiddenBreadcrumb">隐藏面包屑</el-checkbox>-->
 						<div class="el-form-item-msg">菜单不显示在导航中，但用户依然可以访问，例如详情页</div>
 					</el-form-item>
 					<el-form-item>
-						<el-button type="primary" @click="save" :loading="loading">保 存</el-button>
+						<el-button type="primary" :loading="loading" @click="save">保 存</el-button>
 					</el-form-item>
 				</el-form>
 			</el-col>
 
 			<el-col :lg="12" class="apilist">
 				<h2>接口权限</h2>
-				<sc-form-table v-model="form.apiList" :addTemplate="apiListAddTemplate" placeholder="暂无匹配接口权限">
+				<sc-form-table v-model="form.apiList" :add-template="apiListAddTemplate" placeholder="暂无匹配接口权限">
 					<el-table-column prop="code" label="标识" width="150">
 						<template #default="scope">
 							<el-input v-model="scope.row.code" placeholder="请输入内容"></el-input>
@@ -87,7 +101,7 @@ import resource from '@/api/system/resource'
 import IconSelect from '@/components/IconSelect'
 import ScFormTable from '@/components/ScFormTable'
 import { ElMessage } from 'element-plus'
-
+const dialogForm = ref()
 const form = ref({
 	id: '',
 	pid: '',
@@ -108,6 +122,7 @@ const form = ref({
 const predefineColors = ref(['#ff4500', '#ff8c00', '#ffd700', '#67C23A', '#00ced1', '#409EFF', '#c71585'])
 const rules = {
 	title: [{ required: true, message: '请输入显示名称', trigger: 'blur' }],
+	path: [{ required: true, message: '请输入路由地址', trigger: 'blur' }],
 	alias: [{ required: true, message: '请输入别名', trigger: 'blur' }],
 	sort: [{ required: true, trigger: 'blur' }]
 }
@@ -118,18 +133,23 @@ const apiListAddTemplate = ref({
 const loading = ref(false)
 
 // methods
-const save = async () => {
-	// 保存
-	loading.value = true
-	try {
-		await resource.resourceAddOrEditSaveApi(form.value)
-		ElMessage.success('保存成功')
-		loading.value = false
-	} catch (e) {
-		loading.value = false
-		console.log(e, '保存菜单失败')
-	}
-}
+const save = () =>
+	dialogForm.value.validate(async (valid, err) => {
+		if (valid) {
+			// 保存
+			loading.value = true
+			try {
+				await resource.resourceAddOrEditSaveApi(form.value)
+				ElMessage.success('保存成功')
+				loading.value = false
+			} catch (e) {
+				loading.value = false
+				console.log(e, '保存菜单失败')
+			}
+		} else {
+			console.error(err, 'err')
+		}
+	})
 
 const setData = async data => {
 	//表单注入数据
@@ -137,8 +157,13 @@ const setData = async data => {
 	try {
 		let res = await resource.resourceListApi({ id: data.id })
 		loading.value = false
-		form.value = data
-		form.value.apiList = res
+		form.value = {
+			...data,
+			apiList: res
+		}
+		// dialogForm.value?.validateField()
+		dialogForm.value?.resetFields()
+		console.error(form, 'form.value')
 	} catch (e) {
 		console.log('表单注入数据失败', e)
 		form.value.id = ''