业务开发

新增业务流程配置

以文章和角色两种场景来演示

新增流程类别字典

新增流程配置

新闻文章审批配置

角色审批配置

表单项流程配置json结构说明

JSON结构说明

fields字段说明

{
  "tableName": "CMS_CONTENT",
  "statusField": "PROGRESS_STATUS",
  "statusOptions": {
    "0": "草稿",
    "1": "审批中",
    "8": "终审通过"
  },
  "fields": [{
    "field": "CONTENT_DATETIME",
    "name": "发布时间",
    "type": "date",
    "fmt": "YYYY-MM-DD HH:mm:ss"
  },{
    "field": "CONTENT_TYPE",
    "name": "文章类型",
    "key": "value",
    "type": "select",
    "multiple": "false",
    "options": [
      {
        "value": "c",
        "label": "推荐"
      },
      {
        "value": "f",
        "label": "幻灯"
      },
      {
        "value": "h",
        "label": "头条"
      },
      {
        "value": "p",
        "label": "图片"
      }]
  },{
    "field": "CATEGORY_ID",
    "name": "所属栏目",
    "type": "select",
    "multiple": "false",
    "options": [{
      "value": "1499198773946273794",
      "label": "文化"
    }, {
      "value": "1546662562244468738",
      "label": "动漫"
    }, {
      "value": "1546662842281369601",
      "label": "综艺"
    }]
  }]
}

流程设计效果展示，通过下拉选择的方式简单设置条件

审批表单

介绍：在办理审批时，用于展示业务数据详情；审批表单路径为一个控制层视图请求或路由(如 /basic/role/form.do)，一般办理审批时，相较于新增数据表单，审批表单禁止修改，按钮隐藏

设置了审批表单，在办理审批时，左侧会根据配置的路径展示业务数据

没有设置审批表单，在办理审批时，不会展示业务数据

审批表单方案1：复用业务数据表单

通用办理会传递一个isReadonly=true参数，业务表单接收参数并根据isReadonly去实现审批表单效果

...
<el-header class="ms-header ms-tr" height="50px" >
    <el-button type="primary" class="iconfont icon-baocun" size="default" @click="save()" :loading="saveDisabled" v-if="!isReadonly">保存
    </el-button>
    <el-button size="default" class="iconfont icon-fanhui" plain @click="back()" v-if="!isReadonly">返回</el-button>
</el-header>
...
<el-form ref="form" :model="form" :rules="rules" label-width="100px" size="default" :disabled="isReadonly">
...
</el-form>
...
<!--vue js-->

data: function () {
    return {
        ...
        isReadonly: false,  // 是否只读
        ...
    }
}

created: function () {
    this.isReadonly = ms.util.getParameter("isReadonly");
}

审批表单方案2：自定义表单

创建一个新的表单页，单独用来展示审批时的业务数据，需要对应新增控制层视图请求或路由

监听器配置

在流程办理的过程中，可以通过监听器监听流程办理过程中的不同时期，达到增强的目的，需要二次开发

参考文档流程监听器

流程绑定

业务分类独立流程图场景

场景说明：当一张表的业务数据有分类，分类是独立表，不同分类下的业务数据通过各自的流程图执行流程，这类场景下流程绑定在分类数据上；如 文章 栏目场景，不同栏目下的文章走不同的审批流程；

特点：业务数据可以通过分类清晰地知道业务数据是否有审批配置，独立流程图，流程图版本更稳定；但是需要对分类表、分类业务做处理

分类表添加流程编码字段

ALTER TABLE YOUR_TABLE
 ADD COLUMN FLOW_CODE VARCHAR(255) DEFAULT '' COMMENT '流程编码';

业务分类数据控制层新增、更新方法添加@EnableFlow注解

前端分类数据表单页使用绑定流程分类组件<ms-flow-select-category>

<ms-flow-select-category>组件参数说明

<ms-flow-select-category>集成代码示例

