使用Tag实现表单的权限控制

问题：如何通过tag功能，实现表单的权限功能

背景：

在数据填报场景中，常常需求进行一些权限控制，如不同角色看到的内容不同或者可编辑单元格不同。而SpreadJS中的标签功能本身可用来记录一些隐藏的信息。利用这个机制我们可以配合表单保护的相关功能来实现表单本身的权限控制。

解决方案：

首先，在本设计中，采用了表单级别的tag来存储整个的表单中的权限设置。虽然存储的操作使用单元格的tag也可以完成。但这么做相较于单元格的tag更易存储和查找。在SpreadJS中，想要获取表单上存储的所有tag是需要遍历才能完成的。通过整体的tag存储可以节省来回遍历的操作。

之后，当不同权限登录表单之后，根据sheet上tag的记载和简单的判断，来设置单元格的锁定及表单保护。如后续在需要整体存储或者获取权限映射时，也可以直接通过sheet.tag方法来获取。

下面我们通过一个实际的例子来进行演示：

本实例将完成一个员工个人评价信息表，该信息表会有两种权限，个人及上级管理人员。个人只能填自我的评价相关的部分。而上级主管也只能填主管对个人评价的部分。

首先，我们先设计好整个的填报页面，代码如下所示：

sheet.suspendPaint();
sheet.setColumnCount(50);
sheet.setValue(2,7,"员工个人评价信息表");
sheet.addSpan(2,7,2,5);
sheet.getCell(2,7).hAlign(GC.Spread.Sheets.HorizontalAlign.center).font("bold 25px 微软雅黑");
sheet.getCell(5,1).value("员工自评:").font("13px 微软雅黑");
sheet.setValue(6,1,"I am good.");
sheet.addSpan(5,1,1,2);
sheet.addSpan(6,1,19,8);
sheet.getCell(5,10).value("上级评价:").font("13px 微软雅黑");
sheet.addSpan(5,10,1,2);
sheet.setValue(6,10,"You are good.");
sheet.addSpan(6,10,19,8);
sheet.getCell(26,1).value("员工自我能力评价:").font("13px 微软雅黑");
sheet.addSpan(26,1,1,2);
sheet.setValue(27,1,"I am a good man.");
sheet.addSpan(27,1,19,8);
sheet.getCell(26,10).value("上级对员工能力评价:").font("13px 微软雅黑");
sheet.addSpan(26,10,1,2);
sheet.setValue(27,10,"You are a good man.");
sheet.addSpan(27,10,19,8);
sheet.resumePaint();

此处的设计也可以通过设计器来快速完成。

接下来，将整个权限的控制映射设置在tag上，左侧的内容是员工可以填报的，右侧的内容是上级主管可以填报的。两者的在tag中用不同字段进行区分。每一个记录中将记录单元格所在的row，col索引，以便精确定位需要解除锁定的单元格。

var auth = {
    employee:[{
            row:6,
            col:1
        },{
            row:27,
            col:1
        }
    ],
    manager:[{
            row:6,
            col:10
        },{
           row:27,
           col:10
        }
    ],
                                
}
sheet.tag(auth);

之后实例中通过点击按钮来控制权限的切换，并在点击按钮的事件中来查找对应的权限并设置解除对应单元格的锁定。最终整体表单设置表单保护。

$("#employee").click(function(){
    sheet.reset();
    initModel(sheet);
    setAuth(sheet,"employee");
});
                        
$("#manager").click(function(){
    sheet.reset();
    initModel(sheet);
    setAuth(sheet,"manager");
});

function setAuth(sheet,type){
    var auth = sheet.tag();
    var authArr = auth[type];
    for(var i=0;i<authArr.length;i++){
        sheet.getCell(authArr[i].row,authArr[i].col).locked(false);
    }
    sheet.options.isProtected = true;
}

实例可以参考此链接的附件:

作者: Clark.Pan | 审核：Clark.Pan | 更新时间：2023.12.03