面对根据角色和单子状态如何有效的进行按钮权限的控制-Toy模板网

这篇具有很好参考价值的文章主要介绍了面对根据角色和单子状态如何有效的进行按钮权限的控制。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

面对根据角色和单子状态如何有效的进行按钮权限的控制,js,javascript

当阁下看到这个按钮权限控制时，该如何应对

按钮权限是根据工单流程状态进行的，当工单走到某个流程时就显示该表格中对应的状态，初看也就简简单单，仔细一看，逻辑还是很复杂，
首先这里得说一下背景，
1、账号是和角色挂钩，所谓的角色就是【管理员、科长、科秘】，而角色对应的就是按钮权限，不可能给账号设置权限，账号会很多，
所以，我们只能通过创建角色，然后在通过注册账号关联角色，一个角色下肯定能关联很多账号
2、对于工单，就是一个审批流，每做完一个节点就会往下面一个节点，直到流程结束，每个节点都会有状态，有发起人，有处理人，
登录账号可以获取到登录人的权限，有了这些就可以进行按钮的显示控制

问题1：举个🌰，对于【待分配】这个工单状态的申请撤回按钮进行解析

首先【管理员、客服人员、科长、科秘】是角色，是更具账号进行设置的，如果你的账号设置了这些角色，那这些角色对应的按钮权限，你的账号就能显示这些按钮，反之则不行
但两个特殊情况，发起人（创建人）和执行人（处理人）是不通过账号对应角色设置的权限进行按钮权限的控制，
比如，虽然我的账号设置了管理员的权限，但是我也是工单的发起人；在【待分配】这个节点，管理员他是没有申请撤回的按钮权限的，但是
我既是发起人又是管理员，那我就有申请撤回的按钮，可以进行申请撤回操作，像这种情况，阁下该如何设计程序，

问题2：举2个🌰对于【科室待接受】这个节点的申请撤回按钮进行解析

在【科室待接受】这个节点，你会发现每个人都有申请撤回的按钮，如果账号只是单独一个管理员，或者其他角色，那么就只会显示一个按钮，这个好解决，只要判断当前登录账号是否有申请撤回的按钮权限就行了，
但是当我既是管理员，又是工单的发起人，那如果工单在分配的时候又给回我自己，那是不是相当于，执行人也是我自己，那不是【发起人、管理员、执行人】都是我自己，
按照正常的设计，那是不是就会显示三个申请撤回的按钮，但这肯定不受我们想要的，既然都是同一个，那就只显示一个申请撤回的按钮，所以面对这种情况，该如何设计

问题3：有些按钮在多个节点要显示，比如【申请撤回、追加信息、催办】，像这种情况，你如何去处理，举个🌰

【追加信息】按钮，在【待分配】节点只有【客服人员、管理员】角色才有该按钮权限，所以权限必须添加到角色中去，但是当【待分配】节点完成后，到了【科室待接受】节点，
你会发现，【追加信息】的按钮只有发起人、【客服人员】才有了，之前的管理员没有了，那这种情况如何进行处理

对于以上三种情况，我们该如何进行逻辑设计

对应问题1：
- 首先我们肯定要先去判断当前工单是否是【待分配】节点：row.status==='ORDER_DFP'
- 然后判断首尾，就是先判断当前登录人是否是【发起人】和【执行人】，如果是则显示对应的按钮：row.createUserId===userInfo.userId
- 最后判断登录用户所属角色的按钮权限，由于【待分配】节点按钮不关【发起人】所以只需要判断权限就行了, 注：【auth】方法在后面会补上

<!--待分配 -->
<template v-if="row.status==='ORDER_DFP'">
  <template v-if="row.createUserId===userInfo.userId">
    <el-button  type="text" >催办</el-button>
    <el-button type="text" >申请撤回</el-button>
  </template>
  <!--像这些按钮就不需要根据是否是【发起人、执行人】来看需不需要显示，而直接根据按钮配置的code来进行判断就行了 -->
  <el-button type="text" v-if="auth('OrderInquire_EalingPeople')">分配协同科室</el-button>
  <el-button type="text" v-if="auth('appendInfo-DFP')">追加信息</el-button>
  <el-button type="text" v-if="auth('execute')" >移交执行科室</el-button>
  <el-button type="text" v-if="auth('OrderInquire_TableCancel')" >取消
  </el-button>
