PiProjectSelect项目树组件业务流程
2025-12-30 16:58:36 0 举报AI智能生成
项目树业务梳理
作者其他创作
大纲/内容
1. 组件概述
**组件名称**: PiProjectSelect
**组件路径**: framework/src/components/pi-project-select/pi-project-select.component.ts
**功能**: 提供项目树选择功能，支持系统头部和其他场景使用
2. 组件配置与属性
**核心属性**:
clientID: 当前子系统路由
isBillSystem: 是否是综合计费系统
isHeader: 是否在头部显示
disabled: 是否禁用
showAll: 是否显示全部
3. 组件结构
**依赖组件**:
PiBaseCrumbsNav: 面包屑导航
Input: 输入框
PiCommonProjectTree: 通用项目树组件
4. 主要业务流程
4.1 项目树显示流程
用户点击项目选择按钮
调用onShowTree()方法
检查是否禁用(disabled)
切换isShow状态
如果显示(isShow=true)，显示加载动画($Spin.show)
如果隐藏(isShow=false)，隐藏加载动画($Spin.hide)
4.2 项目选择流程
用户在项目树中选择节点
调用onChangeTree()方法
接收nodeData和openTreeNodeIds参数
调用onClickoutside()隐藏树组件
如果是头部模式(isHeader=true)，调用onChangeProject()切换项目
如果是非头部模式，更新nodeData并触发on-change-project事件
4.3 项目切换流程
调用onChangeProject()方法
校验项目ID是否为空或为0
如果无效，重置nodeData并触发事件
如果有效，根据isBillSystem选择不同的API
调用apiPostV1SysPartnerChange或apiPostV1SysPartnerChangeBill
成功后更新nodeData
持久化到PiBaseProjectModule
派发通知EventManager.dispatch('on-change-project')
触发on-change-project事件
5. 在pi-layout-head中的使用
5.1 组件集成
导入: `import PiProjectSelect from '../pi-project-select/pi-project-select.component'`
注册到components中
在模板中使用: `<PiProjectSelect :clientID="clientID" :isBillSystem="isBillSystem" @on-change-project="onChangeProject" />`
5.2 相关业务逻辑
onChangeProject()方法处理项目切换
更新sysTitle(系统标题)
更新sysLogoImage(系统logo)
更新qrCodeUrl(二维码地址)
调用fetchAnnouncements()更新公告
5.3 状态管理
使用PiBaseProjectModule管理项目状态
SET_SELECTED_NODE: 保存选中的项目节点
EMPTY_STORE: 清空项目存储
treeNode: 获取当前选中的项目节点
6. 相关事件与通知
**组件内部事件**: on-change-project
**全局事件**: on-change-project(通过EventManager.dispatch)
7. 系统集成点
与子系统切换(onChangeSubSystem)协同工作
与公告系统(fetchAnnouncements)集成
与用户偏好设置集成
与系统配置模块集成
8. 权限控制
通过disabled属性控制是否可操作
系统配置控制是否显示项目树
不同系统(isBillSystem)调用不同API
9. 数据持久化
使用PiBaseProjectModule进行状态管理
项目信息存储在sessionStorage中
10. 异常处理
API调用失败时显示警告信息
无效项目ID时进行重置处理
禁用状态下不响应点击事件
11. 交互体验
点击外部区域自动隐藏项目树
显示加载动画提升用户体验
支持面包屑导航显示当前项目路径
12. 技术特点
使用Vue Mixins扩展基础功能
支持ClickOutside指令
响应式设计适配不同场景
模块化结构便于维护和扩展
0 条评论
下一页
