CodeWave智能开发平台--03--目标:应用创建--07供应商数据表格01

在这里插入图片描述

摘要

本文是网易数帆CodeWave智能开发平台系列的第09篇，主要介绍了基于CodeWave平台文档的新手入门进行学习，实现一个完整的应用，本文主要完成07供应商数据表格

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

CodeWave参考资源

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

应用开发流程

在这里插入图片描述

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

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

视频来源

应用开发流程-07-供应商数据表格

进入自己的CodeWave智能开发平台
https://itzhang.codewave.163.com/dashboard/product/Home

待实现效果

在这里插入图片描述

快速创建供应商管理页面下的数据表格

在供应商管理页面下添加面板，并删除多余文本

在这里插入图片描述

把数据下的实体拖入供应商管理页面下的面板中，选择列表全即可。同时在结构树中可以查看到自动生成的列表中包含了线性布局（表单），数据表格和弹窗等组件

在这里插入图片描述

上一步的表单太多了，不需要都作为选择条件，接下来点击回撤（ctrl+z）按钮（因为自动创建的过程还包括很多逻辑，如果删除，会存在删除不干净的情况），去掉自动创建的数据表格。

然后在supplier实体中修改数据，从待实现效果可以看到:

表格中需要显示的内容包括供应商id，供应商编号，供应商名称，供应商等级，负责人，当前状态，供应商地址，创建时间，操作等，这样就在实体中勾选对应的显示在表格中选项。

筛选中只有供应商等级和供应商状态

在这里插入图片描述

再次回到页面中，把供应商实体拖入到供应商管理的页面的面板中即可

在这里插入图片描述

选择点击查看效果

在这里插入图片描述

供应商管理数据表格的优化

在这里插入图片描述

预计实现的效果中

供应商名称不换行
有一个刷新按钮
新增按钮为新增供应商
表格列的顺序和内容与默认也有所不同

供应商名称不换行

供应商名称不换行，只要把对应组件的文本调整为小即可,同时选择过长文本始终不换行

在这里插入图片描述

新增按钮替换为新增供应商

新增按钮替换为新增供应商，只需要更换文本即可,同时给图标添加一个 +号 按钮

在这里插入图片描述

添加修改排序表格中的字段

上面在表格显示中没有显示供应商id，这里可以给添加下

在这里插入图片描述

重新预览，即可把供应商id显示在数据表格中。

在这里插入图片描述

调整表格顺序，并改名

顺序分别为序号，供应商编号，供应商名称，供应商等级，负责人（新增），当前状态，供应商地址，创建时间（新增），操作
在这里插入图片描述

创建修改刷新按钮

选择刷新图标，去除文本
在这里插入图片描述

修改刷新按钮事件

在刷新按钮中添加一个点击事件，事件内需要把查询的内容清空，查询信息的输入都会通过一个变量（默认为filter变量）来存储。为了清空查询内容，在事件中拖入内置函数clear函数，把filter作为clear函数的参数。接下来再调用逻辑（页面逻辑下的reload逻辑，记得要选tableview下的reload逻辑，这个是数据表格生成时自动创建的）来刷新表格。

修改供应商评分显示

把文本删除，拖入评分组件，修改评分组件的最大分数，然后将评分值绑定为current下的level即可，再把评分组件的状态属性修改为只读
在这里插入图片描述

修改当前状态修改

在案例中，供应商新增时，会自动把状态设置为启用，在修改时，可对状态进行修改。

我们进入弹窗中，把输入状态的表单项设置一个只在修改状态显示的显示条件
在这里插入图片描述
在这里插入图片描述

接下来要实现新增时状态默认为启用

点击立即创建按钮，在立即创建按钮的事件逻辑submit中找到create逻辑的位置，就在创建数据之前，对存入的input变量做一个状态的赋值
在这里插入图片描述

我们要用不同颜色的标签来区分供应商的状态

