138 lines
3.6 KiB
Vue
138 lines
3.6 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted } from "vue";
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
import { useQuasar } from "quasar";
|
|
|
|
import http from "@/plugins/http";
|
|
import config from "@/app.config";
|
|
import { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";
|
|
|
|
import type { FileFormType } from "@/modules/10_registry/interface/index/Main";
|
|
|
|
const fileList = ref<FileFormType[]>([]);
|
|
const store = useRegistryInFormationStore();
|
|
const $q = useQuasar();
|
|
const mixin = useCounterMixin();
|
|
const { showLoader, hideLoader, messageError, date2Thai } = mixin;
|
|
|
|
const modalHistory = ref<boolean>(false);
|
|
/** ตัวแปรข้อมูล */
|
|
|
|
function onHistory() {
|
|
modalHistory.value = true;
|
|
}
|
|
|
|
/** get data */
|
|
function getData() {
|
|
showLoader();
|
|
http
|
|
.get(
|
|
config.API.fileByFileUser(
|
|
"ระบบทะเบียนประวัติ",
|
|
"เอกสารหลักฐานเพิ่มเติม",
|
|
store.citizenId
|
|
)
|
|
)
|
|
.then((res) => {
|
|
const data = res.data;
|
|
fileList.value = data;
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
setTimeout(() => {
|
|
hideLoader();
|
|
}, 1500);
|
|
});
|
|
}
|
|
|
|
/**
|
|
* ดาวน์โหลดลิงค์ไฟล์
|
|
* @param fileName file name
|
|
*/
|
|
function downloadFile(fileName: string) {
|
|
showLoader();
|
|
http
|
|
.get(
|
|
config.API.fileByFile(
|
|
"ระบบทะเบียนประวัติ",
|
|
"เอกสารหลักฐานเพิ่มเติม",
|
|
store.citizenId,
|
|
fileName
|
|
)
|
|
)
|
|
.then((res) => {
|
|
const data = res.data.downloadUrl;
|
|
window.open(data, "_blank");
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(async () => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
|
|
onMounted(() => {
|
|
getData();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="col-12">
|
|
<q-toolbar class="q-px-none q-mt-md">
|
|
<span class="text-blue-6 text-weight-bold text-body1">เอกสาร ก.พ.7 </span>
|
|
</q-toolbar>
|
|
<q-card bordered class="row col-12" style="border: 1px solid #d6dee1">
|
|
<div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
|
|
ไฟล์เอกสาร ก.พ.7
|
|
</div>
|
|
<div class="col-12"><q-separator /></div>
|
|
<div class="row col-12 q-col-gutter-y-sm q-pa-sm">
|
|
<div v-if="fileList.length > 0" class="col-xs-12 row">
|
|
<q-list class="full-width rounded-borders" bordered separator>
|
|
<q-item
|
|
clickable
|
|
v-ripple
|
|
v-for="data in fileList"
|
|
:key="data.id"
|
|
class="items-center"
|
|
>
|
|
<q-item-section>{{ data.fileName }}</q-item-section>
|
|
<q-space />
|
|
<div>
|
|
<q-btn
|
|
size="12px"
|
|
flat
|
|
round
|
|
dense
|
|
color="blue"
|
|
icon="mdi-download"
|
|
@click="downloadFile(data.fileName)"
|
|
><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
|
|
>
|
|
</div>
|
|
</q-item>
|
|
</q-list>
|
|
</div>
|
|
|
|
<div class="col-12" v-else>
|
|
<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
|
|
</div>
|
|
</div>
|
|
</q-card>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.absolute_button {
|
|
position: absolute;
|
|
right: 5px;
|
|
top: -20px;
|
|
}
|
|
|
|
.fix_top {
|
|
justify-content: start !important;
|
|
}
|
|
</style>
|