更新
This commit is contained in:
@@ -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([
|
return response()->json([
|
||||||
'code' => 200,
|
'code' => 200,
|
||||||
|
|||||||
@@ -56,6 +56,14 @@ class DepartmentService
|
|||||||
{
|
{
|
||||||
$query = Department::query();
|
$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'] !== '') {
|
if (isset($params['status']) && $params['status'] !== '') {
|
||||||
$query->where('status', $params['status']);
|
$query->where('status', $params['status']);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3,245 +3,44 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<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>
|
<style>
|
||||||
* {
|
*{margin:0;padding:0;box-sizing:border-box}
|
||||||
margin: 0;
|
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#f5f5f5}
|
||||||
padding: 0;
|
#app,#loading{width:100%;height:100vh}
|
||||||
box-sizing: border-box;
|
#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}
|
||||||
body {
|
.logo svg{width:36px;height:36px}
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
|
.text{color:#fff;font-size:24px;font-weight:600;margin-bottom:30px}
|
||||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
.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}
|
||||||
min-height: 100vh;
|
@keyframes rotate{to{transform:rotate(360deg)}}
|
||||||
display: flex;
|
@keyframes scale{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
|
||||||
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%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<!-- 加载页面 -->
|
<div id="loading">
|
||||||
<div id="loading" class="loading-container">
|
<div class="logo">
|
||||||
<div class="loading-logo">
|
<svg viewBox="0 0 24 24" fill="none">
|
||||||
<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"/>
|
<rect width="24" height="24" rx="4" fill="#667eea"/>
|
||||||
<path d="M7 8H17V10H7V8Z" fill="white"/>
|
<path d="M7 8h10v2H7V8Z" fill="white"/>
|
||||||
<path d="M7 11H17V13H7V11Z" fill="white"/>
|
<path d="M7 11h10v2H7v-2Z" fill="white"/>
|
||||||
<path d="M7 14H14V16H7V14Z" fill="white"/>
|
<path d="M7 14h7v2H7v-2Z" fill="white"/>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<div class="loading-text">VueAdmin</div>
|
<div class="text"><script>document.write(window.__APP_NAME__)</script></div>
|
||||||
<div class="loading-subtitle">正在加载管理后台...</div>
|
<div class="spinner"></div>
|
||||||
<div class="spinner">
|
|
||||||
<div class="spinner-circle"></div>
|
|
||||||
<div class="spinner-circle"></div>
|
|
||||||
<div class="spinner-circle"></div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="progress-bar">
|
|
||||||
<div class="progress-bar-inner"></div>
|
|
||||||
</div>
|
|
||||||
<div class="loading-tips">首次加载可能需要几秒钟，请耐心等待</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Vue 应用挂载点 -->
|
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
|
|
||||||
<!-- 隐藏加载页面的脚本 -->
|
|
||||||
<script>
|
<script>
|
||||||
window.addEventListener('load', function() {
|
window.onload=function(){setTimeout(function(){var e=document.getElementById('loading');e&&e.classList.add('hidden')},300)}
|
||||||
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>
|
||||||
|
|
||||||
<script type="module" src="/src/main.js"></script>
|
<script type="module" src="/src/main.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
14
resources/admin/public/config.js
Normal file
14
resources/admin/public/config.js
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
// 配置覆盖文件
|
||||||
|
// 此文件中的配置项会覆盖 src/config/index.js 中的默认配置
|
||||||
|
// 修改后无需重新构建，只需刷新页面即可生效
|
||||||
|
|
||||||
|
window.SY_CONFIG = {
|
||||||
|
// 项目名称
|
||||||
|
APP_NAME: '系统管理后台',
|
||||||
|
|
||||||
|
// 示例：覆盖接口地址
|
||||||
|
// API_URL: 'http://your-domain.com/admin/',
|
||||||
|
|
||||||
|
// 示例：覆盖超时时间
|
||||||
|
// TIMEOUT: 30000,
|
||||||
|
}
|
||||||
@@ -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>
|
|
||||||
|
Before Width: | Height: | Size: 1.5 KiB |
@@ -237,8 +237,8 @@ export default {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
tree: {
|
tree: {
|
||||||
get: async function () {
|
get: async function (params) {
|
||||||
return await request.get('departments/tree')
|
return await request.get('departments/tree', { params })
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
all: {
|
all: {
|
||||||
|
|||||||
94
resources/admin/src/assets/style/pages.scss
Normal file
94
resources/admin/src/assets/style/pages.scss
Normal file
@@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,4 +1,5 @@
|
|||||||
export default {
|
// 默认配置
|
||||||
|
const defaultConfig = {
|
||||||
APP_NAME: 'vueadmin',
|
APP_NAME: 'vueadmin',
|
||||||
DASHBOARD_URL: '/dashboard',
|
DASHBOARD_URL: '/dashboard',
|
||||||
|
|
||||||
@@ -57,3 +58,10 @@ export default {
|
|||||||
//DES加密秘钥，必须是8字节
|
//DES加密秘钥，必须是8字节
|
||||||
LS_DES_key: '12345678',
|
LS_DES_key: '12345678',
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 合并 public/config.js 中的覆盖配置
|
||||||
|
if (typeof window !== 'undefined' && window.SY_CONFIG) {
|
||||||
|
Object.assign(defaultConfig, window.SY_CONFIG)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default defaultConfig
|
||||||
|
|||||||
@@ -3,6 +3,7 @@ import { createApp } from 'vue'
|
|||||||
import Antd from 'ant-design-vue'
|
import Antd from 'ant-design-vue'
|
||||||
import 'ant-design-vue/dist/reset.css'
|
import 'ant-design-vue/dist/reset.css'
|
||||||
import '@/assets/style/app.scss'
|
import '@/assets/style/app.scss'
|
||||||
|
import '@/assets/style/pages.scss'
|
||||||
import App from './App.vue'
|
import App from './App.vue'
|
||||||
import router from './router'
|
import router from './router'
|
||||||
import pinia from './stores'
|
import pinia from './stores'
|
||||||
|
|||||||
@@ -4,7 +4,7 @@
|
|||||||
<a-form :model="form" :rules="rules" :disabled="mode === 'show'" ref="dialogForm" :label-col="{ span: 5 }"
|
<a-form :model="form" :rules="rules" :disabled="mode === 'show'" ref="dialogForm" :label-col="{ span: 5 }"
|
||||||
:wrapper-col="{ span: 18 }">
|
:wrapper-col="{ span: 18 }">
|
||||||
<a-form-item label="上级部门" name="parent_id">
|
<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="请选择上级部门"
|
:field-names="departmentFieldNames" :tree-default-expand-all="false" placeholder="请选择上级部门"
|
||||||
allow-clear tree-node-filter-prop="name"
|
allow-clear tree-node-filter-prop="name"
|
||||||
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" />
|
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" />
|
||||||
@@ -21,6 +21,12 @@
|
|||||||
<a-form-item label="排序" name="sort">
|
<a-form-item label="排序" name="sort">
|
||||||
<a-input-number v-model:value="form.sort" :min="0" :max="10000" style="width: 100%" placeholder="请输入排序" />
|
<a-input-number v-model:value="form.sort" :min="0" :max="10000" style="width: 100%" placeholder="请输入排序" />
|
||||||
</a-form-item>
|
</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 }">
|
<a-form-item :wrapper-col="{ offset: 5 }">
|
||||||
<div style="display: flex; gap: 10px">
|
<div style="display: flex; gap: 10px">
|
||||||
<a-button v-if="mode !== 'show'" type="primary" :loading="isSaveing" @click="submit">保 存</a-button>
|
<a-button v-if="mode !== 'show'" type="primary" :loading="isSaveing" @click="submit">保 存</a-button>
|
||||||
@@ -32,12 +38,12 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, reactive } from 'vue'
|
import { ref, reactive, computed } from 'vue'
|
||||||
import { message } from 'ant-design-vue'
|
import { message } from 'ant-design-vue'
|
||||||
import authApi from '@/api/auth'
|
import authApi from '@/api/auth'
|
||||||
|
|
||||||
defineOptions({
|
defineOptions({
|
||||||
name: 'DepartmentSave'
|
name: 'DepartmentSaveDialog'
|
||||||
})
|
})
|
||||||
|
|
||||||
const emit = defineEmits(['success', 'closed'])
|
const emit = defineEmits(['success', 'closed'])
|
||||||
@@ -82,6 +88,27 @@ const departmentFieldNames = {
|
|||||||
children: 'children'
|
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') => {
|
const open = (openMode = 'add') => {
|
||||||
mode.value = openMode
|
mode.value = openMode
|
||||||
@@ -148,6 +175,7 @@ const loadDepartments = async () => {
|
|||||||
// 表单注入数据
|
// 表单注入数据
|
||||||
const setData = (data) => {
|
const setData = (data) => {
|
||||||
form.id = data.id
|
form.id = data.id
|
||||||
|
currentEditId.value = data.id
|
||||||
form.name = data.name
|
form.name = data.name
|
||||||
form.leader = data.leader || ''
|
form.leader = data.leader || ''
|
||||||
form.phone = data.phone || ''
|
form.phone = data.phone || ''
|
||||||
@@ -1,42 +1,107 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="pages department-page">
|
<div class="pages-base-layout department-page">
|
||||||
|
<!-- 工具栏区域 -->
|
||||||
<div class="tool-bar">
|
<div class="tool-bar">
|
||||||
<div class="left-panel">
|
<div class="left-panel">
|
||||||
<a-form layout="inline" :model="searchForm">
|
<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-input v-model:value="searchForm.keyword" placeholder="请输入部门名称" allow-clear style="width: 200px" />
|
||||||
</a-form-item>
|
</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-form-item>
|
||||||
<a-space>
|
<a-space>
|
||||||
<a-button type="primary" @click="handleSearch">
|
<a-button type="primary" @click="handleSearch">
|
||||||
<template #icon><search-outlined /></template>
|
<template #icon><search-outlined /></template>
|
||||||
|
搜索
|
||||||
</a-button>
|
</a-button>
|
||||||
<a-button @click="handleReset">
|
<a-button @click="handleReset">
|
||||||
<template #icon><redo-outlined /></template>
|
<template #icon><redo-outlined /></template>
|
||||||
|
重置
|
||||||
</a-button>
|
</a-button>
|
||||||
</a-space>
|
</a-space>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
</a-form>
|
</a-form>
|
||||||
</div>
|
</div>
|
||||||
<div class="right-panel">
|
<div class="right-panel">
|
||||||
|
<a-space>
|
||||||
<a-button type="primary" @click="handleAdd">
|
<a-button type="primary" @click="handleAdd">
|
||||||
<template #icon><plus-outlined /></template>
|
<template #icon><plus-outlined /></template>
|
||||||
|
新增
|
||||||
</a-button>
|
</a-button>
|
||||||
<a-button danger :disabled="selectedRows.length === 0" @click="handleBatchDelete">
|
<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>
|
<template #icon><delete-outlined /></template>
|
||||||
</a-button>
|
批量删除
|
||||||
|
</a-menu-item>
|
||||||
|
</a-menu>
|
||||||
|
</template>
|
||||||
|
</a-dropdown>
|
||||||
|
</a-space>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- 表格内容区域 -->
|
||||||
<div class="table-content">
|
<div class="table-content">
|
||||||
<scTable ref="tableRef" :columns="columns" :data-source="tableData" :loading="loading" :pagination="false"
|
<scTable
|
||||||
:row-key="rowKey" :row-selection="rowSelection" @refresh="refreshTable" @select="handleSelectChange"
|
ref="tableRef"
|
||||||
@selectAll="handleSelectAll">
|
: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 }">
|
<template #action="{ record }">
|
||||||
<a-space>
|
<a-space>
|
||||||
<a-button type="link" size="small" @click="handleView(record)">查看</a-button>
|
<a-button type="link" size="small" @click="handleView(record)">
|
||||||
<a-button type="link" size="small" @click="handleEdit(record)">编辑</a-button>
|
<template #icon><eye-outlined /></template>
|
||||||
<a-popconfirm title="确定删除该部门吗？" @confirm="handleDelete(record)">
|
查看
|
||||||
<a-button type="link" size="small" danger>删除</a-button>
|
</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-popconfirm>
|
||||||
</a-space>
|
</a-space>
|
||||||
</template>
|
</template>
|
||||||
@@ -44,15 +109,38 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 新增/编辑部门弹窗 -->
|
<!-- 新增/编辑/查看部门弹窗 -->
|
||||||
<save-dialog v-if="dialog.save" ref="saveDialogRef" @success="handleSaveSuccess" @closed="dialog.save = false" />
|
<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>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, reactive, onMounted } from 'vue'
|
import { ref, reactive, onMounted } from 'vue'
|
||||||
import { message, Modal } from 'ant-design-vue'
|
import { message, Modal } from 'ant-design-vue'
|
||||||
import scTable from '@/components/scTable/index.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 authApi from '@/api/auth'
|
||||||
import { useTable } from '@/hooks/useTable'
|
import { useTable } from '@/hooks/useTable'
|
||||||
|
|
||||||
@@ -76,7 +164,8 @@ const {
|
|||||||
} = useTable({
|
} = useTable({
|
||||||
api: authApi.departments.tree.get,
|
api: authApi.departments.tree.get,
|
||||||
searchForm: {
|
searchForm: {
|
||||||
keyword: ''
|
keyword: '',
|
||||||
|
status: null
|
||||||
},
|
},
|
||||||
columns: [],
|
columns: [],
|
||||||
needPagination: false,
|
needPagination: false,
|
||||||
@@ -86,12 +175,16 @@ const {
|
|||||||
|
|
||||||
// 对话框状态
|
// 对话框状态
|
||||||
const dialog = reactive({
|
const dialog = reactive({
|
||||||
save: false
|
save: false,
|
||||||
|
import: false
|
||||||
})
|
})
|
||||||
|
|
||||||
// 弹窗引用
|
// 弹窗引用
|
||||||
const saveDialogRef = ref(null)
|
const saveDialogRef = ref(null)
|
||||||
|
|
||||||
|
// 导入文件列表
|
||||||
|
const importFileList = ref([])
|
||||||
|
|
||||||
// 行key
|
// 行key
|
||||||
const rowKey = 'id'
|
const rowKey = 'id'
|
||||||
|
|
||||||
@@ -99,11 +192,13 @@ const rowKey = 'id'
|
|||||||
const columns = [
|
const columns = [
|
||||||
{ title: '#', dataIndex: '_index', key: '_index', width: 60, align: 'center' },
|
{ title: '#', dataIndex: '_index', key: '_index', width: 60, align: 'center' },
|
||||||
{ title: '部门名称', dataIndex: 'name', key: 'name', width: 300 },
|
{ 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: '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' }
|
{ title: '操作', dataIndex: 'action', key: 'action', width: 220, align: 'center', slot: 'action', fixed: 'right' }
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|
||||||
// 新增部门
|
// 新增部门
|
||||||
const handleAdd = () => {
|
const handleAdd = () => {
|
||||||
dialog.save = true
|
dialog.save = true
|
||||||
@@ -140,9 +235,14 @@ const handleDelete = async (record) => {
|
|||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('删除部门失败:', error)
|
console.error('删除部门失败:', error)
|
||||||
|
// 如果是验证错误，显示具体错误信息
|
||||||
|
if (error.response?.data?.message) {
|
||||||
|
message.error(error.response.data.message)
|
||||||
|
} else {
|
||||||
message.error('删除失败')
|
message.error('删除失败')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// 批量删除
|
// 批量删除
|
||||||
const handleBatchDelete = () => {
|
const handleBatchDelete = () => {
|
||||||
@@ -153,7 +253,7 @@ const handleBatchDelete = () => {
|
|||||||
|
|
||||||
Modal.confirm({
|
Modal.confirm({
|
||||||
title: '确认删除',
|
title: '确认删除',
|
||||||
content: `确定删除选中的 ${selectedRows.value.length} 个部门吗？如果删除项中含有子集将会被一并删除`,
|
content: `确定删除选中的 ${selectedRows.value.length} 个部门吗？如果删除项中含有子集或用户，将会被一并删除`,
|
||||||
okText: '确定',
|
okText: '确定',
|
||||||
cancelText: '取消',
|
cancelText: '取消',
|
||||||
okType: 'danger',
|
okType: 'danger',
|
||||||
@@ -162,7 +262,7 @@ const handleBatchDelete = () => {
|
|||||||
const ids = selectedRows.value.map(item => item.id)
|
const ids = selectedRows.value.map(item => item.id)
|
||||||
const res = await authApi.departments.batchDelete.post({ ids })
|
const res = await authApi.departments.batchDelete.post({ ids })
|
||||||
if (res.code === 200) {
|
if (res.code === 200) {
|
||||||
message.success('删除成功')
|
message.success(res.message || '删除成功')
|
||||||
selectedRows.value = []
|
selectedRows.value = []
|
||||||
refreshTable()
|
refreshTable()
|
||||||
} else {
|
} else {
|
||||||
@@ -170,12 +270,127 @@ const handleBatchDelete = () => {
|
|||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('批量删除部门失败:', error)
|
console.error('批量删除部门失败:', error)
|
||||||
|
if (error.response?.data?.message) {
|
||||||
|
message.error(error.response.data.message)
|
||||||
|
} else {
|
||||||
message.error('删除失败')
|
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 = () => {
|
const handleSaveSuccess = () => {
|
||||||
refreshTable()
|
refreshTable()
|
||||||
@@ -186,18 +401,3 @@ onMounted(() => {
|
|||||||
refreshTable()
|
refreshTable()
|
||||||
})
|
})
|
||||||
</script>
|
</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>
|
|
||||||
|
|||||||
@@ -365,7 +365,7 @@ defineExpose({
|
|||||||
|
|
||||||
.form-tip {
|
.form-tip {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #8c8c8;
|
color: #8c8c8c;
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -263,9 +263,3 @@ onMounted(() => {
|
|||||||
loadMenuTree()
|
loadMenuTree()
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.permission-page {
|
|
||||||
@extend .pages-sidebar-layout;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@@ -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>
|
|
||||||
@@ -303,9 +303,3 @@ const permissionSuccess = () => {
|
|||||||
refreshTable()
|
refreshTable()
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.role-page {
|
|
||||||
@extend .pages-base-layout;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@@ -503,9 +503,3 @@ onMounted(() => {
|
|||||||
loadDepartmentTree()
|
loadDepartmentTree()
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.user-page {
|
|
||||||
@extend .pages-sidebar-layout;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
Reference in New Issue
Block a user