报表插件（ReportSheet）实现员工在线考勤表

ReportSheet是SpreadJS 17版本推出的报表模块，可以快速完成报表和数据录入功能的搭建，我们通过一个动图来了解下

通过上面的动图，发现插入一个报表是一个非常简单的事情。似乎拖拖拽拽就实现了一个电子表格。
接下来，我们想实现一个员工在线考勤表。先来看一下长什么样子：

根据上图，我们可以解析，需要的数据，以及模板。


一、数据
观察上图，有员工信息，有天数信息，还有缺勤信息，我们设计一个数据结构

1. {
   
2.     "Month": String,
   
3.     "Day": Number,
   
4.     "Name":String,
   
5.     "AbsenceType": Enum (null| "V" | "P" | "S")
   
6. }

复制代码

接下来创建数据
EAS.json (16.74 KB, 下载次数: 394)

2024-4-18 10:03 上传

点击文件名下载附件
我们用nodejs模拟一个后端请求

1. const express = require("express");
   
2. var cors = require("cors");
   
3. var bodyParser = require('body-parser');
   
4. const app = express();
   
5. 
   
6. const  EAS_data    = require('./EAS.json') ;
   
7. app.use(cors());
   
8. app.use(bodyParser.json())
   
9. 
   
10. 
    
11. app.get("/getEAS", (req, res) => {
    
12.     res.json(EAS_data);
    
13. });
    
14. 
    
15. app.listen("3000", () => {
    
16.     console.log("=========服务启动了，在3000端口=========");
    
17. });

复制代码

启动NodeJS服务后，访问http://localhost:3000/getEAS ，可以得到一个数组对象

数据准备好之后，我们在SpreadJS中添加数据

附件： server.zip (1.64 KB, 下载次数: 135)

2024-7-29 14:40 上传

点击文件名下载附件

二、数据源
打开SpreadJS官网的designer页面，依次点击”数据“，”数据源“，点击”添加表“

修改tableName以及读取的url地址，如下图所示，最后点击”确认“

此时，点击”插入“，”报表“ ，可以看到左侧的数据源列表已经存在了EAS表

展开EAS表，可以看到字段信息

接下来我们设计模板


三、模板
我们先做一个简单的模板
步骤如下

为month ，day字段设置横纵扩展，name字段设置纵向扩展（默认），AbsenceType字段设置无扩展。
简单的模板如下图所示
点击”报表设计“”预览“ 可以看到简单的电子表格

是不是大概功能已经实现啦。
接下里我们在模板上修改样式，这里就不详细介绍了，提供一个样式样式，您在您的designer导入即可
附件：
eas (1).sjs (3.86 KB, 下载次数: 417)

2024-4-18 13:49 上传

点击文件名下载附件


四、最后
最后我们看一下终版的模板吧

点击”预览“，结果如下

很方便统计了每个员工在3月的请假信息。
并且还支持导出到Excel ,如下动图所示：