From 0a507ce8086d3b82969c3a4f7ae6ed1287c97017 Mon Sep 17 00:00:00 2001
From: AnandaTon <ananda@frappet.com>
Date: Fri, 6 Oct 2023 10:08:48 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=AB=E0=B8=B1=E0=B8=A7=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=95?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=A7=E0=B9=80=E0=B8=A5=E0=B8=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../05_leave/componenst/addAbsence.vue        | 792 ++++++++----------
 1 file changed, 339 insertions(+), 453 deletions(-)

diff --git a/src/modules/05_leave/componenst/addAbsence.vue b/src/modules/05_leave/componenst/addAbsence.vue
index f98b876..7470ecd 100644
--- a/src/modules/05_leave/componenst/addAbsence.vue
+++ b/src/modules/05_leave/componenst/addAbsence.vue
@@ -1,32 +1,24 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
-import { useQuasar } from "quasar";
-import { useRouter, useRoute } from "vue-router";
-import { useCounterMixin } from "@/stores/mixin";
-import http from "@/plugins/http";
-import config from "@/app.config";
-import type { QForm } from "quasar";
+import { ref, onMounted } from "vue"
+import { useQuasar } from "quasar"
+import { useRouter, useRoute } from "vue-router"
+import { useCounterMixin } from "@/stores/mixin"
+import http from "@/plugins/http"
+import config from "@/app.config"
+import type { QForm } from "quasar"
 
-const mixin = useCounterMixin();
-const {
-  date2Thai,
-  dateToISO,
-  success,
-  messageError,
-  showLoader,
-  hideLoader,
-  fails,
-} = mixin;
-const router = useRouter();
-const route = useRoute();
-const myform = ref<QForm | null>(null);
-const $q = useQuasar();
-const routeName = router.currentRoute.value.name;
-const id = ref<string>("");
-const fileDocDataUpload = ref<File[]>([]);
-const files = ref<any>();
-const tranferOrg = ref("");
-const dateCommand = ref<Date>(new Date());
+const mixin = useCounterMixin()
+const { date2Thai, dateToISO, success, messageError, showLoader, hideLoader, fails } = mixin
+const router = useRouter()
+const route = useRoute()
+const myform = ref<QForm | null>(null)
+const $q = useQuasar()
+const routeName = router.currentRoute.value.name
+const id = ref<string>("")
+const fileDocDataUpload = ref<File[]>([])
+const files = ref<any>()
+const tranferOrg = ref("")
+const dateCommand = ref<Date>(new Date())
 const locationAbsence = ref<string>("")
 const levelStudy = ref<string>("")
 const degree = ref<string>("")
@@ -35,445 +27,345 @@ const educational = ref<string>("")
 const studyPeriod = ref<string>("")
 const country = ref<string>("")
 const capital = ref<string>("")
-const tel = ref<number>();
-const detail = ref<string>();
-const Writeat = ref<string>();
-const dateLeaveStart = ref<Date>(new Date());
-const dateLeaveEnd = ref<Date>(new Date());
-const dateTotal = ref<number>();
-const noteReason = ref("");
-const nameFile = ref<string>("");
-const model = ref(null);
-const modelSpecific = ref(null);
+const tel = ref<number>()
+const detail = ref<string>()
+const Writeat = ref<string>()
+const dateLeaveStart = ref<Date>(new Date())
+const dateLeaveEnd = ref<Date>(new Date())
+const dateTotal = ref<number>()
+const noteReason = ref("")
+const nameFile = ref<string>("")
+const model = ref(null)
+const modelSpecific = ref(null)
 const options = ref([
-  "ลาป่วย",
-  "ลากิจส่วนตัว",
-  "ลาคลอดบุตร",
-  "ลาไปช่วยเหลือภริยาที่คลอดบุตร",
-  "ลาพักผ่อน",
-  "ลาอุปสมบทหรือลาประกอบพิธีฮัจย์ฯ",
-  "ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล",
-  "ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน",
-  "ลาไปปฎิบัติงานในองค์การระหว่างประเทศ",
-  "ลาติดตามคู่สมรส",
-  "ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ",
-]);
+	"ลาป่วย",
+	"ลากิจส่วนตัว",
+	"ลาคลอดบุตร",
+	"ลาไปช่วยเหลือภริยาที่คลอดบุตร",
+	"ลาพักผ่อน",
+	"ลาอุปสมบทหรือลาประกอบพิธีฮัจย์ฯ",
+	"ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล",
+	"ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน",
+	"ลาไปปฎิบัติงานในองค์การระหว่างประเทศ",
+	"ลาติดตามคู่สมรส",
+	"ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ",
+])
 
