vue下基于elementui自定义表单-后端数据设计篇

news2024/11/25 23:50:20

vue下基于elementui自定义表单-后端篇

自定义表单目前数据表单设计是基于数据量不大的信息单据场景，因为不考虑数据量带来的影响。

数据表有: 1.表单模版表，2.表单实例表，3.表单实例项明细表，4表单审批设计绑定表

以FormJson存储设计好的表单JSON信息，创建实例时冗余当前的模版JSON，记录表单数据Json，便于在重新打开单据时能动态组装页面与加载数据。

{"formConfig":{"version":"1.10","formRef":"会议室申请","formModel":"form","rules":"rules","size":"medium","labelPosition":"right","labelWidth":140,"formRules":"rules","gutter":24,"disabled":false,"dynamicTableAllowed":true,"beforeSubmit":"let formData = JSON.parse(form);\nlet result={isOk:true,newForm:formData};\ntry{\nif(formData.totalMoney>100){\n//MyCommonTip.fail('金额太大请检查！');\n\n}\n\n if(new Date('2022-1-1 '+formData.endTime)-new Date('2022-1-1 '+formData.startTime)<0){\n       MyCommonTip.fail('时间段设定不正确，请检查！');\n       result.isOk =false;\n      }\n\n\n//let input = document.getElementById('');\n// input.value='不错哟';\n//let event = document.createEvent('HTMLEvents');\n//event.initEvent('input', false, true);\n// input.dispatchEvent(event);\n}catch(e){\nconsole.log('表单提交前执行异常',e);\nresult.isOk =false;\n}\nreturn result;","formValueChange":"let formData = JSON.parse(form);\nif(formData.totalMoney>100){\n//MyCommonTip.fail('金额太大请检查！');\n\n}\nif(formData.startTime&&formData.startTime!=''){\nif(formData.endTime&&formData.endTime!=''){\n if(new Date('2022-1-1 '+formData.endTime)-new Date('2022-1-1 '+formData.startTime)<0){\n        formData.endTime=formData.startTime;\n      }\n}\nelse{\n       formData.endTime=formData.startTime;\n}\n}\n\nif(formData.table&&formData.table.length==0){\n\t\tMyCommonTip.fail('至少得有一行！');\n}\nif(formData.table&&formData.table.length>0){\n\tformData.table.forEach((t,i)=>{\n\n  })\n}\nreturn formData;"},"itemList":[{"id":"fd_1660785850655","_id":"fd_1660785850655","compType":"text","ele":"fancy-text","compName":"文本","compIcon":"text","viewType":"component","config":true,"form":false,"show":true,"rules":[],"text":"会议室申请","align":"center","color":"#000000","size":28,"bold":600,"showLabel":false,"labelWidth":1,"layout":"colItem","sortNum":1,"span":24,"label":"会议室申请"},{"id":"applicant","_id":"applicant","compType":"select","compName":"下拉框","ele":"el-select","compIcon":"select","viewType":"component","config":true,"label":"申请人","placeholder":"请选择","maxLength":50,"span":12,"gutter":15,"labelWidth":80,"showLabel":true,"required":true,"multiple":false,"collapse-tags":false,"disabled":true,"filterable":false,"options":[],"dataType":"dynamic","action":"","clearable":false,"value":"","rules":[],"ruleError":"该字段不能为空","layout":"colItem"},{"id":"department","_id":"department","compType":"select","compName":"下拉框","ele":"el-select","compIcon":"select","viewType":"component","config":true,"label":"申请部门","placeholder":"请选择","maxLength":50,"span":12,"gutter":15,"labelWidth":80,"showLabel":true,"required":true,"multiple":false,"collapse-tags":false,"disabled":true,"filterable":false,"options":[],"dataType":"dynamic","action":"","clearable":false,"value":"","rules":[],"ruleError":"该字段不能为空","layout":"colItem"},{"id":"startDate","_id":"startDate","compType":"date","ele":"el-date-picker","compName":"日期","compIcon":"date","viewType":"text","config":true,"showLabel":true,"label":"申请日期","labelWidth":80,"placeholder":"请选择","required":true,"maxLength":50,"gutter":15,"span":24,"clearable":true,"disabled":false,"readonly":false,"default-value":"2022-09-14T12:04:57.489Z","value":"","rules":[],"type":"date","format":"yyyy-MM-dd","value-format":"yyyy-MM-dd","range-separator":"-","start-placeholder":"开始日期","end-placeholder":"结束日期","layout":"colItem"},{"id":"startTime","_id":"startTime","compType":"timeSelect","ele":"el-time-select","compName":"时间选择","compIcon":"time","viewType":"text","config":true,"showLabel":true,"label":"开始时间","labelWidth":80,"placeholder":"请选择","required":true,"maxLength":50,"gutter":15,"span":12,"clearable":true,"disabled":false,"readonly":false,"value":null,"rules":[],"picker-options":{"start":"08:00","step":"00:15","end":"24:00"},"arrow-control":true,"align":"left","format":"HH:mm","value-format":"HH:mm","is-range":false,"range-separator":"-","layout":"colItem"},{"id":"endTime","_id":"endTime","compType":"timeSelect","ele":"el-time-select","compName":"时间选择","compIcon":"time","viewType":"text","config":true,"showLabel":true,"label":"结束时间","labelWidth":80,"placeholder":"请选择","required":true,"maxLength":50,"gutter":15,"span":12,"clearable":true,"disabled":false,"readonly":false,"value":"","rules":[],"picker-options":{"start":"08:00","step":"00:15","end":"24:00"},"arrow-control":true,"align":"left","format":"HH:mm","value-format":"HH:mm","is-range":false,"range-separator":"-","layout":"colItem"},{"id":"meetRoom","_id":"meetRoom","compType":"select","compName":"下拉框","ele":"el-select","compIcon":"select","viewType":"component","config":true,"label":"会议室","placeholder":"请选择","maxLength":50,"span":24,"gutter":15,"labelWidth":80,"showLabel":true,"required":true,"multiple":false,"collapse-tags":false,"disabled":false,"filterable":false,"options":[{"label":"NO.1","value":"NO.1"},{"label":"NO.2","value":"NO.2"},{"label":"NO.3","value":"NO.3"},{"label":"NO.4","value":"NO.4"},{"label":"NO.5","value":"NO.5"},{"label":"NO.6","value":"NO.6"},{"label":"NO.7","value":"NO.7"},{"label":"NO.8","value":"NO.8"},{"label":"NO.9","value":"NO.9"},{"label":"NO.10","value":"NO.10"},{"label":"NO.11","value":"NO.11"},{"label":"一楼A会议室","value":"一楼A会议室"},{"label":"一楼B会议室","value":"一楼B会议室"},{"label":"五楼培训室","value":"五楼培训室"},{"label":"董事长室","value":"董事长室"}],"dataType":"static","action":"","clearable":false,"value":"","rules":[],"ruleError":"该字段不能为空","layout":"colItem","sortNum":3},{"id":"title","_id":"title","compType":"input","ele":"el-input","compName":"单行文本","compIcon":"input","viewType":"text","config":true,"showLabel":true,"label":"会议主题","labelWidth":80,"placeholder":"请输入文本","required":true,"maxLength":50,"gutter":15,"span":24,"width":"85%","clearable":true,"disabled":false,"readonly":false,"status":"normal","prefix-icon":"","suffix-icon":"","value":"","rules":[],"rulesType":"default","prepend":"","append":"","layout":"colItem"},{"id":"fd_1660786142984","_id":"fd_1660786142984","compType":"textarea","ele":"el-input","compName":"多行文本","compIcon":"textarea","viewType":"text","config":true,"showLabel":true,"label":"备注","labelWidth":80,"placeholder":"请输入文本","type":"textarea","required":false,"maxlength":50,"show-word-limit":false,"gutter":15,"span":24,"clearable":true,"disabled":false,"readonly":false,"rows":4,"status":"normal","value":"","rules":[],"ruleError":"该字段不能为空","layout":"colItem"},{"id":"fd_1661955389858","_id":"fd_1661955389858","compType":"editor","ele":"fancy-editor","compName":"编辑器","compIcon":"editor","viewType":"html","config":true,"form":true,"showLabel":true,"labelWidth":80,"label":"会议记录","value":"","required":false,"validateMaxText":false,"max":2000,"customRules":[],"layout":"colItem"},{"id":"fd_1661955304719","_id":"fd_1661955304719","compType":"upload","ele":"el-upload","compName":"附件","compIcon":"att","viewType":"component","config":true,"showLabel":true,"label":"附件上传","labelWidth":80,"gutter":15,"span":24,"required":false,"action":"http://10.198.43.236:19091/OA/Uploadfileinfo/UploadFile","multiple":false,"name":"file","file-List":[],"show-file-list":true,"list-type":"text","value":"","width":100,"buttonText":"请上传附件","showTip":false,"tips":"点击按钮上传附件","accept":".pdf, .doc, .docx, .xls, .xlsx","fileSize":10,"layout":"colItem"}]}

