基于RuoYi-Flowable-Plus的若依ruoyi-nbcio支持自定义业务表单流程的集成方法与步骤（二）

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

gitee源代码地址

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

演示地址：RuoYi-Nbcio后台管理系统

前面讲了集成的后端部分内容，下面简单介绍一下前端的内容

 1、前端生成的页面需要进行修改，增加流程状态启动等相关信息，如demo的index修改如下

<template><div class="app-container"><el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"><el-form-item label="用户账号" prop="userName"><el-inputv-model="queryParams.userName"placeholder="请输入用户账号"clearable@keyup.enter.native="handleQuery"/></el-form-item><el-form-item label="用户昵称" prop="nickName"><el-inputv-model="queryParams.nickName"placeholder="请输入用户昵称"clearable@keyup.enter.native="handleQuery"/></el-form-item><el-form-item label="用户邮箱" prop="email"><el-inputv-model="queryParams.email"placeholder="请输入用户邮箱"clearable@keyup.enter.native="handleQuery"/></el-form-item><el-form-item label="头像地址" prop="avatar"><el-inputv-model="queryParams.avatar"placeholder="请输入头像地址"clearable@keyup.enter.native="handleQuery"/></el-form-item><el-form-item><el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button><el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button></el-form-item></el-form><el-row :gutter="10" class="mb8"><el-col :span="1.5"><el-buttontype="primary"plainicon="el-icon-plus"size="mini"@click="handleAdd"v-hasPermi="['workflow:demo:add']">新增</el-button></el-col><el-col :span="1.5"><el-buttontype="success"plainicon="el-icon-edit"size="mini":disabled="single"@click="handleUpdate"v-hasPermi="['workflow:demo:edit']">修改</el-button></el-col><el-col :span="1.5"><el-buttontype="danger"plainicon="el-icon-delete"size="mini":disabled="multiple"@click="handleDelete"v-hasPermi="['workflow:demo:remove']">删除</el-button></el-col><el-col :span="1.5"><el-buttontype="warning"plainicon="el-icon-download"size="mini"@click="handleExport"v-hasPermi="['workflow:demo:export']">导出</el-button></el-col><right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar></el-row><el-table v-loading="loading" :data="demoList" @selection-change="handleSelectionChange"><el-table-column type="selection" width="30" align="center" /><el-table-column label="用户ID" align="center" prop="demoId" v-if="true"/><el-table-column label="用户账号" align="center" prop="userName" /><el-table-column label="用户昵称" align="center" prop="nickName" /><el-table-column label="流程状态" align="center" prop="actStatus" /><el-table-column label="待处理节点" align="center" prop="taskName" /><el-table-column label="处理人" align="center" prop="todoUsers" /><el-table-column label="操作" align="center" class-name="small-padding fixed-width"><template slot-scope="scope"><act-apply-btn @success="getList" :data-id="scope.row.demoId" :serviceName="serviceName" :variables="scope.row"></act-apply-btn><!--<act-handle-btn @success="getList" :data-id="scope.row.demoId" :type="0" text="通过"></act-handle-btn><act-handle-btn @success="getList" :data-id="scope.row.demoId" :type="1" text="驳回"></act-handle-btn><act-handle-btn @success="getList" :data-id="scope.row.demoId" :type="2" text="退回"></act-handle-btn><act-cancel-btn @success="getList" :data-id="scope.row.demoId"></act-cancel-btn>--><act-historic-detail-btn :data-id="scope.row.demoId"></act-historic-detail-btn><a-divider type="vertical" /><el-buttonsize="medium"type="text"icon="el-icon-edit"@click="handleUpdate(scope.row)"v-hasPermi="['workflow:demo:edit']">修改</el-button><el-buttonsize="medium"type="text"icon="el-icon-delete"@click="handleDelete(scope.row)"v-hasPermi="['workflow:demo:remove']">删除</el-button></template></el-table-column></el-table><paginationv-show="total>0":total="total":page.sync="queryParams.pageNum":limit.sync="queryParams.pageSize"@pagination="getList"/><!-- 添加或修改DEMO对话框 --><el-dialog :title="title" :visible.sync="open" width="500px" append-to-body><el-form ref="form" :model="form" :rules="rules" label-width="80px"><el-form-item label="用户账号" prop="userName"><el-input v-model="form.userName" placeholder="请输入用户账号" /></el-form-item><el-form-item label="用户昵称" prop="nickName"><el-input v-model="form.nickName" placeholder="请输入用户昵称" /></el-form-item><el-form-item label="用户邮箱" prop="email"><el-input v-model="form.email" placeholder="请输入用户邮箱" /></el-form-item><el-form-item label="头像地址" prop="avatar"><el-input v-model="form.avatar" placeholder="请输入头像地址" /></el-form-item><el-form-item label="备注" prop="remark"><el-input v-model="form.remark" type="textarea" placeholder="请输入内容" /></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button><el-button @click="cancel">取 消</el-button></div></el-dialog></div>
</template><script>import { listDemo, getDemo, delDemo, addDemo, updateDemo } from "@/api/workflow/demo";import ActApplyBtn from "@/views/workflow/components/ActApplyBtn";import ActCancelBtn from "@/views/workflow/components/ActCancelBtn";import ActHandleBtn from "@/views/workflow/components/ActHandleBtn";import ActHistoricDetailBtn from "@/views/workflow/components/ActHistoricDetailBtn";export default {name: "Demo",components: {ActApplyBtn,ActCancelBtn,ActHandleBtn,ActHistoricDetailBtn},data() {return {// 按钮loadingbuttonLoading: false,// 遮罩层loading: true,// 选中数组ids: [],// 非单个禁用single: true,// 非多个禁用multiple: true,// 显示搜索条件showSearch: true,// 总条数total: 0,// DEMO表格数据demoList: [],// 弹出层标题title: "",// 是否显示弹出层open: false,// 查询参数queryParams: {pageNum: 1,pageSize: 10,userName: undefined,nickName: undefined,email: undefined,avatar: undefined,status: undefined,},serviceName: 'wfDemoService',// 表单参数form: {},// 表单校验rules: {demoId: [{ required: true, message: "DEMO-ID不能为空", trigger: "blur" }],userName: [{ required: true, message: "用户账号不能为空", trigger: "blur" }]}};},created() {this.getList();},methods: {/** 查询DEMO列表 */getList() {this.loading = true;listDemo(this.queryParams).then(response => {this.demoList = response.rows;this.total = response.total;this.loading = false;});},// 取消按钮cancel() {this.open = false;this.reset();},// 表单重置reset() {this.form = {demoId: undefined,userName: undefined,nickName: undefined,email: undefined,avatar: undefined,status: undefined,delFlag: undefined,createBy: undefined,createTime: undefined,updateBy: undefined,updateTime: undefined,remark: undefined};this.resetForm("form");},/** 搜索按钮操作 */handleQuery() {this.queryParams.pageNum = 1;this.getList();},/** 重置按钮操作 */resetQuery() {this.resetForm("queryForm");this.handleQuery();},// 多选框选中数据handleSelectionChange(selection) {this.ids = selection.map(item => item.demoId)this.single = selection.length!==1this.multiple = !selection.length},/** 新增按钮操作 */handleAdd() {this.reset();this.open = true;this.title = "添加DEMO";},/** 修改按钮操作 */handleUpdate(row) {this.loading = true;this.reset();const demoId = row.demoId || this.idsgetDemo(demoId).then(response => {this.loading = false;this.form = response.data;this.open = true;this.title = "修改DEMO";});},/** 提交按钮 */submitForm() {this.$refs["form"].validate(valid => {if (valid) {this.buttonLoading = true;if (this.form.demoId != null) {updateDemo(this.form).then(response => {this.$modal.msgSuccess("修改成功");this.open = false;this.getList();}).finally(() => {this.buttonLoading = false;});} else {addDemo(this.form).then(response => {this.$modal.msgSuccess("新增成功");this.open = false;this.getList();}).finally(() => {this.buttonLoading = false;});}}});},/** 删除按钮操作 */handleDelete(row) {const demoIds = row.demoId || this.ids;this.$modal.confirm('是否确认删除DEMO编号为"' + demoIds + '"的数据项？').then(() => {this.loading = true;return delDemo(demoIds);}).then(() => {this.loading = false;this.getList();this.$modal.msgSuccess("删除成功");}).catch(() => {}).finally(() => {this.loading = false;});},/** 导出按钮操作 */handleExport() {this.download('workflow/demo/export', {...this.queryParams}, `demo_${new Date().getTime()}.xlsx`)}}
};
</script>

2、同时需要在flowableMixin里需要维护下面的一条记录

/*所有的自定义业务流程表单，组件化注册，在此维护*/allFormComponent:function(){return [{text:'单表示例',routeName: '@/views/workflow/demo/wf',component: () => import('@/views/workflow/demo/wf'),businessTable:'wf_demo'},

3、同时上面需要增加一个进行流程流转过程中的页面wf，demo的wf如下：

<template><div class="app-container"><!-- 显示DEMO数据 --><el-form ref="form" :model="form" label-width="80px" :disabled="disabled"><el-form-item label="用户账号" prop="userName"><el-input v-model="form.userName" placeholder="" /></el-form-item><el-form-item label="用户昵称" prop="nickName"><el-input v-model="form.nickName" placeholder="" /></el-form-item><el-form-item label="用户邮箱" prop="email"><el-input v-model="form.email" placeholder="" /></el-form-item><el-form-item label="头像地址" prop="avatar"><el-input v-model="form.avatar" placeholder="" /></el-form-item><el-form-item label="备注" prop="remark"><el-input v-model="form.remark" type="textarea" placeholder="" /></el-form-item></el-form><!--<div slot="footer" class="dialog-footer"><el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button><el-button @click="cancel">取 消</el-button></div> --></div>
</template><script>import {getDemo, delDemo, addDemo, updateDemo } from "@/api/workflow/demo";export default {name: "wfDemo",components: {},props: {//表单禁用disabled: {type: Boolean,default: false,required: false},/*流程自定义表单数据*/customFormData:{type:Object,default:()=>{return {}},required:false},},data() {return {// 按钮loadingbuttonLoading: false,// 弹出层标题title: "",// 是否显示弹出层open: true,// 表单参数form: {},}},created() {//流程调用自定义表单的传入参数if(this.customFormData != null) {console.log("this.customFormData=",this.customFormData);this.form = this.customFormData;}//this.handleView(this.form);},methods: {// 取消按钮cancel() {this.open = false;this.reset();},// 表单重置reset() {this.form = {demoId: undefined,userName: undefined,nickName: undefined,email: undefined,avatar: undefined,status: undefined,delFlag: undefined,createBy: undefined,createTime: undefined,updateBy: undefined,updateTime: undefined,remark: undefined};this.resetForm("form");},/** 新增按钮操作 */handleAdd() {this.reset();this.open = true;this.title = "添加DEMO";},/** 查看按钮操作 */handleView(row) {this.loading = true;this.reset();const demoId = row.demoId || this.idsgetDemo(demoId).then(response => {this.loading = false;this.form = response.data;this.open = true;this.title = "DEMO详情";});},/** 修改按钮操作 */handleUpdate(row) {this.loading = true;this.reset();const demoId = row.demoId || this.idsgetDemo(demoId).then(response => {this.loading = false;this.form = response.data;this.open = true;this.title = "修改DEMO";});},/** 提交按钮 */submitForm() {this.$refs["form"].validate(valid => {if (valid) {this.buttonLoading = true;if (this.form.demoId != null) {updateDemo(this.form).then(response => {this.$modal.msgSuccess("修改成功");this.open = false;this.getList();}).finally(() => {this.buttonLoading = false;});} else {addDemo(this.form).then(response => {this.$modal.msgSuccess("新增成功");this.open = false;this.getList();}).finally(() => {this.buttonLoading = false;});}}});},}}
</script><style>
</style>

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

C1N短网址 - 是如何做到行业领先的

C1N短网址 - 是如何做到行业领先的

今天从技术角度来聊下短网址的一些事情&#xff0c;市面上的短网址发展基本上经历了几个阶段。 短网址发展的几个阶段&#xff1a; 第一阶段&#xff1a;网址缩短&#xff0c;很纯粹的功能&#xff0c;各个大小公司都在做&#xff0c;门槛很低。典型代表&#xff1a;百度短网…
阅读更多...
项目添加以vue为后缀名的vue文件，怎么解析打包

项目添加以vue为后缀名的vue文件，怎么解析打包

我们都知道&#xff0c;将css文件打包起来&#xff0c;需要加载css-loader和style-loader&#xff0c;那么vue文件打包也需要 下载插件&#xff1a; npm install vue-loader vue-template-compiler --save -dev 下载过程&#xff1a; 下载成功样子&#xff1a; 下载完之后&am…
阅读更多...
Android屏幕刷新机制

Android屏幕刷新机制

基础知识 CPU运行在Android设备上的中央处理器&#xff08;Central Processing Unit&#xff09;是Android设备的核心组件之一&#xff0c;负责执行计算和控制设备的各种操作。 Android设备上的CPU通常采用ARM架构&#xff0c;如ARM Cortex-A系列处理器。这些处理器具有高性能…
阅读更多...
nginx+nodejs 一台服务器站架多个网站

nginx+nodejs 一台服务器站架多个网站

一、一台服务器架设多个 nodejs 网站的拓扑结构 二、搭建 Nodejs 生产环境 1、下载 下载 nodejs 二进制代码包或者&#xff0c;然后减压到 /usr/local/nodejs 2、配置环境变量 (1).vi /etc/profile (2).最后面添加&#xff1a; export NODE_HOME/usr/local/nodejs/bin…
阅读更多...
hbase操作学习

hbase操作学习

1.namespace list_namespace 展示数据库 create_namespace 可以带属性名 属性值 create_namespace mydb,{author>hjp,ctime>2023-10-18}describe_namespace ‘库名’ 查看库的详细信息 alter_namespace ‘库名’ 修改表的详细信息 删除就是把method设置为unset dr…
阅读更多...
识别准确率竟如此高，实时语音识别服务

识别准确率竟如此高，实时语音识别服务

前言 本文将介绍一个准确率非常高的语音识别框架&#xff0c;那就是FunASR&#xff0c;这个框架的模型训练数据超过几万个小时&#xff0c;经过测试&#xff0c;准确率非常高。本文将介绍如何启动WebSocket服务和Android调用这个服务来实时识别&#xff0c;一边说话一边出结果…
阅读更多...
软考高项-规划质量管理

软考高项-规划质量管理

输入工具与技术输出 项目章程项目管理计划 需求管理计划风险管理计划干系人参与计划范围基准项目文件 假设日志需求文件需求跟踪矩阵风险登记册干系人登记册事业环境因素组织过程资产 专家判断数据收集 标杆对照头脑风暴访谈数据分析 成本效益分析质量成本决策 多标准决策分析数…
阅读更多...
会话结束原因：tcp-rst-from-server 常见原因分析和解决办法

会话结束原因：tcp-rst-from-server 常见原因分析和解决办法

TCP RST&#xff08;重置&#xff09;包通常由服务器端发出&#xff0c;TCP RST包通常是用于在连接出现异常或需要立即终止连接的情况下&#xff0c;所以它的作用是立即终止TCP连接。意味着服务器不再愿意或不能够继续与客户端通信&#xff0c;并且双方的连接被立即关闭。 在T…
阅读更多...
10. 机器学习-评测指标

10. 机器学习-评测指标

Hi,你好。我是茶桁。 之前的课程中&#xff0c;我们学习了两个最重要的回归方法&#xff0c;一个线性回归&#xff0c;一个逻辑回归。也讲解了为什么学习机器学习要从逻辑回归和线性回归讲起。因为我们在解决问题的时候&#xff0c;有限选择简单的假设&#xff0c;越复杂的模型…
阅读更多...
39 WEB漏洞-XXEXML之利用检测绕过全解

39 WEB漏洞-XXEXML之利用检测绕过全解

目录 涉及案例pikachu靶场xml数据传输测试-回显、玩法、协议、引入玩法-读文件玩法-内网探针或攻击内网应用(触发漏洞地址)玩法-RCE引入外部实体dtd无回显-读取文件协议-读文件&#xff08;绕过&#xff09;xxe-lab靶场登陆框xml数据传输测试-检测发现CTF-Jarvis-OJ-Web-XXE安全…
阅读更多...
3dmax中导出模型到unity注意事项

3dmax中导出模型到unity注意事项

从3dmax中导出 1. 注意单位&#xff0c;根据需要&#xff0c;选英寸还是选厘米 2. 不能导出有错误的骨骼&#xff0c;否则导入后模型网格里出现 Skinned Mesh Renderer &#xff0c;对网格变换移动有影响&#xff0c;正常情况下都应该是 Mesh Renderer 3. 导出一般不带光源和…
阅读更多...
canvas实现图片标注，绘制区域

canvas实现图片标注，绘制区域

使用canvas绘制通过多边形标注区域 AI视频项目中需要分析图片&#xff0c;需要前台绘制区域&#xff0c;后端获取坐标然后识别图像&#xff0c;通过canvas 获取点然后连线绘图 HEML代码段 <div class"areaDrawing"><img src"/assets/images/snapPhotos…
阅读更多...
JAVA基础-正则表达式(12)

JAVA基础-正则表达式(12)

目录 Java 正则表达式正则表达式实例正则表达式语法 Matcher 类的方法索引方法查找方法替换方法start 和 end 方法 Java 正则表达式 正则表达式定义了字符串的模式。 正则表达式可以用来搜索、编辑或处理文本。 正则表达式并不仅限于某一种语言&#xff0c;但是在每种语言中有细…
阅读更多...
使用VGG框架实现从二分类到多分类

使用VGG框架实现从二分类到多分类

一.数据集的准备 与之前的不同&#xff0c;这一次我们不使用开源数据集&#xff0c;而是自己来制作数据集。重点需要解决的问题是对数据进行预处理&#xff0c;如每一个图片的大小均不同&#xff0c;需要进行resize&#xff0c;还需要对每一张图片打标签等操作。 数据集文件 …
阅读更多...
【C++代码】二叉搜索树的最近公共祖先，二叉搜索树中的插入操作，删除二叉搜索树中的节点--代码随想录

【C++代码】二叉搜索树的最近公共祖先，二叉搜索树中的插入操作，删除二叉搜索树中的节点--代码随想录

题目&#xff1a;二叉搜索树的最近公共祖先 给定一个二叉搜索树, 找到该树中两个指定节点的最近公共祖先。最近公共祖先的定义为&#xff1a;“对于有根树 T 的两个结点 p、q&#xff0c;最近公共祖先表示为一个结点 x&#xff0c;满足 x 是 p、q 的祖先且 x 的深度尽可能大&a…
阅读更多...
YOLOv8改进实战 | 更换主干网络Backbone（三）之轻量化模型ShuffleNetV2

YOLOv8改进实战 | 更换主干网络Backbone（三）之轻量化模型ShuffleNetV2

前言 轻量化网络设计是一种针对移动设备等资源受限环境的深度学习模型设计方法。下面是一些常见的轻量化网络设计方法： 网络剪枝：移除神经网络中冗余的连接和参数，以达到模型压缩和加速的目的。分组卷积：将卷积操作分解为若干个较小的卷积操作，并将它们分别作用于输入的不…
阅读更多...
python代码书写规范和严格缩进问题，nginx 502 Bad Gateway

python代码书写规范和严格缩进问题，nginx 502 Bad Gateway

python的代码书写规范为什么要单独放在一个章节来写呢&#xff1f;先说说鄙人的一个因为书写代码规范错误而导致的服务器奔溃的经历吧。 nginx 502 Bad Gateway 鄙人之前有一个网站&#xff0c;做机器学习查询的&#xff0c;就是自己统计样本、训练模型&#xff0c;然后与Dja…
阅读更多...
中文编程开发语言编程实际案例：程序控制灯电路以及桌球台球室用这个程序计时计费

中文编程开发语言编程实际案例：程序控制灯电路以及桌球台球室用这个程序计时计费

中文编程开发语言编程实际案例&#xff1a;程序控制灯电路以及桌球台球室用这个程序计时计费 上图为&#xff1a;程序控制的硬件设备电路图 上图为&#xff1a;程序控制灯的开关软件截图&#xff0c;适用范围比如&#xff1a;台球厅桌球室的计时计费管理&#xff0c;计时的时候…
阅读更多...
谈谈单例设计模式的源码应用和安全问题

谈谈单例设计模式的源码应用和安全问题

一、源码应用 事实上&#xff0c;我们在JDK或者其他的通用框架中很少能看到标准的单例设计模式&#xff0c;这也就意味着他确实很经典&#xff0c;但严格的单例设计确实有它的问题和局限性&#xff0c;我们先看看在源码中的一些案例 1、jdk中的单例 jdk中有一个类的实现是一…
阅读更多...
基因表达分析聚类分析

基因表达分析聚类分析

基因表达分析聚类&分析 1. Introduction to gene expression analysis Technology: microarrays vs. RNAseq. Resulting data matricesSupervised (Clustering) vs. unsupervised (classification) learning 微阵列技术&#xff1a; 制备DNA探针阵列并进行互补性杂交。 …
阅读更多...
最新文章

Copyright @ 2022~2023