|
|
@ -4,7 +4,7 @@ |
|
|
@ 备注: 文档管理组件 |
|
|
@ 备注: 文档管理组件 |
|
|
--> |
|
|
--> |
|
|
<script lang="ts" setup> |
|
|
<script lang="ts" setup> |
|
|
import { getExpirTime, getFileIcon, readableSize} from "./tools" |
|
|
import { getExpirTime, getFileIcon, readableSize,fileType} from "./tools" |
|
|
import sharePermission from './sharePermission.vue'; |
|
|
import sharePermission from './sharePermission.vue'; |
|
|
import { useUserStore } from "@/store/modules/user"; |
|
|
import { useUserStore } from "@/store/modules/user"; |
|
|
import { getMatterList,postCreateDir,postDelMatter,postCreateShare,postMatterRename,postDelMatBatch,getMySpaces,doCreateSpace} from "@/api/doc/index" |
|
|
import { getMatterList,postCreateDir,postDelMatter,postCreateShare,postMatterRename,postDelMatBatch,getMySpaces,doCreateSpace} from "@/api/doc/index" |
|
|
@ -20,11 +20,14 @@ import { |
|
|
Promotion, |
|
|
Promotion, |
|
|
Folder, |
|
|
Folder, |
|
|
Avatar, |
|
|
Avatar, |
|
|
Plus |
|
|
Plus, |
|
|
|
|
|
Grid, |
|
|
|
|
|
List, |
|
|
} from '@element-plus/icons-vue' |
|
|
} from '@element-plus/icons-vue' |
|
|
import {ElSelect,ElOption, ElText,ElInput,TableInstance,ElMessage,UploadFile,UploadFiles,ElPagination,ElTree,TreeNode} from "element-plus"; |
|
|
import {ElSelect,ElOption, ElText,ElInput,TableInstance,ElMessage,UploadFile,UploadFiles,ElPagination,ElTree,TreeNode} from "element-plus"; |
|
|
import preview from './preview.vue'; |
|
|
import preview from './preview.vue'; |
|
|
import space from './space.vue'; |
|
|
import space from './space.vue'; |
|
|
|
|
|
import SvgIcon from "@/components/SvgIcon/index.vue"; |
|
|
|
|
|
|
|
|
//TODO: add file icons done! |
|
|
//TODO: add file icons done! |
|
|
//TODO: click on table-item， 1）preview on file ..................... |
|
|
//TODO: click on table-item， 1）preview on file ..................... |
|
|
@ -69,6 +72,8 @@ const spaceTreeData=ref<matterTree[]>([])//{name:'个人空间',uuid:'root',chil |
|
|
const spaceTreeRef = ref(); //space的树树组件的引用 |
|
|
const spaceTreeRef = ref(); //space的树树组件的引用 |
|
|
let spaceNodeUid="" //用来判断树组件的展开和关闭，如何只是展开和关闭的点击事件不在刷新，通currentNode的作用 |
|
|
let spaceNodeUid="" //用来判断树组件的展开和关闭，如何只是展开和关闭的点击事件不在刷新，通currentNode的作用 |
|
|
|
|
|
|
|
|
|
|
|
const modListOrGrild=ref(true) |
|
|
|
|
|
|
|
|
const Departs = computed(() => { |
|
|
const Departs = computed(() => { |
|
|
return `${userStore.userInfoCont.company},${userStore.userInfoCont.department},${userStore.userInfoCont.organization}` |
|
|
return `${userStore.userInfoCont.company},${userStore.userInfoCont.department},${userStore.userInfoCont.organization}` |
|
|
}) |
|
|
}) |
|
|
@ -229,6 +234,14 @@ function onDownload(row:matterInfo){ |
|
|
}) |
|
|
}) |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
function getImagePreivewURL(_uuid:string,_name:string){ |
|
|
|
|
|
return `${apiURL}/alien/preview/${_uuid}/${_name}?ir=fill_100_100` |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
function getImageDownloadURL(_uuid:string,_name:string){ |
|
|
|
|
|
return `${apiURL}/alien/preview/${_uuid}/${_name}` |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
function onMatterRename(row:matterInfo){ |
|
|
function onMatterRename(row:matterInfo){ |
|
|
const newname=ref(row.name) |
|
|
const newname=ref(row.name) |
|
|
ElMessageBox({ |
|
|
ElMessageBox({ |
|
|
@ -292,15 +305,18 @@ function onLoadMatterList(){ |
|
|
} |
|
|
} |
|
|
//----------for dir----------- |
|
|
//----------for dir----------- |
|
|
function createDir(){ |
|
|
function createDir(){ |
|
|
matterList.value?.unshift({ |
|
|
if(matterList.value){ |
|
|
name:"", |
|
|
if (matterList.value[0].name=="") return; |
|
|
userUuid:uid, |
|
|
} |
|
|
puuid:"", |
|
|
matterList.value?.unshift({ |
|
|
uuid:"", |
|
|
name:"", |
|
|
dir:true, |
|
|
userUuid:uid, |
|
|
size:0, |
|
|
puuid:"", |
|
|
deleted:false, |
|
|
uuid:"", |
|
|
}) |
|
|
dir:true, |
|
|
|
|
|
size:0, |
|
|
|
|
|
deleted:false, |
|
|
|
|
|
}) |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function onCreateDir(){ |
|
|
function onCreateDir(){ |
|
|
@ -398,19 +414,38 @@ function onNodeClick(data:matterTree,node:TreeNode,self:any,env:any){ |
|
|
}) |
|
|
}) |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
function updateListOrGrid(val:boolean){ |
|
|
|
|
|
modListOrGrild.value=val |
|
|
|
|
|
if(val){ |
|
|
|
|
|
localStorage.setItem("listOrGrid","true") |
|
|
|
|
|
}else{ |
|
|
|
|
|
localStorage.setItem("listOrGrid","false") |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
//文件预览 |
|
|
//文件预览 |
|
|
function onPrivateView(row:matterInfo){ |
|
|
function onPrivateView(row:matterInfo){ |
|
|
if(row.dir){ |
|
|
if(row.dir){ |
|
|
alert("目录不支持预览") |
|
|
alert("目录不支持预览") |
|
|
return |
|
|
return |
|
|
} |
|
|
} |
|
|
let a = `${row.uuid}${row.name}` |
|
|
|
|
|
let _token=document.cookie.match(/hxpan=([\w-]*)/) |
|
|
let _token=document.cookie.match(/hxpan=([\w-]*)/) |
|
|
if (_token&&_token.length>1){ |
|
|
if (_token&&_token.length>1){ |
|
|
_token=_token[1] |
|
|
_token=_token[1] |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
let _url=`${siteHost}${apiURL}/alien/download/${row.uuid}/${row.name}?access_token=${_token}&fullfilename=${a}` |
|
|
const _type=fileType(row.name!) |
|
|
|
|
|
if(_type!==""){ //office file |
|
|
|
|
|
const info =btoa(encodeURIComponent(`${row.name}`)) //预览模式不需要绝对路径，只核对一下文件名即可 |
|
|
|
|
|
const _url=`${siteHost}${apiURL}/alien/download/${row.uuid}/${row.name}?access_token=${_token}` |
|
|
|
|
|
//前半部分内容是为了校验信息，主要内容是fileurl |
|
|
|
|
|
window.open(`/#/onlyoffice?name=${row.name}&dtype=${_type}&info=${info}&fileurl=`+encodeURIComponent(_url),"_blank") |
|
|
|
|
|
return |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const a = `${row.uuid}${row.name}` |
|
|
|
|
|
const _url=`${siteHost}${apiURL}/alien/download/${row.uuid}/${row.name}?access_token=${_token}&fullfilename=${a}` |
|
|
|
|
|
|
|
|
dynamicVNode.value=h(preview,{ |
|
|
dynamicVNode.value=h(preview,{ |
|
|
url:`${officeHost}/kkpreview/onlinePreview?url=`+window.btoa(unescape(encodeURIComponent(_url))), |
|
|
url:`${officeHost}/kkpreview/onlinePreview?url=`+window.btoa(unescape(encodeURIComponent(_url))), |
|
|
@ -600,6 +635,12 @@ onMounted(() => { |
|
|
spaceTreeRef.value.append({name:item.name,uuid:item.uuid,dir:false,userUuid:item.userUuid}) |
|
|
spaceTreeRef.value.append({name:item.name,uuid:item.uuid,dir:false,userUuid:item.userUuid}) |
|
|
}) |
|
|
}) |
|
|
}) |
|
|
}) |
|
|
|
|
|
let val =localStorage.getItem("listOrGrid") |
|
|
|
|
|
if(val&&val=="false"){ |
|
|
|
|
|
modListOrGrild.value=false |
|
|
|
|
|
}else{ |
|
|
|
|
|
modListOrGrild.value=true |
|
|
|
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const handleSelectionChange = (val:matterInfo[]) => { |
|
|
const handleSelectionChange = (val:matterInfo[]) => { |
|
|
@ -678,10 +719,14 @@ const handleSelectionChange = (val:matterInfo[]) => { |
|
|
<el-button type="danger" plain @click="onDelMatter({uuid:currentNode.uuid,name:currentNode.name,dir:true, |
|
|
<el-button type="danger" plain @click="onDelMatter({uuid:currentNode.uuid,name:currentNode.name,dir:true, |
|
|
puuid:currentNode.puuid,path:currentNode.path})">删除目录</el-button> |
|
|
puuid:currentNode.puuid,path:currentNode.path})">删除目录</el-button> |
|
|
</el-col> |
|
|
</el-col> |
|
|
|
|
|
<el-button-group style="margin:0 50px 0 auto;"> |
|
|
|
|
|
<el-button :icon="List" @click="updateListOrGrid(true)"></el-button> |
|
|
|
|
|
<el-button :icon="Grid" @click="updateListOrGrid(false)"></el-button> |
|
|
|
|
|
</el-button-group> |
|
|
</el-row> |
|
|
</el-row> |
|
|
|
|
|
|
|
|
<el-row :gutter="24" style="height: 84%;overflow-y: auto;"> |
|
|
<el-row :gutter="24" style="overflow-y: auto;"> |
|
|
<el-table |
|
|
<el-table v-if="modListOrGrild" |
|
|
stripe |
|
|
stripe |
|
|
:data="matterList" |
|
|
:data="matterList" |
|
|
ref="multipleTableRef" |
|
|
ref="multipleTableRef" |
|
|
@ -696,10 +741,10 @@ const handleSelectionChange = (val:matterInfo[]) => { |
|
|
<template #default="scope"> |
|
|
<template #default="scope"> |
|
|
<input type="text" autofocus placeholder="文件夹名" style="border:groove;height:30px;" v-model="newdir" @change="onCreateDir" v-if="scope.row.name===''" /> |
|
|
<input type="text" autofocus placeholder="文件夹名" style="border:groove;height:30px;" v-model="newdir" @change="onCreateDir" v-if="scope.row.name===''" /> |
|
|
<div v-if="scope.row.name" style="display: flex; align-items: center;"> |
|
|
<div v-if="scope.row.name" style="display: flex; align-items: center;"> |
|
|
<el-icon :size="26"> |
|
|
<svg-icon v-if="scope.row.dir" icon-class="folder-icon" size="30px"/> |
|
|
<component v-if="scope.row.dir" :is="Folder" /> |
|
|
<el-image v-else-if="getFileIcon(scope.row.name)==='img'" style="width: 30px;" :preview-src-list="[getImageDownloadURL(scope.row.uuid,scope.row.name)]" :src="getImagePreivewURL(scope.row.uuid,scope.row.name)" /> |
|
|
<component v-else :is="getFileIcon(scope.row.name)" /> |
|
|
<svg-icon v-else :icon-class="getFileIcon(scope.row.name)+'-icon'" size="30px" /> |
|
|
</el-icon> |
|
|
|
|
|
<span style="margin-left: 10px">{{ scope.row.name }}</span> |
|
|
<span style="margin-left: 10px">{{ scope.row.name }}</span> |
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
@ -724,6 +769,24 @@ const handleSelectionChange = (val:matterInfo[]) => { |
|
|
</template> |
|
|
</template> |
|
|
</el-table-column> |
|
|
</el-table-column> |
|
|
</el-table> |
|
|
</el-table> |
|
|
|
|
|
<div class="table-grid" v-else> |
|
|
|
|
|
<div class="grid-item" v-for="row in matterList"> |
|
|
|
|
|
<div class="grid"> |
|
|
|
|
|
<div class="grid-box" @mouseover="handleMouseEnter(row)"> |
|
|
|
|
|
<svg-icon v-if="row.dir" icon-class="folder-icon" size="80px"/> |
|
|
|
|
|
<el-image v-else-if="getFileIcon(row.name)==='img'" style="width: 80px;" :preview-src-list="[getImageDownloadURL(row.uuid,row.name)]" :src="getImagePreivewURL(row.uuid,row.name)" /> |
|
|
|
|
|
<svg-icon v-else :icon-class="getFileIcon(row.name)+'-icon'" size="80px"/> |
|
|
|
|
|
<span style="margin: 5px 0;text-wrap-mode:nowrap;">{{ row.name }}</span> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="grid-menus" v-show="currentHoverRow === row.name"> |
|
|
|
|
|
<el-button v-if="getFileIcon(row.name)!='img'" size="small" :icon="View" circle @click="onPrivateView(row)"></el-button> |
|
|
|
|
|
<el-button size="small" :icon="Share" circle @click="onShareMatter(row)"></el-button> |
|
|
|
|
|
<el-button size="small" :icon="Download" circle @click="onDownload(row)"></el-button> |
|
|
|
|
|
<el-button size="small" :icon="Delete" circle @click="onDelMatter(row)"></el-button> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
</el-row> |
|
|
</el-row> |
|
|
|
|
|
|
|
|
<el-row v-if="paginInfo.total>1" style="justify-content: center;"> |
|
|
<el-row v-if="paginInfo.total>1" style="justify-content: center;"> |
|
|
@ -731,7 +794,7 @@ const handleSelectionChange = (val:matterInfo[]) => { |
|
|
</el-row> |
|
|
</el-row> |
|
|
</div> |
|
|
</div> |
|
|
<div v-else class="app_container"> |
|
|
<div v-else class="app_container"> |
|
|
<space ref="spaceEleRef" :uid="uid" :tree="spaceTreeRef" |
|
|
<space ref="spaceEleRef" :uid="uid" :tree="spaceTreeRef" :listOrGrid="modListOrGrild" |
|
|
:spaceid="SpaceID.uuid" :roles="Departs" :spacename="SpaceID.name" :owner="SpaceID.userUuid" |
|
|
:spaceid="SpaceID.uuid" :roles="Departs" :spacename="SpaceID.name" :owner="SpaceID.userUuid" |
|
|
:officeHost="officeHost" :site-host="siteHost" :api-u-r-l="apiURL" |
|
|
:officeHost="officeHost" :site-host="siteHost" :api-u-r-l="apiURL" |
|
|
:flushSpaceTree="flushSpaceTree"></space> |
|
|
:flushSpaceTree="flushSpaceTree"></space> |
|
|
@ -795,4 +858,32 @@ const handleSelectionChange = (val:matterInfo[]) => { |
|
|
bottom: auto; |
|
|
bottom: auto; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.table-grid{ |
|
|
|
|
|
display: flex; |
|
|
|
|
|
flex-wrap: wrap; /* 关键属性，允许子元素自动换行 */ |
|
|
|
|
|
.grid-item{ |
|
|
|
|
|
height: 134px; |
|
|
|
|
|
width: 134px; |
|
|
|
|
|
margin: 5px; |
|
|
|
|
|
.grid-box{ |
|
|
|
|
|
display: flex; |
|
|
|
|
|
flex-direction: column; |
|
|
|
|
|
overflow: hidden; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
text-align:center; |
|
|
|
|
|
} |
|
|
|
|
|
.grid{ |
|
|
|
|
|
:hover { |
|
|
|
|
|
background-color: #c4c4c4; /* 悬停时的背景色 */ |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</style> |
|
|
|
|
|
<style> |
|
|
|
|
|
:root{ |
|
|
|
|
|
--el-index-normal:auto; |
|
|
|
|
|
} |
|
|
</style> |
|
|
</style> |
