0.0.4 • Published 4 months ago

qqsl-ngx-bpmn-diagram v0.0.4

Weekly downloads
-
License
-
Repository
-
Last release
4 months ago

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 your angular.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 数据的编辑、自定义图标配置,以及保存事件。

参数

参数名类型默认值说明支持全局配置
xmlstringBpmnEmptyXML要预览的 BPMN 流程图 XML,默认为空白 XML
baseUrlstring""接口的BaseURL,用于配置流程图相关操作
iconConfigBpIconConfig{ 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 数据、配置接口地址、设置图标库和事件配置等。

参数

参数名类型默认值说明支持全局配置
xmlstringBpmnEmptyXML要预览的 BPMN 流程图 XML,默认为空白 XML
baseUrlstring""接口的BaseURL,用于配置流程图相关操作
microServicePathstring""接口的microServicePath,例如:/services/qqsl-data-center
iconConfigBpIconConfig{ group: [] }自定义工具栏的图标库的配置(见参数示例)
nodeEventConfigBpNodeEventConfigundefined节点事件配置,支持默认配置和特殊类型的事件绑定

节点详情接口

GET /overviewDiagram/nodeDetails

请求参数

名称位置类型必选说明
iCodequerystring唯一编码
typequerystring节点类型
Authorizationheaderstringnone

返回示例

200 Response

{
  "iCode": "string",
  "name": "string",
  "type": "节点类型",
  "typeC": "节点类型中文",
  "attribute": [
    {
      "name": "string",
      "value": "属性值"
    }
  ]
}

返回结果

状态码状态码含义说明数据模型
200OK请求成功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: '备注内容',
  },
  // ... 其他所传参数对应的预警信息返回(同上)
]
0.0.4

4 months ago

0.0.3

4 months ago

0.0.2

4 months ago

0.0.1

4 months ago