员工管理系统综合实践|学习笔记(二)

简介: 快速学习员工管理系统综合实践

开发者学堂课程【低代码开发师认证课程员工管理系统综合实践】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址https://developer.aliyun.com/learning/course/1046/detail/15211


员工管理系统综合实践  


内容介绍

二、创建可视化图表

三、创建自定义页面使用手册

二、创建可视化表单

员工管理系统实践中的第三节可视化报表搭建。那么在前两个小节中,我们主要去学习到的是我们案例背景与需求的分析,并且根据我们的需求分析去制作了相关表的搭建。那么在我们搭建成功之后,我们要去录入相应的数据,并且对我们的数据进行统计,这时就可以去使用到我们的格式化报表。

image.png

首先我们来看一下我们涉及到的功能点。首先是我们的快应用数据集,我们的员工客户管理在当前组织下的客户管理系统中进行录入,需要在员工管理系统中统计员工对应的客户情。那么这时我们就可以先去创建我们的一个跨应用数据集,并且在报表中配置跨应用数据集来进行展示。接下来是我们的报表公式的使用以及报表的展示。我们在将客户管理系统跨应用获取过来之后,我们需要在我们当前应用的表格中进行展示。那么我们在展示过程中,我们除了将我们的数据展示以外,我们需要去统计它的一个客户数量。那么在这里我们就可以使用到我们看的基础的功能。 我们看的计数是我们报表中的统计计数的公式。我们在这里我们可以去对我们某一

字段进行一个计数的结果统计,并且我们可以去配置它的条件以及排除字段。我们在配置条件后,它会对我们当前字段下符合条件的内容进行一个计数的统计。而排除字段则是指它不考虑我们这些排除因素的影响,然后对我们字段进行一个统计的结果。那么我们在报表中首先我们去配置的是我们的表格组件以及我们的柱状图组件和我们的饼图组件。那么在我们的表格中,我们首先是使用到了我们报表看的基数的一个功能,然后是我们的报表跳转详情的功能以及我们柱状图的横向堆积功能和饼图的下钻功能。

image.png

首先我们来去学习一下我们可视化报表的配置流程。我们本次以我们的表格为例,首先我们需要拖动表格组件到我们的应用中,并且我们去首先我们需要去拖动我们表格组件到我们的页面中,并且配置它的数据集。那么在数据集中我们可以去选择到表格视图表、数据准备以及我们的快应用。

image.png

然后我们在配置好我们的数据集之后,我们要对应的去配置我们的线字段。那么在表格中我们只需要将我们字段下的内容去拖动到我们的表格列字段里就可以了,它就可以将我们对应的内容进行展示。我们在配置好表格列后,我们可以对应的将表格的样式以及它的功能进行一个设置。那么我们在样式选项卡下可以去配置表格的尺寸、表格的风格以及我们是否合并单元格的选项。那么接下来我们就一起来看一下我们是如何去对我们可视化报表进行配置的。

image.png

首先我们先来去配置我们的一个快应用表单,也就是我们客户管理系统。我们在客户管理系统中我们简单录入一个页面,然后在里边去录入客户姓名、客户企业客户联系方式以及对应负责的员工姓名。而我们的员工姓名需要询到的是我们的成员组件。那么我们在其中我们去简单录入了几条数据,然后我们针对我们的这个客户管理系统页面的这个表单,然后我们去做一个换应用的新建。那么我们需要在员工管理系统中去展示我们客户管理系统数据的内容。

image.png

那么首先我们需要去新建我们的跨应用,我们选择到我们的应用设置。在应用设置中,我们选择跨应用管理,然后新建跨应用。这时我们就可以选择到我们当前组织架构下我们创建的应用。

image.png

然后我们去选择到对应的表单,我们点击确定。选择完成后,那么我们就直接新建了一个跨应用在我们的应用中,然后我们返回到我们页面管理后,那么我们接下来去创建我们的报表,我们点击新建按钮新建报表,将报表命名为员工信息统计,然后点击确定。点击确定后进入到我们的报表设计页面。

image.png

我们的报表设计页面上方是我们组件的选择区域,左侧是我们的画布区域,右侧是我们的组件属性配置区域。而在我们的画布区域上方是我们的筛选栏区域,我们可以对应的去配置我们的筛选标题以及我们筛选的按钮。然后我们在下方可以去配置我们对应的报表组件。那么在这里我们首先去对我们的客户管理数据进行统计,我们拖动一个表格组件到我们的页面中,然后我们去配置它的数据集,我们选择数据集选择到它应用选择我们刚刚创建的客户管理系统,我们点击确定支持,他会将我们客户管理系统下的所有字段进行展示,我们只需将我们想要展示的内容推送到我们的表格列中就可以。  

