feat: 增加在菜单中配置api接口的功能，即通过选定菜单id，来确定接口列表，方便新增页面时候的配置

src/api/system/index.ts

@@ -32,6 +32,10 @@ export default {
       edit: (data: object) => put('/system/menu/button/edit', data),
       setStatus: (id: number, menuId: number, status: number) => put('/system/menu/button/editStatus', { id, menuId, status })
     },
+    api: {
+      getList: (params: object) => get('/system/menu/api/tree', params),
+      add: (data: object) => post('/system/menu/api/add', data),
+    },
     list: {
       getList: (params: object) => get('/system/menu/column/tree', params),
       detail: (id: number) => get('/system/menu/column/detail', { id }),

src/views/personal/index.vue

@@ -14,7 +14,7 @@
 						</div>
 						<div class="personal-user-right">
 							<el-row>
-								<el-col :span="24" class="personal-title mb18">{{ currentTime }}，{{ info.userName }}，生活变的再糟糕，也不妨碍我变得更好！ </el-col>
+								<el-col :span="24" class="personal-title mb18">{{ currentTime }}，{{ info.userName }} </el-col>
 								<!-- 昵称 -->
 								<el-col :xs="24" :sm="24" class="personal-item mb6">
 									<div class="personal-item-label">姓名：</div>

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

@@ -0,0 +1,76 @@
+<template>
+	<el-drawer v-model="drawer" :title="title" direction="rtl" size="700px">
+		<div class="p-3">
+			<el-button size="default" type="success" class="mr-3" @click="onAddRow">
+				<el-icon>
+					<ele-FolderAdd />
+				</el-icon>
+				绑定接口
+			</el-button>
+		</div>
+
+		<el-table :data="tableData" style="width: 100%" max-height="calc(100vh - 140px)" row-key="id" border :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
+			<el-table-column type="index" label="序号" width="60" align="center" />
+			<el-table-column prop="method" label="方法" width="70" align="center"></el-table-column>
+			<el-table-column prop="name" label="名称" show-overflow-tooltip></el-table-column>
+			<el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column>
+			<el-table-column label="操作" width="100" align="center">
+				<template #default="scope">
+					<el-button size="small" text type="danger" @click="onDel(scope.row)">删除</el-button>
+				</template>
+			</el-table-column>
+		</el-table>
+	</el-drawer>
+	<!-- <listForm ref="listFormRef" :parent-data="tableData" @getList="getList"></listForm> -->
+	<listForm ref="listFormRef" @getList="getList"></listForm>
+	<BindVue ref="bindRef" @getList="getList"></BindVue>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import listForm from './list-form.vue';
+import { MenuListRow } from '/@/api/model/system/menu';
+import api from '/@/api/system';
+import { ElMessageBox, ElMessage } from 'element-plus';
+import BindVue from './bind.vue'
+
+const title = ref('接口权限');
+const drawer = ref(false);
+const tableData = ref<MenuListRow[]>([]);
+const menuRow = ref();
+const bindRef = ref();
+const listFormRef = ref();
+const getList = async () => {
+	tableData.value = [];
+	let res = await api.menu.api.getList({ menuId: menuRow.value.id as number, status: -1 });
+	tableData.value = res || [];
+};
+
+const open = async (row: any) => {
+	title.value = '接口权限 - ' + row.title;
+	drawer.value = true;
+	menuRow.value = row;
+	getList();
+};
+
+const onAddRow = () => {
+	bindRef.value.open(tableData.value.map(item => item.id), menuRow.value.id)
+};
+
+const onDel = (row: MenuListRow) => {
+	ElMessageBox.confirm(`此操作将删除接口：“${row.name}”，是否继续?`, '提示', {
+		confirmButtonText: '确认',
+		cancelButtonText: '取消',
+		type: 'warning',
+	}).then(async () => {
+		await api.menu.api.add({
+			menuId: menuRow.value.id,
+			apiIds: tableData.value.map(item => item.id).filter(id => id !== row.id)
+		});
+		ElMessage.success('删除成功');
+		getList();
+	});
+};
+
+defineExpose({ open });
+</script>

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

@@ -0,0 +1,71 @@
+<template>
+	<el-dialog class="api-edit" v-model="showDialog" title="批量绑定接口" width="600px" :close-on-click-modal="false" :close-on-press-escape="false">
+		<el-form ref="formRef" :model="formData" :rules="ruleForm" label-width="80px" @keyup.enter="onSubmit">
+			<el-form-item label="选择接口" prop="apiIds">
+				<el-cascader :options="menuData" :props="{ checkStrictly: false, multiple: true, emitPath: false, value: 'id', label: 'name' }" placeholder="请选择关联页面" filterable clearable class="w100" v-model="formData.apiIds"></el-cascader>
+			</el-form-item>
+		</el-form>
+		<template #footer>
+			<div class="dialog-footer">
+				<el-button @click="showDialog = false">取消</el-button>
+				<el-button type="primary" @click="onSubmit">确定</el-button>
+			</div>
+		</template>
+	</el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive } from 'vue';
+import api from '/@/api/system';
+import { ApiRow } from '/@/api/model/system/menu';
+import { ElMessage } from 'element-plus';
+
+const emit = defineEmits(['getList']);
+
+const showDialog = ref(false);
+const menuId = ref();
+const formRef = ref();
+const menuData = ref<any[]>([]);
+
+const baseForm: any = {
+	apiIds: [],
+};
+
+const formData = reactive<any>({
+	...baseForm,
+});
+
+const ruleForm = {};
+
+const onSubmit = async () => {
+	await formRef.value.validate();
+
+	await api.menu.api.add({
+		menuId: menuId.value,
+		apiIds: formData.apiIds
+	});
+
+	ElMessage.success('操作成功');
+	resetForm();
+	showDialog.value = false;
+	emit('getList');
+};
+
+const resetForm = async () => {
+	Object.assign(formData, { apiIds: [] });
+	formRef.value && formRef.value.resetFields();
+};
+
+const open = async (idsArr: any, id: number) => {
+	menuId.value = id
+	resetForm();
+	// 加载菜单列表
+	api.api.getList({ types: -1, status: -1 }).then((res: any) => {
+		menuData.value = res.Info || [];
+	});
+	formData.apiIds = idsArr;
+	showDialog.value = true;
+};
+
+defineExpose({ open });
+</script>