-const optionsSpecific = ref([
-  "ลาไปศึกษา",
-  "ฝึกอบรม",
-  "ปฎิบัติการวิจัย",
-  "ดูงาน",
-]);
+const optionsSpecific = ref(["ลาไปศึกษา", "ฝึกอบรม", "ปฎิบัติการวิจัย", "ดูงาน"])
 
 const dataDetail = ref<any>({
-  datetext: "",
-  activeDate: new Date(),
-  createdAt: new Date(),
-  firstName: "",
-  id: "",
-  isActive: true,
-  lastName: "",
-  location: "",
-  organizationPositionOld: "",
-  positionLevelOld: "",
-  positionNumberOld: "",
-  positionTypeOld: "",
-  prefix: "",
-  profileId: "",
-  reason: "",
-  salary: 0,
-  sendDate: new Date(),
-  status: "",
-  statustext: "",
-  fullname: "",
-});
+	datetext: "",
+	activeDate: new Date(),
+	createdAt: new Date(),
+	firstName: "",
+	id: "",
+	isActive: true,
+	lastName: "",
+	location: "",
+	organizationPositionOld: "",
+	positionLevelOld: "",
+	positionNumberOld: "",
+	positionTypeOld: "",
+	prefix: "",
+	profileId: "",
+	reason: "",
+	salary: 0,
+	sendDate: new Date(),
+	status: "",
+	statustext: "",
+	fullname: "",
+})
 
 const clickBack = () => {
-  router.push(`/retire`);
-};
+	router.push(`/retire`)
+}
 
 const statusOrder = (val: boolean) => {
-  switch (val) {
-    case true:
-      return "ยับยั้งการลาออก";
-    case false:
-      return "อนุมัติการลาออก";
-  }
-};
+	switch (val) {
+		case true:
+			return "ยับยั้งการลาออก"
+		case false:
+			return "อนุมัติการลาออก"
+	}
+}
 
 onMounted(() => {
-  // if (route.params.id !== undefined) {
-  // 	id.value = route.params.id.toString()
-  // 	fectDataresign(id.value)
-  // }
-});
+	// if (route.params.id !== undefined) {
+	// 	id.value = route.params.id.toString()
+	// 	fectDataresign(id.value)
+	// }
+})
 
