码上公益低代码开发训练营 — 课时5:《低代码开发师中级认证课程》第4章 员工管理系统综合实践

简介: 在以往的行政管理中,通常使用纸质化登记员工基本信息,会造成以下问题: • 手动填写员工信息,工作繁琐且工作量大;• 资料的保存和查阅不方便;• 人员部门变动纸质申请审批,领导经常出差无法及时批阅; 本章内容根据以上几个问题,通过宜搭创建一个线上员工管理系统应用,来讲解如何搭建一个满足需求的应用。

码上公益低代码开发训练营

课时5:《低代码开发师中级认证课程》第4

第四章 员工管理系统综合实践

 

视频地址:https://developer.aliyun.com/learning/course/994/detail/14990

 

课程概述

 

在以往的行政管理中,通常使用纸质化登记员工基本信息,会造成以下问题:

 

  • 手动填写员工信息,工作繁琐且工作量大;
  • 资料的保存和查阅不方便;
  • 人员部门变动纸质申请审批,领导经常出差无法及时批阅;

 

本章内容根据以上几个问题,通过宜搭创建一个线上员工管理系统应用,来讲解如何搭建一个满足需求的应用。

 

课程目标

 

  • 理解员工信息管理系统的需求;
  • 分析员工信息管理系统及功能;
  • 创建员工信息管理系统的相关表单;
  • 掌握跨应用数据集及报表组件的使用;
  • 掌握自定义页面组件的使用方法。

 

课程目录

 

一、 案例背景与需求分析

二、 基础表单搭建

三、 可视化报表搭建

四、 使用手册搭建

 

一、  案例背景与需求分析

 

1. 员工管理系统

 

员工管理系统主要分为员工管理、员工培训、员工考核和员工职位调动四个部分,每部分包含的内容分别为:

 

a.  员工管理

  • 员工个人信息;
  • 姓名/身份证号;
  • 所在部门/岗位;
  • 入职时间工作经历;
  • ……

 

b.  员工培训记录

  • 培训内容;
  • 培训时间;
  • 培训参与人员;
  • ……

 

c.  员工考核

  • 考核内容;
  • 考核时间;
  • 考核成员;
  • 是否通过;
  • ……

 

d.  员工职位调动

  • 员工调入部门/职位;
  • 员工调出部门/职位;
  • 员工调动原因;
  • ……

 

2. 实现线上员工管理系统的背景和诉求

 

a.  背景

  • 纸质化登记员工基本信息,工作量大;
  • 资料的保存和查阅不方便;
  • 人员部门变动纸质申请审批,领导经常出差无法及时批阅;

 

b.  诉求

  • HR高效维护员工岗位、考核等信息;
  • 上级主管实时获悉员工岗位调动情况;
  • 不同表单中员工信息实现自动化数据联动。

 

3. 员工管理系统的需求分析

 

员工管理系统的需求主要包含两方面:

 

a.  员工管理基本需求:

  • 录入员工个人信息;
  • 对员工进行集体培训;
  • 培训后对员工进行考核;
  • 员工职位随时调动;

 

b.  员工信息统计需求:

  • 跨应用获取员工信息;
  • 统计员工数据;
  • 配置员工使用手册

image.png

 

4. 关键功能点

 

a.  关联表单组件及数据填充

 

对参与培训成员进行考核时,可直接在考核表单内将关联表单组件设置显示为培训内容,对应将培训成员子表单关联到考核成员子表单中。

image.png

 

b.  关联数据的两种方式及区别

 

  • 关联表单组件

关联表单组件提供了关联其他表单数据,填充数据到当前表单组件的功能,在获取关联的表单数据时还提供了过滤筛选的功能,且在详情页可以直接进行关联表单的详情跳转;

 

  • 关联其他表单数据

通过关联设置,多用于获取被关联表单的一个字段作为当前表单下拉单选等组件的选项,可用于业务关联规则,通常搭配数据联动使用。

 

c.  跨应用数据集

 

员工工资信息,考核数据等分布在不同应用中时,可通过新建跨应用数据集,将当前组织架构下其他应用数据展示在员工管理系统应用的报表中。

image.png

 

d.  表格跳转详情

 

