人事行政实践案例 — 员工管理系统集成工作台
1. 案例背景
在实际的员工管理系统中,报表和表单多且繁杂,本次案例很好的解决了这个问题,搭建员工管理系统工作台集成表单入口和报表入口、数据,让数据查询和填写更加轻松。
2. 实现效果
💡员工信息管理系统数据看板搭建
💡通过接口获取工作台看板数据源
💡通过 JS 和接口实现统计访问人数
3. 演示视频
视频来源宜搭视频手册《你好!低代码》人事行政实践案例(第四讲),宜搭视频手册文档提供更多教学视频。
扩展阅读:《你好!低代码》系列课程
4. 实现步骤
4.1 步骤一:创建报表并配置组件
4.1.1 员工资料分析报表
(1)创建报表
路径:创建应用后 >> 左上角新建页面 >> 选择新建报表
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1642403943432-7c219fcb-fa23-4418-8987-eab7c7304efd.png)
(2)报表组件配置
步骤:组件选择基础指标卡 >> 数据集选择「人员基本信息录入」 >> 指标字段选取「实例ID」 >> 聚合方式设置成计数 >> 字段别名改为「在职员工数量」
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1637131896412-311343c8-558a-4a95-a92b-ed7acc2701bf.png)
组件配置
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1637132244356-dd4941e0-b6e1-4e9f-962e-54d4dc1e371a.png)
数据集以及字段配置
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1637132322148-6dbf302b-b31b-44d0-b358-8cdfbe43adae.png)
聚合方式配置
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1637132379702-749ffc94-a50b-4052-9166-98232f064e9d.png)
字段信息
(3)员工性别占比配置
步骤:组件选择饼图 >> 数据集选择「人员基本信息录入」 >> 分类字段选择「性别」、数值字段选择「实例 ID」 >> 「实例 ID」 聚合方式改成计数
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1637133281974-781fd190-4246-427e-86fd-3f43cd50d9a2.png)
组件配置
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1637133410370-e4127926-bea5-4ad7-a92e-1119fc9928a0.png)
数据集以及字段配置
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1637133463750-fcf99051-9301-4faf-ae23-011186a0bf06.png)
聚合方式配置
(4)学历占比配置
步骤:组件选择饼图 >> 数据集选择「人员基本信息录入」 >> 分类字段选择「最高学历中文」、数值字段选择「实例 ID」 >> 「实例 ID」 聚合方式改成计数
参考 员工性别占比配置 即可
(5)年龄占比配置
步骤:组件选择饼图 >> 数据集选择「人员基本信息录入」 >> 分类字段选择「年龄」、数值字段选择「实例 ID」 >> 「实例 ID」 聚合方式改成计数
参考 员工性别占比配置 即可
(6)岗位占比配置
步骤:组件选择饼图 >> 数据集选择「人员基本信息录入」 >> 分类字段选择「员工岗位」、数值字段选择「实例 ID」 >> 「实例 ID」 聚合方式改成计数
参考 员工性别占比配置 即可
(7)员工信息汇总表格
步骤:组件选择基础表格 >> 数据集选择「人员基本信息录入」 >> 表格列字段按自身需求选择展示即可
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1637134068886-0f60cb96-221a-461b-99d4-723fbaa0ecc1.png)
组件配置
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1637134137960-0eafbe18-61d9-46cd-8d95-d1baff1c8666.png)
数据集以及字段配置
(8)员工姓名筛选配置
步骤:组件选择下拉筛选 >> 数据集选择「人员基本信息录入」 >> 值字段选择「员工显示名」
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1637134365289-9eb6cd6a-8dea-433e-b75f-be4f4075956a.png)
下拉筛选组件配置
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1637134457664-7592d973-4f9e-4f59-a73f-df83e1fd09b9.png)
数据集以及值字段配置
(9)入职日期筛选配置
步骤:组件选择日期筛选 >> 数据集选择「人员基本信息录入」 >> 值字段选择「日-入职日期」
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1637134704051-f6f60bd9-7a06-4807-969a-49947dbbb8bf.png)
日期筛选组件配置
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1637134787114-7a43fee9-4a01-4b25-94f0-522ff06f9552.png)
数据集以及字段配置
4.1.2 员工培训记录报表
(1)创建视图表
步骤:进入应用 >> 应用设置 >>应用数据管理 >> 数据集 >> 新建数据集 >> 新建视图表 >> 配置视图表多表关联 >> 选择视图表字段
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1642404166653-303411af-f5b0-4314-937a-04951e59af03.png)
新建视图表
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1637135418413-55502662-975d-4112-ad92-a682ba156ae6.png)
多表关联
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1637135465783-b5013f86-0a6c-470d-9ab9-04518bcc922b.png)
选择图表字段
(2)创建员工培训记录报表
路径:创建应用后 >> 左上角新建页面 >> 选择新建报表
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1642403943432-7c219fcb-fa23-4418-8987-eab7c7304efd.png)
新建报表
(3)员工培训次数
步骤:组件选择基础表格 >> 数据集选择视图表培训记录111 >> 表格列字段选择2个成员显示名 >> 其中一个人员显示名字段设施聚合方式为计数
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1637137990312-50bd61fc-40ea-46e7-92a9-389e58d8af52.png)
表格组件配置
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1637138140178-fa49e715-c604-4a90-b355-af40a9167f0e.png)
数据集以及字段配置
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1637138247088-efde2a49-4121-4735-a79a-d023c315d83b.png)
聚合方式配置
(4)培训主题
步骤:组件选择柱状图 >> 数据集选择视图表培训记录111 >> 横轴字段选择培训主题 、纵轴字段选择培训主题 >> 纵轴聚合方式设置为计数
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1637138980409-120a605b-62ce-4722-ba95-e0112dc4cb8e.png)
表格组件配置
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1637139210780-f0426156-0f2b-4a2e-b5ed-30d6571ea1e3.png)
数据集以及字段配置
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1637139260983-1b4aac8f-08fc-44b2-b690-ffd717a03880.png)
聚合方式配置
(5)培训信息
步骤:组件选择表格 >> 选择数据集视图表培训记录111 >> 表格列字段根据需求自主选择
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1637139464063-2cac212a-1bb5-419d-ae07-a45cd6d75b68.png)
表格组件配置
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1637139528433-4335c1e4-ec05-4485-b989-d2102bac17ae.png)
数据集以及字段配置
(6)培训人员
步骤:组件选择下拉筛选 >> 选择数据集视图表培训记录111 >> 选择值字段
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1637139749882-cba78c3d-9a30-4474-b66d-9e96e0c706ae.png)
筛选配置
4.1.3 员工调动记录查询
(1)创建报表
路径:创建应用后 >> 左上角新建页面 >> 选择新建报表
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1642403943432-7c219fcb-fa23-4418-8987-eab7c7304efd.png)
(2)人员调动信息汇总表
步骤:组件选择基础表格 >> 数据集选择人员调动表单 >> 选择表格列字段
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1637139936955-c7dfb20a-b29f-4344-b345-5568a79308e0.png)
汇总表配置
(3)筛选调动人员
步骤:组件选择下拉筛选 >> 数据集选择人员调动表单 >> 值字段选择调动人员姓名显示名
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1637140062576-1466545c-2809-4490-9354-54b61d482b25.png)
筛选配置
4.1.4 员工考核记录报表
(1)创建视图表
步骤:进入应用 >> 应用设置 >> 数据集 >> 新建数据集 >> 新建视图表 >> 配置视图表多表关联 >> 选择视图表字段
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1642404166653-303411af-f5b0-4314-937a-04951e59af03.png)
新建视图表
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1637137575820-98195925-ade3-4337-9f4b-af0a82496b66.png)
配置多表关联
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1637137657156-e59e2cf4-c878-461c-bc03-5b71145d58fd.png)
选择视图表展示字段
(2)创建报表
路径:创建应用后 >> 左上角新建页面 >> 选择新建报表
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1642403943432-7c219fcb-fa23-4418-8987-eab7c7304efd.png)
(2)员工合格数量不合格数量对比
步骤:组件选择柱状图 >> 数据集选择考核记录 >>横轴字段选择成员显示名 >>纵轴配置公式字段
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1637140333103-e08c7f4a-68a1-4247-8fcf-3ce29d5e64e5.png)
柱状图配置
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1637140376626-836e7372-184c-4cf7-81c9-e40cd09ccf93.png)
合格数量
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1637140402594-5571191f-98e7-443c-aeb8-5243c684e482.png)
不合格数量
(3)合格率统计
步骤:组件选择基础表格 >> 数据集选择考核记录 >> 表格列字段自定义选择 >> 配置公式字段
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1637140630020-d1294c19-f5c5-4774-8562-ac5152d99701.png)
表格配置
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1637140660554-ca58da8d-56f0-427c-bfef-740136ab8518.png)
合格率公式字段
(4)考核信息汇总
步骤:组件选择基础表格 >> 数据集选择考核记录 >> 表格列字段自定义选择 >> 设置合并
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1637140906390-79044411-9888-4b9c-bf77-6d1c2b0cfc93.png)
表格配置
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1637140945699-76f6b59a-6f56-4c48-b623-039c8b181a64.png)
行列合并
4.2 步骤二:创建表单并配置组件
4.2.1 创建访问数据统计底表
(1)创建表单
路径:创建应用后 >> 左上角新建页面 >> 选择新建表单
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1642404334212-c5f5c97b-8a4a-4bda-bf89-9f67baef7598.png)
(2)配置数据底表组件
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1637129973050-725e603a-94bd-4d90-ba44-1c72d9cdb2d2.png)
(3)在数据底表提交一条数据
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1642404400218-3cbac045-99d8-474f-b86c-d7ab559bd419.png)
4.3. 步骤三:创建自定义页面及数据源配置
4.3.1 创建自定义页面及配置组件
(1)创建自定义页面
路径:创建应用后 >> 左上角新建页面 >> 选择新建自定义页面
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1642404447157-9e3b7016-a804-434b-9575-a261d3162fdb.png)
(2)配置自定义页面组件
文本组件配置及样式
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1637130231534-00c40102-2f29-4f36-b3cd-6cf47187974d.png)
工作台标题配置及样式
选择容器组件 >> 选择文本组件 >> 配置容器样式 >> 配置文本样式
容器样式
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1637130434333-8bc01a96-2069-41b2-a1a8-cd02302f1ca0.png)
容器内文本样式
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1637130502671-90a9e340-6f6b-4023-acea-81265fa5573c.png)
文本内容设置
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1637130529730-5990e6e8-188f-4ce1-95ad-9df7af60d551.png)
(3)配置数据看板
组件选择
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1637131131455-135c81cf-6538-4c06-bfb5-8e3f6038f661.png)
链接块组件配置
选择对应需要跳转到的报表页面(四个链接块配置相同,只需选择不同的报表跳转)
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1637131210789-5c2283c2-74fd-47a6-a6ef-a6d1eaa764f9.png)
标题文本样式设置(四个标题样式相同)
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1637131356479-c8cf4e49-d647-44e3-ac9f-6eba884c0397.png)
数据文本样式设置(四个数据展示文本样式相同)
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1637131423329-cbce9461-322d-4980-b963-97bfa20d1cb1.png)
(4)应用入口集成
分组配置
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1637131581066-39739549-987f-4157-b17b-31f12602eb87.png)
布局容器及容器内链接块配置(四个布局中链接块及其他组件样式相同)
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1637131702640-4a3ce4cb-0bcb-40be-b5bb-b164b3198a5c.png)
配置链接块(四个链接块配置相同,只需修改链接块的链接为不同的表单填写页面)
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1637131813884-4fd6cc02-fe51-4321-b008-1ed26b12297a.png)
给四个图片组件上传不同的图片(按照需求上传)
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1637131915386-b47ab8c9-8dcb-4a5d-bd2a-8def58082e29.png)
应用名称文本样式配置
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1637131974948-90aaa0ff-c5ed-4618-b23e-5078115ec73e.png)
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1637131994253-50820112-fff7-456f-881f-9e0ca58cdc62.png)
4.3.2 数据源配置
(1)新建远程 API
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1637132052082-b2e68d3e-ca60-40a8-abec-f45dad71bfa0.png)
填写接口地址(使用到的是 “根据条件搜索表单实例详情列表”接口,请求地址的格式和接口地址,可以参考文档:宜搭平台接口)
应用编码:应用编码可以参考文档:应用基础设置 找到对应的应用编码
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1637132203578-fe88b6d9-6623-4fa5-a218-9b981a584898.png)
(2)配置请求参数
参数名称:formUuid
参数值:可以参考文档:应用基础设置 找到对应表单的 ID
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1637134110511-29d756c6-df47-4d67-a097-5efad10321f3.png)
(3)数据处理配置
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1637134438780-80d65423-35cd-4450-ab8d-d449c83884a7.png)
复制两个第一个配置好的数据源修改对应的请求参数(其他配置相同)
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1637134539313-5696cae5-a23d-4c5d-a262-218ed76e0588.png)
再次复制一个配置好的数据源,将请求地址最后的接口地址改为文档:根据搜索条件获取实例详情列表 中的地址
请求参数:请求参数修改为人员调动流程表单的表单ID(其他配置相同)
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1637134772357-ea142168-a1cd-4bff-a525-2008567bc2de.png)
(4)绑定数据源
点击对应的数据文本>点击内容旁的绑定变量>选择对应的数据源名称>在后面添加上 .data.length (其余三个数据文本按照同样的方式将数据源绑定)
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1637134890508-d5f11675-5848-428e-9472-b2e034175945.png)
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1637134957043-1af70f16-191c-4874-ba30-8c19f0556691.png)
(5)统计访问人数数据源配置
再次复制第一次配置好的数据源>修改数据源名称>修改请求参数为数据底表的表单 ID
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1637135281834-7a7bb9cf-3738-455f-bb5f-8b71e0bdfef7.png)
(6)创建一个新的数据源
请求地址:请求地址其他不变,接口地址改为文档:宜搭平台接口 中(更新表单中指定组件值)的接口地址
请求方式:请求方式选择 POST
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1637135622649-a76f69fb-131c-4fb4-8e03-d78c8fc90f91.png)
4.3.3 JS 面板配置
(1)新建动作
步骤:点击页面设置 >>点击页面加载完成时绑定动作 >>点击 didMount >> 点击确定
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1637135841513-380a1b87-ac96-4e7e-b76c-61fa2ecba16e.png)
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1637135883050-0d4a4a4b-716e-4e70-83c3-4d3193df34ef.png)
(2)JS 代码配置
步骤:点击 JS 面板 >> 在 didMount 函数书写 JS 代码
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1637136059693-063ed150-b0aa-48c0-b2ae-ba08fae7c6f7.png)
const a = { "数据底表访问量组件唯一标识": this.state.第五个数据源的名称.data[0].formData.数据底表访问量组件唯一标识+1}
const params={
formInstId:"数据底表提交的一条数据的数据ID",
updateFormDataJson:JSON.stringify(a)
}
this.dataSourceMap.dp4.load(params);
const b = window.loginUser.userName ;
this.$("展示访问人数文本组件的唯一标识").set("content", "您好," + b + "您是第" + this.state.第五个数据源的名称.data[0].formData.numberField_kw20bizi+"位,访问本页面的用户!")
数据底表数据的数据 ID 可以浏览器打开数据的详情页面
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1642404551003-c3d9be6e-4ad1-4543-9db4-7e3ca46e1e40.png)
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1642404595107-7ce93a08-9fae-4d56-8531-76c9683fdbc3.png)
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1637137101499-89b54456-5414-4576-9bfd-75ad1aa8af5b.png)
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1637137152773-1e187b6b-faac-49db-9085-68c15fa428d8.png)
5. 效果展示
效果如下面动图所示:
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/gif/1637138581204-be36b28c-e36c-4d36-b8ee-a21339aec393.gif)
6. 常见问题
6.1 为什么访问人数的统计只有管理员显示正常
是因为接口的权限是受表单权限组的,请去表单权限组配置查看权限,配置权限可以参考文档 权限组配置
宜搭为了更好的优化宜搭使用手册内容和质量,占用您3-5分钟时间,辛苦填写一下文档反馈问卷。文档反馈问卷是匿名提交,同时问卷信息仅用于宜搭文档体验反馈收集,感谢您对宜搭的支持!
--------------------获取宜搭最新信息,欢迎关注我们--------------------
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/jpeg/1632807780139-91cbcd43-8c42-44f3-9b2d-0d8b799ab7ea.jpeg)