AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

nbcio-boot基于jeecg的flowable支持部门经理的单个或多实例支持（前端部分）

2024-05-11 94
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： nbcio-boot基于jeecg的flowable支持部门经理的单个或多实例支持（前端部分）

更多ruoyi-nbcio功能请看演示系统

gitee源代码地址

前后端代码： https://gitee.com/nbacheng/ruoyi-nbcio

演示地址：RuoYi-Nbcio后台管理系统 http://218.75.87.38:9666/

更多nbcio-boot功能请看演示系统

gitee源代码地址

后端代码： https://gitee.com/nbacheng/nbcio-boot

前端代码：https://gitee.com/nbacheng/nbcio-vue.git

在线演示（包括H5） ： http://218.75.87.38:9888

1、前端主要是UserTask.vue做如下调整

<template>
  <div style="margin-top: 16px">
    <el-row>
      <h4><b>设置用户类型</b></h4>
      <el-radio-group v-model="defaultTaskForm.dataType" @change="changeDataType">
        <div v-if="bDisplayUser">
          <el-radio label="ASSIGNEE">指定用户</el-radio>
          <el-radio label="INITIATOR">发起人</el-radio>
        </div>
        <el-radio label="MANAGER">部门经理</el-radio>
        <el-radio label="USERS">候选用户</el-radio>
        <el-radio label="ROLES">候选角色</el-radio>
      </el-radio-group>
    </el-row>
    <el-row>
      <div v-if="defaultTaskForm.dataType === 'ASSIGNEE'">
        <el-select v-model="userTaskForm.assignee" filterable allow-create clearable @change="updateElementTask('assignee')">
          <el-option v-for="ak in users" :key="ak.id" :label="ak.name" :value="ak.id" />
        </el-select>
      </div>   
    </el-row>
    <el-row>
      <div v-if="defaultTaskForm.dataType === 'USERS'">
        <el-select v-model="userTaskForm.candidateUsers" filterable allow-create multiple collapse-tags @change="updateElementTask('candidateUsers')">
          <el-option v-for="uk in users" :key="uk.id" :label="uk.name" :value="uk.id" />
        </el-select>
      </div>   
    </el-row>
    <el-row>
      <div v-if="defaultTaskForm.dataType === 'ROLES'">
        <el-select v-model="userTaskForm.candidateGroups" filterable allow-create multiple collapse-tags @change="updateElementTask('candidateGroups')">
          <el-option v-for="gk in groups" :key="gk.id" :label="gk.name" :value="gk.id" />
        </el-select>
      </div>  
    </el-row>
    <el-row v-if="defaultTaskForm.dataType === 'USERS' || defaultTaskForm.dataType === 'ROLES' || defaultTaskForm.dataType === 'MANAGER'">
      <h4><b>多实例</b></h4>
      <div>
        <element-multi-instance :business-object="bpmnElement.businessObject" @multiInsEvent="multiIns"/>
      </div>  
    </el-row>
    <!-- <el-form-item label="到期时间">
      <el-input v-model="userTaskForm.dueDate" clearable @change="updateElementTask('dueDate')" />
    </el-form-item>
    <el-form-item label="跟踪时间">
      <el-input v-model="userTaskForm.followUpDate" clearable @change="updateElementTask('followUpDate')" />
    </el-form-item>
    <el-form-item label="优先级">
      <el-input v-model="userTaskForm.priority" clearable @change="updateElementTask('priority')" />
    </el-form-item> -->
  </div>
