Ellia.Duan 发表于 2024-7-29 15:30:32

报表插件(ReportSheet)实现权限控制

本帖最后由 Ellia.Duan 于 2024-11-28 11:52 编辑

在上篇文章中,我们介绍了如何利用ReportSheet实现员工在线考勤表。

在此基础上,我们添加一些设置,使不同的用户有不同的权限。在查看报表时,可以分权限进行数据填报。

在开始前,我们先回顾下,SpreadJS如何进行权限控制,如果对这部分内容已经熟悉,请直接看第二部分。
一、表单保护
在SpreadJS中,可以利用表单保护将整个表单保护起来,代码如下:

sheet.options.isProtected = true
//或者是
sheet.protect()
但是整个表单保护后,没有办法起到权限控制的目的。
接下来,我们了解一个属性是locked属性 ,它可以作用在cell上,也可以是一片区域range ,或者是style上。我们分别介绍:
sheet.getCell(0,0).locked(false)通过上述代码,我们将A1单元格设置了locked属性为false ,即不锁定。
如果此时加上表单保护的代码,即

sheet.options.isProtected = true
sheet.getCell(0,0).locked(false)这两行代码起到的作用是:在表单保护基础上,仅A1单元格可以编辑,其他单元格不可以编辑。


那么,有的用户有疑问,如果我的大部分单元格都可以编辑,仅仅是一小部分单元格不允许编辑呢?这个也好办。
大家知道,在SpreadJS中如果row=-1表示所有行,column=-1表示所有列,
如果写了下面的代码:
sheet.getCell(-1,-1)则表示获取了整个sheet的所有区域。

sheet.getCell(-1,-1).locked(false)
sheet.getRange(0,0,1,5).locked(true)
sheet.protect()上述三行代码表示,仅第一行前五列不编辑,剩余单元格可以正常编辑。



通过上述几行代码,大家是不是已经对表单保护有了一个基本了解,通过locked属性配合表单保护就可以达到控制单元格是否编辑的效果。
上文还特意到了,我们可以通过style设置locked ,我们来看看是如何实现的吧:
在SpreadJS中,有一个默认样式,可以通过setDefaultStyle设置默认样式。
所以,我们可以将默认样式的locked属性设置为false ,就可以达到全部单元格解锁的目的了,如下代码:
   var style = new GC.Spread.Sheets.Style();
      style.locked = false;
      sheet.setDefaultStyle(style)也可以设置一些单元格可以编辑:
let lockedStyle = new GC.Spread.Sheets.Style()
      lockedStyle.locked = true;
      lockedStyle.backColor = 'white'
      sheet.getRange(-1,0,-1,5).setStyle(lockedStyle)最后加上表单保护
sheet.options.isProtected = true
最后我们进行下总结,在SpreadJS中,可以设置整个表单保护,也可以设置大部分单元格可以编辑,也可以设置小部分单元格可以编辑,大部分单元格不可以编辑。核心是将不可编辑的单元格的locked属性置为true ,可以编辑的单元格的locked属性置为false 。

二、报表权限设置
我们将上一篇文章中,文章末尾给出的样式模板文件,在Designer中导入eas.sjs文件,以及启动服务,运行nodeJS
eas.js 启动后,浏览器访问http://localhost:3000/getEas可以看到有数据返回:

此时,我们在Designer中点击预览,发现可以看到数据。

在一些场景中,员工只能查看,不能修改,这个时候我们需要设置表单保护,

当然,也可以通过代码方式设置:
let sheet = spread.getActiveSheetTab()
let templateSheet = sheet.getTemplate()
templateSheet.protect()

再来升级一下难度,如果想对日期和请假类型设置锁定,则在表单保护前,点击corner进行全选,右键设置单元格格式,对所有的单元格进行解锁。


然后鼠标选择C5,C6单元格,右键设置单元格格式,对单元格进行锁定。
最后再设置表单保护即可,
此时预览时,发现请假类型及日期无法修改。
当然,也可以通过代码完成:
templateSheet.getCell(-1,-1).locked(false)
templateSheet.getRange(4,2,2,1).locked(true)
templateSheet.protect()

以上,就完成了报表的权限设置。

注意:需要对templateSheet进行设置。
页: [1]
查看完整版本: 报表插件(ReportSheet)实现权限控制