eta_mini_crm_front/src/views/system/AuthSet.vue

<script setup>
import { apiSystemRole } from '@/api/system'


// 获取角色
const roleId = ref('')
const roleArr = ref([])
async function getRoleList() {
  const res = await apiSystemRole.roleAllList()
  if (res.Ret !== 200) return
  const list = res.Data.List || []
  roleArr.value = list
  roleId.value = list[0].SysRoleId
  handlRoleChange()
}
getRoleList()
const isAdmin=computed(()=>{
  if(!roleArr.value.length) return false
  return roleArr.value.filter(item=>item.SysRoleId===roleId.value)[0].SysRoleName==='admin'
})

function disabledTree(arr){
  arr.forEach(item => {
    item.Disabled=true
    if(item.Children){
      disabledTree(item.Children)
    }
  });
  return arr
}

const checkboxTree=ref(null)
const loading=ref(false)
const defaultCheckedKeys = ref([])
const authList = ref([])
async function getRoleAuthData(){
  loading.value=true
  const res=await apiSystemRole.roleAuthList({
    SysRoleId:roleId.value
  })
  loading.value=false
  if(res.Ret!==200) return
  const allArr=res.Data?.List||[]
  if(isAdmin.value){
    console.log(disabledTree(allArr));
    authList.value=disabledTree(allArr)
  }else{
    authList.value=allArr
  }
  
  
  const arr=res.Data?.ChoiceList||[]
  const hArr=res.Data?.HalfChoiceList||[]
  defaultCheckedKeys.value=arr.filter(i=>{
    return !hArr.includes(i)
  })
  checkboxTree.value.setCheckedKeys(defaultCheckedKeys.value)
}

function handlRoleChange(){
  getRoleAuthData()
}

function handleSave(){
  const keys=checkboxTree.value.getCheckedKeys()
  const halfKeys=checkboxTree.value.getHalfCheckedKeys()
  if(!keys.length&&!halfKeys.length){
    ElMessage.warning('请至少选择一个权限')
    return
  }
  const cArr=Array.from(new Set([...keys,...halfKeys]))
  apiSystemRole.roleAuthSet({
    SysRoleId:roleId.value,
    SysMenuIds:cArr,
    HalfMenuIds:halfKeys
  }).then(res=>{
    if(res.Ret!==200) return
    ElMessage.success('保存成功')
    handlRoleChange()
  })
}


</script>


<template>
  <div class="system-authset-page">
    <div class="shadow-box top-box">
      <div style="width: 300px; display: flex; align-items: center">
        <span style="flex-shrink: 0; margin-right: 20px">角色</span>
        <el-select v-model="roleId" placeholder="分配角色" @change="handlRoleChange">
          <el-option
            v-for="item in roleArr"
            :key="item.SysRoleId"
            :label="item.SysRoleName"
            :value="item.SysRoleId"
          >
          </el-option>
        </el-select>
      </div>
      <div v-if="!isAdmin">
        <el-button v-permission="'permission:cancel'" type="primary" plain @click="$router.back()">取消</el-button>
        <el-button v-permission="'permission:save'" type="primary" :disabled="loading" @click="handleSave">保存</el-button>
      </div>
    </div>
    <div class="shadow-box content-box" v-loading="loading" element-loading-text="loading...">
      <el-tree
        ref="checkboxTree"
        :data="authList"
        :props="{ label: 'Name', children: 'Children', disabled: 'Disabled' }"
        :default-expand-all="false"
        show-checkbox
        node-key="SysMenuId"
        :default-checked-keys="defaultCheckedKeys"
      >
      </el-tree>
    </div>
  </div>
</template>

<style lang="scss">
.system-authset-page{


.top-box {
  display: flex;
  justify-content: space-between;
}
.content-box {
  margin-top: 20px;
  .el-tree {
    border-top: 1px solid #e5e7ed;
    border-left: 1px solid #e5e7ed;
    border-right: 1px solid #e5e7ed;
    width: 98%;
    margin-bottom: 40px;

    .el-tree-node__label {
      margin: 10px;
    }

    .el-tree-node__content {
      min-width: 200px;
      width: 200px;
      white-space: normal;
      box-sizing: border-box;
    }

    .el-tree-node {
      .el-tree-node {
        .el-tree-node__children {
          width: 100%;
        }

        .el-tree-node {
          &:not(:first-child) {
            /* .el-tree-node__content{
                        border-right: 1px solid #E5E7ED;
                    } */
            border-top: 1px solid #e5e7ed;
          }

          .el-tree-node__content {
            border-right: 1px solid #e5e7ed;
          }
        }
      }
    }

    .el-tree-node__content {
      padding: 5px 10px !important;
      height: auto;

      .el-tree-node__expand-icon.el-icon-caret-right {
        //display: none;
      }
    }

    > .el-tree-node {
      padding: 0 !important;
      display: flex;
      border-bottom: 1px solid #e5e7ed;

      > .el-tree-node__children {
        width: 100%;

        > .el-tree-node {
          &:not(:first-child) {
            border-top: 1px solid #e5e7ed;
          }

          > .el-tree-node__content {
            border-left: 1px solid #e5e7ed;
            border-right: 1px solid #e5e7ed;
          }
        }
      }
    }

    .el-tree-node__children {
      display: flex;
      flex-direction: column;

      .el-tree-node {
        display: flex;
        flex: 1;
        padding: 0px !important;

        .el-tree-node__content {
          border-bottom: none;

          .custom-tree-node {
            height: 24px;
            display: flex;
            align-items: center;

            .tree-btn {
              margin-left: 10px;
              display: none;
            }

            .el-button {
              padding: 0px !important;
              border-radius: 4px;
              background: #363554;
              color: #ffffff;
            }
          }
        }

        .el-tree-node__children {
          .el-tree-node {
            &:not(:first-child) {
              .el-tree-node__content {
                //border-left: none;
              }
            }
          }
        }
      }
    }
  }
}
}
</style>