image.png

因此我们在这里首先将我们的负责员工姓名进行拖动,然后是我们的客户姓名、客户企业以及客户联系方式。那么在这里我们需要去统计每一个员工他对应的客户数有多少。那么我们在这里就使用到的是我们看的公式,我们在表格列的上方,我们点击公式字段我们进行添加。然后我们在我们的聚合类函数中找到我们的 count 技术。

那么 count 技术下我们是包含着我们的这个字段条件以及排除字段的。因此我们首先要去统计的是我们统计的字段内容是什么字段。由于在这里我们每一个员工他对应多个客户姓名,所以我们只需要去统计我们的员工名字出现的次数,就可以去统计出该员工对应的客户数。因此我们在看的字段中,我们将字段选择为我们的负责员工姓名,然后我们再去配置的过程中,然后我们再去统计的过程中,其他字段也会作为我们的一个影响字段。所以我们需要将其他字段设置为排除字段,这样的话他就不会受其他字段影响。

image.png

只是统计我们当前的这个员工他名下有多少个客户。我们在配置完成之后,我们点击确定。那这时我们就可以看到我们表格中显示了一列对应的客户数,我们将我们对应客户数放置在我们对应的员工名字后面。然后我们在我们的编辑里将我们的字段信息修改为客户数量,我们点击确定。我们配置好后,我们还可以在我们的编辑中设置我们的样式。比如我们在表格列中设置我们对齐方式尾句中,使我们的内容更加美观。然后我们依次去给我们该报表中其他的字段进行设置。

image.png

那么依次类推我们设置完后,我们可以在我们的样式中将我们的单元格进行合并。这样的话我们就能直观地体现出我们当前员工下有多少客户数量,然后名下的客户数分别是谁。同时我们还可以对我们的表格风格进行更换。比如说我们将它设置为边框模式,那我们就可以更直观地看到我们的内容。我们的样式设置完之后,那么我们当前的快应用表格就已经设置完了。接下来我们来看一下我们第二个功能,也就是我们详情跳转的一个功能。

image.png

我们依旧是添加我们的基础报表到我们的页面中,然后选择我们的数据集为我们的表单。在表单中我们选择到我们的员工信息录入,然后我们点击确定。在员工信息录入中,我们选择我们对应想要展示的字段到我们的页面里补入我们现在去选择我们的员工名称、出生日期、身份证号以及他所在的部门。那么我们将对应的内容进行配置后,接下来我们需要对应的将我们报表里面的内容进行一个跳转的设置。希望我们在查看报表,同时我们可以点击详情去跳转到对应的页面中。

image.png

那么我们就在我们的公式字段中,我们去填写我们的一个字符串,我们直接使用我们的双引号,然后命名为详情,将数据类型改为字符串,你点击确定。

image.png

这时候我们可以看到它自动出现了一列详情页。然后我们在我们的编辑按钮中,我们将我们的字段信息更改为详情,然后在我们的表格列中将对齐方式去修改为居中对齐,点击确定。我们配置好后,那么接下来就可以去配置我们的链接。

image.png

我们首先来看一下我们表单数据的链接,我们进入到我们员工信息录入表单,然后进入到我们的数据管理页中,我们点击一条数据,然后我们点击新开页面,进入到我们的数据详情页后,首先我们来看一下我们上方的链接。

image.png

链接主要分为三部分,我们分为我们的前面的固定链接,后面的参数以及我们中间的连接符。

image.png

那么我们的连接符是一个问号连接符来拼接我们后面的参数。问号连接符之前可以去锁定到我们当前应用下的当前表单,那么分别是我们的 App type 以及我们的 phone UID 我们通过拼接我们的实例 ID 可以去锁定到某一条数据,每一条数据的实例 ID 都是唯一的。因此我们可以通过我们前方的固定链接绑定上我们后面的参数来跳转到我们对应的详情页。

image.png

那么我们在我们的报表设计页面,首先我们要将我们每一条数据的表单实例 ID 进行一个选择展示。展示成功后,那么我们在详情里边我们去进行一个链接的配置,我们点击选择到 URL 然后我们在我们的链接中将我们的链接进行复制,我们返回到我们的页面中。然后我们选择我们上方的分享,我们点击复制链接。在复制链接中我们将它复制过来到我们的报表编辑页面中。然后我们在编辑页面里我们去将我们 form is ID 等号后面的内容全部删除,然后我们可以通过空格加 at 来去引用我们当前表格里面的字段。那么我们使用空格加上 at 然后去选择到我们的实例 ID 我们点击确定,然后我们进行保存。