在表格中展示员工信息,配置后可通过配置跳转链接来实现跳转功能,在点击详情时自动跳转到对应的详情页中。通常是使用完整链接和表单实例ID进行跳转。

image.png

 

e.  自定义页面布局

 

自定义页面中的组件相比表单页面的组件配置属性更丰富、更灵活,可按需求修改布局以及样式。

image.png

 

二、  基础表单搭建

 

员工管理基本需求包括四部分:员工信息收集、员工培训、员工考核、员工职位调动,这四部分需求分别由四个表单在四个页面中展示。

 

1. 员工信息收集

 

员工信息收集表主要记录员工的详细信息。

 

  • 页面类型:表单页面;
  • 所需组件:成员、单行文本、日期及子表单组件;
  • 配置内容:姓名、身份证号、入职时间、出生日期、员工部门、学历、职位、家庭住址,以及工作经历和家庭成员。

image.png

 

2. 员工培训记录

 

员工培训记录页面主要记录每场培训内容及参与人员。

 

  • 页面类型:表单页面;
  • 所需组件:成员、日期、单行文本、子表单和富文本组件
  • 配置内容:培训主题、培训干部、培训方式、培训地点、培训时间、培训员工和培训内容。

image.png

 

3. 员工考核记录

 

根据培训对该场培训参与人员进行考核,由讲师进行审批。

 

  • 页面类型:流程页面;
  • 所需组件:关联表单组件,子表单组件;
  • 配置内容:将考核内容与培训内容相关联,并自动将培训内容中的所有成员关联填充到被考核人员的子表单中

image.png

 

4. 员工调动申请

 

员工调动线上审批,且实时通知至主管,由主管批阅。

 

  • 页面类型:流程页面;
  • 所需组件:成员、单行文本组件,
  • 功能:数据联动功能,将联系方式、调出部门、调出岗位三个数据从员工信息录入表中联动获取并填充到页面;

image.png

 

5.  表单组件及公式介绍

 

a. 表单组件:

image.png

上文介绍的基础表单搭建所涉及的表单组件

 

  • 成员组件:获取钉钉通讯录的人员,如姓名成员等;
  • 单行文本:可以输入文字、数字,字数上限200字,如身份证录入、职位等;
  • 日期:选择日期填入,可设置格式与可选日期区间,如入职时间;
  • 部门组件:获取人员所在部门,如部门等;
  • 日期区间:选择起止日期,设置日期显示格式,如工作经历起始时间;
  • 富文本:可内嵌于浏览器,所见即所得的文本编辑器,如培训内容记录;
  • 地址:基于现在中国标准行政区块的详细地址选择器,如家庭住址;
  • 子表单:可以在其内部添加文本,数值、日期等组件,如教育经历、工作经历;
  • 单选:可用于在有限的相关选项中选择其中一个选项,如性别等;
  • 关联表单组件:关联其他表单数据,填充数据到当前表单组件,如考核内容及参与人;

 

b. 公式函数

image.png

 

在上述组件中会运用到的函数包括:截取文本函数、文本转换数字函数、返回字符个数函数、拼接函数、取余函数、判断两个数是否相等的EQ函数   、IF判断逻辑函数,以及部门相关函数。

 

6. 基础表单搭建流程

image.png

 

a.  创建「员工管理系统」应用

  • 从空白创建应用

 

b.  创建「员工信息」 表单

  • 创建一个普通表单;
  • 配置表单组件;

 

c.  创建「员工培训记录」表单

  • 创建一个普通表单;
  • 配置表单组件;

 

d.  创建「员工审核」流程表单

  • 创建一个流程表单;
  • 配置表单组件;
  • 配置关联表单组件;
  • 配置审批流程设计;

 

e.  创建「员工调动」流程表单

  • 创建一个流程表单;
  • 配置表单组件;
  • 配置数据联动;
  • 配置审批流程设计;

 

7. 实操演示

 

a.  进入员工管理系统,找到员工信息录入页面,点击“编辑表单”进入表单设计器;

 image.png

 

b.  表单包含多个组件,如:成员组件、单行文本组件、日期组件、子表单组件,等,在各组件中分别录入相应的内容;

 image.png

 

