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