找回密码
 立即注册

QQ登录

只需一步,快速开始

Ellia.Duan SpreadJS 开发认证

超级版主

68

主题

4680

帖子

7242

积分

超级版主

Rank: 8Rank: 8

积分
7242

SpreadJS 认证SpreadJS 高级认证

Ellia.Duan SpreadJS 开发认证
超级版主   /  发表于:2024-7-29 15:30  /   查看:215  /  回复:0
本帖最后由 Ellia.Duan 于 2024-7-29 15:32 编辑

在上篇文章中,我们介绍了如何利用ReportSheet实现员工在线考勤表。
image.png821777038.png
在此基础上,我们添加一些设置,使不同的用户有不同的权限。在查看报表时,可以分权限进行数据填报。

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

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

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


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

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



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

最后我们进行下总结,在SpreadJS中,可以设置整个表单保护,也可以设置大部分单元格可以编辑,也可以设置小部分单元格可以编辑,大部分单元格不可以编辑。核心是将不可编辑的单元格的locked属性置为true ,可以编辑的单元格的locked属性置为false 。

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

在一些场景中,员工只能查看,不能修改,这个时候我们需要设置表单保护,
image.png548264159.png
当然,也可以通过代码方式设置:
  1. let sheet = spread.getActiveSheetTab()
  2. let templateSheet = sheet.getTemplate()
  3. templateSheet.protect()
复制代码


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

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


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

注意:需要对templateSheet进行设置。

0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部