รายละเอียดคำสั่ง => Tab พรีวิวคำสั่ง

src/modules/18_command/components/Step/3_ReceivedCopy.vue

@@ -302,8 +302,8 @@ defineExpose({
                       dense
                       v-model="props.row.sendCC"
                       :rules="[
-                        (val) => !!val || `${'กรุณาเลือกช่องทางการส่งสำเนา'}`,
+                        (val:string) => !!val || `${'กรุณาเลือกช่องทางการส่งสำเนา'}`,
-                        (val) =>
+                        (val:string) =>
                           val.length > 0 || `${'กรุณาเลือกช่องทางการส่งสำเนา'}`,
                       ]"
                       :label="`${'เลือกช่องทางการส่งสำเนา'}`"

src/modules/18_command/components/Step/4_Attached.vue

@@ -1,33 +1,28 @@
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
 import { VuePDF, usePDF } from "@tato30/vue-pdf";
-import axios from "axios";
 import { useQuasar } from "quasar";
+import type { PDFDocumentLoadingTask } from "pdfjs-dist/types/src/display/api";
+import axios from "axios";
 
+import { useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import genReport from "@/plugins/genreport";
+import genReportXLSX from "@/plugins/genreportxlsx";
 
-import type { PDFDocumentLoadingTask } from "pdfjs-dist/types/src/display/api";
+import type { DataFileOrder } from "@/modules/18_command/interface/response/Main";
 
 import { useCounterMixin } from "@/stores/mixin";
 
 const $q = useQuasar();
+const route = useRoute();
 const mixin = useCounterMixin();
-const {
+const { messageError, showLoader, hideLoader } = mixin;
-  date2Thai,
+
-  messageError,
+const commandId = ref<string>(route.params.id.toString());
-  showLoader,
-  hideLoader,
-  dialogConfirm,
-  success,
-} = mixin;
 
-const isChangeData = defineModel<boolean>("isChangeData", { required: true });
 const isAttachment = defineModel<boolean>("isAttachment", { required: true });
-const { onCheckChangeData } = defineProps({
-  onCheckChangeData: { type: Function, required: true },
-});
 
 const tab = ref<string>("main"); //tab
 const page = ref<number>(1);
@@ -35,28 +30,37 @@ const numOfPages = ref<number>(0); //จำนวนหน้า pdf
 const pdfSrc = ref<PDFDocumentLoadingTask | undefined>(); // ตัวแปรเก็บ เเสดง pdf
 
 const dialog = ref<boolean>(false); // เปิด dialog
+const isLoadView = ref<boolean>(false);
+const dataCover = ref<DataFileOrder>(); //ข้อมูลไฟล์คำสั่ง
+const dataAttachment = ref<DataFileOrder>(); //ข้อมูลไฟล์แบนท้าย
 
 /**
- * เปลี่ยน tab
+ * ฟังก์ชันดึงข้อมูลโหลดไฟล์คำสั่ง
- * @param val ชื่อ tab
+ * @param type ประเภท cover เป็นคำสั่ง attachment เป็น แบนท้าย
  */
-function setTab(val: string) {
+async function fetchDataCommand(type: string) {
-  tab.value = val;
+  await http
-  page.value = 1;
+    .get(config.API.commandAction(commandId.value, `tab4/${type}`))
+    .then(async (res) => {
+      const dataMain = await res.data.result;
+      if (type === "cover") {
+        dataCover.value = dataMain;
+        await fetchPDF(dataCover.value);
+      } else {
+        dataAttachment.value = dataMain;
+      }
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
 }
 
-/** ดึง class ตามที่ set ไว้ */
+/**
-function getClass(val: boolean) {
+ * ฟังชั่นกำหนดค่าของ PDF
-  return {
+ *
-    "card-header-active q-px-lg q-py-md cursor-pointer": val,
+ */
-    "card-header q-px-lg q-py-md cursor-pointer": !val,
+async function fetchPDF(data: any, type: string = "docx?folder=command") {
-  };
+  isLoadView.value = false;
-}
-function onSubmit() {}
-
-/** ฟังชั่นจองลอง แสดง pdf */
-async function genPDf(data: any, type: string = "docx") {
-  showLoader();
   await axios
     .post(config.API.reportTemplate + `/${type}`, data, {
       headers: {
@@ -68,17 +72,16 @@ async function genPDf(data: any, type: string = "docx") {
     .then(async (res) => {
       const blob = new Blob([res.data]);
       const objectUrl = URL.createObjectURL(blob);
-
       const pdfData = usePDF(`${objectUrl}`);
       setTimeout(() => {
         pdfSrc.value = pdfData.pdf.value;
         numOfPages.value = pdfData.pages.value;
-        hideLoader();
+        isLoadView.value = true;
       }, 1500);
     })
     .catch(async (e) => {
       messageError($q, e);
-      hideLoader();
+      isLoadView.value = true;
     });
 }
 
@@ -87,88 +90,62 @@ async function genPDf(data: any, type: string = "docx") {
  * @param type pdf/docx
  */
 async function downloadCover(type: string) {
-  genReport(
+  if (tab.value === "main") {
-    tab.value == "main" ? data1 : data2,
+    genReport(
-    `${
+      dataCover.value,
-      tab.value == "main"
+      "คำสั่ง คำสั่งบรรจุและแต่งตั้ง: สำหรับผู้สอบแข่งขันได้",
-        ? "คำสั่ง คำสั่งบรรจุและแต่งตั้ง: สำหรับผู้สอบแข่งขันได้"
+      type
-        : "เอกสารแนบท้าย คำสั่งบรรจุและแต่งตั้ง: สำหรับผู้สอบแข่งขันได้"
+    );
-    }`,
+  } else {
-    type
+    genReportXLSX(
-  );
+      dataAttachment.value,
+      "เอกสารแนบท้าย คำสั่งบรรจุและแต่งตั้ง: สำหรับผู้สอบแข่งขันได้",
+      type
+    );
+  }
 }
 
-/** ข้อมูลจำลอง */
+/**
-const data1 = {
+ * เปลี่ยน tab
-  template: "C-PM-01",
+ * @param val ชื่อ tab
-  reportName: "docx-report",
+ */
-  data: {
+function setTab(val: string) {
-    commandNo: "",
+  tab.value = val;
-    commandYear: "๒๕๖๗",
+  page.value = 1;
-    issuerOrganizationName: "",
+}
-    conclusionRegisterNo: "test",
-    conclusionRegisterDate: "๒ สิงหาคม ๒๕๖๗",
-    conclusionResultNo: "test",
-    conclusionResultDate: "๓ สิงหาคม ๒๕๖๗",
-    positionList: "",
-    count: "๑",
-    commandAffectDate: "๑ สิงหาคม ๒๕๖๗",
-    authorizedUserFullName: "นายวิษณุ สุวรรณรัตน์",
-    authorizedPosition: "ผู้อำนวยการ",
-    subject: "เรื่อง คำสั่งบรรจุและแต่งตั้ง: สำหรับผู้สอบแข่งขันได้",
-  },
-};
-const data2 = {
-  template: "C-PM-01-attachment",
-  reportName: "docx-report",
-  data: {
-    commandNo: "",
-    commandYear: "๒๕๖๗",
-    issuerOrganizationName: "",
-    commandExcecuteDate: "-",
-    data: [
-      {
-        citizenId: "๒๔๕๙๙๐๐๐๑๙๖๘๐",
-        fullName: "นางสาวบุปผารัตน์ สีลาเหลี่ยม",
-        oc: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
-        positionName: "นักบริหาร",
-        positionLevel: "ต้น",
-        positionType: "บริหาร",
-        positionNumber: "สกก.๒",
-        salary: "๑๒,๐๐๐",
-        appointDate: "๒๓ ส.ค. ๖๗",
-        examNumber: "๑",
-        placementName: "สอบแข่งขันนักคอมพิวเตอร์ ครั้งที่ ๑/๒๕๖๗",
-        seq: "๑",
-        education: "การศึกษาบัณฑิต",
-        remarkHorizontal:
-          "โดยมีเงื่อนไขว่าต้องปฏิบัติงานให้กรุงเทพมหานครเป็นระยะเวลาไม่น้อยกว่า ๕ ปี นับแต่วันที่ได้รับการบรรจุและแต่งตั้ง โดยห้ามโอนไปหน่วยงานหรือส่วนราชการอื่น เว้นเเต่ลาออกจากราชการ",
-        remarkVertical: null,
-      },
-    ],
-  },
-};
 
 /**
- * ฟังก์ชันที่ต้องการนำฟังก์ชันออกไปใช้ใน Components แม่
+ * ดึง class ตามที่ set ไว้
  */
-defineExpose({
+function getClass(val: boolean) {
-  onSubmit,
+  return {
-});
+    "card-header-active q-px-lg q-py-md cursor-pointer": val,
+    "card-header q-px-lg q-py-md cursor-pointer": !val,
+  };
+}
 
-/** check tab เมื่อมีการเปลี่ยน tab */
+/**
+ * check tab เมื่อมีการเปลี่ยน tab
+ */
 watch(tab, () => {
   if (tab.value === "main") {
-    genPDf(data1);
+    fetchPDF(dataCover.value);
   }
   if (tab.value === "second") {
-    genPDf(data2);
+    fetchPDF(dataAttachment.value, "xlsx?folder=command");
   }
 });
 
 /** hook */
 onMounted(async () => {
-  await genPDf(data1);
+  showLoader();
+  const promises = [fetchDataCommand("cover")];
+  if (isAttachment.value) {
+    promises.push(fetchDataCommand("attachment"));
+  }
+  await Promise.all(promises).finally(() => {
+    hideLoader();
+  });
 });
 </script>
 
@@ -209,14 +186,24 @@ onMounted(async () => {
       </q-btn>
 
       <q-btn
+        v-if="tab === 'main'"
         outline
         class="q-px-sm"
         color="blue"
         icon="mdi-file-word"
         label="ดาวน์โหลดไฟล์ docx"
         @click="downloadCover('docx')"
-      >
+      />
-      </q-btn>
+
+      <q-btn
+        v-else
+        outline
+        class="q-px-sm"
+        color="green"
+        icon="mdi-file-excel"
+        label="ดาวน์โหลดไฟล์ xlsx"
+        @click="downloadCover('xlsx')"
+      />
     </div>
     <q-card bordered class="card-pdf q-mx-sm q-pa-md">
       <div class="justify-between items-center align-center q-pb-sm row">
@@ -242,9 +229,25 @@ onMounted(async () => {
           <q-icon name="mdi-chevron-right" />
         </q-btn>
       </div>
-      <div class="pdfWidth">
+      <div class="pdfWidth" v-if="isLoadView">
         <VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
       </div>
+      <div class="full-width row flex-center text-accent q-gutter-sm" v-else>
+        <span
+          ><div
+            style="
+              height: 60vh;
+              display: flex;
+              flex-direction: column;
+              justify-content: center;
+              align-items: center;
+            "
+            class="text-grey-5"
+          >
+            <q-spinner color="primary" size="3em" :thickness="10" />
+          </div>
+        </span>
+      </div>
     </q-card>
   </div>
 

src/modules/18_command/interface/response/Main.ts

@@ -53,9 +53,27 @@ interface DataFileDownload {
   upload: boolean;
 }
 
+interface DataFileOrder {
+  reportName: string;
+  template: string;
+  data: {
+    commandDate: string;
+    commandExcecuteDate: string;
+    commandNo: string;
+    commandTitle: string;
+    commandYear: 2024;
+    detailBody: string;
+    detailFooter: string;
+    detailHeader: string;
+    name: string;
+    position: string;
+  };
+}
+
 export type {
   ResListCommand,
   DataListCommand,
   DataCommandType,
   DataFileDownload,
+  DataFileOrder,
 };