แก้ไขการดาวโหลดไฟล
This commit is contained in:
parent
a1bd22f254
commit
f242a7cf9f
1 changed files with 103 additions and 85 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue