更新

2026-02-11 15:16:11 +08:00
parent 2720de7f44
commit 1bfe30651e
18 changed files with 444 additions and 689 deletions
--- a/app/Http/Controllers/Auth/Admin/Department.php
+++ b/app/Http/Controllers/Auth/Admin/Department.php
@@ -38,9 +38,10 @@ class Department extends Controller
    /**
     * 获取部门树
     */
-    public function tree()
+    public function tree(Request $request)
    {
-        $result = $this->departmentService->getTree();
+        $params = $request->only(['keyword', 'status']);
+        $result = $this->departmentService->getTree($params);

        return response()->json([
            'code' => 200,
--- a/app/Services/Auth/DepartmentService.php
+++ b/app/Services/Auth/DepartmentService.php
@@ -56,6 +56,14 @@ class DepartmentService
    {
        $query = Department::query();

+        // 搜索条件
+        if (!empty($params['keyword'])) {
+            $query->where(function ($q) use ($params) {
+                $q->where('name', 'like', '%' . $params['keyword'] . '%')
+                    ->orWhere('leader', 'like', '%' . $params['keyword'] . '%');
+            });
+        }
+
        if (isset($params['status']) && $params['status'] !== '') {
            $query->where('status', $params['status']);
        }
--- a/resources/admin/index.html
+++ b/resources/admin/index.html
@@ -3,245 +3,44 @@
 <head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-<title>VueAdmin - 管理后台</title>
+<script src="/public/config.js"></script>
+<script>
+	// 获取项目名称配置
+	window.__APP_NAME__ = window.SY_CONFIG?.APP_NAME || 'VueAdmin'
+	document.title = window.__APP_NAME__ + ' - 管理后台'
+</script>
+<title></title>
 <style>
-	* {
-		margin: 0;
-		padding: 0;
-		box-sizing: border-box;
-	}
-
-	body {
-		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
-		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-		min-height: 100vh;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		overflow: hidden;
-	}
-
-	#app {
-		width: 100%;
-		height: 100vh;
-	}
-
-	.loading-container {
-		position: fixed;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-		z-index: 9999;
-		transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
-	}
-
-	.loading-container.hidden {
-		opacity: 0;
-		visibility: hidden;
-	}
-
-	.loading-logo {
-		width: 120px;
-		height: 120px;
-		border-radius: 20px;
-		background: rgba(255, 255, 255, 0.95);
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
-		margin-bottom: 40px;
-		animation: logoFloat 3s ease-in-out infinite;
-	}
-
-	.loading-logo img {
-		width: 80px;
-		height: 80px;
-		object-fit: contain;
-	}
-
-	@keyframes logoFloat {
-		0%, 100% {
-			transform: translateY(0);
-		}
-		50% {
-			transform: translateY(-10px);
-		}
-	}
-
-	.loading-text {
-		color: #ffffff;
-		font-size: 32px;
-		font-weight: 600;
-		margin-bottom: 15px;
-		text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
-		animation: fadeInUp 0.8s ease-out;
-	}
-
-	.loading-subtitle {
-		color: rgba(255, 255, 255, 0.85);
-		font-size: 16px;
-		margin-bottom: 50px;
-		animation: fadeInUp 0.8s ease-out 0.2s backwards;
-	}
-
-	@keyframes fadeInUp {
-		from {
-			opacity: 0;
-			transform: translateY(20px);
-		}
-		to {
-			opacity: 1;
-			transform: translateY(0);
-		}
-	}
-
-	.spinner {
-		width: 60px;
-		height: 60px;
-		position: relative;
-		animation: spinnerRotate 2s linear infinite;
-	}
-
-	.spinner-circle {
-		width: 100%;
-		height: 100%;
-		border-radius: 50%;
-		border: 4px solid rgba(255, 255, 255, 0.2);
-		border-top-color: #ffffff;
-		position: absolute;
-		top: 0;
-		left: 0;
-	}
-
-	.spinner-circle:nth-child(2) {
-		width: 70%;
-		height: 70%;
-		top: 15%;
-		left: 15%;
-		border-top-color: rgba(255, 255, 255, 0.8);
-		animation: spinnerRotate 1.5s linear infinite reverse;
-	}
-
-	.spinner-circle:nth-child(3) {
-		width: 40%;
-		height: 40%;
-		top: 30%;
-		left: 30%;
-		border-top-color: #ffffff;
-		animation: spinnerRotate 1s linear infinite;
-	}
-
-	@keyframes spinnerRotate {
-		from {
-			transform: rotate(0deg);
-		}
-		to {
-			transform: rotate(360deg);
-		}
-	}
-
-	.loading-tips {
-		position: absolute;
-		bottom: 60px;
-		color: rgba(255, 255, 255, 0.7);
-		font-size: 14px;
-		text-align: center;
-		animation: pulse 2s ease-in-out infinite;
-	}
-
-	@keyframes pulse {
-		0%, 100% {
-			opacity: 0.5;
-		}
-		50% {
-			opacity: 1;
-		}
-	}
-
-	.progress-bar {
-		width: 200px;
-		height: 3px;
-		background: rgba(255, 255, 255, 0.2);
-		border-radius: 3px;
-		margin-top: 30px;
-		overflow: hidden;
-		animation: fadeInUp 0.8s ease-out 0.4s backwards;
-	}
-
-	.progress-bar-inner {
-		width: 0%;
-		height: 100%;
-		background: #ffffff;
-		border-radius: 3px;
-		animation: progressLoading 2s ease-in-out infinite;
-	}
-
-	@keyframes progressLoading {
-		0% {
-			width: 0%;
-			margin-left: 0;
-		}
-		50% {
-			width: 70%;
-			margin-left: 15%;
-		}
-		100% {
-			width: 0%;
-			margin-left: 100%;
-		}
-	}
+*{margin:0;padding:0;box-sizing:border-box}
+body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#f5f5f5}
+#app,#loading{width:100%;height:100vh}
+#loading{position:fixed;top:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea,#764ba2);z-index:9999;transition:opacity .3s}
+#loading.hidden{opacity:0;pointer-events:none}
+.logo{width:60px;height:60px;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;animation:scale 1s ease-in-out infinite}
+.logo svg{width:36px;height:36px}
+.text{color:#fff;font-size:24px;font-weight:600;margin-bottom:30px}
+.spinner{width:40px;height:40px;border:3px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:rotate .8s linear infinite}
+@keyframes rotate{to{transform:rotate(360deg)}}
+@keyframes scale{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
 </style>
 </head>
 <body>
-	<!-- 加载页面 -->
-	<div id="loading" class="loading-container">
-		<div class="loading-logo">
-			<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 50px; height: 50px;">
-				<rect width="24" height="24" rx="4" fill="#667eea"/>
-				<path d="M7 8H17V10H7V8Z" fill="white"/>
-				<path d="M7 11H17V13H7V11Z" fill="white"/>
-				<path d="M7 14H14V16H7V14Z" fill="white"/>
-			</svg>
-		</div>
-		<div class="loading-text">VueAdmin</div>
-		<div class="loading-subtitle">正在加载管理后台...</div>
-		<div class="spinner">
-			<div class="spinner-circle"></div>
-			<div class="spinner-circle"></div>
-			<div class="spinner-circle"></div>
-		</div>
-		<div class="progress-bar">
-			<div class="progress-bar-inner"></div>
-		</div>
-		<div class="loading-tips">首次加载可能需要几秒钟，请耐心等待</div>
+<div id="loading">
+	<div class="logo">
+		<svg viewBox="0 0 24 24" fill="none">
+			<rect width="24" height="24" rx="4" fill="#667eea"/>
+			<path d="M7 8h10v2H7V8Z" fill="white"/>
+			<path d="M7 11h10v2H7v-2Z" fill="white"/>
+			<path d="M7 14h7v2H7v-2Z" fill="white"/>
+		</svg>
 	</div>
-
-	<!-- Vue 应用挂载点 -->
-	<div id="app"></div>
-
-	<!-- 隐藏加载页面的脚本 -->
-	<script>
-		window.addEventListener('load', function() {
-			setTimeout(function() {
-				var loading = document.getElementById('loading');
-				if (loading) {
-					loading.classList.add('hidden');
-					setTimeout(function() {
-						if (loading.parentNode) {
-							loading.parentNode.removeChild(loading);
-						}
-					}, 500);
-				}
-			}, 500);
-		});
-	</script>
-
-	<script type="module" src="/src/main.js"></script>
+		<div class="text"><script>document.write(window.__APP_NAME__)</script></div>
+	<div class="spinner"></div>
+</div>
+<div id="app"></div>
+<script>
+window.onload=function(){setTimeout(function(){var e=document.getElementById('loading');e&&e.classList.add('hidden')},300)}
+</script>
+<script type="module" src="/src/main.js"></script>
 </body>
 </html>
--- a/resources/admin/public/config.js
+++ b/resources/admin/public/config.js
@@ -0,0 +1,14 @@
+// 配置覆盖文件
+// 此文件中的配置项会覆盖 src/config/index.js 中的默认配置
+// 修改后无需重新构建，只需刷新页面即可生效
+
+window.SY_CONFIG = {
+	// 项目名称
+	APP_NAME: '系统管理后台',
+
+	// 示例：覆盖接口地址
+	// API_URL: 'http://your-domain.com/admin/',
+
+	// 示例：覆盖超时时间
+	// TIMEOUT: 30000,
+}
--- a/resources/admin/public/vite.svg
+++ b/resources/admin/public/vite.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/resources/admin/src/api/auth.js
+++ b/resources/admin/src/api/auth.js
@@ -229,18 +229,18 @@ export default {
 		},
 	},

-	// 部门管理
-	departments: {
-		list: {
-			get: async function (params) {
-				return await request.get('departments', { params })
+		// 部门管理
+		departments: {
+			list: {
+				get: async function (params) {
+					return await request.get('departments', { params })
+				},
 			},
-		},
-		tree: {
-			get: async function () {
-				return await request.get('departments/tree')
+			tree: {
+				get: async function (params) {
+					return await request.get('departments/tree', { params })
+				},
 			},
-		},
 		all: {
 			get: async function () {
 				return await request.get('departments/all')
--- a/resources/admin/src/assets/style/pages.scss
+++ b/resources/admin/src/assets/style/pages.scss
@@ -0,0 +1,94 @@
+// 页面公共布局样式
+
+// 标准页面布局（垂直布局）
+.pages-base-layout {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	padding: 0;
+
+	.tool-bar {
+		padding: 12px 16px;
+		background: #fff;
+		border-bottom: 1px solid #f0f0f0;
+		display: flex;
+		flex-direction: row;
+
+		.left-panel {
+			display: flex;
+			align-items: center;
+			flex: 1;
+		}
+
+		.right-panel {
+			display: flex;
+			gap: 8px;
+		}
+	}
+
+	.table-content {
+		flex: 1;
+		overflow: hidden;
+		background: #f5f5f5;
+	}
+}
+
+// 侧边栏布局（左右分栏）
+.pages-sidebar-layout {
+	display: flex;
+	flex-direction: row;
+	height: 100%;
+	padding: 0;
+
+	.left-box {
+		width: 260px;
+		border-right: 1px solid #f0f0f0;
+		display: flex;
+		flex-direction: column;
+		background: #fff;
+
+		.header {
+			padding: 12px 16px;
+			border-bottom: 1px solid #f0f0f0;
+			background: #fafafa;
+		}
+
+		.body {
+			flex: 1;
+			overflow-y: auto;
+			padding: 16px;
+		}
+	}
+
+	.right-box {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+
+		.tool-bar {
+			padding: 12px 16px;
+			background: #fff;
+			border-bottom: 1px solid #f0f0f0;
+			display: flex;
+			flex-direction: row;
+
+			.left-panel {
+				display: flex;
+				align-items: center;
+				flex: 1;
+			}
+
+			.right-panel {
+				display: flex;
+				gap: 8px;
+			}
+		}
+
+		.table-content {
+			flex: 1;
+			overflow: hidden;
+			background: #f5f5f5;
+		}
+	}
+}
--- a/resources/admin/src/config/index.js
+++ b/resources/admin/src/config/index.js
@@ -1,4 +1,5 @@
-export default {
+// 默认配置
+const defaultConfig = {
 	APP_NAME: 'vueadmin',
 	DASHBOARD_URL: '/dashboard',

@@ -57,3 +58,10 @@ export default {
 	//DES加密秘钥，必须是8字节
 	LS_DES_key: '12345678',
 }
+
+// 合并 public/config.js 中的覆盖配置
+if (typeof window !== 'undefined' && window.SY_CONFIG) {
+	Object.assign(defaultConfig, window.SY_CONFIG)
+}
+
+export default defaultConfig
--- a/resources/admin/src/main.js
+++ b/resources/admin/src/main.js
@@ -3,6 +3,7 @@ import { createApp } from 'vue'
 import Antd from 'ant-design-vue'
 import 'ant-design-vue/dist/reset.css'
 import '@/assets/style/app.scss'
+import '@/assets/style/pages.scss'
 import App from './App.vue'
 import router from './router'
 import pinia from './stores'
--- a/resources/admin/src/pages/auth/departments/components/SaveDialog.vue
+++ b/resources/admin/src/pages/auth/departments/components/SaveDialog.vue
@@ -4,7 +4,7 @@
 		<a-form :model="form" :rules="rules" :disabled="mode === 'show'" ref="dialogForm" :label-col="{ span: 5 }"
 			:wrapper-col="{ span: 18 }">
 			<a-form-item label="上级部门" name="parent_id">
-				<a-tree-select v-model:value="form.parent_id" :tree-data="departments"
+				<a-tree-select v-model:value="form.parent_id" :tree-data="filteredDepartments"
 					:field-names="departmentFieldNames" :tree-default-expand-all="false" placeholder="请选择上级部门"
 					allow-clear tree-node-filter-prop="name"
 					:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" />
@@ -21,6 +21,12 @@
 			<a-form-item label="排序" name="sort">
 				<a-input-number v-model:value="form.sort" :min="0" :max="10000" style="width: 100%" placeholder="请输入排序" />
 			</a-form-item>
+			<a-form-item label="状态" name="status">
+				<a-radio-group v-model:value="form.status">
+					<a-radio :value="1">正常</a-radio>
+					<a-radio :value="0">禁用</a-radio>
+				</a-radio-group>
+			</a-form-item>
 			<a-form-item :wrapper-col="{ offset: 5 }">
 				<div style="display: flex; gap: 10px">
 					<a-button v-if="mode !== 'show'" type="primary" :loading="isSaveing" @click="submit">保 存</a-button>
@@ -32,12 +38,12 @@
 </template>

 <script setup>
-import { ref, reactive } from 'vue'
+import { ref, reactive, computed } from 'vue'
 import { message } from 'ant-design-vue'
 import authApi from '@/api/auth'

 defineOptions({
-	name: 'DepartmentSave'
+	name: 'DepartmentSaveDialog'
 })

 const emit = defineEmits(['success', 'closed'])
@@ -82,6 +88,27 @@ const departmentFieldNames = {
 	children: 'children'
 }

+// 当前编辑的部门ID（用于过滤树）
+const currentEditId = ref(null)
+
+// 过滤后的部门树（编辑时排除自己和子部门）
+const filteredDepartments = computed(() => {
+	if (mode.value === 'add') {
+		return departments.value
+	}
+	return filterDepartments(departments.value, currentEditId.value)
+})
+
+// 递归过滤部门树
+const filterDepartments = (tree, excludeId) => {
+	return tree
+		.filter(item => item.id !== excludeId)
+		.map(item => ({
+			...item,
+			children: item.children ? filterDepartments(item.children, excludeId) : undefined
+		}))
+}
+
 // 显示对话框
 const open = (openMode = 'add') => {
 	mode.value = openMode
@@ -148,6 +175,7 @@ const loadDepartments = async () => {
 // 表单注入数据
 const setData = (data) => {
 	form.id = data.id
+	currentEditId.value = data.id
 	form.name = data.name
 	form.leader = data.leader || ''
 	form.phone = data.phone || ''
--- a/resources/admin/src/pages/auth/departments/index.vue
+++ b/resources/admin/src/pages/auth/departments/index.vue
@@ -1,42 +1,107 @@
 <template>
-	<div class="pages department-page">
+	<div class="pages-base-layout department-page">
+		<!-- 工具栏区域 -->
 		<div class="tool-bar">
 			<div class="left-panel">
 				<a-form layout="inline" :model="searchForm">
-					<a-form-item>
+					<a-form-item label="部门名称">
 						<a-input v-model:value="searchForm.keyword" placeholder="请输入部门名称" allow-clear style="width: 200px" />
 					</a-form-item>
+					<a-form-item label="状态">
+						<a-select v-model:value="searchForm.status" placeholder="请选择状态" allow-clear style="width: 120px">
+							<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>
+								搜索
 							</a-button>
 							<a-button @click="handleReset">
 								<template #icon><redo-outlined /></template>
+								重置
 							</a-button>
 						</a-space>
 					</a-form-item>
 				</a-form>
 			</div>
 			<div class="right-panel">
-				<a-button type="primary" @click="handleAdd">
-					<template #icon><plus-outlined /></template>
-				</a-button>
-				<a-button danger :disabled="selectedRows.length === 0" @click="handleBatchDelete">
-					<template #icon><delete-outlined /></template>
-				</a-button>
+				<a-space>
+					<a-button type="primary" @click="handleAdd">
+						<template #icon><plus-outlined /></template>
+						新增
+					</a-button>
+					<a-button :disabled="selectedRows.length === 0" @click="handleBatchStatus(1)">
+						<template #icon><check-circle-outlined /></template>
+						启用
+					</a-button>
+					<a-button :disabled="selectedRows.length === 0" @click="handleBatchStatus(0)">
+						<template #icon><stop-outlined /></template>
+						禁用
+					</a-button>
+					<a-dropdown>
+						<a-button :disabled="selectedRows.length === 0">
+							<template #icon><more-outlined /></template>
+							更多
+						</a-button>
+						<template #overlay>
+							<a-menu>
+								<a-menu-item @click="handleExport">
+									<template #icon><download-outlined /></template>
+									导出
+								</a-menu-item>
+								<a-menu-item @click="handleImport">
+									<template #icon><upload-outlined /></template>
+									导入
+								</a-menu-item>
+								<a-menu-divider />
+								<a-menu-item danger @click="handleBatchDelete">
+									<template #icon><delete-outlined /></template>
+									批量删除
+								</a-menu-item>
+							</a-menu>
+						</template>
+					</a-dropdown>
+				</a-space>
 			</div>
 		</div>
+
+		<!-- 表格内容区域 -->
 		<div class="table-content">
-			<scTable ref="tableRef" :columns="columns" :data-source="tableData" :loading="loading" :pagination="false"
-				:row-key="rowKey" :row-selection="rowSelection" @refresh="refreshTable" @select="handleSelectChange"
-				@selectAll="handleSelectAll">
+			<scTable
+				ref="tableRef"
+				:columns="columns"
+				:data-source="tableData"
+				:loading="loading"
+				:pagination="false"
+				:row-key="rowKey"
+				:row-selection="rowSelection"
+				@refresh="refreshTable"
+				@select="handleSelectChange"
+				@selectAll="handleSelectAll"
+			>
+				<template #status="{ record }">
+					<a-tag :color="record.status === 1 ? 'green' : 'red'">
+						{{ record.status === 1 ? '正常' : '禁用' }}
+					</a-tag>
+				</template>
 				<template #action="{ record }">
 					<a-space>
-						<a-button type="link" size="small" @click="handleView(record)">查看</a-button>
-						<a-button type="link" size="small" @click="handleEdit(record)">编辑</a-button>
-						<a-popconfirm title="确定删除该部门吗？" @confirm="handleDelete(record)">
-							<a-button type="link" size="small" danger>删除</a-button>
+						<a-button type="link" size="small" @click="handleView(record)">
+							<template #icon><eye-outlined /></template>
+							查看
+						</a-button>
+						<a-button type="link" size="small" @click="handleEdit(record)">
+							<template #icon><edit-outlined /></template>
+							编辑
+						</a-button>
+						<a-popconfirm title="确定删除该部门吗？如果该部门下有子部门或用户，将无法删除" @confirm="handleDelete(record)">
+							<a-button type="link" size="small" danger>
+								<template #icon><delete-outlined /></template>
+								删除
+							</a-button>
 						</a-popconfirm>
 					</a-space>
 				</template>
@@ -44,15 +109,38 @@
 		</div>
 	</div>

-	<!-- 新增/编辑部门弹窗 -->
+	<!-- 新增/编辑/查看部门弹窗 -->
 	<save-dialog v-if="dialog.save" ref="saveDialogRef" @success="handleSaveSuccess" @closed="dialog.save = false" />
+
+	<!-- 导入弹窗 -->
+	<a-modal v-model:open="dialog.import" title="导入部门" :width="500" :footer="null">
+		<a-space direction="vertical" style="width: 100%">
+			<a-alert message="导入说明" description="请先下载模板，按照模板格式填写数据后上传。如果部门名称已存在则跳过。" type="info" show-icon />
+			<a-button @click="handleDownloadTemplate" style="width: 100%">
+				<template #icon><download-outlined /></template>
+				下载导入模板
+			</a-button>
+			<a-upload
+				:file-list="importFileList"
+				:before-upload="handleImportUpload"
+				@remove="() => importFileList = []"
+				accept=".xlsx,.xls"
+				:max-count="1"
+			>
+				<a-button>
+					<template #icon><upload-outlined /></template>
+					选择文件
+				</a-button>
+			</a-upload>
+		</a-space>
+	</a-modal>
 </template>

 <script setup>
 import { ref, reactive, onMounted } from 'vue'
 import { message, Modal } from 'ant-design-vue'
 import scTable from '@/components/scTable/index.vue'
-import saveDialog from './save.vue'
+import saveDialog from './components/SaveDialog.vue'
 import authApi from '@/api/auth'
 import { useTable } from '@/hooks/useTable'

@@ -76,7 +164,8 @@ const {
 } = useTable({
 	api: authApi.departments.tree.get,
 	searchForm: {
-		keyword: ''
+		keyword: '',
+		status: null
 	},
 	columns: [],
 	needPagination: false,
@@ -86,12 +175,16 @@ const {

 // 对话框状态
 const dialog = reactive({
-	save: false
+	save: false,
+	import: false
 })

 // 弹窗引用
 const saveDialogRef = ref(null)

+// 导入文件列表
+const importFileList = ref([])
+
 // 行key
 const rowKey = 'id'

@@ -99,11 +192,13 @@ const rowKey = 'id'
 const columns = [
 	{ title: '#', dataIndex: '_index', key: '_index', width: 60, align: 'center' },
 	{ title: '部门名称', dataIndex: 'name', key: 'name', width: 300 },
+	{ title: '负责人', dataIndex: 'leader', key: 'leader', width: 120 },
+	{ title: '联系电话', dataIndex: 'phone', key: 'phone', width: 150 },
 	{ title: '排序', dataIndex: 'sort', key: 'sort', width: 100, align: 'center' },
+	{ title: '状态', dataIndex: 'status', key: 'status', width: 100, align: 'center', slot: 'status' },
 	{ title: '操作', dataIndex: 'action', key: 'action', width: 220, align: 'center', slot: 'action', fixed: 'right' }
 ]

-
 // 新增部门
 const handleAdd = () => {
 	dialog.save = true
@@ -140,7 +235,12 @@ const handleDelete = async (record) => {
 		}
 	} catch (error) {
 		console.error('删除部门失败:', error)
-		message.error('删除失败')
+		// 如果是验证错误，显示具体错误信息
+		if (error.response?.data?.message) {
+			message.error(error.response.data.message)
+		} else {
+			message.error('删除失败')
+		}
 	}
 }

@@ -153,7 +253,7 @@ const handleBatchDelete = () => {

 	Modal.confirm({
 		title: '确认删除',
-		content: `确定删除选中的 ${selectedRows.value.length} 个部门吗？如果删除项中含有子集将会被一并删除`,
+		content: `确定删除选中的 ${selectedRows.value.length} 个部门吗？如果删除项中含有子集或用户，将会被一并删除`,
 		okText: '确定',
 		cancelText: '取消',
 		okType: 'danger',
@@ -162,7 +262,7 @@ const handleBatchDelete = () => {
 				const ids = selectedRows.value.map(item => item.id)
 				const res = await authApi.departments.batchDelete.post({ ids })
 				if (res.code === 200) {
-					message.success('删除成功')
+					message.success(res.message || '删除成功')
 					selectedRows.value = []
 					refreshTable()
 				} else {
@@ -170,12 +270,127 @@ const handleBatchDelete = () => {
 				}
 			} catch (error) {
 				console.error('批量删除部门失败:', error)
-				message.error('删除失败')
+				if (error.response?.data?.message) {
+					message.error(error.response.data.message)
+				} else {
+					message.error('删除失败')
+				}
 			}
 		}
 	})
 }

+// 批量更新状态
+const handleBatchStatus = (status) => {
+	if (selectedRows.value.length === 0) {
+		message.warning('请选择要操作的部门')
+		return
+	}
+
+	Modal.confirm({
+		title: '确认操作',
+		content: `确定${status === 1 ? '启用' : '禁用'}选中的 ${selectedRows.value.length} 个部门吗？`,
+		okText: '确定',
+		cancelText: '取消',
+		onOk: async () => {
+			try {
+				const ids = selectedRows.value.map(item => item.id)
+				const res = await authApi.departments.batchStatus.post({ ids, status })
+				if (res.code === 200) {
+					message.success(res.message || '操作成功')
+					selectedRows.value = []
+					refreshTable()
+				} else {
+					message.error(res.message || '操作失败')
+				}
+			} catch (error) {
+				console.error('批量更新状态失败:', error)
+				message.error('操作失败')
+			}
+		}
+	})
+}
+
+// 导出部门
+const handleExport = async () => {
+	try {
+		let ids = []
+		if (selectedRows.value.length > 0) {
+			ids = selectedRows.value.map(item => item.id)
+		}
+		const res = await authApi.departments.export.post({ ids }, { responseType: 'blob' })
+
+		// 创建下载链接
+		const url = window.URL.createObjectURL(new Blob([res]))
+		const link = document.createElement('a')
+		link.href = url
+		link.setAttribute('download', `部门列表_${new Date().getTime()}.xlsx`)
+		document.body.appendChild(link)
+		link.click()
+		document.body.removeChild(link)
+		window.URL.revokeObjectURL(url)
+
+		message.success('导出成功')
+		selectedRows.value = []
+	} catch (error) {
+		console.error('导出失败:', error)
+		message.error('导出失败')
+	}
+}
+
+// 导入部门
+const handleImport = () => {
+	importFileList.value = []
+	dialog.import = true
+}
+
+// 上传导入文件
+const handleImportUpload = async (file) => {
+	const formData = new FormData()
+	formData.append('file', file)
+
+	try {
+		importFileList.value = [{ uid: file.uid, name: file.name, status: 'uploading' }]
+		const res = await authApi.departments.import.post(formData)
+
+		importFileList.value = []
+		dialog.import = false
+
+		if (res.code === 200) {
+			message.success(res.message || '导入成功')
+			refreshTable()
+		} else {
+			message.error(res.message || '导入失败')
+		}
+	} catch (error) {
+		console.error('导入失败:', error)
+		importFileList.value = []
+		message.error(error.response?.data?.message || '导入失败')
+	}
+
+	return false // 阻止自动上传
+}
+
+// 下载导入模板
+const handleDownloadTemplate = async () => {
+	try {
+		const res = await authApi.departments.downloadTemplate.get({ responseType: 'blob' })
+
+		// 创建下载链接
+		const url = window.URL.createObjectURL(new Blob([res]))
+		const link = document.createElement('a')
+		link.href = url
+		link.setAttribute('download', '部门导入模板.xlsx')
+		document.body.appendChild(link)
+		link.click()
+		document.body.removeChild(link)
+		window.URL.revokeObjectURL(url)
+	} catch (error) {
+		console.error('下载模板失败:', error)
+		message.error('下载模板失败')
+	}
+}
+
 // 保存成功回调
 const handleSaveSuccess = () => {
 	refreshTable()
@@ -186,18 +401,3 @@ onMounted(() => {
 	refreshTable()
 })
 </script>
-
-<style scoped lang="scss">
-.department-page {
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-	padding: 0;
-
-	.table-content {
-		flex: 1;
-		overflow: hidden;
-		background: #f5f5f5;
-	}
-}
-</style>
--- a/resources/admin/src/pages/auth/permissions/components/SaveForm.vue
+++ b/resources/admin/src/pages/auth/permissions/components/SaveForm.vue
@@ -365,7 +365,7 @@ defineExpose({

 	.form-tip {
 		font-size: 12px;
-		color: #8c8c8;
+		color: #8c8c8c;
 		margin-top: 4px;
 		line-height: 1.5;
 	}
--- a/resources/admin/src/pages/auth/permissions/index.vue
+++ b/resources/admin/src/pages/auth/permissions/index.vue
@@ -263,9 +263,3 @@ onMounted(() => {
 	loadMenuTree()
 })
 </script>
-
-<style scoped lang="scss">
-.permission-page {
-	@extend .pages-sidebar-layout;
-}
-</style>
--- a/resources/admin/src/pages/auth/permissions/save.vue
+++ b/resources/admin/src/pages/auth/permissions/save.vue
@@ -1,379 +0,0 @@
-<template>
-	<div class="save-form">
-		<a-form :model="form" :rules="rules" ref="dialogForm" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
-			<!-- 第一行：权限名称和类型 -->
-			<a-row :gutter="16">
-				<a-col :span="12">
-					<a-form-item label="权限名称" name="title">
-						<a-input v-model:value="form.title" placeholder="权限名称" allow-clear />
-					</a-form-item>
-				</a-col>
-				<a-col :span="12">
-					<a-form-item label="类型" name="type" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
-						<a-radio-group v-model:value="form.type" button-style="solid">
-							<a-radio-button value="menu">菜单</a-radio-button>
-							<a-radio-button value="api">接口</a-radio-button>
-							<a-radio-button value="button">按钮</a-radio-button>
-						</a-radio-group>
-					</a-form-item>
-				</a-col>
-			</a-row>
-
-			<!-- 第二行：上级菜单和权限编码 -->
-			<a-row :gutter="16">
-				<a-col :span="12">
-					<a-form-item label="上级权限" name="parent_id">
-						<a-tree-select v-model:value="form.parent_id" :tree-data="menuOptions"
-							:field-names="menuFieldNames" :tree-default-expand-all="false" show-icon placeholder="顶级权限"
-							allow-clear tree-node-filter-prop="title" :disabled="!!menuId" />
-					</a-form-item>
-				</a-col>
-				<a-col :span="12">
-					<a-form-item label="权限编码" name="name">
-						<a-input v-model:value="form.name" placeholder="如: system.user.list" allow-clear />
-						<div class="form-item-msg">格式：模块.功能.操作，系统唯一标识</div>
-					</a-form-item>
-				</a-col>
-			</a-row>
-
-			<!-- 第三行：路由地址和组件路径 -->
-			<a-row :gutter="16">
-				<a-col :span="12">
-					<a-form-item label="路由地址" name="path">
-						<a-input v-model:value="form.path" placeholder="/system/users" allow-clear />
-					</a-form-item>
-				</a-col>
-				<a-col :span="12">
-					<a-form-item label="组件路径" name="component">
-						<a-input v-model:value="form.component" placeholder="system/users/index" allow-clear>
-							<template #addonBefore>pages/</template>
-						</a-input>
-						<div class="form-item-msg">顶级菜单或有子菜单的父节点不需要填写</div>
-					</a-form-item>
-				</a-col>
-			</a-row>
-
-			<!-- 第四行：菜单图标和排序 -->
-			<a-row :gutter="16">
-				<a-col :span="12">
-					<a-form-item label="菜单图标" name="icon">
-						<sc-icon-picker v-model:value="form.icon" placeholder="请选择图标" />
-					</a-form-item>
-				</a-col>
-				<a-col :span="12">
-					<a-form-item label="排序" name="sort">
-						<a-input-number v-model:value="form.sort" :min="0" :max="10000" style="width: 100%" />
-					</a-form-item>
-				</a-col>
-			</a-row>
-
-			<!-- 分隔线 -->
-			<a-divider />
-
-			<!-- 选项设置区域 -->
-			<div class="options-section">
-				<h4>选项设置</h4>
-				<a-row :gutter="16">
-					<a-col :span="8">
-						<a-form-item label="是否隐藏" name="hidden" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
-							<a-checkbox v-model:checked="form.hidden">隐藏菜单</a-checkbox>
-							<a-checkbox v-model:checked="form.hiddenBreadcrumb">隐藏面包屑</a-checkbox>
-						</a-form-item>
-					</a-col>
-					<a-col :span="8">
-						<a-form-item label="是否缓存" name="keepAlive" :label-col="{ span: 8 }" :wrapper-col="{ span: 14 }">
-							<a-switch v-model:checked="form.keepAlive" />
-						</a-form-item>
-					</a-col>
-					<a-col :span="8">
-						<a-form-item label="是否固定" name="affix" :label-col="{ span: 8 }" :wrapper-col="{ span: 14 }">
-							<a-switch v-model:checked="form.affix" />
-						</a-form-item>
-					</a-col>
-				</a-row>
-			</div>
-
-			<!-- 状态 -->
-			<a-divider />
-			<a-row :gutter="16">
-				<a-col :span="12">
-					<a-form-item label="状态" name="status" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
-						<a-switch v-model:checked="statusChecked" checked-children="启用" un-checked-children="禁用" />
-					</a-form-item>
-				</a-col>
-			</a-row>
-
-			<!-- 操作按钮 -->
-			<a-form-item :wrapper-col="{ span: 18, offset: 4 }" style="margin-top: 32px">
-				<a-space>
-					<a-button type="primary" @click="handleSave" :loading="loading" size="large">保存</a-button>
-					<a-button @click="$emit('cancel')" size="large">取消</a-button>
-				</a-space>
-			</a-form-item>
-		</a-form>
-	</div>
-</template>
-
-<script setup>
-import { ref, reactive, watch, computed, onMounted } from 'vue'
-import { message } from 'ant-design-vue'
-import authApi from '@/api/auth'
-import ScIconPicker from '@/components/scIconPicker/index.vue'
-
-defineOptions({
-	name: 'PermissionSave'
-})
-
-const props = defineProps({
-	menu: { type: [Object, Array], default: () => [] },
-	menuId: { type: [Number, String], default: null },
-	parentId: { type: [Number, String], default: null }
-})
-
-const emit = defineEmits(['success', 'cancel'])
-
-// 表单数据
-const form = reactive({
-	id: '',
-	parent_id: 0,
-	name: '',
-	title: '',
-	path: '',
-	component: '',
-	icon: '',
-	sort: 0,
-	type: 'menu',
-	status: 1,
-	// meta 字段内容
-	hidden: false,
-	hiddenBreadcrumb: false,
-	keepAlive: false,
-	affix: false
-})
-
-// 状态开关计算属性
-const statusChecked = computed({
-	get: () => form.status === 1,
-	set: (val) => {
-		form.status = val ? 1 : 0
-	}
-})
-
-// 表单引用
-const dialogForm = ref()
-const loading = ref(false)
-
-// 验证规则
-const rules = {
-	name: [{ required: true, message: '请输入权限名称', trigger: 'blur' }],
-	code: [{ required: true, message: '请输入权限编码', trigger: 'blur' }],
-	type: [{ required: true, message: '请选择类型', trigger: 'change' }]
-}
-
-// 菜单选项
-const menuOptions = ref([])
-const menuFieldNames = {
-	value: 'id',
-	label: 'title',
-	children: 'children'
-}
-
-// 简单化菜单树，排除自己和子节点
-const treeToMap = (tree, excludeId = null) => {
-	const map = []
-	tree.forEach(item => {
-		if (item.id === excludeId) return // 排除自己
-		const obj = {
-			id: item.id,
-			parent_id: item.parent_id,
-			title: item.title,
-			children: item.children && item.children.length > 0 ? treeToMap(item.children, excludeId) : null
-		}
-		map.push(obj)
-	})
-	return map
-}
-
-// 查找权限节点
-const findMenuNode = (tree, id) => {
-	for (const node of tree) {
-		if (node.id === id) {
-			return node
-		}
-		if (node.children && node.children.length > 0) {
-			const found = findMenuNode(node.children, id)
-			if (found) return found
-		}
-	}
-	return null
-}
-
-// 监听菜单树变化
-watch(
-	() => props.menu,
-	(newVal) => {
-		if (newVal) {
-			// 排除当前编辑的节点，避免选择自己作为父节点
-			menuOptions.value = treeToMap(newVal, props.menuId)
-		}
-	},
-	{ deep: true, immediate: true }
-)
-
-// 监听 menuId 变化，从菜单树中查找并赋值
-watch(
-	() => props.menuId,
-	(newVal) => {
-		if (newVal && props.menu && props.menu.length > 0) {
-			const menuNode = findMenuNode(props.menu, newVal)
-			if (menuNode) {
-				setData(menuNode, props.parentId)
-			}
-		} else if (!newVal) {
-			// 清空表单
-			setData({
-				id: '',
-				parent_id: props.parentId || 0,
-				name: '',
-				title: '',
-				route: '',
-				component: '',
-				icon: '',
-				sort: 0,
-				type: 'menu',
-				status: 1,
-				hidden: false,
-				hiddenBreadcrumb: false,
-				keepAlive: false,
-				affix: false
-			})
-		}
-	}
-)
-
-// 加载权限详情
-const loadMenuDetail = async (id) => {
-	try {
-		const res = await authApi.permissions.detail.get(id)
-		if (res.code === 200 && res.data) {
-			setData(res.data, props.parentId)
-		}
-	} catch (error) {
-		console.error('加载权限详情失败:', error)
-	}
-}
-
-// 保存
-const handleSave = async () => {
-	try {
-		await dialogForm.value.validate()
-		loading.value = true
-
-		// 构建提交数据
-		const submitData = {
-			id: form.id || undefined,
-			parent_id: form.parent_id || 0,
-			name: form.name,
-			title: form.title,
-			path: form.path,
-			component: form.component,
-			icon: form.icon,
-			sort: form.sort,
-			type: form.type,
-			status: form.status,
-			meta: {
-				hidden: form.hidden,
-				hiddenBreadcrumb: form.hiddenBreadcrumb,
-				keepAlive: form.keepAlive,
-				affix: form.affix
-			}
-		}
-
-		let res = {}
-		if (form.id) {
-			res = await authApi.permissions.edit.put(form.id, submitData)
-		} else {
-			res = await authApi.permissions.add.post(submitData)
-		}
-
-		loading.value = false
-		if (res.code === 200) {
-			message.success('保存成功')
-			emit('success')
-		} else {
-			message.error(res.message || '保存失败')
-		}
-	} catch (error) {
-		console.error('表单验证失败', error)
-		loading.value = false
-	}
-}
-
-// 表单注入数据
-const setData = (data, pid) => {
-	form.id = data.id || ''
-	form.parent_id = data.parent_id !== undefined ? data.parent_id : (pid || 0)
-	form.name = data.name || ''
-	form.title = data.title || ''
-	form.path = data.path || ''
-	form.component = data.component || ''
-	form.icon = data.icon || ''
-	form.sort = data.sort || 0
-	form.type = data.type || 'menu'
-	form.status = data.status !== undefined ? data.status : 1
-
-	// 解析 meta 字段
-	const meta = data.meta && typeof data.meta === 'string' ? JSON.parse(data.meta) : (data.meta || {})
-	form.hidden = meta.hidden || false
-	form.hiddenBreadcrumb = meta.hiddenBreadcrumb || false
-	form.keepAlive = meta.keepAlive || false
-	form.affix = meta.affix || false
-}
-
-// 初始化
-onMounted(() => {
-	if (props.menuId) {
-		loadMenuDetail(props.menuId)
-	} else if (props.parentId) {
-		form.parent_id = props.parentId
-	}
-})
-
-// 暴露方法给父组件
-defineExpose({
-	setData
-})
-</script>
-
-<style scoped lang="scss">
-.save-form {
-	padding: 24px;
-	background: #fff;
-
-	.form-item-msg {
-		font-size: 12px;
-		color: #8c8c8c;
-		margin-top: 4px;
-		line-height: 1.5;
-	}
-
-	.options-section {
-		margin-top: 16px;
-
-		h4 {
-			font-size: 16px;
-			font-weight: 500;
-			color: #262626;
-			margin-bottom: 24px;
-		}
-	}
-
-	:deep(.ant-divider) {
-		margin: 32px 0;
-	}
-
-	:deep(.ant-form-item) {
-		margin-bottom: 24px;
-	}
-}
-</style>
--- a/resources/admin/src/pages/auth/roles/components/PermissionDialog.vue
+++ b/resources/admin/src/pages/auth/roles/components/PermissionDialog.vue
--- a/resources/admin/src/pages/auth/roles/components/SaveDialog.vue
+++ b/resources/admin/src/pages/auth/roles/components/SaveDialog.vue
--- a/resources/admin/src/pages/auth/roles/index.vue
+++ b/resources/admin/src/pages/auth/roles/index.vue
@@ -303,9 +303,3 @@ const permissionSuccess = () => {
 	refreshTable()
 }
 </script>
-
-<style scoped lang="scss">
-.role-page {
-	@extend .pages-base-layout;
-}
-</style>
--- a/resources/admin/src/pages/auth/users/index.vue
+++ b/resources/admin/src/pages/auth/users/index.vue
@@ -503,9 +503,3 @@ onMounted(() => {
 	loadDepartmentTree()
 })
 </script>
-
-<style scoped lang="scss">
-.user-page {
-	@extend .pages-sidebar-layout;
-}
-</style>
				`@@ -1 +0,0 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>