c.  使用身份证号获取性别、年龄、出生日期的数据:

 

  • 性别:默认值选择公式编辑,点击“编辑公式”,使用IF函数,函数公式:

IF(EQ(LEN(身份证号)18)IF(EQ(MOD(VALUE(MID(身份证号,17,1))2),0)“女“男”), ”请输入正确身份证号码”)

 image.png

 

  • 年龄:默认值选择公式编辑,点击“编辑公式”,使用IF函数,函数公式:

IF(EQ(LEN(身份证号),18)VALUE(TEXT(TODAY(),yyyy”))-VALUE(MID(身份证号,7,4)),“请输入正确身份证号码”)

image.png

 

  • 出生日期:默认值选择公式编辑,点击“编辑公式”,使用IF函数,函数公式:

IF(EQ(LEN(身份证号),18)CONCATENATE(MID(身份证号,7,4),-,MID身份证号,11,2),-,MID(身份证号,132))“请输入正确身份证号码”)

image.png

 

d.  进入“员工培训记录”页面,使用组件包括:

  • 单行文本组件-培训主题、培训方式、培训地点;
  • 日期组件-培训时间;
  • 子表单组件-培训员工;
  • 富文本组件-培训内容;
  • 多行文本组件-备注;

 image.png

 

e.  进入“员工考核记录”页面,点击“编辑流程表单”进入流程表单设计器;

image.png

 

  • 配置“考核内容”:使用关联表单组件,关联表单选择“员工培训”,显示设置选择“培训主题”和“培训时间”;

 image.pngimage.png

 

  • 配置“被考核人员”,在考核内容中设置数据填充功能,在关联表单字段选择“培训员工.成员”,当前表单字段选择“被考核人员.成员”;

 image.png

  • 预览效果:“被考核人”数据关联成功;

 image.png

 

f.  进入“员工调动申请”页面,点击“编辑流程表单”进入流程表单设计器;

image.png

 

  • 配置数据联动:联系方式、调出部门和调出岗位三个数据联动,即通过调动人员姓名自动获取这三个数据;

分别将三个组件的默认值设置为“数据联动”,点击“数据联动”进行设    置,下图是“联系方式”示例:

image.png

 

  • 全部配置完成后查看预览效果,选择“调动人员姓名”后自动获取到“联系方式”、“调出部门”和“调出岗位”;

 image.png

 

g.  流程设计:设置“审批人”,完成配置后点击“保存”,并发布;

image.png

 

至此,完成四个基础表单搭建。

 

三、  可视化表单搭建

 

基础表单搭建好以后,会录入相应的数据并对数据进行统计分析,这时会使用到可视化报表。

 

1.  可视化报表搭建所需功能点

 

a.  跨应用数据集

 

员工客户管理在当前组织下的客户管理系统中录入,需要在员工管理系统中统计员工对应客户情况,可在报表中配置跨应用数据集来展示。

 image.png

 

  • 报表函数:COUNT

函数作用:统计计数,如:统计客户数量;

使用样例:COUNT(<度量字段>[条件],[排除字段])

返回合乎[条件]下,对<字段>进行计数的结果,[排除字段]不参与求和的交叉计算;      

 image.png

 

b.  多图表展示

 

多图表展示包括的组件及使用功能分别是:

 

表格组件:COUNT计数功能,报表跳转详情功能;

柱状图组件:横向堆积功能;

饼图组件:下钻功能;

image.png

 

2.  可视化报表配置流程

 

可视化报表配置流程有三个步骤:

 

  • 步骤一:拖动组件选择数据集:配置数据集中可以选择表格、视图表、数据准备和跨应用;

 

  • 步骤二:配置列字段:将字段下所需内容拖拽到表格列中;

 

  • 步骤三:配置样式:可以选择表格尺寸、表格风格、是否合并单元格,等。

image.png

 

3.  实操演示

 

a.  跨应用表单配置:

 

  • 在宜搭应用后台“我的应用”中选择“客户管理系统”;

image.png

 

  • 在“客户管理系统”页面录入信息:客户姓名、客户企业、客户联系方式和负责员工姓名;

