基于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://www.pswp.cn/web/46197.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/46197.shtml
英文地址,請注明出處:http://en.pswp.cn/web/46197.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

計算機的錯誤計算(三十四)

摘要 用錯數預測 &#xff08;或 pow(a,x)&#xff09;函數的結果中含有的錯誤數字的個數&#xff0c;并與Visual Studio 和Excel 的輸出中含有的錯誤位數相比較。結果顯示&#xff0c;預測與實際一致。 對于 &#xff08;或 pow(a,x)&#xff09;函數&#xff0c;根據 與 的不…

C# 靜態變量與動態變量的區別及用法

在 C# 中&#xff0c;"靜態變量"與"動態變量"并不是直接相關的概念&#xff0c;但可以根據您的問題提供一些解釋。靜態變量和動態變量通常與變量的生命周期和類型綁定相關。以下是兩者的一些區別&#xff1a; 靜態變量&#xff08;Static Variables&#…

3.RabbitMQ安裝-Centos7

官方網址&#xff1a;gInstalling RabbitMQ | RabbitMQ 安裝前提&#xff0c;需要一個erlang語言環境。 下載 erlang: Releases rabbitmq/erlang-rpm GitHub rabbitmq-server: 3.8.8 Releases rabbitmq/rabbitmq-server GitHub 安裝命令 (說明i表示安裝&#xff…

SCI一區級 | Matlab實現SSA-CNN-GRU-Multihead-Attention多變量時間序列預測

目錄 效果一覽基本介紹程序設計參考資料 效果一覽 基本介紹 1.【SCI一區級】Matlab實現SSA-CNN-GRU-Multihead-Attention麻雀算法優化卷積門控循環單元融合多頭注意力機制多變量時間序列預測&#xff0c;要求Matlab2023版以上&#xff1b; 2.輸入多個特征&#xff0c;輸出單個…

Python--MySQL及其使用

1. MySQL 簡介 MySQL 是一個開源的關系型數據庫管理系統&#xff08;RDBMS&#xff09;&#xff0c;廣泛用于各種應用程序&#xff0c;支持多種操作系統。它使用 SQL 語言進行數據查詢、管理和操作。 2. MySQL 的主要特點 跨平臺&#xff1a;支持多種操作系統&#xff0c;如…

一文掌握Prometheus實現頁面登錄認證并集成grafana

一、接入方式 以保護Web站點的訪問控制&#xff0c;如HTTP 服務器配置中實現安全的加密通信和身份驗證&#xff0c;保護 Web 應用程序和用戶數據的安全性。 1.1 加密密碼 通過httpd-tools工具包來進行Web站點加密 yum install -y httpd-tools方式一&#xff1a;通過htpasswd生…

智慧物流園區整體架構方案(46頁PPT)

PPT介紹 將深入探討如何通過高度集成的信息技術和物聯網設備&#xff0c;打造一個自動化、高效與可持續發展的現代物流體系。該方案從智能感知層開始&#xff0c;利用傳感器、RFID技術、GPS等手段實時采集物流數據&#xff1b;接著是網絡傳輸層&#xff0c;借助高速且穩定的通信…

姓名配對測試源碼

源碼簡介 姓名配對測試源碼&#xff0c;輸入兩人姓名即可測試緣分&#xff0c;可查看朋友到底喜歡誰的趣味源碼。 自己手動在數據庫里修改數據&#xff0c;數據庫里有就會優先查詢數據庫的信息&#xff0c; 沒設置的話第一次查詢緣分都是非常好的 95-99&#xff0c;第二次查…

日常學習--20240717

1、spring事務失效的幾種情況&#xff1f; 自己new的對象&#xff08;非spring定義的bean&#xff09;&#xff0c;或者同一個類的方法調用&#xff08;this.調用&#xff0c;未使用動態代理&#xff09;&#xff0c;這兩種方式都會繞過spring的aop對應的數據庫不支持事務事務…

牛奶供應(三)

一個字貪&#xff0c;第一天&#xff0c;只能選擇制作方式&#xff0c;后面的每一天&#xff0c;在<今天制作>與<前期存儲>之間取更優解 例如樣例&#xff1a;100 5&#xff0c;200 5&#xff0c;90 20&#xff0c;存儲成本為10 第1天&#xff1a; 一定是制作&…

