该教程通过讲解开发客户管理的过程,带你逐步理解页面、组件、模型、数据类型、服务的基本操作。

一、预期效果

效果 1:常见的增删改查页面

iShot_2024-08-13_15.18.23.gif

效果 2:自定义按钮、布局排版、逻辑交互

iShot_2024-08-14_11.05.55.gif

二、思路解析

  1. 可看到的页面交互,通过极态云中的页面来实现。页面中的每一个区块,对应极态云中的组件。通过选择不同的组件、配置组件、调整组件布局和大小来搭建想要的页面展示效果,通过配置组件事件来实现组件之间的联动、以及页面操作后的数据变更。
  2. 页面中展示的数据的存储和获取,通过极态云中的模型来实现。

三、开发过程

(一)常见的客户增删改查页面(即效果 1)

  1. 在简易模式中,新建数据管理功能。数据管理功能是极态云提供的一种页面类型,适合简单场景下对数据的增删改查。image.png
  2. 数据管理功能需要配置数据表,即数据获取的来源,这里的数据表就是极态云提供的一种模型类型。image.png
  3. 数据表模型,可以简单理解为 excel 表,配置每一列的标题、数据类型和配置。image.png
  4. 一个简单的数据管理页面就搭建出来了。如下所示wy.jit.pro_whwy_crm_tutorial_Ide_easyMode(web).png
  5. 通过菜单,可以再次修改功能,比如:设置筛选条件控制当前页面显示的数据范围;以及控制通过哪些字段筛选、在表格中显示哪些字段、在表单中可以查看/编辑哪些字段。image.pngwy.jit.pro_whwy_crm_tutorial_Ide_easyMode(web) (1).png

(二)实现统计图、「客户分配」、「移入公海」 (即效果 2)

如果不满足上面配置项,需要更多的功能,可以将该功能转换为自定义功能,进一步配置。(或者一开始就直接新建自定义功能)

image.png

1.界面设计

1).  拖入统计图,模型选择「客户表」,配置统计值。调整布局iShot_2024-08-13_16.00.55.gif

2). 配置表格组件,添加按钮「分配客户」、「移入公海」。iShot_2024-08-13_16.08.56.gif

3). 新增弹窗,弹窗中拖入批量编辑表单组件,配置表单。表单中,只保留一个「业务人员」字段。iShot_2024-08-13_16.40.54.gif

2.逻辑设计

1). 配置「移入公海」的功能逻辑. 点击【表格组件】的「事件」,选中「移入公海」标签页。配置逻辑如下:image.pngimage.pngimage.png

2). 配置「分配客户」的功能逻辑


a.  实现点击后「分配客户」打开表单:选中「分配客户」标签页。配置逻辑如下:![image.png](https://alidocs.oss-cn-zhangjiakou.aliyuncs.com/res/3BMqYa0NmAzNqwZL/img/0a98fa24-cc65-47c7-beea-99c6bd1aaa0a.png)

b.  实现打开表单后配置默认值:![image.png](https://alidocs.oss-cn-zhangjiakou.aliyuncs.com/res/3BMqYa0NmAzNqwZL/img/e5e4957a-5048-4e8e-b982-6472dd38d696.png)

c.  实现表单填写后刷新表格:点击【批量编辑表单组件】的「事件」,选中「提交后」标签页。配置逻辑如下:![image.png](https://alidocs.oss-cn-zhangjiakou.aliyuncs.com/res/3BMqYa0NmAzNqwZL/img/3a90dd5a-f90a-45d1-a66b-8ec645e76f13.png)

3). 配置【统计图】相关的联动逻辑


a.  实现【筛选器】更新后刷新【统计图】的统计值,配置如下:![image.png](https://alidocs.oss-cn-zhangjiakou.aliyuncs.com/res/3BMqYa0NmAzNqwZL/img/e25c5b58-1eb3-429d-9c95-3cfeba31fd6d.png)

b.  实现点击【统计图】时刷新【表格】的数据,配置如下:![image.png](https://alidocs.oss-cn-zhangjiakou.aliyuncs.com/res/3BMqYa0NmAzNqwZL/img/938c339c-6033-46e4-b4dc-e4b088e85808.png)

(三)GUI 中内置的前端函数有限?切换到源码编辑

iShot_2024-08-14_11.47.24.gif

(四)多个组件事件都涉及到相同的逻辑处理?移到页面级函数中

  1. 新建页面级的函数,实现相同的逻辑。
  2. 在组件事件中,可以直接调用页面函数。

演示操作如下所示

iShot_2024-08-14_11.55.56.gif

(五)组件事件的逻辑比较复杂,执行较慢?移到后端函数中

组件事件的逻辑涉及到查询多张表? 执行较慢?需要多处页面使用到? 通过如下方式解决:

  1. 进入专业模式中,新建服务元素,新建函数。
  2. 前端事件中,直接选择后端函数。

演示操作如下所示:iShot_2024-08-14_13.44.44.gif

(六)开发的页面想在移动端使用?

  1. 新建的数据管理功能,默认就适配移动端。不需要做处理
  2. 如果是自定义功能(即标准页面),需要在门户中,开启移动端页面,同步到移动端,就会将 PC 端页面适配移动端。也可以单独设计移动端。

image.png

进一步了解极态云,体验产品?

请访问 极态云官网


极态云官方账号
1 声望0 粉丝

JIT 技术,为专业开发全面提速!极态云(jit)是一个基于全新软件开发理论(面向元素开发方法)、全新编程框架、全新开发工具、全新部署运行平台的企业级软件系统开发与运行平台,极大简化了应用系统的开发、部署...