image.png

 

  • 配置好的客户管理系统表单需要在员工管理系统中展示,因此,需要在员工管理系统进行跨应用新建,进入员工管理系统,点击“应用设置”;

 image.png

 

  • 在“应用设置”页面左边栏选择“跨应用管理”,点击“新建跨应用”,选择表单,点击“确认”完成新建跨应用;

image.png

 

  • 新建报表:回到“页面管理”,选择“新建报表”,报表名称“员工信息统计”;

image.png

 

  • 进入报表设计页面进行相关组件配置:

 

  • 组件1:基础报表,在“表格”中选择“基础报表”并拖到画布上,选择数据集,并将所需展示字段拖到表格列中;

image.png

 

  • 点击fx添加公式字段以统计每个员工的客户数量,公式设置中函数选择聚合类COUNT计数;

image.png

 

  • 样式设置;

image.png

 

至此,完成跨应用表单设置。

 

b.  详情跳转功能配置

 

  • 添加基础报表到表单中,数据集选择表单中的“员工信息录入”,点击“确定”;

image.png

 

  • 配置数据集,选择需要的字段到表格列;

 image.png

 

  • 详情跳转配置,点击fx添加公式字段,使用“”并自定义为“详情”,数据类型“字符串”,并点击“确定”;

image.png

 

  • 将新添加的列改名为“详情”,并调整样式;

image.png

 

  • 进入员工管理页面,找到员工信息录入表,在数据管理中点击一条数据;

image.png

 

  • 进入数据详情页,点击“”中的“分享”,然后点击“复制链接”;

image.png

 

  • 返回表单设计器,编辑“详情”,选择“链接”-URL”,将复制链接粘贴在输入框中,将链接中forminstid后面的字段删除,使用空格加@来引用当前表格里的字段;

image.png

 

  • 链接设置好后点击“确认”;

image.png

 

至此,详情跳转功能配置完成,可点击“预览”查看。

 

c.  柱状图配置:

 

  • 点击“图表”选择“柱状图”;

image.png

 

  • 选择数据集-“员工信息录入”,点击“确定”;

image.png

 

  • 柱状图的横轴选择“员工部门中文”,纵轴选择“实例ID”并设置为计数;

image.png

  • 分组中配置“性别”;

image.png

 

  • 样式配置:在右边栏“样式”中根据需求调整样式;

 image.png

 

d.  饼状图配置

 

  • 在图表中选择“饼图”,选择数据集-员工信息表;

image.png

 

  • 数据配置:分类字段:选择“员工部门中文”,数值字段:选择“实例ID”并设置为“计数”;

 

e.  钻取功能配置

 

  • 选择“钻取”-“通用下钻”,并添加钻取字段“性别”和“最高学历中文”;

image.png

   

  • 点击“保存”-“预览”,可以看到饼状图中的钻取功能展示;

 image.png

 

四、  使用手册搭建

 

1.  使用模版创建自定义使用手册

 

创建自定义页面后可直接启用工作台模板,点击“就选它”进入模板编辑页面。

 image.png

 

2.  自定义使用手册搭建界面

 

启用模板后配置布局及样式,可在组件库选择布局及组件,并在属性样式中配置。

 image.png

 

3.  布局介绍

 

a.  容器及布局容器

 

  • 容器:主要是用于布局,可与其它布局搭配使用,且可自定义容器样式;
  • 布局容器:可以对容器进行布局,可以放入多个组件到布局容器中进行展示,并且可以自定义列比例及属性样式。

image.png

 

b.  分组

 

一个页面中有多个独立模块需要展示(例如商店里面的产品、价格等,每种产品放入一个模块展示)且每个模块中有多个表单组件,则可将每个模块放置进一个分组。

image.png

 

c.  选项卡

 

用于自定义页面布局,可在同一位置切换展示不同内容,支持增加多个标签项。

image.png

 

4.  实操演示

 

a.  进入员工管理系统,选择“新建自定义页面”,页面名称为“员工管理系统使用手册”;

image.png

 

b.  在工作台模板中选择“工作台模板-01”,进入工作台模板设计页面,在页面设计中可以选择组件库,也可以对现有模板进行修改,模板自带“待我处理”、“我创建的”、“抄送我的”三个选项,下面是一个布局容器,其中包括三个小布局容器;

 image.png

 

