แก้ไข pdf
This commit is contained in:
Thanit Konmek
parent
51f877403d
commit
3e59c2de43
5 changed files with 825 additions and 99 deletions
|
|
@ -82,7 +82,7 @@ const step04 = defineAsyncComponent(
|
|||
);
|
||||
|
||||
const router = useRouter();
|
||||
const step = ref<number>(1);
|
||||
const step = ref<number>(4);
|
||||
const stepper = ref<QStepper>();
|
||||
|
||||
const nextStep = () => {
|
||||
|
|
@ -97,11 +97,12 @@ const previousStep = () => {
|
|||
.q-stepper--horizontal .q-stepper__step-inner {
|
||||
padding: 0px;
|
||||
}
|
||||
.step .q-stepper__tab--done .q-stepper__title,.step .q-stepper__tab--active .q-stepper__title{
|
||||
color: #35473C !important;
|
||||
font-weight: 500 ;
|
||||
.step .q-stepper__tab--done .q-stepper__title,
|
||||
.step .q-stepper__tab--active .q-stepper__title {
|
||||
color: #35473c !important;
|
||||
font-weight: 500;
|
||||
}
|
||||
.step .q-stepper__header--standard-labels .q-stepper__tab{
|
||||
.step .q-stepper__header--standard-labels .q-stepper__tab {
|
||||
min-height: 60px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -92,7 +92,7 @@
|
|||
<div v-if="props.col.name == 'no'">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</div>
|
||||
<div v-else-if="props.col.name == 'educate'">
|
||||
<!-- <div v-else-if="props.col.name == 'educate'">
|
||||
<q-select
|
||||
:class="getClass(true)"
|
||||
hide-bottom-space
|
||||
|
|
@ -124,7 +124,7 @@
|
|||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
</div>
|
||||
</div> -->
|
||||
<div v-else @click="click(props)">
|
||||
{{ props.value }}
|
||||
</div>
|
||||
|
|
@ -145,23 +145,24 @@
|
|||
</div>
|
||||
<q-separator />
|
||||
<div class="flex justify-end q-pa-sm q-gutter-sm">
|
||||
<q-btn
|
||||
dense
|
||||
outline
|
||||
color="primary"
|
||||
icon="chevron_left"
|
||||
@click="previous"
|
||||
<q-btn
|
||||
dense
|
||||
outline
|
||||
color="primary"
|
||||
icon="chevron_left"
|
||||
@click="previous"
|
||||
class="q-pr-md"
|
||||
label="กรอกรายละเอียด">
|
||||
label="กรอกรายละเอียด"
|
||||
>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
dense
|
||||
unelevated
|
||||
label="บันทึก"
|
||||
color="public"
|
||||
@click="next"
|
||||
@click="save"
|
||||
class="q-px-md"
|
||||
><!-- icon="mdi-content-save-outline"
|
||||
><!-- icon="mdi-content-save-outline"
|
||||
<q-tooltip>บันทึก</q-tooltip> -->
|
||||
</q-btn>
|
||||
<!-- <q-btn dense flat round color="primary" icon="chevron_right" @click="next">
|
||||
|
|
@ -174,6 +175,7 @@
|
|||
import { ref } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import type { QInput } from "quasar";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
const props = defineProps({
|
||||
next: {
|
||||
|
|
@ -188,6 +190,8 @@ const props = defineProps({
|
|||
|
||||
const next = () => props.next();
|
||||
const previous = () => props.previous();
|
||||
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
|
||||
const { dialogMessage, messageError, showLoader, hideLoader } = mixin;
|
||||
|
||||
const $q = useQuasar();
|
||||
|
||||
|
|
@ -224,67 +228,67 @@ const rows = [
|
|||
no: "0ac56905-1a74-4606-a120-233340adde95",
|
||||
name: "นางนัทธ์ เหล่าสกุล",
|
||||
idcard: "9158455632145",
|
||||
educate: "",
|
||||
educate: "ปริญญาตรี",
|
||||
},
|
||||
{
|
||||
no: "0de607a0-b094-4a6d-9e30-979343ab5e53",
|
||||
name: "นางขรรค์ จันทรสมบัติ",
|
||||
idcard: "8558455632126",
|
||||
educate: "",
|
||||
educate: "ปริญญาตรี",
|
||||
},
|
||||
{
|
||||
no: "93ca7366-2a35-4f94-a331-9c23c9ea78d3",
|
||||
name: "นางโอภาส จรัสวงศ์",
|
||||
idcard: "8158455635425",
|
||||
educate: "",
|
||||
educate: "ปริญญาตรี",
|
||||
},
|
||||
{
|
||||
no: "d3777c19-2bd0-42df-90ce-c3eeeee55ac6",
|
||||
name: "นางธิญา หงษ์ทอง",
|
||||
idcard: "4558455632145",
|
||||
educate: "",
|
||||
educate: "ปริญญาตรี",
|
||||
},
|
||||
{
|
||||
no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
|
||||
name: "นางธนวิทย์ พิกุลเทพ",
|
||||
idcard: "5542455632145",
|
||||
educate: "",
|
||||
educate: "ปริญญาตรี",
|
||||
},
|
||||
{
|
||||
no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
|
||||
name: "นางหนึ่ง สตาภิรมย์",
|
||||
idcard: "7448455632145",
|
||||
educate: "",
|
||||
educate: "ปริญญาตรี",
|
||||
},
|
||||
{
|
||||
no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
|
||||
name: "นางสัจพร คมคาย",
|
||||
idcard: "1236455632145",
|
||||
educate: "",
|
||||
educate: "ปริญญาตรี",
|
||||
},
|
||||
{
|
||||
no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
|
||||
name: "นางตุลยากร ปรีดาศิริกุล",
|
||||
idcard: "1523455632145",
|
||||
educate: "",
|
||||
educate: "ปริญญาตรี",
|
||||
},
|
||||
{
|
||||
no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
|
||||
name: "นางบัลลังค์ จิรวาณิชย์",
|
||||
idcard: "1258455632145",
|
||||
educate: "",
|
||||
educate: "ปริญญาตรี",
|
||||
},
|
||||
{
|
||||
no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
|
||||
name: "นางคมคาย เรืองรังสรรค์",
|
||||
idcard: "8548455632145",
|
||||
educate: "",
|
||||
educate: "ปริญญาตรี",
|
||||
},
|
||||
{
|
||||
no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
|
||||
name: "นางพรทิพา คมคาย",
|
||||
idcard: "6598455632145",
|
||||
educate: "",
|
||||
educate: "ปริญญาตรี",
|
||||
},
|
||||
];
|
||||
const selected = ref([]);
|
||||
|
|
@ -299,6 +303,24 @@ const click = (e: any) => {
|
|||
console.log(e);
|
||||
};
|
||||
|
||||
const save = () => {
|
||||
if (selected.value.length > 0) {
|
||||
next();
|
||||
} else {
|
||||
dialogMessage(
|
||||
$q,
|
||||
"ข้อความแจ้งเตือน",
|
||||
"กรุณาเลือกรายชื่อ",
|
||||
"warning",
|
||||
undefined,
|
||||
"orange",
|
||||
undefined,
|
||||
undefined,
|
||||
true
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const selectData = (row: any) => {};
|
||||
|
||||
const refresh = () => {};
|
||||
|
|
|
|||
|
|
@ -1,7 +1,11 @@
|
|||
<template>
|
||||
<div>
|
||||
<div style="min-height: 70vh">
|
||||
<q-splitter v-model="splitterModel" style="height: 70vh">
|
||||
<q-splitter
|
||||
v-model="splitterModel"
|
||||
style="height: 70vh"
|
||||
@update:model-value="onchangePage"
|
||||
>
|
||||
<template v-slot:before>
|
||||
<div class="space">
|
||||
<div @click="setTab('main')" :class="getClass(tab == 'main')">
|
||||
|
|
@ -51,10 +55,76 @@
|
|||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-pdf q-ma-md q-pa-md" v-if="tab == 'main'">
|
||||
คำสั่ง
|
||||
<div class="card-pdf q-ma-md q-pa-md">
|
||||
<div class="q-pa-sm">
|
||||
<div
|
||||
class="justify-between items-center align-center q-py-sm row"
|
||||
>
|
||||
<q-btn
|
||||
class="text-grey"
|
||||
outline
|
||||
round
|
||||
@click="page = page > 1 ? page - 1 : page"
|
||||
>
|
||||
<q-icon name="mdi-chevron-left" />
|
||||
</q-btn>
|
||||
|
||||
<span class="body-2 grey--text">
|
||||
หน้าที่ {{ page }} จาก {{ numOfPages }}
|
||||
</span>
|
||||
|
||||
<q-btn
|
||||
class="text-grey"
|
||||
outline
|
||||
round
|
||||
@click="page = page < numOfPages ? page + 1 : page"
|
||||
>
|
||||
<q-icon name="mdi-chevron-right" />
|
||||
</q-btn>
|
||||
</div>
|
||||
<div class="pdfWidth">
|
||||
<!-- <VuePDF
|
||||
ref="vuePDFRef"
|
||||
:pdf="pdfData"
|
||||
:page="page"
|
||||
fit-parent
|
||||
/> -->
|
||||
<VuePdf :key="page" :src="pdfSrc" :page="page" />
|
||||
</div>
|
||||
<div
|
||||
class="justify-between items-center align-center q-py-sm row"
|
||||
>
|
||||
<q-btn
|
||||
class="text-grey"
|
||||
outline
|
||||
round
|
||||
@click="page = page > 1 ? page - 1 : page"
|
||||
>
|
||||
<q-icon name="mdi-chevron-left" />
|
||||
</q-btn>
|
||||
|
||||
<span class="body-2 grey--text">
|
||||
หน้าที่ {{ page }} จาก {{ numOfPages }}
|
||||
</span>
|
||||
|
||||
<q-btn
|
||||
class="text-grey"
|
||||
outline
|
||||
round
|
||||
@click="page = page < numOfPages ? page + 1 : page"
|
||||
>
|
||||
<q-icon name="mdi-chevron-right" />
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-pdf q-ma-md q-pa-md" v-else>เอกสารแนบท้าย</div>
|
||||
<!-- <div class="card-pdf q-ma-md q-pa-md" v-if="tab == 'main'">
|
||||
<pdf-viewer v-model:PDFV="vuePDFRef" />
|
||||
</div> -->
|
||||
<!-- <div class="card-pdf q-ma-md q-pa-md" v-else>
|
||||
<pdf-viewer v-model:PDFV="vuePDFRef" />
|
||||
</div> -->
|
||||
<!-- <pdf-viewer /> -->
|
||||
</template>
|
||||
|
||||
<template v-slot:separator>
|
||||
|
|
@ -70,26 +140,35 @@
|
|||
<div class="q-pa-md">
|
||||
<fieldset class="border q-pa-lg">
|
||||
<legend class="text-header">อัปโหลดไฟล์</legend>
|
||||
|
||||
<div>
|
||||
<label class="text-file">คำสั่ง</label>
|
||||
<q-file outlined v-model="fileOrder" label="เลือกไฟล์คำสั่ง">
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" />
|
||||
</template>
|
||||
</q-file>
|
||||
<div class="q-py-lg" />
|
||||
<label class="text-file">เอกสารแนบท้าย</label>
|
||||
<q-file
|
||||
outlined
|
||||
v-model="fileOrder"
|
||||
label="เลือกไฟล์เอกสารแนบท้าย"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" />
|
||||
</template>
|
||||
</q-file>
|
||||
</div>
|
||||
<q-form ref="myForm">
|
||||
<div>
|
||||
<label class="text-file">คำสั่ง</label>
|
||||
<q-file
|
||||
outlined
|
||||
v-model="fileOrder"
|
||||
label="เลือกไฟล์คำสั่ง"
|
||||
lazy-rules
|
||||
:rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" />
|
||||
</template>
|
||||
</q-file>
|
||||
<div class="q-py-lg" />
|
||||
<label class="text-file">เอกสารแนบท้าย</label>
|
||||
<q-file
|
||||
outlined
|
||||
v-model="fileTailer"
|
||||
label="เลือกไฟล์เอกสารแนบท้าย"
|
||||
lazy-rules
|
||||
:rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" />
|
||||
</template>
|
||||
</q-file>
|
||||
</div>
|
||||
</q-form>
|
||||
</fieldset>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -97,24 +176,21 @@
|
|||
</div>
|
||||
<q-separator />
|
||||
<div class="flex justify-end q-pa-sm q-gutter-sm">
|
||||
<q-btn
|
||||
dense
|
||||
outline
|
||||
color="primary"
|
||||
icon="chevron_left"
|
||||
@click="previous"
|
||||
class="q-pr-md"
|
||||
label="เลือกรายชื่อส่งสำเนา">
|
||||
</q-btn>
|
||||
<q-btn
|
||||
unelevated
|
||||
label="บันทึก"
|
||||
color="public"
|
||||
@click="next"
|
||||
> <!-- icon="mdi-content-save-outline"
|
||||
dense
|
||||
outline
|
||||
color="primary"
|
||||
icon="chevron_left"
|
||||
@click="previous"
|
||||
class="q-pr-md"
|
||||
label="เลือกรายชื่อส่งสำเนา"
|
||||
>
|
||||
</q-btn>
|
||||
<q-btn unelevated label="บันทึก" color="public" @click="save">
|
||||
<!-- icon="mdi-content-save-outline"
|
||||
<q-tooltip>บันทึก</q-tooltip> -->
|
||||
</q-btn>
|
||||
|
||||
|
||||
<!-- <q-btn flat round color="primary" icon="chevron_right" @click="next">
|
||||
<q-tooltip>ต่อไป</q-tooltip>
|
||||
</q-btn> -->
|
||||
|
|
@ -122,7 +198,29 @@
|
|||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { ref, onMounted } from "vue";
|
||||
// import { VuePDF, usePDF } from "@tato30/vue-pdf";
|
||||
// import type { PDFDocumentLoadingTask } from "@tato30/vue-pdf";
|
||||
import { VuePdf, createLoadingTask } from "vue3-pdfjs/esm";
|
||||
import { VuePdfPropsType } from "vue3-pdfjs/components/vue-pdf/vue-pdf-props"; // Prop type definitions can also be imported
|
||||
import { PDFDocumentProxy } from "pdfjs-dist/types/src/display/api";
|
||||
import type { QForm } from "quasar";
|
||||
|
||||
onMounted(() => {
|
||||
const loadingTask = createLoadingTask(pdfSrc.value);
|
||||
loadingTask.promise.then((pdf: PDFDocumentProxy) => {
|
||||
numOfPages.value = pdf.numPages;
|
||||
});
|
||||
});
|
||||
|
||||
const pdfSrc = ref<VuePdfPropsType["src"]>(
|
||||
"https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
|
||||
);
|
||||
const numOfPages = ref<number>(0);
|
||||
|
||||
const page = ref<number>(1);
|
||||
|
||||
const myForm = ref<QForm | null>(null);
|
||||
|
||||
const props = defineProps({
|
||||
next: {
|
||||
|
|
@ -138,11 +236,25 @@ const props = defineProps({
|
|||
const next = () => props.next();
|
||||
const previous = () => props.previous();
|
||||
|
||||
const splitterModel = ref<number>(50);
|
||||
const splitterModel = ref<number>(70);
|
||||
const tab = ref<string>("main");
|
||||
const fileOrder = ref<any>(null);
|
||||
const fileTailer = ref<any>(null);
|
||||
|
||||
const onchangePage = (val: any) => {
|
||||
console.log(val);
|
||||
};
|
||||
|
||||
const save = () => {
|
||||
if (myForm !== null) {
|
||||
myForm.value!.validate().then((success: Boolean) => {
|
||||
if (success) {
|
||||
// yay, models are correct
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const getClass = (val: boolean) => {
|
||||
return {
|
||||
"card-header-active q-px-lg q-py-md cursor-pointer": val,
|
||||
|
|
@ -152,6 +264,7 @@ const getClass = (val: boolean) => {
|
|||
|
||||
const setTab = (val: string) => {
|
||||
tab.value = val;
|
||||
page.value = 1;
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -204,6 +317,6 @@ const setTab = (val: string) => {
|
|||
border-radius: 10px;
|
||||
border: 1px solid #e9eaec;
|
||||
background-color: #e9eaec;
|
||||
height: 60vh;
|
||||
// height: 60vh;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue