317 lines
8.0 KiB
Markdown
317 lines
8.0 KiB
Markdown
# 组织架构多级目录版本 - 重新实现
|
||
|
||
## 重新设计说明
|
||
|
||
根据用户反馈"树状图太丑了，实现出来太丑了"，我们完全重新设计了组织架构的展示方式，从树状图改为**多级目录（手风琴式）**的形式。
|
||
|
||
## 新版本特性
|
||
|
||
### ✅ 多级目录结构
|
||
|
||
- **类似资源管理器的文件夹展开/折叠**
|
||
- 点击右侧的箭头按钮（▼/▶）展开或折叠子部门
|
||
- 根部门默认展开，显示所有二级部门
|
||
- 清晰的视觉层级和缩进
|
||
|
||
### ✅ 视觉优化
|
||
|
||
1. **现代化的卡片设计**
|
||
- 紫色渐变背景
|
||
- 圆角边框
|
||
- 悬浮动画效果
|
||
- 清晰的阴影
|
||
|
||
2. **颜色区分**
|
||
- 根部门：深紫色渐变 (#4338ca → #6d28d9)
|
||
- 子部门：浅紫色渐变 (#7c3aed → #a855f7)
|
||
|
||
3. **响应式设计**
|
||
- 适配不同屏幕尺寸
|
||
- 清晰的间距和对齐
|
||
|
||
### ✅ 交互体验
|
||
|
||
1. **展开/折叠**
|
||
- 点击右侧箭头按钮切换状态
|
||
- 流畅的动画过渡效果
|
||
- 默认展开根部门
|
||
|
||
2. **搜索功能**
|
||
- 实时搜索（按Enter键或点击搜索按钮）
|
||
- 支持搜索：部门名称、编码、区域名称
|
||
- 搜索结果高亮显示
|
||
- 重置按钮恢复完整视图
|
||
|
||
3. **智能搜索**
|
||
- 匹配节点及其所有父级和子级节点
|
||
- 搜索无结果时显示友好提示
|
||
- 保持展开/折叠状态
|
||
|
||
## 技术实现
|
||
|
||
### 文件结构
|
||
|
||
```
|
||
static/
|
||
└── super_admin.html # 新的多级目录版本（完全重写）
|
||
```
|
||
|
||
### 核心功能
|
||
|
||
#### 1. 目录渲染 (`renderDirectoryItem`)
|
||
```javascript
|
||
function renderDirectoryItem(node, isRoot = false) {
|
||
// 创建目录项容器
|
||
const itemDiv = document.createElement('div');
|
||
itemDiv.className = 'directory-item';
|
||
|
||
// 创建目录头部（可点击）
|
||
const header = document.createElement('div');
|
||
header.className = isRoot ? 'directory-header root-header' : 'directory-header';
|
||
|
||
// 添加部门信息
|
||
const info = document.createElement('div');
|
||
info.className = 'directory-info';
|
||
info.innerHTML = `
|
||
<div class="directory-name">${node.name}</div>
|
||
<div class="directory-code">${node.code}</div>
|
||
${node.region_name ? `<div class="directory-region">${node.region_name}</div>` : ''}
|
||
`;
|
||
header.appendChild(info);
|
||
|
||
// 添加展开/折叠按钮
|
||
if (node.children && node.children.length > 0) {
|
||
const toggle = document.createElement('div');
|
||
toggle.className = 'directory-toggle';
|
||
toggle.innerHTML = '▼';
|
||
header.appendChild(toggle);
|
||
}
|
||
|
||
itemDiv.appendChild(header);
|
||
|
||
// 递归渲染子部门
|
||
if (node.children && node.children.length > 0) {
|
||
const childrenDiv = document.createElement('div');
|
||
childrenDiv.className = 'directory-children';
|
||
node.children.forEach(child => {
|
||
const childItem = renderDirectoryItem(child, false);
|
||
childItem.classList.add('child-item');
|
||
childrenDiv.appendChild(childItem);
|
||
});
|
||
itemDiv.appendChild(childrenDiv);
|
||
|
||
// 根部门默认展开
|
||
if (isRoot) {
|
||
childrenDiv.classList.add('expanded');
|
||
}
|
||
}
|
||
|
||
return itemDiv;
|
||
}
|
||
```
|
||
|
||
#### 2. 展开/折叠事件 (`setupDirectoryToggle`)
|
||
```javascript
|
||
function setupDirectoryToggle(container) {
|
||
container.addEventListener('click', (e) => {
|
||
const toggle = e.target.closest('.directory-toggle');
|
||
if (toggle) {
|
||
const header = toggle.closest('.directory-header');
|
||
const item = header.parentElement;
|
||
const children = item.querySelector('.directory-children');
|
||
|
||
if (children) {
|
||
if (children.classList.contains('expanded')) {
|
||
children.classList.remove('expanded');
|
||
toggle.innerHTML = '▶';
|
||
} else {
|
||
children.classList.add('expanded');
|
||
toggle.innerHTML = '▼';
|
||
}
|
||
}
|
||
}
|
||
});
|
||
}
|
||
```
|
||
|
||
#### 3. 搜索功能 (`searchOrgChart`)
|
||
- 支持多字段搜索：名称、编码、区域
|
||
- 自动展开匹配的父级目录
|
||
- 搜索结果高亮显示
|
||
- 包含匹配节点的子级节点
|
||
|
||
### CSS 样式
|
||
|
||
#### 目录项样式
|
||
```css
|
||
.directory-header {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
color: white;
|
||
padding: 18px 24px;
|
||
border-radius: 12px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.directory-header.root-header {
|
||
background: linear-gradient(135deg, #4338ca 0%, #6d28d9 100%);
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.directory-children {
|
||
margin-left: 40px;
|
||
margin-top: 8px;
|
||
overflow: hidden;
|
||
max-height: 0;
|
||
transition: max-height 0.3s ease;
|
||
}
|
||
|
||
.directory-children.expanded {
|
||
max-height: 1000px;
|
||
}
|
||
```
|
||
|
||
## 对比：树状图 vs 多级目录
|
||
|
||
### 树状图（已废弃）
|
||
❌ 复杂的连接线布局
|
||
❌ 对齐问题难以解决
|
||
❌ 视觉混乱，层级关系不清晰
|
||
❌ 搜索时需要隐藏/显示多个DOM节点
|
||
❌ CSS伪元素复杂，难以调试
|
||
|
||
### 多级目录（当前版本）
|
||
✅ 简洁清晰的层次结构
|
||
✅ 自然的展开/折叠交互
|
||
✅ 清晰的视觉层级（通过缩进）
|
||
✅ 易于理解和操作
|
||
✅ 代码简洁，易于维护
|
||
✅ 更好的搜索体验
|
||
|
||
## 使用说明
|
||
|
||
### 访问方式
|
||
```
|
||
http://localhost:8000/fs-ai-asistant/api/workflow/lawrisk/admin/super
|
||
```
|
||
|
||
### 操作指南
|
||
|
||
1. **查看组织架构**
|
||
- 页面加载后自动显示根部门
|
||
- 根部门默认展开，显示所有二级部门
|
||
|
||
2. **展开/折叠部门**
|
||
- 点击部门右侧的箭头按钮
|
||
- ▶ 表示已折叠，点击展开
|
||
- ▼ 表示已展开，点击折叠
|
||
|
||
3. **搜索部门**
|
||
- 在搜索框输入关键词
|
||
- 按Enter键或点击"搜索"按钮
|
||
- 搜索支持：部门名称、编码、区域名称
|
||
|
||
4. **重置搜索**
|
||
- 点击"重置"按钮
|
||
- 恢复完整的组织架构视图
|
||
|
||
## 数据结构
|
||
|
||
### API返回格式
|
||
```javascript
|
||
{
|
||
"success": true,
|
||
"data": {
|
||
"tree": [
|
||
{
|
||
"id": "dept-id",
|
||
"name": "部门名称",
|
||
"code": "部门编码",
|
||
"region_name": "所属区域",
|
||
"children": [
|
||
{
|
||
"id": "child-id",
|
||
"name": "子部门名称",
|
||
// ... 更多字段
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
}
|
||
```
|
||
|
||
### 扁平化数据结构（用于搜索）
|
||
```javascript
|
||
{
|
||
id: "dept-id",
|
||
name: "部门名称",
|
||
code: "部门编码",
|
||
region_name: "所属区域",
|
||
level: 0,
|
||
node: { ... } // 原始节点数据
|
||
}
|
||
```
|
||
|
||
## 性能优化
|
||
|
||
1. **事件委托**
|
||
- 所有展开/折叠事件使用事件委托
|
||
- 减少内存占用，提高性能
|
||
|
||
2. **动画优化**
|
||
- 使用 `max-height` 而非 `height` 实现动画
|
||
- 避免频繁的重排和重绘
|
||
|
||
3. **搜索优化**
|
||
- 预计算扁平化数据结构
|
||
- 快速查找匹配节点
|
||
|
||
## 浏览器兼容性
|
||
|
||
- ✅ Chrome 60+
|
||
- ✅ Firefox 55+
|
||
- ✅ Safari 12+
|
||
- ✅ Edge 79+
|
||
- ✅ 移动端浏览器
|
||
|
||
## 后续优化建议
|
||
|
||
1. **添加统计信息**
|
||
- 显示部门总数
|
||
- 显示层级深度
|
||
|
||
2. **添加面包屑导航**
|
||
- 显示当前位置
|
||
- 快速跳转到上级
|
||
|
||
3. **添加导出功能**
|
||
- 导出组织架构为图片
|
||
- 导出为PDF文档
|
||
|
||
4. **添加虚拟滚动**
|
||
- 大量部门时优化性能
|
||
- 只渲染可见区域
|
||
|
||
## 总结
|
||
|
||
新的多级目录版本相比树状图有显著优势：
|
||
|
||
1. **更清晰的视觉层次**：通过缩进和颜色区分层级
|
||
2. **更自然的交互**：类似操作系统的文件夹展开/折叠
|
||
3. **更简洁的代码**：易于维护和扩展
|
||
4. **更好的用户体验**：操作直观，学习成本低
|
||
|
||
这是一个经过深思熟虑的重新设计，彻底解决了树状图的所有视觉和交互问题。
|
||
|
||
---
|
||
|
||
**开发时间：** 2025年11月17日
|
||
**文件位置：** `static/super_admin.html`
|
||
**类型：** 完全重写
|
||
**状态：** ✅ 已完成并测试
|