ShutongInterconnectedChemicalCloudPlatform/src/views/doc/share.vue

<!--
@ 作者: han2015
@ 时间: 2025-05-12 15:39:13
@ 备注: 文档管理组件
-->
<script lang="ts" setup>

import { useRoute } from 'vue-router'

import { useUserStore } from "@/store/modules/user";
import { getShareList,postDelMatter,getShareBrowse,postShareDelete} from "@/api/doc/index"
import { matterPage,matterInfo,respCreateShare } from "@/api/doc/type"
import { h } from 'vue'
import {
  Delete,
  Folder,
  Share,
  Avatar,
  View,
} from '@element-plus/icons-vue'
import {ElText } from "element-plus";
import {getFileIcon,checkExpirTime } from "./tools"
import sharePermission from './sharePermission.vue';
import preview from './preview.vue';

const route = useRoute()
const userStore = useUserStore();
const udprt=btoa("d"+userStore.userInfoCont.department);
const uid=btoa("p0"+userStore.userInfoCont.userId);
const siteHost=document.location.origin;
const apiURL=import.meta.env.VITE_APP_BASE_API+"/hxpan/api"
const officeHost=import.meta.env.VITE_OFFICE_HOST
const matterList = ref<matterInfo[]>()  //文件列表
const browerMode=ref(false)  //share模式  1)self-list(default) 2)brower
const currentHoverRow=ref("")  //当前选择的table行
const drawerModel=ref(false)   //右侧隐藏抽屉组件的状态控制
const permitListRef=ref("")   //右侧抽屉组件中文档成员列表的key数组字符串

import type { VNode } from 'vue'
const dynamicVNode = ref<VNode | null>(null) //permission 组件的父组件



function showShareMessage(row:{uuid:string,code:string,name:string,expireTime:string}){
  let _shareURL=`${siteHost}/#/doc/share?uuid=${row.uuid}&code=${row.code}`
  ElMessageBox({
    title: '分享详情',
    customStyle: { '--el-messagebox-width':'800px',padding:'40px'},
    message: () => h('div',{style:{display:'flex','flex-direction':'column','line-height':'34px', width:'600px'}},[
     h(ElText,{style:{'align-self':'flex-start'}},()=>row.name),
     h(ElText,{style:{'align-self':'flex-start'}},()=>"失效时间："+row.expireTime),
     h(ElText,{style:{'align-self':'flex-start'}},()=>"链接："+_shareURL),
     h('div',[
        h(ElButton, {
          type: 'primary',
          style: {  width: '100px' },
          onClick: () => {
            let _url=apiURL+`/share/zip?shareUuid=${row.uuid}&code=${row.code}&dprt=${udprt}&puuid=root&rootUuid=root`
            window.open(_url)
          }
        },()=>'下载'),
        h(ElButton, {
          type: 'primary',
          style: {  width: '100px',margin:'0 10px' },
          onClick: () => {
            onShareView(row)
          }
        },()=>'预览')
     ])
    ]),
    confirmButtonText: '复制分享链接',
    showCancelButton: true
  }).then(()=>{
    navigator.clipboard.writeText(_shareURL)
  }).catch(() => {
    if (browerMode.value){
      location.href=`/#/doc/share`
    }
  });
}

