基于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和数据id
    addSignForm.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、效果图