实例明细表用来纵向动态存储表单内容项，便于有统计与分析需求的时候使用。

表单模版关联审批，发起表单时自动绑定审批流程，流程结束变更表单审批状态。

附件处理：统一附件上传入口，上传后返回附件地址与表单内容一起保存。

所有表单数据都存在表单实例中，可按实际情况进行分表处理。

 数据JSON:

 {"applicant":"刘仪","department":"技术管理","startDate":"2022-11-01","startTime":"08:30","endTime":"12:30","meetRoom":"NO.4","title":"技術連絡","fd_1660786142984":"","fd_1661955389858":"","fd_1661955304719":"","id":4099124702193258500,"docNum":"HY20221008"}

 前端通过表单模版数据动态加载组装表单组件，然后通过数据JSON填入表单form内容。

 

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

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

相关文章

chatgpt赋能python：关于Python的常见问题及解决方法

chatgpt赋能python：关于Python的常见问题及解决方法

关于Python的常见问题及解决方法 在编程领域中&#xff0c;Python已经成为了最流行的编程语言之一。然而&#xff0c;在使用Python编写代码时&#xff0c;难免会遇到一些问题。在本文中&#xff0c;我们将介绍一些常见的Python问题以及如何解决它们。 编码问题 在Python中&a…
阅读更多...
idea项目名旁边还有一个项目名——idea笔记