-const saveResing = () => {
-  $q.dialog({
-    title: "ยืนยันการยื่นข้อมูลลาออก",
-    message: "ต้องการยื่นข้อมูลลาออกนี้ใช่หรือไม่?",
-    cancel: {
-      flat: true,
-      color: "negative",
-    },
-    persistent: true,
-  })
-    .onOk(() => {
-      // createFormresign()
-    })
-    .onCancel(() => {})
-    .onDismiss(() => {});
-};
+const saveAbsence = () => {
+	$q.dialog({
+		title: "ยืนยันการยื่นข้อมูลลาออก",
+		message: "ต้องการยื่นข้อมูลลาออกนี้ใช่หรือไม่?",
+		cancel: {
+			flat: true,
+			color: "negative",
+		},
+		persistent: true,
+	})
+		.onOk(() => {
+			// createFormresign()
+		})
+		.onCancel(() => {})
+		.onDismiss(() => {})
+}
 
 const saveData = () => {
-	if(model.value !== 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'){
+	if (model.value !== "ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน") {
 		console.log(1)
-	} else if (model.value === 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน') {
+	} else if (model.value === "ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน") {
 		console.log(2)
 	}
-	router.push(`/`);
+	router.push(`/leave`)
 }
 </script>
 <template>
-  <div class="col-12 row justify-center">
-    <div class="col-xs-12 col-sm-12 col-md-11">
-      <div class="toptitle text-white col-12 row items-center">
-        <q-btn
-          icon="mdi-arrow-left"
-          unelevated
-          round
-          dense
-          flat
-          color="primary"
-          class="q-mr-sm"
-          @click="router.push(`/leave`)"
-        />
-        <div>ยื่นใบลา</div>
-      </div>
-      <q-form ref="myform" class="col-12">
-        <q-card bordered>
-          <div class="col-12 row q-col-gutter-md q-pa-md">
-            <div class="col-xs-12 col-sm-12">
-              <div class="q-pl-sm text-weight-bold text-dark">
-                เลือกประเภทการลา
-              </div>
-              <div class="col-12 row q-pa-sm q-col-gutter-sm">
-                <q-select
-                  dense
-                  class="q-ml-lg col-6"
-                  outlined
-                  v-model="model"
-                  :options="options"
-                  prefix="ประเภทใบลา :"
-                />
-              </div>
-              <div
-                class="q-pl-sm text-weight-bold text-dark"
-                v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'"
-              >
-                เลือกประเภทใบลาศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน
-              </div>
-              <div
-                class="col-12 row q-pa-sm q-col-gutter-sm"
-                v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'"
-              >
-                <q-select
-                  dense
-                  class="q-ml-lg col-6"
-                  outlined
-                  v-model="modelSpecific"
-                  :options="optionsSpecific"
-                  prefix="ประเภทใบลา :"
-                />
-              </div>
-              <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-              <q-card bordered class="q-pa-md bg-grey-1">
-                <div class="col-12 row q-pa-sm q-col-gutter-sm">
-                  <datepicker
-                    class="col-2"
-                    menu-class-name="modalfix"
-                    v-model="dateLeaveStart"
-                    :locale="'th'"
-                    autoApply
-                    borderless
-                    :enableTimePicker="false"
-                    week-start="0"
-                    :readonly="routeName != 'addAbsence'"
-                  >
-                    <template #year="{ year }">
-                      {{ year + 543 }}
-                    </template>
-                    <template #year-overlay-value="{ value }">
-                      {{ parseInt(value + 543) }}
-                    </template>
-                    <template #trigger>
-                      <q-input
-                        outlined
-                        dense
-                        hide-bottom-space
-                        :readonly="routeName != 'addAbsence'"
-                        class="full-width datepicker"
-                        :model-value="
-                          dateLeaveStart != null
-                            ? date2Thai(dateLeaveStart)
-                            : null
-                        "
-                        :label="`${'วันที่เริ่ม'}`"
-                        :rules="[
-                          (val) => !!val || `${'กรุณาเลือกวันที่เริ่มลา'}`,
-                        ]"
-                      >
-                        <template v-slot:prepend>
-                          <q-icon
-                            name="event"
-                            class="cursor-pointer"
-                            style="color: var(--q-primary)"
-                          >
-                          </q-icon>
-                        </template>
-                      </q-input>
-                    </template>
-                  </datepicker>
-                  <datepicker
-                    class="col-2"
-                    menu-class-name="modalfix"
-                    v-model="dateLeaveEnd"
-                    :locale="'th'"
-                    autoApply
-                    borderless
-                    :enableTimePicker="false"
-                    week-start="0"
-                    :readonly="routeName != 'addAbsence'"
-                  >
-                    <template #year="{ year }">
-                      {{ year + 543 }}
-                    </template>
-                    <template #year-overlay-value="{ value }">
-                      {{ parseInt(value + 543) }}
-                    </template>
-                    <template #trigger>
-                      <q-input
-                        outlined
-                        dense
-                        hide-bottom-space
-                        :readonly="routeName != 'addAbsence'"
-                        class="full-width datepicker"
-                        :model-value="
-                          dateLeaveEnd != null ? date2Thai(dateLeaveEnd) : null
-                        "
-                        :label="`${'จนถึงวันที่'}`"
-                        :rules="[
-                          (val) =>
-                            !!val || `${'กรุณาเลือกวันที่่สิ้นสุดการลา'}`,
-                        ]"
-                      >
-                        <template v-slot:prepend>
-                          <q-icon
-                            name="event"
-                            class="cursor-pointer"
-                            style="color: var(--q-primary)"
-                          >
-                          </q-icon>
-                        </template>
-                      </q-input>
-                    </template>
-                  </datepicker>
-                  <q-input
-                    class="col-2"
-                    dense
-                    outlined
-                    type="number"
-                    v-model="dateTotal"
-                    label="จำนวนวัน(บันทึกลง ก.พ.7)"
-                    :readonly="routeName != 'addAbsence'"
-                    :rules="[(val) => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
-                  />
-                  <q-input
-                    class="col-3"
-                    dense
-                    outlined
-                    v-model="Writeat"
-                    label="เขียนที่"
-                    :readonly="routeName != 'addAbsence'"
-                    :rules="[(val) => !!val || `${'เขียนที่'}`]"
-                  />
-                  <q-input
-                    class="col-3"
-                    dense
-                    outlined
-                    v-model="tel"
-                    mask="(###)-###-####"
-                    unmasked-value
-                    label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-                    :readonly="routeName != 'addAbsence'"
-                    :rules="[
-                      (val) =>
-                        !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
-                    ]"
-                  />
-                  <q-input
-                    class="col-6"
-                    dense
-                    outlined
-                    v-model="detail"
-                    label="รายละเอียด"
-                    :readonly="routeName != 'addAbsence'"
-                    :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
-                  />
-                  <q-input
-                    class="col-6"
-                    dense
-                    outlined
-                    v-model="locationAbsence"
-                    label="สถาที่ติดต่อขณะลา"
-                    :readonly="routeName != 'addAbsence'"
-                    :rules="[
-                      (val) => !!val || `${'กรุณากรอกสถาที่ติดต่อขณะลา'}`,
-                    ]"
-                  />
+	<div class="col-12 row justify-center">
+		<div class="col-xs-12 col-sm-12 col-md-11">
+			<div class="toptitle text-white col-12 row items-center">
+				<q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="router.push(`/leave`)" />
+				<div>ยื่นใบลา</div>
+			</div>
+			<q-form ref="myform" class="col-12">
+				<q-card bordered>
+					<div class="col-12 row q-col-gutter-md q-pa-md">
+						<div class="col-xs-12 col-sm-12">
+							<q-icon name="mdi-numeric-1-circle" size="20px" color="primary" />
+							<div class="q-pl-sm text-weight-bold text-dark">เลือกประเภทการลา</div>
+							<div class="col-12 row q-pa-sm q-col-gutter-sm">
+								<q-select dense class="q-ml-lg col-6" outlined v-model="model" :options="options" prefix="ประเภทใบลา :" />
+							</div>
+							<q-icon name="mdi-numeric-2-circle" size="20px" color="primary" v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'" />
+							<div class="q-pl-sm text-weight-bold text-dark" v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'">เลือกประเภทใบลาศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน</div>
+							<div class="col-12 row q-pa-sm q-col-gutter-sm" v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'">
+								<q-select dense class="q-ml-lg col-6" outlined v-model="modelSpecific" :options="optionsSpecific" prefix="ประเภทใบลา :" />
+							</div>
+							<q-icon name="mdi-numeric-2-circle" size="20px" color="primary" v-else />
+							<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'" />
+							<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+							<q-card bordered class="q-pa-md bg-grey-1">
+								<div class="col-12 row q-pa-sm q-col-gutter-sm">
+									<datepicker
+										class="col-2"
+										menu-class-name="modalfix"
+										v-model="dateLeaveStart"
+										:locale="'th'"
+										autoApply
+										borderless
+										:enableTimePicker="false"
+										week-start="0"
+										:readonly="routeName != 'addAbsence'"
+									>
+										<template #year="{ year }">
+											{{ year + 543 }}
+										</template>
+										<template #year-overlay-value="{ value }">
+											{{ parseInt(value + 543) }}
+										</template>
+										<template #trigger>
+											<q-input
+												outlined
+												dense
+												hide-bottom-space
+												:readonly="routeName != 'addAbsence'"
+												class="full-width datepicker"
+												:model-value="dateLeaveStart != null ? date2Thai(dateLeaveStart) : null"
+												:label="`${'วันที่เริ่ม'}`"
+												:rules="[val => !!val || `${'กรุณาเลือกวันที่เริ่มลา'}`]"
+											>
+												<template v-slot:prepend>
+													<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
+												</template>
+											</q-input>
+										</template>
+									</datepicker>
+									<datepicker
+										class="col-2"
+										menu-class-name="modalfix"
+										v-model="dateLeaveEnd"
+										:locale="'th'"
+										autoApply
+										borderless
+										:enableTimePicker="false"
+										week-start="0"
+										:readonly="routeName != 'addAbsence'"
+									>
+										<template #year="{ year }">
+											{{ year + 543 }}
+										</template>
+										<template #year-overlay-value="{ value }">
+											{{ parseInt(value + 543) }}
+										</template>
+										<template #trigger>
+											<q-input
+												outlined
+												dense
+												hide-bottom-space
+												:readonly="routeName != 'addAbsence'"
+												class="full-width datepicker"
+												:model-value="dateLeaveEnd != null ? date2Thai(dateLeaveEnd) : null"
+												:label="`${'จนถึงวันที่'}`"
+												:rules="[val => !!val || `${'กรุณาเลือกวันที่่สิ้นสุดการลา'}`]"
+											>
+												<template v-slot:prepend>
+													<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
+												</template>
+											</q-input>
+										</template>
+									</datepicker>
+									<q-input
+										class="col-2"
+										dense
+										outlined
+										type="number"
+										v-model="dateTotal"
+										label="จำนวนวัน(บันทึกลง ก.พ.7)"
+										:readonly="routeName != 'addAbsence'"
+										:rules="[val => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
+									/>
+									<q-input class="col-3" dense outlined v-model="Writeat" label="เขียนที่" :readonly="routeName != 'addAbsence'" :rules="[val => !!val || `${'เขียนที่'}`]" />
+									<q-input
+										class="col-3"
+										dense
+										outlined
+										v-model="tel"
+										mask="(###)-###-####"
+										unmasked-value
+										label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+										:readonly="routeName != 'addAbsence'"
+										:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
+									/>
+									<q-input
+										class="col-6"
+										dense
+										outlined
+										v-model="detail"
+										label="รายละเอียด"
+										:readonly="routeName != 'addAbsence'"
+										:rules="[val => !!val || `${'กรุณากรอกรายละเอียด'}`]"
+									/>
+									<q-input
+										class="col-6"
+										dense
+										outlined
+										v-model="locationAbsence"
+										label="สถาที่ติดต่อขณะลา"
+										:readonly="routeName != 'addAbsence'"
+										:rules="[val => !!val || `${'กรุณากรอกสถาที่ติดต่อขณะลา'}`]"
+									/>
 
