[UI] popup ดูข้อมูลคำสั่งที่คลิกจากตำแหน่ง/เงินเดือนในทะเบียนประวัติ

src/modules/04_registryPerson/components/detail/Salary/01_PositionSalary.vue

@@ -24,6 +24,7 @@ import DialogHistory from "@/modules/04_registryPerson/components/detail/Salary/
 
 import { useCounterMixin } from "@/stores/mixin";
 import { useSalaryDataStore } from "@/modules/04_registryPerson/stores/salary";
+import DialogPreviewCommand from "@/modules/18_command/components/DialogPreviewCommand.vue";
 
 const $q = useQuasar();
 const route = useRoute();
@@ -54,6 +55,9 @@ const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
 //Table
 const rows = ref<ResListSalary[]>([]); //รายการตำแหน่งเงินเดือน
 const keyword = ref<string>(""); //คำค้นหา
+const modalCommand = ref<boolean>(false);
+const command = ref<string>("");
+const commandId = ref<string>("");
 const baseColumns = ref<QTableProps["columns"]>([
   {
     name: "date",
@@ -608,6 +612,12 @@ const classInput = (val: boolean) => {
   };
 };
 
+function onRefCommand(data: ResListSalary) {
+  modalCommand.value = true;
+  command.value = data.refCommandNo;
+  commandId.value = data.commandId;
+  // commandId.value = 'bdf9da91-ba45-497a-a2b7-cc49e2446d97'; //จำลอง
+}
 /**
  * ทำงานเมื่อ Components ถูกเรียกใช้งาน
  */
@@ -693,7 +703,9 @@ onMounted(() => {
           </q-btn>
 
           <q-btn
-            v-if="props.isLeave == false && checkPermission($route)?.attrIsUpdate"
+            v-if="
+              props.isLeave == false && checkPermission($route)?.attrIsUpdate
+            "
             flat
             dense
             round
@@ -705,7 +717,9 @@ onMounted(() => {
             <q-tooltip>แก้ไขข้อมูล</q-tooltip>
           </q-btn>
           <q-btn
-            v-if="props.isLeave == false && checkPermission($route)?.attrIsUpdate"
+            v-if="
+              props.isLeave == false && checkPermission($route)?.attrIsUpdate
+            "
             dense
             flat
             round
@@ -717,7 +731,9 @@ onMounted(() => {
           </q-btn>
 
           <q-btn
-            v-if="props.isLeave == false && checkPermission($route)?.attrIsUpdate"
+            v-if="
+              props.isLeave == false && checkPermission($route)?.attrIsUpdate
+            "
             dense
             flat
             round
@@ -730,7 +746,18 @@ onMounted(() => {
         </q-td>
 
         <q-td v-for="col in props.cols" :key="col.id">
-          <div class="table_ellipsis">
+          <div
+            v-if="col.name == 'refCommandNo'"
+            @click="col.value ? onRefCommand(props.row) : null"
+            :class="
+              col.value
+                ? 'table_ellipsis text-blue cursor-pointer'
+                : 'table_ellipsis'
+            "
+          >
+            {{ col.value ? col.value : "-" }}
+          </div>
+          <div v-else class="table_ellipsis">
             {{ col.value ? col.value : "-" }}
           </div>
         </q-td>
@@ -1088,6 +1115,11 @@ onMounted(() => {
   </q-dialog>
 
   <DialogHistory v-model:modal="modalHistory" v-model:salaryId="salaryId" />
+  <DialogPreviewCommand
+    v-model:modal="modalCommand"
+    v-model:command="command"
+    v-model:commandId="commandId"
+  />
 </template>
 
 <style scoped></style>

src/modules/04_registryPerson/interface/response/Salary.ts

@@ -22,6 +22,7 @@ interface ResListSalary {
   profileId: string;
   refCommandNo: string;
   templateDoc: string;
+  commandId: string;
 }
 
 interface ResType {

src/modules/18_command/components/DialogPreviewCommand.vue

@@ -0,0 +1,462 @@
+<script setup lang="ts">
+import { ref, watch, reactive } from "vue";
+import { useQuasar } from "quasar";
+import axios from "axios";
+import { VuePDF, usePDF } from "@tato30/vue-pdf";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import genReport from "@/plugins/genreport";
+import genReportXLSX from "@/plugins/genreportxlsx";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+import type { PDFDocumentLoadingTask } from "pdfjs-dist/types/src/display/api";
+import type {
+  DataFileOrder,
+  FormDataDetail,
+} from "@/modules/18_command/interface/index/Main";
+
+const $q = useQuasar();
+const { showLoader, hideLoader, messageError } = useCounterMixin();
+
+const modal = defineModel<boolean>("modal", { required: true });
+const command = defineModel<string>("command", { required: true });
+const commandId = defineModel<string>("commandId", { required: true });
+
+let formCommandList = reactive<FormDataDetail>({
+  id: "",
+  status: "",
+  commandTypeName: "",
+  commandNo: "",
+  commandYear: null,
+  detailHeader: "",
+  detailBody: "",
+  detailFooter: "",
+  issue: null,
+  commandAffectDate: null, //วันที่ลงนาม
+  commandExcecuteDate: null, //วันที่คำสั่งมีผล
+  commandSysId: "", // ประเภท คำสั่ง
+  isAttachment: true,
+});
+
+const tab = ref<string>("main"); //tab
+const page = ref<number>(1);
+const numOfPages = ref<number>(0); //จำนวนหน้า pdf
+const pdfSrc = ref<PDFDocumentLoadingTask | undefined>(); // ตัวแปรเก็บ เเสดง pdf
+
+const dialog = ref<boolean>(false); // เปิด dialog
+const isLoadView = ref<boolean>(false);
+const isAttachment = ref<boolean>(false);
+const dataCover = ref<DataFileOrder>(); //ข้อมูลไฟล์คำสั่ง
+const dataAttachment = ref<DataFileOrder>(); //ข้อมูลไฟล์แบนท้าย
+
+/** ปิด popup */
+function closeDialog() {
+  modal.value = false;
+  command.value = "";
+  commandId.value = "";
+}
+
+/**
+ * เปลี่ยน tab
+ * @param val ชื่อ tab
+ */
+function setTab(val: string) {
+  tab.value = val;
+  page.value = 1;
+}
+
+/**
+ * ดึง class ตามที่ set ไว้
+ */
+function 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,
+  };
+}
+
+async function checkAttachment() {
+  showLoader();
+  await http
+    .get(config.API.commandAction(commandId.value, "tab0"))
+    .then(async (res) => {
+      const data = res.data.result;
+      isAttachment.value = data.isAttachment;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * ฟังชั่นดาวห์โหลดไฟล์
+ * @param type pdf/docx
+ */
+async function downloadCover(type: string) {
+  if (tab.value === "main") {
+    genReport(
+      dataCover.value,
+      `คำสั่ง ${formCommandList.issue}`,
+      type,
+      "?folder=command"
+    );
+  } else {
+    genReportXLSX(
+      dataAttachment.value,
+      `เอกสารแนบท้าย ${formCommandList.issue}`,
+      type,
+      "?folder=command"
+    );
+  }
+}
+
+/**
+ * ฟังก์ชันดึงข้อมูลโหลดไฟล์คำสั่ง
+ * @param type ประเภท cover เป็นคำสั่ง attachment เป็น แบนท้าย
+ */
+async function fetchDataCommand(type: string) {
+  await http
+    .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);
+    });
+}
+
+/** ฟังชั่นกำหนดค่าของ PDF*/
+async function fetchPDF(data: any, type: string = "docx?folder=command") {
+  isLoadView.value = false;
+  await axios
+    .post(config.API.reportTemplate + `/${type}`, 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 = usePDF(`${objectUrl}`);
+      setTimeout(() => {
+        pdfSrc.value = pdfData.pdf.value;
+        numOfPages.value = pdfData.pages.value;
+        isLoadView.value = true;
+      }, 1500);
+    })
+    .catch(async (e) => {
+      messageError($q, e);
+      isLoadView.value = true;
+    });
+}
+
+/**
+ * ฟังก์ชันดึงข้อมูลรายละเอียดคำสั่ง
+ *
+ * กำหนดข้อมูลที่ได้รับมาให้กับตัวแปร `formData`
+ */
+async function fetchDataCommandList() {
+  showLoader();
+  await http
+    .get(config.API.commandAction(commandId.value, "tab1"))
+    .then(async (res) => {
+      const data = await res.data.result;
+      formCommandList = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+watch(
+  () => modal.value,
+  async () => {
+    if (modal.value) {
+      await checkAttachment();
+      await fetchDataCommandList();
+      showLoader();
+      const promises = [fetchDataCommand("cover")];
+      if (isAttachment.value) {
+        promises.push(fetchDataCommand("attachment"));
+      }
+      await Promise.all(promises).finally(() => {
+        hideLoader();
+      });
+    }
+  }
+);
+
+/**
+ * check tab เมื่อมีการเปลี่ยน tab
+ */
+watch(
+  () => tab.value,
+  () => {
+    if (tab.value === "main") {
+      fetchPDF(dataCover.value);
+    }
+    if (tab.value === "second") {
+      fetchPDF(dataAttachment.value, "xlsx?folder=command");
+    }
+  }
+);
+</script>
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" style="width: 80%">
+      <DialogHeader :tittle="command" :close="closeDialog" />
+      <q-separator />
+
+      <q-card-section>
+        <div class="space">
+          <div @click="setTab('main')" :class="getClass(tab == 'main')">
+            <div class="q-pr-sm">คำสั่ง</div>
+          </div>
+
+          <div
+            v-if="isAttachment"
+            @click="setTab('second')"
+            :class="getClass(tab == 'second')"
+          >
+            <div class="q-pr-sm">เอกสารแนบท้าย</div>
+          </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" />
+        <div class="q-pa-sm">
+          <div class="q-pa-sm row q-gutter-sm">
+            <q-btn
+              outline
+              color="red"
+              icon="mdi-file-pdf"
+              label="ดาวน์โหลดไฟล์ PDF"
+              @click="downloadCover('pdf')"
+              class="q-px-sm"
+            >
+            </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
+              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">
+              <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" 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>
+
+        <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-card-section>
+      <q-separator />
+    </q-card>
+  </q-dialog>
+</template>
+<style scoped lang="scss">
+.space {
+  background-color: #e9eaec61;
+  display: flex;
+  z-index: 3;
+  min-height: 40px;
+}
+
+.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-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-pdf {
+  border-radius: 10px;
+  border: 1px solid #e9eaec;
+  background-color: #e9eaec61;
+}
+</style>

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

@@ -69,6 +69,40 @@ interface DataOrder {
   status: string;
 }
 
+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;
+  };
+}
+
+interface FormDataDetail {
+  id?: string;
+  status?: string;
+  commandNo: string;
+  commandYear: number | null;
+  detailHeader: string;
+  detailBody: string;
+  detailFooter: string;
+  issue: string | null;
+  commandAffectDate: Date | null;
+  commandExcecuteDate: Date | null;
+  commandSysId?: string;
+  commandTypeName?: string;
+  isBangkok?: string | null;
+  isAttachment: boolean;
+}
+
 export type {
   Pagination,
   DataOption,
@@ -77,4 +111,6 @@ export type {
   DateSelectPerson,
   ListCommand,
   DataOrder,
+  DataFileOrder,
+  FormDataDetail
 };