云盘：添加权限控制界面

src/views/doc/index.vue

@@ -6,7 +6,9 @@ import BottomPage from '@/views/common/bottom/index.vue'
 import { matterInfo} from "@/api/doc/type"
 import { getMySpaces,doCreateSpace} from "@/api/doc/index"
 import SvgIcon from "@/components/svgIcon/index.vue";
-import { doDelSpace,spaceMatterRename} from "@/api/doc/space"
+import { doDelSpace,spaceMatterRename,doAccessManage} from "@/api/doc/space"
+import sharePermission from './sharePermission.vue';
+import spacePermission from './spacePermission.vue';
 import { h } from 'vue'
 import {
   Delete,
@@ -24,7 +26,7 @@ const currentHoverRow=ref<matterInfo>({}) //table 行的按钮控制
 const Departs = computed(() => {
     return `${'p0'+userStore.userInfoCont.userId},${userStore.userInfoCont.company},${userStore.userInfoCont.department},${userStore.userInfoCont.organization}`
 })
-
+const dynamicVNode = ref<VNode | null>(null) //permission 组件的父组件
 const CutLevelPermit=ref(0)
 
 function onSelectSpace(data:matterInfo,recycling?:boolean){
@@ -96,30 +98,30 @@ function onSpaceMatterRename(row:matterInfo){
   })
 }
 
