hrms-user/src/modules/06_evaluate/components/step/step6.vue

106 lines
3.1 KiB
Vue

<script setup lang="ts">
import { ref } from "vue";
import ViewPDF from "@/modules/06_evaluate/components/viewstep/viewPDF.vue";
const fileEvaluation1 = ref<any>();
const pdfSrc = ref<any>();
const modalView = ref<boolean>(false);
function onClickViewPDF(file: any) {
pdfSrc.value = file.webkitRelativePath;
modalView.value = true;
}
</script>
<template>
<div class="row q-col-gutter-md">
<div class="col-6">
<q-card bordered style="border: 1px solid #d6dee1">
<div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
เอกสารเล 2
</div>
<div class="col-12"><q-separator /></div>
<div class="row">
<div class="col-12 q-pa-sm">
<div class="row q-col-gutter-md col-12">
<!-- <div class="col-xs-12 col-sm-6 row">
<q-btn
class="col-12"
outline
icon="download"
label="ดาวน์โหลดต้นแบบ"
color="primary"
>
<q-tooltip> ดาวนโหลดตนแบบ </q-tooltip></q-btn
>
</div> -->
<div class="col-xs-12 col-sm-6 row">
<q-btn
v-if="fileEvaluation1"
class="col-12"
outline
icon="visibility"
label="ดูไฟล์เอกสาร"
color="primary"
@click="onClickViewPDF(fileEvaluation1)"
>
<q-tooltip> ไฟลเอกสาร </q-tooltip></q-btn
>
</div>
<div class="col-xs-12 col-sm-11 row">
<q-file
v-model="fileEvaluation1"
class="col-12"
outlined
dense
hide-bottom-space
lazy-rules
accept=".pdf"
>
<template v-slot:prepend>
<q-icon name="attach_file" />
</template>
</q-file>
</div>
<div class="col-1 self-center text-center">
<q-btn flat round dense color="primary" icon="mdi-upload"
><q-tooltip>ปโหลดไฟล</q-tooltip></q-btn
>
</div>
</div>
</div>
</div>
</q-card>
</div>
</div>
<!-- Dialog Full Screen -->
<q-dialog
v-model="modalView"
persistent
:maximized="true"
transition-show="slide-up"
transition-hide="slide-down"
>
<q-card class="bg-white">
<div class="flex justify-end items-center align-center q-mr-md q-mt-sm">
<q-btn
icon="close"
unelevated
round
dense
style="color: #ff8080; background-color: #ffdede"
size="12px"
v-close-popup
/>
</div>
<div class="q-pa-md">
<ViewPDF />
</div>
</q-card>
</q-dialog>
</template>
<style scoped></style>