src/modules/05_leave/components/DialogDetail.vue

@@ -6,7 +6,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useLeaveStore } from "@/modules/05_leave/store";
-import genReport from "@/plugins/genreport";
+import { useDataStore } from "@/stores/data";
 
 /** import type*/
 import type {
@@ -16,6 +16,8 @@ import type {
   FromCancelDetail,
 } from "@/modules/05_leave/interface/response/leave";
 
+import DialogHeader from "@/components/DialogHeader.vue";
+import Workflow from "@/components/Workflow/Main.vue";
 import FormLeave from "@/modules/05_leave/components/formDetail/01_SickForm.vue";
 import FormChildbirth from "@/modules/05_leave/components/formDetail/04_HelpWifeBirthForm.vue";
 import FormHoliday from "@/modules/05_leave/components/formDetail/05_VacationForm.vue";
@@ -31,6 +33,7 @@ import FormCancel from "@/modules/05_leave/components/formDetail/formCancel.vue"
 
 const $q = useQuasar();
 const dataStore = useLeaveStore();
+const mainStore = useDataStore();
 const { convertStatud } = dataStore;
 const mixin = useCounterMixin();
 const {
@@ -408,28 +411,6 @@ async function onSubmit() {
     });
 }
 
-/**
- * ฟังก์ชันดาวน์โหลดไฟล์
- * @param id รหัสการลา
- * @param fileName ชื่อไฟล์
- * @param type ประเภทไฟล์
- */
-async function onClickDownloadFile(id: string, fileName: string, type: string) {
-  showLoader();
-  await http
-    .get(config.API.leaveReport(id))
-    .then(async (res) => {
-      const data = res.data.result;
-      await genReport(data, fileName, type);
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
 /**** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาแล้วเปิด modal */
 watch(
   () => props.modal,
@@ -453,62 +434,10 @@ watch(
       v-if="props.leaveStatus != 'DELETE'"
       style="width: 900px; max-width: 80vw"
     >
-      <q-toolbar>
+      <DialogHeader
-        <q-toolbar-title class="text-subtitle2 text-bold">
+        :tittle="`${titleMain} ${titleName}`"
-          {{ ` ${titleMain} ${titleName}` }}
+        :close="props.onClickClose"
-          <q-btn class="q-mr-sm" icon="mdi-download" round color="primary" flat>
-            <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
-            <q-menu>
-              <q-list style="min-width: 100px">
-                <q-item
-                  clickable
-                  v-close-popup
-                  @click="
-                    onClickDownloadFile(
-                      formData.id,
-                      formData.leaveSubTypeName
-                        ? formData.leaveSubTypeName
-                        : formData.leaveTypeName,
-                      '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-item
-                  clickable
-                  v-close-popup
-                  @click="
-                    onClickDownloadFile(
-                      formData.id,
-                      formData.leaveSubTypeName
-                        ? formData.leaveSubTypeName
-                        : formData.leaveTypeName,
-                      '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-list>
-            </q-menu>
-          </q-btn>
-        </q-toolbar-title>
-        <q-btn
-          icon="close"
-          unelevated
-          round
-          dense
-          @click="props.onClickClose?.()"
-          style="color: #ff8080; background-color: #ffdede"
       />
-      </q-toolbar>
 
       <q-separator />
       <q-card-section v-if="isLoading">
@@ -651,62 +580,10 @@ watch(
     </q-card>
 
     <q-card v-if="props.leaveStatus === 'DELETE'" style="min-width: 40vw">
-      <q-toolbar>
+      <DialogHeader
-        <q-toolbar-title class="text-subtitle2 text-bold">
+        :tittle="`${titleMainCancle} ${titleName}`"
-          {{ ` ${titleMainCancle} ${titleName}` }}
+        :close="props.onClickClose"
-          <q-btn class="q-mr-sm" icon="mdi-download" round color="primary" flat>
-            <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
-            <q-menu>
-              <q-list style="min-width: 100px">
-                <q-item
-                  clickable
-                  v-close-popup
-                  @click="
-                    onClickDownloadFile(
-                      formData.id,
-                      formData.leaveSubTypeName
-                        ? formData.leaveSubTypeName
-                        : formData.leaveTypeName,
-                      '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-item
-                  clickable
-                  v-close-popup
-                  @click="
-                    onClickDownloadFile(
-                      formData.id,
-                      formData.leaveSubTypeName
-                        ? formData.leaveSubTypeName
-                        : formData.leaveTypeName,
-                      '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-list>
-            </q-menu>
-          </q-btn>
-        </q-toolbar-title>
-        <q-btn
-          icon="close"
-          unelevated
-          round
-          dense
-          @click="props.onClickClose?.()"
-          style="color: #ff8080; background-color: #ffdede"
       />
-      </q-toolbar>
 
       <q-separator />
       <q-card-section v-if="isLoading">

src/plugins/genreport.ts

@@ -2,6 +2,7 @@ import axios from "axios";
 import config from "@/app.config";
 
 import { useCounterMixin } from "@/stores/mixin";
+import { downloadBlobFile } from "@/modules/10_registry/utils/downloadFile";
 
 const mixin = useCounterMixin();
 const { showLoader, hideLoader } = mixin;
@@ -31,16 +32,11 @@ async function genReport(data: any, fileName: string, type: string = "docx") {
         const url = URL.createObjectURL(blob);
 
         const baseName = fileName.trim();
-        const extension = type === "docx" ? "docx" : "pdf";
+        // const extension = type === "docx" ? "docx" : "pdf";
-        const link = document.createElement("a");
+        await downloadBlobFile({
-        link.href = url;
+          downloadUrl: url,
-        link.download = `${baseName}.${extension}`;
+          fileName: baseName,
-        document.body.appendChild(link);
+        });
-        link.click();
-        setTimeout(() => {
-          document.body.removeChild(link);
-          URL.revokeObjectURL(url);
-        }, 100);
       }
     })
     .catch((err) => {