|
@@ -6,88 +6,564 @@
|
|
|
<title>部门管理</title>
|
|
<title>部门管理</title>
|
|
|
<link rel="stylesheet" href="../../lib/layui/css/layui.css">
|
|
<link rel="stylesheet" href="../../lib/layui/css/layui.css">
|
|
|
<style>
|
|
<style>
|
|
|
- body { padding: 15px; }
|
|
|
|
|
- .status-green { color: #5fb878; }
|
|
|
|
|
- .status-red { color: #ff5722; }
|
|
|
|
|
|
|
+ body { padding: 15px; background: #f5f7fa; }
|
|
|
|
|
+
|
|
|
|
|
+ .dept-container {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ gap: 20px;
|
|
|
|
|
+ height: calc(100vh - 90px);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* 左侧树形区域 */
|
|
|
|
|
+ .dept-tree-panel {
|
|
|
|
|
+ width: 400px;
|
|
|
|
|
+ background: #fff;
|
|
|
|
|
+ border-radius: 8px;
|
|
|
|
|
+ box-shadow: 0 2px 12px rgba(0,0,0,0.08);
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .panel-header {
|
|
|
|
|
+ padding: 16px 20px;
|
|
|
|
|
+ border-bottom: 1px solid #ebeef5;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .panel-header h3 {
|
|
|
|
|
+ margin: 0;
|
|
|
|
|
+ font-size: 16px;
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+ color: #303133;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .search-box {
|
|
|
|
|
+ padding: 12px 20px;
|
|
|
|
|
+ border-bottom: 1px solid #f0f2f5;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .search-box input {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ padding: 8px 12px;
|
|
|
|
|
+ border: 1px solid #dcdfe6;
|
|
|
|
|
+ border-radius: 4px;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ transition: all 0.3s;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .search-box input:focus {
|
|
|
|
|
+ border-color: #409eff;
|
|
|
|
|
+ outline: none;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .tree-content {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ overflow-y: auto;
|
|
|
|
|
+ padding: 12px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* 树形节点样式 */
|
|
|
|
|
+ .custom-tree-node {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ padding: 8px 12px;
|
|
|
|
|
+ border-radius: 6px;
|
|
|
|
|
+ transition: all 0.2s;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ margin-bottom: 4px;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .custom-tree-node:hover {
|
|
|
|
|
+ background: #f5f7fa;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .custom-tree-node.active {
|
|
|
|
|
+ background: #ecf5ff;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .node-icon {
|
|
|
|
|
+ width: 28px;
|
|
|
|
|
+ height: 28px;
|
|
|
|
|
+ border-radius: 6px;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ margin-right: 10px;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ background: #e1f3f8;
|
|
|
|
|
+ color: #009688;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .node-info {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ min-width: 0;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .node-name {
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ color: #303133;
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ white-space: nowrap;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ text-overflow: ellipsis;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .node-code {
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+ color: #909399;
|
|
|
|
|
+ margin-top: 2px;
|
|
|
|
|
+ white-space: nowrap;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ text-overflow: ellipsis;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .node-actions {
|
|
|
|
|
+ display: none;
|
|
|
|
|
+ gap: 6px;
|
|
|
|
|
+ margin-left: 10px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .custom-tree-node:hover .node-actions {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .node-actions button {
|
|
|
|
|
+ width: 28px;
|
|
|
|
|
+ height: 28px;
|
|
|
|
|
+ border: none;
|
|
|
|
|
+ border-radius: 4px;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ transition: all 0.2s;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .node-actions .btn-edit { background: #ecf5ff; color: #409eff; }
|
|
|
|
|
+ .node-actions .btn-edit:hover { background: #409eff; color: #fff; }
|
|
|
|
|
+ .node-actions .btn-add { background: #f0f9eb; color: #67c23a; }
|
|
|
|
|
+ .node-actions .btn-add:hover { background: #67c23a; color: #fff; }
|
|
|
|
|
+ .node-actions .btn-del { background: #fef0f0; color: #f56c6c; }
|
|
|
|
|
+ .node-actions .btn-del:hover { background: #f56c6c; color: #fff; }
|
|
|
|
|
+
|
|
|
|
|
+ .node-expand {
|
|
|
|
|
+ width: 20px;
|
|
|
|
|
+ height: 20px;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ color: #909399;
|
|
|
|
|
+ margin-right: 5px;
|
|
|
|
|
+ transition: transform 0.3s;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .node-expand.expanded { transform: rotate(90deg); }
|
|
|
|
|
+ .node-expand.empty { visibility: hidden; }
|
|
|
|
|
+
|
|
|
|
|
+ .children-nodes {
|
|
|
|
|
+ padding-left: 20px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* 右侧详情区域 */
|
|
|
|
|
+ .dept-detail-panel {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ background: #fff;
|
|
|
|
|
+ border-radius: 8px;
|
|
|
|
|
+ box-shadow: 0 2px 12px rgba(0,0,0,0.08);
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .detail-header {
|
|
|
|
|
+ padding: 16px 20px;
|
|
|
|
|
+ border-bottom: 1px solid #ebeef5;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .detail-header h3 {
|
|
|
|
|
+ margin: 0;
|
|
|
|
|
+ font-size: 16px;
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+ color: #303133;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .detail-content {
|
|
|
|
|
+ padding: 24px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .detail-empty {
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ padding: 80px 0;
|
|
|
|
|
+ color: #909399;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .detail-empty i {
|
|
|
|
|
+ font-size: 60px;
|
|
|
|
|
+ margin-bottom: 16px;
|
|
|
|
|
+ color: #dcdfe6;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .info-grid {
|
|
|
|
|
+ display: grid;
|
|
|
|
|
+ grid-template-columns: repeat(2, 1fr);
|
|
|
|
|
+ gap: 20px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .info-item {
|
|
|
|
|
+ padding: 16px;
|
|
|
|
|
+ background: #fafafa;
|
|
|
|
|
+ border-radius: 6px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .info-item.full-width {
|
|
|
|
|
+ grid-column: span 2;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .info-label {
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+ color: #909399;
|
|
|
|
|
+ margin-bottom: 6px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .info-value {
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ color: #303133;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .dept-status {
|
|
|
|
|
+ display: inline-block;
|
|
|
|
|
+ padding: 2px 10px;
|
|
|
|
|
+ border-radius: 4px;
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .dept-status.normal { background: #f0f9eb; color: #67c23a; }
|
|
|
|
|
+ .dept-status.disabled { background: #f4f4f5; color: #909399; }
|
|
|
|
|
+
|
|
|
|
|
+ /* 按钮样式 */
|
|
|
|
|
+ .btn-primary {
|
|
|
|
|
+ background: #409eff;
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ border: none;
|
|
|
|
|
+ padding: 8px 16px;
|
|
|
|
|
+ border-radius: 4px;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ display: inline-flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ gap: 6px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .btn-primary:hover {
|
|
|
|
|
+ background: #66b1ff;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .btn-default {
|
|
|
|
|
+ background: #fff;
|
|
|
|
|
+ color: #606266;
|
|
|
|
|
+ border: 1px solid #dcdfe6;
|
|
|
|
|
+ padding: 8px 16px;
|
|
|
|
|
+ border-radius: 4px;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .btn-default:hover {
|
|
|
|
|
+ color: #409eff;
|
|
|
|
|
+ border-color: #c6e2ff;
|
|
|
|
|
+ background: #ecf5ff;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* 滚动条样式 */
|
|
|
|
|
+ .tree-content::-webkit-scrollbar,
|
|
|
|
|
+ .detail-content::-webkit-scrollbar {
|
|
|
|
|
+ width: 6px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .tree-content::-webkit-scrollbar-thumb,
|
|
|
|
|
+ .detail-content::-webkit-scrollbar-thumb {
|
|
|
|
|
+ background: #dcdfe6;
|
|
|
|
|
+ border-radius: 3px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .tree-content::-webkit-scrollbar-track,
|
|
|
|
|
+ .detail-content::-webkit-scrollbar-track {
|
|
|
|
|
+ background: #f5f7fa;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* 动画 */
|
|
|
|
|
+ @keyframes fadeIn {
|
|
|
|
|
+ from { opacity: 0; transform: translateY(10px); }
|
|
|
|
|
+ to { opacity: 1; transform: translateY(0); }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .detail-content {
|
|
|
|
|
+ animation: fadeIn 0.3s ease;
|
|
|
|
|
+ }
|
|
|
</style>
|
|
</style>
|
|
|
</head>
|
|
</head>
|
|
|
<body>
|
|
<body>
|
|
|
- <div class="table-toolbar">
|
|
|
|
|
- <button class="layui-btn layui-btn-sm" id="btnAdd"><i class="layui-icon layui-icon-add-1"></i> 添加</button>
|
|
|
|
|
|
|
+ <div class="dept-container">
|
|
|
|
|
+ <!-- 左侧树形区域 -->
|
|
|
|
|
+ <div class="dept-tree-panel">
|
|
|
|
|
+ <div class="panel-header">
|
|
|
|
|
+ <h3><i class="layui-icon layui-icon-app"></i> 部门列表</h3>
|
|
|
|
|
+ <button class="btn-primary" onclick="addDept(0)">
|
|
|
|
|
+ <i class="layui-icon layui-icon-add-1"></i> 添加
|
|
|
|
|
+ </button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="search-box">
|
|
|
|
|
+ <input type="text" id="searchInput" placeholder="搜索部门名称..." oninput="filterDept(this.value)">
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="tree-content" id="deptTree"></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 右侧详情区域 -->
|
|
|
|
|
+ <div class="dept-detail-panel">
|
|
|
|
|
+ <div class="detail-header">
|
|
|
|
|
+ <h3><i class="layui-icon layui-icon-survey"></i> 部门详情</h3>
|
|
|
|
|
+ <div id="detailActions" style="display: none;">
|
|
|
|
|
+ <button class="btn-default" onclick="editCurrentDept()">
|
|
|
|
|
+ <i class="layui-icon layui-icon-edit"></i> 编辑
|
|
|
|
|
+ </button>
|
|
|
|
|
+ <button class="btn-default" onclick="addChildDept()">
|
|
|
|
|
+ <i class="layui-icon layui-icon-add-1"></i> 添加下级
|
|
|
|
|
+ </button>
|
|
|
|
|
+ <button class="btn-default" style="color: #f56c6c;" onclick="delCurrentDept()">
|
|
|
|
|
+ <i class="layui-icon layui-icon-delete"></i> 删除
|
|
|
|
|
+ </button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="detail-content" id="detailContent">
|
|
|
|
|
+ <div class="detail-empty">
|
|
|
|
|
+ <i class="layui-icon layui-icon-survey"></i>
|
|
|
|
|
+ <p>请选择一个部门查看详情</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
-
|
|
|
|
|
- <table id="tableList" lay-filter="tableList"></table>
|
|
|
|
|
-
|
|
|
|
|
- <script type="text/html" id="toolbar">
|
|
|
|
|
- <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i> 编辑</a>
|
|
|
|
|
- <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i> 删除</a>
|
|
|
|
|
- </script>
|
|
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
<script src="../../lib/jquery.min.js"></script>
|
|
<script src="../../lib/jquery.min.js"></script>
|
|
|
<script src="../../lib/layui/layui.js"></script>
|
|
<script src="../../lib/layui/layui.js"></script>
|
|
|
<script src="../../js/config.js"></script>
|
|
<script src="../../js/config.js"></script>
|
|
|
<script src="../../js/common.js"></script>
|
|
<script src="../../js/common.js"></script>
|
|
|
<script>
|
|
<script>
|
|
|
- layui.use(['table', 'layer', 'tree'], function() {
|
|
|
|
|
- var table = layui.table;
|
|
|
|
|
- var layer = layui.layer;
|
|
|
|
|
-
|
|
|
|
|
- // 使用树形表格
|
|
|
|
|
- var tableIns = table.render({
|
|
|
|
|
- elem: '#tableList',
|
|
|
|
|
- url: Config.getApiUrl(Config.api.department.tree),
|
|
|
|
|
- method: 'get',
|
|
|
|
|
- headers: function() {
|
|
|
|
|
- var token = localStorage.getItem('token');
|
|
|
|
|
- return token ? { 'Authorization': token } : {};
|
|
|
|
|
- },
|
|
|
|
|
- response: {
|
|
|
|
|
- statusName: 'code',
|
|
|
|
|
- statusCode: 200,
|
|
|
|
|
- dataName: 'data'
|
|
|
|
|
- },
|
|
|
|
|
- cols: [[
|
|
|
|
|
- { field: 'deptName', title: '部门名称', width: 250 },
|
|
|
|
|
- { field: 'deptCode', title: '部门编码', width: 150 },
|
|
|
|
|
- { field: 'sort', title: '排序', width: 80 },
|
|
|
|
|
- { fixed: 'right', title: '操作', width: 150, align: 'center', toolbar: '#toolbar' }
|
|
|
|
|
- ]],
|
|
|
|
|
- parseData: function(res) {
|
|
|
|
|
- return {
|
|
|
|
|
- code: res.code,
|
|
|
|
|
- data: res.data || []
|
|
|
|
|
- };
|
|
|
|
|
|
|
+ var currentDept = null;
|
|
|
|
|
+ var deptData = [];
|
|
|
|
|
+
|
|
|
|
|
+ // 加载部门数据
|
|
|
|
|
+ function loadDeptTree() {
|
|
|
|
|
+ Common.get(Config.api.department.tree, function(res) {
|
|
|
|
|
+ if (res.code === 200) {
|
|
|
|
|
+ deptData = res.data || [];
|
|
|
|
|
+ renderTree(deptData);
|
|
|
}
|
|
}
|
|
|
});
|
|
});
|
|
|
-
|
|
|
|
|
- $('#btnAdd').click(function() {
|
|
|
|
|
- Common.open({
|
|
|
|
|
- title: '添加部门',
|
|
|
|
|
- area: ['550px', '400px'],
|
|
|
|
|
- content: 'department_form.html?id='
|
|
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 渲染树形结构
|
|
|
|
|
+ function renderTree(data, container) {
|
|
|
|
|
+ container = container || $('#deptTree');
|
|
|
|
|
+ container.empty();
|
|
|
|
|
+
|
|
|
|
|
+ data.forEach(function(item) {
|
|
|
|
|
+ var hasChildren = item.children && item.children.length > 0;
|
|
|
|
|
+
|
|
|
|
|
+ var node = $('<div class="custom-tree-node" data-id="' + item.id + '">' +
|
|
|
|
|
+ '<span class="node-expand ' + (hasChildren ? 'expanded' : 'empty') + '" onclick="toggleNode(this, event)">' +
|
|
|
|
|
+ '<i class="layui-icon layui-icon-right"></i></span>' +
|
|
|
|
|
+ '<span class="node-icon"><i class="layui-icon layui-iconorganization"></i></span>' +
|
|
|
|
|
+ '<div class="node-info">' +
|
|
|
|
|
+ '<div class="node-name">' + item.deptName + '</div>' +
|
|
|
|
|
+ '<div class="node-code">' + (item.deptCode || '') + '</div>' +
|
|
|
|
|
+ '</div>' +
|
|
|
|
|
+ '</div>');
|
|
|
|
|
+
|
|
|
|
|
+ container.append(node);
|
|
|
|
|
+
|
|
|
|
|
+ // 存储完整数据
|
|
|
|
|
+ node.data('deptData', item);
|
|
|
|
|
+
|
|
|
|
|
+ // 点击选中
|
|
|
|
|
+ node.on('click', function(e) {
|
|
|
|
|
+ if (!$(e.target).closest('.node-actions').length) {
|
|
|
|
|
+ selectNode($(this));
|
|
|
|
|
+ }
|
|
|
});
|
|
});
|
|
|
|
|
+
|
|
|
|
|
+ // 子节点
|
|
|
|
|
+ if (hasChildren) {
|
|
|
|
|
+ var childrenContainer = $('<div class="children-nodes"></div>');
|
|
|
|
|
+ container.append(childrenContainer);
|
|
|
|
|
+ renderTree(item.children, childrenContainer);
|
|
|
|
|
+ }
|
|
|
});
|
|
});
|
|
|
-
|
|
|
|
|
- table.on('tool(tableList)', function(obj) {
|
|
|
|
|
- var data = obj.data;
|
|
|
|
|
- var event = obj.event;
|
|
|
|
|
-
|
|
|
|
|
- if (event === 'edit') {
|
|
|
|
|
- Common.open({
|
|
|
|
|
- title: '编辑部门',
|
|
|
|
|
- area: ['550px', '400px'],
|
|
|
|
|
- content: 'department_form.html?id=' + data.id
|
|
|
|
|
- });
|
|
|
|
|
- } else if (event === 'del') {
|
|
|
|
|
- Common.confirm('确定要删除部门 【' + data.deptName + '】 吗?', function() {
|
|
|
|
|
- Common.del(Config.api.department.remove + '/' + data.id, function(res) {
|
|
|
|
|
- Common.success('删除成功', function() {
|
|
|
|
|
- obj.del();
|
|
|
|
|
- });
|
|
|
|
|
- });
|
|
|
|
|
- });
|
|
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 展开/折叠节点
|
|
|
|
|
+ function toggleNode(element, event) {
|
|
|
|
|
+ event.stopPropagation();
|
|
|
|
|
+ var $this = $(element);
|
|
|
|
|
+ var $children = $this.closest('.custom-tree-node').siblings('.children-nodes');
|
|
|
|
|
+
|
|
|
|
|
+ if ($children.length > 0) {
|
|
|
|
|
+ $this.toggleClass('expanded');
|
|
|
|
|
+ $children.slideToggle(200);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 选中节点
|
|
|
|
|
+ function selectNode($node) {
|
|
|
|
|
+ $('.custom-tree-node').removeClass('active');
|
|
|
|
|
+ $node.addClass('active');
|
|
|
|
|
+
|
|
|
|
|
+ currentDept = $node.data('deptData');
|
|
|
|
|
+ showDetail(currentDept);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 显示详情
|
|
|
|
|
+ function showDetail(dept) {
|
|
|
|
|
+ $('#detailActions').show();
|
|
|
|
|
+
|
|
|
|
|
+ var statusClass = dept.status === '1' || dept.status === 1 ? 'normal' : 'disabled';
|
|
|
|
|
+ var statusText = dept.status === '1' || dept.status === 1 ? '正常' : '停用';
|
|
|
|
|
+
|
|
|
|
|
+ var html = '<div class="info-grid">' +
|
|
|
|
|
+ '<div class="info-item">' +
|
|
|
|
|
+ '<div class="info-label">部门名称</div>' +
|
|
|
|
|
+ '<div class="info-value">' + dept.deptName + '</div>' +
|
|
|
|
|
+ '</div>' +
|
|
|
|
|
+ '<div class="info-item">' +
|
|
|
|
|
+ '<div class="info-label">部门编码</div>' +
|
|
|
|
|
+ '<div class="info-value">' + (dept.deptCode || '无') + '</div>' +
|
|
|
|
|
+ '</div>' +
|
|
|
|
|
+ '<div class="info-item">' +
|
|
|
|
|
+ '<div class="info-label">部门状态</div>' +
|
|
|
|
|
+ '<div class="info-value"><span class="dept-status ' + statusClass + '">' + statusText + '</span></div>' +
|
|
|
|
|
+ '</div>' +
|
|
|
|
|
+ '<div class="info-item">' +
|
|
|
|
|
+ '<div class="info-label">排序号</div>' +
|
|
|
|
|
+ '<div class="info-value">' + (dept.sort || 0) + '</div>' +
|
|
|
|
|
+ '</div>' +
|
|
|
|
|
+ '<div class="info-item full-width">' +
|
|
|
|
|
+ '<div class="info-label">上级部门</div>' +
|
|
|
|
|
+ '<div class="info-value">' + (dept.parentName || '顶级部门') + '</div>' +
|
|
|
|
|
+ '</div>' +
|
|
|
|
|
+ '<div class="info-item full-width">' +
|
|
|
|
|
+ '<div class="info-label">备注</div>' +
|
|
|
|
|
+ '<div class="info-value">' + (dept.remark || '无') + '</div>' +
|
|
|
|
|
+ '</div>' +
|
|
|
|
|
+ '</div>';
|
|
|
|
|
+
|
|
|
|
|
+ $('#detailContent').html(html);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 搜索部门
|
|
|
|
|
+ function filterDept(keyword) {
|
|
|
|
|
+ if (!keyword) {
|
|
|
|
|
+ renderTree(deptData);
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ var filtered = filterTreeData(deptData, keyword);
|
|
|
|
|
+ renderTree(filtered);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 过滤树形数据
|
|
|
|
|
+ function filterTreeData(data, keyword) {
|
|
|
|
|
+ var result = [];
|
|
|
|
|
+
|
|
|
|
|
+ data.forEach(function(item) {
|
|
|
|
|
+ if ((item.deptName && item.deptName.toLowerCase().indexOf(keyword.toLowerCase()) >= 0) ||
|
|
|
|
|
+ (item.deptCode && item.deptCode.toLowerCase().indexOf(keyword.toLowerCase()) >= 0)) {
|
|
|
|
|
+ result.push(item);
|
|
|
|
|
+ } else if (item.children && item.children.length > 0) {
|
|
|
|
|
+ var filteredChildren = filterTreeData(item.children, keyword);
|
|
|
|
|
+ if (filteredChildren.length > 0) {
|
|
|
|
|
+ var newItem = $.extend({}, item);
|
|
|
|
|
+ newItem.children = filteredChildren;
|
|
|
|
|
+ result.push(newItem);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ return result;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 添加部门
|
|
|
|
|
+ function addDept(parentId) {
|
|
|
|
|
+ var url = parentId === 0 ? 'department_form.html?id=' : 'department_form.html?parentId=' + parentId;
|
|
|
|
|
+ Common.open({
|
|
|
|
|
+ title: parentId === 0 ? '添加顶级部门' : '添加下级部门',
|
|
|
|
|
+ area: ['550px', '450px'],
|
|
|
|
|
+ content: url,
|
|
|
|
|
+ end: function() {
|
|
|
|
|
+ loadDeptTree();
|
|
|
}
|
|
}
|
|
|
});
|
|
});
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 编辑部门
|
|
|
|
|
+ function editDept(id) {
|
|
|
|
|
+ Common.open({
|
|
|
|
|
+ title: '编辑部门',
|
|
|
|
|
+ area: ['550px', '450px'],
|
|
|
|
|
+ content: 'department_form.html?id=' + id,
|
|
|
|
|
+ end: function() {
|
|
|
|
|
+ loadDeptTree();
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 编辑当前部门
|
|
|
|
|
+ function editCurrentDept() {
|
|
|
|
|
+ if (currentDept) {
|
|
|
|
|
+ editDept(currentDept.id);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 添加下级(当前选中)
|
|
|
|
|
+ function addChildDept() {
|
|
|
|
|
+ if (currentDept) {
|
|
|
|
|
+ addDept(currentDept.id);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 删除部门
|
|
|
|
|
+ function delDept(id) {
|
|
|
|
|
+ var node = $('.custom-tree-node[data-id="' + id + '"]');
|
|
|
|
|
+ var dept = node.data('deptData');
|
|
|
|
|
+
|
|
|
|
|
+ Common.confirm('确定要删除部门 【' + dept.deptName + '】 吗?<br><span style="color: #f56c6c; font-size: 12px;">删除后将无法恢复,请谨慎操作!</span>', function() {
|
|
|
|
|
+ Common.del(Config.api.department.remove + '/' + id, function(res) {
|
|
|
|
|
+ Common.success('删除成功', function() {
|
|
|
|
|
+ loadDeptTree();
|
|
|
|
|
+ if (currentDept && currentDept.id === id) {
|
|
|
|
|
+ currentDept = null;
|
|
|
|
|
+ $('#detailActions').hide();
|
|
|
|
|
+ $('#detailContent').html('<div class="detail-empty"><i class="layui-icon layui-icon-survey"></i><p>请选择一个部门查看详情</p></div>');
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ });
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 删除当前部门
|
|
|
|
|
+ function delCurrentDept() {
|
|
|
|
|
+ if (currentDept) {
|
|
|
|
|
+ delDept(currentDept.id);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 初始化
|
|
|
|
|
+ $(function() {
|
|
|
|
|
+ loadDeptTree();
|
|
|
});
|
|
});
|
|
|
</script>
|
|
</script>
|
|
|
</body>
|
|
</body>
|