diff --git a/src/modules/05_command/components/FormTemplate.vue b/src/modules/05_command/components/FormTemplate.vue index 2362dc3c..ccfff2f9 100644 --- a/src/modules/05_command/components/FormTemplate.vue +++ b/src/modules/05_command/components/FormTemplate.vue @@ -44,9 +44,9 @@ const onSave = () => { showLoader(); http .put(config.API.commandType + `/text/${commandId.value}`, { - detailHeader: textHeader.value, - detailBody: textBody.value, - detailFooter: textFooter.value, + detailHeader: textHeader.value ?? "", + detailBody: textBody.value ?? "", + detailFooter: textFooter.value ?? "", }) .then(async () => { await fetchDataTemplate(commandId.value); diff --git a/src/modules/05_command/components/ViewPdf.vue b/src/modules/05_command/components/ViewPdf.vue index b9d755df..ec87a014 100644 --- a/src/modules/05_command/components/ViewPdf.vue +++ b/src/modules/05_command/components/ViewPdf.vue @@ -7,23 +7,16 @@ import config from "@/app.config"; import axios from "axios"; import { useCounterMixin } from "@/stores/mixin"; -import genReport from "@/plugins/genreport"; - import type { DataTemplateDetail } from "@/modules/05_command/interface/response/Main"; +import http from "@/plugins/http"; const $q = useQuasar(); const mixin = useCounterMixin(); -const { - dialogConfirm, - success, - showLoader, - hideLoader, - dialogRemove, - messageError, -} = mixin; +const { dialogConfirm, success, showLoader, hideLoader, messageError } = mixin; -const idOrder = defineModel("idOrder", { required: true }); // แยก tab +const commandId = defineModel("commandId", { required: true }); // id คำสั่ง const type = defineModel("type", { required: true }); // แยก tab +// รายละเอียดคำสั่ง const dataTemplateDetail = defineModel( "dataTemplateDetail", { @@ -31,77 +24,63 @@ const dataTemplateDetail = defineModel( } ); -const documentFile = ref(null); // file -const isLoadPDF = ref(false); - -/** download file */ -async function downloadFile() { - showLoader(); - const body = { - template: "command_test", - reportName: "docx-report", - data: { - issue: ".....", // - title: "....", // - commandNo: "....", - commandYear: ".....", - commandTitle: dataTemplateDetail.value.name, //name - detailHeader: dataTemplateDetail.value.detailHeader, - detailBody: dataTemplateDetail.value.detailBody, - detailFooter: dataTemplateDetail.value.detailFooter, - commandDate: "๑ สิงหาคม ๒๕๖๗", - name: "นายสมชาย ใจดี", - position: "ผู้อำนวยการเขตพระนคร", - }, - }; - - await genReport(body, `คำสั่ง`); -} - -/** uplaod file */ -function clickUpload(file: File | null) { - const dataFile = file; -} +const documentFile = ref(null); // file อัปโหลด +const isLoadPDF = ref(false); // Loading display pdf /** page PDF */ -const pdfSrc = ref(); -const page = ref(1); -const numOfPages = ref(0); +const pdfSrc = ref(null); // PDF path display +const page = ref(1); // หน้าที่แสดง +const numOfPages = ref(0); // จำนวนหน้า PDF ทั้งหมด const splitterModel = ref(14); - +const typeFile = ref(type.value === "cover" ? "docx" : "xlsx"); // นามสกุลไฟล์ cover=docx หรือ attachment=xlsx +// next page PDF function nextPage() { if (page.value < numOfPages.value) { page.value++; } } +// back page PDF function backPage() { if (page.value !== 1) { page.value--; } } +const { fetchDataTemplate } = defineProps({ + fetchDataTemplate: { + type: Function, + required: true, + }, +}); + +/** + * ฟังก์ชั่น fillin ข้อมูลคำสั่งและแสดงตัวอย่าง Template คำสั่งในหน้า UI + * @param dataTemple รายละเอียดคำสั่ง + */ async function fetchDocumentTemplate(dataTemple: DataTemplateDetail) { showLoader(); + const reportName = await `${dataTemplateDetail.value.code}_${type.value}`; + const body = { - template: "command_test", - reportName: "docx-report", + template: reportName, + reportName: `${typeFile.value}-report`, data: { - issue: ".....", // - title: "....", // - commandNo: "....", - commandYear: ".....", - commandTitle: dataTemple.name, //name + issue: "............", // + title: "......", // + commandNo: "......", + commandYear: "......", + commandTitle: dataTemple.name, detailHeader: dataTemple.detailHeader, detailBody: dataTemple.detailBody, detailFooter: dataTemple.detailFooter, - commandDate: "๑ สิงหาคม ๒๕๖๗", - name: "นายสมชาย ใจดี", - position: "ผู้อำนวยการเขตพระนคร", + commandDate: "..................", + name: "....................................", + position: "ผู้อำนวยการสำนัก/เขต", }, }; await axios - .post(config.API.reportTemplate + `/docx/html`, body, { + .post(config.API.reportTemplate + `/${typeFile.value}`, body, { headers: { accept: "application/pdf", "content-Type": "application/json", @@ -112,23 +91,124 @@ async function fetchDocumentTemplate(dataTemple: DataTemplateDetail) { isLoadPDF.value = false; const blob = new Blob([res.data]); const objectUrl = URL.createObjectURL(blob); - const pdfData = await usePDF(`${objectUrl}`); + // แสดง PDF หลังจากโหลดเสร็จ setTimeout(() => { pdfSrc.value = pdfData.pdf.value; numOfPages.value = pdfData.pages.value; isLoadPDF.value = true; + hideLoader(); }, 1500); }) - .catch(async (e) => { - messageError($q, e); - }) - .finally(() => { + .catch((e) => { + // ไม่พบข้อมูล Template + messageError($q, "", "ไม่พบข้อมูล Template"); + isLoadPDF.value = false; hideLoader(); }); } +/** + * ฟังชั่นอัปโหลดไฟล์ Template คำสั่ง/บัญชีแนบท้าย + */ +async function uploadTemplate() { + dialogConfirm( + $q, + async () => { + showLoader(); + const reportName = await `${dataTemplateDetail.value.code}_${type.value}`; + await axios + .post( + config.API.reportTemplate + + `/${typeFile.value}/upload?report_name=${reportName}`, + documentFile.value, + { + headers: { + accept: documentFile.value?.type, + "content-Type": "application/octet-stream", + }, + } + ) + .then(async (res) => { + // update ชื่อไฟล์คำสั่ง/บัญชีแนบท้าย ในข้อมูลำสั่ง + await updateReportName(reportName); + success($q, "อัปโหลดไฟล์สำเร็จ"); + hideLoader(); + + // โหลดไฟล์ Template ที่แสดงในหน้า UI ใหม่ + fetchDocumentTemplate(dataTemplateDetail.value); + fetchDataTemplate(commandId.value); + }) + .catch(async (e) => { + messageError($q, e); + }) + .finally(() => { + documentFile.value = null; + }); + }, + "ยืนยันการอัปโหลดไฟล์ต้นแบบ", + "คุณต้องการอัปโหลดไฟล์ต้นแบบนี้ใช่หรือไม่?" + ); +} + +/** + * ฟังก์ชั่นดาวน์โหลดไฟล์ Template คำสั่ง/บัญชีแนบท้าย + */ +async function downloadTemplate() { + const check = await (type.value == "cover" + ? dataTemplateDetail.value.fileCover + : dataTemplateDetail.value.fileAttachment); + await axios + .post( + config.API.reportTemplate + `/${typeFile.value}/download`, + { + template: check, + }, + { + headers: { + accept: "application/pdf", + "content-Type": "application/json", + }, + responseType: "blob", + } + ) + .then(async (res) => { + var a = document.createElement("a"); + a.href = URL.createObjectURL(res.data); + a.download = `${dataTemplateDetail.value.code}_${type.value}.${typeFile.value}`; + a.click(); + hideLoader(); + }) + .catch(async (e) => { + messageError($q, e); + hideLoader(); + }); +} + +/** + * ฟังก์ชั่นแก้ไขชื่อไฟล์คำสั่ง/บัญชีแนบท้าย + * @param name ชื่อไฟล์ + */ +async function updateReportName(name: string) { + await http + .put(config.API.commandType + `/${type.value}/${commandId.value}`, { + name: name, + }) + .then(async (res) => { + hideLoader(); + }) + .catch(async (e) => { + messageError($q, e); + }); +} + +// working on click command list +watch(dataTemplateDetail, () => { + fetchDocumentTemplate(dataTemplateDetail.value); +}); + +// working on change tab onMounted(() => { fetchDocumentTemplate(dataTemplateDetail.value); }); @@ -146,9 +226,9 @@ defineExpose({ outlined dense v-model="documentFile" - :label="`ไฟล์ต้นแบบ${type == 'order' ? 'คำสั่ง' : 'บัญชีแนบท้าย'}`" + :label="`ไฟล์ต้นแบบ${type == 'cover' ? 'คำสั่ง' : 'บัญชีแนบท้าย'}`" hide-bottom-space - :accept="type == 'order' ? '.docx' : '.pdf'" + :accept="`.${type == 'cover' ? 'docx' : 'xlsx'}`" clearable > diff --git a/src/modules/05_command/interface/response/Main.ts b/src/modules/05_command/interface/response/Main.ts index 21d04973..19972022 100644 --- a/src/modules/05_command/interface/response/Main.ts +++ b/src/modules/05_command/interface/response/Main.ts @@ -15,6 +15,8 @@ interface DataTemplateDetail { detailHeader: string; detailBody: string; detailFooter: string; + fileCover?: string; + fileAttachment?: string; isActive: boolean; commandSysId: string; } diff --git a/src/modules/05_command/stores/main.ts b/src/modules/05_command/stores/main.ts index b8660b95..3f553a8b 100644 --- a/src/modules/05_command/stores/main.ts +++ b/src/modules/05_command/stores/main.ts @@ -2,7 +2,7 @@ import { defineStore } from "pinia"; import { ref } from "vue"; export const useDataStore = defineStore("commandStore", () => { - const currentTab = ref("order"); + const currentTab = ref("cover"); const toolbarOptions = ref([ ["left", "center", "right", "justify"], ["token", "bold", "italic", "underline", "subscript", "superscript"], diff --git a/src/modules/05_command/views/lists.vue b/src/modules/05_command/views/lists.vue index 98de23b1..07a88a33 100644 --- a/src/modules/05_command/views/lists.vue +++ b/src/modules/05_command/views/lists.vue @@ -25,14 +25,7 @@ import TemplateDetail from "@/modules/05_command/components/FormTemplate.vue"; const $q = useQuasar(); const mixin = useCounterMixin(); const store = useDataStore(); -const { - dialogConfirm, - success, - showLoader, - hideLoader, - dialogRemove, - messageError, -} = mixin; +const { dialogConfirm, success, showLoader, hideLoader, messageError } = mixin; const childTemplateDetailRef = ref | null>( null @@ -55,11 +48,11 @@ const activeOptions = ref([ // Tabs const tabs = ref([ { - value: "order", + value: "cover", label: "คำสั่ง", }, { - value: "account", + value: "attachment", label: "บัญชีแนบท้าย", }, { @@ -71,8 +64,8 @@ const tabs = ref([ const dataCategory = ref([]); //ข้อมูล หมวดหมู่ const categoryOP = ref([]); // options หมวดหมู่ -const idOrder = ref(""); // Id คำสั่ง -const activeOrderId = ref(""); // Id คำสั่งที่เลือก +const commandId = ref(""); // Id คำสั่ง +const activeCommandId = ref(""); // Id คำสั่งที่เลือก const name = ref(""); // ชื่อคำสั่ง const category = ref(""); // หมวดหมู่ const listOrder = ref([]); // list คำสั่ง @@ -140,7 +133,7 @@ function fetchCommandSys() { * @param val สถานะ true/false */ function searchByStatus() { - activeOrderId.value = ""; + activeCommandId.value = ""; page.value = 1; pageSize.value = 13; fetchCommandType(); @@ -151,7 +144,7 @@ function searchByStatus() { * @param data ข้อมูลคำสั่ง */ function onDialogEdit(data: ListOrder) { - idOrder.value = data.id; + commandId.value = data.id; name.value = data.name; status.value = data.isActive; category.value = data.commandSysId; @@ -184,7 +177,7 @@ function onDialogEdit(data: ListOrder) { * ปิด dialog */ function closeDialog() { - idOrder.value = ""; + commandId.value = ""; isEdit.value = false; dialogFormCommand.value = false; name.value = ""; @@ -199,7 +192,7 @@ function onSubmit() { dialogConfirm($q, async () => { showLoader(); await http - .put(config.API.commandType + `/${idOrder.value}`, { + .put(config.API.commandType + `/${commandId.value}`, { name: name.value, commandSysId: category.value, isActive: status.value, @@ -222,7 +215,7 @@ function onSubmit() { * เก็บ id list คำสั่งที่เลือก เพื่อใช้ class */ function selectInbox(data: ListOrder) { - activeOrderId.value = data.id; + activeCommandId.value = data.id; fetchDataCommandTypeId(data.id); } @@ -239,7 +232,7 @@ async function fetchDataCommandTypeId(id: string) { dataTemplateDetail.value = data; await Promise.all([ childTemplateDetailRef?.value?.fetchData(data), - childPageOrderRef?.value?.fetchDocumentTemplate(data), + // childPageOrderRef?.value?.fetchDocumentTemplate(data), ]); }) .catch((err) => { @@ -310,15 +303,11 @@ onMounted(async () => { - + @@ -329,13 +318,14 @@ onMounted(async () => { - + @click="onDialogEdit(item)" + /> + - - - + + + --> + -
-
- - - {{ "ไม่พบข้อมูล" }} -
- +
ไม่พบข้อมูล
 @@ -415,7 +388,7 @@ onMounted(async () => {
-
+
{ - + - + @@ -457,7 +432,7 @@ onMounted(async () => { ref="childTemplateDetailRef" v-model:type="store.currentTab" v-model:data-template-detail="dataTemplateDetail as DataTemplateDetail" - :command-id="activeOrderId" + :command-id="activeCommandId" :fetch-data-template="fetchDataCommandTypeId" /> @@ -483,7 +458,7 @@ onMounted(async () => {
- +
{ } } } else { - console.log("errror===>", e); - - q.dialog({ - component: CustomComponent, - componentProps: { - title: `พบข้อผิดพลาด`, - message: `ข้อมูลผิดพลาดทำให้เกิดการไม่ตอบสนองต่อการเรียกใช้งานดูเว็บไซต์`, - icon: "warning", - color: "red", - onlycancel: true, - }, - }); + if (msg === "") { + q.dialog({ + component: CustomComponent, + componentProps: { + title: `พบข้อผิดพลาด`, + message: `ข้อมูลผิดพลาดทำให้เกิดการไม่ตอบสนองต่อการเรียกใช้งานดูเว็บไซต์`, + icon: "warning", + color: "red", + onlycancel: true, + }, + }); + } else { + q.dialog({ + component: CustomComponent, + componentProps: { + title: `พบข้อผิดพลาด`, + message: msg, + icon: "warning", + color: "red", + onlycancel: true, + }, + }); + } } };