Tpri-Datavue前端插件系统文档
Datavue前端插件系统文档
一、整体架构概述
Datavue前端插件系统是基于Vue框架设计的组件化扩展机制，允许开发者通过注册自定义组件，实现功能模块化扩展。系统核心通过两种插件类型（二次开发插件、Datavue插件）提供不同场景下的组件注册能力，支持组件的复用、分组管理及私有性控制，最终服务于数据可视化设计或前端应用开发。
二、二次开发插件
2.1 插件注册方法
二次开发插件通过 v1.registVuePlugin 方法注册，支持将通用Vue组件集成到Datavue框架中。方法签名如下：
v1.registVuePlugin(plugin, // Vue组件代码对象name, // 组件名称（使用时唯一标识）func, // 功能说明content, // 使用说明snap, // 代码片段（可快速插入使用）group = '其它', // 组件分组（默认“其他”组）isPrivate // 私有组件标识（可选，用于控制访问权限）
)
2.2 参数说明
| 参数名称 | 类型 | 说明 |
|---|---|---|
plugin | Object | Vue组件代码对象，包含组件的核心实现（如模板、样式、数据、方法等），与Vue文件结构一致 |
name | String | 组件唯一名称，用于在框架中引用（如<org-tree>中的org-tree） |
func | String | 组件功能描述，用于说明组件的核心作用（如“组织机构树”） |
content | String | 组件使用方法说明，指导开发者如何在项目中调用该组件 |
snap | String | 代码片段，提供组件快速使用示例（如<org-tree ref="orgTree" />） |
group | String | 组件分组名称，用于在组件管理界面分类展示（默认“其他”组） |
isPrivate | Boolean | 私有组件标识，若为true，需在代码开头通过注释指定访问组（如// 组名1;组名2） |
2.3 组件代码对象（plugin）结构
plugin 对象的属性与Vue单文件组件（SFC）结构一致，核心包含以下部分：
2.3.1 基础结构（与Vue组件一致）
- template：组件模板，定义HTML结构（如使用
<el-tree>实现树形展示） - style：组件样式，支持CSS/SCSS等预处理器
- props：组件属性，用于接收外部传入的数据或配置（如
organid、organcode控制树的根节点） - data：组件内部数据，如
treeLoading（加载状态）、treeData（组织机构数据） - watch：数据监听，如监听
value变化并同步更新组件状态 - mounted：生命周期钩子，组件挂载后执行初始化逻辑（如加载数据）
- methods：组件方法，处理业务逻辑（如
getTreeData请求数据、handleNodeClick处理节点点击）
2.3.2 特殊属性（示例组件说明）
以“组织机构树”组件（org-tree）为例，其plugin对象实现了完整的组织机构树功能：
- template：使用Element UI的
<el-tree>组件，定义树的结构，支持节点标签、加载状态、点击事件等 - props：包含
organid（根节点ID）、organcode（根节点编码）、dataSource（接口地址）等属性，控制树的数据源和展示 - methods：
getTreeData：通过http.postForm请求后端接口，获取组织机构数据（/prod-api/tpridmp/process/${this.dataSource}）handleNodeClick：处理节点点击事件，删除节点子数据后通过@setNodeData事件传递选中节点信息setExpandedKeys/expandNodePath：控制树的展开节点，默认展开根节点或指定节点路径
- 生命周期：
mounted钩子中调用getTreeData加载数据，完成初始化
2.4 功能总结
二次开发插件的核心功能是实现可复用的Vue组件，支持自定义业务组件（如组织机构树），通过插件注册机制集成到Datavue框架中。其特点是：
- 遵循Vue组件开发规范，便于开发者快速上手
- 支持数据交互（如请求后端接口）和事件通信（
@setNodeData、@setRootIds等） - 可通过分组和私有标识管理组件，适配不同项目或团队的组件管理需求
三、Datavue插件
3.1 插件注册方法
Datavue插件通过 v1.registDataVueDesignerPlugin 方法注册，用于扩展Datavue设计器的自定义组件（如数据可视化组件）。方法签名如下：
v1.registDataVueDesignerPlugin(plugin, // dataVue组件代码对象name, // 组件名称（设计器中显示的唯一标识）des, // 功能说明group, // 组件分组名称subGroup // 子组名称，用于细分组件分类
)
3.2 参数说明
| 参数名称 | 类型 | 说明 |
|---|---|---|
plugin | Object | dataVue组件代码对象，与Vue组件结构一致，包含模板、样式、数据、方法等 |
name | String | 组件名称，在设计器组件库中显示（如“测试”） |
des | String | 组件功能描述，用于在设计器中说明组件作用（如“测试组件”） |
group | String | 组件分组，用于在设计器中分类展示（如“实验”） |
subGroup | String | 子组名称，用于更细粒度的分类（如“测试”） |
3.3 组件代码对象（plugin）结构
plugin 对象为Datavue设计器定制的组件，核心特点是支持可视化配置和数据绑定，具体包含：
3.3.1 特殊属性（与二次开发插件的差异）
- props中的颜色控制：定义
color和colorDes属性，用于在设计器右侧属性面板提供颜色配置项（如color: ['#fff']控制文字颜色，colorDes: ['文字颜色']说明颜色用途） - 数据处理方法：
getDefaultData提供默认数据（如{ text: 'Data Vue' }），getDataPropMapping定义数据与属性的映射关系用于数据绑定（如“文字”对应text属性） - 设计器适配：支持在设计器中通过拖拽、属性面板配置组件，如调整颜色、修改文本内容（通过
data中的数据和methods中的逻辑实现）
3.3.2 示例组件说明
以“测试”组件为例，其plugin对象实现了基础文本展示功能：
- template：
<div :style="{color:color[0]}"><span class="title">{{data.text}}</span></div>，通过color[0]绑定颜色属性，data.text绑定文本内容 - props：
color（颜色数组）和colorDes（颜色说明数组），用于设计器中颜色配置面板 - methods：
getDefaultData返回默认文本数据（{ text: 'Data Vue' }），在设计器初始化时使用getDataPropMapping定义数据映射关系（{ 文字: { name: 'text', type: String } }），使设计器能识别“文字”属性对应text字段
- 生命周期：
mounted和beforeDestroy钩子可用于设计器中的初始化和销毁逻辑
3.4 功能总结
Datavue插件的核心功能是扩展Datavue设计器的可视化组件，支持通过设计器界面配置组件样式和数据，无需手动编写代码。其特点是：
- 集成设计器交互能力，可通过属性面板配置颜色、文本等参数
- 提供数据默认值和映射规则，简化数据绑定流程
- 支持分组管理（
group+subGroup），便于设计器组件库整理和查找
四、两种插件的对比
| 维度 | 二次开发插件（v1.registVuePlugin） | Datavue插件（v1.registDataVueDesignerPlugin） |
|---|---|---|
| 注册方法 | 通用Vue组件注册，适配Vue标准开发流程 | 针对Datavue设计器的组件注册，适配可视化配置需求 |
| 核心场景 | 如组织机构树等业务逻辑复杂的Vue组件 | 如文本、图表等可视化配置型组件 |
| 关键参数 | snap（代码片段）、isPrivate（私有标识） | subGroup（子组）、color/colorDes（颜色控制） |
| 设计器支持 | 非设计器场景，需手动编码调用 | 设计器场景，支持拖拽、属性面板配置 |
| 数据交互 | 需手动实现数据请求（如http.postForm） | 依赖设计器数据绑定，通过getDataPropMapping映射数据 |
五、总结
Datavue前端插件系统通过两种注册方法，为开发者提供了灵活的组件扩展能力：
- 二次开发插件聚焦通用Vue组件的复用，支持复杂业务逻辑实现（如组织机构树的树形展示、数据请求），适合手动编码集成场景
- Datavue插件聚焦设计器可视化配置，通过颜色控制、数据映射等机制，简化组件配置流程，适合通过设计器快速生成组件的场景
两种插件均基于Vue组件结构设计，通过统一的注册接口接入Datavue框架，降低了组件扩展的复杂度，提升了前端开发和设计效率。