C++ map和set的使用

目錄 0.前言 1.關聯式容器 2.鍵值對 3.樹形結構的關聯式容器 3.1樹形結構的特點 3.2樹形結構在關聯式容器中的應用 4.set 4.1概念與性質 4.2使用 5.multiset 5.1概念與性質 5.2使用 6.map 6.1概念與性質 6.2使用 7.multimap 7.1概念與性質 7.2使用 8.小結 &a…

Spring MVC 中 HttpMessageConverter 轉換器

1. Spring MVC 中 HttpMessageConverter 轉換器 文章目錄 1. Spring MVC 中 HttpMessageConverter 轉換器2. 補充&#xff1a;什么是 HTTP 消息3. 轉換器3.1 轉換器轉換的是什么 4. Spring MVC中的 AJAX 請求5. ResponseBody 將服務器端的 return 返回值轉化為“字符串(JSON格式…

大語言模型-基礎及拓展應用

一、基礎模型 1、Transformer 2、bert 3、gpt 二、大語言模型 三、句子向量 四、文檔解析 1、通用解析 2、docx解析 3、 pdf解析 4、pptx解析 五、向量數據庫

rtf是什么格式的文件?rtf格式和word的區別是什么?

RTF是什么格式的文件? RTF&#xff08;富文本格式&#xff0c;Rich Text Format&#xff09;和Word文檔&#xff08;以.doc和.docx為擴展名的Microsoft Word文檔&#xff09;是兩種常用的文本文件格式。它們在文件結構、兼容性、功能和使用場景等方面存在一些顯著差異。 比如…

Android 14新特性:選擇性照片和視頻訪問授權

Android 14 引入了選擇性照片和視頻訪問授權的新特性&#xff0c;這是一項旨在增強用戶隱私和數據安全的重要更新。在之前的 Android 版本中&#xff0c;應用程序請求訪問設備上的照片和視頻時&#xff0c;通常會要求完全訪問權限&#xff0c;這意味著應用可以訪問用戶圖庫中的…

arcgis怎么選取某個指定區域地方的數據,比如從全國鄉鎮數據選取長沙市鄉鎮數據

一共5個步驟&#xff0c;沒一句廢話&#xff0c;耐心看完。 1、如圖&#xff0c;先將數據加載到arcgis里面&#xff0c;我們要選取里面長沙市的范圍數據。 2、選取長沙市的語句 “市” like ‘長沙%’ 切記&#xff0c;切記&#xff0c;切記。所有符號要在 輸入法英文狀態…

微信小程序 vant-weapp的 SwipeCell 滑動單元格 van-swipe-cell 滑動單元格不顯示 和 樣式問題 滑動后刪除樣式不顯示

在微信小程序開發過程中 遇到個坑 此處引用 swipeCell 組件 剛開始是組件不顯示 然后又遇到樣式不生效 首先排除問題 是否在.json文件中引入了組件 {"usingComponents": {"van-swipe-cell": "vant/weapp/swipe-cell/index","van-cell-gro…

電腦系統重裝數據被格式化,那些文件還有辦法恢復嗎?

在日常使用電腦的過程中&#xff0c;系統重裝或格式化操作是常見的維護手段&#xff0c;尤其是在遇到系統崩潰、病毒感染或需要升級系統時。然而&#xff0c;這一操作往往伴隨著數據丟失的風險&#xff0c;尤其是當C盤&#xff08;系統盤&#xff09;和D盤&#xff08;或其他數…

linux|多線程(一)

主要介紹了為什么要有線程 和線程的調用 和簡單的對線程進行封裝。 背景知識 a.重談地址空間 我們知道物理內存的最小單元大小是4kB 物理內存是4G那么這樣的單元友1M個 操作系統先描述再組織struct page[1M] 對于32位數據字長的機器&#xff0c;頁表有2^32條也就是4G條&#…

嵌入式linux相機 轉換模塊

convert_manager.c #include <config.h> #include <convert_manager.h> #include <string.h>static PT_VideoConvert g_ptVideoConvertHead NULL;/*********************************************************************** 函數名稱&#xff1a; Register…