139 lines
4.2 KiB
Markdown
139 lines
4.2 KiB
Markdown
# 修复"顺德区服务部门"显示冗余标签问题
|
||
|
||
## 问题描述
|
||
|
||
用户发现"顺德区服务部门"下面显示了一个"顺德区"tag标签，而其他区（如禅城区、南海区等）没有这个标签，造成了显示不一致的问题。
|
||
|
||
## 问题分析
|
||
|
||
### 根本原因
|
||
|
||
通过代码分析发现，问题出在数据库层面：
|
||
|
||
1. **数据结构**：
|
||
- `service_departments` 表有 `region_id` 字段
|
||
- 通过 LEFT JOIN `regions` 表获取 `region_name` 字段
|
||
- SQL: `r.name AS region_name FROM service_departments sd LEFT JOIN regions r ON r.id = sd.region_id`
|
||
|
||
2. **数据不一致**：
|
||
- 顺德区服务部门的 `region_id` 字段被设置了值
|
||
- 其他区级服务部门的 `region_id` 字段为 `NULL`
|
||
- 导致顺德区显示了额外的 `region_name` 标签
|
||
|
||
3. **业务逻辑**：
|
||
- 区级服务部门（如"禅城区服务部门"、"顺德区服务部门"等）的名称本身就包含了区域信息
|
||
- 额外的 `region_name` 标签是冗余的
|
||
|
||
## 解决方案
|
||
|
||
### 方案选择
|
||
|
||
**方案A**: 修改数据库，清除顺德区的region_id
|
||
- 优点：数据层面解决
|
||
- 缺点：需要数据库操作，可能影响其他功能
|
||
|
||
**方案B**: 修改前端渲染逻辑，隐藏冗余标签
|
||
- 优点：不影响数据，前端智能隐藏
|
||
- 缺点：治标不治本
|
||
|
||
**最终选择：方案B + 优化逻辑**
|
||
|
||
修改前端渲染逻辑，对于二级节点（Level 1），如果节点名称已经包含"区"字，则不显示 `region_name` 标签。
|
||
|
||
### 代码实现
|
||
|
||
**文件**: `static/super_admin.html`
|
||
|
||
**修改位置**: 第1346-1352行
|
||
|
||
**修改前**:
|
||
```javascript
|
||
if (node.region_name) {
|
||
const regionSpan = document.createElement('span');
|
||
regionSpan.className = 'node-region';
|
||
regionSpan.textContent = node.region_name;
|
||
metaRow.appendChild(regionSpan);
|
||
}
|
||
```
|
||
|
||
**修改后**:
|
||
```javascript
|
||
// 对于二级节点，如果名称已包含区域信息（如"XX区服务部门"），则不显示region_name标签
|
||
if (node.region_name && !(level === 1 && node.name && node.name.includes('区'))) {
|
||
const regionSpan = document.createElement('span');
|
||
regionSpan.className = 'node-region';
|
||
regionSpan.textContent = node.region_name;
|
||
metaRow.appendChild(regionSpan);
|
||
}
|
||
```
|
||
|
||
### 逻辑说明
|
||
|
||
1. 首先检查 `node.region_name` 是否存在
|
||
2. 对于二级节点（`level === 1`）：
|
||
- 如果节点名称包含"区"字，则不显示 `region_name` 标签
|
||
- 如果节点名称不包含"区"字，则正常显示 `region_name` 标签
|
||
3. 对于其他层级：
|
||
- 正常显示 `region_name` 标签（如果存在）
|
||
|
||
## 效果验证
|
||
|
||
### 修复前
|
||
```
|
||
✅ 禅城区服务部门
|
||
[无region_name标签]
|
||
|
||
✅ 南海区服务部门
|
||
[无region_name标签]
|
||
|
||
❌ 顺德区服务部门
|
||
[显示"顺德区"标签] ← 冗余！
|
||
|
||
✅ 三水区服务部门
|
||
[无region_name标签]
|
||
```
|
||
|
||
### 修复后
|
||
```
|
||
✅ 禅城区服务部门
|
||
[无region_name标签]
|
||
|
||
✅ 南海区服务部门
|
||
[无region_name标签]
|
||
|
||
✅ 顺德区服务部门
|
||
[无region_name标签] ← 已修复！
|
||
|
||
✅ 三水区服务部门
|
||
[无region_name标签]
|
||
```
|
||
|
||
## 优势
|
||
|
||
1. **智能隐藏**：前端自动识别并隐藏冗余标签
|
||
2. **不破坏数据**：数据库保持原样，不影响其他功能
|
||
3. **向前兼容**：如果未来有需要显示 `region_name` 的二级节点（名称不包含"区"），仍然可以正常显示
|
||
4. **一致性**：所有区级服务部门的显示效果保持一致
|
||
|
||
## 测试建议
|
||
|
||
1. **功能测试**：
|
||
- 验证所有二级节点都不显示冗余的区名标签
|
||
- 确认三级节点的 `region_name` 标签正常显示（如果有）
|
||
|
||
2. **边界测试**：
|
||
- 如果有名称不包含"区"字的二级节点，确认其 `region_name` 标签正常显示
|
||
|
||
3. **视觉测试**：
|
||
- 确认组织架构界面整体布局和样式正常
|
||
|
||
## 文件变更
|
||
|
||
- `static/super_admin.html`: 修改渲染逻辑
|
||
- `test_region_name_fix.py`: 添加测试脚本
|
||
- `REGION_NAME_FIX.md`: 本文档
|
||
|
||
## 总结
|
||
|
||
通过在前端智能隐藏冗余标签，我们解决了顺德区服务部门显示不一致的问题，同时保持了代码的简洁性和可维护性。这种方案既解决了当前问题，又为未来可能的扩展留出了空间。
|