ShutongInterconnectedChemicalCloudPlatform/src/views/doc/spacePermission.vue

<script lang="ts" setup>
import {
  resetSpaceMatterPermit,
  getSpaceMemberList,
  addSpaceManager,
  updateSpaceMetterPermit,
} from '@/api/hr/people/share_ctrol'

import { ElDialog, ElMessageBox,ElStep,TreeInstance} from 'element-plus';
import { useOrgMemberStore } from "@/store/modules/orgMember";
const props = withDefaults(defineProps<{
  uid:string,   //当前用户的uuid
  uuid:string,  //文档的uuid
  suid:string,  //空间的创建者
  spaceid:string, //空间uuid
  closeFunc:(refresh?:boolean)=>void,  //父级只需销毁组件
}>(),{})

const orgMembers = useOrgMemberStore()
const spacePermit=ref<{id:number,data:string,matterUid:string}>({}) //权限
const treeRef=ref<TreeInstance>() //tree组件的引用，为了实现初始选中状态
const managerMode=ref(false)
const managers=ref<string[]>([])

let resultPermits: Record<string, number> = {};

interface Tree {
  id: string
  label:string
  parentId?:string
  indeterminate?:boolean,
  radio?:number[];
  children?: Tree[]
  ismanager?:boolean,
}

const dataSource = ref<Tree[]>([])

//权限组件保存
async function onSavePermChange(){
  resultPermits={}

  // 管理员设置
  if (managerMode.value){
    managers.value=[] //先清空
    dataSource.value.forEach(item=>{
      if(item.ismanager){
        managers.value.push("p0"+item.id)
      }
      
      if(item.children) collectManager(item)
    })

    await addSpaceManager(btoa(props.uid),{
      space:props.spaceid,
      mangers:managers.value.join("|")
    }).then(resp=>{
      console.log(resp)
    })
    props.closeFunc()
    return
  }

  dataSource.value.forEach(item=>{
    if(item.radio&&item.radio.length>0){
      if(item.indeterminate) {
        item.radio[0]+=10
      }
      resultPermits[item.id]=item.radio[0]
    }
    
    if(item.children) collectNodePermits(item)
  })

  spacePermit.value.data=JSON.stringify(resultPermits)

  updateSpaceMetterPermit(btoa(props.uid),{
    space:props.spaceid,
    matter:props.uuid,
    permits:spacePermit.value
  }).then(resp=>{
    console.log(resp)
  })
  props.closeFunc()
}

function collectManager(node:Tree){
  node.children?.forEach(ele => {
     if(ele.ismanager){
        managers.value.push("p0"+ele.id)
      }
      
      if(ele.children) collectManager(ele)
  });
}

//去遍历查找特殊设置的节点，并保存
function collectNodePermits(node:Tree){
  node.children?.forEach(ele => {
    if(ele.radio&&ele.radio.length>0){
       if(ele.indeterminate) {
        ele.radio[0]+=10
      }
      resultPermits[ele.id]=ele.radio[0]
    }
   
    if(ele.children){
      collectNodePermits(ele)
    }
  });
}


//递归修改子级元素
function onGroupValueChange(node:Tree, val:number[]){
  if(node.indeterminate) node.indeterminate=false;
  node.children?.forEach(ele => {
    ele.radio=val
    if(ele.children){
      onGroupValueChange(ele,val)
    }
  });
  if(node.parentId){
    updateParentNode(node)
  }
}

//递归更新父级
function updateParentNode(node:Tree){
  if(node.parentId){
    
    const pnode = treeRef.value?.getNode(node.parentId);
    if(pnode){
      const tdata=pnode.data as Tree 
      if (tdata.children?.every(ele=>{
        if(ele.indeterminate) return !ele.indeterminate;//注意这里有个取反计算

        if(ele.radio?.length==0) return ele.radio.length==tdata.radio?.length;
        return ele.radio?.length==tdata.radio?.length && ele.radio[0]==tdata.radio[0]
      })) {
        tdata.indeterminate=false
      }else{
        tdata.indeterminate=true
      }

      updateParentNode(tdata)
    }
    
  }
}


//重置当前文档权限
function delMatterPermit(matter_uuid:string){
  resetSpaceMatterPermit(btoa(props.uid),{
    space:props.spaceid,
    matter:matter_uuid,
  }).then(()=>{
    refreshSpaceData()
  })
}

function onShowManagers(){
  managers.value.forEach(item=>{
    const node = treeRef.value?.getNode(item.replace("p0",""));
    if(node && node.data){
        node.data.ismanager=true
    }
  })
}

