5 changed files with 256 additions and 5 deletions
@ -0,0 +1,222 @@ |
|||||
|
<!-- |
||||
|
@ 作者: han2015 |
||||
|
@ 时间: 2025-05-12 15:39:13 |
||||
|
@ 备注: 文档管理组件 |
||||
|
--> |
||||
|
<script lang="ts" setup> |
||||
|
|
||||
|
import { getShareList,getShareBrowse,postShareDelete} from "@/api/doc/index" |
||||
|
import { matterPage,favourItem,respCreateShare } from "@/api/doc/type" |
||||
|
import { h } from 'vue' |
||||
|
import router from "@/utils/router"; |
||||
|
import { useRoute } from 'vue-router' |
||||
|
import { userStror } from "@/utils/pinia/stores/modules/userOrders"; |
||||
|
import { |
||||
|
ArrowLeft, |
||||
|
} from '@element-plus/icons-vue' |
||||
|
import {ElText,ElButton } from "element-plus"; |
||||
|
import {getFileIcon,checkExpirTime,fileType,readableSize} from "./tools" |
||||
|
import preview from './preview.vue'; |
||||
|
|
||||
|
const userStore = userStror(); |
||||
|
const uid=btoa("p0"+userStore.userInfoCont.userId); |
||||
|
const siteHost=document.location.origin; |
||||
|
const apiURL=import.meta.env.VITE_APP_BASE_API+"/hxpan/api" |
||||
|
const udprt=btoa("d"+userStore.userInfoCont.department); |
||||
|
const route = useRoute() |
||||
|
|
||||
|
const officeHost=import.meta.env.VITE_OFFICE_HOST |
||||
|
const matterList = ref<favourItem[]>() //文件列表 |
||||
|
|
||||
|
|
||||
|
//-------------手机底部悬浮窗控制----------- |
||||
|
const showPopup=ref(false) |
||||
|
const currentHoverRow=ref<favourItem>({}) //table 行的按钮控制 |
||||
|
const modListOrGrild=ref(true) //列表显示还是栅格显示 |
||||
|
//---------------------------------- |
||||
|
|
||||
|
const dynamicVNode = ref<VNode | null>(null) //permission 组件的父组件 |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
//加载文件列表 |
||||
|
function onLoadShareList(){ |
||||
|
let _page: matterPage = { |
||||
|
page: 0, |
||||
|
pageSize: 100, |
||||
|
orderCreateTime: "DESC", |
||||
|
orderDir: "DESC", |
||||
|
} |
||||
|
|
||||
|
getShareList(uid,_page).then((resp)=>{ |
||||
|
matterList.value=resp.data.data |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
|
||||
|
onMounted(() => { |
||||
|
onLoadShareList() |
||||
|
}) |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<div class="navBtn"> |
||||
|
<el-button type="text" :icon="ArrowLeft" @click="router.back()">返回</el-button> |
||||
|
</div> |
||||
|
<div class="app_container"> |
||||
|
<el-row :gutter="24"> |
||||
|
<el-table v-if="modListOrGrild" |
||||
|
stripe |
||||
|
:data="matterList" |
||||
|
ref="multipleTableRef" |
||||
|
:header-cell-style="{ background: '#f5f8fd' }" |
||||
|
row-key="uuid" |
||||
|
:row-style ="() => ({ lineHeight: '36px'})"> |
||||
|
<el-table-column property="name"> |
||||
|
<template #default="scope"> |
||||
|
<div style="display: flex; align-items: center;" @click="handleDoubleClick(scope.row)" > |
||||
|
<el-image v-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)" /> |
||||
|
<svg-icon v-else :icon-class="getFileIcon(scope.row.name)+'-icon'" size="30px" /> |
||||
|
|
||||
|
<span style="margin-left: 10px">{{ scope.row.name }}</span> |
||||
|
<el-button class="setBtn" type="text" icon="MoreFilled" size="small" |
||||
|
@click="(e)=>{e.stopPropagation(); showPopup=true; currentHoverRow=scope.row;}"></el-button> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</el-row> |
||||
|
</div> |
||||
|
|
||||
|
<div v-if="showPopup" class="mask" @click="showPopup = false"></div> |
||||
|
<!-- 主体 --> |
||||
|
<Transition name="popuper"> |
||||
|
<div v-if="showPopup" class="bs-wrapper"> |
||||
|
<div class="popupTitle"> |
||||
|
<svg-icon :icon-class="getFileIcon(currentHoverRow.name)+'-icon'" size="30px"/> |
||||
|
{{ currentHoverRow.name }} |
||||
|
<el-button type="text" @click="showPopup=false">关闭</el-button> |
||||
|
</div> |
||||
|
<hr> |
||||
|
<div class="blocker-list"> |
||||
|
<span class="blocker" @click="onShareView(currentHoverRow)"> |
||||
|
<View class="plus-icon"></View>预览</span> |
||||
|
<span class="blocker" @click="showShareMessage(currentHoverRow)"> |
||||
|
<View class="plus-icon"></View>详情</span> |
||||
|
<span class="blocker" @click="onDownload(currentHoverRow)"> |
||||
|
<Download class="plus-icon"></Download>下载</span> |
||||
|
<span class="blocker" @click="onShareDelete(currentHoverRow)"> |
||||
|
<Delete class="plus-icon"></Delete>删除</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</Transition> |
||||
|
|
||||
|
<div v-if="dynamicVNode" style="height: inherit;"> |
||||
|
<component :is="dynamicVNode" /> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.app_container { |
||||
|
padding: 10px; |
||||
|
height: calc(100% - 10px); |
||||
|
overflow-y: auto; |
||||
|
width: 100%; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.navBtn{ |
||||
|
position: fixed; |
||||
|
background-color: #ffffff94; |
||||
|
width: 100%; |
||||
|
z-index: 55; |
||||
|
} |
||||
|
|
||||
|
.setBtn{ |
||||
|
margin-right: 10px; |
||||
|
margin-left: auto; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
//---------------animation |
||||
|
/* 遮罩: popup 的遮罩 */ |
||||
|
.mask{ |
||||
|
position: fixed; |
||||
|
inset: 0; |
||||
|
background:rgba(0,0,0,.4); |
||||
|
z-index:999; |
||||
|
} |
||||
|
|
||||
|
.bs-wrapper{ |
||||
|
position: fixed; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
left:0; |
||||
|
right:0; |
||||
|
bottom:0; |
||||
|
height:36vh; /* 半屏停住 */ |
||||
|
background:#f1f1f1; |
||||
|
border-radius:16px 16px 0 0; |
||||
|
z-index:1000; |
||||
|
overflow-y:auto; |
||||
|
padding: 8px 16px; |
||||
|
hr{ |
||||
|
margin: 8px 0; |
||||
|
border: none; |
||||
|
width: 88%; |
||||
|
align-self: center; |
||||
|
background: #63616145; |
||||
|
} |
||||
|
} |
||||
|
.popupTitle{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
button{ |
||||
|
margin-left: auto; |
||||
|
margin-right: 5px; |
||||
|
} |
||||
|
} |
||||
|
.blocker-list{ |
||||
|
display: grid; |
||||
|
grid-template-columns: 1fr 1fr 1fr 1fr; |
||||
|
font-size: small; |
||||
|
.blocker{ |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
padding-top: 15px; |
||||
|
background-color: white; |
||||
|
border-radius: 5px; |
||||
|
margin: 6px; |
||||
|
width: 70px; |
||||
|
height: 70px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.popuper-enter-from{ |
||||
|
transform:translateY(100%); |
||||
|
opacity:0; |
||||
|
} |
||||
|
/* 进入过程 */ |
||||
|
.popuper-enter-active{ |
||||
|
transition:all .3s ease-out; |
||||
|
} |
||||
|
/* 离开后:回到下方 */ |
||||
|
.popuper-leave-to{ |
||||
|
transform:translateY(50px); |
||||
|
opacity:0; |
||||
|
} |
||||
|
.popuper-leave-active{ |
||||
|
transition:all .3s ease-in; |
||||
|
} |
||||
|
|
||||
|
.plus-icon{ |
||||
|
width: 20px; |
||||
|
height: 20px; |
||||
|
} |
||||
|
//--------------------------- |
||||
|
</style> |
||||
Loading…
Reference in new issue