-                  <q-input
-                    class="col-4"
-                    v-if="
-                      model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'
-                    "
-                    dense
-                    outlined
-                    v-model="levelStudy"
-                    label="ระดับที่ขอลาศึกษา"
-                    :readonly="routeName != 'addAbsence'"
-                  />
+									<q-input
+										class="col-4"
+										v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'"
+										dense
+										outlined
+										v-model="levelStudy"
+										label="ระดับที่ขอลาศึกษา"
+										:readonly="routeName != 'addAbsence'"
+									/>
 
-                  <q-input
-                    class="col-4"
-                    v-if="
-                      model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'
-                    "
-                    dense
-                    outlined
-                    v-model="degree"
-                    label="ชื่อปริญญา/ประกาศนียบัตร"
-                    :readonly="routeName != 'addAbsence'"
-                  />
+									<q-input
+										class="col-4"
+										v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'"
+										dense
+										outlined
+										v-model="degree"
+										label="ชื่อปริญญา/ประกาศนียบัตร"
+										:readonly="routeName != 'addAbsence'"
+									/>
 
-                  <q-input
-                    class="col-4"
-                    v-if="
-                      model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'
-                    "
-                    dense
-                    outlined
-                    v-model="major"
-                    label="สาขาวิชาเอก/หลักสูตร/วิชา"
-                    :readonly="routeName != 'addAbsence'"
-                  />
+									<q-input
+										class="col-4"
+										v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'"
+										dense
+										outlined
+										v-model="major"
+										label="สาขาวิชาเอก/หลักสูตร/วิชา"
+										:readonly="routeName != 'addAbsence'"
+									/>
 
