gs-flow-engine

gs-flow-engine 是从 main 工程拆分出来的流程引擎能力工程。

它负责沉淀并发布流程定义、流程设计、流程申请、流程审批、待办/已办任务、岗位和岗位集等流程相关能力。后续通过 npm 包形式提供给 main、gs-eant-comp、gs-ai-assistant 以及其他宿主工程使用。

定位

main 原本包含较多基础能力和业务能力。为了让 main 更干净，也让流程能力可以被其他工程按需复用，流程引擎相关代码被拆分到独立 npm 包中维护。

gs-flow-engine 主要负责：

• 流程运行组件 EFlow
• 流程定义和流程引擎设计器
• 流程节点、字段、审批、按钮和交互配置
• 流程申请、待办、已办任务页面
• 批量审批面板
• 岗位管理
• 岗位集管理
• 流程相关接口元信息 flowMeta
• 流程表单预览和流程流转记录展示

不建议在本包中长期维护具体业务页面。业务表单、业务容器、系统基础壳和 AI 助手能力，应由对应宿主或独立包维护。本包只负责流程引擎、流程任务和流程组织配置等可复用能力。

技术栈

• Vue 3
• Vite
• Ant Design Vue 4
• Bootstrap 5
• Vue Router 4
• Vuex 4
• Vue Request
• Axios
• gs-eant-comp

安装

npm install gs-flow-engine

样式需要在宿主工程中引入：

import 'gs-flow-engine/dist/gs-flow-engine.css'

使用方式

全量注册

import { createApp } from 'vue'
import GsFlowEngine from 'gs-flow-engine'
import 'gs-flow-engine/dist/gs-flow-engine.css'

const app = createApp(App)

app.use(GsFlowEngine)

全量注册会注册 EFlow、FlowCenter、TaskCenter、WorkFlowEngineViewer、PositionViewer、PositionSetViewer、WorkFlowTodoViewer、WorkFlowDoneViewer、WorkFlowSubmitViewer 和 BatchApprovePanel。

按需引入

import {
  EFlow,
  FlowCenter,
  TaskCenter,
  WorkFlowEngineViewer,
  WorkFlowTodoViewer,
  WorkFlowDoneViewer,
  WorkFlowSubmitViewer,
  PositionViewer,
  PositionSetViewer,
  registerFlowCustomFormLoader,
  flowMeta,
} from 'gs-flow-engine'

按需引入适合宿主只接入流程运行组件、流程任务页或流程配置页的场景。

接入到宿主路由

import {
  FlowCenter,
  TaskCenter,
} from 'gs-flow-engine'

export const flowRoutes = [
  {
    path: '/flow',
    name: 'FlowCenter',
    component: FlowCenter,
  },
  {
    path: '/workflow/tasks',
    name: 'TaskCenter',
    component: TaskCenter,
  },
]

宿主工程负责维护菜单、权限、业务路由挂载和接口代理。本包提供可复用页面组件和流程运行能力。

注册自定义流程表单加载器

流程运行组件中的自定义表单由宿主工程提供。Vite 宿主推荐使用 import.meta.glob 收集自己的业务表单，并通过 registerFlowCustomFormLoader 注册加载器：

import { registerFlowCustomFormLoader } from 'gs-flow-engine'

const flowFormModules = import.meta.glob('/src/views/**/*.vue')