image.png

那么我们这时我们的链接跳转就已经配置好了,我们点击阅览,然后我们去点击详情,这时候我们可以看到它就可以直接对应的去跳转到对应的详情页面了。

我们在使用表格去统计我们的数据之后,那么接下来我们是使用到我们的柱状图来对我们的部门进行统计。我们使用到我们图表中的柱状图,然后我们点击进行配置。首先依旧是选择我们的数据集,那么我们选择到我们的员工信息入表,我们点击确定。然后我们在这里我们可以去选择我们每一个部门的人数或者是我们每一个学历的人数,我们都可以来进行选择。那么在这里首先我们去选解到我们的员工部门作为我们的横向坐标。然后纵轴我们主要是去统计每一个部门包含的人数有多少。因此我们在这里我们可以去直接使用到我们员工姓名,也可以去使用到我们的实例 ID 然后我们对实例 ID 进行一个计数的设置,我们点击确定他现在已经将我们数据管理中的所有的数据中的部门的数据进行了一个统计。  

image.png

统计成功之后,那么我们还可以去按照它的一个性别对我们的这个数据进行划分,我们选择到我们的性别,然后我们将它固定到我们的分组中,这时我们可以看到它显示为我们女性有两个,男性有一个。然后接下来我们来配置它的一个样式,我们去切换到我们的样式属性栏中。

image.png

然后我们可以在颜色中去修改它的显示颜色,然后去修改它的柱状图的一个粗细。比如说我们在这里随机进行一个选择,那么我们在选择完成之后,我们还可以对我们的数据调整进行一个划分。比如说我们现在分组是将我们男分女进行了分开展示,我们还可以去进行堆叠的展示。

那么通过堆叠,它是将我们的男女进行了一根柱状图的展示。然后我们这一种根柱状图统计的是我们当前部门的人数。而当我们选择到我们的百分比堆叠时,我们的纵坐标则变成了我们的一个百分比。在我们当前的这个部门下,它统计的是我们男女比例的占比情况。与此同时,我们还可以将我们的这个样式设置为横向的一个堆积,也就是我们条形图的一个设置,能让我们看起来更加美观。我们柱状图的一个样式设置也是配置完了。

image.png

接下来我们去使用到我们的饼状图。我们在我们的饼状图中,去设置我们的选择数据集,我们选择到我们的员工信息表,然后我们点击确定我们在员工信息表中。那么接下来我们就需要去配置我们对应的显示内容。首先分类字段我们依旧是选择我们的员工部门进行我们的一个分类。然后我们选择我们的实例 ID 去作为我们的一个技术字段,我们将它设置为技术。我们配置完技术之后,我们的饼状谱,它实际上展示的是我们当前应用架构下的部门分布。比如说我想统计当前部门下的性别,然后某一性别下的学历,那么我们都可以通过这个方式来进行配置。

image.png

首先我们在我们的员工部门中,我们点击编辑按钮,然后选择我们的钻雪,我们可以直接使用到我们的通用下钻,然后进入对我们的下一层赚取的字段进行配置。比如说我们在这里去配置性别,然后我们再去配置我们最高学历。 B. 我们点击确定,我们点击确定之后,我们来点击保存,我们来一起看一下效果。我们点击阅览。那么现在我们现在统计的是我且组织架构下部门的占比数量以及部门的人数,我们点击进入后,那么它会自动地进入当前部门的男女占比情况。那么也就是说我们低代码培训的这个架构下,男生有一个,女生有两个,然后分笔占比是多少都会展示出来。那么与此同时,我们再去点击女性下的这个学历,那么我们可以看到它会针对于我们对应的这个部门下母性的学历进行一个统计。那么分别为一个。那么我们在统计完之后,它实现的就是我们一个下钻算取的一个功能。

image.png

我们主要讲解了跨应用数据获取并且展示在报表中。报表中是看不计数的。使用我们跳转详情链接的配置,影图的下钻功能以及我们柱状图的横向堆积功能。我们在前三节中我们主要对我们的案例背景与需求进行了分析,并且对我们的基础表单和可视化报表进行了搭建。

 

三、创建自定义页面使用手册

首先我们来看一下我们的需求,我们使用模板创建我们自定义的一个使用手册。那么我们在去创建自定义页面后,我们可以直接去跳转到我们的页面模板选择页面,我们直接启用我们的工作模板,然后我们点击就选它进入到我们的模板编辑页面。

