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

feat: get info from api

Browse source
This commit is contained in:
Methapon2001 2023-12-22 14:16:44 +07:00
parent d7d0aa9739
commit 0f3d69800c
No known key found for this signature in database
GPG key ID: 849924FEF46BD132
3 changed files with 110 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
src/assets/cover.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 22 KiB

16
src/router/index.ts
View file

@ -2,23 +2,23 @@ import { createRouter, createWebHistory } from 'vue-router'
/* import HomeView from '@/views/HomeView.vue' */
const MainLayout = () => import("@/views/MainLayout.vue");
const HomeView = () => import("@/views/HomeView.vue");
const MainLayout = () => import('@/views/MainLayout.vue')
const HomeView = () => import('@/views/HomeView.vue')
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
path: '/:id',
name: 'home',
component: MainLayout,
children: [
{
path: "/",
name: "HomeView",
path: '/:id',
name: 'HomeView',
component: HomeView,
},
]
],
},
{
path: '/:pathMatch(.*)*',
@ -31,8 +31,8 @@ const router = createRouter({
],
})
router.beforeEach((to, from, next) => {
next();
router.beforeEach((_to, _from, next) => {
next()
})
export default router

105
src/views/HomeView.vue
View file

@ -1,51 +1,128 @@
<script setup lang="ts"></script>
<script setup lang="ts">
import doc from '@/api/document'
import cover from '@/assets/cover.png'
import type { StorageFile } from '@/interface/response/storage'
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
const data = ref<StorageFile & { downloadUrl: string }>()
const metadata = ref<{ [key: string]: string }>()
const route = useRoute()
onMounted(async () => {
const result = await doc.info(
'เล่ม 2',
route.params.id as string,
'1-เอกสาร 2'
)
if (result) {
data.value = result
metadata.value = result.description
? JSON.parse(result.description)
: undefined
console.log(result)
console.log(result)
}
})
</script>
<template>
<div class="row col-xs-12 col-sm-11 col-md-10 col-lg-9 justify-center">
<div class="col-12 text-left">
<div class="text-h6 text-weight-bold q-mb-md">วิธีชนะมิตรและจูงใจคน</div>
<div class="text-h6 text-weight-bold q-mb-md">{{ data?.fileName }}</div>
</div>
<div class="row col-12">
<div class="col-xs-12 col-sm-4 q-my-sm">
<iframe src="https://drive.google.com/file/d/1yaSwM6hsXphmMX5N0q-v8-HUCkhSvqg4/preview" class="frame" allow="autoplay"></iframe>
<img :src="cover" class="frame" style="object-fit: cover" />
</div>
<div class="col-xs-12 col-sm-8 q-px-md">
<div class="row col-12 justify-center">
<div class="row col-xs-12 col-sm-10 q-col-gutter-y-lg text-left">
<div class="row col-12 q-mt-sm">
<div class="col-4 text-title">ชื่อเรื่อง</div>
<div class="col-8 text-body">วิธีชนะมิตรและจูงใจคน</div>
<div class="col-8 text-body">{{ data?.title || '-' }}</div>
</div>
<div class="row col-12">
<div class="col-4 text-title">เจ้าของผลงาน</div>
<div class="col-8 text-body">ธัญลักษณ์ รอดกูล</div>
<div class="col-8 text-body">{{ metadata?.author || '-' }}</div>
</div>
<div class="row col-12">
<div class="col-4 text-title">กลุ่ม/หมวดหมู่</div>
<div class="col-8 text-body">ศิลปะ</div>
<div class="col-8 text-body">
{{
(data &&
data.category.length > 0 &&
data.category.join(', ')) ||
'-'
}}
</div>
</div>
<div class="row col-12">
<div class="col-4 text-title">คำสำคัญ</div>
<div class="col-8 text-body">ศิลปะ , ภาพวาด</div>
<div class="col-8 text-body">
{{
(data &&
data.keyword.length > 0 &&
data.keyword.join(', ')) ||
'-'
}}
</div>
</div>
<div class="row col-12">
<div class="col-4 text-title">ขนาดไฟล์</div>
<div class="col-8 text-body">753.55 KB</div>
<div class="col-8 text-body">
{{ data && doc.util.formatBytes(data.fileSize) }}
</div>
</div>
<div class="row col-12">
<div class="col-4 text-title">วันที่อัปโหลด</div>
<div class="col-8 text-body">9 พ.ย. 2566</div>
<div class="col-8 text-body">
{{
data &&
new Date(data.createdAt).toLocaleDateString('th', {
day: 'numeric',
month: 'short',
year: 'numeric',
})
}}
</div>
</div>
<div class="col-12 row">
<q-btn color="primary" rounded size="md" unelevated class="col-6 btn">
<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"/>
<q-btn
unelevated
rounded
color="primary"
size="md"
class="col-6 btn"
@click="
() =>
data &&
doc.util.download(
data.downloadUrl,
data.fileName,
data.fileType
)
"
>
<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>
@ -61,13 +138,13 @@
.frame {
width: 100%;
height: 500px;
border: 1px solid #C8D3DB !important;
border: 1px solid #c8d3db !important;
border-radius: 5px;
background-color: white;
box-shadow: 0px 4px 20px 0px rgba(224, 235, 240, 0.537);
}
.text-title {
color: #35473C;
color: #35473c;
font-weight: 600;
}
.text-body {