hrms-bangkok/hrms-edm
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

fix: file download ui

Browse source
This commit is contained in:
puri-ph4tt 2023-11-30 15:30:31 +07:00
parent b99ac4b712
commit 540868a029
1 changed files with 71 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

109
Services/client/src/modules/01_user/components/FileDownload.vue
View file

@ -9,13 +9,14 @@ import { useFileInfoStore } from '@/stores/file-info-data'
import FileIcon from '@/components/FileIcon.vue'
const { isFilePreview, fileInfo } = storeToRefs(useFileInfoStore())
const { getType, getFormatDate, getSize, getFileNameFormat } = useFileInfoStore()
const { getType, getFormatDate, getSize, getFileNameFormat } =
useFileInfoStore()
async function downloadSubmit(path: any) {
const [cabinet, drawer, folder, file] = path.split('/')
const formatPath = `/cabinet/${cabinet}/drawer/${drawer}/folder/${folder}/file/${file}`
const res = await axiosClient.get<EhrFile & { download: string }>(
`${import.meta.env.VITE_API_ENDPOINT}${formatPath}`
`${import.meta.env.VITE_API_ENDPOINT}${formatPath}`,
)
await axios
.get(res.data.download, {
@ -36,9 +37,9 @@ async function downloadSubmit(path: any) {
</script>
<template>
<div class="bg-white rounded-borders shadow-5 relative">
<div class="bg-white rounded-borders shadow-5 relative q-pb-md">
<div class="bg-white q-pa-md">
<div class="row items-center justify-between">
<div class="row items-center">
<span class="text-h6">
<q-btn
flat
@ -56,37 +57,52 @@ async function downloadSubmit(path: any) {
{{ getFileNameFormat(fileInfo?.fileName) }}</span
>
</div>
<div class="row">
<div class="q-pa-sm">
<div class="col">
<div class="box border-radius-inherit">
<q-card flat>
<q-card-section class="column justify-center relative q-px-xl">
<file-icon
size="preview"
:fileMimeType="fileInfo?.fileType"
/>
<span class="text-center q-pt-md text-h6">{{
getFileNameFormat(fileInfo?.fileName)
}}</span>
</q-card-section>
</q-card>
<div class="row q-mt-lg justify-center">
<div class="column q-pa-sm">
<div class="grid">
<div
:style="{
position: 'relative',
display: 'flex',
gap: '0.5rem',
flexDirection: 'column',
alignItems: 'center',
padding: '1rem',
maxWidth: '100%',
}"
class="box"
>
<div class="q-px-md flex items-center justify-center">
<file-icon
size="preview"
:fileMimeType="
fileInfo?.fileType ? fileInfo?.fileType : 'unknow'
"
/>
</div>
<div
class="text-overflow-handle block q-px-md text-center"
style="max-width: 100%"
>
{{ getFileNameFormat(fileInfo?.fileName) }}
</div>
</div>
<div class="column q-py-sm">
<q-btn
color="primary"
label="ดาวน์โหลด"
icon="mdi-download"
class="q-py-sm"
@click="() => downloadSubmit(fileInfo?.pathname)"
/>
</div>
</div>
<div class="column q-py-md">
<q-btn
color="primary"
label="ดาวน์โหลด"
icon="mdi-download"
class="q-py-sm"
@click="() => downloadSubmit(fileInfo?.pathname)"
/>
</div>
</div>
<div class="col q-px-lg q-gutter-md">
<div class="col-grow q-px-lg q-gutter-md q-pt-md">
<div class="row">
<div class="col-2">
<div class="col-12 col-md-2">
<span>ชื่อไฟล์</span>
</div>
<div class="col-grow">
@ -95,7 +111,7 @@ async function downloadSubmit(path: any) {
</div>
<q-separator />
<div class="row">
<div class="col-2">
<div class="col-12 col-md-2">
<span>ชื่อเรื่อง</span>
</div>
<div class="col-grow">
@ -104,7 +120,7 @@ async function downloadSubmit(path: any) {
</div>
<q-separator />
<div class="row">
<div class="col-2">
<div class="col-12 col-md-2">
<span>รายละเอียด</span>
</div>
<div class="col-grow">
@ -113,7 +129,7 @@ async function downloadSubmit(path: any) {
</div>
<q-separator />
<div class="row">
<div class="col-2">
<div class="col-12 col-md-2">
<span>กลุ่ม/หมวดหมู่</span>
</div>
<div class="col-grow">
@ -127,7 +143,7 @@ async function downloadSubmit(path: any) {
</div>
<q-separator />
<div class="row">
<div class="col-2">
<div class="col-12 col-md-2">
<span>คำสำคัญ</span>
</div>
<div class="col-grow">
@ -141,7 +157,7 @@ async function downloadSubmit(path: any) {
</div>
<q-separator />
<div class="row">
<div class="col-2">
<div class="col-12 col-md-2">
<span>ขนาดไฟล์</span>
</div>
<div class="col-grow">
@ -150,7 +166,7 @@ async function downloadSubmit(path: any) {
</div>
<q-separator />
<div class="row">
<div class="col-2">
<div class="col-12 col-md-2">
<span>ประเภทไฟล์</span>
</div>
<div class="col-grow">
@ -159,7 +175,7 @@ async function downloadSubmit(path: any) {
</div>
<q-separator />
<div class="row">
<div class="col-2">
<div class="col-12 col-md-2">
<span>วันที่อัปโหลด</span>
</div>
<div class="col-grow">
@ -176,7 +192,24 @@ async function downloadSubmit(path: any) {
<style lang="scss" scoped>
.box {
border: 2px solid #f1f2f4;
border: 2px solid $separator-color;
border-radius: 8px;
}
.text-overflow-handle {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.grid {
display: grid;
width: 250px;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 1rem;
}
.grid .box {
position: relative;
}
</style>