idea项目名旁边还有一个项目名——idea笔记

问题描述 我们常常因为想改项目名但是没有改完全从而出现了项目名旁边还有一个项目名 例如&#xff1a; 解决方案&#xff1a; 打开File->project structure 修改前&#xff1a; 修改后&#xff1a;
阅读更多...
【数据挖掘】时间序列教程【一】

【数据挖掘】时间序列教程【一】

第一章 说明 对于时间序列的研究&#xff0c;可以追溯到19世纪末和20世纪初。当时&#xff0c;许多学者开始对时间相关的经济和社会现象进行研究&#xff0c;尝试发现其规律和趋势。其中最早的时间序列研究可以追溯到法国经济学家易贝尔&#xff08;Maurice Allais&#xff09;…
阅读更多...
微服务04 分布式搜索引擎 elasticsearch DSL数据聚合 自动补全 数据同步 集群 Sentinel

微服务04 分布式搜索引擎 elasticsearch DSL数据聚合 自动补全 数据同步 集群 Sentinel

微服务03 分布式搜索引擎 elasticsearch ELK kibana RestAPI 索引库 DSL查询 RestClient 黑马旅游 分布式搜索引擎03 1.数据聚合 聚合&#xff08;aggregations&#xff09;可以让我们极其方便的实现对数据的统计、分析、运算。例如&#xff1a; 什么品牌的手机最受欢迎&#x…
阅读更多...
ℰ悟透Qt—Http网络编程

