fs-lawrisk/FRONTEND_DEBUG_GUIDE.md

6.5 KiB
Raw Blame History

组织架构层级调试指南

已完成的修改

1. 前端调试日志 (static/super_admin.html)

已在以下位置添加调试日志:

位置 1: API 响应检查 (第 2602 行之后)

console.log('=== 组织架构层级调试 ===');
console.log('API 返回树形结构:', JSON.stringify(response.data.tree || [], null, 2));

位置 2: 扁平化节点检查 (第 2608 行之后)

console.log('扁平化节点数量:', orgChartData.allNodes.length);
console.log('所有节点 level 值:');
orgChartData.allNodes.forEach(n => {
    console.log(`  [Level ${n.level}] ${n.name} (ID: ${n.id}, Parent: ${n.node.parent_id || 'root'})`);
});

位置 3: 渲染时的 level 和缩进检查 (第 2703 行之后)

console.log(`🔍 渲染节点: "${node.name}"`);
console.log(`   - level: ${level}`);
console.log(`   - indent: ${level * 30}px`);
console.log(`   - node.parent_id: ${node.parent_id || 'null'}`);
console.log(`   - node.unit_level: ${node.unit_level || 'undefined'}`);
console.log(`   - children 数量: ${node.children ? node.children.length : 0}`);

位置 4: 渲染完成后的总结 (第 2622 行之后)

console.log('=== 渲染完成 ===');
console.log('根节点数量:', tree.length);
console.log('总节点数量:', orgChartData.allNodes.length);
console.log('部门名称中包含"交通运输"的节点:');
orgChartData.allNodes
    .filter(n => n.name.includes('交通运输'))
    .forEach(n => console.log(`  - ${n.name} (Level: ${n.level})`));
console.log('部门名称中包含"三水"的节点:');
orgChartData.allNodes
    .filter(n => n.name.includes('三水'))
    .forEach(n => console.log(`  - ${n.name} (Level: ${n.level})`));

2. 数据库验证脚本 (verify_org_hierarchy.py)

创建了独立的验证脚本,可以检查数据库中的层级关系。

注意: 该脚本需要数据库连接,当前环境可能无法连接。

测试步骤

步骤 1: 清除浏览器缓存(重要!)

  1. 在浏览器中按 Ctrl + Shift + Delete 打开清除缓存对话框
  2. 选择"缓存的图片和文件"
  3. 点击"清除数据"
  4. Ctrl + F5 强制刷新页面

步骤 2: 打开浏览器开发者工具

  1. 访问 /fs-ai-asistant/api/workflow/lawrisk/admin/super 页面
  2. F12 打开开发者工具
  3. 切换到 Console控制台 标签

步骤 3: 查看调试输出

在控制台中查找以下关键信息:

3.1 API 返回的树形结构

=== 组织架构层级调试 ===
API 返回树形结构: [...]

检查:

  • "三水区服务部门" 的父节点是否是 "市级服务部门"
  • "佛山交通运输局" 的父节点是否是 "市级服务部门"
  • 两者是否在同一层级(都是市级服务部门的直接子节点)

3.2 扁平化节点列表

扁平化节点数量: XX
所有节点 level 值:
  [Level 0] 市级服务部门
  [Level 1] 三水区服务部门
  [Level 1] 佛山交通运输局
  ...

检查:

  • "三水区服务部门" 的 level 是否为 1
  • "佛山交通运输局" 的 level 是否为 1

3.3 渲染时的缩进计算

🔍 渲染节点: "三水区服务部门"
   - level: 1
   - indent: 30px
🔍 渲染节点: "佛山交通运输局"
   - level: 1
   - indent: 30px

检查:

  • 两者的 level 是否相同
  • 两者的 indent 是否相同 (都是 30px)

3.4 渲染完成后的总结

=== 渲染完成 ===
部门名称中包含"交通运输"的节点:
  - 佛山交通运输局 (Level: 1)
部门名称中包含"三水"的节点:
  - 三水区服务部门 (Level: 1)
  - 三水区交通局 (Level: 2)
  ...

步骤 4: 检查 Network 标签

  1. 切换到 Network网络 标签
  2. 刷新页面
  3. 找到 /admin/service-departments/tree 请求
  4. 点击查看响应数据

验证 JSON 结构:

{
  "success": true,
  "data": {
    "tree": [
      {
        "name": "市级服务部门",
        "children": [
          {
            "name": "三水区服务部门",
            "parent_id": "市级服务部门的ID"
          },
          {
            "name": "佛山交通运输局",
            "parent_id": "市级服务部门的ID"
          }
        ]
      }
    ]
  }
}

预期结果

正确的情况

[Level 0] 市级服务部门
  [Level 1] 三水区服务部门          ← indent: 30px
  [Level 1] 佛山交通运输局          ← indent: 30px (与三水区服务部门同级)

错误的情况(如果问题存在)

[Level 0] 市级服务部门
  [Level 1] 三水区服务部门          ← indent: 30px
    [Level 2] 佛山交通运输局        ← indent: 60px (错误!多了一层缩进)

可能的问题诊断

问题 1: API 数据本身错误

症状: 控制台显示 "佛山交通运输局" 的 level 不是 1

原因: 数据库中的 parent_id 不正确

解决方案: 需要修复数据库数据

问题 2: 前端显示逻辑错误

症状: API 数据正确,但渲染时的 level 参数错误

原因: renderOrgListNode 函数的 level 传递有问题

解决方案: 检查递归调用逻辑

问题 3: 浏览器缓存

症状: 修改代码后问题仍然存在,但控制台显示的日志是正确的

原因: 浏览器缓存了旧的 JavaScript 代码

解决方案: 清除缓存并强制刷新Ctrl + F5

问题 4: 部门名称不匹配

症状: 数据库中没有 "佛山交通运输局",只有 "佛山市交通运输局"(带"市"字)

原因: 用户看到的部门和数据库中的部门不是同一个

解决方案:

  1. 确认用户访问的环境
  2. 检查数据库中的实际部门名称
  3. 如果需要,创建部门或重命名

下一步行动

根据调试结果,可能需要:

  1. 如果 API 数据错误: 运行 SQL 脚本修复数据库
  2. 如果前端逻辑错误: 修改 static/super_admin.html 中的渲染逻辑
  3. 如果是缓存问题: 清除浏览器缓存
  4. 如果是数据不一致: 检查环境配置,确认使用的是正确的数据库

相关文件

  • static/super_admin.html: 前端页面(已添加调试日志)
  • lawrisk/api/v2.py: API 路由 (/admin/service-departments/tree)
  • lawrisk/services/licensing_repo.py: 树形结构构建逻辑
  • verify_org_hierarchy.py: 数据库验证脚本

联系方式

如果问题持续存在,请提供:

  1. 浏览器控制台的完整输出(截图或复制文本)
  2. Network 标签中 /admin/service-departments/tree 的响应数据
  3. 数据库中相关部门的信息(使用 SQL 查询)