-                  <q-input
-                    class="col-4"
-                    v-if="
-                      model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'
-                    "
-                    dense
-                    outlined
-                    v-model="educational"
-                    label="ณ สถานศึกษา"
-                    :readonly="routeName != 'addAbsence'"
-                  />
+									<q-input
+										class="col-4"
+										v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'"
+										dense
+										outlined
+										v-model="educational"
+										label="ณ สถานศึกษา"
+										:readonly="routeName != 'addAbsence'"
+									/>
 
-                  <q-input
-                    class="col-4"
-                    v-if="
-                      model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'
-                    "
-                    dense
-                    outlined
-                    v-model="studyPeriod"
-                    label="ระยะเวลาในการศึกษาตลอดหลักสูตร"
-                    :readonly="routeName != 'addAbsence'"
-                  />
+									<q-input
+										class="col-4"
+										v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'"
+										dense
+										outlined
+										v-model="studyPeriod"
+										label="ระยะเวลาในการศึกษาตลอดหลักสูตร"
+										:readonly="routeName != 'addAbsence'"
+									/>
 
-                  <q-input
-                    class="col-4"
-                    v-if="
-                      model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'
-                    "
-                    dense
-                    outlined
-                    v-model="country"
-                    label="ประเทศ"
-                    :readonly="routeName != 'addAbsence'"
-                  />
+									<q-input
+										class="col-4"
+										v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'"
+										dense
+										outlined
+										v-model="country"
+										label="ประเทศ"
+										:readonly="routeName != 'addAbsence'"
+									/>
 