...
<!-- 头部添加组件引入 -->
<#include "flow/components/ms-flow-select-category.ftl"/>
...

...
<!-- 组件使用 -->
<ms-flow-select-category v-if="!form.id || form.leaf" :form-data="form" :data-id="form.id" category="栏目文章"></ms-flow-select-category>
...

<!-- vue js -->
var categoryForm = Vue.defineComponent({
    components:{
        ...
        // 注册组件
        MsFlowSelectCategory
        ...
    },
...
})

业务无分类场景

场景说明：一张表的业务数据共用一个流程，在提交时通过flowCode参数去指定流程

业务数据

业务数据添加流程字段

-- 如果业务数据原本有审批状态字段，执行下面的sql 注意 要在流程配置json的statusField中需要配置业务表中的审批字段
ALTER TABLE YOUR_TABLE
ADD COLUMN FLOW_INSTANCE_ID varchar(25) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci NULL DEFAULT NULL COMMENT '流程实例id' AFTER DEL,
ADD COLUMN FLOW_NODE_CODE varchar(100) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci NULL DEFAULT NULL COMMENT '节点编码' AFTER FLOW_INSTANCE_ID,
ADD COLUMN FLOW_NODE_NAME varchar(100) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci NULL DEFAULT NULL COMMENT '流程节点名称' AFTER FLOW_NODE_CODE,
ADD COLUMN FLOW_NODE_TYPE int NULL DEFAULT NULL COMMENT '节点类型（0开始节点 1中间节点 2结束节点 3互斥网关 4并行网关）' AFTER FLOW_NODE_NAME;

-- 如果新产生审批的业务，执行下面的sql
ALTER TABLE YOUR_TABLE
ADD COLUMN FLOW_STATUS varchar(25) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci NULL DEFAULT NULL COMMENT '流程状态' AFTER DEL,
ADD COLUMN FLOW_INSTANCE_ID varchar(25) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci NULL DEFAULT NULL COMMENT '流程实例id' AFTER FLOW_STATUS,
ADD COLUMN FLOW_NODE_CODE varchar(100) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci NULL DEFAULT NULL COMMENT '节点编码' AFTER FLOW_INSTANCE_ID,
ADD COLUMN FLOW_NODE_NAME varchar(100) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci NULL DEFAULT NULL COMMENT '流程节点名称' AFTER FLOW_NODE_CODE,
ADD COLUMN FLOW_NODE_TYPE int NULL DEFAULT NULL COMMENT '节点类型（0开始节点 1中间节点 2结束节点 3互斥网关 4并行网关）' AFTER FLOW_NODE_NAME;

有审批属性的业务实体对象继承BaseFlowEntity，并忽略flowStatus字段

新产生审批业务实体对象继承BaseFlowEntity

业务数据控制层使用@FlowStatus注解

在业务数据的新增和更新方法上添加@FlowStatus注解，在新增、更新业务数据时，会自动设置流程状态值，业务实体必须要继承BaseFlowEntity

功能介绍：

• 新增场景
  • 业务流程为发布状态时，新增业务数据审批状态为0，如果流程配置json有配置statusOptions，那么为0对应的值；否则为0，页面上通过ms-flow-status格式化0为待提交
  • 业务流程为未发布状态时，新增业务数据审批状态为8，如果流程配置json有配置statusOptions，那么为8对应的值；否则为8，页面上通过ms-flow-status格式化8为已完成
• 编辑场景，根据流程配置json中的updateStrategy决定处理方式
  • reject(默认)，禁止更新流程中的业务数据
  • continue，允许更新，并以新数据继续执行流程
  • rollback，允许更新，终止当前流程，回滚到待提交状态

业务数据列表页提交审批、撤回组件ms-flow-action

组件参数说明

...
<!-- 头部添加组件引入 -->
<#include "flow/components/ms-flow-action.ftl"/>
...

<!--操作列展示-->

