修复菜单列表的数据显示，编辑回显，去掉多余字段，优化显示顺序等

.env.development

@@ -2,5 +2,4 @@
 ENV = 'development'
 
 # 本地环境接口地址
-# VITE_API_URL = 'http://101.200.198.249:8899/api/v1'
 VITE_API_URL = 'http://101.200.198.249:8899/api/v1'

src/api/system/menu/index.ts

@@ -1,19 +1,7 @@
-import request from '/@/utils/request';
+import request, { get } from '/@/utils/request';
 
-export function getMenuList(query:Object) {
-    return request({
-        url: '/system/menu/tree',
-        method: 'get',
-        params:query
-    })
-}
-
-export function getUserMenus() {
-    return request({
-        url: '/system/user/getUserMenus',
-        method: 'get'
-    })
-}
+export const getMenuList = (params: Object) => get('/system/menu/tree', params)
+export const getMenuDetail = (id: number) => get('/system/menu/detail', { id })
 
 export function getMenuParams() {
     return request({
@@ -22,36 +10,36 @@ export function getMenuParams() {
     })
 }
 
-export function addMenu(data:Object) {
+export function addMenu(data: Object) {
     return request({
         url: '/system/menu/add',
         method: 'post',
-        data:data
+        data: data
     })
 }
 
-export function getMenuInfo(id:number) {
+export function getMenuInfo(id: number) {
     return request({
         url: '/system/menu/get',
         method: 'get',
-        params:{id}
+        params: { id }
     })
 }
 
-export function updateMenu(data:Object) {
+export function updateMenu(data: Object) {
     return request({
         url: '/system/menu/update',
         method: 'put',
-        data:data
+        data: data
     })
 }
 
 
 // 删除菜单
-export function delMenu(menuId:number) {
+export function delMenu(menuId: number) {
     return request({
         url: '/system/menu/delete',
         method: 'delete',
-        data:{ids:[menuId]}
+        data: { ids: [menuId] }
     })
 }

src/theme/element.scss

@@ -17,6 +17,10 @@
 	margin-right: 5px;
 }
 
+.el-button.el-button--text.el-button--small{
+	padding: 0;
+}
+
 /* Input 输入框、InputNumber 计数器
 ------------------------------- */
 // 菜单搜索

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

@@ -1,254 +1,210 @@
 <template>
-	<div class="system-edit-menu-container">
-		<el-dialog :title="(acType==='add'?'新增':'修改')+'菜单'" v-model="isShowDialog"
-               width="769px" :close-on-click-modal="false">
-			<el-form :model="ruleForm" :rules="rules"
-               ref="ruleFormRef" size="default" label-width="80px">
-				<el-row :gutter="35">
-					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
-						<el-form-item label="上级菜单">
-							<el-cascader
-								:options="menuData"
-								:props="{ label: 'title',value: 'id',checkStrictly: true,emitPath: false }"
-								placeholder="请选择上级菜单"
-								clearable
-								class="w100"
-								v-model="ruleForm.pid"
-							>
-								<template #default="{ node, data }">
-									<span>{{ data.title }}</span>
-									<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
-								</template>
-							</el-cascader>
-						</el-form-item>
-					</el-col>
-					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
-						<el-form-item label="菜单类型" prop="menuType">
-							<el-radio-group v-model="ruleForm.menuType">
-                <el-radio label="0">目录</el-radio>
-                <el-radio label="1">菜单</el-radio>
-                <el-radio label="2">按钮</el-radio>
-							</el-radio-group>
-						</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-input v-model="ruleForm.menuName" placeholder="请填写菜单名称" clearable></el-input>
-						</el-form-item>
-					</el-col>
+  <div class="system-edit-menu-container">
+    <el-dialog :title="(acType==='add'?'新增':'修改')+'菜单'" v-model="isShowDialog" width="769px" :close-on-click-modal="false">
+      <el-form :model="ruleForm" :rules="rules" ref="ruleFormRef" size="default" label-width="80px">
+        <el-row :gutter="35">
+          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
+            <el-form-item label="上级菜单">
+              <el-cascader :options="menu" :props="{ label: 'title',value: 'id',checkStrictly: true,emitPath: false }" placeholder="请选择上级菜单" clearable class="w100" v-model="ruleForm.parentId">
+                <template #default="{ node, data }">
+                  <span>{{ data.title }}</span>
+                  <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
+                </template>
+              </el-cascader>
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
+            <el-form-item label="菜单类型" prop="menuType">
+              <el-radio-group v-model="ruleForm.menuType">
+                <el-radio :label="0">目录</el-radio>
+                <el-radio :label="1">菜单</el-radio>
+              </el-radio-group>
+            </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="后端 aip 地址" clearable></el-input>
+            <el-form-item label="菜单名称" prop="menuName">
+              <el-input v-model="ruleForm.title" placeholder="请填写菜单名称" clearable></el-input>
             </el-form-item>
           </el-col>
-					<template v-if="ruleForm.menuType === '0'||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="重定向">
-								<el-input v-model="ruleForm.redirect" 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>
-						<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>
-							</el-form-item>
-						</el-col>
-					</template>
           <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>
+              </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.redirect" placeholder="请输入路由重定向" clearable></el-input>
+              </el-form-item>
+            </el-col>
+          </template>
+          <!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
             <el-form-item label="权限标识">
               <el-select v-model="ruleForm.roles" multiple placeholder="选择角色" clearable class="w100">
                 <el-option v-for="role in roles" :key="'role_'+role.id" :label="role.name" :value="role.id"></el-option>
               </el-select>
             </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-number v-model="ruleForm.weigh" controls-position="right" placeholder="请输入排序" class="w100" />
+            </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-number v-model="ruleForm.menuSort" controls-position="right" placeholder="请输入排序" class="w100" />
-						</el-form-item>
-					</el-col>
-					<template v-if="ruleForm.menuType === '0'||ruleForm.menuType === '1'">
-						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
-							<el-form-item label="是否隐藏">
-								<el-radio-group v-model="ruleForm.isHide">
-                  <el-radio
-                      v-for="dict in visibleOptions"
-                      :key="dict.value"
-                      :label="dict.value"
-                  >{{ dict.label }}</el-radio>
-								</el-radio-group>
-							</el-form-item>
-						</el-col>
-						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
-							<el-form-item label="页面缓存">
-								<el-radio-group v-model="ruleForm.isKeepAlive">
-									<el-radio :label="1">缓存</el-radio>
-									<el-radio :label="0">不缓存</el-radio>
-								</el-radio-group>
-							</el-form-item>
-						</el-col>
-						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
-							<el-form-item label="是否固定">
-								<el-radio-group v-model="ruleForm.isAffix">
-									<el-radio :label="1">固定</el-radio>
-									<el-radio :label="0">不固定</el-radio>
-								</el-radio-group>
-							</el-form-item>
-						</el-col>
-						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
-							<el-form-item label="是否外链">
-								<el-radio-group v-model="ruleForm.isLink" :disabled="ruleForm.isIframe===1">
-									<el-radio :label="1">是</el-radio>
-									<el-radio :label="0">否</el-radio>
-								</el-radio-group>
-							</el-form-item>
-						</el-col>
-						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
-							<el-form-item label="是否内嵌">
-								<el-radio-group v-model="ruleForm.isIframe" @change="onSelectIframeChange">
-									<el-radio :label="1">是</el-radio>
-									<el-radio :label="0">否</el-radio>
-								</el-radio-group>
-							</el-form-item>
-						</el-col>
-					</template>
-				</el-row>
-			</el-form>
-			<template #footer>
-				<span class="dialog-footer">
-					<el-button @click="onCancel" size="default">取 消</el-button>
-					<el-button type="primary" @click="onSubmit" size="default" :loading="loading">{{acType==='add'?'新 增':'修 改'}}</el-button>
-				</span>
-			</template>
-		</el-dialog>
-	</div>
+          <template v-if="ruleForm.menuType === 1">
+            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+              <el-form-item label="是否隐藏">
+                <el-radio-group v-model="ruleForm.isHide">
+                  <el-radio :label="0">隐藏</el-radio>
+                  <el-radio :label="1">显示</el-radio>
+                </el-radio-group>
+              </el-form-item>
+            </el-col>
+            <!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+              <el-form-item label="页面缓存">
+                <el-radio-group v-model="ruleForm.isKeepAlive">
+                  <el-radio :label="1">缓存</el-radio>
+                  <el-radio :label="0">不缓存</el-radio>
+                </el-radio-group>
+              </el-form-item>
+            </el-col> -->
+            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+              <el-form-item label="是否固定">
+                <el-radio-group v-model="ruleForm.isAffix">
+                  <el-radio :label="1">固定</el-radio>
+                  <el-radio :label="0">不固定</el-radio>
+                </el-radio-group>
+              </el-form-item>
+            </el-col>
+            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+              <el-form-item label="是否外链">
+                <el-radio-group v-model="ruleForm.isLink" :disabled="ruleForm.isIframe===1">
+                  <el-radio :label="1">是</el-radio>
+                  <el-radio :label="0">否</el-radio>
+                </el-radio-group>
+              </el-form-item>
+            </el-col>
+            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+              <el-form-item label="是否内嵌">
+                <el-radio-group v-model="ruleForm.isIframe" @change="onSelectIframeChange">
+                  <el-radio :label="1">是</el-radio>
+                  <el-radio :label="0">否</el-radio>
+                </el-radio-group>
+              </el-form-item>
+            </el-col>
+          </template>
+        </el-row>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="onCancel" size="default">取 消</el-button>
+          <el-button type="primary" @click="onSubmit" size="default" :loading="loading">{{acType==='add'?'新 增':'修 改'}}</el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
 </template>
 
 <script lang="ts">
-import { reactive, toRefs, defineComponent,ref,unref,getCurrentInstance,nextTick } from 'vue';
+import { reactive, toRefs, defineComponent, ref, unref, nextTick } from 'vue';
 import IconSelector from '/@/components/iconSelector/index.vue';
-import { getBackEndControlRoutes } from "/@/router/backEnd";
-import {getMenuParams, addMenu, getMenuInfo, updateMenu} from "/@/api/system/menu";
-import {ElMessage} from "element-plus"
+import { getBackEndControlRoutes } from '/@/router/backEnd';
+import { addMenu, getMenuDetail, updateMenu } from '/@/api/system/menu';
+import { ElMessage } from 'element-plus';
 
+const itemForm = {
+	id: undefined,
+	parentId: 0, // 上级菜单
+	menuType: 0, // 菜单类型
+	title: '', // 菜单名称
+	component: '', // 组件路径
+	isLink: 0, // 是否外链
+	weigh: 0, // 菜单排序
+	path: '', // 路由路径
+	redirect: '', // 路由重定向，有子集 children 时
+	icon: '', // 菜单图标
+	roles: [], // 权限标识，取角色管理
+	isHide: 0, // 是否隐藏
+	isAffix: 0, // 是否固定
+	linkUrl: '', // 外链/内嵌时链接地址（http:xxx.com），开启外链条件，`1、isLink:true 2、链接地址不为空`
+	isIframe: 0, // 是否内嵌，开启条件，`1、isIframe:true 2、链接地址不为空`
+};
 
 export default defineComponent({
 	name: 'systemEditMenu',
 	components: { IconSelector },
-  props:{
-    visibleOptions:{
-      type:Array,
-      default:()=>[],
-    },
-    acType:{
-      type:String,
-      default:()=>'add'
-    }
-  },
-	setup(props,{emit}) {
-    const ruleFormRef = ref<HTMLElement | null>(null);
-    const {proxy} = getCurrentInstance() as any;
+	props: {
+		visibleOptions: {
+			type: Array,
+			default: () => [],
+		},
+		menu: {
+			type: Array,
+			default: () => [],
+		},
+		acType: {
+			type: String,
+			default: () => 'add',
+		},
+	},
+	setup(props, { emit }) {
+		const ruleFormRef = ref<HTMLElement | null>(null);
 		const state = reactive({
-      loading: false,
+			loading: false,
 			isShowDialog: false,
-      roles:[],
+			roles: [],
 			// 参数请参考 `/src/router/route.ts` 中的 `dynamicRoutes` 路由菜单格式
 			ruleForm: {
-        id:undefined,
-				pid: 0, // 上级菜单
-				menuType: '0', // 菜单类型
-        menuName:'', // 菜单名称
-				name: '', // 接口规则
-				component: '', // 组件路径
-				isLink: 0, // 是否外链
-				menuSort: 0, // 菜单排序
-				path: '', // 路由路径
-				redirect: '', // 路由重定向，有子集 children 时
-        icon: '', // 菜单图标
-        roles: [], // 权限标识，取角色管理
-        isHide: '0', // 是否隐藏
-        isKeepAlive: 1, // 是否缓存
-        isAffix: 0, // 是否固定
-        linkUrl: '', // 外链/内嵌时链接地址（http:xxx.com），开启外链条件，`1、isLink:true 2、链接地址不为空`
-        isIframe: 0, // 是否内嵌，开启条件，`1、isIframe:true 2、链接地址不为空`
+				...itemForm,
+			},
+			// 表单校验
+			rules: {
+				parentId: [{ required: true, message: '父菜单不能为空', trigger: 'blur' }],
+				component: [{ required: true, message: '组件地址不能为空', trigger: 'blur' }],
+				path: [{ required: true, message: '路由地址不能为空', trigger: 'blur' }],
+				title: [{ required: true, message: '菜单名称不能为空', trigger: 'blur' }],
+				menuType: [{ required: true, message: '菜单类型不能为空', trigger: 'blur' }],
 			},
-      // 表单校验
-      rules: {
-        parentId: [
-          {required: true, message: "父菜单不能为空", trigger: "blur"},
-        ],
-        name:[
-          {required: true, message: "接口规则不能为空", trigger: "blur"},
-        ],
-        path:[
-          {required: true, message: "路由地址不能为空", trigger: "blur"},
-        ],
-        menuName: [
-          {required: true, message: "菜单名称不能为空", trigger: "blur"},
-        ],
-        menuType: [
-          {required: true, message: "菜单类型不能为空", trigger: "blur"},
-        ],
-      },
-			menuData: [], // 上级菜单数据
 		});
 
 		// 打开弹窗
 		const openDialog = (row: any) => {
-      initForm();
-      nextTick(()=>{
-        //获取角色信息
-        getMenuParams().then((res:any)=>{
-          state.roles = res.data.roles;
-          const menu = { id: 0, title: '主类目', children: [] };
-          menu.children = proxy.handleTree(res.data.menus, "id","pid");
-          state.menuData=new Array(menu) as any;
-        });
-        if(row) {
-          if (props.acType === 'add') {
-            state.ruleForm.pid = row.id
-          } else if (props.acType === 'edit') {
-            getMenuInfo(row.id).then(res => {
-              const data = res.data.rule;
-              state.ruleForm = {
-                id: data.id,
-                pid: data.pid, // 上级菜单
-                menuType: '' + data.menuType, // 菜单类型
-                menuName: data.title, // 菜单名称
-                name: data.name, // 接口规则
-                component: data.component, // 组件路径
-                isLink: data.isLink, // 是否外链
-                menuSort: data.weigh, // 菜单排序
-                path: data.path, // 路由路径
-                redirect: data.redirect, // 路由重定向，有子集 children 时
-                icon: data.icon, // 菜单图标
-                roles: res.data.roleIds, // 权限标识，取角色管理
-                isHide: '' + data.isHide, // 是否隐藏
-                isKeepAlive: data.isCached, // 是否缓存
-                isAffix: data.isAffix, // 是否固定
-                linkUrl: data.linkUrl, // 外链/内嵌时链接地址（http:xxx.com），开启外链条件，`1、isLink:true 2、链接地址不为空`
-                isIframe: data.isIframe, // 是否内嵌，开启条件，`1、isIframe:true 2、链接地址不为空`
-              }
-            })
-          }
-        }
-        state.isShowDialog = true;
-        state.loading = false;
-      })
+			initForm();
+			nextTick(() => {
+				//获取角色信息
+				// getMenuParams().then((res: any) => {
+				// 	state.roles = res.data.roles;
+				// 	const menu = { id: 0, title: '主类目', children: [] };
+				// 	menu.children = proxy.handleTree(res.data.menus, 'id', 'parentId');
+				// 	state.menuData = new Array(menu) as any;
+				// });
+				if (row) {
+					if (props.acType === 'add') {
+						state.ruleForm.parentId = row.id;
+					} else if (props.acType === 'edit') {
+						getMenuDetail(row.id).then((data: any) => {
+							state.ruleForm = data;
+						});
+					}
+				}
+				state.isShowDialog = true;
+				state.loading = false;
+			});
 		};
 		// 关闭弹窗
 		const closeDialog = () => {
@@ -256,7 +212,7 @@ export default defineComponent({
 		};
 		// 是否内嵌下拉改变
 		const onSelectIframeChange = () => {
-			if (state.ruleForm.isIframe===1) state.ruleForm.isLink = 1;
+			if (state.ruleForm.isIframe === 1) state.ruleForm.isLink = 1;
 			else state.ruleForm.isLink = 0;
 		};
 		// 取消
@@ -265,68 +221,56 @@ export default defineComponent({
 		};
 		// 新增
 		const onSubmit = () => {
-      const formWrap = unref(ruleFormRef) as any;
-      if (!formWrap) return;
-      formWrap.validate((valid: boolean) => {
-        if (valid) {
-          state.loading = true;
-          if(props.acType==='add'){
-            //添加
-            addMenu(state.ruleForm).then(()=>{
-              ElMessage.success('菜单添加成功');
-              closeDialog(); // 关闭弹窗
-              resetMenuSession()
-              emit('menuList')
-            }).finally(()=>{
-              state.loading = false;
-            })
-          }else{
-            //修改
-            updateMenu(state.ruleForm).then(()=>{
-              ElMessage.success('菜单修改成功');
-              closeDialog(); // 关闭弹窗
-              resetMenuSession()
-              emit('menuList')
-            }).finally(()=>{
-              state.loading = false;
-            })
-          }
-        }
-      })
+			const formWrap = unref(ruleFormRef) as any;
+			if (!formWrap) return;
+			formWrap.validate((valid: boolean) => {
+				if (valid) {
+					state.loading = true;
+					if (props.acType === 'add') {
+						//添加
+						addMenu(state.ruleForm)
+							.then(() => {
+								ElMessage.success('菜单添加成功');
+								closeDialog(); // 关闭弹窗
+								resetMenuSession();
+								emit('menuList');
+							})
+							.finally(() => {
+								state.loading = false;
+							});
+					} else {
+						//修改
+						updateMenu(state.ruleForm)
+							.then(() => {
+								ElMessage.success('菜单修改成功');
+								closeDialog(); // 关闭弹窗
+								resetMenuSession();
+								emit('menuList');
+							})
+							.finally(() => {
+								state.loading = false;
+							});
+					}
+				}
+			});
+		};
+		// 重置菜单session
+		const resetMenuSession = () => {
+			getBackEndControlRoutes();
+		};
+		const initForm = () => {
+			state.ruleForm = {
+				...itemForm,
+			};
 		};
-    // 重置菜单session
-    const resetMenuSession = () => {
-      getBackEndControlRoutes();
-    };
-    const initForm=()=>{
-      state.ruleForm =  {
-        id:undefined,
-        pid: 0, // 上级菜单
-        menuType: '0', // 菜单类型
-        menuName:'', // 菜单名称
-        name: '', // 接口规则
-        component: '', // 组件路径
-        isLink: 0, // 是否外链
-        menuSort: 0, // 菜单排序
-        path: '', // 路由路径
-        redirect: '', // 路由重定向，有子集 children 时
-        icon: '', // 菜单图标
-        roles: [], // 权限标识，取角色管理
-        isHide: '0', // 是否隐藏
-        isKeepAlive: 1, // 是否缓存
-        isAffix: 0, // 是否固定
-        linkUrl: '', // 外链/内嵌时链接地址（http:xxx.com），开启外链条件，`1、isLink:true 2、链接地址不为空`
-        isIframe: 0, // 是否内嵌，开启条件，`1、isIframe:true 2、链接地址不为空`
-      }
-    };
 		return {
-      ruleFormRef,
+			ruleFormRef,
 			openDialog,
 			closeDialog,
 			onSelectIframeChange,
 			onCancel,
 			onSubmit,
-      resetMenuSession,
+			resetMenuSession,
 			...toRefs(state),
 		};
 	},

src/views/system/menu/index.vue

@@ -1,26 +1,14 @@
 <template>
-	<div class="system-menu-container">
-		<el-card shadow="hover">
-			<div class="system-menu-search mb15">
+  <div class="system-menu-container">
+    <el-card shadow="hover">
+      <div class="system-menu-search mb15">
         <el-form :inline="true">
           <el-form-item label="菜单名称">
-            <el-input
-                v-model="queryParams.title"
-                placeholder="请输入菜单名称"
-                clearable
-                class="w-50 m-2"
-                size="default"
-            />
-          </el-form-item>
-          <el-form-item label="组件路径">
-            <el-input
-                v-model="queryParams.component"
-                placeholder="请输入组件路径"
-                clearable
-                size="default"
-                class="w-50 m-2"
-            />
+            <el-input v-model="queryParams.title" placeholder="请输入菜单名称" clearable class="w-50 m-2" size="default" />
           </el-form-item>
+          <!-- <el-form-item label="组件路径">
+            <el-input v-model="queryParams.component" placeholder="请输入组件路径" clearable size="default" class="w-50 m-2" />
+          </el-form-item> -->
           <el-form-item>
             <el-button size="default" type="primary" class="ml10" @click="handleQuery">
               <el-icon>
@@ -28,7 +16,7 @@
               </el-icon>
               查询
             </el-button>
-            <el-button size="default" type="success" class="ml10" @click="onOpenAddMenu(null)" v-auth="'api/v1/system/menu/add'">
+            <el-button size="default" type="success" class="ml10" @click="onOpenAddMenu(null)">
               <el-icon>
                 <ele-FolderAdd />
               </el-icon>
@@ -36,78 +24,69 @@
             </el-button>
           </el-form-item>
         </el-form>
-			</div>
-			<el-table :data="menuTableData" style="width: 100%" row-key="path" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
-				<el-table-column label="菜单名称" show-overflow-tooltip>
-					<template #default="scope">
-						<SvgIcon :name="scope.row.icon" />
-						<span class="ml10">{{ scope.row.title }}</span>
-					</template>
-				</el-table-column>
-				<el-table-column prop="path" label="路由路径" show-overflow-tooltip></el-table-column>
-				<el-table-column label="组件路径" show-overflow-tooltip>
-					<template #default="scope">
-						<span>{{ scope.row.component }}</span>
-					</template>
-				</el-table-column>
-				<el-table-column label="api接口" show-overflow-tooltip>
-					<template #default="scope">
-						<span>{{ scope.row.name }}</span>
-					</template>
-				</el-table-column>
-				<el-table-column label="排序" show-overflow-tooltip width="80">
-					<template #default="scope">
-						{{ scope.row.weigh }}
-					</template>
-				</el-table-column>
-				<el-table-column label="类型" show-overflow-tooltip width="80">
-					<template #default="scope">
-						<el-tag :type="scope.row.menuType===0?'danger':(scope.row.menuType===1?'success':'warning')"
-                    size="small">{{scope.row.menuType===0?'目录':(scope.row.menuType===1?'菜单':'按钮') }}</el-tag>
-					</template>
-				</el-table-column>
-        <el-table-column prop="isHide" label="显示状态" :formatter="formatIsHide" width="120"></el-table-column>
-				<el-table-column label="操作" show-overflow-tooltip width="140">
-					<template #default="scope">
-						<el-button v-if="scope.row.menuType!==2" size="small" type="text" @click="onOpenAddMenu(scope.row)" v-auth="'api/v1/system/menu/add'">新增</el-button>
-						<el-button size="small" type="text" @click="onOpenEditMenu(scope.row)" v-auth="'api/v1/system/menu/update'">修改</el-button>
-						<el-button size="small" type="text" @click="onTabelRowDel(scope.row)" v-auth="'api/v1/system/menu/delete'">删除</el-button>
-					</template>
-				</el-table-column>
-			</el-table>
-		</el-card>
-		<EditMenu ref="editMenuRef" @menuList="menuList" :visibleOptions="sys_show_hide" :acType="acType"/>
-	</div>
+      </div>
+      <el-table :data="menuTableData" style="width: 100%" row-key="path" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
+        <el-table-column label="菜单名称" show-overflow-tooltip>
+          <template #default="scope">
+            <SvgIcon :name="scope.row.icon" />
+            <span class="ml10">{{ scope.row.title }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="path" label="路由路径" show-overflow-tooltip></el-table-column>
+        <el-table-column label="组件路径" prop="component" show-overflow-tooltip></el-table-column>
+        <el-table-column label="排序" prop="weigh" show-overflow-tooltip width="80"></el-table-column>
+        <el-table-column label="类型" show-overflow-tooltip width="80">
+          <template #default="scope">
+            <el-tag :type="scope.row.menuType===0?'danger':(scope.row.menuType===1?'success':'warning')" size="small">{{scope.row.menuType===0?'目录':(scope.row.menuType===1?'菜单':'按钮') }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="isHide" label="显示状态" align="center" width="120">
+          <template #default="{row}">
+					{{row.isHide?'隐藏':'显示'}}
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="140" align="center" fixed="right">
+          <template #default="scope">
+            <el-button v-if="!scope.row.menuType" size="small" type="text" @click="onOpenAddMenu(scope.row)">新增</el-button>
+            <el-button size="small" type="text" @click="onOpenEditMenu(scope.row)">修改</el-button>
+            <el-button size="small" type="text" @click="onTabelRowDel(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+    <EditMenu ref="editMenuRef" @menuList="menuList" :menu="menuTableData" :visibleOptions="sys_show_hide" :acType="acType" />
+  </div>
 </template>
 
 <script lang="ts">
-import {ref, toRefs, reactive, onBeforeMount, defineComponent, getCurrentInstance, unref} from 'vue';
+import { ref, toRefs, reactive, onBeforeMount, defineComponent, getCurrentInstance, unref } from 'vue';
 import { ElMessageBox, ElMessage } from 'element-plus';
 import EditMenu from '/@/views/system/menu/component/editMenu.vue';
-import {delMenu, getMenuList} from "/@/api/system/menu";
+import { delMenu, getMenuList } from '/@/api/system/menu';
 export default defineComponent({
 	name: 'apiV1SystemAuthMenuList',
 	components: { EditMenu },
 	setup() {
 		const editMenuRef = ref();
 		const state = reactive({
-      queryParams:{
-        title:"",
-        component:""
-      },
-      menuTableData:[],
-    });
-    const {proxy} = getCurrentInstance() as any;
-    const {sys_show_hide} = proxy.useDict('sys_show_hide')
-    const acType = ref('add')
+			queryParams: {
+				title: '',
+				component: '',
+				status: -1,
+			},
+			menuTableData: [],
+		});
+		const { proxy } = getCurrentInstance() as any;
+		const { sys_show_hide } = proxy.useDict('sys_show_hide');
+		const acType = ref('add');
 		// 打开新增菜单弹窗
-		const onOpenAddMenu = (row:any) => {
-      acType.value = 'add'
-      editMenuRef.value.openDialog(row);
+		const onOpenAddMenu = (row: any) => {
+			acType.value = 'add';
+			editMenuRef.value.openDialog(row);
 		};
 		// 打开编辑菜单弹窗
 		const onOpenEditMenu = (row: any) => {
-      acType.value='edit'
+			acType.value = 'edit';
 			editMenuRef.value.openDialog(row);
 		};
 		// 删除当前行
@@ -118,39 +97,36 @@ export default defineComponent({
 				type: 'warning',
 			})
 				.then(() => {
-          delMenu(row.id).then(()=>{
-            ElMessage.success('删除成功');
-            proxy.$refs['editMenuRef'].resetMenuSession()
-            menuList();
-          })
+					delMenu(row.id).then(() => {
+						ElMessage.success('删除成功');
+						proxy.$refs['editMenuRef'].resetMenuSession();
+						menuList();
+					});
 				})
 				.catch(() => {});
 		};
-    const formatIsHide = (row:any)=>{
-      return proxy.selectDictLabel(unref(sys_show_hide), ''+row.isHide);
-    };
-    onBeforeMount(()=>{
-      menuList()
-    });
-    const handleQuery=() => {
-      menuList();
-    };
-    const menuList = ()=>{
-      getMenuList(state.queryParams).then(res=>{
-        state.menuTableData = proxy.handleTree(res.data.rules??[], "id","pid");
-      })
-    };
+		onBeforeMount(() => {
+			menuList();
+		});
+		const handleQuery = () => {
+			menuList();
+		};
+		const menuList = () => {
+			getMenuList(state.queryParams).then((res: any) => {
+				console.log({...res[0]})
+				state.menuTableData = res || [];
+			});
+		};
 		return {
 			editMenuRef,
 			onOpenAddMenu,
 			onOpenEditMenu,
 			onTabelRowDel,
-      formatIsHide,
-      menuList,
-      handleQuery,
+			menuList,
+			handleQuery,
 			...toRefs(state),
-      sys_show_hide,
-      acType
+			sys_show_hide,
+			acType,
 		};
 	},
 });