แก้ไขการดาวโหลดไฟล
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
a1bd22f254
commit
f242a7cf9f
1 changed files with 103 additions and 85 deletions
|
|
@ -16,11 +16,19 @@ onMounted(async () => {
|
||||||
route.params.id as string,
|
route.params.id as string,
|
||||||
'1-เอกสารเล่ม 2'
|
'1-เอกสารเล่ม 2'
|
||||||
)
|
)
|
||||||
|
const result2 = await doc.info(
|
||||||
|
'เล่ม 2',
|
||||||
|
route.params.id as string,
|
||||||
|
'2-เอกสารเล่ม 2 (ฉบับแก้ไข)'
|
||||||
|
)
|
||||||
if (result) {
|
if (result) {
|
||||||
data.value = result
|
data.value = result
|
||||||
metadata.value = result.metadata
|
metadata.value = result.metadata
|
||||||
}
|
}
|
||||||
|
if (result2) {
|
||||||
|
data.value = result2
|
||||||
|
metadata.value = result2.metadata
|
||||||
|
}
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
@ -32,52 +40,65 @@ onMounted(async () => {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row col-12 relative-position"
|
<div
|
||||||
:style=" $q.screen.xs ? 'height: 50px'
|
class="row col-12 relative-position"
|
||||||
:$q.screen.sm ? 'height: 60px'
|
:style="
|
||||||
:$q.screen.md ? 'height: 70px'
|
$q.screen.xs
|
||||||
:$q.screen.gt.lg ? 'height: 120px'
|
? 'height: 50px'
|
||||||
: 'height: 60px'
|
: $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
|
<div class="col-12 q-my-lg">
|
||||||
:src="book"
|
<div class="text-h5 text-center text-bold q-mb-md">
|
||||||
class="fixed-top absolute-center"
|
{{ metadata?.subject || data?.fileName }}
|
||||||
: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>
|
</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-4 text-title text-left">เจ้าของผลงาน</div>
|
||||||
<div class="col-8 text-body text-right">
|
<div class="col-8 text-body text-right">
|
||||||
{{ metadata?.author || data?.author }}
|
{{ metadata?.author || data?.author }}
|
||||||
</div>
|
</div>
|
||||||
</div> -->
|
</div> -->
|
||||||
|
|
||||||
<div class="row col-12">
|
<div class="row col-12">
|
||||||
<div class="col-4 text-title text-left">ตำแหน่งที่ได้รับ</div>
|
<div class="col-4 text-title text-left">ตำแหน่งที่ได้รับ</div>
|
||||||
<div class="col-8 text-body text-right">
|
<div class="col-8 text-body text-right">
|
||||||
{{ metadata?.position || '-' }}
|
{{ metadata?.position || '-' }}
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- <div class="row col-12">
|
<!-- <div class="row col-12">
|
||||||
<div class="col-4 text-title">กลุ่ม/หมวดหมู่</div>
|
<div class="col-4 text-title">กลุ่ม/หมวดหมู่</div>
|
||||||
<div class="col-8 text-body">
|
<div class="col-8 text-body">
|
||||||
{{
|
{{
|
||||||
|
|
@ -89,7 +110,7 @@ onMounted(async () => {
|
||||||
</div>
|
</div>
|
||||||
</div> -->
|
</div> -->
|
||||||
|
|
||||||
<!-- <div class="row col-12">
|
<!-- <div class="row col-12">
|
||||||
<div class="col-4 text-title">คำสำคัญ</div>
|
<div class="col-4 text-title">คำสำคัญ</div>
|
||||||
<div class="col-8 text-body">
|
<div class="col-8 text-body">
|
||||||
{{
|
{{
|
||||||
|
|
@ -101,60 +122,58 @@ onMounted(async () => {
|
||||||
</div>
|
</div>
|
||||||
</div> -->
|
</div> -->
|
||||||
|
|
||||||
<div class="row col-12">
|
<div class="row col-12">
|
||||||
<div class="col-4 text-title text-left">ขนาดไฟล์</div>
|
<div class="col-4 text-title text-left">ขนาดไฟล์</div>
|
||||||
<div class="col-8 text-body text-right">
|
<div class="col-8 text-body text-right">
|
||||||
{{ data && doc.util.formatBytes(data.fileSize) }}
|
{{ data && doc.util.formatBytes(data.fileSize) }}
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="row col-12">
|
<div class="row col-12">
|
||||||
<div class="col-4 text-title text-left">วันที่อัปโหลด</div>
|
<div class="col-4 text-title text-left">วันที่อัปโหลด</div>
|
||||||
<div class="col-8 text-body text-right">
|
<div class="col-8 text-body text-right">
|
||||||
{{
|
{{
|
||||||
data &&
|
data &&
|
||||||
new Date(data.createdAt).toLocaleDateString('th', {
|
new Date(data.createdAt).toLocaleDateString('th', {
|
||||||
day: 'numeric',
|
day: 'numeric',
|
||||||
month: 'short',
|
month: 'short',
|
||||||
year: 'numeric',
|
year: 'numeric',
|
||||||
})
|
})
|
||||||
}}
|
}}
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12 q-mb-md q-mt-lg">
|
</div>
|
||||||
<q-separator color="grey-6" />
|
<div class="col-12 q-mb-md q-mt-lg">
|
||||||
</div>
|
<q-separator color="grey-6" />
|
||||||
<div class="col-12 row justify-center">
|
</div>
|
||||||
|
<div class="col-12 row justify-center">
|
||||||
<q-btn
|
<q-btn
|
||||||
unelevated
|
unelevated
|
||||||
color="primary"
|
color="primary"
|
||||||
size="md"
|
size="md"
|
||||||
class="col-12 btn"
|
class="col-12 btn"
|
||||||
@click="
|
@click="
|
||||||
() => data && doc.util.download(data.downloadUrl, data.fileName)
|
() => data && doc.util.download(data.downloadUrl, data.fileName)
|
||||||
"
|
"
|
||||||
style="border-radius:10px ;"
|
style="border-radius: 10px"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="22"
|
||||||
|
height="23"
|
||||||
|
viewBox="0 0 22 23"
|
||||||
|
fill="none"
|
||||||
>
|
>
|
||||||
<svg
|
<path
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
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"
|
||||||
width="22"
|
fill="white"
|
||||||
height="23"
|
/>
|
||||||
viewBox="0 0 22 23"
|
</svg>
|
||||||
fill="none"
|
<span class="q-pl-md">ดาวน์โหลด</span>
|
||||||
>
|
</q-btn>
|
||||||
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
@ -176,5 +195,4 @@ onMounted(async () => {
|
||||||
.btn {
|
.btn {
|
||||||
box-shadow: 0px 4px 10px 0px rgba(120, 207, 197, 0.721);
|
box-shadow: 0px 4px 10px 0px rgba(120, 207, 197, 0.721);
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue