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

news2024/9/23 13:18:26

因为这个项目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 = formKey
  const formItem  = formOptions.value?.find((f) => f.id === formKey)
  const formContent = JSON.parse(formItem.formContent)
  props.activeData.formProperties = formContent.widgetList
  console.log("updateFormKey formProperties",props.activeData.formProperties)
}

4、相应watchEffect修改如下:

watchEffect(() => {
  const formProperties = props.activeData.formProperties
  props.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.readonly
      item.hidden = properties.options.hidden
      item.required = properties.options.required
    }
  })
})

5、效果图如下:

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

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

相关文章

JavaSE从零开始到精通

1.前置知识 JVM&#xff1a;java virtrual machine, java虚拟机, 专门用于执行java代码的一款软件。可以将class文件&#xff0c;转换为机器认识的机器码&#xff0c;因为我们的计算机只认识010101的二进制语言。JRE&#xff1a;java runtime enviroment, java运行时环境, jav…

人工智能算法工程师(中级)课程15-常见的网络模型及设计原理与代码详解

大家好&#xff0c;我是微学AI&#xff0c;今天给大家介绍一下人工智能算法工程师(中级)课程15-常见的网络模型及设计原理与代码详解。 本文给大家介绍常见的网络模型及其设计原理与代码实现&#xff0c;涵盖了LeNet、AlexNet、VggNet、GoogLeNet、InceptionNet、ResNet、Dense…

【PostgreSQL】Windows 上安装 PostgreSQL 16版本

博主介绍:✌全网粉丝20W+,CSDN博客专家、Java领域优质创作者,掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围:SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物联网、机器学习等设计与开发。 感兴趣的可…

ubuntu24.04 linux bcm94352hmb 无线网卡(带蓝牙功能)无法连接蓝牙设备的解决办法

ubuntu24.04 linux bcm94352hmb 无线网卡&#xff08;带蓝牙功能&#xff09;无法连接蓝牙设备的解决办法 问题描述 小本是自己换装的bcm94352hmb&#xff0c;现在跑不动黑苹果了&#xff0c;换装ubuntu&#xff0c;该网卡在黑苹果上和windows上都能正常工作&#xff0c;到了…

怎样减少视频的容量 怎样减少视频内存保持清晰度

在数字媒体时代&#xff0c;视频内容已经成为人们日常交流和信息传递的重要方式。然而&#xff0c;视频往往占用大量存储空间&#xff0c;给我们的设备带来不小的负担。如何在不损失视频质量的前提下&#xff0c;减少视频文件的大小呢&#xff1f;本文将为你揭秘几个实用的技巧…

一文掌握Prometheus实现页面登录认证并集成grafana

一、接入方式 以保护Web站点的访问控制&#xff0c;如HTTP 服务器配置中实现安全的加密通信和身份验证&#xff0c;保护 Web 应用程序和用户数据的安全性。 1.1 加密密码 通过httpd-tools工具包来进行Web站点加密 yum install -y httpd-tools方式一&#xff1a;通过htpasswd生…

Postfix+Dovecot+Roundcube开源邮件系统搭建系列1-2:系统搭建目标+MariaDB数据库配置(MySQL)

1. 系统搭建目标 通过本系列文章&#xff0c;最终可以部署一套提供如下服务的邮件系统&#xff1a; SMTP服务&#xff1a;由Postfix提供&#xff0c;监听25、465、587端口。POP3服务&#xff1a;由Dovecot提供&#xff0c;监听110、995端口。IMAP服务&#xff1a;由Dovecot提…

TCP与UDP网络编程

网络通信协议 java.net 包中提供了两种常见的网络协议的支持: UDP&#xff1a;用户数据报协议(User Datagram Protocol)TCP&#xff1a;传输控制协议(Transmission Control Protocol) TCP协议与UDP协议 TCP协议 TCP协议进行通信的两个应用进程&#xff1a;客户端、服务端 …

(算法)区间调度问题

问题大致如下所述&#xff1a;有n项工作,每项工作分别在s时间开始,在t时间结束. 对于每项工作,你都可以选择参与与否,如果选择了参与,那么自始至终都必须全程参与. 此外,参与工作的时间段不能重复(即使是开始的瞬间和结束的瞬间的重叠也是不允许的). 你的目标是参…

数据结构历年考研真题对应知识点(哈夫曼树和哈夫曼编码)

目录 5.5.1哈夫曼树和哈夫曼编码 1.哈夫曼树的定义 2.哈夫曼树的构造 【分析哈夫曼树的路径上权值序列的合法性&#xff08;2010&#xff09;】 【哈夫曼树的性质&#xff08;2010、2019&#xff09;】 3.哈夫曼编码 【根据哈夫曼编码对编码序列进行译码&#xff08;201…

全文翻译 | OWASP《LLM安全与治理检查清单》

&#x1f4a1; 摘要&#xff1a; LLM AI Cybersecurity & Governace Checklist version 1.0 发布时间&#xff1a;2024年2月19日 本文是OWASP&#xff08;开放式网络应用安全项目&#xff09;发布的《LLM AI安全与治理清单》&#xff08;以下简称“清单”&#xff09;&…

使用Django框架实现音频上传功能

数据库设计&#xff08;models.py&#xff09; class Music(models.Model):""" 音乐 """name models.CharField(verbose_name"音乐名字", max_length32)singer models.CharField(verbose_name"歌手", max_length32)# 本质…

Java二十三种设计模式-工厂方法模式(2/23)

工厂方法模式&#xff1a;设计模式中的瑞士军刀 引言 在软件开发中&#xff0c;工厂方法模式是一种常用的创建型设计模式&#xff0c;它用于处理对象的创建&#xff0c;将对象的实例化推迟到子类中进行。这种模式不仅简化了对象的创建过程&#xff0c;还提高了代码的可维护性…

数据结构day2

一、思维导图 内存分配 二、课后习题 分文件编译 //sys.h #ifndef TEST_H #define TEST_H #define MAX_SIZE 100//定义学生类型 typedef struct Stu {char name[20]; //姓名int age; //年龄double score; //分数 }stu;//定义班级类型 typedef struct Class {struct …

4.作业--Jquery,JS

目录 作业题目&#xff1a;1.使用Jquery完成点击图片变换图片颜色 A图 B代码 HTML的部分 JQ的部分 作业题目&#xff1a;2.使用JS中的DOM操作完成背景颜色渐变方向变换。点击背景&#xff0c;渐变方向发生改变。 A图 B代码 学习产出&#xff1a; 作业题目&#xff1a;1…

2014-2024年腾势D9N7N8EVDMI维修手册和电路图资料线路图接线图

经过整理&#xff0c;2014-2024年腾势汽车全系列已经更新至汽修帮手资料库内&#xff0c;覆盖市面上99%车型&#xff0c;包括维修手册、电路图、新车特征、车身钣金维修数据、全车拆装、扭力、发动机大修、发动机正时、保养、电路图、针脚定义、模块传感器、保险丝盒图解对照表…

ORA-00756 ORA-10567故障处理---惜分飞

数据库异常断电之后&#xff0c;recover 报ORA-00756 ORA-10567等错 SQL> recover database; ORA-00756: 恢复操作检测到数据块写入丢失 ORA-10567: Redo is inconsistent with data block (file# 1,block# 113855,file offset is 932700160 bytes) ORA-10564: tablespace S…

【学术会议征稿】第四届人工智能、虚拟现实与可视化国际学术会议(AIVRV 2024)

第四届人工智能、虚拟现实与可视化国际学术会议&#xff08;AIVRV 2024&#xff09; 2024 4th International Conference on Artificial Intelligence, Virtual Reality and Visualization 第四届人工智能、虚拟现实与可视化国际学术会议&#xff08;AIVRV 2024&#xff09;将…

请你谈谈:spring bean的生命周期 - 阶段2:Bean实例化阶段

在Spring框架中&#xff0c;Bean的实例化是Bean生命周期中的一个重要阶段。这个过程包括两个关键的子阶段&#xff1a;Bean实例化前阶段和Bean实例化阶段本身。 BeanFactoryPostProcessor&#xff1a;BeanFactoryPostProcessor是容器启动阶段Spring提供的一个扩展点&#xff0…

科技出海|百分点科技智慧政务解决方案亮相非洲展会

近日&#xff0c;华为非洲全联接大会在南非约翰内斯堡举办&#xff0c;吸引政府官员行业专家、思想领袖、生态伙伴等2,000多人参会&#xff0c;百分点科技作为华为云生态合作伙伴&#xff0c;重点展示了智慧政务解决方案&#xff0c;发表《Enable a Smarter Government with Da…