You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
251 lines
8.0 KiB
251 lines
8.0 KiB
<!--
|
|
@ 作者: 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
|
|
}
|
|
|
|
function getItemSpan(str:string){
|
|
let span=parseInt(str.split(":")[0])-3 //为何要减3，因为系统公司层级的level从3开始，层级递增4,5,6...
|
|
if(span<0) span=0
|
|
return `margin-left:${span*20}px`
|
|
}
|
|
|
|
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('|')" :style="item.includes(':')?getItemSpan(item):''" >
|
|
{{ item.replace(/\d:/,'- ') }}
|
|
</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>
|
|
|