添加按钮权限

src/views/admin/system/menu/index.vue

@@ -4,20 +4,25 @@
 			<el-row shadow="hover" v-show="showSearch" class="ml10">
 				<el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList" ref="queryRef">
 					<el-form-item :label="$t('sysmenu.name')" prop="menuName">
-						<el-input :placeholder="$t('sysmenu.inputNameTip')" clearable style="max-width: 180px" v-model="state.queryForm.menuName" />
+						<el-input
+							:placeholder="$t('sysmenu.inputNameTip')"
+							clearable
+							style="max-width: 180px"
+							v-model="state.queryForm.menuName"
+						/>
 					</el-form-item>
 					<el-form-item>
 						<el-button @click="query" class="ml10" icon="search" type="primary">
-							{{ $t('common.queryBtn') }}
+							{{ $t("common.queryBtn") }}
 						</el-button>
-						<el-button @click="resetQuery" icon="Refresh">{{ $t('common.resetBtn') }}</el-button>
+						<el-button @click="resetQuery" icon="Refresh">{{ $t("common.resetBtn") }}</el-button>
 					</el-form-item>
 				</el-form>
 			</el-row>
 			<el-row>
 				<div class="mb8" style="width: 100%">
 					<el-button @click="onOpenAddMenu" class="ml10" icon="folder-add" type="primary" v-auth="'sys_menu_add'">
-						{{ $t('common.addBtn') }}
+						{{ $t("common.addBtn") }}
 					</el-button>
 					<right-toolbar
 						v-model:showSearch="showSearch"
@@ -37,41 +42,68 @@
 				style="width: 100%"
 				v-loading="state.loading"
 				border
-				:cell-style="tableStyle.cellStyle"
 				:header-cell-style="tableStyle?.headerCellStyle"
 			>
-				<el-table-column :label="$t('sysmenu.name')" fixed prop="name" show-overflow-tooltip></el-table-column>
-				<el-table-column :label="$t('sysmenu.sortOrder')" prop="sortOrder" show-overflow-tooltip></el-table-column>
-				<el-table-column :label="$t('sysmenu.icon')" prop="icon" show-overflow-tooltip>
+				<el-table-column
+					:label="$t('sysmenu.name')"
+					fixed
+					prop="name"
+					align="left"
+					show-overflow-tooltip
+					min-width="200"
+				/>
+				<el-table-column :label="$t('sysmenu.sortOrder')" prop="sortOrder" align="center" show-overflow-tooltip />
+				<el-table-column :label="$t('sysmenu.icon')" prop="icon" show-overflow-tooltip align="center">
 					<template #default="scope">
 						<SvgIcon :name="scope.row.meta.icon" />
 					</template>
 				</el-table-column>
-				<el-table-column :label="$t('sysmenu.path')" prop="path" show-overflow-tooltip></el-table-column>
-				<el-table-column :label="$t('sysmenu.menuType')" show-overflow-tooltip>
+				<el-table-column :label="$t('sysmenu.path')" prop="path" show-overflow-tooltip align="center" />
+				<el-table-column :label="$t('sysmenu.menuType')" show-overflow-tooltip align="center">
 					<template #default="scope">
 						<el-tag v-if="scope.row.menuType === '0'">左菜单</el-tag>
 						<el-tag v-if="scope.row.menuType === '2'">顶菜单</el-tag>
 						<el-tag type="success" v-if="scope.row.menuType === '1'">按钮</el-tag>
 					</template>
 				</el-table-column>
-				<el-table-column :label="$t('sysmenu.keepAlive')" show-overflow-tooltip>
+				<el-table-column :label="$t('sysmenu.keepAlive')" show-overflow-tooltip align="center">
 					<template #default="scope">
 						<el-tag v-if="scope.row.meta.isKeepAlive">开启</el-tag>
 						<el-tag type="info" v-else>关闭</el-tag>
 					</template>
 				</el-table-column>
-				<el-table-column :label="$t('sysmenu.permission')" :show-overflow-tooltip="true" prop="permission"></el-table-column>
-				<el-table-column :label="$t('common.action')" show-overflow-tooltip width="250">
+				<el-table-column
+					:label="$t('sysmenu.permission')"
+					:show-overflow-tooltip="true"
+					prop="permission"
+					align="center"
+				/>
+				<el-table-column :label="$t('common.action')" show-overflow-tooltip width="250" align="center">
 					<template #default="scope">
-						<el-button icon="folder-add" @click="onOpenAddMenu('add', scope.row)" text type="primary" v-auth="'sys_menu_add'">
-							{{ $t('common.addBtn') }}
+						<el-button
+							icon="folder-add"
+							@click="onOpenAddMenu('add', scope.row)"
+							text
+							type="primary"
+							v-auth="'sys_menu_add'"
+						>
+							{{ $t("common.addBtn") }}
 						</el-button>
-						<el-button icon="edit-pen" @click="onOpenEditMenu('edit', scope.row)" text type="primary" v-auth="'sys_menu_edit'"
-							>{{ $t('common.editBtn') }}
+						<el-button
+							icon="edit-pen"
+							@click="onOpenEditMenu('edit', scope.row)"
+							text
+							type="primary"
+							v-auth="'sys_menu_edit'"
+							>{{ $t("common.editBtn") }}
 						</el-button>
 