</template>

对应问题2：
- 处理方式和问题1的解决是一样的,首先我们肯定要先去判断当前工单是否是【科室待接受】节点：row.status==='ORDER_DJS'
- 然后判断首尾，就是先判断当前登录人是否是【发起人】和【执行人】，如果是则显示对应的按钮：row.createUserId===userInfo.userId
- 在这个节点就既需要判断按钮权限同时还得判断是否是【发起人、执行人】，当登录人是发起人且又是管理员的时候就不应该出现按钮，所以在auth方法里面加了一层判断，如果登录人和发起人相等，则返回false,否则，就去判断权限，有权限则返回true，如此就只会显示一个按钮，不会重复出现

<!-- 科室待接受-->
<template v-if="row.status==='ORDER_DJS'">
  <!-- 当登录人是发起人的时候显示的按钮-->
  <template v-if="row.createUserId===userInfo.userId">
    <el-button type="text">催办</el-button>
    <el-button type="text" >申请撤回</el-button>
    <el-button type="text">追加信息</el-button>
  </template>
  <!-- 当登录人是执行人的时候显示的按钮-->
  <template v-if="row.dealUserId===userInfo.userId">
    <el-button type="text">接受协同</el-button>
    <el-button type="text" >拒绝协同</el-button>
  </template>
  <!-- 当登录人是发起人且又是管理员的时候就不应该出现按钮，所以在auth方法里面加了一层判断，如果登录人和发起人相等，则返回false,否则，就去判断权限，有权限则返回true-->
  <el-button type="text" v-if="auth('appendInfo-DJS',row.createUserId===userInfo.userId)">追加信息</el-button>
  <el-button type="text" v-if="auth('withdraw-DJD',row.createUserId===userInfo.userId)">申请撤回</el-button>
  <!-- 当登录人是执行人且又是管理员的时候就不应该出现按钮，所以在auth方法里面加了一层判断，如果登录人和执行人相等，则返回false,否则，就去判断权限，有权限则返回true-->
  <el-button type="text" v-if="auth('receivingOrders',row.dealUserId===userInfo.userId)">接受协同</el-button>
  <el-button type="text" v-if="auth('refuse_collaboration',row.dealUserId===userInfo.userId)">拒绝协同</el-button>

</template>

对应问题3 ：大佬们应该能从上面两种示例中发现两个【追加信息】的权限码不同，所以这个问题的处理方式我是在对按钮添加权限的时候，对每个状态下的按钮都加一个权限码，比如：待分配的【追加信息】权限码是【appendInfo-DFP】，而科室待接受的权限码是【appendInfo-DJS】
补充auth方法：文章来源地址https://www.toymoban.com/news/detail-805891.html

 /**
 * @param code {String} 权限码
 * @param hasAuth {Boolean} 判断当前登录人是否是执行或者发起人，是则不需要显示按钮了，已经有了，不需要否则会重复显示
 */
auth(code, hasAuth = false){
    //如果 登录人是否是执行或者发起人 则表示该按钮已经显示了，不需要重复出现，否则就看该登录人是否有该按钮的权限码
    if (hasAuth) return false
    //直接看是否有按钮权限
    const str = `OrderInquire.`
    if (code instanceof Array) {
        let authMap = {}
        code.forEach(item => {
            authMap[item] = str + item
        })
        return this.$authCodeTool.hasSomeCode(code.map(c => authMap[c]));
    }
    //$hasAuthCode 这个方法是我们内部自己处理登录人权限的方法
    return this.$hasAuthCode(str + code)
}

所以处理完以上的问题那么表格的按钮则都可以用以上方法的三步解决了 ,完整的代码如下


