流程审批,通常对应一个业务表单。这个表单一般有两种实现模式,一是不同的环节对应不同表单,二是做一张大表单,分为不同的区域,从业务角度考虑,前者通常对应复杂业务处理;后面一种则更常见和更常用,更友好和实用一些。
Camunda只是工作流引擎,负责流程的流转。Camunda自身实际也附带了一个表单功能,但是,实在简陋到没法用的地步,感兴趣的可以去了解下,我保证你不会有在项目或系统中使用的想法。
基于上述原因,流程表单需要自行设计与实现。从技术角度而言,流程表单本质上依旧是一个业务实体,仍旧可以使用平台的低代码平台进行配置生成,只不过相比普通的表单多了一些工作流相关的属性和特色。
以常见的请假流程为例,我们通过平台的低代码配置功能,先实现请假申请单的基本功能。
新增模块businessflow,用于存放集中存放具体的业务流程,如请假申请、设备申请、资产报废等
实体模型之前预设了一个业务模型,将实体公共属性进行存放,包括标识、创建人、创建时间、修改人,修改时间、版本号、逻辑删除标识,所有实体都继承该模型。
借本次流程实现时机,进行了重构优化,提取出来一个只有标识id的标识模式,由业务模型继承。
对于流程相关的表单实体,如请假申请,同样有大量公共属性,因此设计了一个流程单据的公共实体模型来承载。
该模型继承自业务模型,从而拥有了业务模型的标识,创建人、创建时间、修改人,修改时间、版本号、逻辑删除标识属性,自身配置如下与流程表单相关的公共属性,如下:
使用平台的低代码配置功能,在业务流程模块businessflow下新建请假申请实体Leave,继承流程表单模型。
该实体继承关系如下:
通过平台“生成库表”功能,平台自动处理实体模型继承关系,从当前模型递归找到最顶级,获取所有属性,转换成库表字段后生成库表,清单如下:
使用平台的低代码配置功能,配置列表、新增、修改、查看视图,生成代码,编译,实现请假申请表单的基本的增删改查操作。
前面说过,流程表单虽然本质上是实体,但会多一些跟工作流结合衍生出来的元素。
调整UI实现,对表单进行分区域显示,兼顾用户体验和表单权限细粒度控制。
源码如下:
<template>
<div>
<basic-info :entity-data="entityData" />
<el-card>
<template #header>
<span>申请信息</span>
</template>
<el-form
ref="form"
:model="entityData"
:rules="rules"
label-width="80px"
label-position="right"
:disabled="permissionConfigData.applyArea == 'READONLY'"
>
<el-row>
<el-col :span="12">
<el-form-item label="开始时间" prop="startTime">
<el-date-picker
v-model="entityData.startTime"
:value-format="$dateFormatter.getDatetimeFormat('SECOND')"
:type="$dateFormatter.getDatetimeType('SECOND')"
align="right"
unlink-panels
class="form-item"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="结束时间" prop="endTime">
<el-date-picker
v-model="entityData.endTime"
:value-format="$dateFormatter.getDatetimeFormat('SECOND')"
:type="$dateFormatter.getDatetimeType('SECOND')"
align="right"
unlink-panels
class="form-item"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="总计天数" prop="total">
<el-input v-model="entityData.total" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="请假类型" prop="leaveType">
<dictionary-select v-model="entityData.leaveType" code="LeaveType" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="原因" prop="reason">
<el-input v-model="entityData.reason" type="textarea" :rows="3" />
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-card>
<el-card v-show="permissionConfigData.organizationApproval != 'INVISIBLE'">
<template #header>
<span>部门审批</span>
</template>
<el-form
ref="form"
:model="entityData"
:rules="rules"
label-width="80px"
label-position="right"
:disabled="permissionConfigData.organizationApproval == 'READONLY'"
>
<el-row>
<el-col :span="12">
<el-form-item label="审批人" prop="organizationApprovalName">
<el-input v-model="entityData.organizationApprovalName" :readonly="readonly" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="审批时间" prop="organizationApprovalTime">
<el-input v-model="entityData.organizationApprovalTime" :readonly="readonly" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="审批意见" prop="organizationApprovalAdvice">
<el-input
v-model="entityData.organizationApprovalAdvice"
:readonly="readonly"
type="textarea"
:rows="3"
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-card>
<el-card v-show="permissionConfigData.hrApproval != 'INVISIBLE'">
<template #header>
<span>人事审批</span>
</template>
<el-form
ref="form"
:model="entityData"
:rules="rules"
label-width="80px"
label-position="right"
:disabled="permissionConfigData.hrApproval == 'READONLY'"
>
<el-row>
<el-col :span="12">
<el-form-item label="审批人" prop="hrApprovalName">
<el-input v-model="entityData.hrApprovalName" :readonly="readonly" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="审批时间" prop="hrApprovalTime">
<el-input v-model="entityData.hrApprovalTime" :readonly="readonly" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="审批意见" prop="hrApprovalAdvice">
<el-input
v-model="entityData.hrApprovalAdvice"
:readonly="readonly"
type="textarea"
:rows="3"
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-card>
</div>
</template>
<script>
import { flowMixin } from '@/mixin/flowMixin'
const MODULE_CODE = 'businessflow'
const ENTITY_TYPE = 'leave'
export default {
name: ENTITY_TYPE,
mixins: [flowMixin],
data() {
return {
entityType: ENTITY_TYPE,
moduleCode: MODULE_CODE,
// eslint-disable-next-line no-eval
api: eval('this.$api.' + MODULE_CODE + '.' + ENTITY_TYPE),
pageCode: MODULE_CODE + ':' + ENTITY_TYPE + ':',
entityData: {},
rules: {
startTime: [{ required: true, message: '【开始时间】不能为空', trigger: 'blur' }],
endTime: [{ required: true, message: '【结束时间】不能为空', trigger: 'blur' }],
total: [{ required: true, message: '【总计天数】不能为空', trigger: 'blur' }],
leaveType: [{ required: true, message: '【请假类型】不能为空', trigger: 'blur' }],
reason: [{ required: true, message: '【原因】不能为空', trigger: 'blur' }]
}
}
},
methods: {}
}
</script>
<style scoped></style>
对于工作流单据而言,存在共性,如单据编号、发起人、发起时间、发起部门等信息,在这里封装了一个基本信息的组件,界面如下:
源码如下:
<template>
<el-card class="box-card">
<template #header>
<span>基本信息</span>
</template>
<el-form ref="form" :model="entityData" label-width="80px" label-position="right">
<el-row>
<el-col :span="12">
<el-form-item label="单据编号">{{ entityData.billNo }}</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="发起时间">{{
$dateFormatter.formatUTCTime(entityData.initiateTime)
}}</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="发起人">{{ entityData.initiateUserName }}</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="联系方式">{{ entityData.initiateUserPhone }}</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="发起部门">{{
entityData.initiateOrganizationFullName
}}</el-form-item>
</el-col>
</el-row>
</el-form>
</el-card>
</template>
<script>
export default {
props: {
entityData: {
type: Object,
required: false,
default() {
return {}
}
}
},
data() {
return {}
}
}
</script>
<style scoped>
</style>
流程表单实体新增的时候,除了需要将自身数据持久化外,还需要进行工作流相关操作。
结合平台的运行机制,只需要覆写afterAdd方法即可,包括验证流程启动权限、设置流程启动处理人、设置流程变量、启动流程、更新流程表单的与工作流相关的属性(流程类型、流程实例标识、流程状态等)
@Override
protected void afterAdd(Leave entity) {
String userId=UserUtil.getId();
String code= entity.getClass().getSimpleName();
//验证流程启动权限
flowTemplateService.checkProcessStartPermission(code);
//设置流程启动处理人,缺失此句会导致act_hi_procinst表的START_USER_ID_字段,即流程启动人数据为空
identityService.setAuthenticatedUserId(userId);
// 首环节处理人默认为启动人
Map<String,Object> instanceParams=new HashMap<>(5);
instanceParams.put(WorkFlowConstant.INSTANCE_FIRST_STEP_HANDLER,userId);
//设置请假天数
instanceParams.put("total",entity.getTotal());
WorkflowTemplate workflowTemplate=flowTemplateService.getByCode(code);
//启动流程
ProcessInstance processInstance =runtimeService.startProcessInstanceById(workflowTemplate.getProcessDefinitionId(),entity.getBillNo(),instanceParams);
//更新流程相关字段
//流程类型
entity.setFlowTypeName(workflowTemplate.getName());
//流程实例标识
entity.setFlowInstanceId(processInstance.getProcessInstanceId());
//流程状态
entity.setFlowStatus(WorkflowInstanceStatusEnum.ACTIVE.name());
//发起时间
entity.setInitiateTime(LocalDateTime.now());
//保存
modify(entity);
}
平台名称:一二三开发平台
简介: 企业级通用开发平台
设计资料:csdn专栏
开源地址:Gitee
开源协议:MIT
开源不易,欢迎收藏、点赞、评论。