CodeWave智能开发平台--03--目标:应用创建--09供应商详情页面下

简介: CodeWave智能开发平台--03--目标:应用创建--09供应商详情页面下

摘要

本文是网易数帆CodeWave智能开发平台系列的第13篇,主要介绍了基于CodeWave平台文档的新手入门进行学习,实现一个完整的应用,本文主要完成09供应商详情页面下主营产品展示及权限管理

CodeWave智能开发平台的13次接触

CodeWave参考资源

网易数帆CodeWave开发者社区课程中心

网易数帆CodeWave开发者社区文档中心

网易数帆CodeWave开发者社区考试认证

应用开发流程

经过上篇文章的初级入门,对CodeWave低代码平台有了一定的认知,在模板的范围内开发一个特点的程序还是比较容易的,但同时需要说明的是,低代码平台有很多自己的逻辑,如果都学完在操作,实在是需要较长时间,本文结合应用开发流程,进行专题学习,应用创建☀️☀️

应用开发-搭建采购管理系统

视频来源

应用开发流程-09-供应商详情页面

进入自己的CodeWave智能开发平台

https://itzhang.codewave.163.com/dashboard/product/Home

待实现效果
主营产品展示

主营产品选项下主要显示的是该供应商下的产品,之前我们也给产品实体中的供应商ID关联属性了。

可以直接将产品实体拖到主营产品的下方的线性布局中,选择数据网格全,只需要一个新增按钮,将按钮放在最左侧,然后调整一下按钮的文本为 新增产品信息,再加一个加号的图标。

选中数据网格,将网格主要属性中的网格数改为3,接着修改下网格内的展示效果。首先是供应商名称,直接拖到布局上方,下面我们要展示的是产品名称,价格,以及图片。那么我们这里引入一个新的布局方式–自由布局。

拖入自由布局组件,给自由布局组件拖入图片展示组件,标签组件以及文本组件,组件在自由布局内可以任意拖拽摆放,可以根据辅助线摆置,也可以选择组件,再右侧样式中设置边距,组件间的层级关系。例如我们把图片展示组件设置左右居中对齐,然后可以通过选择约束,填写距离(上70,左48)来填写图片展示组件的位置。

接下来,在标签李展示产品名称,把标签主题色改为警告色,尺寸改大,文本字号调整为16,通过手动拖拽的方式可以改变标签组件的大小,拉长后可以通过样式设置文本居中。文本组件也是一样,通过辅助线上以及右侧样式中的距离,即可将组件调整至合适的位置。例如将标签和文本组件根据上方约束距离调整为相同的数值。如果有组件层叠,也可以通过展示层级来控制各组件的展示各组件的展示优先级。层级越大,则组件越放置在上方。

调整为组件后,我们分别对这些组件进行值的绑定。

文本我们需要展示的是协议单价,我们可以使用一个原子项下的文本组件(文本和文本差值合并)。文本组件可直接插入内容(可以拼接多个内容),协议单价:current.item.product.name,也可以放入一些有返回值的组件。

再根据辅助线来对齐,这样数据网格里的内容就搭建好了,具体效果等预览后再修改。

再来修改新增的弹窗,需要产品名称,合作价格和产品图片,且产品名称和价格是必填,不能为空。设置验证规则filled

然后产品图片改为文件上传组件,并且需要将文件的转换器改为字符串类型,接着文件上传组件里的值绑定input里面的ptcture。

下面我们需要再新增产品的时候,给产品指定为所属当前供应商的产品,也就是新增时,产品的supplierID为该详情页这个供应商的ID。来到立即创建的事件逻辑下,在create传到数据库之前,对输入的input中的supplierID赋值为当前这个页面输入的supplierID。这样就可以实现了,新增的产品默认属于这个供应商。

最后我们要对数据网格来进行数据的筛选,我们拖入近来的实体,默认查询的是所有数据,所以需要进行一个筛选,去到数据网格的数据源,再去到对应的服务端逻辑,

跟之前联系人信息的数据网格一样,在loadSupplierDetailGridView_2逻辑性下,创建一个输入参数supplierID,整数类型。去到数据源中,点击服务端逻辑,这时会需要传入一个新的参数supplierID=,设置为页面下的supplierID。

再回到服务端逻辑中,数据查询中添加筛选条件。这里的筛选条件是在生成查询表单中使用到的,我们不用查询表达,可以直接删除,