-                  <q-input
-                    class="col-4"
-                    v-if="
-                      model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'
-                    "
-                    dense
-                    outlined
-                    v-model="capital"
-                    label="ด้วยทุน"
-                    :readonly="routeName != 'addAbsence'"
-                  />
+									<q-input
+										class="col-4"
+										v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'"
+										dense
+										outlined
+										v-model="capital"
+										label="ด้วยทุน"
+										:readonly="routeName != 'addAbsence'"
+									/>
 
-                  <q-input
-                    class="col-8"
-                    v-if="
-                      model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'
-                    "
-                    dense
-                    outlined
-                    v-model="noteReason"
-                    label="ที่มาของหลักสูตร"
-                    :readonly="routeName != 'addAbsence'"
-                  />
+									<q-input
+										class="col-8"
+										v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'"
+										dense
+										outlined
+										v-model="noteReason"
+										label="ที่มาของหลักสูตร"
+										:readonly="routeName != 'addAbsence'"
+									/>
 
-                  <q-file
-                    v-model="files"
-                    dense
-                    label="เอกสารประกอบ"
-                    outlined
-                    use-chips
-                    multiple
-                    class="q-pl-sm col-6"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon name="attach_file" color="primary" />
-                    </template>
-                  </q-file>
+									<q-file v-model="files" dense label="เอกสารประกอบ" outlined use-chips multiple class="q-pl-sm col-6">
+										<template v-slot:prepend>
+											<q-icon name="attach_file" color="primary" />
+										</template>
+									</q-file>
 
-                  <div class="col-12 row" v-if="routeName != 'addAbsence'">
-                    <div
-                      class="bg-grey-1 q-pa-sm col-12 row items-center text-primary"
-                    >
-                      <div class="q-pl-sm text-weight-bold text-dark">
-                        เอกสารเพิ่มเติม
-                      </div>
-                    </div>
-                    <q-card bordered flat class="full-width">
-                      <q-list separator>
-                        <q-item
-                          v-for="file in files"
-                          :key="file.key"
-                          class="q-my-xs"
-                        >
-                          <q-item-section>
-                            <q-item-label class="full-width ellipsis">
-                              {{ file.fileName }}
-                            </q-item-label>
+									<div class="col-12 row" v-if="routeName != 'addAbsence'">
+										<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+											<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
+										</div>
+										<q-card bordered flat class="full-width">
+											<q-list separator>
+												<q-item v-for="file in files" :key="file.key" class="q-my-xs">
+													<q-item-section>
+														<q-item-label class="full-width ellipsis">
+															{{ file.fileName }}
+														</q-item-label>
 
-                            <q-item-label caption> </q-item-label>
-                          </q-item-section>
-                        </q-item>
-                      </q-list>
-                    </q-card>
-                  </div>
-                </div>
-              </q-card>
-            </div>
+														<q-item-label caption> </q-item-label>
+													</q-item-section>
+												</q-item>
+											</q-list>
+										</q-card>
+									</div>
+								</div>
+							</q-card>
+						</div>
 
-            <!-- <div class="row col-12 q-pa-md" v-if="routeName != 'addAbsence'">
+						<!-- <div class="row col-12 q-pa-md" v-if="routeName != 'addAbsence'">
 							<q-space />
 							<q-btn
 								v-if="dataDetail.status !== 'DELETE' && dataDetail.status !== 'DONE'"
@@ -486,26 +378,20 @@ const saveData = () => {
 								:disable="tranferOrg == '' && noteReason == ''"
 							/>
 						</div> -->
-          </div>
-          <q-separator />
-          <div class="row col-12 q-pa-md">
-            <q-space />
-            <q-btn
-              unelevated
-              dense
-              class="q-px-md items-center btnBlue"
-              label="บันทึก"
-              @click="saveData"
-            />
-          </div>
-        </q-card>
-      </q-form>
-    </div>
-  </div>
+					</div>
+					<q-separator />
+					<div class="row col-12 q-pa-md">
+						<q-space />
+						<q-btn unelevated dense class="q-px-md items-center btnBlue" label="บันทึก" @click="saveData" />
+					</div>
+				</q-card>
+			</q-form>
+		</div>
+	</div>
 </template>
 <style scoped lang="scss">
 .btnBlue {
-  background-color: #016987;
-  color: #fff;
+	background-color: #016987;
+	color: #fff;
 }
 </style>