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

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

按钮权限是根据工单流程状态进行的，当工单走到某个流程时就显示该表格中对应的状态，初看也就简简单单，仔细一看，逻辑还是很复杂，
首先这里得说一下背景，
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方法：

 /**
 * @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

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