更新代码

resources/admin/src/pages/auth/roles/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="pages role-page">
+	<div class="pages-base-layout role-page">
 		<div class="tool-bar">
 			<div class="left-panel">
 				<a-form layout="inline" :model="searchForm">
@@ -7,20 +7,14 @@
 						<a-input v-model:value="searchForm.keyword" placeholder="请输入角色名称" allow-clear
 							style="width: 180px" />
 					</a-form-item>
-					<a-form-item label="状态">
-						<a-select v-model:value="searchForm.status" placeholder="请选择状态" allow-clear style="width: 100px">
-							<a-select-option :value="1">正常</a-select-option>
-							<a-select-option :value="0">禁用</a-select-option>
-						</a-select>
-					</a-form-item>
 					<a-form-item>
 						<a-space>
 							<a-button type="primary" @click="handleSearch">
-								<template #icon><search-outlined /></template>
+								<template #icon><SearchOutlined /></template>
 								搜索
 							</a-button>
-							<a-button @click="handleReset">
-								<template #icon><redo-outlined /></template>
+							<a-button @click="handleUserReset">
+								<template #icon><RedoOutlined /></template>
 								重置
 							</a-button>
 						</a-space>
@@ -31,25 +25,25 @@
 				<a-dropdown :disabled="selectedRows.length === 0">
 					<a-button :disabled="selectedRows.length === 0">
 						批量操作
-						<down-outlined />
+						<DownOutlined />
 					</a-button>
 					<template #overlay>
 						<a-menu>
 							<a-menu-item @click="handleBatchStatus">
-								<check-circle-outlined />批量启用/禁用
+								<CheckCircleOutlined />批量启用/禁用
 							</a-menu-item>
 							<a-menu-item @click="handleBatchCopy">
-								<copy-outlined />批量复制
+								<CopyOutlined />批量复制
 							</a-menu-item>
 							<a-menu-divider />
 							<a-menu-item @click="handleBatchDelete" danger>
-								<delete-outlined />批量删除
+								<DeleteOutlined />批量删除
 							</a-menu-item>
 						</a-menu>
 					</template>
 				</a-dropdown>
 				<a-button type="primary" @click="handleAdd">
-					<template #icon><plus-outlined /></template>
+					<template #icon><PlusOutlined /></template>
 					新增
 				</a-button>
 			</div>
@@ -89,9 +83,18 @@
 <script setup>
 import { ref, reactive } from 'vue'
 import { message, Modal } from 'ant-design-vue'
+import {
+	SearchOutlined,
+	RedoOutlined,
+	PlusOutlined,
+	DownOutlined,
+	CheckCircleOutlined,
+	CopyOutlined,
+	DeleteOutlined
+} from '@ant-design/icons-vue'
 import scTable from '@/components/scTable/index.vue'
-import saveDialog from './save.vue'
-import permissionDialog from './permission.vue'
+import saveDialog from './components/SaveDialog.vue'
+import permissionDialog from './components/PermissionDialog.vue'
 import authApi from '@/api/auth'
 import { useTable } from '@/hooks/useTable'
 
@@ -283,6 +286,13 @@ const handlePermission = (record) => {
 	}, 0)
 }
 
+// 重置
+const handleUserReset = () => {
+	searchForm.keyword = ''
+	searchForm.status = null
+	handleSearch()
+}
+
 // 保存成功回调
 const handleSaveSuccess = () => {
 	refreshTable()
@@ -296,14 +306,6 @@ const permissionSuccess = () => {
 
 <style scoped lang="scss">
 .role-page {
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-	padding: 0;
-
-	.table-content {
-		flex: 1;
-		overflow: hidden;
-	}
+	@extend .pages-base-layout;
 }
 </style>