</template>
<script>
import ElementMultiInstance from "../../multi-instance/ElementMultiInstance";
export default {
  name: "UserTask",
  components: {
    ElementMultiInstance,
  },  
  props: {
    users: {//兼容老系统add by nbacheng
      type: Array,
      required: true
    },
    groups: {//兼容老系统
      type: Array,
      required: true
    },
    id: String,
    type: String
  },
  data() {
    return {
      defaultTaskForm: {
        assignee: "",
        candidateUsers: [],
        candidateGroups: [],
        dueDate: "",
        followUpDate: "",
        priority: "",
        dataType: "",
      },
      userTaskForm: {},
      bDisplayUser: true,
    };
  },
  watch: {
    id: {
      immediate: true,
      handler() {
        this.bpmnElement = window.bpmnInstances.bpmnElement;
        console.log("watch this.bpmnElement",this.bpmnElement)
        if (this.containsKey(this.bpmnElement.businessObject, 'loopCharacteristics') &&
             this.bpmnElement.businessObject.loopCharacteristics != null) {
          this.bDisplayUser = false;
          if (this.containsKey(this.bpmnElement.businessObject, 'candidateUsers') &&
               this.bpmnElement.businessObject.candidateUsers != null) {
            this.defaultTaskForm.dataType = "USERS";
          }
          if (this.containsKey(this.bpmnElement.businessObject, 'candidateGroups') &&
               this.bpmnElement.businessObject.candidateGroups != null) {
            this.defaultTaskForm.dataType = "ROLES";
          }
          if (this.containsKey(this.bpmnElement.businessObject, 'candidateGroups') &&
               this.bpmnElement.businessObject.candidateGroups === '${DepManagerHandler.getUsers(execution)}') {
            this.defaultTaskForm.dataType = "MANAGER";
          }
        }
        else {
          this.bDisplayUser = true;
          if (this.containsKey(this.bpmnElement.businessObject, 'assignee') &&
            this.bpmnElement.businessObject.assignee != null) {
            this.defaultTaskForm.dataType = "ASSIGNEE";
          } 
          if (this.containsKey(this.bpmnElement.businessObject, 'candidateUsers') &&
            this.bpmnElement.businessObject.candidateUsers != null) {
            this.defaultTaskForm.dataType = "USERS";
          }
          if (this.containsKey(this.bpmnElement.businessObject, 'candidateGroups') &&
            this.bpmnElement.businessObject.candidateGroups != null) {
            this.defaultTaskForm.dataType = "ROLES";
          }
          if (this.containsKey(this.bpmnElement.businessObject, 'candidateGroups') &&
            this.bpmnElement.businessObject.candidateGroups === '${DepManagerHandler.getUsers(execution)}') {
            this.defaultTaskForm.dataType = "MANAGER";
          }
          if (this.containsKey(this.bpmnElement.businessObject, 'assignee') &&
            this.bpmnElement.businessObject.assignee === '${INITIATOR}') {
            this.defaultTaskForm.dataType = "INITIATOR";
          }
        }
        this.$nextTick(() => this.resetTaskForm());
      }
    }
  },
  methods: {
    multiIns(val) { //子组件传递是否是多实例
      this.bDisplayUser = val;
    },
    containsKey(obj, key ) {
        return Object.keys(obj).includes(key);
    },
    resetTaskForm() {
      for (let key in this.defaultTaskForm) {
        let value;
        if (key === "candidateUsers" || key === "candidateGroups") {
          value = this.bpmnElement?.businessObject[key] ? this.bpmnElement.businessObject[key].split(",") : [];
        } else {
          value = this.bpmnElement?.businessObject[key] || this.defaultTaskForm[key];
        }
        this.$set(this.userTaskForm, key, value);
      }
    },
    changeDataType(val) {
      // 清空 userTaskForm 所有属性值
      //Object.keys(this.userTaskForm).forEach(key => this.userTaskForm[key] = null);
      this.userTaskForm.dataType = val;
      if (val === 'INITIATOR') {
        this.userTaskForm.assignee = "${INITIATOR}";
        this.userTaskForm.text = "流程发起人";
        const taskAttr = Object.create(null);
        taskAttr['candidateUsers'] = null;
        taskAttr['candidateGroups'] = null;
        this.userTaskForm['candidateUsers'] = null;
        this.userTaskForm['candidateGroups'] = null;
        taskAttr['assignee'] = this.userTaskForm['assignee'] || null;
        window.bpmnInstances.modeling.updateProperties(this.bpmnElement, taskAttr);
      }
      if (val === 'MANAGER') {
        this.userTaskForm.candidateGroups = "${DepManagerHandler.getUsers(execution)}";
        this.userTaskForm.assignee="${assignee}"
        this.userTaskForm.text = "部门经理";
        const taskAttr = Object.create(null);
        taskAttr['candidateUsers'] = null;ull;
        this.userTaskForm['candidateUsers'] = null;
        taskAttr['candidateGroups'] = this.userTaskForm['candidateGroups'] || null;
        taskAttr['assignee'] = this.userTaskForm['assignee'] || null;
        window.bpmnInstances.modeling.updateProperties(this.bpmnElement, taskAttr);
      }   
    },  
    updateElementTask(key) {
      const taskAttr = Object.create(null);
      if (key === "candidateUsers") {
        taskAttr[key] = this.userTaskForm[key] && this.userTaskForm[key].length ? this.userTaskForm[key].join() : null;
        if(taskAttr[key] !=null) {
          taskAttr['candidateGroups'] = null;
          taskAttr['assignee'] = null;
          this.userTaskForm['candidateGroups'] = null;
          this.userTaskForm['assignee'] = null;
        }  
      } 
      else if (key === "candidateGroups") {
        taskAttr[key] = this.userTaskForm[key] && this.userTaskForm[key].length ? this.userTaskForm[key].join() : null;
        if(taskAttr[key] !=null) {
          taskAttr['candidateUsers'] = null;
          taskAttr['assignee'] = null;
          this.userTaskForm['candidateUsers'] = null;
          this.userTaskForm['assignee'] = null;
        }  
      } 
      else if (key === "assignee") {
        taskAttr[key] = this.userTaskForm[key] && this.userTaskForm[key].length ? this.userTaskForm[key] : null;
        if(taskAttr[key] !=null) {
          taskAttr['candidateUsers'] = null;
          taskAttr['candidateGroups'] = null;
          this.userTaskForm['candidateUsers'] = null;
          this.userTaskForm['candidateGroups'] = null;
        }
      } 
      else {
        taskAttr[key] = this.userTaskForm[key] || null;
      }
      window.bpmnInstances.modeling.updateProperties(this.bpmnElement, taskAttr);
    }
  },
  beforeDestroy() {
    this.bpmnElement = null;
  }
};
</script>

