ecp_flow_app

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

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

使用

添加依赖

ecp_flow_app: <最新版本>

功能列表

  • 流程引擎解析
  • 流程处理集动态适配
  • 流程处理集动态展示
  • 自定义流程按钮
  • 翼协云流程引擎开箱即用

实现原理

流程引擎分为三个部分，配置/匹配/展示三个流程；现阶段配置已固定，用于匹配阶段生成处理按钮对应的属性；匹配用于指定特定处理功能按钮生成逻辑，而展示阶段则是整合按钮集显示逻辑，三者关系如下：

配置


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

匹配表

abstract class FlowMapper {
  const FlowMapper();
  FlowBtn map(FlowBtnConfig config); //匹配方法
}

流程按钮

class FlowBtn extends StatefulWidget {
  final FlowBtnBuilder builder; // 按钮样式实现
  final FlowBtnConfig config; // 流程按钮配置项
  final CommentAction? comment; // 评论实现
  final SubmitAction? submit; // 提交事件
  final Function? onCommentEmpty; // 无评论回调，前提是comment不为空
  final VisibilityPredict predict; //显示预测
...
}

默认Ecp流程按钮

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;
  }
}

引擎

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按钮实现

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 = "",
  });
}

匹配表实现

class EcpFlowMapper extends FlowMapper {
  const EcpFlowMapper();
  @override
  FlowBtn map(FlowBtnConfig config) {
    switch (config.id) {
      case EcpFlowAction.confirmation:
        return ConfirmBtn(config: config);
      ...
    }
  }
}

引擎实现

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,
          },
        );
}

使用

 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流程引擎，是在基础引擎下针对翼协云流程引擎单独实现，其中 **流程按钮功能/匹配表/按钮集展示 **已完成默认实现，开箱即用。

示例代码

 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);
              }
            },
          )

Libraries

ecp_flow_app