芋道审批流配置流程表单超详细介绍

原创于 2025-08-18 14:44:10 发布 · 426 阅读

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript #工作流 #审批流 #java

♥️作者：小宋1021
🤵‍♂️个人主页：小宋1021主页
♥️坚持分析平时学习到的项目以及学习到的软件开发知识，和大家一起努力呀！！！
🎈🎈加油！加油！加油！加油
🎈欢迎评论 💬点赞👍🏻 收藏 📂加关注+！

芋道集成的工作流十分好用，功能十分强大。相信我们在逐渐使用的过程之中就会发现有各种不同的业务需求，单一的提交审批→审核员审核，通过或者拒绝→反馈给用户。这种单一流程不够满足各种业务需求，有些时候我们就需要在审批的时候让审批人填写一些信息然后再审批通过。如下图:

比如我现在接到一个需求就是宿舍预约审批，在员工提交住宿申请的时候需要宿舍管理员在审批的时候去分配宿舍，这样就需要用到了我们的流程表单功能，下面我来给大家详细介绍一下芋道流程表单如何配置以及使用，劳烦大家给一个小心心，谢谢大家。

流程表单是在工作流程模块，流程管理菜单里的一个功能。

点击新增可以新增一个新的流程表单

左侧就是可以选择的表单控件，可以按照自己的需要去配置审批通过时想要填写的表单，我现在就以一个级联选择器为例子给大家演示一下如何使用。

我们拖拽一个级联选择器到中间的空白处，就会出现一个选择框，同时右侧也会出现这个级联选择器的配置项。

下面我来介绍一下几个比较关键的字段:

1.字段 ID：组件对应的字段名用于与组件的数据进行绑定。字段名需以字母开头，以确保能够正确识别。这个字段是前端传给后端的标志，后端需要通过这个bedId去找到前端传过来的值。

2.选项数据:选项数据可以选择静态数据和动态数据，静态数据就是在这个页面自己配置好的数据，也就是写死的数据，我们一般不会用到静态数据，而且静态数据偏简单所以我们这里使用动态数据，动态的在后端获取数据。

选择完动态数据之后点击编辑数据配置动态数据项，我们在请求配置里配置好数据来源的请求地址、请求方法、返回的数据类型，然后我们就可以进行数据处理。

由于我是选择的级联选择器，所以我后端传过来的是一颗树状结构的数据，需要进行数据处理。

代码如下:

function parse(res, rule, api) {
  let arrObj = [];
  function transformData(data) {
    return data.map(item => ({
      label: item.placeName,
      value: item.id,
      children: item.children ? transformData(item.children) : null
    }));
  }
  if (res.code === 0) arrObj = transformData(res.data);
  console.log(arrObj, 'aawrawr');
  return arrObj;
}

这个方法是把后端传过来的树状结构进行处理，比如我后端的场所名字是placeName，但是这里就必须转换成label，把id转换成value，需要和这里的字段对应，名字就是label，值是value，子节点是children，而且这串代码还把children里面的数据也转换成label和value的形式。如下图:

最后再配置一下这个选择框的名字，其余的配置项都可以根据您的需求添加，那些都是锦上添花的功能，配置完以上这些就可以成功拿到数据了，其余的功能并不影响。如果还有问题欢迎大家来一起交流。

最后我们点击预览看看能否拿到数据:

非常成功，成功拿到数据，下面我们来看一下后端该如何接受这个字段。

 /**
     * NOT_START(-1, "未开始"),
     * RUNNING(1, "审批中"),
     * APPROVE(2, "审批通过"),
     * REJECT(3, "审批不通过"),
     * CANCEL(4, "已取消"),
     * <p>
     * RETURN(5, "已退回"),
     * <p>
     * <p>
     * 使用场景：
     * 1. 任务被向后【加签】时，它在审批通过后，会变成 APPROVING 这个状态，然后等到【加签】出来的任务都被审批后，才会变成 APPROVE 审批通过
     * <p>
     * APPROVING(7,"审批通过中"),
     * <p>
     * 使用场景：
     * 1. 任务被向前【加签】时，它会变成 WAIT 状态，需要等待【加签】出来的任务被审批后，它才能继续变为 RUNNING 继续审批
     * 2. 任务被向后【加签】时，【加签】出来的任务处于 WAIT 状态，它们需要等待该任务被审批后，它们才能继续变为 RUNNING 继续审批
     * WAIT(0,"待审批");
     *
     * @param event 事件
     */
    @Override
    protected void onEvent(BpmProcessInstanceStatusEvent event) {
        DormAllocationDO oldDormAllocation = dormAllocationMapper.selectById(Long.parseLong(event.getBusinessKey()));
        if (CollUtil.isNotEmpty(event.getProcessVariables())) { // 合并前端传递的流程变量，以前端为准
//            //获取宿舍id
            if(event.getProcessVariables().containsKey("bedId")){
                List<Long> bedList = (List<Long>) event.getProcessVariables().get("bedId");
                int size = bedList.size();
                if (size >= 2) {
                    // 2. 取倒数两位
                    String bedId   = String.valueOf(bedList.get(size - 1));   // 床
                    Long roomId  = Long.valueOf(String.valueOf(bedList.get(size - 2)));   // 房

                    // 3. 分别保存
                    oldDormAllocation.setBedNum(Integer.parseInt(bedId));
                    oldDormAllocation.setDormId(roomId);
                }
            }
        }
        switch (event.getStatus()) {
            case -1://未开始
                break;
            case 0://待审批
                break;
            case 1://审批中
                break;
            case 2://审批通过
                oldDormAllocation.setStatusK1("2");
                //人脸信息传给设备
                setUserFace(oldDormAllocation.getUserId(),oldDormAllocation.getDormId());
                //抄送
                BpmTaskCopyReqVO bpmTaskCopyReqVO = new BpmTaskCopyReqVO();
                bpmTaskCopyReqVO.setId(oldDormAllocation.getProcessInstanceId());
                //查询所有岗位为宿舍管理员--7的用户id
                List<Long> dormAdministrators = adminUserMapper.ListUserIdByPost("7");
                bpmTaskCopyReqVO.setCopyUserIds(dormAdministrators);
                bpmTaskCopyReqVO.setReason("");
                bpmTaskService.copyTask(getLoginUserId(),bpmTaskCopyReqVO);
                break;
            case 3://审批不通过
                oldDormAllocation.setStatusK1("3");
                break;
            case 4://已取消
                oldDormAllocation.setStatusK1("4");
                break;
            case 5://已退回
                break;
            case 7://审批通过中
                break;

        }
        dormAllocationMapper.updateById(oldDormAllocation);
    }

这是我的审批通过的全部方法，我们只需要看这一段即可,其余的都是参考:

if (CollUtil.isNotEmpty(event.getProcessVariables())) { // 合并前端传递的流程变量，以前端为准
//            //获取宿舍id
            if(event.getProcessVariables().containsKey("bedId")){
                List<Long> bedList = (List<Long>) event.getProcessVariables().get("bedId");
                int size = bedList.size();
                if (size >= 2) {
                    // 2. 取倒数两位
                    String bedId   = String.valueOf(bedList.get(size - 1));   // 床
                    Long roomId  = Long.valueOf(String.valueOf(bedList.get(size - 2)));   // 房

                    // 3. 分别保存
                    oldDormAllocation.setBedNum(Integer.parseInt(bedId));
                    oldDormAllocation.setDormId(roomId);
                }
            }
        }

这里的bedId就是我们刚刚配置好的字段唯一id，这段代码会找这个bedId是否有值，如果有值的话就转化成一个Long类型的数组，因为是级联选择器所以传过来的包含所有的路径id，我们只需要倒数第一位(床位号),倒数第二位(宿舍号)即可，把这两条数据放入到实体类里即可，这样在审批时需要填写表单的功能就做完了。

这个功能十分好用，工作流也是十几年的沉淀了，研究审批流、工作流是我们每一个初学者的必经之路，如果大家有什么问题欢迎加我我们一起交流，感谢您的支持。