c.  修改模板中的布局容器;

 image.pngimage.png

 

d.  选项卡:在组件库中选择“选项卡”,并将需要展示的内容放入选项卡标签项中,点击“保存”,在预览中可以看到标签项里的内容,同时两个标签项可以进行切换;

image.png

 

e.  修改模板中的分组内容:

image.png

 

  • 修改标题:员工管理
  • 修改分组中的链接块内容:

采购合同:改成“员工信息录入”,并配置属性和样式;

image.pngimage.png

 

其他链接块依次修改:员工调动申请,员工考核页面,员工数据报表,员工培训记录;

image.png

 

f.  配置完成后点击“保存”,进入预览页面;

 image.png

 

至此,简单的页面工作台搭建完成。

 

课程总结

 

通过对员工管理系统的背景了解和需求分析,确定员工管理系统应用所需要的功能,并通过全流程的实践掌握了应用的创建与配置。

 

1.  员工管理系统整体流程回顾:

  • 创建基础表单;
  • 创建可视化图表;
  • 创建自定义页面使用手册;

2.  表单组件:图片上传、下拉单选、地址、子表单、分组

3.  函数:文本函数、数学函数、逻辑函数、报表函数

4.  功能:

  • 关联表单组件填充;
  • 报表展示跨应用数据集;
  • 报表多图表配置;
  • 自定义页面布局配置;
  • 快速启用自定义模版搭建应用;

5.  更多场景应用:出差申请、报销审批、客户管理系统……

 image.png

 

 

相关文章
|
4月前
|
存储 数据可视化 关系型数据库
低代码开发师(初级)实战教程
【4月更文挑战第6天】本教程介绍低代码开发,通过图形化界面和预构建模板简化应用开发。步骤包括:选择合适的低代码平台,创建项目,设计界面,添加业务逻辑,设计数据模型,连接外部服务,预览测试,最后部署发布。这种方法让非专业开发者也能快速构建应用程序。
224 7
《低代码开发师(高级)实战教程》电子版
本书基于”低代码开发师(高级)认证“的课程内容,对应每个场景化的实践,提供了配套的实战指导教程,便于读者根据详细的步骤描述完成应用的创建。
149 0
《低代码开发师(高级)实战教程》电子版
《低代码开发师(中级)实战教程》电子版地址
本书基于“低代码开发师(中级)认证”的课程内容,对应课程中合同管理、资产管理等场景,提供了详细的实践指导,让读者在初级教程的基础上具备搭建复杂应用能力。
183 0
《低代码开发师(中级)实战教程》电子版地址
《低代码开发师(初级)实战教程》电子版地址
本书基于“低代码开发师(初级)认证”的课程内容,对应课程中请假申请、招聘管理等场景,提供了详细的实践指导,让低代码的初学者快速掌握0代码搭建应用的技能。
114 0
《低代码开发师(初级)实战教程》电子版地址
宜搭高级开发师认证模拟题
五年高考,三年模拟
1758 1
宜搭高级开发师认证模拟题
《低代码开发师-宜搭》电子版地址
《低代码开发师-宜搭》电子书
334 0
《低代码开发师-宜搭》电子版地址
|
数据采集 数据可视化 安全
宜搭低代码工程师[初级]
全面可视化编程、完整的周期管理、良好的拓展能力
795 0
|
定位技术
宜搭低代码中级工程师
宜搭低代码中级工程师
462 0
《低代码开发师(初级)实战教程》下载
本书基于“低代码开发师(初级)认证”的课程内容,对应课程中请假申请、招聘管理等场景,提供了详细的实践指导,让低代码的初学者快速掌握0代码搭建应用的技能。
118 0
《低代码开发师(初级)实战教程》下载
《低代码开发师(初级)实战教程》电子版
本书基于“低代码开发师(初级)认证”的课程内容,对应课程中请假申请、招聘管理等场景,提供了详细的实践指导,让低代码的初学者快速掌握0代码搭建应用的技能。
90 0
《低代码开发师(初级)实战教程》电子版