From 1e90157ce3ab0a04c5cd1442f53539ad0a552a00 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 14 Dec 2023 18:00:05 +0700
Subject: [PATCH] upload file

---
 .../05_leave/components/Forms/01_SickForm.vue | 808 ++++++++++--------
 1 file changed, 447 insertions(+), 361 deletions(-)

diff --git a/src/modules/05_leave/components/Forms/01_SickForm.vue b/src/modules/05_leave/components/Forms/01_SickForm.vue
index d44b384..a9cb73e 100644
--- a/src/modules/05_leave/components/Forms/01_SickForm.vue
+++ b/src/modules/05_leave/components/Forms/01_SickForm.vue
@@ -1,424 +1,510 @@
 <script setup lang="ts">
-import { ref, reactive, watch, computed } from "vue"
-import type { FormData, FormRef } from "@/modules/05_leave/interface/request/SickForm"
-import { useCounterMixin } from "@/stores/mixin"
-import { useLeaveStore } from "@/modules/05_leave/store"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import { useQuasar } from "quasar"
-import { useRouter } from "vue-router"
+import { ref, reactive, watch, computed } from "vue";
+import type {
+  FormData,
+  FormRef,
+} from "@/modules/05_leave/interface/request/SickForm";
+import { useCounterMixin } from "@/stores/mixin";
+import { useLeaveStore } from "@/modules/05_leave/store";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useQuasar } from "quasar";
+import { useRouter } from "vue-router";
 
 /** Use */
-const dataStore = useLeaveStore()
-const $q = useQuasar()
-const mixin = useCounterMixin()
-const router = useRouter()
-const { date2Thai, dateToISO, dialogConfirm, success, messageError, fails } = mixin
-const edit = ref<boolean>(true)
+const dataStore = useLeaveStore();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const router = useRouter();
+const {
+  date2Thai,
+  dateToISO,
+  dialogConfirm,
+  success,
+  messageError,
+  fails,
+  showLoader,
+  hideLoader,
+} = mixin;
+const edit = ref<boolean>(true);
 
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
-	data: {
-		type: Object,
-		default: null,
-	},
-	onSubmit: {
-		type: Function,
-		default: () => "",
-	},
-})
+  data: {
+    type: Object,
+    default: null,
+  },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
+});
 
 /** ข้อมูล v-model ของฟอร์ม */
 const formDataSick = reactive<any>({
-	type: dataStore.typeId,
-	leaveWrote: "",
-	leaveStartDate: null,
-	leaveEndDate: null,
-	halfDay: "day",
-	leaveTotal: "",
-	leaveLast: null,
-	leaveNumber: "",
-	leaveAddress: "",
-	leaveDetail: "",
-	leaveDocument: [],
-})
+  type: dataStore.typeId,
+  leaveWrote: "",
+  leaveStartDate: null,
+  leaveEndDate: null,
+  halfDay: "day",
+  leaveTotal: "",
+  leaveLast: null,
+  leaveNumber: "",
+  leaveAddress: "",
+  leaveDetail: "",
+  leaveDocument: [],
+});
 
 /** ตัวแปร ref สำหรับแสดง validate */