2、例子如下：

3、xm文件如下：

<?xml version="1.0" encoding="UTF-8"?>
<bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:flowable="http://flowable.org/bpmn" id="diagram_Flow_1714391339805" targetNamespace="http://bpmn.io/schema/bpmn">
  <bpmn2:process id="Flow_1714391339805" name="流程_测试部门经理2" isExecutable="true" flowable:processCategory="oa">
    <bpmn2:startEvent id="Event_0lgj24k" flowable:formKey="1567709993582768129">
      <bpmn2:extensionElements>
        <flowable:formData />
      </bpmn2:extensionElements>
      <bpmn2:outgoing>Flow_0zs3lof</bpmn2:outgoing>
    </bpmn2:startEvent>
    <bpmn2:userTask id="Activity_1089rl1" name="发起人" flowable:assignee="${INITIATOR}">
      <bpmn2:extensionElements />
      <bpmn2:incoming>Flow_0zs3lof</bpmn2:incoming>
      <bpmn2:outgoing>Flow_1v1hkd2</bpmn2:outgoing>
    </bpmn2:userTask>
    <bpmn2:sequenceFlow id="Flow_0zs3lof" sourceRef="Event_0lgj24k" targetRef="Activity_1089rl1" />
    <bpmn2:userTask id="Activity_0b0kg4c" name="部门经理" flowable:assignee="${assignee}" flowable:candidateGroups="${DepManagerHandler.getUsers(execution)}">
      <bpmn2:extensionElements>
        <flowable:formData />
      </bpmn2:extensionElements>
      <bpmn2:incoming>Flow_1x9dbi0</bpmn2:incoming>
      <bpmn2:outgoing>Flow_1nybok9</bpmn2:outgoing>
      <bpmn2:multiInstanceLoopCharacteristics flowable:collection="${multiInstanceHandler.getUserName(execution)}" flowable:elementVariable="assignee">
        <bpmn2:completionCondition xsi:type="bpmn2:tFormalExpression">${nrOfCompletedInstances&gt;=nrOfInstances}</bpmn2:completionCondition>
      </bpmn2:multiInstanceLoopCharacteristics>
    </bpmn2:userTask>
    <bpmn2:userTask id="Activity_0hcvugc" name="发起人" flowable:assignee="${INITIATOR}">
      <bpmn2:extensionElements>
        <flowable:formData />
      </bpmn2:extensionElements>
      <bpmn2:incoming>Flow_1nybok9</bpmn2:incoming>
      <bpmn2:outgoing>Flow_0v3lbj9</bpmn2:outgoing>
    </bpmn2:userTask>
    <bpmn2:sequenceFlow id="Flow_1nybok9" sourceRef="Activity_0b0kg4c" targetRef="Activity_0hcvugc" />
    <bpmn2:endEvent id="Event_1jxpzpp">
      <bpmn2:incoming>Flow_0v3lbj9</bpmn2:incoming>
    </bpmn2:endEvent>
    <bpmn2:sequenceFlow id="Flow_0v3lbj9" sourceRef="Activity_0hcvugc" targetRef="Event_1jxpzpp" />
    <bpmn2:userTask id="Activity_00gi95o" name="部门经理" flowable:assignee="${assignee}" flowable:candidateGroups="${DepManagerHandler.getUsers(execution)}">
      <bpmn2:extensionElements>
        <flowable:formData />
      </bpmn2:extensionElements>
      <bpmn2:incoming>Flow_1v1hkd2</bpmn2:incoming>
      <bpmn2:outgoing>Flow_1x9dbi0</bpmn2:outgoing>
    </bpmn2:userTask>
    <bpmn2:sequenceFlow id="Flow_1v1hkd2" sourceRef="Activity_1089rl1" targetRef="Activity_00gi95o" />
    <bpmn2:sequenceFlow id="Flow_1x9dbi0" sourceRef="Activity_00gi95o" targetRef="Activity_0b0kg4c" />
  </bpmn2:process>
  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Flow_1714391339805">
      <bpmndi:BPMNEdge id="Flow_1x9dbi0_di" bpmnElement="Flow_1x9dbi0">
        <di:waypoint x="480" y="180" />
        <di:waypoint x="550" y="180" />
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge id="Flow_1v1hkd2_di" bpmnElement="Flow_1v1hkd2">
        <di:waypoint x="340" y="180" />
        <di:waypoint x="380" y="180" />
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge id="Flow_0v3lbj9_di" bpmnElement="Flow_0v3lbj9">
        <di:waypoint x="810" y="180" />
        <di:waypoint x="852" y="180" />
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge id="Flow_1nybok9_di" bpmnElement="Flow_1nybok9">
        <di:waypoint x="650" y="180" />
        <di:waypoint x="710" y="180" />
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge id="Flow_0zs3lof_di" bpmnElement="Flow_0zs3lof">
        <di:waypoint x="178" y="180" />
        <di:waypoint x="240" y="180" />
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNShape id="Event_0lgj24k_di" bpmnElement="Event_0lgj24k">
        <dc:Bounds x="142" y="162" width="36" height="36" />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="Activity_1089rl1_di" bpmnElement="Activity_1089rl1">
        <dc:Bounds x="240" y="140" width="100" height="80" />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="Activity_0b0kg4c_di" bpmnElement="Activity_0b0kg4c">
        <dc:Bounds x="550" y="140" width="100" height="80" />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="Activity_0hcvugc_di" bpmnElement="Activity_0hcvugc">
        <dc:Bounds x="710" y="140" width="100" height="80" />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="Event_1jxpzpp_di" bpmnElement="Event_1jxpzpp">
        <dc:Bounds x="852" y="162" width="36" height="36" />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="Activity_00gi95o_di" bpmnElement="Activity_00gi95o">
        <dc:Bounds x="380" y="140" width="100" height="80" />
      </bpmndi:BPMNShape>
    </bpmndi:BPMNPlane>
  </bpmndi:BPMNDiagram>
