1124 lines
37 KiB
Vue
1124 lines
37 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted, onUnmounted, computed, watch } from "vue";
|
|
import { VuePDF, usePDF } from "@tato30/vue-pdf";
|
|
import type { PDFDocumentLoadingTask } from "pdfjs-dist/types/src/display/api";
|
|
import type { QForm } from "quasar";
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
import { useQuasar } from "quasar";
|
|
import { useRoute } from "vue-router";
|
|
import http from "@/plugins/http";
|
|
import config from "@/app.config";
|
|
import axios from "axios";
|
|
import genReport from "@/plugins/genreport";
|
|
|
|
import { useOrderPlacementDataStore } from "@/modules/10_order/store";
|
|
|
|
const DataStore = useOrderPlacementDataStore();
|
|
const mixin = useCounterMixin();
|
|
const {
|
|
date2Thai,
|
|
messageError,
|
|
showLoader,
|
|
hideLoader,
|
|
dialogConfirm,
|
|
success,
|
|
} = mixin;
|
|
const route = useRoute();
|
|
const $q = useQuasar();
|
|
|
|
const orderId_params = route.params.orderid;
|
|
const dialog = ref<boolean>(false);
|
|
const dialogFileUpload = ref<boolean>(false);
|
|
const splitterModel = ref<number>(70);
|
|
const tab = ref<string>("main");
|
|
|
|
const order = ref<string>("");
|
|
const code = ref<string>("");
|
|
const years = ref<number>(new Date().getDate());
|
|
const date = ref<Date | null>(null);
|
|
const fileOrder = ref<any>(null);
|
|
const fileTailer = ref<any>(null);
|
|
|
|
const OrderPDFUpload = ref<string>("");
|
|
const TailerPDFUpload = ref<string>("");
|
|
|
|
const orderAttachmentPdf = ref<string>("");
|
|
|
|
const statusOrder = ref<string>();
|
|
const orderName = ref<string>("");
|
|
const orderStatusName = ref<string>("");
|
|
|
|
const orderId = ref<string>(orderId_params.toString());
|
|
onMounted(async () => {
|
|
if (orderId.value) {
|
|
await fetchAttachment(orderId.value);
|
|
await fecthstatusOrder();
|
|
await getCommandDetail();
|
|
}
|
|
});
|
|
|
|
// เช็คว่าต้องมีแนบท้ายไหม code ที่เพิ่มคืออันที่ไม่มีแนบท้าย
|
|
const attachmentStatus = computed(() => {
|
|
return code.value != "c-pm-10" &&
|
|
code.value != "c-pm-11" &&
|
|
code.value != "c-pm-12" &&
|
|
code.value != "c-pm-16" &&
|
|
code.value != "c-pm-18" &&
|
|
code.value != "c-pm-19" &&
|
|
code.value != "c-pm-20" &&
|
|
code.value != "c-pm-21" &&
|
|
code.value != "c-pm-23" &&
|
|
code.value != "c-pm-25" &&
|
|
code.value != "c-pm-26" &&
|
|
code.value != "c-pm-27" &&
|
|
code.value != "c-pm-28" &&
|
|
code.value != "c-pm-29" &&
|
|
code.value != "c-pm-30" &&
|
|
code.value != "c-pm-31" &&
|
|
code.value != "c-pm-32" &&
|
|
code.value != "c-pm-38"
|
|
? true
|
|
: false;
|
|
});
|
|
|
|
// เช็คว่าต้องไป gen report ที่ server เพิ่มไหม code ที่เพิ่มคือคำสั่งใหม่ที่ต้องไป gen report อีกรอบ
|
|
const genReportStatus = computed(() => {
|
|
return code.value == "c-pm-19" ||
|
|
code.value == "c-pm-20" ||
|
|
code.value == "c-pm-25" ||
|
|
code.value == "c-pm-26" ||
|
|
code.value == "c-pm-27" ||
|
|
code.value == "c-pm-28" ||
|
|
code.value == "c-pm-29" ||
|
|
code.value == "c-pm-30" ||
|
|
code.value == "c-pm-31" ||
|
|
code.value == "c-pm-32"
|
|
? true
|
|
: false;
|
|
});
|
|
|
|
// เรียกข้อมูลคำสั่ง
|
|
const getCommandDetail = async () => {
|
|
showLoader();
|
|
await http
|
|
.get(config.API.detailOrder(orderId.value))
|
|
.then(async (res) => {
|
|
const data = await res.data.result;
|
|
|
|
DataStore.typeOrder = data.orderTypeCode.toUpperCase();
|
|
const orderTypeCode = await data.orderTypeCode;
|
|
|
|
code.value = orderTypeCode ?? "";
|
|
orderName.value = res.data.result.orderTitle;
|
|
orderStatusName.value = data.orderStatusName;
|
|
|
|
fetchReportCover("pdf", orderId.value);
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
hideLoader();
|
|
});
|
|
};
|
|
|
|
// โหลดคำสั่ง
|
|
const downloadCover = async (type: string) => {
|
|
genReport(dataCover.value, `คำสั่ง ${orderName.value}`, type);
|
|
};
|
|
|
|
// โหลด เอกสารแนบท้าย
|
|
const downloadAttachment = async (type: string) => {
|
|
genReport(dataAttachment.value, `คำสั่ง ${orderName.value}`, type);
|
|
};
|
|
|
|
const dataCover = ref<any>();
|
|
// เรียกไฟล์ คำสั่ง
|
|
const fetchReportCover = async (type: string, orderId: string) => {
|
|
showLoader();
|
|
await http
|
|
.get(config.API.reportOrderCover(type, orderId, code.value))
|
|
.then(async (res: any) => {
|
|
genPDf(res.data.result);
|
|
dataCover.value = res.data.result;
|
|
})
|
|
.catch(async (e) => {
|
|
messageError($q, e);
|
|
hideLoader();
|
|
});
|
|
};
|
|
|
|
const dataAttachment = ref<any>();
|
|
// เรียกไฟล์ เอกสารแนบท้าย
|
|
const fetchReportAttachment = async (type: string, orderId: string) => {
|
|
showLoader();
|
|
await http
|
|
.get(config.API.reportOrderAttachment(type, orderId, code.value))
|
|
.then(async (res) => {
|
|
genPDf(res.data.result);
|
|
dataAttachment.value = res.data.result;
|
|
})
|
|
.catch(async (e) => {
|
|
messageError($q, e);
|
|
hideLoader();
|
|
});
|
|
};
|
|
|
|
function genPDf(data: any) {
|
|
axios
|
|
.post(config.API.reportTemplate + `/docx`, data, {
|
|
headers: {
|
|
accept: "application/pdf",
|
|
"content-Type": "application/json",
|
|
},
|
|
responseType: "blob",
|
|
})
|
|
.then(async (res) => {
|
|
const blob = new Blob([res.data]);
|
|
const objectUrl = URL.createObjectURL(blob);
|
|
|
|
const pdfData = await usePDF(`${objectUrl}`);
|
|
showLoader();
|
|
setTimeout(() => {
|
|
pdfSrc.value = pdfData.pdf.value;
|
|
numOfPages.value = pdfData.pages.value;
|
|
hideLoader();
|
|
}, 1500);
|
|
})
|
|
.catch(async (e) => {
|
|
messageError($q, e);
|
|
hideLoader();
|
|
});
|
|
}
|
|
|
|
// Fetch file upload & detail
|
|
const fetchAttachment = async (orderId: string) => {
|
|
await http
|
|
.get(config.API.attachmentOrder(orderId))
|
|
.then(async (res) => {
|
|
let response = res.data.result;
|
|
|
|
order.value = response.orderNo;
|
|
years.value = Number(response.orderYear);
|
|
if (response.signDate !== undefined && response.signDate != "") {
|
|
date.value = response.signDate;
|
|
}
|
|
if (response.orderFileUrl !== null) {
|
|
OrderPDFUpload.value = response.orderFileUrl;
|
|
}
|
|
if (response.attachmentFileUrl !== null) {
|
|
TailerPDFUpload.value = response.attachmentFileUrl;
|
|
}
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
});
|
|
};
|
|
// สถานะคำสั่ง
|
|
const fecthstatusOrder = async () => {
|
|
await http
|
|
.get(config.API.orderReady(orderId.value))
|
|
.then((res) => {
|
|
let status = res.data.result;
|
|
statusOrder.value = status.result;
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
});
|
|
};
|
|
// แสดงไฟล์ PDF
|
|
const viewPDF = async (pdf: string) => {
|
|
const pdfData = await usePDF(`${pdf}`);
|
|
showLoader();
|
|
setTimeout(() => {
|
|
pdfSrc.value = pdfData.pdf.value;
|
|
numOfPages.value = pdfData.pages.value;
|
|
hideLoader();
|
|
}, 1500);
|
|
};
|
|
// แสดงไฟล์อัพโหล PDF
|
|
const viewPDFUpload = async (pdf: string) => {
|
|
const pdfData = await usePDF(`${pdf}`);
|
|
showLoader();
|
|
setTimeout(() => {
|
|
pdfFileUploadSrc.value = pdfData.pdf.value;
|
|
numOfPages.value = pdfData.pages.value;
|
|
hideLoader();
|
|
}, 1500);
|
|
};
|
|
|
|
watch(tab, () => {
|
|
if (tab.value === "main") {
|
|
fetchReportCover("pdf", orderId.value);
|
|
}
|
|
if (tab.value === "second") {
|
|
fetchReportAttachment("pdf", orderId.value);
|
|
}
|
|
});
|
|
|
|
const pdfSrc = ref<PDFDocumentLoadingTask | undefined>();
|
|
const pdfFileUploadSrc = ref<PDFDocumentLoadingTask | undefined>();
|
|
const numOfPages = ref<number>(0);
|
|
const page = ref<number>(1);
|
|
const vuePDFRef = ref<any>(null);
|
|
|
|
const myForm = ref<QForm | null>(null);
|
|
const myFormUpload = ref<QForm | null>(null);
|
|
|
|
const props = defineProps({
|
|
next: {
|
|
type: Function,
|
|
default: () => console.log("not function"),
|
|
},
|
|
previous: {
|
|
type: Function,
|
|
default: () => console.log("not function"),
|
|
},
|
|
});
|
|
|
|
// const next = () => props.next();
|
|
const previous = () => props.previous();
|
|
|
|
const onchangePage = () => {
|
|
if (vuePDFRef !== null) {
|
|
vuePDFRef.value.reload();
|
|
}
|
|
};
|
|
|
|
// การอัพโหลดไฟล์คำสั่งและเอกสารแนบท้าย
|
|
const saveUpload = () => {
|
|
if (myFormUpload.value !== null) {
|
|
myFormUpload.value!.validate().then((success: Boolean) => {
|
|
if (success) {
|
|
dialogConfirm($q, async () => {
|
|
showLoader();
|
|
await postfileOrder();
|
|
if (attachmentStatus.value || code.value === "c-pm-38") {
|
|
await postfileTailer();
|
|
}
|
|
await fetchAttachment(orderId.value);
|
|
await fecthstatusOrder();
|
|
hideLoader();
|
|
});
|
|
}
|
|
});
|
|
}
|
|
};
|
|
|
|
// แก้ไขรายละเอียดคำสั่ง
|
|
const saveDetail = () => {
|
|
if (myForm.value !== null) {
|
|
myForm.value!.validate().then((success: Boolean) => {
|
|
if (success) {
|
|
// ยืนยันการบันทึก
|
|
dialogConfirm($q, async () => {
|
|
showLoader();
|
|
|
|
await putOrderData(); // บันทึกข้อมูลในส่วนของรายละเอียด
|
|
await fetchReportCover("pdf", orderId.value); // ดึงรายงานคำสั่งใหม่
|
|
|
|
// เช็คประเภทคำสั่งถ้าไม่ใช่ type เหล่านี้จะมีแนบท้าย
|
|
if (attachmentStatus.value) {
|
|
// ดึงรายงานในส่วนของแนบท้ายมาใหม่
|
|
await fetchReportAttachment("pdf", orderId.value);
|
|
|
|
// เช็คว่าถ้าอยู่ใน tab ของแนบท้ายไหมถ้าอยู่เข้าเงื่อนไขนี้
|
|
if (tab.value == "second") {
|
|
// แสดงผลส่วนของแนบท้ายใหม่
|
|
await viewPDF(orderAttachmentPdf.value);
|
|
}
|
|
}
|
|
|
|
// ดึงข้อมูลสถานะการออกคำสั่ง (Y = ออกคำสั่งได้แล้ว, N = เงื่อนไขยังไม่ครบไม่สามารถกดออกคำสั่งได้)
|
|
await fecthstatusOrder();
|
|
|
|
hideLoader();
|
|
});
|
|
}
|
|
});
|
|
}
|
|
};
|
|
|
|
// ฟังก์ชั่นการบันทึกข้อมูลในส่วนของรายละเอียด
|
|
const putOrderData = async () => {
|
|
const orderData = {
|
|
orderNo: order.value,
|
|
orderYear: years.value.toString(),
|
|
signDate: date.value,
|
|
};
|
|
await http
|
|
.put(config.API.attachmentOrder(orderId.value), orderData)
|
|
.then((res) => {
|
|
success($q, "บันทึกข้อมูลสำเร็จ");
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
});
|
|
};
|
|
// บันทึกไฟล์คำสั่ง
|
|
const postfileOrder = async () => {
|
|
const formData = new FormData();
|
|
formData.append("File", fileOrder.value);
|
|
await http
|
|
.post(config.API.attachmentOrderId(orderId.value), formData)
|
|
.then((res) => {
|
|
success($q, "บันทึกข้อมูลสำเร็จ");
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
});
|
|
};
|
|
//บันทึกไฟล์ เอกสารแนบท้าย
|
|
const postfileTailer = async () => {
|
|
const formData = new FormData();
|
|
formData.append("File", fileTailer.value);
|
|
await http
|
|
.post(config.API.attachmentFileId(orderId.value), formData)
|
|
.then(() => {
|
|
success($q, "บันทึกข้อมูลสำเร็จ");
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
});
|
|
};
|
|
// การออกคำสั่ง
|
|
const clickExecute = async (id: string) => {
|
|
dialogConfirm(
|
|
$q,
|
|
async () => {
|
|
showLoader();
|
|
await http
|
|
.put(config.API.executeOrder(id))
|
|
.then((res) => {
|
|
success($q, "ออกคำสั่งสำเร็จ");
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(async () => {
|
|
await fecthstatusOrder();
|
|
await getCommandDetail();
|
|
hideLoader();
|
|
});
|
|
},
|
|
"ยืนยันการออกคำสั่ง",
|
|
"ต้องการยืนยันการออกคำสั่งนี้ใช่หรือไม่?"
|
|
);
|
|
};
|
|
const validateFormUpload = () => {
|
|
if (
|
|
(attachmentStatus.value || code.value === "c-pm-38") &&
|
|
fileOrder.value !== null &&
|
|
fileTailer.value !== null
|
|
) {
|
|
return true;
|
|
} else if (fileOrder.value !== null) {
|
|
return true;
|
|
} else {
|
|
return false;
|
|
}
|
|
};
|
|
|
|
const validateForm = () => {
|
|
return (
|
|
order.value.trim() !== "" && years.value !== null && date.value !== null
|
|
);
|
|
};
|
|
|
|
const getClass = (val: boolean) => {
|
|
return {
|
|
"card-header-active q-px-lg q-py-md cursor-pointer": val,
|
|
"card-header q-px-lg q-py-md cursor-pointer": !val,
|
|
};
|
|
};
|
|
const setTab = (val: string) => {
|
|
tab.value = val;
|
|
page.value = 1;
|
|
};
|
|
|
|
const viewFileUpload = async (url: string) => {
|
|
pdfFileUploadSrc.value = undefined;
|
|
await viewPDFUpload(url);
|
|
|
|
dialogFileUpload.value = true;
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<div style="min-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')">
|
|
<div class="q-pr-sm">คำสั่ง</div>
|
|
<q-btn
|
|
v-if="orderStatusName != 'ออกคำสั่งแล้ว'"
|
|
size="12px"
|
|
flat
|
|
dense
|
|
icon="mdi-download"
|
|
:disable="tab !== 'main'"
|
|
:color="tab !== 'main' ? 'grey' : 'add'"
|
|
>
|
|
<q-tooltip>ดาวน์โหลด</q-tooltip>
|
|
<q-menu>
|
|
<q-list style="min-width: 150px">
|
|
<q-item
|
|
clickable
|
|
v-close-popup
|
|
@click="downloadCover('pdf')"
|
|
>
|
|
<q-item-section avatar
|
|
><q-icon color="red" name="mdi-file-pdf"
|
|
/></q-item-section>
|
|
<q-item-section>ไฟล์ .PDF</q-item-section>
|
|
</q-item>
|
|
<q-item
|
|
clickable
|
|
v-close-popup
|
|
@click="downloadCover('docx')"
|
|
>
|
|
<q-item-section avatar
|
|
><q-icon color="blue" name="mdi-file-word"
|
|
/></q-item-section>
|
|
<q-item-section>ไฟล์ .docx</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-menu>
|
|
</q-btn>
|
|
</div>
|
|
<div
|
|
v-if="attachmentStatus"
|
|
@click="setTab('second')"
|
|
:class="getClass(tab == 'second')"
|
|
>
|
|
<div class="q-pr-sm">เอกสารแนบท้าย</div>
|
|
<q-btn
|
|
v-if="orderStatusName != 'ออกคำสั่งแล้ว'"
|
|
size="12px"
|
|
flat
|
|
dense
|
|
:color="tab !== 'second' ? 'grey' : 'add'"
|
|
icon="mdi-download"
|
|
:disable="tab !== 'second'"
|
|
>
|
|
<q-tooltip>ดาวน์โหลด</q-tooltip>
|
|
<q-menu>
|
|
<q-list style="min-width: 150px">
|
|
<q-item
|
|
clickable
|
|
v-close-popup
|
|
@click="downloadAttachment('pdf')"
|
|
>
|
|
<!-- type="a"
|
|
:href="orderAttachmentPdf"
|
|
target="_blank" -->
|
|
<q-item-section avatar
|
|
><q-icon color="red" name="mdi-file-pdf"
|
|
/></q-item-section>
|
|
<q-item-section>ไฟล์ .PDF</q-item-section>
|
|
</q-item>
|
|
<q-item
|
|
clickable
|
|
v-close-popup
|
|
@click="downloadAttachment('xlsx')"
|
|
>
|
|
<!-- type="a"
|
|
:href="orderAttachmentXlsx"
|
|
target="_blank" -->
|
|
<q-item-section avatar
|
|
><q-icon color="green-7" name="mdi-file-excel"
|
|
/></q-item-section>
|
|
<q-item-section>ไฟล์ .xls</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-menu>
|
|
</q-btn>
|
|
</div>
|
|
<q-space />
|
|
<q-btn
|
|
class="text-dark"
|
|
flat
|
|
dense
|
|
icon="mdi-fullscreen"
|
|
color="add"
|
|
@click="dialog = true"
|
|
/>
|
|
</div>
|
|
<q-separator style="margin-top: -1px; z-index: 1" />
|
|
<q-card bordered class="card-pdf q-ma-md q-pa-md">
|
|
<div class="justify-between items-center align-center q-pb-sm row">
|
|
<q-btn
|
|
class="text-dark bg-grey-4"
|
|
flat
|
|
dense
|
|
@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-dark bg-grey-4"
|
|
flat
|
|
dense
|
|
@click="page = page < numOfPages ? page + 1 : page"
|
|
>
|
|
<q-icon name="mdi-chevron-right" />
|
|
</q-btn>
|
|
</div>
|
|
<div class="pdfWidth">
|
|
<VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
|
|
<!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
|
|
</div>
|
|
<div class="justify-between items-center align-center q-pt-sm row">
|
|
<q-btn
|
|
class="text-dark bg-grey-4"
|
|
flat
|
|
dense
|
|
@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-dark bg-grey-4"
|
|
flat
|
|
dense
|
|
@click="page = page < numOfPages ? page + 1 : page"
|
|
>
|
|
<q-icon name="mdi-chevron-right" />
|
|
</q-btn>
|
|
</div>
|
|
</q-card>
|
|
</template>
|
|
|
|
<template v-slot:separator>
|
|
<q-avatar
|
|
color="primary"
|
|
text-color="white"
|
|
size="30px"
|
|
icon="drag_indicator"
|
|
/>
|
|
</template>
|
|
|
|
<template v-slot:after>
|
|
<div class="q-pa-md q-gutter-y-md">
|
|
<q-form ref="myFormUpload">
|
|
<fieldset class="border q-px-lg q-py-sm">
|
|
<legend class="text-header q-px-sm">อัปโหลดไฟล์</legend>
|
|
<div class="q-gutter-y-md q-mb-md">
|
|
<div>
|
|
<label class="text-file">คำสั่ง</label>
|
|
<div v-if="OrderPDFUpload != ''" class="text-right">
|
|
<q-btn
|
|
size="12px"
|
|
flat
|
|
dense
|
|
color="primary"
|
|
icon="mdi-eye"
|
|
@click="viewFileUpload(OrderPDFUpload)"
|
|
>
|
|
<q-tooltip>ดูไฟล์คำสั่ง</q-tooltip>
|
|
</q-btn>
|
|
<q-btn
|
|
type="a"
|
|
:href="OrderPDFUpload"
|
|
size="12px"
|
|
flat
|
|
dense
|
|
color="red"
|
|
icon="mdi-download"
|
|
target="_blank"
|
|
>
|
|
<q-tooltip>ดาวน์โหลดไฟล์คำสั่ง</q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
<q-file
|
|
v-if="orderStatusName != 'ออกคำสั่งแล้ว'"
|
|
outlined
|
|
dense
|
|
v-model="fileOrder"
|
|
label="เลือกไฟล์คำสั่ง"
|
|
hide-bottom-space
|
|
:rules="[(val) => val || 'กรุณาเลือกไฟล์ไฟล์คำสั่ง']"
|
|
accept=".pdf"
|
|
>
|
|
<template v-slot:prepend>
|
|
<q-icon name="attach_file" />
|
|
</template>
|
|
</q-file>
|
|
</div>
|
|
<div v-if="attachmentStatus || code === 'c-pm-38'">
|
|
<label class="text-file">เอกสารแนบท้าย</label>
|
|
<div v-if="TailerPDFUpload != ''" class="text-right">
|
|
<q-btn
|
|
size="12px"
|
|
flat
|
|
dense
|
|
color="primary"
|
|
icon="mdi-eye"
|
|
@click="viewFileUpload(TailerPDFUpload)"
|
|
>
|
|
<q-tooltip>ดูเอกสารแนบท้าย</q-tooltip>
|
|
</q-btn>
|
|
<q-btn
|
|
type="a"
|
|
:href="TailerPDFUpload"
|
|
size="12px"
|
|
flat
|
|
dense
|
|
color="red"
|
|
icon="mdi-download"
|
|
target="_blank"
|
|
>
|
|
<q-tooltip>ดาวน์โหลดเอกสารแนบท้าย</q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
|
|
<q-file
|
|
v-if="orderStatusName != 'ออกคำสั่งแล้ว'"
|
|
outlined
|
|
dense
|
|
v-model="fileTailer"
|
|
label="เลือกไฟล์เอกสารแนบท้าย"
|
|
hide-bottom-space
|
|
:rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']"
|
|
accept=".pdf"
|
|
>
|
|
<template v-slot:prepend>
|
|
<q-icon name="attach_file" />
|
|
</template>
|
|
</q-file>
|
|
</div>
|
|
|
|
<!-- บันทึกอัพโหลดเอกสาร -->
|
|
<div
|
|
v-if="orderStatusName != 'ออกคำสั่งแล้ว'"
|
|
class="row col-12 q-mt-md"
|
|
>
|
|
<q-space></q-space>
|
|
<q-btn
|
|
unelevated
|
|
label="บันทึก"
|
|
:color="
|
|
validateFormUpload() &&
|
|
orderStatusName != 'ออกคำสั่งแล้ว'
|
|
? 'public'
|
|
: 'grey'
|
|
"
|
|
:disable="
|
|
!validateFormUpload() ||
|
|
orderStatusName == 'ออกคำสั่งแล้ว'
|
|
"
|
|
@click="saveUpload"
|
|
>
|
|
</q-btn>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</q-form>
|
|
|
|
<q-form ref="myForm">
|
|
<fieldset class="border q-px-lg q-py-sm">
|
|
<legend class="text-header q-px-sm">รายละเอียด</legend>
|
|
<div class="q-gutter-y-md q-mb-md">
|
|
<div>
|
|
<label class="text-file">เลขที่คำสั่ง</label>
|
|
<q-input
|
|
:outlined="true"
|
|
dense
|
|
:readonly="!true"
|
|
:borderless="!true"
|
|
v-model="order"
|
|
:rules="[(val) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]"
|
|
hide-bottom-space
|
|
:label="`${'เลขที่คำสั่ง'}`"
|
|
:disable="orderStatusName == 'ออกคำสั่งแล้ว'"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label class="text-file">ปีที่ออกคำสั่ง</label>
|
|
<datepicker
|
|
:disabled="orderStatusName == 'ออกคำสั่งแล้ว'"
|
|
menu-class-name="modalfix"
|
|
v-model="years"
|
|
:locale="'th'"
|
|
autoApply
|
|
year-picker
|
|
:enableTimePicker="false"
|
|
week-start="0"
|
|
>
|
|
<template #year="{ year }">{{ year + 543 }}</template>
|
|
<template #year-overlay-value="{ value }">{{
|
|
parseInt(value + 543)
|
|
}}</template>
|
|
<template #trigger>
|
|
<q-input
|
|
:disable="orderStatusName == 'ออกคำสั่งแล้ว'"
|
|
outlined
|
|
dense
|
|
:model-value="years + 543"
|
|
:rules="[
|
|
(val) => !!val || `${'กรุณาเลือกปีที่ออกคำสั่ง'}`,
|
|
]"
|
|
hide-bottom-space
|
|
:label="`${'ปีที่ออกคำสั่ง'}`"
|
|
>
|
|
<template v-slot:prepend>
|
|
<q-icon
|
|
name="event"
|
|
class="cursor-pointer"
|
|
style="color: var(--q-grey)"
|
|
>
|
|
</q-icon>
|
|
</template>
|
|
</q-input>
|
|
</template>
|
|
</datepicker>
|
|
</div>
|
|
<div>
|
|
<label class="text-file">วันที่ลงนาม</label>
|
|
<datepicker
|
|
:disabled="orderStatusName == 'ออกคำสั่งแล้ว'"
|
|
menu-class-name="modalfix"
|
|
v-model="date"
|
|
:locale="'th'"
|
|
autoApply
|
|
borderless
|
|
:enableTimePicker="false"
|
|
week-start="0"
|
|
>
|
|
<template #year="{ year }">
|
|
{{ year + 543 }}
|
|
</template>
|
|
<template #year-overlay-value="{ value }">
|
|
{{ parseInt(value + 543) }}
|
|
</template>
|
|
<template #trigger>
|
|
<q-input
|
|
:disable="orderStatusName == 'ออกคำสั่งแล้ว'"
|
|
outlined
|
|
dense
|
|
class="full-width datepicker"
|
|
hide-bottom-space
|
|
:model-value="date != null ? date2Thai(date) : null"
|
|
:label="`${'วันที่ลงนาม'}`"
|
|
:rules="[
|
|
(val) => !!val || `${'กรุณาเลือกวันที่ลงนาม'}`,
|
|
]"
|
|
>
|
|
<template v-slot:prepend>
|
|
<q-icon
|
|
name="event"
|
|
class="cursor-pointer"
|
|
style="color: var(--q-grey)"
|
|
>
|
|
</q-icon>
|
|
</template>
|
|
</q-input>
|
|
</template>
|
|
</datepicker>
|
|
</div>
|
|
|
|
<!-- บันทึกรายละเอียดคำสั่ง -->
|
|
<div
|
|
v-if="orderStatusName != 'ออกคำสั่งแล้ว'"
|
|
class="row col-12 q-mt-md"
|
|
>
|
|
<q-space></q-space>
|
|
<q-btn
|
|
unelevated
|
|
label="บันทึก"
|
|
:color="
|
|
validateForm() && orderStatusName != 'ออกคำสั่งแล้ว'
|
|
? 'public'
|
|
: 'grey'
|
|
"
|
|
:disable="
|
|
!validateForm() || orderStatusName == 'ออกคำสั่งแล้ว'
|
|
"
|
|
@click="saveDetail"
|
|
>
|
|
</q-btn>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</q-form>
|
|
</div>
|
|
</template>
|
|
</q-splitter>
|
|
</div>
|
|
<q-separator />
|
|
<div class="flex justify-end q-pa-sm q-gutter-sm">
|
|
<q-btn
|
|
v-if="orderStatusName !== 'ออกคำสั่งแล้ว'"
|
|
dense
|
|
outline
|
|
color="primary"
|
|
icon="chevron_left"
|
|
@click="previous"
|
|
class="q-pr-md"
|
|
label="เลือกรายชื่อส่งสำเนา"
|
|
>
|
|
</q-btn>
|
|
|
|
<!-- ออกคำสั่ง -->
|
|
<q-btn
|
|
v-if="orderStatusName !== 'ออกคำสั่งแล้ว'"
|
|
:disable="statusOrder == 'N'"
|
|
unelevated
|
|
label="ออกคำสั่ง"
|
|
:color="statusOrder == 'Y' ? 'public' : 'grey'"
|
|
>
|
|
<q-menu>
|
|
<q-list style="min-width: 150px">
|
|
<q-item clickable v-close-popup @click="clickExecute(orderId)">
|
|
<q-item-section>ออกคำสั่งทันที</q-item-section>
|
|
</q-item>
|
|
<q-item clickable v-close-popup disabled>
|
|
<q-item-section>ส่งไปลงนาม</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-menu>
|
|
</q-btn>
|
|
|
|
<q-btn
|
|
v-else
|
|
disable
|
|
unelevated
|
|
label="ออกคำสั่งเสร็จสิ้น"
|
|
color="green"
|
|
></q-btn>
|
|
</div>
|
|
|
|
<q-dialog
|
|
v-model="dialog"
|
|
persistent
|
|
:maximized="true"
|
|
transition-show="slide-up"
|
|
transition-hide="slide-down"
|
|
>
|
|
<q-card class="bg-white text-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>
|
|
<q-card-section bordered class="card-pdf q-ma-md q-pa-md">
|
|
<div class="justify-between items-center align-center q-pb-sm row">
|
|
<q-btn
|
|
class="text-dark bg-grey-4"
|
|
flat
|
|
dense
|
|
@click="page = page > 1 ? page - 1 : page"
|
|
>
|
|
<q-icon name="mdi-chevron-left" />
|
|
</q-btn>
|
|
|
|
<span class="body-2 grey--text text-black">
|
|
หน้าที่ {{ page }} จาก {{ numOfPages }}
|
|
</span>
|
|
|
|
<q-btn
|
|
class="text-dark bg-grey-4"
|
|
flat
|
|
dense
|
|
@click="page = page < numOfPages ? page + 1 : page"
|
|
>
|
|
<q-icon name="mdi-chevron-right" />
|
|
</q-btn>
|
|
</div>
|
|
<div class="pdfWidth">
|
|
<VuePDF
|
|
ref="vuePDFRef"
|
|
:pdf="pdfSrc"
|
|
:page="page"
|
|
fit-parent
|
|
:scale="0.1"
|
|
/>
|
|
<!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
|
|
</div>
|
|
<div class="justify-between items-center align-center q-pt-sm row">
|
|
<q-btn
|
|
class="text-dark bg-grey-4"
|
|
flat
|
|
dense
|
|
@click="page = page > 1 ? page - 1 : page"
|
|
>
|
|
<q-icon name="mdi-chevron-left" />
|
|
</q-btn>
|
|
|
|
<span class="body-2 grey--text text-black">
|
|
หน้าที่ {{ page }} จาก {{ numOfPages }}
|
|
</span>
|
|
|
|
<q-btn
|
|
class="text-dark bg-grey-4"
|
|
flat
|
|
dense
|
|
@click="page = page < numOfPages ? page + 1 : page"
|
|
>
|
|
<q-icon name="mdi-chevron-right" />
|
|
</q-btn>
|
|
</div>
|
|
</q-card-section>
|
|
</q-card>
|
|
</q-dialog>
|
|
|
|
<q-dialog
|
|
v-model="dialogFileUpload"
|
|
persistent
|
|
:maximized="true"
|
|
transition-show="slide-up"
|
|
transition-hide="slide-down"
|
|
>
|
|
<q-card class="bg-white text-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>
|
|
<q-card-section bordered class="card-pdf q-ma-md q-pa-md">
|
|
<div class="justify-between items-center align-center q-pb-sm row">
|
|
<q-btn
|
|
class="text-dark bg-grey-4"
|
|
flat
|
|
dense
|
|
@click="page = page > 1 ? page - 1 : page"
|
|
>
|
|
<q-icon name="mdi-chevron-left" />
|
|
</q-btn>
|
|
|
|
<span class="body-2 grey--text text-black">
|
|
หน้าที่ {{ page }} จาก {{ numOfPages }}
|
|
</span>
|
|
|
|
<q-btn
|
|
class="text-dark bg-grey-4"
|
|
flat
|
|
dense
|
|
@click="page = page < numOfPages ? page + 1 : page"
|
|
>
|
|
<q-icon name="mdi-chevron-right" />
|
|
</q-btn>
|
|
</div>
|
|
<div class="pdfWidth">
|
|
<VuePDF
|
|
ref="vuePDFRef"
|
|
:pdf="pdfFileUploadSrc"
|
|
:page="page"
|
|
fit-parent
|
|
:scale="0.1"
|
|
/>
|
|
<!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
|
|
</div>
|
|
<div class="justify-between items-center align-center q-pt-sm row">
|
|
<q-btn
|
|
class="text-dark bg-grey-4"
|
|
flat
|
|
dense
|
|
@click="page = page > 1 ? page - 1 : page"
|
|
>
|
|
<q-icon name="mdi-chevron-left" />
|
|
</q-btn>
|
|
|
|
<span class="body-2 grey--text text-black">
|
|
หน้าที่ {{ page }} จาก {{ numOfPages }}
|
|
</span>
|
|
|
|
<q-btn
|
|
class="text-dark bg-grey-4"
|
|
flat
|
|
dense
|
|
@click="page = page < numOfPages ? page + 1 : page"
|
|
>
|
|
<q-icon name="mdi-chevron-right" />
|
|
</q-btn>
|
|
</div>
|
|
</q-card-section>
|
|
</q-card>
|
|
</q-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.border {
|
|
border-radius: 10px;
|
|
border: 1px solid #e9eaec;
|
|
}
|
|
|
|
.text-header {
|
|
color: #34373c;
|
|
font-size: 1rem;
|
|
font-weight: 300;
|
|
}
|
|
|
|
.text-file {
|
|
padding-top: 5px;
|
|
color: #34373c;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.space {
|
|
background-color: #e9eaec61;
|
|
display: flex;
|
|
z-index: 3;
|
|
}
|
|
|
|
.card-header {
|
|
margin-top: 5px;
|
|
background-color: transparent;
|
|
padding: 2px !important;
|
|
border-radius: 10px 10px 0px 0px;
|
|
width: 200px;
|
|
display: flex;
|
|
justify-content: center;
|
|
font-weight: normal;
|
|
align-items: center;
|
|
}
|
|
|
|
.card-header-active {
|
|
margin-top: 5px;
|
|
margin-left: -1px;
|
|
background-color: white;
|
|
padding: 2px !important;
|
|
border-radius: 10px 10px 0px 0px;
|
|
border: 1px solid #e9eaec;
|
|
width: 200px;
|
|
display: flex;
|
|
justify-content: center;
|
|
border-bottom-style: none;
|
|
font-weight: 600;
|
|
align-items: center;
|
|
}
|
|
|
|
.card-pdf {
|
|
border-radius: 10px;
|
|
border: 1px solid #e9eaec;
|
|
background-color: #e9eaec61;
|
|
// height: 60vh;
|
|
}
|
|
</style>
|