แก้ไขการดาวโหลดไฟล

This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-01-23 17:27:10 +07:00
parent a1bd22f254
commit f242a7cf9f

View file

@ -16,11 +16,19 @@ onMounted(async () => {
route.params.id as string,
'1-เอกสารเล่ม 2'
)
const result2 = await doc.info(
'เล่ม 2',
route.params.id as string,
'2-เอกสารเล่ม 2 (ฉบับแก้ไข)'
)
if (result) {
data.value = result
metadata.value = result.metadata
}
if (result2) {
data.value = result2
metadata.value = result2.metadata
}
})
</script>
@ -32,52 +40,65 @@ onMounted(async () => {
</div>
</div>
<div class="row col-12 relative-position"
:style=" $q.screen.xs ? 'height: 50px'
:$q.screen.sm ? 'height: 60px'
:$q.screen.md ? 'height: 70px'
:$q.screen.gt.lg ? 'height: 120px'
: 'height: 60px'
"
<div
class="row col-12 relative-position"
:style="
$q.screen.xs
? 'height: 50px'
: $q.screen.sm
? 'height: 60px'
: $q.screen.md
? 'height: 70px'
: $q.screen.gt.lg
? 'height: 120px'
: 'height: 60px'
"
>
<q-img
:src="book"
class="fixed-top absolute-center"
:style="
$q.screen.xs
? 'height: auto; max-width: 160px; top: -40px'
: $q.screen.sm
? 'height: auto; max-width: 190px; top: -50px'
: $q.screen.md
? 'height: auto; max-width: 200px; top: -40px'
: $q.screen.gt.lg
? 'height: auto; max-width: 250px; top: -50px'
: 'height: auto; max-width: 250px; top: -70px'
"
/>
</div>
<div class="row col-12 justify-center q-px-lg">
<div
class="row col-xs-12 col-sm-9 col-md-8 col-lg-9 q-col-gutter-y-lg text-left"
>
<q-img
:src="book"
class="fixed-top absolute-center"
:style=" $q.screen.xs ? 'height: auto; max-width: 160px; top: -40px'
:$q.screen.sm ? 'height: auto; max-width: 190px; top: -50px'
:$q.screen.md ? 'height: auto; max-width: 200px; top: -40px'
:$q.screen.gt.lg ? 'height: auto; max-width: 250px; top: -50px'
:'height: auto; max-width: 250px; top: -70px'
"
/>
</div>
<div class="row col-12 justify-center q-px-lg">
<div
class="row col-xs-12 col-sm-9 col-md-8 col-lg-9 q-col-gutter-y-lg text-left"
>
<div class="col-12 q-my-lg">
<div class="text-h5 text-center text-bold q-mb-md">{{ metadata?.subject || data?.fileName }}</div>
<div class="text-body text-center">
{{ metadata?.author || data?.author }}
</div>
<div class="col-12 q-my-lg">
<div class="text-h5 text-center text-bold q-mb-md">
{{ metadata?.subject || data?.fileName }}
</div>
<div class="text-body text-center">
{{ metadata?.author || data?.author }}
</div>
</div>
<!-- <div class="row col-12">
<!-- <div class="row col-12">
<div class="col-4 text-title text-left">เจาของผลงาน</div>
<div class="col-8 text-body text-right">
{{ metadata?.author || data?.author }}
</div>
</div> -->
<div class="row col-12">
<div class="col-4 text-title text-left">ตำแหนงทได</div>
<div class="col-8 text-body text-right">
{{ metadata?.position || '-' }}
</div>
<div class="row col-12">
<div class="col-4 text-title text-left">ตำแหนงทได</div>
<div class="col-8 text-body text-right">
{{ metadata?.position || '-' }}
</div>
</div>
<!-- <div class="row col-12">
<!-- <div class="row col-12">
<div class="col-4 text-title">กล/หมวดหม</div>
<div class="col-8 text-body">
{{
@ -89,7 +110,7 @@ onMounted(async () => {
</div>
</div> -->
<!-- <div class="row col-12">
<!-- <div class="row col-12">
<div class="col-4 text-title">คำสำค</div>
<div class="col-8 text-body">
{{
@ -101,60 +122,58 @@ onMounted(async () => {
</div>
</div> -->
<div class="row col-12">
<div class="col-4 text-title text-left">ขนาดไฟล</div>
<div class="col-8 text-body text-right">
{{ data && doc.util.formatBytes(data.fileSize) }}
</div>
<div class="row col-12">
<div class="col-4 text-title text-left">ขนาดไฟล</div>
<div class="col-8 text-body text-right">
{{ data && doc.util.formatBytes(data.fileSize) }}
</div>
</div>
<div class="row col-12">
<div class="col-4 text-title text-left">นทปโหลด</div>
<div class="col-8 text-body text-right">
{{
data &&
new Date(data.createdAt).toLocaleDateString('th', {
day: 'numeric',
month: 'short',
year: 'numeric',
})
}}
</div>
<div class="row col-12">
<div class="col-4 text-title text-left">นทปโหลด</div>
<div class="col-8 text-body text-right">
{{
data &&
new Date(data.createdAt).toLocaleDateString('th', {
day: 'numeric',
month: 'short',
year: 'numeric',
})
}}
</div>
<div class="col-12 q-mb-md q-mt-lg">
<q-separator color="grey-6" />
</div>
<div class="col-12 row justify-center">
<q-btn
unelevated
color="primary"
size="md"
class="col-12 btn"
@click="
() => data && doc.util.download(data.downloadUrl, data.fileName)
"
style="border-radius:10px ;"
</div>
<div class="col-12 q-mb-md q-mt-lg">
<q-separator color="grey-6" />
</div>
<div class="col-12 row justify-center">
<q-btn
unelevated
color="primary"
size="md"
class="col-12 btn"
@click="
() => data && doc.util.download(data.downloadUrl, data.fileName)
"
style="border-radius: 10px"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="22"
height="23"
viewBox="0 0 22 23"
fill="none"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="22"
height="23"
viewBox="0 0 22 23"
fill="none"
>
<path
d="M1.83334 11.5H3.66668V16.0833H18.3333V11.5H20.1667V16.0833C20.1667 17.1008 19.3508 17.9167 18.3333 17.9167H3.66668C2.65834 17.9167 1.83334 17.1008 1.83334 16.0833V11.5ZM11 14.25L16.0875 9.24501L14.7858 7.95251L11.9167 10.8125V2.33334H10.0833V10.8125L7.22334 7.95251L5.92168 9.25418L11 14.25Z"
fill="white"
/>
</svg>
<span class="q-pl-md">ดาวนโหลด</span>
</q-btn>
</div>
<path
d="M1.83334 11.5H3.66668V16.0833H18.3333V11.5H20.1667V16.0833C20.1667 17.1008 19.3508 17.9167 18.3333 17.9167H3.66668C2.65834 17.9167 1.83334 17.1008 1.83334 16.0833V11.5ZM11 14.25L16.0875 9.24501L14.7858 7.95251L11.9167 10.8125V2.33334H10.0833V10.8125L7.22334 7.95251L5.92168 9.25418L11 14.25Z"
fill="white"
/>
</svg>
<span class="q-pl-md">ดาวนโหลด</span>
</q-btn>
</div>
</div>
</div>
</div>
</template>
<style>
@ -176,5 +195,4 @@ onMounted(async () => {
.btn {
box-shadow: 0px 4px 10px 0px rgba(120, 207, 197, 0.721);
}
</style>