将状态的文本先删除，拖入一个标签，将主题色改为成功色，内容改为启用，再复制一个标签，内容改为禁用，把样式中的背景颜色改为浅灰色
然后设置当供应商状态为启用时显示启用标签，为禁用时显示禁用标签（所有的组件都可以设置条件）。选用启用标签，选择启用标签的显示表达式，拖入一个等号，等号左侧是current下的supplier状态status值，等号右侧是枚举中StatusEnum中的启用。复制这个表达式到禁用标签中。
在这里插入图片描述

发布测试预览

在这里插入图片描述

修改操作中的按钮

修改部分有3个按钮
在这里插入图片描述分别对应查看详情，编辑修改，以及删除
原有的删除和修改链接先不动，后续可以将里面的逻辑复制给按钮用。
添加按钮，去掉按钮中的文本内容，形状修改为方形，图标选择查找样式。在这里插入图片描述
然后复制这个按钮，为编辑和删除按钮，分别修改图标样式，修改编辑按钮的背景颜色，修改删除按钮为次要按钮
在这里插入图片描述

为这3个按钮添加事件逻辑

详情页按钮的事件逻辑先不实现，编辑和删除按钮中的逻辑，应该与修改和删除中默认的逻辑是一样的。
选择修改组件，选择右侧的事件，复制modify事件逻辑，然后再编辑图标组件先添加一个点击事件，再把复制的modify事件粘贴过去（选择点击文本后，右键才可以出现粘贴选项），同时删除刚添加的click事件逻辑。

查看预览效果

在这里插入图片描述

确认按钮逻辑正确后，删除原有的修改和删除链接组件

修改下弹窗中表单的样式

弹窗中需要输入的是供应商名称，地址，等级，介绍，相册，状态
在这里插入图片描述

增加弹窗尺寸，选择弹窗属性中的样式属性，尺寸修改为大。表达项的文本如供应商名称比较长，会换行，修改表单项属性中的样式属性中的标题宽度为小
在这里插入图片描述

修改各个输入框的样式
删除供应商地址中的输入框，拖入地区选择组件，然后进行值的绑定，选择input中的address
在这里插入图片描述

删除供应商等级输入，拖入评分组件，修改最大分数为3，绑定input中的level，
在这里插入图片描述

公司介绍使用一个多行输入框，绑定input中的introduce
在这里插入图片描述

公司相册，要进行上传图片的操作
使用文件上传组件，该组件有多种样式，选择第2个单文件卡片效果样式，绑定值为input中的picture，这里上传图片还要将属性中的转换器改为URL字符串
在这里插入图片描述

再次预览

在这里插入图片描述

实现点击删除后需要确认的弹窗

这一个步骤中，删除的逻辑是一样的，只是需要在事件逻辑中，添加一个打开弹窗的过程，先拖入一个弹窗，重命名为deleteModel，然后点击重命名并确认引用，双击编辑弹窗，将标题修改为删除供应商信息，下方内容删除，拖入多行线性布局，每个线性布局中输入文本

确定要删除供应商信息吗？
提示：数据一旦删除，无法恢复！

设置图标为警告
在这里插入图片描述
把下方按钮靠右侧对齐，选中后，选择样式里的右对齐
在这里插入图片描述

接下来把删除图标中的事件逻辑，复制到弹窗的确定按钮下

接下来把删除图标中的事件逻辑，复制到弹窗的确定按钮下
这时可以看到系统提示错误，双击错误，定位问题，是因为在确定按钮idea事件逻辑中，拿不到当前行的current值，在这里插入图片描述
在这里插入图片描述
现在需要再原来表格中的删除按钮逻辑中，将current中的id传递出来，回到删除按钮的逻辑中，删除原来的逻辑内容，第一步需要将当前行current中的id得到，这时可以在当前页面下创建一个局部变量deleteId，数据类型设置为整数
在这里插入图片描述
接下来把current中的id赋值给deleteId
在这里插入图片描述
接下来添加调用逻辑，调用deleteModle的open
在这里插入图片描述
回到弹窗中确定按钮的逻辑中，将deleteId作为参数传入，然后添加调用逻辑，deleteModel中的close
在这里插入图片描述

点击预览查看效果

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/605682.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

相机同步遇到的小问题

相机同步遇到的小问题