ℰ悟透Qt—Http网络编程

目录 概述实践理论QNetworkAccessManager进行Http编程的基本步骤代码实战(重点片段) 概述 网络访问 API 建立在一个 QNetworkAccessManager 对象之上&#xff0c;该对象保存了发送请求所需的公共配置和设置。它包含代理和缓存配置&#xff0c;以及与此类问题相关的信号和可用于…
阅读更多...
【计算机网络】数据链路层之随机接入-CSMA/CD协议（总线局域网）

【计算机网络】数据链路层之随机接入-CSMA/CD协议（总线局域网）

1.概念 2.信号碰撞&#xff08;冲突&#xff09; 3.解决方案 CSMA/CD 4.争用期&#xff08;端到端往返时延&#xff09; 5.最小帧长 6.最大帧长 7.指数退避算法 8.信道利用率 9.帧发送流程 10.帧接受流程 12.题目1 13.题目2 14.题目3 15 小结
阅读更多...
无线蓝耳机哪些牌子好？十大真无线耳机排名品牌

无线蓝耳机哪些牌子好？十大真无线耳机排名品牌

随着TWS技术在应用层面的日益完善&#xff0c;真无线蓝牙耳机就越来越受欢迎了&#xff0c;完全摒弃了线材的束缚&#xff0c;做到了真正的无线耳机&#xff0c;这简直是无法忍受耳机线的强迫症的福音&#xff0c;而且现在不仅是佩戴时会格外的舒适&#xff0c;随着无线技术的不…
阅读更多...
Redhawk: 为什么STA CHECK中switch cell覆盖率为0？

Redhawk: 为什么STA CHECK中switch cell覆盖率为0？

如题&#xff0c;做dynamic analysis时&#xff0c;不需要switch cell的timing window信息&#xff0c;但是做low power analysis需要做上电分析时switch cell的timing window就是必须的了&#xff0c;本文对switch cell control pin没有timing window (STA CHECK覆盖率为零)的…
阅读更多...
ChatGPT：给教育创新带来风险与挑战

ChatGPT：给教育创新带来风险与挑战

在教育界&#xff0c;当前对ChatGPT的关注固然有一部分原因是它所能带来的教育创新&#xff0c;但更多的原因是ChatGPT同时也在冲击着教师的角色定位&#xff0c;推动着人才培养目标的转型&#xff0c;逼迫着学生和教师走出舒适区。况且&#xff0c;ChatGPT还不断诱发教育中的技…
阅读更多...
【算法之贪心算法IV】leetcode56. 合并区间

【算法之贪心算法IV】leetcode56. 合并区间

452. 用最少数量的箭引爆气球 力扣题目链接 有一些球形气球贴在一堵用 XY 平面表示的墙面上。墙面上的气球记录在整数数组 points &#xff0c;其中points[i] [xstart, xend] 表示水平直径在 xstart 和 xend之间的气球。你不知道气球的确切 y 坐标。 一支弓箭可以沿着 x 轴…
阅读更多...
cisp 记录(第一，二章节)

cisp 记录(第一，二章节)

第一章信息安全保障 1.信息安全保障基础 1.1信息安全的概念 1.2信息安全属性 1.3信息安全视角 1.4信息安全发展阶段 1.5信息安全保障新领域 2安全保障体系框架 2.1基于时间的PDR和PPDR模型 2.2信息安全保障技术框架 2.3信息系统安全保障评估框架 2.4企业安全架构 1.1信息安全…
阅读更多...
mysql基础4——单机多实例部署

mysql基础4——单机多实例部署

文章目录 一、手动部署二、脚本部署 前提了解&#xff1a; 适用于服务器不够&#xff0c;但需要把业务区分开的情况下&#xff0c;可以部署此方式。比如多个业务平台使用的数据库不同&#xff0c;不能只创建一个数据库&#xff0c;这时候就需要部署多实例。实际情况中能避免此方…
阅读更多...
BOSHIDA 检测DC电源模块的稳定性能的几个步骤

