# ecp_flow_app

**Repository Path**: kitman/ecp_flow_app

## Basic Information

- **Project Name**: ecp_flow_app
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-07-25
- **Last Updated**: 2026-10-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ecp_flow_app

ECP_FLOW_APP是是一套用于解析流程引擎，显示流程处理按钮集的工具库，工具集内包含基础的流程引擎解析/匹配/解析，同时也默认集成实现翼协云流程引擎功能，开箱即用。

> 此库专为内部项目需求设计，若不符合您的使用场景，敬请谅解。

## 使用
### 添加依赖
```yaml
ecp_flow_app: <最新版本>
```
## 功能列表

- 流程引擎解析
- 流程处理集动态适配
- 流程处理集动态展示
- 自定义流程按钮
- 翼协云流程引擎开箱即用
## 实现原理
流程引擎分为三个部分，配置/匹配/展示三个流程；现阶段配置已固定，用于匹配阶段生成处理按钮对应的属性；匹配用于指定特定处理功能按钮生成逻辑，而展示阶段则是整合按钮集显示逻辑，三者关系如下：

![](https://cdn.nlark.com/yuque/0/2023/jpeg/2940130/1672971151299-d5545f4e-0fd7-44dd-9d18-4afe7aec0937.jpeg)

### 配置
```dart

class FlowBtnConfig {
  FlowBtnConfig({
    this.id, //唯一标识
    this.label,//标签
    this.config,//子配置 
    this.disabled,//是否禁用
  });
  ...
}

```
### 匹配表
```dart
abstract class FlowMapper {
  const FlowMapper();
  FlowBtn map(FlowBtnConfig config); //匹配方法
}
```
### 流程按钮
```dart
class FlowBtn extends StatefulWidget {
  final FlowBtnBuilder builder; // 按钮样式实现
  final FlowBtnConfig config; // 流程按钮配置项
  final CommentAction? comment; // 评论实现
  final SubmitAction? submit; // 提交事件
  final Function? onCommentEmpty; // 无评论回调，前提是comment不为空
  final VisibilityPredict predict; //显示预测
...
}
```
### 默认Ecp流程按钮
```dart
class EcpFlowBtn extends FlowBtn {
  final DecorationBuilder? decorationBuilder; // 按钮装饰样式
  final String? label; // 按钮标签
  final TextStyleBuilder? labelStyleBuilder; // 标签文字样式
  final EdgeInsets? labelPadding; // 标签对装饰容器边距
  final String? commentEmptyHint; // 无评论提示

  EcpFlowBtn({
    super.key,
    required super.config,
    required super.predict,
    super.comment,
    super.submit,
    this.decorationBuilder,
    this.label,
    this.labelStyleBuilder,
    this.labelPadding,
    this.commentEmptyHint,
  }) : super(
          builder: (ctx, config) => _btnBuilderImpl(
              ctx,
              config,
              label,
              decorationBuilder?.call(ctx),
              labelStyleBuilder?.call(ctx),
              labelPadding),
          onCommentEmpty: () => _onCommentEmpty(commentEmptyHint),
        ) {
    config.label = label ?? config.label;
  }
}
```
### 引擎
```dart
class FlowEngine extends StatefulWidget {
  final List<FlowBtnConfig> configs; //配置集
  final FlowBuilder builder; // 功能按钮集显示样式实现
  final FlowMapper mapper; // 匹配表
  final dynamic record; // 流程实例
  final Map? extras; // 附加属性表
  final FlowSuccessCallback? onFlowSuccess; // 流程处理成功回调
  final FlowSort? sort; // 功能按钮排序
...
}
```

## 使用流程
假设我们有一个流程需要**_confirm_**处理，**_confirm _**提交前需要做出批示，那我们来实现这样一个功能。
### Confirm按钮实现
```dart
class ConfirmBtn extends EcpFlowBtn {
  ConfirmBtn({
    super.key,
    required super.config,
    super.decorationBuilder = _createDecoration,
    super.labelStyleBuilder = _createTextStyle,
    super.comment = onComment,
    super.submit = _onConfirm,
    super.predict = onPredict,
    super.label = "同意",
    super.labelPadding,
    super.commentEmptyHint = "",
  });
}
```

### 匹配表实现
```dart
class EcpFlowMapper extends FlowMapper {
  const EcpFlowMapper();
  @override
  FlowBtn map(FlowBtnConfig config) {
    switch (config.id) {
      case EcpFlowAction.confirmation:
        return ConfirmBtn(config: config);
      ...
    }
  }
}
```

### 引擎实现
```dart
class EcpFlowEngine extends FlowEngine {
  ...

  EcpFlowEngine({
    required this.flowRecord,
    this.ecpConfigs,
    super.key,
    super.builder,
    super.sort,
    super.mapper = ecpMapper, // map表单
    this.approval = false,
    this.onEcpFlowSuccess,
  }) : super(
          record: flowRecord,
          configs: (ecpConfigs ?? [])..addAll(_defaultConfigs),
          extras: {
            approvalKey: approval,
          },
        );
}
```

### 使用
```dart
 Column(
        children: [
          Text(hint).center().expanded(),
          EcpFlowEngine(
            flowRecord: widget.record,
            ecpConfigs: list,
            approval: true,
            onEcpFlowSuccess: (ctx, config) async {
              setState(() => hint = "${config.label}成功，3秒后退出");
              await Future.delayed(const Duration(seconds: 3));
              if (mounted) {
                Navigator.pop(context, true);
              }
            },
          )
        ],
      )
```
## ECP流程引擎使用
ecp流程引擎，是在基础引擎下针对翼协云流程引擎单独实现，其中 **流程按钮功能/匹配表/按钮集展示 **已完成默认实现，开箱即用。
### 示例代码
```dart
 EcpFlowEngine(
            flowRecord: widget.record, // 流程实例
            ecpConfigs: list, // 流程配置列表
            approval: true,//是否显示审核相关按钮
            onEcpFlowSuccess: (ctx, config) async { //流程处理成功回调
              setState(() => hint = "${config.label}成功，3秒后退出");
              await Future.delayed(const Duration(seconds: 3));
              if (mounted) {
                Navigator.pop(context, true);
              }
            },
          )
```