出现问题 在进行两个相机显示的时候，出现了相机显示不同步的情况，具体情况如下视频所示： 华睿/大华相机左右相机显示不同步 可以见到视频之中，右相机是比左相机更快一点的，但是有的时候就是同步的。我调用的代码是现成…
阅读更多...
爬虫-4-数据提取-json，jsonpath，正则

爬虫-4-数据提取-json，jsonpath，正则

#本文仅供学习ԅ(ㅂԅ)
阅读更多...
基于YOLOv5全系列参数模型【n/s/m/l/x】开发构建道路交通场景下CCTSDB2021交通标识检测识别系统

基于YOLOv5全系列参数模型【n/s/m/l/x】开发构建道路交通场景下CCTSDB2021交通标识检测识别系统

交通标志检测是交通标志识别系统中的一项重要任务。与其他国家的交通标志相比，中国的交通标志有其独特的特点。卷积神经网络（CNN）在计算机视觉任务中取得了突破性进展，在交通标志分类方面取得了巨大的成功。CCTSDB 数据集是由长沙…
阅读更多...
Centos7 静态连接失败解决

Centos7 静态连接失败解决

在 Linux 下有时候我们需要静态连接，但是静态连接会失败，失败的原因有几种： 1.没有相关的静态库文件 如果是没有相关的静态库文件，那么使用静态连接的话，就是下面的这种效果： 就是显示无法找到 .... 解…
阅读更多...
搭建Github Page完全手册

搭建Github Page完全手册

一、前期准备 注册Github账号（必备）下载GitHub Desktop：下载链接（可使用git代替）模板选择网站： jekyllthemes.orggohugomademistakes 二、快速入门 1.模板参考 作者使用的模板来源：https://…
阅读更多...
文件批量改名，快速去除文件名中的空格，告别命名烦恼！

文件批量改名，快速去除文件名中的空格，告别命名烦恼！

在日常工作中，我们经常遇到文件名中带有空格的情况，这不仅导致文件难以查找，还可能在某些软件中引发问题。那么，如何快速、有效地去除这些空格呢？今天，我就来教你一招！ 首先，我们要进…
阅读更多...
【IEEE会议征稿通知】第五届计算机视觉、图像与深度学习国际学术会议（CVIDL 2024）

【IEEE会议征稿通知】第五届计算机视觉、图像与深度学习国际学术会议（CVIDL 2024）

第五届计算机视觉、图像与深度学习国际学术会议（CVIDL 2024） 2024 5th International Conference on Computer Vision, Image and Deep Learning 第五届计算机视觉、图像与深度学习国际学术会议（CVIDL 2024）定于2024年4月19-21日…
阅读更多...
LeetCode刷题---两数之和

LeetCode刷题---两数之和

解题思路： 该题使用哈希表的思想解决该问题 首先定义一个Map，key为数组中的每个元素，value为每个元素的索引下标。接着遍历原数组，对每一个元素进行判断，如果哈希表中包含target-nums[i]，则将其value和当前…
阅读更多...
【JAVA GUI+MYSQL]社团信息管理系统

【JAVA GUI+MYSQL]社团信息管理系统

本社团信息管理系统主要实现登录注册、管理员信息管理、社团用户信息管理、用户申请信息管理功能模块。 目录 １．系统主要功能介绍 ２． 数据库概念模型设计 3.具体功能模块的实现 3.1模型类 3.1.1Student.java 3.1.2User .j…
阅读更多...
基于ssm的孩童收养信息管理系统论文

基于ssm的孩童收养信息管理系统论文

摘 要 现代经济快节奏发展以及不断完善升级的信息化技术，让传统数据信息的管理升级为软件存储，归纳，集中处理数据信息的管理方式。本孩童收养信息管理就是在这样的大环境下诞生，其可以帮助管理者在短时间内处理完毕庞大的数据信息…
阅读更多...
react-native下载图片到本地相册

react-native下载图片到本地相册

需求 点击右上角下载icon，可以将当前图片下载并保存到本地相册。 下载的图片： 流程 下载图片的本质其实是， 固定需要下载的页面内容和样式 》将其放在当前页面不可见区域 》点击下载按钮 》穿一个ref给native，会自动拉起手机系…
阅读更多...
SpringBoot怎么写一个自定义的starter，Gradle依赖引入starter的Jar包

