增加按钮权限配置弹窗，获取列表接口等

src/api/system/index.ts

@@ -1,6 +1,20 @@
 import { get, post, del, put } from '/@/utils/request';
 
 export default {
+  menu: {
+    getList: (params: object) => get('/system/menu/tree', params),
+    detail: (id: number) => get('/system/menu/detail', { id }),
+    add: (data: object) => post('/system/menu/add', data),
+    del: (id: number) => del('/system/menu/del', { id }),
+    edit: (data: object) => put('/system/menu/edit', data),
+    btn: {
+      getList: (params: object) => get('/system/menu/button/tree', params),
+      detail: (id: number) => get('/system/menu/button/detail', { id }),
+      add: (data: object) => post('/system/menu/button/add', data),
+      del: (id: number) => del('/system/menu/button/del', { id }),
+      edit: (data: object) => put('/system/menu/button/edit', data)
+    }
+  },
   role: {
     getList: (params: object) => get('/system/role/tree', params),
     getRole: (id: number) => get('/system/role/getInfoById', { id }),

src/api/system/menu/index.ts

@@ -1,22 +0,0 @@
-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({
-        url: '/system/menu/getParams',
-        method: 'get'
-    })
-}
-
-export function getMenuInfo(id: number) {
-    return request({
-        url: '/system/menu/get',
-        method: 'get',
-        params: { id }
-    })
-}

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

@@ -0,0 +1,33 @@
+<template>
+  <el-drawer v-model="drawer" :title="title" direction="rtl" size="700px">
+    <div class="p-3">
+      <el-button size="default" type="success" class="ml10" @click="onAddRow">
+        <el-icon>
+          <ele-FolderAdd />
+        </el-icon>
+        新增
+      </el-button>
+    </div>
+  </el-drawer>
+</template>
+
+<script lang="ts" setup>
+import { ref, defineExpose } from 'vue';
+import api from '/@/api/system';
+
+const title = ref('按钮权限');
+const drawer = ref(true);
+
+const open = async (row: any) => {
+	console.log(row);
+	title.value = '按钮权限 - ' + row.name;
+	drawer.value = true;
+	let res = await api.menu.btn.getList({ menuID: row.id, status: -1 });
+	console.log(res);
+};
+const onAddRow = (row: any) => {
+	console.log(row);
+};
+
+defineExpose({ open });
+</script>

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

@@ -129,7 +129,7 @@
 import { reactive, toRefs, defineComponent, ref, unref, nextTick } from 'vue';
 import IconSelector from '/@/components/iconSelector/index.vue';
 import { getBackEndControlRoutes } from '/@/router/backEnd';
-import { addMenu, getMenuDetail, updateMenu } from '/@/api/system/menu';
+import api from '/@/api/system';
 import { ElMessage } from 'element-plus';
 
 const itemForm = {
@@ -205,7 +205,7 @@ export default defineComponent({
 					if (props.acType === 'add') {
 						state.ruleForm.parentId = row.id;
 					} else if (props.acType === 'edit') {
-						getMenuDetail(row.id).then((data: any) => {
+						api.menu.detail(row.id).then((data: any) => {
 							state.ruleForm = data;
 						});
 					}
@@ -241,7 +241,7 @@ export default defineComponent({
 
 					if (props.acType === 'add') {
 						//添加
-						addMenu(state.ruleForm)
+						api.menu.add(state.ruleForm)
 							.then(() => {
 								ElMessage.success('菜单添加成功');
 								closeDialog(); // 关闭弹窗
@@ -253,7 +253,7 @@ export default defineComponent({
 							});
 					} else {
 						//修改
-						updateMenu(state.ruleForm)
+						api.menu.edit(state.ruleForm)
 							.then(() => {
 								ElMessage.success('菜单修改成功');
 								closeDialog(); // 关闭弹窗

src/views/system/menu/index.vue

@@ -4,7 +4,7 @@
       <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-input v-model="state.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" />
@@ -25,7 +25,7 @@
           </el-form-item>
         </el-form>
       </div>
-      <el-table :data="menuTableData" style="width: 100%" row-key="path" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
+      <el-table :data="state.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" />
@@ -35,7 +35,7 @@
         <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" width="80" align="center"></el-table-column>
-        <el-table-column label="类型" width="80"  align="center">
+        <el-table-column label="类型" width="80" align="center">
           <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>
@@ -58,93 +58,80 @@
               </el-button>
               <template #dropdown>
                 <el-dropdown-menu>
-                  <el-dropdown-item>按钮权限</el-dropdown-item>
+                  <el-dropdown-item @click.native="btnAuthOpen(scope.row)">按钮权限</el-dropdown-item>
                   <el-dropdown-item>列表权限</el-dropdown-item>
                   <el-dropdown-item>数据权限</el-dropdown-item>
                 </el-dropdown-menu>
               </template>
-              <!-- <el-dropdown-item @click.native="download(scope.row)" v-has="'btn_download'">
-                  下载代码
-                </el-dropdown-item> -->
             </el-dropdown>
           </template>
         </el-table-column>
       </el-table>
     </el-card>
-    <EditMenu ref="editMenuRef" @menuList="menuList" :menu="menuTableData" :visibleOptions="sys_show_hide" :acType="acType" />
+    <EditMenu ref="editMenuRef" @menuList="menuList" :menu="state.menuTableData" :visibleOptions="sys_show_hide" :acType="acType" />
+    <ButtonAuthorizeListDrawer ref="buttonAuthorizeList" />
   </div>
 </template>
 
-<script lang="ts">
-import { ref, toRefs, reactive, onBeforeMount, defineComponent, getCurrentInstance } from 'vue';
+<script lang="ts" setup>
+import { ref, reactive, onBeforeMount, 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';
-export default defineComponent({
-	name: 'apiV1SystemAuthMenuList',
-	components: { EditMenu },
-	setup() {
-		const editMenuRef = ref();
-		const state = reactive({
-			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 onOpenEditMenu = (row: any) => {
-			acType.value = 'edit';
-			editMenuRef.value.openDialog(row);
-		};
-		// 删除当前行
-		const onTabelRowDel = (row: any) => {
-			ElMessageBox.confirm(`此操作将永久删除菜单：“${row.title}”, 是否继续?`, '提示', {
-				confirmButtonText: '删除',
-				cancelButtonText: '取消',
-				type: 'warning',
-			})
-				.then(() => {
-					delMenu(row.id).then(() => {
-						ElMessage.success('删除成功');
-						proxy.$refs['editMenuRef'].resetMenuSession();
-						menuList();
-					});
-				})
-				.catch(() => {});
-		};
-		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,
-			menuList,
-			handleQuery,
-			...toRefs(state),
-			sys_show_hide,
-			acType,
-		};
+import api from '/@/api/system';
+import ButtonAuthorizeListDrawer from './component/btn.vue'
+const editMenuRef = ref();
+const buttonAuthorizeList = ref();
+const state = reactive({
+	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 onOpenEditMenu = (row: any) => {
+	acType.value = 'edit';
+	editMenuRef.value.openDialog(row);
+};
+// 打开按钮权限抽下
+const btnAuthOpen = (row: any) => {
+	buttonAuthorizeList.value.open(row);
+};
+// 删除当前行
+const onTabelRowDel = (row: any) => {
+	ElMessageBox.confirm(`此操作将永久删除菜单：“${row.title}”, 是否继续?`, '提示', {
+		confirmButtonText: '删除',
+		cancelButtonText: '取消',
+		type: 'warning',
+	})
+		.then(() => {
+			api.menu.del(row.id).then(() => {
+				ElMessage.success('删除成功');
+				proxy.$refs['editMenuRef'].resetMenuSession();
+				menuList();
+			});
+		})
+		.catch(() => {});
+};
+onBeforeMount(() => {
+	menuList();
 });
+const handleQuery = () => {
+	menuList();
+};
+const menuList = () => {
+	api.menu.getList(state.queryParams).then((res: any) => {
+		// console.log({...res[0]})
+		state.menuTableData = res || [];
+	});
+};
 </script>