From cfbc4315831750a6104310efd78287a7fb878d3e Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Thu, 5 Oct 2023 11:58:28 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1?=
 =?UTF-8?q?=20v-model?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../05_leave/componenst/addAbsence.vue        | 789 +++++++++++-------
 1 file changed, 469 insertions(+), 320 deletions(-)

diff --git a/src/modules/05_leave/componenst/addAbsence.vue b/src/modules/05_leave/componenst/addAbsence.vue
index f5b80fa..f98b876 100644
--- a/src/modules/05_leave/componenst/addAbsence.vue
+++ b/src/modules/05_leave/componenst/addAbsence.vue
@@ -1,342 +1,479 @@
 <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 dateLeave = ref<Date>(new Date())
-const noteReason = ref("")
-const nameFile = ref<string>("")
-const model = ref(null)
-const modelSpecific = ref(null)
+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>("")
+const major = ref<string>("")
+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 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(() => {})
+  $q.dialog({
+    title: "ยืนยันการยื่นข้อมูลลาออก",
+    message: "ต้องการยื่นข้อมูลลาออกนี้ใช่หรือไม่?",
+    cancel: {
+      flat: true,
+      color: "negative",
+    },
+    persistent: true,
+  })
+    .onOk(() => {
+      // createFormresign()
+    })
+    .onCancel(() => {})
+    .onDismiss(() => {});
+};
+
+const saveData = () => {
+	if(model.value !== 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'){
+		console.log(1)
+	} else if (model.value === 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน') {
+		console.log(2)
+	}
+	router.push(`/`);
 }
 </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.go(-1)" />
-				<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" />
-							</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="dateLeave"
-										: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="dateLeave != null ? date2Thai(dateLeave) : 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="dateLeave"
-										: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="dateLeave != null ? date2Thai(dateLeave) : 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
-										v-model="noteReason"
-										label="จำนวนวัน(บันทึกลง ก.พ.7)"
-										:readonly="routeName != 'addAbsence'"
-										:rules="[val => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
-									/>
-									<q-input class="col-3" dense outlined v-model="noteReason" label="เขียนที่" :readonly="routeName != 'addAbsence'" :rules="[val => !!val || `${'เขียนที่'}`]" />
-									<q-input
-										class="col-3"
-										dense
-										outlined
-										v-model="noteReason"
-										label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-										:readonly="routeName != 'addAbsence'"
-										:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
-									/>
-									<q-input
-										class="col-6"
-										dense
-										outlined
-										v-model="noteReason"
-										label="รายละเอียด"
-										:readonly="routeName != 'addAbsence'"
-										:rules="[val => !!val || `${'กรุณากรอกรายละเอียด'}`]"
-									/>
-									<q-input
-										class="col-6"
-										dense
-										outlined
-										v-model="noteReason"
-										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">
+              <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 || `${'กรุณากรอกสถาที่ติดต่อขณะลา'}`,
+                    ]"
+                  />
 
-									<q-input
-										class="col-4"
-										v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'"
-										dense
-										outlined
-										v-model="noteReason"
-										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="noteReason"
-										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="noteReason"
-										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="noteReason"
-										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="noteReason"
-										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="noteReason"
-										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="noteReason"
-										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'"
@@ -349,14 +486,26 @@ const saveResing = () => {
 								: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" color="primary" label="บันทึก" @click="saveData" :disable="tranferOrg == '' && noteReason == ''" />
-					</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;
+}
+</style>