//----------------------------------------
//删除分享
function onShareDelete(row:matterInfo){
  if (row.uuid){
    ElMessageBox.confirm("确认要取消此文件分享！", "警告", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(()=>{
      postShareDelete(uid,{
        "uuid":row.uuid
      }).then(()=>onLoadShareList())
    })
  }
}

//编辑分享成员
function onShareMember(row:matterInfo){
    dynamicVNode.value=h(sharePermission,{
      uid:uid,
      uuid:row.uuid,
      closeFunc:(refresh?:boolean)=>{
        dynamicVNode.value=null
        if (refresh) {
          permitListRef.value=""
          drawerModel.value=false
          onLoadShareList() 
        }
      }
    })
}

//文件预览
function onShareView(row:matterInfo){
  let a = row.name ?? '';
  if(a.endsWith('...')){
    a=`${row.uuid}-${row.code}.zip`
  }
  
  //由于预览服务在缓存文件时，直接按文件名缓存，所以同名文件就会出现覆盖错乱的问题
  a=a.match("(\.[a-zA-Z]+)$")
  if (a && a.length>0) {
    a=`${row.uuid}-${row.code}${a[0]}`
  }else{
    a=`${row.uuid}${row.name}`
  }

  let _url=`${siteHost}${apiURL}/share/zip?shareUuid=${row.uuid}&code=${row.code}&uid=${uid}&dprt=${udprt}&puuid=root&rootUuid=root&fullfilename=${a}`
  dynamicVNode.value=h(preview,{
    url:`${officeHost}/kkpreview/onlinePreview?url=`+window.btoa(unescape(encodeURIComponent(_url))),
    closeFunc:()=>dynamicVNode.value=null
  })
}

//加载文件列表
function onLoadShareList(){
  let _page: matterPage = {
    page: 0,
    pageSize: 100,
    orderCreateTime: "DESC",
    orderDir: "DESC",
  }

  getShareList(uid,_page).then((resp)=>{
    matterList.value=resp.data.data
  })
}

function handleMouseEnter(row:any){
  currentHoverRow.value=row.uuid
}

onMounted(() => {
  const query = route.query
  //只是分享链接的请求
  if (query.uuid && query.code){
    browerMode.value=true
    getShareBrowse("",{shareUuid:query.uuid,code:query.code,puuid:'root',rootUuid:'root',dprt:udprt}).then((resp)=>{ 
      showShareMessage(resp.data) 
      return
    })
  }
  browerMode.value=false
  onLoadShareList()
})
</script>

<template>
  <div class="app_container">
    <el-row :gutter="24" v-if="!browerMode">
      <el-table
        stripe
        :data="matterList"
        :header-cell-style="{ background: '#f5f8fd' }"
        style="width: 100%"
        row-key="uuid"
        :row-style ="() => ({ height: '55px' })"
        @cell-mouse-enter="handleMouseEnter">
        <el-table-column style="width: 70%;" property="name" label="文件名">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <el-icon :size="26">
                <component v-if="scope.row.dir" :is="Folder" />
                <component v-else :is="getFileIcon(scope.row.name)" />
              </el-icon>
              <span style="margin-left: 10px">{{ checkExpirTime(scope.row)?scope.row.name+' (已过期)':scope.row.name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column width="250" align="center">
          <template #default="scope">
            <div v-show="currentHoverRow === scope.row.uuid">
              <el-button size="small" :icon="Avatar" circle @click="()=>{drawerModel=true; permitListRef=scope.row.permitInfos}"></el-button>
              <el-button size="small" :icon="View" circle @click="onShareView(scope.row)"></el-button>
              <el-button size="small" :icon="Share" circle @click="showShareMessage(scope.row)"></el-button>
              <el-button size="small" :icon="Delete" circle @click="onShareDelete(scope.row)"></el-button>
            </div>
          </template>
        </el-table-column>
  
        <el-table-column prop="expireTime" label="失效日期">
          <template #default="scope">
            <span v-if="scope.row.expireTime">{{ scope.row.expireInfinity? '永久有效': scope.row.expireTime.slice(0,16) }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
  </div>
  <el-drawer
    v-model="drawerModel"
    title="文档成员列表"
    direction="rtl"
    size="20%"
    :style="{padding:'17px'}">
    <template #header>
      <span>文档成员列表</span>
      <el-button style="width:30px;margin-right:20px;" 
        :icon=Avatar 
        @click="()=>onShareMember({uuid:currentHoverRow})">
      </el-button>
    </template>
    
    <ul v-if="drawerModel &&permitListRef!=''" style="line-height: 26px;">
      <li class="el-text" v-for="item in permitListRef.split('|')"> {{ item }}</li>
    </ul>
    <span v-else-if="permitListRef==''"> 所有人员都可访问</span>
  </el-drawer>
  <div v-if="dynamicVNode">
    <component :is="dynamicVNode" />
  </div>
</template>

<style lang="scss" scoped>
.app_container {
  padding: 10px 30px 0px 30px;
  height: calc(100% - 10px);
  overflow: hidden;
  overflow-y: auto;
  width: 100%;
}

</style>