基于jeecgboot-vue3的Flowable流程-加签功能

因为这个项目license问题无法开源，更多技术支持与服务请加入我的知识星球。

1、加签功能对话框代码

这里注意vue3与vue2不同的地方，需要v-model:value，否则获取有问题。

<j-select-user-by-dept class="userSelect" v-model:value="addSignForm.addSignUsers" />

同时上面这个前面要分层div一下，否则界面样式有问题。

<!--加签流程--><a-modal :z-index="100" :title="addSignTitle" @cancel="addSignOpen = false" v-model:open="addSignOpen" :width="'40%'" append-to-body><el-form ref="refAddSignForm" :model="addSignForm" label-width="160px"><el-form-item label="加签类型" prop="addSignType" :rules="[{ required: true, message: '请选择加签类型', trigger: 'blur' }]"><el-radio-group v-model="addSignForm.addSignType" @change="changeAddSignType"><el-radio :label="0">前加签</el-radio><el-radio :label="1">后加签</el-radio><el-radio :label="2">多实例加签</el-radio></el-radio-group></el-form-item><el-form-item label="用户选择" prop="addSignUsers" :rules="[{ required: true, message: '请选择用户', trigger: 'blur' }]"><div style="width: 100%"><j-select-user-by-dept class="userSelect" v-model:value="addSignForm.addSignUsers" /> </div></el-form-item><el-form-item label="处理意见" prop="comment" :rules="[{ required: true, message: '请输入处理意见', trigger: 'blur' }]"><el-input type="textarea" v-model="addSignForm.comment" placeholder="请输入处理意见" /></el-form-item><el-form-item label="附件" prop="commentFileDto.fileurl"><j-upload v-model="addSignForm.commentFileDto.fileurl"   ></j-upload> </el-form-item></el-form><template #footer class="dialog-footer"><el-button @click="addSignOpen = false">取 消</el-button><el-button type="primary" @click="addSignComplete(true)">确 定</el-button></template></a-modal>

2、加签后执行方法

注意这里因为用的组件是j-select-user-by-dept，需要使用下面转换一下

addSignForm.addSignUsers = addSignForm.addSignUsers?.join(',');

/** 加签任务 */const addSignComplete = () => {if (!addSignForm.addSignUsers) {createMessage.error('请选择用户');return;}// 流程信息addSignForm.deployId = route.query && route.query.deployId;addSignForm.taskId = route.query && route.query.taskId;addSignForm.procInsId = route.query && route.query.procInsId;addSignForm.instanceId = route.query && route.query.procInsId;// 初始化表单addSignForm.procDefId = route.query && route.query.procDefId;addSignForm.businessKey = route.query && route.query.businessKey;addSignForm.appType = route.query && route.query.appType;addSignForm.dataId = route.query && route.query.businessKey;//节点类型addSignForm.nodeType = route.query && route.query.nodeType;//online表单id和数据idaddSignForm.onlineId = route.query && route.query.onlineId;if (addSignForm.appType === 'ONLINE') {addSignForm.onlineDataId = route.query && route.query.businessKey;}//对formdesigner后续加签审批的时候需要用到addSignForm.values = taskForm.values;addSignForm.addSignUsers = addSignForm.addSignUsers?.join(',');console.log('addSignForm=', addSignForm);if (addSignForm.addSignType === 2) {multiInstanceAddSignTask(addSignForm).then((response) => {createMessage.success(response.message);addSignOpen.value = false;goBack();});} else {addSignTask(addSignForm).then((response) => {createMessage.success(response.message);addSignOpen.value = false;goBack();});}};

3、效果图