image.png

我们在模板搭建的过程中,我们启用模板后可以配置对应的布局及样式。并且可以在组件库中选择对应的布局及组件,在属性样式中进行重新配置。那么接下来我们来看一下我们几种不同的工具组件。首先是我们的容器以及布局容器。容器主要是用于进行布局,可以与其他布局搭配使用,并且可自定义的去进行容器的样式设置。我们可以直接将组件拖动到容器中,然后进行使用布局容器可以对容器进行布局,可以放入多个组件或者多个容器到布局容器中,并且我们可以去自定义列比例以及它的属性样式。然后是我们的分组,一个页面中有多个独立模块需要展示时,比如说商店里面的产品价格,每种产品需要放到一个模块中展示,其为一个模块中有多个表单组件,那么就可以使用我们的模块放到我们的一个分组中,然后按我们的分组来进行展示。我们的分组仍然可以去对我们的分组头部进行一个设置,比如说我们是否让他去显示他的标题。  

image.png

选项卡组件用于自营页面布局,可在同一位置切换展示不同的内容,支持增加多个标签项。那么接下来我们就根据以上几种布局方式以及自定义模板的搭建,我们来一起去搭建一个员工管理系统的使用手册。首先我们进入到我们在前几节搭建的员工管理系统中,然后我们点击创建按钮,创建一个自定义页面,将页面名称命名为员工管理系统的使用手册。

在非使用手册中,我们可以通过快捷跳转链接进行跳转。

image.png

那么我们选择到我们的工作台模板1,然后我们点击就选它进入到我们工作台模板设计页面。在我们的页面设计里,我们可以去选择我们的组件库,也可以对我们现有的模板进行修改。

比如说我们首先将我们上方的容器中的文本,我们将它的名称改为人工管理系统。我们的模板自带待我处理,我创建了以及抄送了的三个选项。然后下方我们使用的是我们的一个布局容器。

在布局容器中我们放置了三个小的容器,然后分别放置了不同的内容。那么在这里由于我们的员工管理系统内容较少,因此我们只需要去放置我们的一个容器,我们就将全部进行展示。所以说我们直接在我们的布局容器中将我们的布局修改成为1。

那么我们在全部展示后,我们只需要将对应的每一个小链接块里的内容进行修改,我们就可以完成我们的应用设置。

image.png

然后接下来我们来分别看一下我们几种布局的方式。首先是我们的选项卡,我们在设置选项卡后,我们可以针对我们不同的选项卡标签来展示不同的内容。比如说我们采购申请的链接块,我们放到我们的标签项 1 中,然我们的采购合同链接块放到我们的标签选项 2 中,然后我们点击保存,我们来阅览一下效果。我们点击阅我们下方可以直接看到我们的标签项,并且在我们切换标签项时,它会显示不同的内容。那么这就是我们选项卡的一个使用方式。然后接下来我们来看一下我们其他的布局方式。

我们先将选项卡进行删除,然后我们选中到我们当前的这个分组。那么我们可以看到的是我们当前的下面的这个采购管理使用的是一个分组。然后我们需要去对我们的这个分组标题进行修改,我们将它修改为员工管理。然后接下来我们需要对应的去将我们每一个链接块里的内容进行修改。

首先我们需要去修改的是我们链接块里的链接地址,我们可以将它配置为我们的内部页面以及我们的外部链接。在内部页面中,我们可以直接让它去跳转到任意一个页面。比如说我们首先让它去配置到我们的员工信息部页面,然后我们在选择后,我们去点击到图标下方的文本。然后我们在文本内容中我们将它改成员工信息录入,并且我们可以在样式中去修改它的样式。比如我们可以去修改它的一个上间距以及下间距和它的显示设置。那么在这里我们去给到我们的一个上间距为12。然后我们给文字一个样式,我们设置为 400 的正常字体,并且我们让它进行一个倾斜。然后我们去配置它的颜色为黑色,属性为居中,然后我们去设置它的一个字号。那么我们配置完后,我们就可以直接去配置我们下一个链接块。

与此同时,我们还可以对我们当前的这个样式去进行一个边框的设置。我们选择到我们的链接块,然后选择到我们的样式针对于我们的边框,然后我们去修改它的一个线型,比如说我们使用到的是我们一个虚线,然后我们去给它一个宽度。然后接下来我们去配置我们边框的一个颜色,我们任意去选择一个颜色,然后进行配置。

