webos-workflow-design（webos工作流设计器）

基于 Vue3 + Layui-Vue 的工作流设计器组件库，支持可视化流程设计和步骤配置。

特性

• 🎨 可视化流程设计 - 拖拽式节点编辑，直观的流程编排
• 📋 表单化配置 - 集成 webosformdesign，支持动态配置界面
• 🔧 灵活的步骤设置 - 支持多种流转策略和处理者类型
• 🎯 调试模式 - 内置流程调试功能，方便问题排查
• 📱 响应式设计 - 适配不同屏幕尺寸

安装

npm install webos-workflow-design

依赖

需要安装以下依赖项：

npm install vue @layui/layui-vue webosformdesign webosutils

快速开始

基础用法

<template>
  <WorkflowDesign 
    :flow-data="flowData"
    @save="handleSave"
  />
</template>

<script setup>
import { ref } from 'vue';
import WorkflowDesign from 'webos-workflow-design';

const flowData = ref({
  // 流程数据
});

const handleSave = (data) => {
  console.log('保存流程:', data);
};
</script>

引入样式

import 'webos-workflow-design/lib/index.css';

主要组件

WorkflowDesign - 工作流设计器主组件

属性:

• flowData: 流程数据对象
• readOnly: 是否只读模式

事件:

• @save: 保存流程时触发
• @change: 流程数据变化时触发

FlowPreview - 流程预览组件

用于展示流程的可视化预览。

属性:

• flowid: 流程ID
• height: 预览高度

表单化配置

工作流设计器集成了 webosformdesign，支持使用表单设计器来配置流程和步骤属性。

详细使用说明请参考：

• FORM_USAGE.md - 表单化配置详细说明
• SWITCH_MODE_GUIDE.md - 模式切换指南

开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建生产版本
npm run build

许可证

MIT License

更新日志

v1.0.0

• 初始版本发布
• 支持可视化流程设计
• 集成表单化配置功能
• 支持多种流转策略