# VTJ-MATERIAL-BPMN-DESIGN

**Repository Path**: rainsuper/vtj-material-bpmn-design

## Basic Information

- **Project Name**: VTJ-MATERIAL-BPMN-DESIGN
- **Description**: VTJ物料-Bpmn流程设计器
基于 Vue 3 + TypeScript + BPMN.js 开发的流程设计器，支持 Flowable 工作流引擎。
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 11
- **Forks**: 0
- **Created**: 2025-08-28
- **Last Updated**: 2026-03-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: flowable, bpmn, VTJ

## README

# VTJ Material BPMN Designer

基于 Vue 3 + TypeScript + BPMN.js 开发的流程设计器，支持 Flowable 工作流引擎。

![任务配置](./image/任务配置.png)

## 功能特点

### 1. 核心功能
- 完整支持 BPMN 2.0 规范
- 集成 Flowable 工作流引擎扩展
- 支持流程的导入导出（XML格式）
- 支持流程图的预览和下载
- 自定义组件面板，提供丰富的流程元素

### 2. 界面组件

#### 工具栏
- 基础编辑功能（撤销/重做）
- 视图控制（放大/缩小/重置）
- 文件操作（导入/导出/预览/保存）
- 支持快捷键操作

#### 组件面板
- 基础工具（移动/选择/连线）
- 丰富的流程元素：
  - 事件（开始/结束/中间事件）
  - 任务（用户/服务/脚本/业务规则任务等）
  - 网关（排他/并行/包容/事件网关）
  - 其他流程元素

#### 属性面板
- 基础属性配置
- 流程级配置
  - 接口配置
  - 回调地址设置
- 任务节点配置
  - 多种审批模式
  - 灵活的人员配置
  - 表单配置

## 安装使用

### 安装依赖
```bash
npm install
# 或
yarn install
```

### 开发环境运行
```bash
npm run dev
# 或
yarn dev
```

### 构建生产版本
```bash
npm run build
# 或
yarn build
```

## 项目结构
```
src/
├── library/          # 核心库文件
│   ├── api/         # API 接口
│   ├── hooks/       # Vue3 自定义 hooks
│   ├── ui/          # UI 组件
│   └── utils/       # 工具函数
├── material/         # 材料相关
└── shared/          # 共享资源
```

## 使用示例

```vue
<template>
  <VDesign
    :assignee-options="assigneeOptions"
    :candidate-user-options="candidateUserOptions"
    :candidate-group-options="candidateGroupOptions"
    @save="handleSave"
  />
</template>

<script setup lang="ts">
import { VDesign } from 'vtj-material-bpmn-design';

// 配置审批人选项
const assigneeOptions = [
  { label: '张三', value: 'zhangsan' },
  { label: '李四', value: 'lisi' }
];

// 配置候选用户选项
const candidateUserOptions = [
  { label: '王五', value: 'wangwu' },
  { label: '赵六', value: 'zhaoliu' }
];

// 配置候选组选项
const candidateGroupOptions = [
  { label: '人事部', value: 'hr' },
  { label: '财务部', value: 'finance' }
];

// 处理保存事件
const handleSave = (xml: string) => {
  console.log('流程XML:', xml);
};
</script>
```

## 主要特性

1. **现代化技术栈**
   - Vue 3 组合式 API
   - TypeScript 类型支持
   - Vite 构建工具

2. **完善的流程设计功能**
   - 支持所有 BPMN 2.0 标准元素
   - 自定义流程属性配置
   - 灵活的人员分配机制

3. **优秀的用户体验**
   - 响应式设计
   - 直观的操作界面
   - 丰富的快捷键支持

4. **强大的扩展性**
   - 支持自定义组件
   - 可扩展的属性面板
   - 灵活的配置选项

## 配置说明

### 属性面板配置

1. **审批模式**
   - 指定人员：直接指定审批人
   - 候选人员：设置候选人或候选组
   - 外部用户：通过外部系统获取用户

2. **回调配置**
   - 用户回调：获取外部用户信息
   - 办理回调：处理任务完成后的回调

## 功能截图

### 任务配置
![任务配置](./image/任务配置.png)

### 会签配置
![会签配置](./image/会签配置.png)

### 表单配置
![表单配置](./image/表单配置.png)

## 注意事项

1. 确保项目依赖正确安装
2. 需要正确配置 Flowable 相关接口
3. 建议使用最新版本的现代浏览器
4. 注意保存流程图时的数据完整性

## 贡献指南

欢迎提交 Issue 和 Pull Request 来帮助改进项目。

## 许可证

[MIT License](LICENSE)