如何使用低代码工具快速实现类Excel 模板数据填报功能

发布时间:2024/05/17 17:18 发布者:Lenka.Guo

返回博客中心

背景介绍

低代码平台提供的可视化开发工具和丰富的组件库,能大大加快开发速度,无需编写大量的代码。同时,低代码平台还能提供数据集成、权限管理、报表等功能,满足企业级应用的需求。

在一些强输入的系统中,如CRM信息录入系统,财务录入系统等需要完善的类Excel功能。低代码平台内置了强大的表单设计工具,可以轻松创建各种表单控件,如文本框、下拉框、日期选择器等,并提供丰富的样式配置选项。这使得开发人员能够快速还原类Excel的界面布局和交互。

本示例展示如何使用活字格低代码开发平台工具3小时内快速复刻Excel模板数据填报功能。

Excel 模板数据填报

本示例展示了活字格与 SpreadJS 的集成方案,是场景 demo 任务下发Excel填报系统 的增强版。 在功能上,包含如下特性:

1. 原有excel模板的任务填报功能保留,并对填报界面进行了优化;

2. 新增了填报数据模型的保存能力,即模板数据和填报数据的分离,填报的内容可以单独管理并在后续的业务中加入到诸如数据分析、展示等场景中。

3. 填报模板支持多版本的维护,可随时切换模板的版本(需要绑定数据模型),填报数据会正常显示在数据绑定区。

您可在线体验 Excel 模板数据填报,您可直接使用本 示例用于任何需要 excel 模版填报的通用场景中而无需编写任何代码。

功能模块介绍

母版配置

母版包含了3个配置,分别是: - 设计:用于设计填报模板时使用,包含了SpreadJS的全部编辑能力,面向管理员。 - 填报:用于填报场景中使用,没有上方的菜单编辑,只能在表格区进行数据的填报。面向填报的业务人员。 - 展示:用于填报模板记录的展示,没有编辑功能,面向管理员。 母版配置修改的方式为代码修改。需要对 SpreadJS 本身的 api 有一定的了解。 活字格在与 SpreadJS 进行交互时,获取 SpreadJS 的配置数据时通过 js 代码调用基础模板中的方法 spreadToJson() 等。

图形用户界面, 文本, 应用程序, 电子邮件

填报模板配置

管理员(scene.admin) 可进行填报模板的设计,并将其保存。 - 模板支持保存历史记录,可随时切换。 - 本 Demo 支持切换模板后仍保留业务填报数据。但是前提是,需要在spread的设计页面处增加数据模型并与页面绑定。在SpreadJS中配置数据模型,可以在【数据页签-工作表绑定】 中进行设计。数据模型绑定后,需要配置默认值,配置的入口在左侧的 模板数据模型默认值 上。 - 如果您的模板希望切换后仍可以正确显示业务数据,请确保切换的两个模板都做好了数据模型的绑定。

图形用户界面, 文本, 应用程序, 电子邮件

业务填报模拟

本模块用来模拟业务填报,业务填报分为两个部分: 1. 在 填报任务 处创建填报任务,并设置填报模板和填报人; 2. 相关填报人登录进系统后,便可在 填报入口 处进行填报,

社交网络的手机截图

其他

系统默认添加两个用户,分别模拟两种角色:

  • scene.admin: 管理员,可查看管理 demo 中的所有功能模块

  • scene.user:业务员,只能进行业务填报。

如需修改,可在「资源权限」中修改。

依赖

  • 本 demo 使用了 SpreadJS 控件,因此,如果您希望将本 demo 发布上线的话,请单独购买 SpreadJS 的授权。

  • 本 demo 集成了代码高亮库?highlight.js(MIT开源)。

您可在线体验 Excel 模板数据填报,您可直接使用本 示例用于任何需要 excel 模版填报的通用场景中而无需编写任何代码。


活字格企业级低代码开发平台 | 下载试用

活字格 是葡萄城基于在专业控件领域 40 年的技术积累而推出的企业级低代码开发平台 ,由简单易用的可视化设计器和部署灵活的服务器构成,能帮助开发人员、IT 技术人员和业务人员快速构建美观易用、架构专业、安全可控的企业级多终端应用,并随需而变。活字格高度开放灵活,支持云部署和本地部署,能与微信、钉钉及各行业应用软件无缝集成,并可对接智能硬件、AI 等技术,全面支撑核心业务系统开发。

了解更多关于活字格企业级低代码开发平台内容,请点击此处访问官网,立即下载体验。