放开目录的 路由路径，组件路径，增加规则名称字段，对接删除接口

src/api/system/menu/index.ts

@@ -1,9 +1,10 @@
-import request, { get, post, put } from '/@/utils/request';
+import request, { get, post, put, del } from '/@/utils/request';
 
 export const getMenuList = (params: object) => get('/system/menu/tree', params)
 export const getMenuDetail = (id: number) => get('/system/menu/detail', { id })
 export const addMenu = (data: object) => post('/system/menu/add', data)
 export const updateMenu = (data: object) => put('/system/menu/edit', data)
+export const delMenu = (id: number) => del('/system/menu/del', { id })
 
 export function getMenuParams() {
     return request({
@@ -19,12 +20,3 @@ export function getMenuInfo(id: number) {
         params: { id }
     })
 }
-
-// 删除菜单
-export function delMenu(menuId: number) {
-    return request({
-        url: '/system/menu/delete',
-        method: 'delete',
-        data: { ids: [menuId] }
-    })
-}

src/utils/request.ts

@@ -83,3 +83,10 @@ export function put(url: string, data?: any) {
 		data
 	})
 }
+export function del(url: string, data?: any) {
+	return service({
+		url,
+		method: "delete",
+		data
+	})
+}

src/views/system/menu/component/editMenu.vue

@@ -22,27 +22,32 @@
             </el-form-item>
           </el-col>
           <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
-            <el-form-item label="菜单名称" prop="menuName">
+            <el-form-item label="菜单名称" prop="title">
               <el-input v-model="ruleForm.title" placeholder="请填写菜单名称" clearable></el-input>
             </el-form-item>
           </el-col>
           <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+            <el-form-item label="规则名称" prop="name">
+              <el-input v-model="ruleForm.name" placeholder="请填写规则名称" clearable></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+            <el-form-item label="路由路径" prop="path">
+              <el-input v-model="ruleForm.path" placeholder="路由中的 path 值" clearable></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+            <el-form-item label="组件路径" prop="component">
+              <el-input v-model="ruleForm.component" placeholder="组件路径" clearable></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
             <el-form-item label="菜单图标">
               <IconSelector placeholder="请输入菜单图标" v-model="ruleForm.icon" type="all" />
             </el-form-item>
           </el-col>
           <template v-if="ruleForm.menuType === 1">
             <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
-              <el-form-item label="路由路径" prop="path">
-                <el-input v-model="ruleForm.path" placeholder="路由中的 path 值" clearable></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
-              <el-form-item label="组件路径" prop="component">
-                <el-input v-model="ruleForm.component" placeholder="组件路径" clearable></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
               <el-form-item label="链接地址">
                 <el-input v-model="ruleForm.linkUrl" placeholder="外链/内嵌时链接地址（http:xxx.com）" clearable :disabled="ruleForm.isLink===0">
                 </el-input>
@@ -129,9 +134,10 @@ import { ElMessage } from 'element-plus';
 
 const itemForm = {
 	id: undefined,
-	parentId: 0, // 上级菜单
+	parentId: -1, // 上级菜单
 	menuType: 0, // 菜单类型
 	title: '', // 菜单名称
+	name: '', // 规则名称
 	component: '', // 组件路径
 	isLink: 0, // 是否外链
 	weigh: 0, // 菜单排序
@@ -178,6 +184,7 @@ export default defineComponent({
 				component: [{ required: true, message: '组件地址不能为空', trigger: 'blur' }],
 				path: [{ required: true, message: '路由地址不能为空', trigger: 'blur' }],
 				title: [{ required: true, message: '菜单名称不能为空', trigger: 'blur' }],
+				name: [{ required: true, message: '菜单名称不能为空', trigger: 'blur' }],
 				menuType: [{ required: true, message: '菜单类型不能为空', trigger: 'blur' }],
 			},
 		});
@@ -226,6 +233,11 @@ export default defineComponent({
 			formWrap.validate((valid: boolean) => {
 				if (valid) {
 					state.loading = true;
+					// parentId 默认-1
+					if (!state.ruleForm.parentId) {
+						state.ruleForm.parentId = -1;
+					}
+
 					if (props.acType === 'add') {
 						//添加
 						addMenu(state.ruleForm)

src/views/system/menu/index.vue

@@ -59,7 +59,7 @@
 </template>
 
 <script lang="ts">
-import { ref, toRefs, reactive, onBeforeMount, defineComponent, getCurrentInstance, unref } from 'vue';
+import { ref, toRefs, reactive, onBeforeMount, defineComponent, getCurrentInstance } from 'vue';
 import { ElMessageBox, ElMessage } from 'element-plus';
 import EditMenu from '/@/views/system/menu/component/editMenu.vue';
 import { delMenu, getMenuList } from '/@/api/system/menu';
@@ -113,7 +113,7 @@ export default defineComponent({
 		};
 		const menuList = () => {
 			getMenuList(state.queryParams).then((res: any) => {
-				console.log({...res[0]})
+				// console.log({...res[0]})
 				state.menuTableData = res || [];
 			});
 		};