feat: Download Template File

src/modules/03_recruiting/components/DialogHeadTemplate.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+const props = defineProps({
+  title: String,
+  titleType: String,
+  close: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+
+const close = async () => {
+  props.close();
+};
+
+function onTemplate() {
+  window.open(`/File/${props.titleType}.xlsx`, "_blank");
+}
+</script>
+<template>
+  <q-toolbar>
+    <q-toolbar-title class="text-subtitle2 text-bold"
+      >{{ title }}
+      <q-btn
+        icon="mdi-download"
+        unelevated
+        round
+        color="blue"
+        flat
+        dense
+        @click="onTemplate()"
+      >
+        <q-tooltip>ดาวน์โหลดไฟล์ต้นแบบ</q-tooltip>
+      </q-btn></q-toolbar-title
+    >
+    <q-btn
+      icon="close"
+      unelevated
+      round
+      dense
+      @click="close"
+      style="color: #ff8080; background-color: #ffdede"
+    />
+  </q-toolbar>
+</template>

src/modules/03_recruiting/views/01_compete/Period.vue

@@ -20,6 +20,7 @@ import type {
 import Table from "@/modules/03_recruiting/components/Table.vue";
 import DialogHeader from "@/components/DialogHeader.vue";
 import HistoryTable from "@/components/TableHistory.vue";
+import DialogHeadTemplate from "@/modules/03_recruiting/components/DialogHeadTemplate.vue";
 
 const $q = useQuasar(); // show dialog
 const mixin = useCounterMixin();
@@ -772,31 +773,11 @@ onMounted(async () => {
   <q-dialog v-model="modalScore" persistent>
     <q-card style="width: 600px">
       <q-form ref="myFormScore">
-        <q-toolbar>
+        <DialogHeadTemplate
-          <q-toolbar-title class="text-subtitle2 text-bold"
+          :title="textTittleScore"
-            >{{ textTittleScore }}
+          :close="clickCloseScore"
-            <q-btn
+          title-type="สรรหาสอบแข่งขัน_จำนวนที่บันทึกผลสอบ"
-              icon="mdi-download"
+        />
-              unelevated
-              round
-              color="blue"
-              flat
-              dense
-              @click="onTemplate('สรรหาสอบแข่งขัน_จำนวนที่บันทึกผลสอบ')"
-            >
-              <q-tooltip>ดาวน์โหลดไฟล์ต้นแบบ</q-tooltip>
-            </q-btn>
-          </q-toolbar-title>
-          <q-btn
-            icon="close"
-            unelevated
-            round
-            dense
-            @click="clickCloseScore"
-            style="color: #ff8080; background-color: #ffdede"
-          />
-        </q-toolbar>
-
         <q-separator />
         <q-card-section>
           <div class="col-12 row items-center q-col-gutter-sm">
@@ -836,30 +817,11 @@ onMounted(async () => {
   <q-dialog v-model="modalCandidate" persistent>
     <q-card style="width: 600px">
       <q-form ref="myFormScore">
-        <q-toolbar>
+        <DialogHeadTemplate
-          <q-toolbar-title class="text-subtitle2 text-bold"
+          :title="textTittleCandidate"
-            >{{ textTittleCandidate }}
+          :close="clickCloseCandidate"
-            <q-btn
+          title-type="สรรหาสอบแข่งขัน_จำนวนผู้สอบทั้งหมด"
-              icon="mdi-download"
+        />
-              unelevated
-              round
-              color="blue"
-              flat
-              dense
-              @click="onTemplate('สรรหาสอบแข่งขัน_จำนวนผู้สอบทั้งหมด')"
-            >
-              <q-tooltip>ดาวน์โหลดไฟล์ต้นแบบ</q-tooltip>
-            </q-btn>
-          </q-toolbar-title>
-          <q-btn
-            icon="close"
-            unelevated
-            round
-            dense
-            @click="clickCloseCandidate"
-            style="color: #ff8080; background-color: #ffdede"
-          />
-        </q-toolbar>
         <q-separator />
         <q-card-section>
           <div class="col-12 row items-center q-col-gutter-sm">

src/modules/03_recruiting/views/02_qualify/DisablePeriod.vue

@@ -20,6 +20,7 @@ import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
 import Table from "@/modules/03_recruiting/components/Table.vue";
 import DialogHeader from "@/components/DialogHeader.vue";
 import HistoryTable from "@/components/TableHistory.vue";
+import DialogHeadTemplate from "@/modules/03_recruiting/components/DialogHeadTemplate.vue";
 
 const $q = useQuasar(); // show dialog
 const router = useRouter();
@@ -335,13 +336,13 @@ async function clickClose() {
 /** ปิด dialog คะเเนน */
 async function clickCloseScore() {
   modalScore.value = false;
-  await fetchData();
+  files_score.value = null;
 }
 
 /** ปิด dialog เลือกไฟล์ผู้สมัครคัดเลือกคนพิการ */
 async function clickCloseCandidate() {
   modalCandidate.value = false;
-  await fetchData();
+  files_candidate.value = null;
 }
 
 /** บันทึก รอบการคัดเลือก */
@@ -739,7 +740,11 @@ onMounted(async () => {
   <q-dialog v-model="modalScore" persistent>
     <q-card style="width: 600px">
       <q-form ref="myFormScore">
-        <DialogHeader :tittle="textTittleScore" :close="clickCloseScore" />
+        <DialogHeadTemplate
+          :title="textTittleCandidate"
+          :close="clickCloseScore"
+          title-type="สรรหา_สอบคัดเลือกคนพิการ_จำนวนที่บันทึกผลสอบ"
+        />
         <q-separator />
         <q-card-section>
           <div class="col-12 row items-center q-col-gutter-sm">
@@ -779,9 +784,10 @@ onMounted(async () => {
   <q-dialog v-model="modalCandidate" persistent>
     <q-card style="width: 600px">
       <q-form ref="myFormScore">
-        <DialogHeader
+        <DialogHeadTemplate
-          :tittle="textTittleCandidate"
+          :title="textTittleCandidate"
           :close="clickCloseCandidate"
+          title-type="สรรหา_สอบคัดเลือกคนพิการ_จำนวนผู้สอบทั้งหมด"
         />
         <q-separator />
         <q-card-section>