function refreshSpaceData(){
    getSpaceMemberList(
      btoa(props.uid),
      {space:props.spaceid,matter:props.uuid}
    ).then(resp=>{
      resp.data?.dprts?.forEach(item=>{    
        for(let data of dataSource.value){
          if (data.id==item) return;
          if (checkNode(item,data)) return;
        }
  
        addNode(item,orgMembers.dataTree)
      });

      resp.data?.members?.forEach(item=>{
        const mid=item.replace("p0","")
        for(let data of dataSource.value){
          if(checkNode(mid,data)) return;
        }
         
        dataSource.value.push({id:mid,label:orgMembers.listMap[mid],radio:[2]})
      });
      
      managers.value=resp.data?.managers.split("|")
      spacePermit.value.id=resp.data?.permits.ID
      spacePermit.value.matterUid=resp.data?.permits.MatterUuid
      spacePermit.value.data=resp.data.permits.data!="" ? resp.data.permits.data : "{}"


      nextTick(() => {
        const permitJson = JSON.parse(spacePermit.value.data) //object
        Object.keys(permitJson).forEach(key=>{
          const node = treeRef.value?.getNode(key);
          if(node && node.data){
            if(permitJson[key]>10){
              node.data.radio = [permitJson[key]%10]
              node.data.indeterminate=true  
            }else{
              node.data.radio = [permitJson[key]]
            }
          }
        })
      });
      
  })
}

function addNode(key:string,node:Tree){
  node.children?.forEach(ele => {
    if(ele.id==key){
      const eleClone=structuredClone(toRaw(ele)) //这里ele是Proxy，无法clone，所以要toRaw拿到原始object
      eleClone.radio=[2]
      eleClone.parentId=ele.parentId
      dataSource.value.push(eleClone) //{id:ele.id,label:ele.label,radio:2,stage:level,children:ele.children}
      return
    }
    if(ele.children){
      addNode(key,ele)
    }
  });
}

function checkNode(key:string,node:Tree):boolean{
  for (const child of node.children||[]) {
    if(child.id==key){
      return true
    }
    if(child.children){
      //这里不能直接return，因为return后，就中断了for循环，但是true的情况下可以直接return
      if(checkNode(key,child)) return true; 
    }
  }

  return false;
}


onMounted(()=>{
  refreshSpaceData()
})

</script>

<template>
  <el-dialog :model-value="true" :style="{'max-height': '750px'}" v-on:close="closeFunc()">
    <template #header>
      <el-button link @click="managerMode=false;">文档权限管理</el-button>
      <el-button v-if="spacePermit.matterUid==spaceid&&uid==suid" link @click="managerMode=true; onShowManagers()">管理员管理</el-button>
    </template>
   
    <div v-if="uuid==spacePermit.matterUid&&uuid!=spaceid" class="tips">当前文档存在定制权限，与空间权限不一致。<el-button size="small" @click="delMatterPermit(uuid)">恢复</el-button></div>
    <div class="tree-node" style="width:93%;font-weight: bold;position: sticky;">
      <span style="width: 200px;text-align: center;">名称</span>
      <div v-if="managerMode" class="buttons">
        <span>管理员</span>
      </div>
      <div v-else class="buttons">
        <span>禁止</span>
        <span>仅预览</span>
        <span>可下载</span>
        <span>上传下载</span>
        <span>编辑</span>
      </div>
    </div>
    <div class="tablelist">
      <el-tree
          ref="treeRef"
          :data="dataSource"
          node-key="id"
          default-expand-all
          :expand-on-click-node="false"
        >
        <template #default="{ node, data }">
          <div class="tree-node">
            <span>{{ node.label }}</span>
            
            <div v-if="managerMode" class="buttons">
              <el-checkbox v-if="!data.children" v-model="data.ismanager" />
            </div>
            <div  v-else class="buttons"> 
              <el-checkbox-group :min="0" :max="1"  v-model="data.radio" @change="(val)=>onGroupValueChange(data,val)">
                <el-checkbox key="forbid" :indeterminate="data.indeterminate" :value="0" />
                <el-checkbox key="view" :indeterminate="data.indeterminate" :value="1" />
                <el-checkbox key="download" :indeterminate="data.indeterminate" :value="2" />
                <el-checkbox key="updown" :indeterminate="data.indeterminate" :value="3" />
                <el-checkbox key="edit" :indeterminate="data.indeterminate" :value="4" />
              </el-checkbox-group>
            </div>
          </div>
        </template>
      </el-tree>
    </div>
    
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeFunc()">取消</el-button>
        <el-button type="primary" @click="onSavePermChange">保存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
  .tablelist{
    width: 94%;
    height: 565px;
    overflow-y: scroll
  }
  .tips{
    display: flex;
    align-items: center;
    margin: 5px;
    padding: 5px 32px;
    background-color: #d7d1ca;
  }
  .tree-node{
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
    .buttons{
      margin: 0 50px 0 auto;
      span{
        width: 26px;
        margin: 0 7px;
      }
    }
  }
  .el-checkbox{
    width: 26px;
  }

  .el-tree{
    /* 让整个弹出窗口位置更高一些*/
    --el-tree-node-content-height:33px; 
  }
</style>