报表插件（ReportSheet）实现员工在线考勤表
本帖最后由 Ellia.Duan 于 2024-11-28 11:55 编辑ReportSheet是SpreadJS 17版本推出的报表模块，可以快速完成报表和数据录入功能的搭建，我们通过一个动图来了解下
通过上面的动图，发现插入一个报表是一个非常简单的事情。似乎拖拖拽拽就实现了一个电子表格。
接下来，我们想实现一个员工在线考勤表。先来看一下长什么样子：
根据上图，我们可以解析，需要的数据，以及模板。
一、数据
观察上图，有员工信息，有天数信息，还有缺勤信息，我们设计一个数据结构
{
"Month": String,
"Day": Number,
"Name":String,
"AbsenceType": Enum (null| "V" | "P" | "S")
}接下来创建数据
我们用nodejs模拟一个后端请求
const express = require("express");
var cors = require("cors");
var bodyParser = require('body-parser');
const app = express();
constEAS_data = require('./EAS.json') ;
app.use(cors());
app.use(bodyParser.json())
app.get("/getEAS", (req, res) => {
res.json(EAS_data);
});
app.listen("3000", () => {
console.log("=========服务启动了，在3000端口=========");
});启动NodeJS服务后，访问http://localhost:3000/getEAS ，可以得到一个数组对象
数据准备好之后，我们在SpreadJS中添加数据
附件：
二、数据源
打开SpreadJS官网的designer页面，依次点击”数据“，”数据源“，点击”添加表“
修改tableName以及读取的url地址，如下图所示，最后点击”确认“
此时，点击”插入“，”报表“ ，可以看到左侧的数据源列表已经存在了EAS表
展开EAS表，可以看到字段信息
接下来我们设计模板
三、模板
我们先做一个简单的模板
步骤如下
为month ，day字段设置横纵扩展，name字段设置纵向扩展（默认），AbsenceType字段设置无扩展。
简单的模板如下图所示
点击”报表设计“”预览“ 可以看到简单的电子表格
是不是大概功能已经实现啦。
接下里我们在模板上修改样式，这里就不详细介绍了，提供一个样式样式，您在您的designer导入即可
附件：
四、最后
最后我们看一下终版的模板吧
点击”预览“，结果如下
很方便统计了每个员工在3月的请假信息。
并且还支持导出到Excel ,如下动图所示：
页:
[1]