该教程通过讲解开发客户管理的过程,带你逐步理解页面、组件、模型、数据类型、服务的基本操作。
一、预期效果
效果 1:常见的增删改查页面
效果 2:自定义按钮、布局排版、逻辑交互
二、思路解析
- 可看到的页面交互,通过极态云中的页面来实现。页面中的每一个区块,对应极态云中的组件。通过选择不同的组件、配置组件、调整组件布局和大小来搭建想要的页面展示效果,通过配置组件事件来实现组件之间的联动、以及页面操作后的数据变更。
- 页面中展示的数据的存储和获取,通过极态云中的模型来实现。
三、开发过程
(一)常见的客户增删改查页面(即效果 1)
- 在简易模式中,新建数据管理功能。数据管理功能是极态云提供的一种页面类型,适合简单场景下对数据的增删改查。
- 数据管理功能需要配置数据表,即数据获取的来源,这里的数据表就是极态云提供的一种模型类型。
- 数据表模型,可以简单理解为 excel 表,配置每一列的标题、数据类型和配置。
- 一个简单的数据管理页面就搭建出来了。如下所示
- 通过菜单,可以再次修改功能,比如:设置筛选条件控制当前页面显示的数据范围;以及控制通过哪些字段筛选、在表格中显示哪些字段、在表单中可以查看/编辑哪些字段。
(二)实现统计图、「客户分配」、「移入公海」 (即效果 2)
如果不满足上面配置项,需要更多的功能,可以将该功能转换为自定义功能,进一步配置。(或者一开始就直接新建自定义功能)
1.界面设计
1). 拖入统计图,模型选择「客户表」,配置统计值。调整布局
2). 配置表格组件,添加按钮「分配客户」、「移入公海」。
3). 新增弹窗,弹窗中拖入批量编辑表单组件,配置表单。表单中,只保留一个「业务人员」字段。
2.逻辑设计
1). 配置「移入公海」的功能逻辑. 点击【表格组件】的「事件」,选中「移入公海」标签页。配置逻辑如下:
2). 配置「分配客户」的功能逻辑
a. 实现点击后「分配客户」打开表单:选中「分配客户」标签页。配置逻辑如下:
b. 实现打开表单后配置默认值:
c. 实现表单填写后刷新表格:点击【批量编辑表单组件】的「事件」,选中「提交后」标签页。配置逻辑如下:
3). 配置【统计图】相关的联动逻辑
a. 实现【筛选器】更新后刷新【统计图】的统计值,配置如下:
b. 实现点击【统计图】时刷新【表格】的数据,配置如下:
(三)GUI 中内置的前端函数有限?切换到源码编辑
(四)多个组件事件都涉及到相同的逻辑处理?移到页面级函数中
- 新建页面级的函数,实现相同的逻辑。
- 在组件事件中,可以直接调用页面函数。
演示操作如下所示
(五)组件事件的逻辑比较复杂,执行较慢?移到后端函数中
组件事件的逻辑涉及到查询多张表? 执行较慢?需要多处页面使用到? 通过如下方式解决:
- 进入专业模式中,新建服务元素,新建函数。
- 前端事件中,直接选择后端函数。
演示操作如下所示:
(六)开发的页面想在移动端使用?
- 新建的数据管理功能,默认就适配移动端。不需要做处理
- 如果是自定义功能(即标准页面),需要在门户中,开启移动端页面,同步到移动端,就会将 PC 端页面适配移动端。也可以单独设计移动端。
进一步了解极态云,体验产品?
请访问 极态云官网
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。