基于jeecgboot-vue3的Flowable流程仿钉钉流程设计器-支持VForm3表单的选择与支持

因为这个项目license问题无法开源,更多技术支持与服务请加入我的知识星球。

1、初始化的时候加载表单

/** 查询表单列表 */
const getFormList = () => {listForm().then(res => formOptions.value = res.result.records)
}

2、开始节点的修改,增加表单选择

<el-tab-pane label="表单选择" name="formSelect"><el-form size="small" label-width="90px" @submit.native.prevent><el-form-item label="表单" prop="formKey"><el-select v-model="activeData.formKey" placeholder="请选择表单" @change="updateFormKey" clearable><el-option v-for="item in formOptions" :key="item.id" :label="item.formName" :value="item.id" /></el-select></el-form-item><el-form-item prop="localScope"><span slot="label"><el-tooltip content="若为节点表单,则表单信息仅在此节点可用,默认为全局表单,表单信息在整个流程实例中可用" placement="top-start"><i class="header-icon el-icon-info"></i></el-tooltip><span>节点表单</span></span><el-switch disabled  v-model="activeData.localScope" active-text="是" inactive-text="否" @change="updateFormScope()" /></el-form-item></el-form></el-tab-pane>

3、选择表单的更新,后续还要传递到父组件,以便其它组件使用这些字段

const updateFormKey = (formKey) => {console.log("updateFormKey formKey",formKey)props.activeData.formKey = formKeyconst formItem  = formOptions.value?.find((f) => f.id === formKey)const formContent = JSON.parse(formItem.formContent)props.activeData.formProperties = formContent.widgetListconsole.log("updateFormKey formProperties",props.activeData.formProperties)
}

4、相应watchEffect修改如下:

watchEffect(() => {const formProperties = props.activeData.formPropertiesprops.activeData.formProperties = formProperties?.map((field) => ({id: field.id,name: field.options.label,readonly: field.options.readonly,hidden: field.options.hidden,required: field.options.required}))props.activeData.formProperties?.forEach((item) => {const properties = formProperties.find((f) => f.id === item.id)if (properties) {item.readonly = properties.options.readonlyitem.hidden = properties.options.hiddenitem.required = properties.options.required}})
})

5、效果图如下:

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

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

【转盘案例-开始选号按钮-旋转 Objective-C语言】

一、接下来,我们来说这个“开始选号”按钮, 1.我们之前已经可以自旋转了,当我点击开始选号按钮之后,我让它快速的去旋转,5圈儿,然后停在最上方, 我先把ViewController的startRotate这句话啊,注释掉,先不让它自旋转呢, 把这句话注释掉, 接下来,我们command + R, …

Java---抽象类

乐观学习&#xff0c;乐观生活&#xff0c;才能不断前进啊&#xff01;&#xff01;&#xff01; 我的主页&#xff1a;optimistic_chen 我的专栏&#xff1a;c语言 &#xff0c;Java 欢迎大家访问~ 创作不易&#xff0c;大佬们点赞鼓励下吧~ 文章目录 抽象类什么的抽象类&…

stm32入门-----EXTI外部中断(上 ——理论篇)

目录 前言 一、中断系统 1.基本概念 2.执行过程 二、stm32中断 1.stm32中断类型 2.NVIC总管 3.NVIC的优先级分组 三、EXIT外部中断 1.基本概念 2.AFIO复用IO口 3.EXIT执行过程 前言 本期我们就开始进入到学习stm32的中断系统了&#xff0c;在此之前我们学习过51的知道中…

KAFKA搭建教程

KAFKA搭建教程 期待您的关注 KAFKA学习笔记 帮助更多人 目录 KAFKA搭建教程 1.下载Kafka并解压 2.添加环境变量 3.修改 server.properties 文件 4.将kafka复制到其它节点 5.修改node1、node2节点的broker.id 6.将master的环境变量同步到node1、 node2 7.启动zookeeper…

乐鑫ESP-IoT-Bridge方案简化设备智能联网通信,启明云端乐鑫代理商

随着物联网技术的快速发展&#xff0c;设备联网已成为实现智能化的关键一步。然而&#xff0c;不同设备之间的通信协议、接口等差异&#xff0c;使得设备联网变得复杂且困难。 乐鑫推出的ESP-IoT-Bridge联网方案&#xff0c;正是为了解决这一难题&#xff0c;为物联网场景下的…

【iOS】类对象的结构分析

目录 对象的分类object_getClass和class方法isa流程和继承链分析isa流程实例验证类的继承链实例验证 类的结构cache_t结构bits分析实例验证属性properties方法methods协议protocolsro类方法 类结构流程图解 对象的分类 OC中的对象主要可以分为3种&#xff1a;实例对象&#xf…

HTML2048小游戏(最新版)

比上一篇文章的2048更好一点。 控制方法&#xff1a;WASD键&#xff08;小写&#xff09;或页面上四个按钮 效果图如下&#xff1a; 源代码在图片后面 源代码 HTML <!DOCTYPE html> <html lang"en"> <head><meta charset&…

Qt日志库QsLog使用教程

前言 最近项目中需要用到日志库。上一次项目中用到了log4qt库&#xff0c;这个库有个麻烦的点是要配置config文件&#xff0c;所以这次切换到了QsLog。用了后这个库的感受是&#xff0c;比较轻量级&#xff0c;嘎嘎好用&#xff0c;推荐一波。 下载QsLog库 https://github.c…

Python、Rust与AI的未来展望

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 非常期待和您一起在这个小…

leetcode简单题27 N.119 杨辉三角II rust描述

// 直接生成杨辉三角当前行 pub fn get_row(row_index: i32) -> Vec<i32> {let mut row vec![1; (row_index 1) as usize];for i in 1..row_index as usize {for j in (1..i).rev() {row[j] row[j] row[j - 1];}}row } // 空间优化的方法 pub fn get_row2(row_ind…

【C#】计算两条直线的交点坐标

问题描述 计算两条直线的交点坐标&#xff0c;可以理解为给定坐标P1、P2、P3、P4&#xff0c;形成两条线&#xff0c;返回这两条直线的交点坐标&#xff1f; 注意区分&#xff1a;这两条线是否垂直、是否平行。 代码实现 斜率解释 斜率是数学中的一个概念&#xff0c;特别是…

Windows 2012安装之实现远程连接

新建虚拟机 点击稍后安装操作系统 点击Microsoft Windows(W) 选择Windows Server 2012 设置虚拟机名称、安装位置 选择你的电脑核数 点击编辑虚拟机设置 点击CD/DVD(SATA) 使用ISO映像文件(M) 配置完之后点击确定 然后开启虚拟机 下一步&#xff1a; 点击现在安装&#xff1a…

【LeetCode】删除排序链表中的重复元素 II

目录 一、题目二、解法完整代码 一、题目 给定一个已排序的链表的头 head &#xff0c; 删除原始链表中所有重复数字的节点&#xff0c;只留下不同的数字 。返回 已排序的链表 。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,3,4,4,5] 输出&#xff1a;[1,2,5] 示例 …

【单片机毕业设计选题24069】-物联网节水灌溉系统设计

系统功能: 完成基于物联网的节水灌溉系统的电路图以及软件代码编写。要求系统可以通过传感器监测土壤的湿度和环境温湿度&#xff0c;如果土壤湿度低于限值和环境温湿度超过限值&#xff0c;则需开启继电器&#xff0c;打开电机水泵进行供水灌溉&#xff1b;当土壤湿度高于限值…

Python | Leetcode Python题解之第242题有效的字母异位词

题目&#xff1a; 题解&#xff1a; class Solution:def isAnagram(self, s: str, t: str) -> bool:s_c Counter(s)t_c Counter(t)if(len(s_c) ! len(t_c)):return Falseelse:for key, value in s_c.items():if t_c.get(key) ! value:return Falsereturn True

浅谈数学模型在UGC/AIGC游戏数值配置调参中的应用(AI智能体)

浅谈数学模型在UGC/AIGC游戏数值配置调参中的应用 ygluu 卢益贵 关键词&#xff1a;UGC、AIGC、AI智能体、大模型、数学模型、游戏数值调参、游戏策划 一、前言 在策划大大群提出《游戏工厂&#xff1a;AI&#xff08;AIGC/ChatGPT&#xff09;与流程式游戏开发》讨论之后就…

【软件建模与设计】-04-软件设计和体系结构概念

目录 1、类与对象 2、信息隐藏 2.1、示例 3、继承和泛化/特化 4、并发处理 4.1、并发对象间的协作 5、设计模式 6、软件体系结构和构件 7、软件质量属性 1、类与对象 一个对象是现实世界中物理的或概念的实体。 一个对象盖了数据(data)以及作用于数据之上的过程(pro…

缓存和数据库双写的四种策略分析

概述 缓存是提升系统性能的极为简便的手段之一。相较而言&#xff0c;数据库&#xff08;或者 NoSQL 数据库&#xff09;的运行速度较为迟缓&#xff0c;然而速度在很多时候却是决胜的关键要素。采用缓存能够降低响应时间、减轻数据库负载并且节约成本。 正因如此&#xff0c;往…

HTML2048小游戏

源代码在效果图后面 效果图 源代码 <!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>2048 Game&l…

银河麒麟搭建ftp服务器

1.先 查看系统架构&#xff0c;一般银河麒麟都是arrch64的 lscpu uname -a cat /etc/os-release 去下载对应版本的vsftp.rpm包和ftp包 Index of /NS/ (cs2c.com.cn) 1.安装rpm rpm -ivh *.rpm --nodeps --force #强制安装 2.修改配置文件 vi /etc/vsftpd/vsftpd.conf anon…