组织部门模块实现src/pages/system/departments本文说明组织架构部门在前端的字段模型、API、树形维护方式以及depIds/cascadeDepUniqueId/ Recoil 部门树与设备、通道、管理员、国标目录、视频调阅等模块的关联。项目源码地址https://github.com/openskeye/skeyevss_frontend_web1. 模块定位路由/system/departments见src/routers/sites.tsx根表格传入parentId{0}、parentName表示从「顶级」部门起查。权限表格authority绑定P_1_1_3、P_0_1_3与菜单uniqueId体系一致。核心能力部门的增删改查、子部门嵌套表格展开行内再挂一张表、部门与角色多选绑定、部门与通道多对多通过depIds维护修改级联编号时触发国标目录同步。2. 数据模型定义于src/pages/system/departments/model.tsx→Item字段类型/含义说明idnumber主键部门在库里的数字 id全局树、下拉、通道depIds都引用它namestring部门名称列表、面包屑、表单必填statenumber启用/停用表格为开关与全局stateOptions一致remarkstring备注parentIdnumber父部门 id根列表固定条件parentId 0子表传入当前行idcascadeDepUniqueIdstring级联/国标侧部门业务编号可与平台内id并存空时列表显示-roleIdsnumber[]关联角色 id 列表与系统「角色管理」多对多createdAt/updatedAtnumber时间戳2.1 级联编号的生成新建表单中cascadeDepUniqueId使用fetchDefValue若为空则调用genUniqueId({ type: cascadeDepCode, count: 1 })#repositories/apis/base由后端生成默认编码。2.2 创建时的字段裁剪index.tsx中create在提交前对record做mapFilter若cascadeDepUniqueId为空则从 payload 中去掉避免传空串覆盖后端默认策略与表单「可空由后端生成」的语义一致。3. API 一览src/pages/system/departments/api.ts方法HTTP路径用途CreatePOST/departments新建部门DeleteDELETE/departments删除UpdatePUT/department更新单资源 PUT 与列表路径区分ListPOST/department/list分页/条件列表list转为Item[]RowGET/department/:id单行详情表单编辑用注意复数/departments与单数/department在不同操作上混用联调时需与后端约定保持一致。4. UI树形组织如何在前端展开并不是单独的「树页面」而是Ant Table 的expandableRender根MainfetchList始终在请求参数中追加conditions: { column: parentId, value: props.parentId }。根为0。展开一行时渲染另一个Main传入parentId{record.id}、parentName{record.name}、tableModeinner从而在行内嵌套子部门列表。这样任意深度都是同一组件递归数据边界完全由parentId决定。5. 与「角色」模块的关系列表列rolesroleIds多选展示选项来自RoleListpages/system/roles/apiisDel 0的全量角色。表单roleIdsXFormItemType.selectmultipledynamicAddOption提供「添加角色」按钮跳转makeDefRoutePathWithCreateAnchor生成的角色页路径。部门侧存的是角色 id 数组权限的最终生效仍由后端鉴权与用户-角色体系完成前端负责维护部门 ↔ 角色关联数据。6. 与「通道」模块的关系depIds通道模型pages/devices/channels上有depIds: number[]表示一条通道可挂在多个部门下业务分组、视频调阅左侧「组织架构」等。6.1 部门管理页的「设置通道」index.tsx→rowCustomActions设置通道[n]n来自handleListResponse里res.data.maps[departmentId]的通道数量。弹窗内勾选通道后将选中通道的depIds更新为当前部门 idChannelUpdatecolumn: depIds, value: depIds。取消勾选的通道可被depIds清空为[]从所有分组移除。这与视频调阅里右键部门 → 设置分组使用的是同一套通道更新 API只是入口不同。6.2 列表响应里的maps部门列表接口除list外还带maps: { [departmentId: number]: ChannelItem[] }前端映射为channelMaps用于展示每个部门下已关联通道数量/弹窗默认勾选无需再请求一次统计接口。7. 与「设备」模块的关系设备Item同样有depIds设备维度的组织归属列表接口扩展里常带departmentMaps: { [id]: 部门名 }。设备表「组织部门」列对depIds逐个用departmentMaps[id]渲染 Tag并Location到部门页的锚点链接makeDefRoutePathWithIdAnchor(routes[Path.system].subs[Path.departments].path, item)实现从设备快速定位到组织管理。设备depIds与通道depIds概念前者是设备归属部门后者是通道在视频业务里的分组可以只绑定通道、只绑定设备或两者都绑用途上是有不同区分的。8. 与「管理员」模块的关系pages/system/admins中管理员也有depIds可归属多个部门。表单选项来自 RecoilDepartments的trees见下节不是部门列表页本地 state。表格展示用departmentMapsTreeItem展平后的id → TreeItem把depIds翻译成部门名称拼接。即管理员归属依赖全局部门树部门 CRUD成功后若需管理员页立即一致需刷新部门树或重新拉DeptTrees当前项目在 Layout 登录后拉一次部分操作如 sundry 里会直接 patchdepartments.set。9. 全局部门树 RecoilDepartments类型见repositories/types/config.ts→DepartmentsTypetreesOptionItem[]、maps{ [id]: TreeItem }。9.1 何时写入components/layout/index.tsx用户已登录后DeptTrees()GET /department/trees再TreeItem.toOptions/TreeItem.toMapsdepartments.set({ trees, maps })。前缀defOption作为「空/全部」占位。components/sundry.tsx如部门级联控件里修改cascadeDepUniqueId后在本地departments.set里递归更新trees/maps中对应节点的raw避免整页刷新。9.2 消费DepartmentTrees视频调阅「组织架构」Tab读Departments的trees/maps渲染 Ant Menu。管理员表单选项 departmentState.trees。其它需要部门 id → 名称的地方maps[id].name或列表扩展departmentMaps。10. 与国标/级联目录的关系GbcCatalog部门表单updateCompletion若cascadeDepUniqueId变更调用GbcCatalog({departmentUniqueId:newData.cascadeDepUniqueId,oldDepartmentUniqueId:oldData.cascadeDepUniqueId})即平台组织变更要通知 VSS/国标目录侧做 catalog 同步避免上下级平台或设备目录与本地部门编码不一致。具体以后端实现为准。11. 路由锚点与其它页面跳转src/routers/anchor.ts提供多种带分页占位 hash 的路径生成器部门相关常用makeDefRoutePathWithIdAnchor(departmentsPath, id)打开部门列表并带上「选中某 id」的锚点设备列表里点部门 Tag 即用此方式。这样组织管理与设备/通道在 UI 上可互相跳转数据上通过depIds数字部门 id关联。12. 关键文件索引路径作用src/pages/system/departments/index.tsx表格、展开子表、通道设置弹窗、GbcCatalogsrc/pages/system/departments/model.tsxItem、columns、formColumnssrc/pages/system/departments/api.tsREST 封装src/components/layout/index.tsx登录后DeptTrees→Departments.setsrc/repositories/models/recoil-state.tsDepartmentsatomsrc/repositories/apis/base.tsDeptTrees、genUniqueId、GbcCatalogsrc/pages/devices/items/model.tsx设备depIdsdepartmentMaps展示src/pages/devices/channels/model.tsx通道depIdssrc/pages/system/admins/model.tsx管理员depIds 表单src/pages/video-filters/index.tsx组织架构 Tab、通道depIds批量维护13. 关系图GbcCatalog管理员 AdmindepIds 多部门设备 DevicedepIds 多部门通道 ChanneldepIds 多部门全局 Recoil Departmentstrees 下拉/菜单maps id 到 TreeItem部门 Departmentid 主键parentId 树cascadeDepUniqueId 国标编码roleIds 角色GET department/treesVSS 国标目录视频调阅 组织树list ext departmentMaps注意 若后端调整department/list的maps结构或depIds语义需同步handleListResponse与各页ChannelUpdate条件级联编号长度等业务校验以sundry与后端约定为准。*