</bpmn2:definitions>


文章标签：
前端开发
移动开发
关键词：
flowable前端
实例前端
nbcio-boot前端
jeecg前端
宁波阿成.
目录
相关文章
宁波阿成.
|
7月前
|
资源调度 前端开发 JavaScript
jenkins升级及基于jeecgboot 的nbcio-boot前端演示发布
jenkins升级及基于jeecgboot 的nbcio-boot前端演示发布
宁波阿成.
90 1
宁波阿成.
|
7月前
|
前端开发
基于jeecg前端实现从表ERP格式选择
基于jeecg前端实现从表ERP格式选择
宁波阿成.
37 1
宁波阿成.
|
7月前
|
移动开发 前端开发
ruoyi-nbcio-plus基于vue3的flowable修正加签与跳转的前端问题
ruoyi-nbcio-plus基于vue3的flowable修正加签与跳转的前端问题
宁波阿成.
109 0
宁波阿成.
|
7月前
|
前端开发 JavaScript API
flowable流程移植新项目前端问题汇总
flowable流程移植新项目前端问题汇总
宁波阿成.
56 0
Java方文山
|
存储 前端开发 数据挖掘
前端框架Layui实现动态表格效果用户管理实例（对表格进行CRUD操作-附源码）（一）
前端框架Layui实现动态表格效果用户管理实例（对表格进行CRUD操作-附源码）
Java方文山
169 0
人不走空
|
7月前
|
XML 前端开发 JavaScript
【前端】深入了解React JSX语法及实例应用
【前端】深入了解React JSX语法及实例应用
人不走空
72 0
yuanzhengme
|
7月前
|
监控 前端开发 应用服务中间件
Zabbix【部署 01】Zabbix企业级分布式监控系统部署配置使用实例（在线安装及问题处理）程序安装+数据库初始+前端配置+服务启动+Web登录
Zabbix【部署 01】Zabbix企业级分布式监控系统部署配置使用实例（在线安装及问题处理）程序安装+数据库初始+前端配置+服务启动+Web登录
yuanzhengme
771 0
Java方文山
|
JSON 前端开发 Java
前端框架Layui实现动态表格效果用户管理实例（对表格进行CRUD操作-附源码）（二）
前端框架Layui实现动态表格效果用户管理实例（对表格进行CRUD操作-附源码）（二）
Java方文山
110 0
豆约翰
|
前端开发 容器
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第8章FlexBox布局（上）
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第8章FlexBox布局
豆约翰
17607 11
greework
|
自然语言处理 JavaScript 前端开发
前端|Vue实例与模板语法
前端|Vue实例与模板语法
greework
77 1