-const leaveWroteRef = ref<object | null>(null)
-const leaveStartDateRef = ref<object | null>(null)
-const leaveEndDateRef = ref<object | null>(null)
-const halfDayRef = ref<object | null>(null)
-const leaveTotalRef = ref<object | null>(null)
-const leaveLastRef = ref<object | null>(null)
-const leaveNumberRef = ref<object | null>(null)
-const leaveAddressRef = ref<object | null>(null)
-const leaveDetailRef = ref<object | null>(null)
+const leaveWroteRef = ref<object | null>(null);
+const leaveStartDateRef = ref<object | null>(null);
+const leaveEndDateRef = ref<object | null>(null);
+const halfDayRef = ref<object | null>(null);
+const leaveTotalRef = ref<object | null>(null);
+const leaveLastRef = ref<object | null>(null);
+const leaveNumberRef = ref<object | null>(null);
+const leaveAddressRef = ref<object | null>(null);
+const leaveDetailRef = ref<object | null>(null);
 
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const FormRef: FormRef = {
-	leaveWrote: leaveWroteRef,
-	leaveStartDate: leaveStartDateRef,
-	leaveEndDate: leaveEndDateRef,
-	halfDay: halfDayRef,
-	leaveTotal: leaveTotalRef,
-	leaveNumber: leaveNumberRef,
-	leaveAddress: leaveAddressRef,
-	leaveDetail: leaveDetailRef,
-}
+  leaveWrote: leaveWroteRef,
+  leaveStartDate: leaveStartDateRef,
+  leaveEndDate: leaveEndDateRef,
+  halfDay: halfDayRef,
+  leaveTotal: leaveTotalRef,
+  leaveNumber: leaveNumberRef,
+  leaveAddress: leaveAddressRef,
+  leaveDetail: leaveDetailRef,
+};
 
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 watch(props.data, async () => {
-	// console.log("data==>", props.data)
-	formDataSick.leaveWrote = props.data.leaveWrote
-	formDataSick.leaveStartDate = props.data.leaveStartDate
-	formDataSick.leaveEndDate = props.data.leaveEndDate
-	formDataSick.contractTel = props.data.contractTel
-	formDataSick.leaveTotal = props.data.leaveTotal
-	formDataSick.leaveNumber = props.data.leaveNumber
-	formDataSick.leaveDetail = props.data.leaveDetail
-	formDataSick.leaveDocument = props.data.leaveDocument
-})
+  // console.log("data==>", props.data)
+  formDataSick.leaveWrote = props.data.leaveWrote;
+  formDataSick.leaveStartDate = props.data.leaveStartDate;
+  formDataSick.leaveEndDate = props.data.leaveEndDate;
+  formDataSick.contractTel = props.data.contractTel;
+  formDataSick.leaveTotal = props.data.leaveTotal;
+  formDataSick.leaveNumber = props.data.leaveNumber;
+  formDataSick.leaveDetail = props.data.leaveDetail;
+  formDataSick.leaveDocument = props.data.leaveDocument;
+});
 
 /** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("")
-const fileDocDataUpload = ref<File[]>([])
+const nameFile = ref<string>("");
+const fileDocDataUpload = ref<File[]>([]);
 async function fileUploadDoc(files: any) {
-	files.forEach((file: any) => {
-		fileDocDataUpload.value.push(file)
-	})
+  files.forEach((file: any) => {
+    fileDocDataUpload.value.push(file);
+  });
 }
 
 /**
  * function รีเซทค่า leaveStartDate เเละ leaveEndDate
  */
 function resetDate() {
-	if (formDataSick.halfDay === "half_day_morning" || formDataSick.halfDay === "half_day_afternoon") {
-		formDataSick.leaveStartDate = null
-		formDataSick.leaveEndDate = null
-	}
-	console.log("testnull")
+  if (
+    formDataSick.halfDay === "half_day_morning" ||
+    formDataSick.halfDay === "half_day_afternoon"
+  ) {
+    formDataSick.leaveStartDate = null;
+    formDataSick.leaveEndDate = null;
+  }
+  console.log("testnull");
 }
 
 /** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
 function onValidate() {
-	const hasError = []
-	for (const key in FormRef) {
-		if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
-			const property = FormRef[key]
-			if (property.value && typeof property.value.validate === "function") {
-				const isValid = property.value.validate()
-				hasError.push(isValid)
-			}
-		}
-	}
-	if (hasError.every(result => result === true)) {
-		onSubmit()
-	}
+  const hasError = [];
+  for (const key in FormRef) {
+    if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
+      const property = FormRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    onSubmit();
+  }
 }
 
 /** ฟังก์ชั่น บันทึก */
 const onSubmit = async () => {
-	dialogConfirm(
-		$q,
-		async () => {
-			await saveFormData()
-		},
-		"ยืนยันการยื่นใบลา",
-		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
-	)
-}
+  dialogConfirm(
+    $q,
+    async () => {
+      await saveFormData();
+    },
+    "ยืนยันการยื่นใบลา",
+    "ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
+  );
+};
 
 /**
  * ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
  */
 async function saveFormData() {
-	const formData = new FormData()
-	if (formDataSick.leaveDocument.length > 0) {
-		const blob = formDataSick.leaveDocument.slice(0, formDataSick.leaveDocument[0].size)
-		const newFile = new File(blob, nameFile.value, {
-			type: formDataSick.leaveDocument[0].type,
-		})
-		formData.append("leaveDocument", newFile)
-	}
+  showLoader();
+  const formData = new FormData();
+  //   if (formDataSick.leaveDocument.length > 0) {
+  //     const blob = formDataSick.leaveDocument.slice(
+  //       0,
+  //       formDataSick.leaveDocument[0].size
+  //     );
+  //     const newFile = new File(blob, nameFile.value, {
+  //       type: formDataSick.leaveDocument[0].type,
+  //     });
+  //     formData.append("leaveDocument", newFile);
+  //   }
 
-	formData.append("type", formDataSick.type)
-	formData.append("leaveStartDate", dateToISO(formDataSick.leaveStartDate))
-	formData.append("leaveEndDate", dateToISO(formDataSick.leaveEndDate))
-	formData.append("leaveWrote", formDataSick.leaveWrote)
-	formData.append("leaveAddress", formDataSick.leaveAddress)
-	formData.append("leaveNumber", formDataSick.leaveNumber)
-	formData.append("leaveDetail", formDataSick.leaveDetail)
-	await http
-		.post(config.API.leaveUser(), formData)
-		.then((res: any) => {
-			success($q, "บันทึกสำเร็จ")
-			router.push(`/leave`)
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
+  formData.append("leaveDocument", formDataSick.leaveDocument);
+  formData.append("type", formDataSick.type);
+  formData.append("leaveStartDate", dateToISO(formDataSick.leaveStartDate));
+  formData.append("leaveEndDate", dateToISO(formDataSick.leaveEndDate));
+  formData.append("leaveWrote", formDataSick.leaveWrote);
+  formData.append("leaveAddress", formDataSick.leaveAddress);
+  formData.append("leaveNumber", formDataSick.leaveNumber);
+  formData.append("leaveDetail", formDataSick.leaveDetail);
+  await http
+    .post(config.API.leaveUser(), formData)
+    .then(() => {
+      success($q, "บันทึกสำเร็จ");
+      router.push(`/leave`);
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 /**
  * check ว่าลาได้ไหม จาก api
  * @param formData
  */
-const isLeave = ref<boolean>(true)
+const isLeave = ref<boolean>(true);
 async function FetchCheck() {
-	await http
-		.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataSick.leaveStartDate ?? null, EndLeaveDate: formDataSick.leaveEndDate ?? null })
-		.then((res: any) => {
-			const data = res.data.result
-			isLeave.value = data.isLeave
-			if (data.isLeave === true) {
-				formDataSick.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
-			} else {
-				fails($q, "ไม่สามารถลาได้")
-			}
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
+  await http
+    .post(config.API.leaveCheck(), {
+      type: dataStore.typeId ?? null,
+      StartLeaveDate: formDataSick.leaveStartDate ?? null,
+      EndLeaveDate: formDataSick.leaveEndDate ?? null,
+    })
+    .then((res: any) => {
+      const data = res.data.result;
+      isLeave.value = data.isLeave;
+      if (data.isLeave === true) {
+        formDataSick.leaveTotal =
+          data.totalDate - data.sumDateWork - data.sumDateHoliday;
+      } else {
+        fails($q, "ไม่สามารถลาได้");
+      }
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
 }
 
 /**
  * ฟังก์ชั่นแปลงครึ่งวัน/ทั้งวัน
  */
 const isReadOnly = computed(() => {
-	const conditionHalfDay = formDataSick.halfDay === "half_day_morning" || formDataSick.halfDay === "half_day_afternoon"
-	if (conditionHalfDay) {
-		formDataSick.leaveEndDate = formDataSick.leaveStartDate // Set formDataSick.leaveEndDate to null
-		formDataSick.leaveTotal = "0.5 วัน "
-	} else {
-		formDataSick.leaveTotal = null
-	}
-	return conditionHalfDay
-})
+  const conditionHalfDay =
+    formDataSick.halfDay === "half_day_morning" ||
+    formDataSick.halfDay === "half_day_afternoon";
+  if (conditionHalfDay) {
+    formDataSick.leaveEndDate = formDataSick.leaveStartDate; // Set formDataSick.leaveEndDate to null
+    formDataSick.leaveTotal = "0.5 วัน ";
+  } else {
+    formDataSick.leaveTotal = null;
+  }
+  return conditionHalfDay;
+});
 </script>
 
 <!-- ฟอร์มลาป่วย และลากิจส่วนตัว -->
 <template>
-	<div style="display: flex; align-items: center">
-		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-	</div>
-	<form @submit.prevent.stop="onValidate">
-		<q-card bordered class="q-pa-md bg-grey-1">
-			<div class="col-12 row q-pa-sm q-col-gutter-sm">
-				<q-input
-					class="col-12 col-sm-12"
-					ref="leaveWroteRef"
-					for="leaveWroteRef"
-					dense
-					hide-bottom-space
-					bg-color="white"
-					outlined
-					v-model="formDataSick.leaveWrote"
-					label="เขียนที่"
-					:readonly="!edit"
-					:rules="[val => !!val || `${'เขียนที่'}`]"
-				/>
+  <div style="display: flex; align-items: center">
+    <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+    <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+  </div>
+  <form @submit.prevent.stop="onValidate">
+    <q-card bordered class="q-pa-md bg-grey-1">
+      <div class="col-12 row q-pa-sm q-col-gutter-sm">
+        <q-input
+          class="col-12 col-sm-12"
+          ref="leaveWroteRef"
+          for="leaveWroteRef"
+          dense
+          hide-bottom-space
+          bg-color="white"
+          outlined
+          v-model="formDataSick.leaveWrote"
+          label="เขียนที่"
+          :readonly="!edit"
+          :rules="[(val) => !!val || `${'เขียนที่'}`]"
+        />
 
-				<div class="col-12 col-md-4 col-sm-12">
-					<q-radio v-model="formDataSick.halfDay" val="day" label="ลาทั้งวัน" checked-icon="task_alt" />
-					<q-radio v-model="formDataSick.halfDay" val="half_day_morning" label="ลาครึ่งวันเช้า" checked-icon="task_alt" @update:model-value="resetDate" />
-					<q-radio v-model="formDataSick.halfDay" val="half_day_afternoon" label="ลาครึ่งวันบ่าย" checked-icon="task_alt" @update:model-value="resetDate" />
-				</div>
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<datepicker
-							class="col-12 col-md-3 col-sm-6"
-							menu-class-name="modalfix"
-							v-model="formDataSick.leaveStartDate"
-							:locale="'th'"
-							autoApply
-							borderless
-							:enableTimePicker="false"
-							week-start="0"
-							:readonly="!edit"
-						>
-							<template #year="{ year }">
-								{{ year + 543 }}
-							</template>
-							<template #year-overlay-value="{ value }">
-								{{ parseInt(value + 543) }}
-							</template>
-							<template #trigger>
-								<q-input
-									outlined
-									dense
-									ref="leaveStartDateRef"
-									for="leaveStartDateRef"
-									hide-bottom-space
-									:readonly="!edit"
-									bg-color="white"
-									class="full-width datepicker"
-									:model-value="formDataSick.leaveStartDate != null ? date2Thai(formDataSick.leaveStartDate) : 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>
+        <div class="col-12 col-md-4 col-sm-12">
+          <q-radio
+            v-model="formDataSick.halfDay"
+            val="day"
+            label="ลาทั้งวัน"
+            checked-icon="task_alt"
+          />
+          <q-radio
+            v-model="formDataSick.halfDay"
+            val="half_day_morning"
+            label="ลาครึ่งวันเช้า"
+            checked-icon="task_alt"
+            @update:model-value="resetDate"
+          />
+          <q-radio
+            v-model="formDataSick.halfDay"
+            val="half_day_afternoon"
+            label="ลาครึ่งวันบ่าย"
+            checked-icon="task_alt"
+            @update:model-value="resetDate"
+          />
+        </div>
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <datepicker
+              class="col-12 col-md-3 col-sm-6"
+              menu-class-name="modalfix"
+              v-model="formDataSick.leaveStartDate"
+              :locale="'th'"
+              autoApply
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+              :readonly="!edit"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  dense
+                  ref="leaveStartDateRef"
+                  for="leaveStartDateRef"
+                  hide-bottom-space
+                  :readonly="!edit"
+                  bg-color="white"
+                  class="full-width datepicker"
+                  :model-value="
+                    formDataSick.leaveStartDate != null
+                      ? date2Thai(formDataSick.leaveStartDate)
+                      : 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-12 col-md-3 col-sm-6"
-							menu-class-name="modalfix"
-							v-model="formDataSick.leaveEndDate"
-							:locale="'th'"
-							autoApply
-							borderless
-							:enableTimePicker="false"
-							week-start="0"
-							:readonly="isReadOnly"
-							@update:model-value="FetchCheck()"
-							:min-date="formDataSick.leaveStartDate ? new Date(formDataSick.leaveStartDate.getTime() * 60 * 60 * 1000) : null"
-						>
-							<template #year="{ year }">
-								{{ year + 543 }}
-							</template>
-							<template #year-overlay-value="{ value }">
-								{{ parseInt(value + 543) }}
-							</template>
-							<template #trigger>
-								<q-input
-									outlined
-									dense
-									ref="leaveEndDateRef"
-									for="leaveEndDateRef"
-									hide-bottom-space
-									bg-color="white"
-									:readonly="isReadOnly"
-									class="full-width datepicker"
-									:model-value="formDataSick.leaveEndDate != null ? date2Thai(formDataSick.leaveEndDate) : 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-12 col-md-3 col-sm-6"
-							dense
-							bg-color="white"
-							outlined
-							ref="leaveTotalRef"
-							for="leaveTotalRef"
-							v-model="formDataSick.leaveTotal"
-							label="จำนวนวันที่ลา"
-							readonly
-							hide-bottom-space
-						/>
-						<q-input
-							class="col-12 col-md-3 col-sm-6"
-							dense
-							outlined
-							ref="leaveLastRef"
-							for="leaveLastRef"
-							v-model="dataStore.leaveLast"
-							label="ลาครั้งสุดท้ายเมื่อวันที่"
-							readonly
-							hide-bottom-space
-							bg-color="white"
-						/>
-					</div>
-				</div>
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<q-input
-							class="col-12 col-md-3 col-sm-6"
-							dense
-							outlined
-							ref="leaveNumberRef"
-							for="leaveNumberRef"
-							v-model="formDataSick.leaveNumber"
-							mask="(###)-###-####"
-							hide-bottom-space
-							bg-color="white"
-							unmasked-value
-							label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-							:readonly="!edit"
-							:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
-						/>
+            <datepicker
+              class="col-12 col-md-3 col-sm-6"
+              menu-class-name="modalfix"
+              v-model="formDataSick.leaveEndDate"
+              :locale="'th'"
+              autoApply
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+              :readonly="isReadOnly"
+              @update:model-value="FetchCheck()"
+              :min-date="
+                formDataSick.leaveStartDate
+                  ? new Date(
+                      formDataSick.leaveStartDate.getTime() * 60 * 60 * 1000
+                    )
+                  : null
+              "
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  dense
+                  ref="leaveEndDateRef"
+                  for="leaveEndDateRef"
+                  hide-bottom-space
+                  bg-color="white"
+                  :readonly="isReadOnly"
+                  class="full-width datepicker"
+                  :model-value="
+                    formDataSick.leaveEndDate != null
+                      ? date2Thai(formDataSick.leaveEndDate)
+                      : 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-12 col-md-3 col-sm-6"
+              dense
+              bg-color="white"
+              outlined
+              ref="leaveTotalRef"
+              for="leaveTotalRef"
+              v-model="formDataSick.leaveTotal"
+              label="จำนวนวันที่ลา"
+              readonly
+              hide-bottom-space
+            />
+            <q-input
+              class="col-12 col-md-3 col-sm-6"
+              dense
+              outlined
+              ref="leaveLastRef"
+              for="leaveLastRef"
+              v-model="dataStore.leaveLast"
+              label="ลาครั้งสุดท้ายเมื่อวันที่"
+              readonly
+              hide-bottom-space
+              bg-color="white"
+            />
+          </div>
+        </div>
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <q-input
+              class="col-12 col-md-3 col-sm-6"
+              dense
+              outlined
+              ref="leaveNumberRef"
+              for="leaveNumberRef"
+              v-model="formDataSick.leaveNumber"
+              mask="(###)-###-####"
+              hide-bottom-space
+              bg-color="white"
+              unmasked-value
+              label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+              :readonly="!edit"
+              :rules="[
+                (val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
+              ]"
+            />
 
-						<q-input
-							class="col-12 col-md-9 col-sm-6"
-							dense
-							outlined
-							ref="leaveAddressRef"
-							for="leaveAddressRef"
-							v-model="formDataSick.leaveAddress"
-							label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
-							:readonly="!edit"
-							:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
-							hide-bottom-space
-							bg-color="white"
-						/>
-					</div>
-				</div>
-				<q-input
-					type="textarea"
-					class="col-12 col-md-12 col-sm-12"
-					dense
-					outlined
-					ref="leaveDetailRef"
-					for="leaveDetailRef"
-					v-model="formDataSick.leaveDetail"
-					label="รายละเอียด"
-					:readonly="!edit"
-					bg-color="white"
-				/>
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<q-file
-							for="leaveDocumentRef"
-							v-model="formDataSick.leaveDocument"
-							@added="fileUploadDoc"
-							dense
-							label="เอกสารประกอบ"
-							outlined
-							use-chips
-							multiple
-							bg-color="white"
-							class="col-12 q-pl-sm col-12"
-						>
-							<template v-slot:prepend>
-								<q-icon name="attach_file" color="primary" />
-							</template>
-						</q-file>
-					</div>
-				</div>
-				<div class="col-12 col-sm-6 row" v-if="!edit">
-					<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, index) in formDataSick.leaveDocument" :key="index" class="q-my-xs">
-								<q-item-section>
-									<q-item-label class="full-width ellipsis">
-										{{ file.name }}
-									</q-item-label>
-									<q-item-label caption> </q-item-label>
-								</q-item-section>
-							</q-item>
-						</q-list>
-					</q-card>
-				</div>
-			</div>
-		</q-card>
+            <q-input
+              class="col-12 col-md-9 col-sm-6"
+              dense
+              outlined
+              ref="leaveAddressRef"
+              for="leaveAddressRef"
+              v-model="formDataSick.leaveAddress"
+              label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
+              :readonly="!edit"
+              :rules="[
+                (val) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
+              ]"
+              hide-bottom-space
+              bg-color="white"
+            />
+          </div>
+        </div>
+        <q-input
+          type="textarea"
+          class="col-12 col-md-12 col-sm-12"
+          dense
+          outlined
+          ref="leaveDetailRef"
+          for="leaveDetailRef"
+          v-model="formDataSick.leaveDetail"
+          label="รายละเอียด"
+          :readonly="!edit"
+          bg-color="white"
+        />
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <q-file
+              for="leaveDocumentRef"
+              v-model="formDataSick.leaveDocument"
+              dense
+              label="เอกสารประกอบ"
+              outlined
+              use-chips
+              bg-color="white"
+              class="col-12 q-pl-sm col-12"
+            >
+              <template v-slot:prepend>
+                <q-icon name="attach_file" color="primary" />
+              </template>
+            </q-file>
+          </div>
+        </div>
+        <div class="col-12 col-sm-6 row" v-if="!edit">
+          <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, index) in formDataSick.leaveDocument"
+                :key="index"
+                class="q-my-xs"
+              >
+                <q-item-section>
+                  <q-item-label class="full-width ellipsis">
+                    {{ file.name }}
+                  </q-item-label>
+                  <q-item-label caption> </q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card>
+        </div>
+      </div>
+    </q-card>
 
-		<q-separator class="q-mt-sm" />
+    <q-separator class="q-mt-sm" />
 
-		<div class="row col-12 q-pt-md">
-			<q-space />
-			<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="ยื่นใบลา" />
-		</div>
-	</form>
+    <div class="row col-12 q-pt-md">
+      <q-space />
+      <q-btn
+        id="onSubmit"
+        type="submit"
+        unelevated
+        dense
+        class="q-px-md items-center btnBlue"
+        label="ยื่นใบลา"
+      />
+    </div>
+  </form>
 </template>