使用 Blazor 和 Elsa Workflows 作为引擎的工作流系统开发

开发一个完整的工作流系统使用 Blazor 和 Elsa Workflows 作为引擎，可以实现一个功能强大的工作流管理和设计系统。下面将提供详细的步骤和代码实现，展示如何在 Blazor 中开发一个基于 Elsa Workflows 的工作流系统。

项目概述

我们的工作流系统将包含以下功能：

使用 Elsa Workflows 创建和管理工作流。
在 Blazor 前端界面中展示工作流的任务列表。
用户能够执行工作流的任务（如审批、拒绝）。
支持任务状态更新和流程流转。

1. 安装依赖

首先，我们需要在 Blazor 项目中安装 Elsa Workflows 相关的 NuGet 包。

dotnet add package Elsa.Core 
dotnet add package Elsa.Activities.Http 
dotnet add package Elsa.Activities.Console

这些包将帮助我们集成 Elsa 引擎，并使用 HTTP 和控制台活动。

2. 设置 Elsa 配置和工作流引擎

在 Startup.cs 或 Program.cs 中配置 Elsa 工作流引擎。

using Elsa;
using Elsa.Persistence.EntityFramework.Core.Extensions;
using Elsa.Services;public class Program
{public static void Main(string[] args){CreateHostBuilder(args).Build().Run();}public static IHostBuilder CreateHostBuilder(string[] args) =>Host.CreateDefaultBuilder(args).ConfigureServices((hostContext, services) =>{services.AddElsa(options => options.UseEntityFrameworkPersistence(options =>{options.UseSqlite("Data Source=elsa_workflows.db");}).AddConsoleActivities().AddHttpActivities());// Add Blazor Server Servicesservices.AddRazorComponents().AddInteractiveComponents();});
}

此配置初始化了 Elsa 工作流引擎，并将工作流数据存储在 SQLite 数据库中。你可以根据需要选择其他数据库存储类型。

3. 定义工作流

我们需要创建一个工作流并定义其步骤。假设我们创建一个审批流程工作流。

using Elsa.Builders;
using Elsa.Services;
using Elsa.Activities.Console;
using Elsa.Activities.Http;public class ApprovalWorkflow : IWorkflow
{public string Id => "ApprovalWorkflow";public void Build(IWorkflowBuilder builder){builder.StartWith<HttpRequestActivity>().Then<ApprovalTask>().Then<EndTask>();}
}

在这个例子中，ApprovalWorkflow 是我们定义的工作流，包含三个步骤：

HttpRequestActivity：处理 HTTP 请求。
ApprovalTask：审批任务，我们可以在这个步骤进行审批操作。
EndTask：结束任务。

4. 实现审批任务

假设 ApprovalTask 是一个自定义活动，它负责执行审批操作。

using Elsa.Services;
using Elsa.ActivityResults;public class ApprovalTask : Activity
{protected override IActivityExecutionResult Execute(ActivityExecutionContext context){var taskId = context.GetInput<string>("TaskId");var approvalDecision = context.GetInput<string>("ApprovalDecision");// 处理审批决策if (approvalDecision == "Approve"){// 执行审批通过的操作}else{// 执行拒绝操作}return Done();}
}

5. Blazor 页面实现

接下来，我们在 Blazor 页面中创建一个用户界面，允许用户查看工作流并进行操作。

@page "/workflow/{workflowId}"@inject Elsa.Services.IWorkflowLaunchpad WorkflowLaunchpad
@inject IJSRuntime JSRuntime<h3>工作流审批</h3><p>Workflow ID: @workflowId</p><button @onclick="StartWorkflow">开始工作流</button>@if (isTaskPending)
{<h4>审批任务</h4><button @onclick="ApproveTask">通过</button><button @onclick="RejectTask">拒绝</button>
}@code {private string workflowId;private bool isTaskPending = false;protected override void OnParametersSet(){workflowId = (string)RouteData.Values["workflowId"];}private async Task StartWorkflow(){// 启动工作流var instance = await WorkflowLaunchpad.StartWorkflowAsync("ApprovalWorkflow", new { TaskId = "123" });isTaskPending = true;}private async Task ApproveTask(){// 审批通过await JSRuntime.InvokeVoidAsync("alert", "审批通过！");isTaskPending = false;}private async Task RejectTask(){// 审批拒绝await JSRuntime.InvokeVoidAsync("alert", "审批拒绝！");isTaskPending = false;}
}

在这个 Blazor 页面中：

StartWorkflow 方法用于启动工作流并触发第一个 HTTP 请求活动。
ApproveTask 和 RejectTask 分别处理审批通过和拒绝操作。
isTaskPending 控制页面是否显示审批按钮。

6. 前端与 Elsa 的集成

Elsa 提供了 HTTP 请求活动，我们可以利用它在前端与工作流交互。Blazor 前端页面通过调用后端的 API 启动工作流，并通过状态更新来控制用户操作。

// HTTP 请求活动配置，接收任务数据并处理审批
public class HttpRequestActivity : Activity
{protected override IActivityExecutionResult Execute(ActivityExecutionContext context){// 获取工作流输入var taskId = context.GetInput<string>("TaskId");// 返回工作流状态或继续处理其他活动return Outcome("Approved");}
}

7. 工作流实例与状态管理

Elsa 工作流引擎会自动管理工作流实例和任务状态。如果你希望将工作流状态持久化到数据库中，你可以配置 Elsa 使用 Entity Framework 或其他持久化机制。

8. 数据库配置

在 Startup.cs 中，我们使用 SQLite 来持久化工作流实例。

services.AddElsa(options => options.UseEntityFrameworkPersistence(options =>{options.UseSqlite("Data Source=elsa_workflows.db");}).AddHttpActivities().AddConsoleActivities()
);

这将确保工作流和任务实例在数据库中存储。