<el-button v-if="auth('orderDetail')" type="text">详情</el-button>
<el-button type="text" v-if="['ORDER_DRAFT'].includes(row.status)&&row.createUserId===userInfo.userId">编辑草稿</el-button>
<el-button type="text" v-if="['ORDER_DRAFT'].includes(row.status)&&(auth('deleteDraft')||row.createUserId===userInfo.userId)">删除
</el-button>
<!--科室待接受-->
<template v-if="row.status==='ORDER_DJS'">
  <template v-if="row.createUserId===userInfo.userId">
    <el-button type="text">催办</el-button>
    <el-button type="text">申请撤回</el-button>
    <el-button type="text">追加信息
    </el-button>
  </template>
  <template v-if="row.dealUserId===userInfo.userId">
    <el-button type="text">接受协同</el-button>
    <el-button type="text">拒绝协同</el-button>
  </template>
  <el-button type="text" v-if="auth('receivingOrders',row.dealUserId===userInfo.userId)">接受协同</el-button>
  <el-button type="text" v-if="auth('refuse_collaboration',row.dealUserId===userInfo.userId)">拒绝协同</el-button>
  <el-button type="text" v-if="auth('appendInfo-DJS',row.createUserId===userInfo.userId)">追加信息</el-button>
  <el-button type="text" v-if="auth('withdraw-DJD',row.createUserId===userInfo.userId)">申请撤回</el-button>
</template>
<!--待分配-->
<template v-if="row.status==='ORDER_DFP'">
  <template v-if="row.createUserId===userInfo.userId">
    <el-button type="text">催办</el-button>
    <el-button type="text">申请撤回</el-button>
  </template>
  <el-button type="text" v-if="auth('OrderInquire_EalingPeople')">分配协同科室</el-button>
  <el-button type="text" v-if="auth('appendInfo-DFP')">追加信息</el-button>
  <el-button type="text" v-if="auth('execute')">移交执行科室</el-button>
  <el-button type="text" v-if="auth('OrderInquire_TableCancel')">取消</el-button>
</template>
<!--处理中-->
<template v-if="row.status==='ORDER_CLZ'">
  <template v-if="row.createUserId===userInfo.userId">
    <el-button v-if="['ORDER_CLZ'].includes(row.status)" type="text">催办</el-button>
    <el-button type="text">追加信息</el-button>
    <el-button type="text">申请撤回</el-button>
  </template>

  <template v-if="row.dealUserId===userInfo.userId">
    <el-button type="text">暂停</el-button>
    <el-button type="text">重启</el-button>
    <el-button type="text">完成</el-button>
  </template>
  <el-button type="text" v-if="auth('appendInfo-CLZ',row.createUserId===userInfo.userId)">追加信息</el-button>
  <el-button type="text" v-if="auth('withdraw-CLZ',row.createUserId===userInfo.userId)">申请撤回</el-button>
  <el-button type="text" v-if="auth('multiCooperation')">协同分配</el-button>
  <el-button type="text" v-if="auth('returnCollaboration')">退回协同</el-button>
</template>
<!--多人协作中-->
<template v-if="row.status==='ORDER_COOPER_IN'">
  <template v-if="row.createUserId===userInfo.userId">
    <el-button type="text">追加信息</el-button>
    <el-button type="text">申请撤回</el-button>
  </template>
  <el-button v-if="auth('urging-XZZ')" type="text">催办</el-button>
  <el-button type="text" v-if="auth('appendInfo-XZZ',row.createUserId===userInfo.userId)">追加信息</el-button>
  <el-button type="text" v-if="auth('withdraw-XZZ',row.createUserId===userInfo.userId)">申请撤回</el-button>
  <el-button type="text" v-if="auth('multiCooperation')">协同分配</el-button>
</template>

这是小弟能小能想到的处理方法，应该有更好的方法，请大佬指出，3Q

首先判断工单流程节点
判断当前登录人是否是【发起人、执行人】，然后把对应发起人和执行人要显示的按钮显示
根据方法auth进行处理，如果当前登陆人是【发起人或者执行人】，则不显示按钮否则进行权限码验证显示，当然该按钮是有可能同时出现的情况，如果只是角色权限需要显示，而发起人和执行人不显示，只需要验证权限码就行

到了这里，关于面对根据角色和单子状态如何有效的进行按钮权限的控制的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！