SpringBoot怎么写一个自定义的starter，Gradle依赖引入starter的Jar包

1.新建一个Spring的项目myasset-spring-boot-starter 项目结构如下： 注意：不需要Application启动类 和 application.yml/application.properties文件 2. resources下添加spring.factories文件 # Auto Configure org.springframework.boot.autoconfigure.EnableAutoConfigu…
阅读更多...
Zookeeper的基础介绍和安装教程

Zookeeper的基础介绍和安装教程

1、 Zookeeper入门 1.1 概述 Zookeeper是一个开源的分布式的，为分布式应用提供协调服务的Apache项目。 1.2 特点 1.3 数据结构 1.4 应用场景 提供的服务包括：统一命名服务、统一配置管理、统一集群管理、服务器节点动态上下线、软负载均衡等。 统一…
阅读更多...
ros gazebo机械臂仿真，手动控制与MoveIt自动控制

ros gazebo机械臂仿真，手动控制与MoveIt自动控制

本文总结归纳古月居胡春旭ros机械臂教程，给出了一些error的解决方法，补充了通过python运行moveit。十分建议去看github huchunxu源代码的repository。 创建机械臂的xacro模型 首先创建一个工作空间，在工作空间中创建arm_description功能包。…
阅读更多...
GPT如何完成AI绘图？

GPT如何完成AI绘图？

详情点击链接：GPT如何完成AI绘图？ 一OpenAI 1.最新大模型GPT-4 Turbo 2.最新发布的高级数据分析，AI画图，图像识别，文档API 3.GPT Store 4.从0到1创建自己的GPT应用 5. 模型Gemini以及大模型Claude2二定制自己的GP…
阅读更多...
react antd 计算公式 (+-*/)运算，回显

react antd 计算公式 (+-*/)运算，回显

计算器的源码计算器触发事件源码 import {DictValueEnumObj } from @/components/DictTag; import {getDeptTree, getFormulaListAll, getListAll } from @/services/Energy/Metering;import {getListAllInfo, getDepartmentName } from @/services/Energy/Calculation; import…
阅读更多...
蓝牙网关在物联网领域三大应用

蓝牙网关在物联网领域三大应用

蓝牙网关在物联网的应用主要包括物联网室内定位、物联网数据采集、物联网连接控制三大应用领域，以下对三大应用领域做详细解释。 一、物联网蓝牙室内定位 蓝牙网关在室内定位的应用包括人员定位和资产设备定位两大方向。 1、人员定位 蓝牙网关安装于室内的特定地…
阅读更多...
护眼灯哪个品牌最好？2024年十大护眼灯品牌排行榜

护眼灯哪个品牌最好？2024年十大护眼灯品牌排行榜

由于科技水平的提高和电子产品的普及，儿童青少年的近视率正逐年攀升，出现低龄化现象，面对眼健康问题的严峻形势，我们应该还有爱眼意识、加强眼健康知识普及！现在呢，护眼台灯被越来越多的人发现了&#xff0…
阅读更多...
接口芯片选型分析 四通道差分驱动可满足ANSI TIA/EIA-422-B 和ITU V.11 的要求 低功耗，高速率，高ESD

接口芯片选型分析 四通道差分驱动可满足ANSI TIA/EIA-422-B 和ITU V.11 的要求 低功耗，高速率，高ESD

四通道差分驱动可满足ANSI TIA/EIA-422-B 和ITU V.11 的要求 低功耗，高速率，高ESD。 其中GC26L31S可替代AM26LS31/TI，GC26L32S替代AM26LS32/TI，GC26E31S替代TI的AM26LV31E
阅读更多...
如何快速制作网址的静态码？网址二维码在线制作的简单技巧

如何快速制作网址的静态码？网址二维码在线制作的简单技巧

现在很多人会将网址转换成静态二维码来使用，一个原因是扫码更符合现在人们的生活习惯，二来是采用二维码图片来做传播能够有效的节省制作者的成本，而且容易更快的完成网址内容的传播，所以将网址生成二维码的方法现在应用非常的广泛…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023