qqsl-ngx-bpmn-diagram v0.0.4
BpmnDiagram
This library was generated with Angular CLI version 15.
Code scaffolding
Run ng generate component component-name --project bpmn-diagram
to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project bpmn-diagram
.
Note: Don't forget to add
--project bpmn-diagram
or else it will be added to the default project in yourangular.json
file.
Build
Run ng build bpmn-diagram
to build the project. The build artifacts will be stored in the dist/
directory.
Publishing
After building your library with ng build bpmn-diagram
, go to the dist folder cd dist/bpmn-diagram
and run npm publish
.
Running unit tests
Run ng test bpmn-diagram
to execute the unit tests via Karma.
Further help
To get more help on the Angular CLI use ng help
or go check out the Angular CLI Overview and Command Reference page.
快速开始
Angular版本
当前支持的Angular版本 ^15.0.0
安装
$ npm install qqsl-ngx-bpmn-diagram --save
引入组件模块
最后你需要将想要使用的组件模块引入到你的 app.module.ts
文件和特性模块中。
以下面的 NgxBpmnDiagramModule
模块为例,先引入组件模块:
import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";
import { NgxBpmnDiagramModule } from "qqsl-ngx-bpmn-diagram";
@NgModule({
declarations: [AppComponent],
imports: [NgxBpmnDiagramModule],
})
export class AppModule {}
引入样式
使用全部组件样式
在 angular.json 中引入了
{
"styles": ["node_modules/bpmn-diagram/bpmn-diagram.css"]
}
然后在模板中使用:
<!-- 编辑组件 -->
<ngx-bpmn-diagram-edit></ngx-bpmn-diagram-edit>
<!-- 预览组件 -->
<ngx-bpmn-diagram-preview></ngx-bpmn-diagram-preview>
浏览器兼容
支持现代浏览器。
Components
ngx-bpmn-diagram-edit
用于编辑 BPMN
流程图的组件,支持 XML
数据的编辑、自定义图标配置,以及保存事件。
参数
参数名 | 类型 | 默认值 | 说明 | 支持全局配置 |
---|---|---|---|---|
xml | string | BpmnEmptyXML | 要预览的 BPMN 流程图 XML,默认为空白 XML | |
baseUrl | string | "" | 接口的BaseURL,用于配置流程图相关操作 | |
iconConfig | BpIconConfig | { group: [] } | 自定义工具栏的图标库的配置(见参数示例) |
事件
事件名 | 类型 | 默认值 | 说明 |
---|---|---|---|
onSave | { xml: string } | - | 要预览的 BPMN 流程图 XML,默认为空白 XML |
参数示例
// 图标库使用项配置
const iconConfig: BpIconConfig = {
group: [
{
name: "行政区划",
type: "region",
icons: [
{
code: "PROVINCE_POINT",
},
{
code: "CITY_POINT",
},
{
code: "COUNTY_POINT",
},
{
code: "TOWN_POINT",
},
],
},
{
name: "标记",
type: "tag",
icons: [
{
code: "EARTHQUAKE_POINT",
},
{
code: "PANORAMA",
},
{
code: "FLOOD_CONTROL_HEADQUARTERS",
},
],
},
],
};
ngx-bpmn-diagram-preview
用于 BPMN
流程图预览的组件,支持传入 XML
数据、配置接口地址、设置图标库和事件配置等。
参数
参数名 | 类型 | 默认值 | 说明 | 支持全局配置 |
---|---|---|---|---|
xml | string | BpmnEmptyXML | 要预览的 BPMN 流程图 XML,默认为空白 XML | |
baseUrl | string | "" | 接口的BaseURL,用于配置流程图相关操作 | |
microServicePath | string | "" | 接口的microServicePath,例如:/services/qqsl-data-center | |
iconConfig | BpIconConfig | { group: [] } | 自定义工具栏的图标库的配置(见参数示例) | |
nodeEventConfig | BpNodeEventConfig | undefined | 节点事件配置,支持默认配置和特殊类型的事件绑定 |
节点详情接口
GET /overviewDiagram/nodeDetails
请求参数
名称 | 位置 | 类型 | 必选 | 说明 |
---|---|---|---|---|
iCode | query | string | 是 | 唯一编码 |
type | query | string | 是 | 节点类型 |
Authorization | header | string | 否 | none |
返回示例
200 Response
{
"iCode": "string",
"name": "string",
"type": "节点类型",
"typeC": "节点类型中文",
"attribute": [
{
"name": "string",
"value": "属性值"
}
]
}
返回结果
状态码 | 状态码含义 | 说明 | 数据模型 |
---|---|---|---|
200 | OK | 请求成功 | NodeDetailsVM |
数据模型
{
"iCode": "string",
"name": "string",
"type": "节点类型",
"typeC": "节点类型中文",
"attribute": [
{
"name": "string",
"value": "属性值"
}
]
}
预警接口
需要轮询
请求参数:
[
{
iCode: 'xxx',
type: 'xx'
},
// ... 当前概画图xml中已绑定数据的所有节点iCode以及type(同上)
]
数据返回格式:
[
{
iCode: 'xxx',
type: 'xx',
status: '是否预警',
reason: '预警原因',
remark: '备注内容',
},
// ... 其他所传参数对应的预警信息返回(同上)
]