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

แก้ไข pdf

Browse source
This commit is contained in:
Thanit Konmek 2023-07-03 00:16:08 +07:00
parent 51f877403d
commit 3e59c2de43
5 changed files with 825 additions and 99 deletions
Download patch file Download diff file Expand all files Collapse all files

646
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

4
package.json
View file

@ -22,6 +22,7 @@
"@fullcalendar/timegrid": "^6.0.2", "@fullcalendar/timegrid": "^6.0.2",
"@fullcalendar/vue3": "^6.0.1", "@fullcalendar/vue3": "^6.0.1",
"@quasar/extras": "^1.15.8", "@quasar/extras": "^1.15.8",
"@tato30/vue-pdf": "^1.5.1",
"@vuepic/vue-datepicker": "^3.6.3", "@vuepic/vue-datepicker": "^3.6.3",
"bma-org-chart": "^0.0.7", "bma-org-chart": "^0.0.7",
"keycloak-js": "^20.0.2", "keycloak-js": "^20.0.2",
@ -31,7 +32,8 @@
"structure-chart": "^0.0.9", "structure-chart": "^0.0.9",
"vue": "^3.2.45", "vue": "^3.2.45",
"vue-router": "^4.1.6", "vue-router": "^4.1.6",
"vue3-datepicker": "^0.3.4" "vue3-datepicker": "^0.3.4",
"vue3-pdfjs": "^0.1.6"
}, },
"devDependencies": { "devDependencies": {
"@quasar/vite-plugin": "^1.3.0", "@quasar/vite-plugin": "^1.3.0",

11
src/modules/05_placement/components/OrderPlacement/detailOrderPlacement.vue
View file

@ -82,7 +82,7 @@ const step04 = defineAsyncComponent(
); );
const router = useRouter(); const router = useRouter();
const step = ref<number>(1); const step = ref<number>(4);
const stepper = ref<QStepper>(); const stepper = ref<QStepper>();
const nextStep = () => { const nextStep = () => {
@ -97,11 +97,12 @@ const previousStep = () => {
.q-stepper--horizontal .q-stepper__step-inner { .q-stepper--horizontal .q-stepper__step-inner {
padding: 0px; padding: 0px;
} }
.step .q-stepper__tab--done .q-stepper__title,.step .q-stepper__tab--active .q-stepper__title{ .step .q-stepper__tab--done .q-stepper__title,
color: #35473C !important; .step .q-stepper__tab--active .q-stepper__title {
font-weight: 500 ; 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; min-height: 60px;
} }
</style> </style>

66
src/modules/05_placement/components/OrderPlacement/step/step02.vue
View file

@ -92,7 +92,7 @@
<div v-if="props.col.name == 'no'"> <div v-if="props.col.name == 'no'">
{{ props.rowIndex + 1 }} {{ props.rowIndex + 1 }}
</div> </div>
<div v-else-if="props.col.name == 'educate'"> <!-- <div v-else-if="props.col.name == 'educate'">
<q-select <q-select
:class="getClass(true)" :class="getClass(true)"
hide-bottom-space hide-bottom-space
@ -124,7 +124,7 @@
</q-item> </q-item>
</template> </template>
</q-select> </q-select>
</div> </div> -->
<div v-else @click="click(props)"> <div v-else @click="click(props)">
{{ props.value }} {{ props.value }}
</div> </div>
@ -145,23 +145,24 @@
</div> </div>
<q-separator /> <q-separator />
<div class="flex justify-end q-pa-sm q-gutter-sm"> <div class="flex justify-end q-pa-sm q-gutter-sm">
<q-btn <q-btn
dense dense
outline outline
color="primary" color="primary"
icon="chevron_left" icon="chevron_left"
@click="previous" @click="previous"
class="q-pr-md" class="q-pr-md"
label="กรอกรายละเอียด"> label="กรอกรายละเอียด"
>
</q-btn> </q-btn>
<q-btn <q-btn
dense dense
unelevated unelevated
label="บันทึก" label="บันทึก"
color="public" color="public"
@click="next" @click="save"
class="q-px-md" class="q-px-md"
><!-- icon="mdi-content-save-outline" ><!-- icon="mdi-content-save-outline"
<q-tooltip>บันทึก</q-tooltip> --> <q-tooltip>บันทึก</q-tooltip> -->
</q-btn> </q-btn>
<!-- <q-btn dense flat round color="primary" icon="chevron_right" @click="next"> <!-- <q-btn dense flat round color="primary" icon="chevron_right" @click="next">
@ -174,6 +175,7 @@
import { ref } from "vue"; import { ref } from "vue";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import type { QInput } from "quasar"; import type { QInput } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
const props = defineProps({ const props = defineProps({
next: { next: {
@ -188,6 +190,8 @@ const props = defineProps({
const next = () => props.next(); const next = () => props.next();
const previous = () => props.previous(); const previous = () => props.previous();
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
const { dialogMessage, messageError, showLoader, hideLoader } = mixin;
const $q = useQuasar(); const $q = useQuasar();
@ -224,67 +228,67 @@ const rows = [
no: "0ac56905-1a74-4606-a120-233340adde95", no: "0ac56905-1a74-4606-a120-233340adde95",
name: "นางนัทธ์ เหล่าสกุล", name: "นางนัทธ์ เหล่าสกุล",
idcard: "9158455632145", idcard: "9158455632145",
educate: "", educate: "ปริญญาตรี",
}, },
{ {
no: "0de607a0-b094-4a6d-9e30-979343ab5e53", no: "0de607a0-b094-4a6d-9e30-979343ab5e53",
name: "นางขรรค์ จันทรสมบัติ", name: "นางขรรค์ จันทรสมบัติ",
idcard: "8558455632126", idcard: "8558455632126",
educate: "", educate: "ปริญญาตรี",
}, },
{ {
no: "93ca7366-2a35-4f94-a331-9c23c9ea78d3", no: "93ca7366-2a35-4f94-a331-9c23c9ea78d3",
name: "นางโอภาส จรัสวงศ์", name: "นางโอภาส จรัสวงศ์",
idcard: "8158455635425", idcard: "8158455635425",
educate: "", educate: "ปริญญาตรี",
}, },
{ {
no: "d3777c19-2bd0-42df-90ce-c3eeeee55ac6", no: "d3777c19-2bd0-42df-90ce-c3eeeee55ac6",
name: "นางธิญา หงษ์ทอง", name: "นางธิญา หงษ์ทอง",
idcard: "4558455632145", idcard: "4558455632145",
educate: "", educate: "ปริญญาตรี",
}, },
{ {
no: "1ccead6f-a851-4291-b3ab-a20757ecddbd", no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
name: "นางธนวิทย์ พิกุลเทพ", name: "นางธนวิทย์ พิกุลเทพ",
idcard: "5542455632145", idcard: "5542455632145",
educate: "", educate: "ปริญญาตรี",
}, },
{ {
no: "1ccead6f-a851-4291-b3ab-a20757ecddbd", no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
name: "นางหนึ่ง สตาภิรมย์", name: "นางหนึ่ง สตาภิรมย์",
idcard: "7448455632145", idcard: "7448455632145",
educate: "", educate: "ปริญญาตรี",
}, },
{ {
no: "1ccead6f-a851-4291-b3ab-a20757ecddbd", no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
name: "นางสัจพร คมคาย", name: "นางสัจพร คมคาย",
idcard: "1236455632145", idcard: "1236455632145",
educate: "", educate: "ปริญญาตรี",
}, },
{ {
no: "1ccead6f-a851-4291-b3ab-a20757ecddbd", no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
name: "นางตุลยากร ปรีดาศิริกุล", name: "นางตุลยากร ปรีดาศิริกุล",
idcard: "1523455632145", idcard: "1523455632145",
educate: "", educate: "ปริญญาตรี",
}, },
{ {
no: "1ccead6f-a851-4291-b3ab-a20757ecddbd", no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
name: "นางบัลลังค์ จิรวาณิชย์", name: "นางบัลลังค์ จิรวาณิชย์",
idcard: "1258455632145", idcard: "1258455632145",
educate: "", educate: "ปริญญาตรี",
}, },
{ {
no: "1ccead6f-a851-4291-b3ab-a20757ecddbd", no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
name: "นางคมคาย เรืองรังสรรค์", name: "นางคมคาย เรืองรังสรรค์",
idcard: "8548455632145", idcard: "8548455632145",
educate: "", educate: "ปริญญาตรี",
}, },
{ {
no: "1ccead6f-a851-4291-b3ab-a20757ecddbd", no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
name: "นางพรทิพา คมคาย", name: "นางพรทิพา คมคาย",
idcard: "6598455632145", idcard: "6598455632145",
educate: "", educate: "ปริญญาตรี",
}, },
]; ];
const selected = ref([]); const selected = ref([]);
@ -299,6 +303,24 @@ const click = (e: any) => {
console.log(e); 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 selectData = (row: any) => {};
const refresh = () => {}; const refresh = () => {};

197
src/modules/05_placement/components/OrderPlacement/step/step04.vue
View file

@ -1,7 +1,11 @@
<template> <template>
<div> <div>
<div style="min-height: 70vh"> <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> <template v-slot:before>
<div class="space"> <div class="space">
<div @click="setTab('main')" :class="getClass(tab == 'main')"> <div @click="setTab('main')" :class="getClass(tab == 'main')">
@ -51,10 +55,76 @@
</q-btn> </q-btn>
</div> </div>
</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>
<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>
<template v-slot:separator> <template v-slot:separator>
@ -70,26 +140,35 @@
<div class="q-pa-md"> <div class="q-pa-md">
<fieldset class="border q-pa-lg"> <fieldset class="border q-pa-lg">
<legend class="text-header">อัปโหลดไฟล์</legend> <legend class="text-header">อัปโหลดไฟล์</legend>
<q-form ref="myForm">
<div> <div>
<label class="text-file">คำสั่ง</label> <label class="text-file">คำสั่ง</label>
<q-file outlined v-model="fileOrder" label="เลือกไฟล์คำสั่ง"> <q-file
<template v-slot:prepend> outlined
<q-icon name="attach_file" /> v-model="fileOrder"
</template> label="เลือกไฟล์คำสั่ง"
</q-file> lazy-rules
<div class="q-py-lg" /> :rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']"
<label class="text-file">เอกสารแนบท้าย</label> >
<q-file <template v-slot:prepend>
outlined <q-icon name="attach_file" />
v-model="fileOrder" </template>
label="เลือกไฟล์เอกสารแนบท้าย" </q-file>
> <div class="q-py-lg" />
<template v-slot:prepend> <label class="text-file">เอกสารแนบท้าย</label>
<q-icon name="attach_file" /> <q-file
</template> outlined
</q-file> v-model="fileTailer"
</div> label="เลือกไฟล์เอกสารแนบท้าย"
lazy-rules
:rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']"
>
<template v-slot:prepend>
<q-icon name="attach_file" />
</template>
</q-file>
</div>
</q-form>
</fieldset> </fieldset>
</div> </div>
</template> </template>
@ -97,24 +176,21 @@
</div> </div>
<q-separator /> <q-separator />
<div class="flex justify-end q-pa-sm q-gutter-sm"> <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 <q-btn
unelevated dense
label="บันทึก" outline
color="public" color="primary"
@click="next" icon="chevron_left"
> <!-- icon="mdi-content-save-outline" @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-tooltip>บันทึก</q-tooltip> -->
</q-btn> </q-btn>
<!-- <q-btn flat round color="primary" icon="chevron_right" @click="next"> <!-- <q-btn flat round color="primary" icon="chevron_right" @click="next">
<q-tooltip>ต่อไป</q-tooltip> <q-tooltip>ต่อไป</q-tooltip>
</q-btn> --> </q-btn> -->
@ -122,7 +198,29 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <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({ const props = defineProps({
next: { next: {
@ -138,11 +236,25 @@ const props = defineProps({
const next = () => props.next(); const next = () => props.next();
const previous = () => props.previous(); const previous = () => props.previous();
const splitterModel = ref<number>(50); const splitterModel = ref<number>(70);
const tab = ref<string>("main"); const tab = ref<string>("main");
const fileOrder = ref<any>(null); const fileOrder = ref<any>(null);
const fileTailer = 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) => { const getClass = (val: boolean) => {
return { return {
"card-header-active q-px-lg q-py-md cursor-pointer": val, "card-header-active q-px-lg q-py-md cursor-pointer": val,
@ -152,6 +264,7 @@ const getClass = (val: boolean) => {
const setTab = (val: string) => { const setTab = (val: string) => {
tab.value = val; tab.value = val;
page.value = 1;
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -204,6 +317,6 @@ const setTab = (val: string) => {
border-radius: 10px; border-radius: 10px;
border: 1px solid #e9eaec; border: 1px solid #e9eaec;
background-color: #e9eaec; background-color: #e9eaec;
height: 60vh; // height: 60vh;
} }
</style> </style>