申请时显示不同级别用户对应的审批人

前端代码

<el-col :span="12">
    <el-form-item label="审批人">
        <el-row :gutter="10">
            <el-col :span="12" v-if="auditUserOpts.length > 0">
                <el-tag type="primary">
                  <el-icon style="margin-right:5px;position:relative;top:2px;">
                    <User/>
                  </el-icon>
                  <span>{{ auditUserOpts[0].username }}</span>
                </el-tag>
             </el-col>
             <el-col :span="12" v-if="auditUserOpts.length > 1">
               <el-tag type="primary">
                 <el-icon style="margin-right:5px;position:relative;top:2px;">
                   <User/>
                 </el-icon>
                 <span>{{ auditUserOpts[1].username }}</span>
                 </el-tag>
            </el-col>
        </el-row>
    </el-form-item>
</el-col>

//定义数组用来保存新增申请表单中的审批人(含姓名)
const auditUserOpts = ref([]);
//定义数组用来保存新增申请单时,对应的审批人id,入库使用
const auditUserIdList = ref([]);
//定义加载审批人的方法
const loadAuditUser = ()=>{
  //获取当前登录用户的上级id
  let parentId = user.value.parentId;
  //根据父级id查询对应的领导信息
  axios.get(BASE_URL+'/v1/user/select/audit/'+parentId).then((response)=>{
    if(response.data.code==2000){
      auditUserOpts.value = response.data.data;
      //依次取出auditUserOpts中的每个审批人,获取审批人的id
      //并依次存入auditUserIdList数组中,在新增申请时一起发给后端
      for(let i = 0; i<auditUserOpts.value.length ;i++){
        auditUserIdList.value.push(auditUserOpts.value[i].id);
      }
    }
  })
}
onMounted(()=>{
  //因为当前申请人(登录人)的直属领导数据是固定的,所以只需要在页面加载时请求一次即可,无需重复请求
  loadAuditUser();
})

后端代码

UserController

@GetMapping("/select/audit/{parentId}")
public JsonResult selectAuditList(@PathVariable Long parentId){
    log.debug("查询审批人列表,parentId={}",parentId);
    List<UserVO> list = userService.selectAuditList(parentId);
    return JsonResult.ok(list);
}

UserService

List<UserVO> selectAuditList(Long parentId);

UserServiceImpl

@Override
public List<UserVO> selectAuditList(Long parentId) {
    log.debug("查询审批人业务:parentId={}",parentId);
    //1.准备一个空集合,用来保存查出来的多个审批人
    ArrayList<UserVO> userVOList = new ArrayList<>();
    //2.先根据传过来的上级id将直属领导查出来,并装到上方的空集合里
    UserVO auditUser1 = userMapper.selectById(parentId);
    userVOList.add(auditUser1);
    //3.如果有直属领导,且直属领导还有上级
    if(auditUser1 != null && auditUser1.getParentId() != null){
        //4.根据直属领导的上级id将上上级领导查出来,并装到上方的空集合里
        UserVO auditUser2 = userMapper.selectById(auditUser1.getParentId());
        userVOList.add(auditUser2);
    }
    //5.将准备好的审批人集合返回给controller
    return userVOList;
}

UserMapper

UserVO selectById(Long parentId);

UserMapper.xml

<select id="selectById" resultType="cn.tedu.ivos.user.pojo.vo.UserVO">
    SELECT id,username,password,email,phone,age,gender,create_time,update_time,status,level,parent_id
    FROM user WHERE id=#{id}
</select>

测试效果