我们在配置完之后,我们就可以看到在我们链接块的四周是包含了我们一圈的边框,而我们这个边框我们同时可以给它一个圆角的设置,我们选择到边框,然然后我们去给一个圆角的角度。比如说我们设置美食,那这时我们就可以看到我们的这个边框它是有一个圆角弧度的。那么依次类推,我们可以去设置任意一个链接块的样式为自己喜欢的样式。那么我们在这里我们将它去进行一个设置。那么我们依次对我们的页面进行设置,将我们的员工调动申请,依次的进行录入。

然后将多余的一个链接块进行删除,那么我们的自营页面就已经配置好了,配置成功之后我们点击保存,然后我们来阅览一下详情。我们进入阅览页面后,我们就可以看到我们可以通过员工管理下的快捷键直接进入到对应的页面中。

首先我们通过对员工管理系统的背景了解和需求分析,确定了员工管理系统应用所需要到的功能,并且通过全流程的实践掌握了应用的创建以及配置。那么我们在对我们的需求进行分析后,那么首先我们去创建我们的基础表单,我们在对我们的表单创建完毕之后,我们对应的表单进行了数据的录入,录入数据之后我们需要对数据进行一个统计。那么统计我们可以按照我们的需求去创建我们的可视化图表,在我们的整体的页面全部搭建完成之后,那么为了我们使用方便,我们使用了自定义页面工作台,然后去创建了一个简单的跳转手册,我们可以通过我们的这个首页直接进行页面的快捷跳转。那么实现就是我们更加快速便捷的一个系统的实现。

那么我们在整个课程的基础中,我们的表单组件我们用到了图片上传组件、下拉单选组件、地址组件、子表单组件以及我们的自定义页面的分组。那么我们在函数里边我们用到了文本函数、数学函数、逻辑函数以及我们的报表 count 的公式。而我们实现的功能,由我们关联表单组件的子表、填充字表的功能、报表展示跨应用数据集的功能、报表多图表的配置、自定义页面布局的配置,以及如何快速地去启用我们的一个自定义模板变成自己的应用。

那么我们在同样这样的一个思路,我们还可以应用到多个场景。我们在搭建其他场景时,我们也可以按照我们的思路,然后去执行我们的内容。比如说我们首先去对我们的需求分析,然后创建表单,创建报表,创建经营页面等等的这样的一些需求,我们都可以按照我们这个思路,然后来去搭建一个完整的流程。

相关文章
|
2月前
|
敏捷开发 算法 安全
如何精准展现C/C++项目亮点:高级工程师面试指南
如何精准展现C/C++项目亮点:高级工程师面试指南
41 1
|
7月前
|
存储 算法 安全
【实训】“宅急送”订餐管理系统(程序设计综合能力实训)
【实训】“宅急送”订餐管理系统(程序设计综合能力实训)
40 0
|
10月前
|
小程序 安全 图形学
课程设计项目——基于3D建模技术的车位在线销售平台(序言)
课程设计项目——基于3D建模技术的车位在线销售平台(序言)
|
11月前
|
网络协议 网络虚拟化 网络架构
综合实战项目
综合实战项目
57 0
|
11月前
|
前端开发
前端学习笔记202304学习笔记第八天-产品研发流程-1
前端学习笔记202304学习笔记第八天-产品研发流程-1
34 0
|
12月前
|
SQL 存储 物联网
数据开发在图书馆场景的应用实践案例
本文介绍如何使用物联网平台SQL工作的实践案例
|
测试技术 开发者
软件工程高效学 | 实战案例:在线选修课程管理系统设计
软件工程是计算机领域的一门专业基础课,它对于培养开发者的软件素质、提高开发者的软件开发能力与软件项目管理能力具有重要意义。本篇介绍了利用Rational Rose进行“在线选修课程管理系统”面向对象的设计案例。
143 0
软件工程高效学 | 实战案例:在线选修课程管理系统设计
|
运维 监控 BI
企业综合运维监控项目经典案例
对服务器、网络设备等IT设施提供全面的故障和性能管理,通过设置相应的性能阀值和告警通知方式,当设备发生异常时能及时通过邮件和短信通知到管理员,减少故障修复时间
328 0
企业综合运维监控项目经典案例
|
数据可视化 BI 调度
员工管理系统综合实践|学习笔记(一)
快速学习员工管理系统综合实践
151 0
员工管理系统综合实践|学习笔记(一)
|
数据可视化 数据管理 BI
员工管理系统综合实践 | 学习笔记
快速学习员工管理系统综合实践,介绍了员工管理系统综合实践系统机制, 以及在实际应用过程中如何使用。
199 0
员工管理系统综合实践 | 学习笔记