热门文章

最新文章

  • 1
    前端 时间个性化 插件 jquery.timeago.js
  • 2
    前端分页插件pagination
  • 3
    wordpress页面前端添加编辑按钮
  • 4
    购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(2)--前端，以及前后端Session
  • 5
    你用过的网站前端优化的技术有哪些？
  • 6
    [前端]jekyll+markdown+github搭建个人博客
  • 7
    未读消息（小红点），前端与 RabbitMQ实时消息推送实践，贼简单~
  • 8
    合格前端系列第四弹-如何监听一个数组的变化
  • 9
    前端进阶|第四天从setTimeout、Promise看js 的异步机制
  • 10
    从0到上线开发企业级电商项目_前端_01_sublime使用技巧
  • 1
    使用Vue.js构建交互式前端的技术探索
    83
  • 2
    ruoyi-nbcio-plus基于vue3的flowable修正加签与跳转的前端问题
    109
  • 3
    vue的 blob文件下载文件时，后端自定义异常，并返回json错误提示信息，前端捕获信息并展示给用户
    239
  • 4
    ruoyi-nbcio-plus的Vue3前端一些插件使用介绍（二）
    58
  • 5
    ruoyi-nbcio-plus的Vue3前端一些插件使用介绍（一）
    74
  • 6
    ruoyi-nbcio-plus的Vue3前端升级组件后出现的问题（二）
    127
  • 7
    ruoyi-nbcio-plus的Vue3前端升级组件后出现的问题（一）
    385
  • 8
    改造ruoyi-nbcio-plus亿事达多租户前端系统的一些记录
    59
  • 9
    新的centos7.9安装docker版本的jenkins2.436.1最新版本-前端项目发布（五）
    177
  • 10
    vue前端运行时出现RangeError: Maximum call stack size exceeded
    316

    • 相关课程

    更多
  • 网站性能前端监控课程
  • 移动Web前端开发
  • Ajax 前端开发入门与实战
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 阿里文娱大前端技术实践
  • 前端代码是怎样智能生成的

    • 相关实验场景

    更多
  • 1分钟SAE部署Web在线游戏
  • 前端开发基础3：CSS3常见显示属性
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础2：VS Code和Edge的联动开发
  • 前端开发基础1：前端开发环境的安装和配置
  • 快速上手使用Dubbo进行远程调用
    • 下一篇
    使用阿里云接口（API）进行身份证实名认证