<!--提交审批 -->
<ms-flow-action :data-id="scope.row.id" 
                :flow-Code="getFlowCodeFromCategory" 
                @callback="list"
                :title="scope.row.progressStatus == '审批不通过' ? '重新提交':'提交审批'"
                v-if="
                ms.util.includes(ms.managerPermissions,'flow:'+getFlowType()+':submit') &&
                (scope.row.progressStatus == '待提交' || 
                scope.row.progressStatus == '审批不通过' || 
                scope.row.progressStatus == '撤销')" 
></ms-flow-action>

<!--撤销-->
<ms-flow-action :data-id="scope.row.id" 
                :flow-Code="getFlowCodeFromCategory" 
                @callback="list" 
                action-type="revoke"
                v-if="
                ms.util.includes(ms.managerPermissions,'flow:'+getFlowType()+':revoke') &&
                scope.row.progressStatus == '审批中'"
></ms-flow-action>

<!--vue js-->
components: {
    // 注册组件
    MsFlowAction,
},
method: {
    // 在分类场景下 选中有流程的分类时 获取到该分类绑定流程的flowCode
    getFlowCodeFromCategory(){
        return 'role_approval'
    },
    // 获取业务数据对应的流程类别字典的字典值
    getFlowType(){
        return 'role';
    }
}

提交、撤回权限添加

权限结构：“flow:” + 业务对应流程类别字典的数据值 + “:submit|:revoke”

业务数据列表审批状态格式化组件ms-flow-status

流程默认有一套流程状态的处理，如果没有自定义流程状态的需求，可以直接使用默认的

组件参数说明

...
<!-- 头部添加组件引入 -->
<#include "flow/components/ms-flow-status.ftl">
...

<el-table-column label="审批状态" align="left" show-overflow-tooltip>
<template #default="scope">
    <!-- 注意：scope.row.xxx 这个属性 优先为流程配置json中的statusField，默认为flowStatus -->
    <ms-flow-status :flow-status="scope.row.progressStatus"></ms-flow-status>
</template>
</el-table-column>


<!--vue js-->
components: {
    // 注册组件
    MsFlowStatus,
},


<!------组件------>
// 通过flowStatusOptions进行格式化处理 不在flowStatusOptions中的值，原值显示
flowStatusOptions: // （0待提交 1审批中 8已完成 2 审批通过-在审批日志中使用）
  [{
    value: 0,
    label: '待提交'
  }, {
    value: 1,
    label: '审批中'
  },{
    value: 2,
    label: '审批通过'
  }, {
    value: 8,
    label: '已完成'
  }],

业务数据列表流程进度组件ms-flow-chart

流程进度组件参数说明

...
<!-- 头部添加组件引入 -->
<#include "flow/components/ms-flow-chart.ftl">
...

<!--操作列展示-->
<ms-flow-chart :ins-id="scope.row.flowInstanceId" 
               v-if="
               scope.row.progressStatus != '待提交' && 
               scope.row.flowInstanceId "">
</ms-flow-chart>


<!--vue js-->
components: {
    // 注册组件
    MsFlowChart,
},

业务数据列表增加审批记录按钮

<!--操作列展示-->
<@shiro.hasPermission name="flow:task:done">
    <el-link type="primary" :underline="false" @click="showDoneList(scope.row.id,scope.row.flowInstanceId)">审批记录</el-link>
</@shiro.hasPermission>


<!--vue js-->
showDoneList:function (id,instanceId){
  var url = "/flow/task/done/doneList.do?dataId="+id+"&backUrl="+encodeURIComponent("/basic/role/index.do")
  if (instanceId){
    url += "&instanceId="+instanceId
  }
  ms.util.openSystemUrl(url)
},

抄送

定义：抄送功能，是指流程执行过程中，节点可设置抄送人，节点执行完成时，将节点的审批结果进行抄送，抄送的通知方式需要自行实现

流程图设计

监听器中处理节点抄送人

抄送消息内容和抄送通知方式按需处理

流程设计器接口权限控制

shiroConfig中进行接口权限控制