BOSHIDA 检测DC电源模块的稳定性能的几个步骤

BOSHIDA 检测DC电源模块的稳定性能的几个步骤 检测DC电源模块的稳定性能需要进行以下几个步骤&#xff1a; 1. 确认测试设备&#xff1a;需要准备一台多功能电源和一台数字万用表&#xff0c;可以根据需要选用不同型号和规格的测试设备。 2.设置电源参数&#xff1a;根据DC电…
阅读更多...
DEM获取地形和计算点是否在矩形面积内的算法

DEM获取地形和计算点是否在矩形面积内的算法

1准备一个DEM地形&#xff0c;打开GlobalMap,如下选择 选择否&#xff0c;生成边界 将边界导出为shp文件&#xff0c;打开QGIS&#xff0c;安装get wkt插件&#xff0c;选择对应坐标系&#xff0c;获取wkt,如图 , 附判断点是否在此坐标范围内代码 /// <summary>/// 判断点…
阅读更多...
echarts 柱形图 Y轴数据多，鼠标滚动显示数据，不缩放

echarts 柱形图 Y轴数据多，鼠标滚动显示数据，不缩放

坐标轴数据太多&#xff0c;只能滚动显示&#xff0c;滚动的时候&#xff0c;不想缩放&#xff0c;单纯平移就好。 滚动后第二屏的截图 没滚动的&#xff0c;第一屏的截图 option {title: {// text: World Population,},tooltip: {trigger: axis,axisPointer: {type: shadow,}…
阅读更多...
15 年开源路，从大厂搬砖到创业挖坑

15 年开源路，从大厂搬砖到创业挖坑

上个月回蚂蚁做了一场有关开源的分享&#xff0c;让我讲讲离开公司自己做开源创业后的感想。 正好借着端午节的时间&#xff0c;也更完整地回顾一下自己职业生涯 15 年来和开源结缘的经历。 邂逅 Cappuccino 08 年参加工作后&#xff0c;第一个投入精力的开源项目是 Objective…
阅读更多...
安装Home Assistant

安装Home Assistant

文章目录 前言1. 安装Home Assistant2. 配置Home Assistant3. 安装cpolar内网穿透3.1 windows系统3.2 Linux系统3.3 macOS系统 4. 映射Home Assistant端口5. 公网访问Home Assistant6. 固定公网地址6.1 保留一个固定二级子域名6.2 配置固定二级子域名 转载自远程穿透的文章&…
阅读更多...
网络安全 | 密码基础知识介绍

网络安全 | 密码基础知识介绍

概述 密码介绍 安全问题 保密性&#xff1a;对发送的消息进行获取完整性&#xff1a;对发送的消息进行篡改身份伪造&#xff1a;对发送的主体身份进行篡改&#xff0c;a发的消息&#xff0c;篡改为b发的行为抵赖&#xff1a;对发送的消息进行否认&#xff0c;丧失行为的可追…
阅读更多...
VulnHub打靶记录——easy_cloudantivirus

VulnHub打靶记录——easy_cloudantivirus

靶机下载地址&#xff1a;https://www.vulnhub.com/entry/boredhackerblog-cloud-av,453/ 将靶机设置为NAT模式并启动。 主机发现&信息收集 nmap扫描本地网段 nmap -sn 192.168.50.1/24136是kali&#xff0c;137就是我们的目标靶机。 接着收集靶场信息&#xff1a; n…
阅读更多...
【 Android11 WiFi开发 二 】WiFi连接、断开

【 Android11 WiFi开发 二 】WiFi连接、断开

前言 上篇文章介绍了WiFi列表的获取与展示和WiFi状态改变的广播监听&#xff0c;本篇将介绍介绍对WiFi的操作&#xff0c;连接、忘记&#xff0c;查看已连接的WiFi信息等。 相关文章 1、【 Android11 WiFi开发 一 】WiFi列表获取与展示 说明 老规矩&#xff0c;先把WiFi连接和…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023