vue实现的随意拖拽的自定义表单，用于医院文书开发，提高实施效率
最近由于项目需求要开发医院麻醉记录单功能以及手术室相关文书，由于目前项目比较多，不同的医院文书内容基本都不一样，如果定制开发会造成研发人员需要不停的修改不停的部署前端程序，可能目前市场上B/S版本手麻系统都会遇到同样的问题，之前C/S版本的都是实施在现场通过拖拽实现表单，文书的打印也通过现场拖拽完成。在网上查找了好多资料，目前还没有类似的组件能实现文书自定义拖拽功能。没办法最后公司小伙伴自己开发了一套强大的随意拖拽的自定义表单功能。
下面是我们的文书编辑器：
整个设计器分为三大部分内容，左边是我们的组件，包括基础字段、高级字段、布局字段以及我们自己扩展的组件，中间区域我们采用所见即所得的方式，通过导入json和生成json 可以快速的复制和修改文书内容；最右边区域能是我们针对表单整体属性的设置和针对单独组件属性的设置，这里不仅可以设置样式，还可以绑定数据源；可以通过组合属性批量移动组件也可以批量拷贝组件。这个组件最大的亮点就是可以随意的拖拽位置，并且可以做到批量的选择移动、左对齐、右对齐、上对齐、下对齐。另外我们通过组件可以绑定现有数据库字典数据以及生成新的表结构。内容强大到你不可想象。最后我们上几张拖拽出来的效果图：
技术主要是vue.js ,并且我们把这部分全部独立出来开发成一个单独的组件，其他项目集成也是非常的方便。项目涉及到自定义表单的随嵌随用，方便上手，并且我们也做了移动的随意拖拽功能。
以后项目实施就是这么方便
vue实现的随意拖拽的自定义表单，用于医院文书开发，提高实施效率相关推荐
- vue可视化拖拽生成工具_一款可拖拽的WEB表单设计布局器-(echarts-vue-jquery-可视化图表)...
背景 现在越来越多的业务要求运营可以自由定制化页面,此过程最大的好处就是前端研发不用介入就能完成页面的定制化,大大提升了产品的灵活性,减轻前端工程师的工作量 还有一些场景:用户可以自由定制图表工具,通 ...
- Flowable集成自定义表单001
#Flowable集成自定义表单 flowable集成自定义表单实现低代码开发平台 文章目录 演示 一.代码地址 二.演示地址 总结 演示 后台配置流程和表单 一.代码地址 代码地址 二.演示地址 后 ...
- vue拖拽效果（适用范围自定义表单，电子合同签章等）
vue拖拽效果实现 实现原因 之前项目需求做一个自定义拖拽控件,进行自定义表单生成以及电子合同签字盖章,总结一下思路. 实现思路 首先需要可以拖拽的控件, 鼠标长按拖拽到拖拽存放区后,松开鼠标拖拽存放 ...
- form表单 vue 拖拽_vue实现可视化可拖放的自定义表单（代码示例）
本篇文章给大家带来的内容是关于vue实现可视化可拖放的自定义表单(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 实现如例子所示的可视化可拖放表单功能.整个页面,分为左中右 ...
- Vue.Draggable 实现组件拖拽
Vue.Draggable 实现组件拖拽 特性 支持触摸设备 支持拖拽和选择文本 支持智能滚动 支持不同列表之间的拖拽 不以jQuery为基础 和视图模型同步刷新 和vue2的国度动画兼容 支持撤销操 ...
- vue+sortable实现表格拖拽
vue+sortable实现表格拖拽 前言: 支持 vue3.0 支持表格拖拽 支持自定义拖拽 sortable官网 一.下载 sortable npm install sortablejs --sa ...
- 基于 Spring Boot + Vue 实现的可视化拖拽编辑的大屏项目
大家好,今天给小伙伴们分享一个基于 SpringBoot + Vue 实现的可视化拖拽编辑的大屏项目: 简介 这个是一个开源的一个BI平台,酷炫大屏展示,能随时随地掌控业务动态,让每个决策都有数据支撑 ...
- Android仿探探卡片拖拽,Vue 仿探探拖拽卡片的效果
原标题:Vue 仿探探拖拽卡片的效果 已更新Vue3版,请给前端大全发送关键字vue3仿探探获取Vue3版 类似 Tinder 和 探探 的卡片效果的组件,社区中已经非常多了.我这一版除了可以实现和他 ...
- Vue+el-tree，元素拖拽时出现禁用图标， 请看解决办法
项目需求:vue+el-tree实现节点拖拽到指定div播放视频: 问题:当节点拖拽时, 出现禁用图标: 一开始以为将禁用图标改变样式或隐藏就可以,一番尝试后, 发现这个图标可能是浏览器默认的, 经过 ...
- html实现拖拽自定义表单,自定义表单（二）--拖拽（HTML版本）
系列文章 自定义表单(一)--拖拽(JS版本) 自定义表单(二)--拖拽(HTML版本) 自定义表单(完)--(html5版本) 一.瞎扯 最近在折腾人工智能,今天写了段tensorflow,用来分辨 ...
最新文章
- 鴻雁 Anser cygnoides
- Nginx版本无缝升级
- 机器学习之数学基础(四)～Lasso Regression回归, L1、L2 Regularization正则化, 回归问题中的损失函数
- oracle激活锁定用户,oracle 锁用户，oracle解除用户锁定
- 【284天】我爱刷题系列（43）
- Java描述设计模式(23)：访问者模式
- DDL触发器与DML触发器比较
- ACM字符串处理算法经典：字符串搜索
- DDD中的Specification模式
- 顶级SaaS公司的共同基因都有什么？
- 数据结构银行排队系统c语言,数据结构银行排队系统.doc
- 动易访问mysql_服务器如何设置动易系统数据库路径的方法
- tp5验证码详细代码
- 《麦肯锡方法》阅读笔记2——探索分析问题的方法
- 详解MATLAB的函数uigetfile(),并利用它打开文件选择对话框,选择文件,返回文件名和文件路径
- 【论文笔记】Data Shapley: Equitable Valuation of Data for Machine Learning
- 最大最小次序统计量密度函数的推导
- null 和 undefined 的区别
- png图片透明部分点击
- ubuntu(17):ubuntu下wps缺失字体百度网盘永久链接与安装方法