接着拖入等于关系,产品的供应商ID等于输入的供应商ID,

预览查效果,新增产品,所属供应商,产品名称,价格,

图片布局和组件样式还需要我们来调整一下

应用的页面会根据终端设备大小展示有所区别,可以去到跟多设置里的自定义主题样式中,来到画布尺寸及缩放,在这里左侧可以自定义画布尺寸,1440px,下方开启等比缩放,页面组件。字体等的大小就会跟随画布尺寸等比放大或缩小。

最后我们还需要来完善一下系统信息的部分。现在信息系统中,关于创建者的信息是缺少的,那么创建者与我们所创建的应用权限是相关的,当前我们的应用在发布后,不需要登陆就可以直接访问,所以应用就无法拿到登陆者的信息。我们是可以手动开启权限控制的。平台内置了一个权限管理模块,在权限管理上,还有许多深层的逻辑,这里仅仅是开启一下权限管理流程。选中采购管理系统父页面,然后再右侧属性中,开启权限,

父页面的权限打开后,所有子页面都会默认打开权限。也就是说需要登陆才能访问,而登陆的用户就是供应商数据的创建者,也就是我们需要展示出来的负责人,除了createby属性外,我们要给别的属性赋值为当前应用登陆名称时,可以使用公共变量下,UserInfo中的UserName,这个变量也表示当前变量的应用人。

现在进行预览,就会发现进入系统需要输入值账号了。可以使用账号和信息中默认的密码进行登录,登录后会显示权限中心页面,这是因为在可视化设计中,将权限中心页面设置为首页了

我们可以右键单击采购管理系统页面,把该页面设置为首页。

并将采购管理系统页面下的首页homepage设置为页面跳转页,这样使用连接进入后,就会展示我们实现设定好的页面了。

现在创建一个供应商信息

就会看到供应商中就有负责人信息了

权限设置
相关文章
|
7月前
|
存储 开发者
CodeWave智能开发平台--03--目标:应用创建--07供应商数据表格01
CodeWave智能开发平台--03--目标:应用创建--07供应商数据表格01
|
7月前
|
开发者 容器
CodeWave智能开发平台--03--目标:应用创建--03页面子页面设计
CodeWave智能开发平台--03--目标:应用创建--03页面子页面设计
|
5月前
|
存储 小程序 数据库
【微信小程序-原生开发】实用教程08 - 开通微信云开发,操作云数据库新增数据(含修改数据权限),初始化云服务(含获取微信云环境 id),获取云数据,滚动公告栏
【微信小程序-原生开发】实用教程08 - 开通微信云开发,操作云数据库新增数据(含修改数据权限),初始化云服务(含获取微信云环境 id),获取云数据,滚动公告栏
75 0
|
7月前
|
数据采集 运维 监控
DataphinV4.0来啦:自定义全局角色 ,实时研发覆盖全部署场景,个性化企业配置看本期
本次V4.0版本升级,Dataphin支持自定义全局角色、自定义逻辑表命名规范、Flink on K8s的部署模式,提升企业级适配能力,灵活匹配企业特色;将集成任务快速从组件模式切换为脚本模式、支持外部触发类型节点等,提升研发平台易用性,助力高效开发便捷运维。
91192 1
|
7月前
|
数据管理
产品更新|子表单/关联表单、数据导入导出、版本权益等多项能力升级!
本期功能更新已全量发布,可直接在宜搭内体验。
437 2
产品更新|子表单/关联表单、数据导入导出、版本权益等多项能力升级!
|
7月前
|
小程序 安全 搜索推荐
【社区每周】订单中心新增30+状态模板;《小程序安全开发指引》正式发布(2022年7月第二期)
【社区每周】订单中心新增30+状态模板;《小程序安全开发指引》正式发布(2022年7月第二期)
69 0
|
7月前
|
数据可视化 数据库 开发者
CodeWave智能开发平台--03--目标:应用创建--09供应商详情页面上
CodeWave智能开发平台--03--目标:应用创建--09供应商详情页面上
|
7月前
|
存储 数据可视化 前端开发
CodeWave智能开发平台--03--目标:应用创建--08联系人管理
CodeWave智能开发平台--03--目标:应用创建--08联系人管理
|
7月前
|
存储 数据库 开发者
CodeWave智能开发平台--03--目标:应用创建--07供应商数据表格02
CodeWave智能开发平台--03--目标:应用创建--07供应商数据表格02