Web端项目表单设计器的实现方法、装置和系统制造方法及图纸

技术编号:26342053 阅读:29 留言:0更新日期:2020-11-13 20:29
本申请提供了一种Web端项目表单设计器的实现方法,包括:对设计项目表单的组件进行封装并排列形成基础组件栏;对元素进行第二级封装;对项目表单设计组件进行相应的数据绑定和渲染;对项目表单设计组件进行排列、预解析为虚拟DOM元素并展示界面;接收Web端对配置栏的操作,将配置结果渲染至项目表单设计区域;更新虚拟DOM元素并传输至服务器;调用项目表单界面;接收对第一字段的第一字段值的选择;接收对第一字典值的选择并暂存于页面内存;将第一字段值的数据传输至服务器;将项目编号发送至服务器;接收项目数据并在Web端进行解析和渲染;接收用户对第二字段的修改操作并在页面内存中更新;将第二字段值的数据传输至服务器。

Implementation method, device and system of Web project form designer

【技术实现步骤摘要】
Web端项目表单设计器的实现方法、装置和系统
本申请主要涉及计算机领域,尤其涉及一种Web端项目表单设计器的实现方法、装置、系统和计算机可读介质。
技术介绍
通常在以户及项目为中心的工作中,项目可以包括五个管理部分:启动、规划、执行、监控、收尾。按照现有的线下工作方式,往往会由于项目信息管理困难产生诸多问题,比如信息不对称、数据保存依赖于纸质文件、数据填报统计困难、项目进度把控不及时等。项目管理流程繁琐冗余,相似内容需要走不同流程。相似问题在不同的子流程管理,对项目信息进行分析时难以系统性地进行分析,得到的统计分析结果较为片面。并且,线下项目管理需要大量人员处理不同流程,需要耗费大量人力物力,数据处理效率十分低下。因此,如何让项目人员进行在线表单设计并且自动化高效地进行项目信息管理是本领域技术人员亟需解决的问题。
技术实现思路
本申请要解决的技术问题是提供一种Web端项目表单设计器的实现方法、装置、系统和计算机可读介质,能够实现自定义程度极高的项目表单设计器,为使用者提供高度灵活的项目表单设计自由度,并且自动化高效地本文档来自技高网...

【技术保护点】
1.一种Web端项目表单设计器的实现方法,包括:/n对设计项目表单的组件进行封装并得到JSON数据,其中所述封装得到的JSON数据包括原始属性设置和初始数据渲染,所述原始属性对应所述组件的交互形态和图形样式;/n将所述组件对应的所述JSON数据排列形成基础组件栏;/n对所述基础组件栏中的元素进行第二级封装并形成项目表单设计组件,其中所述项目表单设计组件响应于Web端的点选和移动操作;/n在项目表单设计区域监听经过所述第二级封装的所述项目表单设计组件,当所述项目表单设计组件响应于Web端的点选和移动操作移动至项目表单设计区域时,对所述项目表单设计组件进行数据绑定和渲染;/n以响应式布局叠加流式布...

【技术特征摘要】
1.一种Web端项目表单设计器的实现方法,包括:
对设计项目表单的组件进行封装并得到JSON数据,其中所述封装得到的JSON数据包括原始属性设置和初始数据渲染,所述原始属性对应所述组件的交互形态和图形样式;
将所述组件对应的所述JSON数据排列形成基础组件栏;
对所述基础组件栏中的元素进行第二级封装并形成项目表单设计组件,其中所述项目表单设计组件响应于Web端的点选和移动操作;
在项目表单设计区域监听经过所述第二级封装的所述项目表单设计组件,当所述项目表单设计组件响应于Web端的点选和移动操作移动至项目表单设计区域时,对所述项目表单设计组件进行数据绑定和渲染;
以响应式布局叠加流式布局对所述项目表单设计组件进行排列;
将所述排列的结果预解析为虚拟DOM元素,通过所述虚拟DOM元素展示当前设计的项目表单界面;
响应于点选项目表单设计区域的表单组件,显示所述表单组件的配置栏;
接收Web端对配置栏的操作,将配置结果渲染至所述项目表单设计区域;
更新所述配置结果对应的项目表单组件的虚拟DOM元素;
将设计形成的项目表单对应的JSON数据传输至服务器;
响应于用户发起的新建项目请求,根据所述新建项目请求的项目编号调用所述项目表单界面并渲染;
接收在所述项目表单界面中对第一字段的第一字段值的选择,并根据所述第一字段值触发相应的第一字典值并渲染;
接收在所述项目表单界面中对所述第一字典值的选择,并暂存于页面内存中;
响应于项目提交请求,将所述第一字段值的数据转换为JSON格式并传输至所述服务器;
响应于用户对项目的选择,将所述项目的项目编号发送至所述服务器;
接收所述服务器发送的与所述项目编号关联的项目数据并在Web端进行解析和渲染,形成项目表单页面;
当所述项目表单页面为可编辑页面时,接收用户对第二字段的第二字段值的修改操作并在页面内存中更新;
响应于用户的项目保存请求,将所述第二字段值的数据转换为JSON格式并传输至服务器。


2.如权利要求1所述的方法,其特征在于,还包括:
所述配置包括校验配置和权限配置。


3.如权利要求1所述的方法,其特征在于,还包括:
判断所述项目数据是否存在数据值ID;
当存在数据值ID时,根据获得的数据值渲染表单页面;
当不存在数据值ID时,渲染表单空数据值区域。


4.如权利要求1所述的方法,其特征在于,所述组件的交互形态包括以下的任意一个或多个:多行文本、单行文本、数值、单选框、下拉框、复选框、日期、时间、文件上传、分割线、签名、说明文字、富文本和多记录。


5.如权利要求1所述的方法,其特征在于,所述当前设计的表单界面以全局数据流形式进行存储。


6.如权利要求1所述的方法,其特征在于,所述...

【专利技术属性】
技术研发人员:万帮喜王盼徐菊萍
申请(专利权)人:上海亿锎智能科技有限公司
类型:发明
国别省市:上海;31

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1