-						<el-tooltip icon="delete" :content="$t('sysmenu.deleteDisabledTip')" :disabled="!deleteMenuDisabled(scope.row)" placement="top">
+						<el-tooltip
+							icon="delete"
+							:content="$t('sysmenu.deleteDisabledTip')"
+							:disabled="!deleteMenuDisabled(scope.row)"
+							placement="top"
+						>
 							<span style="margin-left: 12px">
 								<el-button
 									icon="delete"
@@ -81,7 +113,7 @@
 									type="primary"
 									v-auth="'sys_menu_del'"
 								>
-									{{ $t('common.delBtn') }}
+									{{ $t("common.delBtn") }}
 								</el-button>
 							</span>
 						</el-tooltip>
@@ -94,99 +126,99 @@
 </template>
 
 <script lang="ts" name="systemMenu" setup>
-import { delObj, pageList } from '/@/api/admin/menu';
-import { BasicTableProps, useTable } from '/@/hooks/table';
-import { useMessage, useMessageBox } from '/@/hooks/message';
-import { useI18n } from 'vue-i18n';
+import { delObj, pageList } from "/@/api/admin/menu"
+import { BasicTableProps, useTable } from "/@/hooks/table"
+import { useMessage, useMessageBox } from "/@/hooks/message"
+import { useI18n } from "vue-i18n"
 // 引入组件
-const MenuDialog = defineAsyncComponent(() => import('./form.vue'));
-const { t } = useI18n();
+const MenuDialog = defineAsyncComponent(() => import("./form.vue"))
+const { t } = useI18n()
 // 定义变量内容
-const tableRef = ref();
-const menuDialogRef = ref();
-const showSearch = ref(true);
-const queryRef = ref();
+const tableRef = ref()
+const menuDialogRef = ref()
+const showSearch = ref(true)
+const queryRef = ref()
 const state: BasicTableProps = reactive<BasicTableProps>({
 	pageList: pageList, // H
 	queryForm: {
 		parentId: -1,
-		menuName: '',
+		menuName: "",
 	},
 	isPage: false,
-});
+})
 
-const { getDataList, tableStyle } = useTable(state);
+const { getDataList, tableStyle } = useTable(state)
 
 // 根据类型判断是否有子节点
 const setHasChildren = (arr: any[]) => {
 	arr.forEach((item) => {
 		// 添加 hasChildren 属性
-		item.hasChildren = item.menuType !== '1';
-	});
-};
+		item.hasChildren = item.menuType !== "1"
+	})
+}
 const tableList = computed(() => {
-	const list = state.dataList;
+	const list = state.dataList
 	if (Array.isArray(list)) {
-		setHasChildren(list);
+		setHasChildren(list)
 	}
-	return list;
-});
+	return list
+})
 
 // 打开新增菜单弹窗
 const onOpenAddMenu = (type?: string, row?: any) => {
-	menuDialogRef.value.openDialog(type, row);
-};
+	menuDialogRef.value.openDialog(type, row)
+}
 // 打开编辑菜单弹窗
 const onOpenEditMenu = (type: string, row: any) => {
-	menuDialogRef.value.openDialog(type, row);
-};
+	menuDialogRef.value.openDialog(type, row)
+}
 
 //是否禁用删除
 const deleteMenuDisabled = (row: any) => {
-	return (row.children || []).length > 0;
-};
+	return (row.children || []).length > 0
+}
 
 // 搜索事件
 const query = () => {
-	state.dataList = [];
-	state.queryForm.parentId = undefined;
-	getDataList();
-};
+	state.dataList = []
+	state.queryForm.parentId = undefined
+	getDataList()
+}
 
 // 清空搜索条件
 const resetQuery = () => {
-	queryRef.value.resetFields();
-	state.dataList = [];
-	getDataList();
-};
+	queryRef.value.resetFields()
+	state.dataList = []
+	getDataList()
+}
 
 const load = (row: any, treeNode: unknown, resolve: (date: any[]) => void) => {
 	const param = {
 		parentId: row.id,
-	};
+	}
 	pageList(param).then((res) => {
-		const childrenList = res.data;
+		const childrenList = res.data
 		if (Array.isArray(childrenList)) {
-			setHasChildren(childrenList);
+			setHasChildren(childrenList)
 		}
-		resolve(childrenList);
-	});
-};
+		resolve(childrenList)
+	})
+}
 
 // 删除操作
 const handleDelete = async (row: any) => {
 	try {
-		await useMessageBox().confirm(t('common.delConfirmText'));
+		await useMessageBox().confirm(t("common.delConfirmText"))
 	} catch {
-		return;
+		return
 	}
 
 	try {
-		await delObj(row.id);
-		getDataList();
-		useMessage().success(t('common.delSuccessText'));
+		await delObj(row.id)
+		getDataList()
+		useMessage().success(t("common.delSuccessText"))
 	} catch (err: any) {
-		useMessage().error(err.msg);
+		useMessage().error(err.msg)
 	}
-};
+}
 </script>

src/views/admin/system/user/form.vue

@@ -187,7 +187,7 @@ const dataRules = ref({
 		},
 	],
 	email: [
-		{ type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] },
+		{ required: true, message: "请输入正确的邮箱地址", trigger: ["blur", "change"] },
 		{ validator: rule.overLength, trigger: "blur" },
 	],
 	lockFlag: [{ required: true, message: "状态不能为空", trigger: "blur" }],