registerFlowCustomFormLoader(path => {
  const normalized = path.replace(/^\.?\//, '')
  return flowFormModules[`/src/views/${normalized}`]
})

流程配置中的 componentPath 应使用相对 src/views 的路径，例如：

engine/test_1/components/UndergraduateTeachingTaskEForm.vue

主要导出

| 导出 | 说明 | | --- | --- | | EFlow | 流程运行组件，用于流程申请、审批、查看和流转展示 | | FlowCenter | 流程配置中心，整合流程定义、岗位和岗位集 | | TaskCenter | 流程任务中心，整合待办、已办和申请 | | WorkFlowEngineViewer | 流程定义和流程引擎配置页面 | | PositionViewer | 岗位管理页面 | | PositionSetViewer | 岗位集管理页面 | | WorkFlowTodoViewer | 待办任务页面 | | WorkFlowDoneViewer | 已办任务页面 | | WorkFlowSubmitViewer | 流程申请页面 | | registerFlowCustomFormLoader | 注册宿主工程自定义流程表单加载器 | | flowMeta | 流程模块接口元信息 |

BatchApprovePanel 当前会在全量注册时注册为全局组件，主要由待办任务页面内部使用。

流程能力

流程定义和引擎配置

WorkFlowEngineViewer 用于维护流程定义和流程结构，包含流程列表、流程表格、流程编辑器、节点管理、字段管理、审批配置、按钮配置、强制填写配置和交互配置等能力。

流程运行组件

EFlow 用于承载流程运行态界面，支持默认表单、自定义表单、审批表单、流程步骤和流程历史展示。宿主业务表单可以作为流程运行过程中的业务内容接入。

流程任务

| 导出 | 说明 | | --- | --- | | WorkFlowTodoViewer | 待办任务列表、审批处理和批量审批入口 | | WorkFlowDoneViewer | 已办任务列表、已办详情和流程查看 | | WorkFlowSubmitViewer | 流程申请列表、申请发起和申请详情 |

组织配置

| 导出 | 说明 | | --- | --- | | PositionViewer | 岗位维护，支持岗位列表、人员维护和部门树联动 | | PositionSetViewer | 岗位集维护，支持岗位集列表、岗位选择和部门岗位联动 |

接口元信息

flowMeta 暴露流程模块使用的接口元信息，便于宿主统一注册接口、生成权限、接入菜单或做接口适配。

import { flowMeta } from 'gs-flow-engine'

console.log(flowMeta.WorkFlowDefinition.list)

当前包含以下模块：

| 模块 | 说明 | | --- | --- | | Position | 岗位接口元信息 | | PositionSet | 岗位集接口元信息 | | WorkFlowDefinition | 流程定义、流程引擎初始化、申请和审批接口元信息 | | WorkFlowTodo | 待办任务接口元信息 | | WorkFlowDone | 已办任务接口元信息 | | WorkFlowSubmit | 流程申请接口元信息 |

组件目录结构

src
├── components
│   └── FlowEngine
│       ├── center
│       │   ├── FlowCenter.vue
│       │   └── TaskCenter.vue
│       ├── definition
│       │   ├── WorkFlowEngineViewer.vue
│       │   ├── child
│       │   ├── components
│       │   └── modules
│       ├── organization
│       │   ├── position
│       │   └── position-set
│       ├── runtime
│       │   ├── EFlow.vue
│       │   └── components
│       └── task
│           ├── done
│           ├── submit
│           └── todo
├── views
│   └── engine
│       ├── flow
│       │   └── FlowCenter.vue
│       └── task
│           └── TaskCenter.vue
├── api
│   └── apis
│       └── flow
└── index.js

目录职责：

• components/FlowEngine/center：流程配置中心和流程任务中心。
• components/FlowEngine/definition：流程定义、流程设计器、节点、字段、控件和预览能力。
• components/FlowEngine/organization：岗位和岗位集管理能力。
• components/FlowEngine/runtime：流程运行组件、默认表单、自定义表单、审批表单、流程步骤和流程历史。
• components/FlowEngine/task：待办、已办、申请和批量审批能力。
• components/FlowEngine/legacy：旧版流程中心实现，作为迁移参考保留。
• views/engine/flow：历史入口目录，保留 FlowCenter.vue 作为兼容 wrapper。
• views/engine/task：历史入口目录，保留 TaskCenter.vue 作为兼容 wrapper。
• views/engine/task_v1、views/engine/test_1 到 test_4：本地旧版参考和测试业务页面，不作为 npm 包核心实现目录。
• api/apis/flow：流程相关接口模块。
• components/FlowEngine/index.js：FlowEngine 内部导出入口。
• index.js：npm 包入口，负责组件注册、按需导出和 flowMeta 导出。

与其他包的关系

• gs-eant-comp 负责系统外壳、布局、菜单、工作台和基础组件能力。
• gs-ai-assistant 负责 AI 助手入口、会话、指令、模型和结构化结果展示能力。
• gs-flow-engine 负责流程定义、流程运行、流程任务、岗位和岗位集等流程能力。

宿主工程可以组合使用以上包，只保留自己的业务页面、业务表单、业务接口适配和路由菜单配置。

开发命令

npm run dev
npm run build
npm run preview

发布说明

构建产物输出到 dist，包入口由 package.json 中的 main 和 module 指向：

{
  "main": "dist/gs-flow-engine.umd.cjs",
  "module": "dist/gs-flow-engine.js"
}

发布前建议至少执行：

npm run build

维护原则

• 本包优先维护流程引擎、流程任务、岗位、岗位集和流程运行组件。
• 宿主业务页面和具体业务表单不应长期沉淀在本包中。
• 系统基础壳、布局、全局工具区和基础组件能力应通过 gs-eant-comp 接入。
• AI 助手相关能力应通过 gs-ai-assistant 接入。
• 对外导出保持稳定，内部目录可以按职责继续收敛。