芋道--如何自定义业务表单,配置对应的工作流程(详细步骤)

需求描述:

    芋道的动态表单就不再介绍了,相对来讲比较简单,跟着官网文档就可以实现,本文将详细的介绍如何新建独立的业务表记录申请的信息,并设计对应的工作流。

    这里表中的每一条记录,都将通过流程实例编号(process_instance_id )和对应的流程实例进行关联。

    而每一个流程实例也都会通过业务键(BUSINESS_KEY_)指向对应的业务记录

这里假设创建一个车辆申请工作流,来举例:

1.设计业务表:

CREATE TABLE `bpm_oa_apply` (
  `id` bigint NOT NULL AUTO_INCREMENT COMMENT '车辆申请表单主键',
  `user_id` bigint NOT NULL COMMENT '申请人的用户编号',
  `type` tinyint NOT NULL COMMENT '车辆类型',
  `reason` varchar(200) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '申请原因',
  `start_time` datetime NOT NULL COMMENT '开始时间',
  `end_time` datetime NOT NULL COMMENT '结束时间',
  `result` tinyint NOT NULL COMMENT '申请结果',
  `process_instance_id` varchar(64) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '流程实例的编号',
  `creator` varchar(64) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci DEFAULT '' COMMENT '创建者',
  `create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  `updater` varchar(64) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci DEFAULT '' COMMENT '更新者',
  `update_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
  `deleted` bit(1) NOT NULL DEFAULT b'0' COMMENT '是否删除',
  `tenant_id` bigint NOT NULL DEFAULT '0' COMMENT '租户编号',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=26 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='OA 车辆申请表';

  • process_instance_id 字段,关联流程引擎的流程实例对应的 ACT_HI_PROCINST 表的 PROC_INST_ID_ 字段
  • result 字段,申请结果,需要通过 Listener 监听回调结果

2.代码生成

利用系统中的代码生成,可以快速的生成对应的结构,将生成的代码粘贴到对应的模块,具体可以看芋道官网的开发文档中 代码生成(单表)说明文档。代码生成【单表】(新增功能) | ruoyi-vue-pro 开发指南 (iocoder.cn)icon-default.png?t=N7T8https://doc.iocoder.cn/new-feature/#_2-1-%E5%AF%BC%E5%85%A5%E8%A1%A8

生成的代码都导入完成后,我们创建审批流要用到的create和detail页面,这里我们仿照给的请假申请示例:

3.创建create和detail界面,具体如下:

  create.vue:该页面用于填写业务表的信息,提交流程

<template>
  <div class="app-container">
      <el-form ref="formRef" :model="formData" :rules="formRules" v-loading="formLoading" label-width="100px">

                    <el-form-item label="车辆类型" prop="type">
                      <el-select v-model="formData.type" placeholder="请选择车辆类型">
                            <el-option v-for="dict in typeDictData" :key="parseInt(dict.value)" :label="dict.label" :value="parseInt(dict.value)"/>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="申请原因" prop="reason">
                      <el-input v-model="formData.reason" placeholder="请输入申请原因" />
                    </el-form-item>
                    <el-form-item label="开始时间" prop="startTime">
                      <el-date-picker clearable v-model="formData.startTime" type="date" value-format="timestamp" placeholder="选择开始时间" />
                    </el-form-item>
                    <el-form-item label="结束时间" prop="endTime">
                      <el-date-picker clearable v-model="formData.endTime" type="date" value-format="timestamp" placeholder="选择结束时间" />
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="submitForm">提 交</el-button>
                    </el-form-item>
      </el-form>
  </div>
</template>

<script>
  import { getDictDatas, DICT_TYPE } from '@/utils/dict'
  import * as OaApplyApi from '@/api/bpm/oaapply';
      export default {
    name: "OaApplyForm",
    components: {
    },
    data() {
      return {
        formData: {
            type: undefined,
            reason: undefined,
            startTime: undefined,
            endTime: undefined,
        },
        typeDictData: getDictDatas(DICT_TYPE.BPM_OA_LEAVE_TYPE),
                        };
    },
    methods: {
      /** 提交按钮 */
       submitForm() {
        this.$refs["formRef"].validate(valid => {
        if (!valid) {
          return;
        }
        const data = this.formData;
         OaApplyApi.createOaApply(data);
          this.$modal.msgSuccess("新增成功");
          this.dialogVisible = false;
          this.$emit('success');

      });
      },
    }
  };
</script>

  detai.vue: 该页面用于查看业务表的信息

<template>
  <div class="app-container">
    <el-form ref="formRef" :model="formData" label-width="100px">

      <el-form-item label="车辆类型" prop="type">
        <dict-tag :type="DICT_TYPE.BPM_OA_CAR_TYPE" :value="formData.type"/>
      </el-form-item>
      <el-form-item label="申请原因" prop="reason">
        {{ formData.reason}}
      </el-form-item>
      <el-form-item label="开始时间" prop="startTime">
        {{parseTime(formData.startTime, '{y}-{m}-{d}')}}
      </el-form-item>
      <el-form-item label="结束时间" prop="endTime">
        {{parseTime(formData.endTime, '{y}-{m}-{d}')}}
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {getOaApply} from '@/api/bpm/apply';
import {getDictDatas, DICT_TYPE} from '@/utils/dict'
export default {
  name: "BpmOALeaveDetail",
  components: {
  },
  props: {
    id: {
      type: [String, Number],
      default: undefined
    },
  },
  data() {
    return {
      carId: undefined, // 申请编号
      // 表单参数
      form: {
        startTime: undefined,
        endTime: undefined,
        type: undefined,
        reason: undefined,
      },

      typeDictData: getDictDatas(DICT_TYPE.BPM_OA_CAR_TYPE),
    };
  },
  created() {
    this.carId = this.id || this.$route.query.id;
    if (!this.carId) {
      this.$message.error('未传递 id 参数,无法查看 OA 信息');
      return;
    }
    this.getDetail();
  },
  methods: {
    /** 获得请假信息 */
    getDetail() {
      getOaApply(this.carId).then(response => {
        this.formData = response.data;
      });
    },
  }
};
</script>

3.配置路由

   在 router/index.js 中定义 create.vue 和 detail.vue 的路由,配置如下:

 {
    path: '/bpm',
    component: Layout,
    hidden: true,
    redirect: 'noredirect',
    children: [{
        path: 'oa/leave/create',
        component: (resolve) => require(['@/views/bpm/oa/leave/create'], resolve),
        name: 'BpmOALeaveCreate',
        meta: {title: '发起 OA 请假', icon: 'form', activeMenu: '/bpm/oa/leave'}
      }, {
        path: 'oa/leave/detail',
        component: (resolve) => require(['@/views/bpm/oa/leave/detail'], resolve),
        name: 'BpmOALeaveDetail',
        meta: {title: '查看 OA 请假', icon: 'view', activeMenu: '/bpm/oa/leave'}
      },
      {
        path: 'oa/oaapply/create',
        component: (resolve) => require(['@/views/bpm/oa/oaapply/create'], resolve),
        name: 'BpmOAApplyCreate',
        meta: {title: '发起 OA 申请', icon: 'form', activeMenu: '/bpm/oa/oaapply'}
      }, {
        path: 'oa/oaapply/detail',
        component: (resolve) => require(['@/views/bpm/oa/oaapply/detail'], resolve),
        name: 'BpmOAApplyDetail',
        meta: {title: '查看 OA 申请', icon: 'view', activeMenu: '/bpm/oa/oaapply'}
      }
    ]
  },

4.修改权限

   由于新增、查看OA申请,都在侧边的菜单栏当中,因此,审批人的角色中,应当配置对应的权限,如图所示

   这样在审批的过程中就可以看到对应的表单信息了。

5.常见问题

1.如何区分这个流程是什么状态(处理中、同意、拒绝)?

    首先,我们需要监听每个流程进展到哪一步了,因此这里实现流程引擎定义的BpmProcessInstanceResultEventListener监听器,在流程结束时,会回调通知最终的结果是否通过。

getProcessDefinitionKey()方法实际上就是返回业务key(在service对应的实现类中设置的)

而监听器捕捉到时间以后就会触发event方法,这个时候会更新业务表中的result字段,将对应的结果更新到业务表中。

2.枚举是如何获取,并赋值的呢?

    流程状态的枚举类都是定义在BpmProcessInstanceResultEnum中,通过监听工作流中的处理结果,然后将其赋值到业务对象的result中。

3.审批流程每经过一个节点,处理完成后是如何触发短信通知的呢?

    具体可以看对应的专栏芋道框架----(业务表单工作流)短信通知流程分析-CSDN博客

4.BpmOACarResultListener监听器是什么时候触发的呢?需要注意的点是什么?

    首先,我们在创建监听器的时候记得要加注解@Component,否则不起作用,该监听器继承了BpmProcessInstanceResultEventListener,所以当流程示例的结果发生变更了就会触发该监听器。

6.如果不同的审批节点,需要看到业务表单中的不同模块,甚至想要补充业务表单,又该如何设计?

 如果不同的审批节点,想看到不同的模块,我们可以根据角色来区分,例如,

   这样,就只有有bpm:oa-car:name权限的角色才能够在detail页面中看到车辆名称,然后我们在将对应的权限赋给需要的角色即可。 

   想要补充表单,实际上就是在detail页面中将对应的内容写成可编辑即可,然后根据id去更新对应的业务表。 

这里,根据我的业务,判断了一下是否是当前审批的人是否是申请人,如果是的话,在判断是哪一个节点,因为 如果是起始提交表单的时候,我们依旧是不露出这个input的。

    tips:如果单从角色来控制显示业务表单还不够,因为有可能这个角色在多个节点都需要审批,但每一个节点所看到的内容又不一致,所以,我们根据角色以及当前节点两个条件来锁定,是否显示表单动态的那一部分。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/343424.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

HTML标题

我的HTML标题学习小记 HTML的标题功能真的非常实用&#xff01;它们就像是文章的大纲&#xff0c;帮助网页内容呈现出清晰的结构&#xff0c;也就是小题大作一番。 HTML标题的奥秘 在HTML中&#xff0c;我们使用<h1>至<h6>这些标签来定义标题。其中&#xff0c;…

Java 设计者模式以及与Spring关系(六) 装饰和模版方法模式

简介: 本文是个系列一次会出两个设计者模式作用&#xff0c;如果有关联就三个&#xff0c;除此外还会讲解在spring中作用。 23设计者模式以及重点模式 我们都知道设计者模式有3类23种设计模式&#xff0c;标红是特别重要的设计者模式建议都会&#xff0c;而且熟读于心&#…

软件测试|SQL常用语法,你都会吗?

前言 SQL作为一门语言&#xff0c;和其他编程语言一样&#xff0c;都是需要遵循一些特定的规范和准则的&#xff0c;这也就是我们常说的语法&#xff08;Syntax&#xff09;。 下面是几个SQL的语法规则&#xff1a; 所有的 SQL 语法都必须以关键字&#xff08;也称命令&…

图片有路人的部分怎么抠掉?看完你就会

在我们拍摄的照片中&#xff0c;常常会出现一些不想要的元素&#xff0c;比如路人、路边的垃圾桶、广告牌等等&#xff0c;有时候他们的出现可能会破坏照片的整体美感。那么&#xff0c;如何把图片中的路人部分抠掉呢&#xff1f;本文将为你详细介绍多种方法&#xff0c;帮助你…

Java基础 - 09 Set之linkedHashSet , CopyOnWriteArraySet

LinkedHashSet和CopyOnWriteArraySet都是Java集合框架提供的特殊集合类&#xff0c;他们在特定场景下有不同的用途和特点。 LinkedHashSet是Java集合框架中的一种实现类&#xff0c;它继承自HashSet并且保持插入顺序。它使用哈希表来存储元素&#xff0c;并使用链表来维护插入…

让Mac与Windows合二为一:Microsoft Remote Desktop for Mac的魅力

在数字时代&#xff0c;远程连接已成为工作、学习和生活的必备工具。而Microsoft Remote Desktop for Mac正是这样一款能够让你随时随地&#xff0c;轻松连接到Windows系统的强大工具。 Microsoft Remote Desktop for Mac不仅提供了高效、稳定的远程访问体验&#xff0c;更凭借…

aspose-cells-20.7.jar 去除水印及次数限制

1.使用 jd-gui.exe 反编译查看&#xff0c;直接搜索 License 1.修改 public static boolean isLicenseSet() {return (a ! null);}改成 public static boolean isLicenseSet() {return true;}2.修改 public void setLicense(InputStream stream) {Document document null;if (…

Acwing-语法基础习题综合[难度:简单]

目录 题目序号604&#xff1a; 圆的面积 题目序号605&#xff1a; 简单乘积 题目序号606&#xff1a; 平均数1 题目序号607&#xff1a; 平均数2 题目序号608&#xff1a; 差 题目序号609&#xff1a; 工资 题目序号611&#xff1a; 简单计算 题目序号612&#xff1a; …

springboot 整合 ElasticSearch 方法 (一)

下载 ES 相当于安装 MySQL, 可以在官网上下载 (链接在后面). 要注意安装的 ES 的版本要和项目中用的 Springboot 的版本对应. 比如我用的 Springboot 版本是 2.6, 所以ES要下载7.15 版本的. 官网链接: https://www.elastic.co/cn/downloads/elasticsearch 点右边这个查看更多…

Linux:动静态库的概念与制作使用

文章目录 动静态库基础认知动静态库基本概念静态库的制作库的概念包的概念 静态库的使用第三方库小结 动态库的制作动态库的使用动态库如何找到内容&#xff1f;小结 本篇要谈论的内容是关于动静态库的问题&#xff0c;具体的逻辑框架是建立在库的制作&#xff0c;库的使用&…

javaWebssh运动会管理系统myeclipse开发mysql数据库MVC模式java编程计算机网页设计

一、源码特点 java ssh运动会管理系统是一套完善的web设计系统&#xff08;系统采用ssh框架进行设计开发&#xff09;&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为TOMCAT7.0,M…

JavaWeb之JavaScript-Vue --黑马笔记

什么是JavaScript&#xff1f; JavaScript&#xff08;简称&#xff1a;JS&#xff09; 是一门跨平台、面向对象的脚本语言。是用来控制网页行为的&#xff0c;它能使网页可交互。 JavaScript 和 Java 是完全不同的语言&#xff0c;不论是概念还是设计。但是基础语法类似。 …

HackTheBox - Medium - Linux - Ransom

Ransom 外部信息搜集 端口扫描 循例nmap Web枚举 /api/login 它似乎受nosql注入影响&#xff0c;我们能够登录成功 把返回的cookie丢到cookie editor&#xff0c;回到主页 zip是加密的 Foothold 我们可以得知加密类型是ZipCrypto 谷歌能够找到这篇文章&#xff0c;它将告诉我…

STATA DEA代码说明及样本数据

STATA_DEA代码说明及样本数据 含DEA模型代码和malmquist指数stata代码 包含具体说明 数据包络分析&#xff08;Data envelopment analysis&#xff0c;DEA&#xff09;是运筹学和研究经济生产边界的一种方法。该方法一般被用来测量一些决策部门的生产效率。 DEA是一个线性规…

http503错误是什么原因

HTTP503错误在站长圈很经常遇到&#xff0c;很多网站站长经常遇到的HTTP503错误经常会不知道怎么去解决它。今天我们就来针对HTTP503错误问题展开说说。HTTP503错误是指服务器暂时无法处理客户端的请求&#xff0c;常常出现在服务器超负荷或维护期间。在这种情况下&#xff0c;…

REVIT二次开发万能刷

将这两个参数赋予其他参数 步骤2 将来做个可以调控的版本 using System; using System.Collections.Generic; using System.Lin

【MySQL】InnoDB 什么情况下会产生死锁

&#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a;数据库 ⛳️ 功不唐捐&#xff0c;玉汝于成 目录 前言 正文 结语 我的其他博客 前言 在数据库管理系统中&#xff0c;特别是使用 InnoDB 存储引擎的 MySQL 中&#xff0c;死锁是一个可能影响…

Python连接MQTT服务器订阅和发布主题-Python物联网开发

一、前言 在物联网开发中&#xff0c;掌握MQTT可以说是一项必备的技能&#xff0c;要使用Python连接MQTT服务器、订阅和发布主题&#xff0c;我们需要导入paho-mqtt库。 二、实现代码 在之前的文章中&#xff0c;我们也介绍了JAVA是如何连接MQTT服务器实现发布和订阅主题的功能…

LLM RAG 多种方式装载LLM的实践

一、大模型系统中检索增强生成&#xff08;RAG&#xff09;的意义 当前大模型在处理特定领域或者高度专业化的查询时表现出知识缺失&#xff0c;当所需信息超出模型训练数据范围或需要最新数据时&#xff0c;大模型可能无法提供准确答案。基于行业SOP、行业标准、互联网实时信…

【C++】Qt:QCustomPlot图表绘制库配置与示例

&#x1f60f;★,:.☆(&#xffe3;▽&#xffe3;)/$:.★ &#x1f60f; 这篇文章主要介绍QCustomPlot图表绘制库配置与示例。 学其所用&#xff0c;用其所学。——梁启超 欢迎来到我的博客&#xff0c;一起学习&#xff0c;共同进步。 喜欢的朋友可以关注一下&#xff0c;下次…