-// //空间成员管理
-// function onAccessManage(){
-//   dynamicVNode.value = h(sharePermission, {
-//     uid: uid,
-//     uuid: "",
-//     spaceid:SpaceID.value.uuid, //
-//     confirmFunc: (_list: string[],_infos:string[]) => {
-//       // 组织权限数据
-//       //_len=_list.length
-//       let permited = btoa(_list.join("|"))
-//       doAccessManage(uid,{
-//         "space":SpaceID.value.uuid,
-//         "roles":permited, 
-//         "owner":SpaceID.value.userUuid,
-//         "len":_list.length
-//       }).then(()=>{
+//空间成员管理
+function onAccessManage(row:matterInfo){
+  dynamicVNode.value = h(sharePermission, {
+    uid: uid,
+    uuid: "",
+    spaceid:row.uuid, //
+    confirmFunc: (_list: string[],_infos:string[]) => {
+      // 组织权限数据
+      //_len=_list.length
+      let permited = btoa(_list.join("|"))
+      doAccessManage(uid,{
+        "space":row.uuid,
+        "roles":permited, 
+        "owner":row.userUuid,
+        "len":_list.length
+      }).then(()=>{
         
-//       })
-//     },
-//     closeFunc: () => {
-//       dynamicVNode.value=null
-//     }
-//   })
-// }
+      })
+    },
+    closeFunc: () => {
+      dynamicVNode.value=null
+    }
+  })
+}
 
 //删除空间
 function onDeleteSpace(row:matterInfo){
@@ -138,13 +140,13 @@ function onDeleteSpace(row:matterInfo){
 
 //空间权限控制管理
 function onSpacePManage(row:matterInfo){
-  // dynamicVNode.value=h(spacePermission,{
-  //   uid:rawUid,   //当前用户的uuid
-  //   uuid:row.uuid,  //文档的uuid
-  //   suid:SpaceID.value.userUuid,
-  //   spaceid:SpaceID.value.uuid, //空间uuid
-  //   closeFunc:()=>dynamicVNode.value=null
-  // })
+  dynamicVNode.value=h(spacePermission,{
+    uid:rawUid,   //当前用户的uuid
+    uuid:row.uuid,  //文档的uuid
+    suid:row.userUuid,
+    spaceid:row.uuid, //空间uuid
+    closeFunc:()=>dynamicVNode.value=null
+  })
 }
 //------------------------------------------------------
 
@@ -222,6 +224,10 @@ onMounted(()=>{
       <div style="margin: 20px 0; display: flex;align-items:center;" @click="onNewSpace"><Plus style="width: 18px; height: 18px;"></Plus> 创建共享空间</div>
     </div>
     <div v-if="showPopup" class="mask" @click="showPopup = false"></div>
+
+    <div v-if="dynamicVNode">
+      <component :is="dynamicVNode" />
+    </div>
     <!-- 主体 -->
     <Transition name="popuper">
       <div v-if="showPopup" class="bs-wrapper">
@@ -232,7 +238,7 @@ onMounted(()=>{
         </div>
         <hr>
         <div class="blocker-list" v-if="CutLevelPermit>=5">
-          <span class="blocker" @click="onSpaceMatterRename(currentHoverRow)">
+          <span class="blocker" @click="onAccessManage(currentHoverRow)">
             <Edit style="width: 24px; height: 24px;"></Edit>成员管理</span>
           <span class="blocker"  @click="onSpacePManage(currentHoverRow)">
             <Setting style="width: 24px; height: 24px;"></Setting>权限设置</span>
@@ -243,6 +249,7 @@ onMounted(()=>{
         </div>
       </div>
     </Transition>
+
     <BottomPage />
 </template>
 

src/views/doc/sharePermission.vue

@@ -153,7 +153,7 @@ onMounted(()=>{
 </script>
 
 <template>
-  <el-dialog  :model-value="true" :style="{'max-height': '650px'}" v-on:close="closeFunc()">
+  <el-dialog  :model-value="true" :style="{'max-height': '749px'}" v-on:close="closeFunc()">
     <template #header>
       <span>成员管理</span>
     </template>  
@@ -172,17 +172,19 @@ onMounted(()=>{
           show-checkbox
           :default-checked-keys="treeSelected"
           :check-on-click-leaf="false"
-          :style="{maxHeight:'500px','overflow-y': 'auto'}"
+          :style="{maxHeight:'324px','overflow-y': 'auto'}"
           :props="{label: 'name',children:'child',isLeaf:'dir'}"
           :default-expanded-keys="[313]"
           @node-click="onNodeClick"
         />
       </div>
-      <div class="tablelist">
+      
+    </div>
+    <div class="tablelist">
         <el-table ref="tableMembersRef" 
           :data="members"
           :row-key="row => row.keystr"
-          style="overflow-y: auto;height: 500px;"
+          style="overflow-y: auto;height: 250px;"
           @select="onManualSelect"
           @select-all="onSelectionAll"
           >
@@ -191,8 +193,6 @@ onMounted(()=>{
           <el-table-column  property="positionname" label="职位"></el-table-column>
         </el-table>
       </div>
-    </div>
-
     <template #footer>
       <div class="dialog-footer">
         <el-button @click="closeFunc()">取消</el-button>
@@ -200,4 +200,23 @@ onMounted(()=>{
       </div>
     </template>
   </el-dialog>
-</template>
+</template>
+
+<style lang="scss" scoped>
+.tablelist{
+    width: 100%;
+    padding: 10px;
+    border: 2px solid;
+    border-radius: 16px;
+}
+
+</style>
+
+<style>
+    /* dialog的body内容样式设置*/
+    .el-dialog{
+      /* 让整个弹出窗口位置更高一些*/
+      --el-dialog-margin-top:7vh; 
+    }
+    
+</style>

src/views/doc/spacePermission.vue

@@ -277,31 +277,31 @@ onMounted(()=>{
     </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 class="tree-node" style="font-weight: bold;position: sticky;">
+      <span style="width: 100px;text-align: center;">名称</span>
       <div v-if="managerMode" class="buttons">
-        <span>管理员</span>
+        <div class="box-title">管理员</div>
       </div>
-      <div v-else class="buttons">
+      <div v-else style="margin: 0 0 0 auto;display: flex;">
         <el-tooltip placement="top" effect="dark" 
           content="禁止访问">
-          <span>不可见</span>
+          <div class="box-title">不可见</div>
         </el-tooltip>
         <el-tooltip placement="top" effect="dark" 
           content="仅可预览，不可下载">
-          <span>仅预览</span>
+          <div class="box-title">仅预览</div>
         </el-tooltip>
         <el-tooltip placement="top" effect="dark" 
           content="可下载可见文件，不可上传文件">
-          <span>可下载</span>
+          <div class="box-title">可下载</div>
         </el-tooltip>
         <el-tooltip placement="top" effect="dark" 
           content="可上传和下载可见文件">
-          <span>上传下载</span>
+          <div class="box-title">上传下载</div>
         </el-tooltip>
         <el-tooltip placement="top" effect="dark" 
           content="可上传、下载、编辑文档">
-          <span>编辑</span>
+          <div class="box-title">编辑</div>
         </el-tooltip>
       </div>
     </div>
@@ -317,7 +317,7 @@ onMounted(()=>{
         >
         <template #default="{ node, data }">
           <div class="tree-node">
-            <span>{{ data.name }}</span>
+            <span style="width: 130px;overflow: hidden;">{{ data.name }}</span>
             
             <div v-if="managerMode" class="buttons">
               <el-checkbox  v-model="data.ismanager" :indeterminate="data.indeterminate" />
@@ -347,7 +347,6 @@ onMounted(()=>{
 
 <style lang="scss" scoped>
   .tablelist{
-    width: 94%;
     height: 565px;
     overflow-y: scroll
   }
@@ -358,21 +357,28 @@ onMounted(()=>{
     padding: 5px 32px;
     background-color: #d7d1ca;
   }
+  .box-title{
+    width: 30px;
+    margin: 0 0 0 8px;
+  }
   .tree-node{
     display: flex;
     flex-direction: row;
     width: 100%;
     align-items: center;
     .buttons{
-      margin: 0 50px 0 auto;
+     margin: 0 10px 0 auto;
       span{
         width: 26px;
         margin: 0 7px;
       }
     }
   }
+  .el-dialog{
+    --el-dialog-width:100%;
+  }
   .el-checkbox{
-    width: 26px;
+    width: 10px;
   }
 
   .el-tree{