src/views/system/menu/index.vue

@@ -2,7 +2,7 @@
   <div class="system-user-container">
     <el-card shadow="hover">
       <div class="system-menu-search">
-        <el-form :model="state.queryParams" :inline="true" ref="queryRef">
+        <el-form :model="state.queryParams" :inline="true" ref="queryRef" @keyup.enter="handleQuery()">
           <el-form-item label="菜单名称" prop="title">
             <el-input v-model="state.queryParams.title" placeholder="请输入菜单名称" size="default" clearable class="w-50" />
           </el-form-item>
@@ -68,6 +68,7 @@
                 <el-dropdown-menu>
                   <el-dropdown-item @click.native="authOpen(scope.row, 'buttonAuthorizeList')" v-auth="'btn'">按钮权限</el-dropdown-item>
                   <el-dropdown-item @click.native="authOpen(scope.row, 'listAuthorizeList')" v-auth="'list'">列表权限</el-dropdown-item>
+                  <el-dropdown-item @click.native="authOpen(scope.row, 'apiAuthorizeList')" v-auth="'list'">接口权限</el-dropdown-item>
                 </el-dropdown-menu>
               </template>
             </el-dropdown>
@@ -89,10 +90,12 @@ import EditMenu from '/@/views/system/menu/component/editMenu.vue';
 import api from '/@/api/system';
 import ButtonAuthorizeListDrawer from './component/btn.vue';
 import ListAuthorizeListDrawer from './component/list.vue';
+import ApiAuthorizeListDrawer from './component/api.vue';
 const editMenuRef = ref();
 const queryRef = ref();
 const buttonAuthorizeList = ref();
 const listAuthorizeList = ref();
+const apiAuthorizeList = ref();
 const state = reactive({
   loading: false,
   queryParams: {
@@ -124,6 +127,9 @@ const authOpen = (row: any, key: string) => {
   if (key === 'listAuthorizeList') {
     return listAuthorizeList.value.open(row);
   }
+  if (key === 'apiAuthorizeList') {
+    return apiAuthorizeList.value.open(row);
+  }
 };
 
 // 删除当前行