完善按钮权限的启用禁用，增加列表权限

src/api/model/system/menu.ts

@@ -1,9 +1,19 @@
 export interface MenuBtnRow {
   id?: number; // ID
   parentId: number; // 父ID
-  menuId: number | undefined; // 菜单ID
+  menuId?: number | undefined; // 菜单ID
   name: string;// 名称
   types: string | 'add' | 'edit' | 'del'; // 自定义 add添加 edit编辑 del 删除
   description?: string; // 描述
   status: 0 | 1; // 0 停用 1启用
+}
+
+export interface MenuListRow {
+  id?: number; // ID
+  parentId: number; // 父ID
+  menuId?: number | undefined; // 菜单ID
+  name: string;// 名称
+  code: string; // 列表 key
+  description?: string; // 描述
+  status: 0 | 1; // 0 停用 1启用
 }

src/api/system/index.ts

@@ -12,7 +12,16 @@ export default {
       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)
+      edit: (data: object) => put('/system/menu/button/edit', data),
+      setStatus: (id: number, menuId: number, status: number) => put('/system/menu/button/editStatus', { id, menuId, status })
+    },
+    list: {
+      getList: (params: object) => get('/system/menu/column/tree', params),
+      detail: (id: number) => get('/system/menu/column/detail', { id }),
+      add: (data: object) => post('/system/menu/column/add', data),
+      del: (id: number) => del('/system/menu/column/del', { id }),
+      edit: (data: object) => put('/system/menu/column/edit', data),
+      setStatus: (id: number, menuId: number, status: number) => put('/system/menu/column/editStatus', { id, menuId, status })
     }
   },
   role: {

src/views/device/category/index.vue

@@ -4,7 +4,7 @@
       <div class="system-dept-search mb15">
         <el-form :inline="true">
           <el-form-item label="分类名称">
-            <el-input size="default" v-model="tableData.param.name" placeholder="请输入分类名称" class="w-50 m-2" clearable />
+            <el-input size="default" v-model="tableData.param.name" placeholder="请输入分类名称" class="w-50" clearable />
           </el-form-item>
          
           <el-form-item>

src/views/system/dept/index.vue

@@ -4,10 +4,10 @@
       <div class="system-dept-search mb15">
         <el-form :inline="true">
           <el-form-item label="部门名称">
-            <el-input size="default" v-model="tableData.param.deptName" placeholder="请输入部门名称" class="w-50 m-2" clearable />
+            <el-input size="default" v-model="tableData.param.deptName" placeholder="请输入部门名称" class="w-50" clearable />
           </el-form-item>
           <el-form-item label="状态">
-            <el-select size="default" placeholder="请选择状态" class="w-50 m-2" v-model="tableData.param.status">
+            <el-select size="default" placeholder="请选择状态" class="w-50" v-model="tableData.param.status">
               <el-option label="全部" :value="-1" />
               <el-option label="启用" :value="1" />
               <el-option label="禁用" :value="0" />

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

@@ -44,7 +44,6 @@ const formRef = ref();
 
 const baseForm: MenuBtnRow = {
 	parentId: -1,
-	menuId: 0,
 	name: '',
 	types: '',
 	description: '',

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

@@ -107,8 +107,8 @@ const handleStatusChange = (row: MenuBtnRow) => {
 		type: 'warning',
 	})
 		.then(async function () {
-			// await api.user.setStatus(row.id as number, row.status);
-			// ElMessage.success('操作成功');
+			await api.menu.btn.setStatus(row.id as number, row.menuId as number, row.status);
+			ElMessage.success('操作成功');
 		})
 		.catch(function () {
 			row.status = row.status === 0 ? 1 : 0;

src/views/system/menu/component/list-form.vue

@@ -0,0 +1,92 @@
+<template>
+  <el-dialog v-model="showDialog" :title="`${formData.id?'编辑显示列':'新增显示列'}`" width="500px" :close-on-click-modal="false" :close-on-press-escape="false">
+    <el-form ref="formRef" :model="formData" :rules="ruleForm" label-width="80px">
+      <el-form-item label="上级" prop="parentId">
+        <el-cascader :options="parentData" :props="{ label: 'name',value: 'id',checkStrictly: true,emitPath: false }" placeholder="请选择上级菜单" clearable class="w100" v-model="formData.parentId"></el-cascader>
+      </el-form-item>
+      <el-form-item label="字段名称" prop="name">
+        <el-input v-model="formData.name" placeholder="输入名称" />
+      </el-form-item>
+      <el-form-item label="字段key" prop="code">
+        <el-input v-model="formData.code" placeholder="输入编码" />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-switch v-model="formData.status" :active-value="1" :inactive-value="0" />
+      </el-form-item>
+      <el-form-item label="说明" prop="description">
+        <el-input v-model="formData.description" type="textarea" :rows="6" />
+      </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, PropType } from 'vue';
+import api from '/@/api/system';
+import { MenuListRow } from '/@/api/model/system/menu';
+import { ruleRequired } from '/@/utils/validator';
+import { ElMessage } from 'element-plus';
+
+defineProps({
+	parentData: Array as PropType<MenuListRow[]>,
+});
+
+const emit = defineEmits(['getList']);
+
+const showDialog = ref(false);
+const formRef = ref();
+
+const baseForm: MenuListRow = {
+	parentId: -1,
+	name: '',
+	code: '',
+	description: '',
+	status: 1,
+};
+
+const formData = reactive<MenuListRow>({
+	...baseForm,
+});
+
+const ruleForm = {
+	name: [ruleRequired('字段名称不能为空')],
+	code: [ruleRequired('字段key不能为空')],
+};
+
+const onSubmit = async () => {
+	await formRef.value.validate();
+
+	if (!formData.parentId) {
+		formData.parentId = -1;
+	}
+
+	const theApi = formData.id ? api.menu.list.edit : api.menu.list.add;
+
+	await theApi(formData);
+
+	ElMessage.success('操作成功');
+	resetForm();
+	showDialog.value = false;
+	emit('getList');
+};
+
+const resetForm = async () => {
+	Object.assign(formData, { ...baseForm });
+	formRef.value && formRef.value.resetFields();
+};
+
+const open = async (row: any) => {
+	resetForm();
+	showDialog.value = true;
+	Object.assign(formData, { ...row });
+	// console.log(row);
+};
+
+defineExpose({ open });
+</script>

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

@@ -0,0 +1,97 @@
+<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%" row-key="id" border :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
+      <el-table-column type="index" label="序号" width="60" align="center" />
+      <el-table-column prop="name" label="字段名称" width="220" show-overflow-tooltip></el-table-column>
+      <el-table-column prop="code" label="字段key" show-overflow-tooltip></el-table-column>
+      <el-table-column prop="status" label="状态" width="100" align="center">
+        <template #default="scope">
+          <el-switch v-model="scope.row.status" inline-prompt :active-value="1" :inactive-value="0" active-text="启" inactive-text="禁" @change="handleStatusChange(scope.row)">
+          </el-switch>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="100" align="center">
+        <template #default="scope">
+          <el-button size="small" text type="warning" @click="onEdit(scope.row)">修改</el-button>
+          <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>
+</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';
+
+const title = ref('列表权限');
+const drawer = ref(false);
+const tableData = ref<MenuListRow[]>([]);
+const menuRow = ref();
+const listFormRef = ref();
+const getList = async () => {
+	tableData.value = [];
+	let res = await api.menu.list.getList({ menuId: menuRow.value.id as number, status: -1 });
+	tableData.value = res || [];
+};
+
+const open = async (row: any) => {
+	// console.log(row);
+	title.value = '列表权限 - ' + row.name;
+	drawer.value = true;
+	menuRow.value = row;
+	getList();
+};
+
+const onAddRow = () => {
+	listFormRef.value.open({ menuId: menuRow.value.id });
+};
+
+const onEdit = (row: MenuListRow) => {
+	listFormRef.value.open(row);
+};
+
+// 修改启用停用状态
+const handleStatusChange = (row: MenuListRow) => {
+	let text = row.status === 1 ? '启用' : '停用';
+	ElMessageBox.confirm('确认要"' + text + '"："' + row.name + '"字段吗?', '警告', {
+		confirmButtonText: '确定',
+		cancelButtonText: '取消',
+		type: 'warning',
+	})
+		.then(async function () {
+			// await api.user.setStatus(row.id as number, row.status);
+			// ElMessage.success('操作成功');
+		})
+		.catch(function () {
+			row.status = row.status === 0 ? 1 : 0;
+		});
+};
+
+const onDel = (row: MenuListRow) => {
+	ElMessageBox.confirm(`此操作将删除字段：“${row.name}”，是否继续?`, '提示', {
+		confirmButtonText: '确认',
+		cancelButtonText: '取消',
+		type: 'warning',
+	}).then(async () => {
+		await api.menu.list.del(row.id as number);
+		ElMessage.success('删除成功');
+		getList();
+	});
+};
+
+defineExpose({ open });
+</script>

src/views/system/menu/index.vue

@@ -1,22 +1,22 @@
 <template>
-  <div class="system-menu-container">
+  <div class="system-user-container">
     <el-card shadow="hover">
-      <div class="system-menu-search mb15">
-        <el-form :inline="true">
+      <div class="system-menu-search ">
+        <el-form inline>
           <el-form-item label="菜单名称">
-            <el-input v-model="state.queryParams.title" placeholder="请输入菜单名称" clearable class="w-50 m-2" size="default" />
+            <el-input v-model="state.queryParams.title" placeholder="请输入菜单名称" size="default" clearable class="w-50" />
           </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.component" placeholder="请输入组件路径" clearable  class="w-50" />
           </el-form-item> -->
           <el-form-item>
-            <el-button size="default" type="primary" class="ml10" @click="handleQuery">
+            <el-button type="primary" class="ml10" @click="handleQuery">
               <el-icon>
                 <ele-Search />
               </el-icon>
               查询
             </el-button>
-            <el-button size="default" type="success" class="ml10" @click="onOpenAddMenu(null)">
+            <el-button type="success" class="ml10" @click="onOpenAddMenu(null)">
               <el-icon>
                 <ele-FolderAdd />
               </el-icon>
@@ -25,7 +25,7 @@
           </el-form-item>
         </el-form>
       </div>
-      <el-table :data="state.menuTableData" style="width: 100%" row-key="path" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
+      <el-table :data="state.menuTableData" default-expand-all 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" />
@@ -58,8 +58,8 @@
               </el-button>
               <template #dropdown>
                 <el-dropdown-menu>
-                  <el-dropdown-item @click.native="btnAuthOpen(scope.row)">按钮权限</el-dropdown-item>
-                  <el-dropdown-item>列表权限</el-dropdown-item>
+                  <el-dropdown-item @click.native="authOpen(scope.row,'buttonAuthorizeList')">按钮权限</el-dropdown-item>
+                  <el-dropdown-item @click.native="authOpen(scope.row,'listAuthorizeList')">列表权限</el-dropdown-item>
                   <el-dropdown-item>数据权限</el-dropdown-item>
                 </el-dropdown-menu>
               </template>
@@ -70,6 +70,7 @@
     </el-card>
     <EditMenu ref="editMenuRef" @menuList="menuList" :menu="state.menuTableData" :visibleOptions="sys_show_hide" :acType="acType" />
     <ButtonAuthorizeListDrawer ref="buttonAuthorizeList" />
+    <ListAuthorizeListDrawer ref="listAuthorizeList" />
   </div>
 </template>
 
@@ -79,8 +80,10 @@ import { ElMessageBox, ElMessage } from 'element-plus';
 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';
 const editMenuRef = ref();
 const buttonAuthorizeList = ref();
+const listAuthorizeList = ref();
 const state = reactive({
 	queryParams: {
 		title: '',
@@ -102,10 +105,17 @@ const onOpenEditMenu = (row: any) => {
 	acType.value = 'edit';
 	editMenuRef.value.openDialog(row);
 };
+
 // 打开按钮权限抽下
-const btnAuthOpen = (row: any) => {
-	buttonAuthorizeList.value.open(row);
+const authOpen = (row: any, key: string) => {
+	if (key === 'buttonAuthorizeList') {
+		return buttonAuthorizeList.value.open(row);
+	}
+	if (key === 'listAuthorizeList') {
+		return listAuthorizeList.value.open(row);
+	}
 };
+
 // 删除当前行
 const onTabelRowDel = (row: any) => {
 	ElMessageBox.confirm(`此操作将永久删除菜单：“${row.title}”, 是否继续?`, '提示', {

src/views/system/monitor/server/index.vue

@@ -482,8 +482,6 @@ export default defineComponent({
 	height: 300px;
 	overflow-y: auto;
 }
-.system-user-container {
-}
 
 .marg-b-15 {
 	margin-bottom: 15px;

src/views/system/org/index.vue

@@ -4,10 +4,10 @@
       <div class="system-dept-search mb15">
         <el-form :inline="true">
           <el-form-item label="组织名称">
-            <el-input size="default" v-model="tableData.param.name" placeholder="请输入组织名称" class="w-50 m-2" clearable />
+            <el-input size="default" v-model="tableData.param.name" placeholder="请输入组织名称" class="w-50" clearable />
           </el-form-item>
           <el-form-item label="状态">
-            <el-select size="default" placeholder="请选择状态" class="w-50 m-2" v-model="tableData.param.status" >
+            <el-select size="default" placeholder="请选择状态" class="w-50" v-model="tableData.param.status" >
               <el-option label="全部" :value="-1" />
               <el-option label="启用" :value="1" />
               <el-option label="禁用" :value="0" />

src/views/system/post/index.vue

@@ -4,13 +4,13 @@
       <div class="system-user-search mb15">
         <el-form :inline="true">
           <el-form-item label="岗位名称">
-            <el-input size="default" v-model="tableData.param.postName" placeholder="请输入岗位名称" class="w-50 m-2" clearable />
+            <el-input size="default" v-model="tableData.param.postName" placeholder="请输入岗位名称" class="w-50" clearable />
           </el-form-item>
           <el-form-item label="岗位编码">
-            <el-input size="default" v-model="tableData.param.postCode" placeholder="请输入岗位编码" class="w-50 m-2" clearable />
+            <el-input size="default" v-model="tableData.param.postCode" placeholder="请输入岗位编码" class="w-50" clearable />
           </el-form-item>
           <el-form-item label="状态">
-            <el-select size="default" placeholder="请选择状态" class="w-50 m-2" v-model="tableData.param.status">
+            <el-select size="default" placeholder="请选择状态" class="w-50" v-model="tableData.param.status">
               <el-option label="全部" :value="-1" />
               <el-option label="启用" :value="1" />
               <el-option label="禁用" :value="0" />

src/views/system/role/index.vue

@@ -4,10 +4,10 @@
       <div class="system-user-search mb15">
         <el-form :inline="true">
           <el-form-item label="角色名称">
-            <el-input size="default" v-model="tableData.param.name" placeholder="请输入角色名称" class="w-50 m-2" clearable />
+            <el-input size="default" v-model="tableData.param.name" placeholder="请输入角色名称" class="w-50" clearable />
           </el-form-item>
           <el-form-item label="状态">
-            <el-select size="default" placeholder="请选择状态" class="w-50 m-2" v-model="tableData.param.status">
+            <el-select size="default" placeholder="请选择状态" class="w-50" v-model="tableData.param.status">
               <el-option label="全部" :value="-1" />
               <el-option label="启用" :value="1" />
               <el-option label="禁用" :value="0" />