แก้โครงฟอร์มลา

src/modules/05_leave/components/FormLeave/01_SickForm.vue

@@ -0,0 +1,509 @@
+<script setup lang="ts">
+import { ref, reactive, watch, computed, onMounted } 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,
+  showLoader,
+  hideLoader,
+} = mixin;
+const edit = ref<boolean>(true);
+
+/** รับ props มาจากหน้าหลัก */
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
+  },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
+  onConfirm: {
+    type: Function,
+    default: () => "",
+  }
+});
+
+/** ข้อมูล v-model ของฟอร์ม */
+const formDataSick = reactive<any>({
+  type: dataStore.typeId,
+  leaveWrote: "",
+  leaveStartDate: null,
+  leaveEndDate: null,
+  leaveRange: "ALL",
+  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 leaveRangeRef = 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,
+  leaveRange: leaveRangeRef,
+  leaveTotal: leaveTotalRef,
+  leaveNumber: leaveNumberRef,
+  leaveAddress: leaveAddressRef,
+  leaveDetail: leaveDetailRef,
+};
+
+/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
+const nameFile = ref<string>("");
+const fileDocDataUpload = ref<File[]>([]);
+async function fileUploadDoc(files: any) {
+  files.forEach((file: any) => {
+    fileDocDataUpload.value.push(file);
+  });
+}
+
+/**
+ * function รีเซทค่า leaveStartDate เเละ leaveEndDate
+ */
+function resetDate() {
+  if (
+    formDataSick.leaveRange === "MORNING" ||
+    formDataSick.leaveRange === "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)) {
+    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("leaveDocument", formDataSick.leaveDocument);
+    formData.append("type", formDataSick.type);
+    formData.append("leaveRange", formDataSick.leaveRange);
+    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);
+    props.onSubmit(formData);
+  }
+}
+
+/**
+ * check ว่าลาได้ไหม จาก api
+ * @param formData
+ */
+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);
+    });
+}
+
+/**
+ * ฟังก์ชั่นแปลงครึ่งวัน/ทั้งวัน
+ */
+const isReadOnly = computed(() => {
+  const conditionleaveRange =
+    formDataSick.leaveRange === "MORNING" ||
+    formDataSick.leaveRange === "AFTERNOON";
+  if (conditionleaveRange) {
+    formDataSick.leaveEndDate = formDataSick.leaveStartDate; // Set formDataSick.leaveEndDate to null
+    formDataSick.leaveTotal = 0.5;
+  } else {
+    formDataSick.leaveTotal = null;
+  }
+  return conditionleaveRange;
+});
+
+function inputEdit(val: boolean) {
+  return {
+    "full-width cursor-pointer ": val,
+    "full-width cursor-pointer inputgreen": !val,
+  };
+}
+
+function resetEndDate(type: string) {
+  if (type === "day") {
+    formDataSick.EndLeaveDate === null;
+  }
+}
+
+/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
+onMounted(() => {
+  if (props.data) {
+    formDataSick.leaveWrote = props.data.leaveWrote;
+    formDataSick.leaveStartDate = new Date(props.data.leaveStartDate);
+    formDataSick.leaveEndDate = new Date(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;
+    formDataSick.leaveAddress = props.data.leaveAddress;
+    formDataSick.leaveAddress = props.data.leaveAddress;
+  }
+});
+</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 cursor-pointer inputgreen"
+          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.leaveRange"
+            val="ALL"
+            label="ลาทั้งวัน"
+            checked-icon="task_alt"
+          />
+          <q-radio
+            v-model="formDataSick.leaveRange"
+            val="MORNING"
+            label="ลาครึ่งวันเช้า"
+            checked-icon="task_alt"
+            @update:model-value="resetDate"
+          />
+          <q-radio
+            v-model="formDataSick.leaveRange"
+            val="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"
+              @update:model-value="formDataSick.leaveEndDate = null"
+            >
+              <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 cursor-pointer inputgreen"
+                  :model-value="
+                    formDataSick.leaveStartDate != null
+                      ? date2Thai(formDataSick.leaveStartDate)
+                      : null
+                  "
+                  :label="`${'ลาตั้งแต่วันที่'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+                  style="color: var(--q-primary)"
+                >
+                  <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="!formDataSick.leaveStartDate"
+              @update:model-value="FetchCheck(), isReadOnly"
+              :min-date="formDataSick.leaveStartDate"
+            >
+              <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="!formDataSick.leaveStartDate"
+                  :class="inputEdit(isReadOnly)"
+                  :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 cursor-pointer inputgreen"
+              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 cursor-pointer inputgreen"
+              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 cursor-pointer inputgreen"
+          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" />
+
+    <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="บันทึก"
+        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+      >
+      <q-btn
+        v-if="data"
+        id="onSubmit"
+        type="button"
+        unelevated
+        dense
+        class="q-px-md items-center q-ml-sm"
+        color="primary"
+        label="ยื่นใบลา"
+        @click="onConfirm"
+        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+      >
+    </div>
+  </form>
+</template>

src/modules/05_leave/components/FormLeave/03_Birth.vue

@@ -0,0 +1,422 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import type { FormRef } from "@/modules/05_leave/interface/request/BirthForm";
+import { useCounterMixin } from "@/stores/mixin";
+import { useLeaveStore } from "@/modules/05_leave/store";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRouter } from "vue-router";
+
+/** Use */
+const dataStore = useLeaveStore();
+const mixin = useCounterMixin();
+const router = useRouter();
+const $q = useQuasar();
+const { date2Thai, dateToISO, dialogConfirm, success, messageError, fails } =
+  mixin;
+const edit = ref<boolean>(true);
+
+/** รับ props มาจากหน้าหลัก */
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
+  },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
+  onConfirm: {
+    type: Function,
+    default: () => "",
+  },
+});
+
+/** ข้อมูล v-model ของฟอร์ม */
+const formDataBirth = reactive<any>({
+  type: dataStore.typeId,
+  leaveWrote: "",
+  leaveStartDate: null,
+  leaveEndDate: null,
+  leaveTotal: "",
+  leaveLast: "",
+  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 leaveTotalRef = ref<object | null>(null);
+const leaveNumberRef = ref<object | null>(null);
+const leaveAddressRef = ref<object | null>(null);
+const leaveDetailRef = ref<object | null>(null);
+const leaveDocumentRef = ref<object | null>(null);
+
+/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
+const FormRef: FormRef = {
+  leaveWrote: leaveWroteRef,
+  leaveStartDate: leaveStartDateRef,
+  leaveEndDate: leaveEndDateRef,
+  leaveTotal: leaveTotalRef,
+  leaveNumber: leaveNumberRef,
+  leaveAddress: leaveAddressRef,
+  leaveDetail: leaveDetailRef,
+  leaveDocument: leaveDocumentRef,
+};
+
+/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
+const nameFile = ref<string>("");
+const fileDocDataUpload = ref<File[]>([]);
+async function fileUploadDoc(files: any) {
+  files.forEach((file: any) => {
+    fileDocDataUpload.value.push(file);
+  });
+}
+
+/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
+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)) {
+    const formData = new FormData();
+    // if (formDataBirth.leaveDocument.length > 0) {
+    // 	const blob = formDataBirth.leaveDocument.slice(0, formDataBirth.leaveDocument[0].size)
+    // 	const newFile = new File(blob, nameFile.value, {
+    // 		type: formDataBirth.leaveDocument[0].type,
+    // 	})
+    // 	formData.append("leaveDocument", newFile)
+    // }
+    formData.append("leaveDocument", formDataBirth.leaveDocument);
+    formData.append("type", formDataBirth.type);
+    formData.append("leaveStartDate", dateToISO(formDataBirth.leaveStartDate));
+    formData.append("leaveEndDate", dateToISO(formDataBirth.leaveEndDate));
+    formData.append("leaveWrote", formDataBirth.leaveWrote);
+    formData.append("leaveAddress", formDataBirth.leaveAddress);
+    formData.append("leaveNumber", formDataBirth.leaveNumber);
+    formData.append("leaveDetail", formDataBirth.leaveDetail);
+
+    props.onSubmit(formData);
+  }
+}
+
+/**
+ * check ว่าลาได้ไหม จาก api
+ * @param formData
+ */
+const isLeave = ref<boolean>(true);
+async function fetchCheck() {
+  await http
+    .post(config.API.leaveCheck(), {
+      type: dataStore.typeId ?? null,
+      StartLeaveDate: formDataBirth.leaveStartDate ?? null,
+      EndLeaveDate: formDataBirth.leaveEndDate ?? null,
+    })
+    .then((res: any) => {
+      const data = res.data.result;
+      isLeave.value = data.isLeave;
+      if (data.isLeave === true) {
+        formDataBirth.leaveTotal = data.totalDate;
+        // formDataBirth.leaveLast = data.sumDateWork
+      } else {
+        fails($q, "ไม่สามารถลาได้");
+      }
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
+}
+
+/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
+onMounted(() => {
+  if (props.data) {
+    formDataBirth.leaveWrote = props.data.leaveWrote;
+    formDataBirth.leaveStartDate = props.data.leaveStartDate;
+    formDataBirth.leaveEndDate = props.data.leaveEndDate;
+    formDataBirth.leaveTotal = props.data.leaveTotal;
+    formDataBirth.leaveNumber = props.data.leaveNumber;
+    formDataBirth.leaveDetail = props.data.leaveDetail;
+    // formDataBirth.leaveDocument = props.data.leaveDocument;
+  }
+});
+</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 cursor-pointer inputgreen"
+          ref="leaveWroteRef"
+          for="leaveWroteRef"
+          dense
+          outlined
+          v-model="formDataBirth.leaveWrote"
+          label="เขียนที่"
+          hide-bottom-space
+          bg-color="white"
+          :readonly="!edit"
+          :rules="[(val) => !!val || `${'เขียนที่'}`]"
+        />
+
+        <datepicker
+          class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataBirth.leaveStartDate"
+          :locale="'th'"
+          autoApply
+          hide-bottom-space
+          borderless
+          :enableTimePicker="false"
+          week-start="0"
+          :readonly="!edit"
+          @update:model-value="formDataBirth.leaveEndDate = null"
+        >
+          <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
+              bg-color="white"
+              :readonly="!edit"
+              class="full-width datepicker"
+              :model-value="
+                formDataBirth.leaveStartDate != null
+                  ? date2Thai(formDataBirth.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-12 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataBirth.leaveEndDate"
+          :locale="'th'"
+          autoApply
+          @update:model-value="fetchCheck()"
+          borderless
+          hide-bottom-space
+          :enableTimePicker="false"
+          week-start="0"
+          :readonly="!formDataBirth.leaveStartDate"
+          :min-date="formDataBirth.leaveStartDate"
+        >
+          <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="!formDataBirth.leaveStartDate"
+              class="full-width datepicker"
+              :model-value="
+                formDataBirth.leaveEndDate != null
+                  ? date2Thai(formDataBirth.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
+          outlined
+          ref="leaveTotalRef"
+          for="leaveTotalRef"
+          v-model="formDataBirth.leaveTotal"
+          label="จำนวนวันที่ลา"
+          bg-color="white"
+          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 class="full-width">
+          <div class="q-col-gutter-sm row">
+            <q-input
+              class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
+              dense
+              outlined
+              hide-bottom-space
+              bg-color="white"
+              ref="leaveNumberRef"
+              for="leaveNumberRef"
+              v-model="formDataBirth.leaveNumber"
+              mask="(###)-###-####"
+              unmasked-value
+              label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+              :readonly="!edit"
+              :rules="[
+                (val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
+              ]"
+            />
+
+            <q-input
+              class="col-12 col-md-9 col-sm-12 cursor-pointer inputgreen"
+              dense
+              outlined
+              hide-bottom-space
+              bg-color="white"
+              ref="leaveAddressRef"
+              for="leaveAddressRef"
+              v-model="formDataBirth.leaveAddress"
+              label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
+              :readonly="!edit"
+              :rules="[
+                (val) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
+              ]"
+            />
+          </div>
+        </div>
+        <q-input
+          type="textarea"
+          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+          dense
+          outlined
+          bg-color="white"
+          ref="leaveDetailRef"
+          for="leaveDetailRef"
+          v-model="formDataBirth.leaveDetail"
+          label="รายละเอียด"
+          :readonly="!edit"
+        />
+
+        <q-file
+          for="leaveDocumentRef"
+          hide-bottom-space
+          v-model="formDataBirth.leaveDocument"
+          @added="fileUploadDoc"
+          dense
+          bg-color="white"
+          label="เอกสารประกอบ"
+          outlined
+          use-chips
+          multiple
+          class="q-pl-sm col-12"
+        >
+          <template v-slot:prepend>
+            <q-icon name="attach_file" color="primary" />
+          </template>
+        </q-file>
+
+        <div class="col-12 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 formDataBirth.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" />
+
+    <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="บันทึก"
+        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+      >
+      <q-btn
+        v-if="data"
+        id="onSubmit"
+        type="button"
+        unelevated
+        dense
+        class="q-px-md items-center q-ml-sm"
+        color="primary"
+        label="ยื่นใบลา"
+        @click="onConfirm"
+        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+      >
+    </div>
+  </form>
+</template>

src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue

@@ -0,0 +1,507 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted } from "vue";
+import type {
+  FormData,
+  FormRef,
+} from "@/modules/05_leave/interface/request/HelpWifeForm";
+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 mixin = useCounterMixin();
+const router = useRouter();
+const $q = useQuasar();
+const {
+  date2Thai,
+  calculateDurationYmd,
+  dateToISO,
+  dialogConfirm,
+  fails,
+  success,
+  messageError,
+} = mixin;
+const edit = ref<boolean>(true);
+
+/** รับ props มาจากหน้าหลัก */
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
+  },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
+  onConfirm: {
+    type: Function,
+    default: () => "",
+  },
+});
+
+/** ข้อมูล v-model ของฟอร์ม */
+const formDataHelpWife = reactive<any>({
+  type: dataStore.typeId,
+  leaveWrote: "",
+  wifeDayName: "",
+  wifeDayDateBorn: null,
+  leaveStartDate: null,
+  leaveEndDate: null,
+  leaveTotal: "",
+  leaveNumber: "",
+  leaveAddress: "",
+  leaveDetail: "",
+  leaveDocument: [],
+});
+
+/** ตัวแปร ref สำหรับแสดง validate */
+const leaveWroteRef = ref<object | null>(null);
+const wifeDayNameRef = ref<object | null>(null);
+const wifeDayDateBornRef = ref<object | null>(null);
+const leaveStartDateRef = ref<object | null>(null);
+const leaveEndDateRef = ref<object | null>(null);
+const leaveTotalRef = ref<object | null>(null);
+const leaveNumberRef = ref<object | null>(null);
+const leaveAddressRef = ref<object | null>(null);
+const leaveDetailRef = ref<object | null>(null);
+const leaveDocumentRef = ref<object | null>(null);
+
+/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
+const FormRef: FormRef = {
+  leaveWrote: leaveWroteRef,
+  wifeDayName: wifeDayNameRef,
+  wifeDayDateBorn: wifeDayDateBornRef,
+  leaveStartDate: leaveStartDateRef,
+  leaveEndDate: leaveEndDateRef,
+  leaveTotal: leaveTotalRef,
+  leaveNumber: leaveNumberRef,
+  leaveAddress: leaveAddressRef,
+  leaveDetail: leaveDetailRef,
+  leaveDocument: leaveDocumentRef,
+};
+
+/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
+const nameFile = ref<string>("");
+const fileDocDataUpload = ref<File[]>([]);
+const fileUploadDoc = async (files: any) => {
+  files.forEach((file: any) => {
+    fileDocDataUpload.value.push(file);
+  });
+};
+
+/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
+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)) {
+    const formData = new FormData();
+    // if (formDataHelpWife.leaveDocument.length > 0) {
+    // 	const blob = formDataHelpWife.leaveDocument.slice(0, formDataHelpWife.leaveDocument[0].size)
+    // 	const newFile = new File(blob, nameFile.value, {
+    // 		type: formDataHelpWife.leaveDocument[0].type,
+    // 	})
+    // 	formData.append("leaveDocument", newFile)
+    // }
+    formData.append("leaveDocument", formDataHelpWife.leaveDocument);
+    formData.append("type", formDataHelpWife.type);
+    formData.append(
+      "leaveStartDate",
+      dateToISO(formDataHelpWife.leaveStartDate)
+    );
+    formData.append("leaveEndDate", dateToISO(formDataHelpWife.leaveEndDate));
+    formData.append("leaveWrote", formDataHelpWife.leaveWrote);
+    formData.append("leaveAddress", formDataHelpWife.leaveAddress);
+    formData.append("leaveNumber", formDataHelpWife.leaveNumber);
+    formData.append("leaveDetail", formDataHelpWife.leaveDetail);
+    formData.append("wifeDayName", formDataHelpWife.wifeDayName);
+    formData.append(
+      "wifeDayDateBorn",
+      dateToISO(formDataHelpWife.wifeDayDateBorn)
+    );
+    props.onSubmit(formData);
+  }
+}
+
+/**
+ * function อัพเดทค่า LeaveTotal
+ */
+function updateLeaveTotal() {
+  const newLeaveTotal = calculateDurationYmd(
+    formDataHelpWife.leaveStartDate,
+    formDataHelpWife.leaveEndDate
+  );
+  formDataHelpWife.leaveTotal = newLeaveTotal;
+}
+
+/**
+ * check ว่าลาได้ไหม จาก api
+ * @param formData
+ */
+const isLeave = ref<boolean>(true);
+async function fetchCheck() {
+  await http
+    .post(config.API.leaveCheck(), {
+      type: dataStore.typeId ?? null,
+      StartLeaveDate: formDataHelpWife.leaveStartDate ?? null,
+      EndLeaveDate: formDataHelpWife.leaveEndDate ?? null,
+    })
+    .then((res: any) => {
+      const data = res.data.result;
+      isLeave.value = data.isLeave;
+      if (data.isLeave === true) {
+        formDataHelpWife.leaveTotal =
+          data.totalDate - data.sumDateWork - data.sumDateHoliday;
+        // formDataHelpWife.leaveLast = data.totalDate
+      } else {
+        fails($q, "ไม่สามารถลาได้");
+      }
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
+}
+
+/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
+onMounted(() => {
+  if (props.data) {
+    // console.log("data==>", props.data)
+    formDataHelpWife.leaveWrote = props.data.leaveWrote;
+    formDataHelpWife.wifeDayName = props.data.wifeDayName;
+    formDataHelpWife.wifeDayDateBorn = props.data.wifeDayDateBorn;
+    formDataHelpWife.leaveStartDate = props.data.leaveStartDate;
+    formDataHelpWife.leaveEndDate = props.data.leaveEndDate;
+    formDataHelpWife.leaveTotal = props.data.leaveTotal;
+    formDataHelpWife.leaveNumber = props.data.leaveNumber;
+    formDataHelpWife.leaveDetail = props.data.leaveDetail;
+    // formDataHelpWife.leaveDocument = props.data.leaveDocument;
+  }
+});
+</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-12 col-sm-12 cursor-pointer inputgreen"
+          ref="leaveWroteRef"
+          for="leaveWroteRef"
+          dense
+          outlined
+          hide-bottom-space
+          bg-color="white"
+          v-model="formDataHelpWife.leaveWrote"
+          label="เขียนที่"
+          :readonly="!edit"
+          :rules="[(val) => !!val || `${'เขียนที่'}`]"
+        />
+        <datepicker
+          class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataHelpWife.leaveStartDate"
+          :locale="'th'"
+          autoApply
+          hide-bottom-space
+          borderless
+          :enableTimePicker="false"
+          week-start="0"
+          :readonly="!edit"
+          @update:model-value="formDataHelpWife.leaveEndDate = null"
+        >
+          <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
+              bg-color="white"
+              :readonly="!edit"
+              class="full-width datepicker"
+              :model-value="
+                formDataHelpWife.leaveStartDate != null
+                  ? date2Thai(formDataHelpWife.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-4 col-sm-12 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataHelpWife.leaveEndDate"
+          :locale="'th'"
+          autoApply
+          borderless
+          hide-bottom-space
+          :enableTimePicker="false"
+          @update:model-value="updateLeaveTotal, fetchCheck()"
+          week-start="0"
+          :readonly="!formDataHelpWife.leaveStartDate"
+          :min-date="formDataHelpWife.leaveStartDate"
+        >
+          <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="!formDataHelpWife.leaveStartDate"
+              class="full-width datepicker"
+              :model-value="
+                formDataHelpWife.leaveEndDate != null
+                  ? date2Thai(formDataHelpWife.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-2 col-sm-6"
+          dense
+          outlined
+          ref="leaveTotalRef"
+          for="leaveTotalRef"
+          v-model="formDataHelpWife.leaveTotal"
+          label="จำนวนวันที่ลา"
+          readonly
+          hide-bottom-space
+          bg-color="white"
+        />
+        <div class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen">
+          <q-input
+            class="col-12 col-sm-12"
+            ref="wifeDayNameRef"
+            for="wifeDayNameRef"
+            dense
+            bg-color="white"
+            outlined
+            hide-bottom-space
+            v-model="formDataHelpWife.wifeDayName"
+            label="ชื่อภรรยา"
+            :readonly="!edit"
+            :rules="[(val) => !!val || `${'ชื่อภรรยา'}`]"
+          />
+        </div>
+
+        <datepicker
+          class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataHelpWife.wifeDayDateBorn"
+          :locale="'th'"
+          autoApply
+          borderless
+          hide-bottom-space
+          :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="wifeDayDateBornRef"
+              for="wifeDayDateBornRef"
+              hide-bottom-space
+              bg-color="white"
+              :readonly="!edit"
+              class="full-width datepicker"
+              :model-value="
+                formDataHelpWife.wifeDayDateBorn != null
+                  ? date2Thai(formDataHelpWife.wifeDayDateBorn)
+                  : 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="full-width">
+          <div class="q-col-gutter-sm row">
+            <q-input
+              class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
+              dense
+              outlined
+              ref="leaveNumberRef"
+              for="leaveNumberRef"
+              v-model="formDataHelpWife.leaveNumber"
+              mask="(###)-###-####"
+              unmasked-value
+              hide-bottom-space
+              bg-color="white"
+              label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+              :readonly="!edit"
+              :rules="[
+                (val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
+              ]"
+            />
+
+            <q-input
+              class="col-12 col-md-9 col-sm-12 cursor-pointer inputgreen"
+              dense
+              outlined
+              hide-bottom-space
+              bg-color="white"
+              ref="leaveAddressRef"
+              for="leaveAddressRef"
+              v-model="formDataHelpWife.leaveAddress"
+              label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
+              :readonly="!edit"
+              :rules="[
+                (val) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
+              ]"
+            />
+          </div>
+        </div>
+        <q-input
+          hide-bottom-space
+          bg-color="white"
+          type="textarea"
+          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+          dense
+          outlined
+          ref="leaveDetailRef"
+          for="leaveDetailRef"
+          v-model="formDataHelpWife.leaveDetail"
+          label="รายละเอียด"
+          :readonly="!edit"
+        />
+
+        <q-file
+          bg-color="white"
+          ref="leaveDocumentRef"
+          v-model="formDataHelpWife.leaveDocument"
+          @added="fileUploadDoc"
+          dense
+          label="เอกสารประกอบ"
+          outlined
+          use-chips
+          multiple
+          class="q-pl-sm col-12"
+        >
+          <template v-slot:prepend>
+            <q-icon name="attach_file" color="primary" />
+          </template>
+        </q-file>
+
+        <div class="col-12 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 formDataHelpWife.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" />
+    <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="บันทึก"
+        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+      >
+      <q-btn
+        v-if="data"
+        id="onSubmit"
+        type="button"
+        unelevated
+        dense
+        class="q-px-md items-center q-ml-sm"
+        color="primary"
+        label="ยื่นใบลา"
+        @click="onConfirm"
+        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+      >
+    </div>
+  </form>
+</template>

src/modules/05_leave/components/FormLeave/05_VacationForm.vue

@@ -0,0 +1,501 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted, computed } from "vue";
+import type {
+  FormData,
+  FormRef,
+} from "@/modules/05_leave/interface/request/VacationForm";
+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 $q = useQuasar();
+const dataStore = useLeaveStore();
+const mixin = useCounterMixin();
+const router = useRouter();
+const { date2Thai, dateToISO, dialogConfirm, success, messageError, fails } =
+  mixin;
+const edit = ref<boolean>(true);
+
+/** รับ props มาจากหน้าหลัก */
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
+  },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
+  onConfirm: {
+    type: Function,
+    default: () => "",
+  },
+});
+
+/** ข้อมูล v-model ของฟอร์ม */
+const formDataVacation = reactive<any>({
+  type: dataStore.typeId,
+  leaveWrote: "",
+  leaveRange: "ALL",
+  restDayOldTotal: "",
+  restDayCurrentTotal: "",
+  leaveStartDate: null,
+  leaveEndDate: null,
+  leaveTotal: "",
+  leaveNumber: "",
+  leaveAddress: "",
+  leaveDetail: "",
+  leaveDocument: [],
+});
+
+/** ตัวแปร ref สำหรับแสดง validate */
+const leaveWroteRef = ref<object | null>(null);
+const restDayOldTotalRef = ref<object | null>(null);
+const restDayCurrentTotalRef = ref<object | null>(null);
+const leaveRangeRef = ref<object | null>(null);
+const leaveStartDateRef = ref<object | null>(null);
+const leaveEndDateRef = ref<object | null>(null);
+const leaveTotalRef = ref<object | null>(null);
+const leaveNumberRef = ref<object | null>(null);
+const leaveAddressRef = ref<object | null>(null);
+const leaveDetailRef = ref<object | null>(null);
+const leaveDocumentRef = ref<object | null>(null);
+
+/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
+const FormRef: FormRef = {
+  leaveWrote: leaveWroteRef,
+  leaveRange: leaveRangeRef,
+  restDayOldTotal: restDayOldTotalRef,
+  restDayCurrentTotal: restDayCurrentTotalRef,
+  leaveStartDate: leaveStartDateRef,
+  leaveEndDate: leaveEndDateRef,
+  leaveTotal: leaveTotalRef,
+  leaveNumber: leaveNumberRef,
+  leaveAddress: leaveAddressRef,
+  leaveDetail: leaveDetailRef,
+  leaveDocument: leaveDocumentRef,
+};
+
+/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
+const nameFile = ref<string>("");
+const fileDocDataUpload = ref<File[]>([]);
+const fileUploadDoc = async (files: any) => {
+  files.forEach((file: any) => {
+    fileDocDataUpload.value.push(file);
+  });
+};
+
+/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
+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)) {
+    const formData = new FormData();
+    // if (formDataVacation.leaveDocument.length > 0) {
+    // 	const blob = formDataVacation.leaveDocument.slice(0, formDataVacation.leaveDocument[0].size)
+    // 	const newFile = new File(blob, nameFile.value, {
+    // 		type: formDataVacation.leaveDocument[0].type,
+    // 	})
+    // 	formData.append("leaveDocument", newFile)
+    // }
+    formData.append("leaveDocument", formDataVacation.leaveDocument);
+    formData.append("type", formDataVacation.type);
+    formData.append("leaveRange", formDataVacation.leaveRange);
+    formData.append(
+      "leaveStartDate",
+      dateToISO(formDataVacation.leaveStartDate)
+    );
+    formData.append("leaveEndDate", dateToISO(formDataVacation.leaveEndDate));
+    formData.append("leaveWrote", formDataVacation.leaveWrote);
+    formData.append("leaveAddress", formDataVacation.leaveAddress);
+    formData.append("leaveNumber", formDataVacation.leaveNumber);
+    formData.append("leaveDetail", formDataVacation.leaveDetail);
+    props.onSubmit(formData);
+  }
+}
+
+/**
+ * check ว่าลาได้ไหม จาก api
+ * @param formData
+ */
+const isLeave = ref<boolean>(true);
+async function fetchCheck() {
+  await http
+    .post(config.API.leaveCheck(), {
+      type: dataStore.typeId ?? null,
+      StartLeaveDate: formDataVacation.leaveStartDate ?? null,
+      EndLeaveDate: formDataVacation.leaveEndDate ?? null,
+    })
+    .then((res: any) => {
+      const data = res.data.result;
+      isLeave.value = data.isLeave;
+      if (data.isLeave === true) {
+        formDataVacation.leaveTotal =
+          data.totalDate - data.sumDateWork - data.sumDateHoliday;
+        // formDataVacation.leaveLast = data.totalDate
+      } else {
+        fails($q, "ไม่สามารถลาได้");
+      }
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
+}
+
+/**
+ * function รีเซทค่า leaveStartDate เเละ leaveEndDate
+ */
+function resetDate() {
+  if (
+    formDataVacation.leaveRange === "MORNING" ||
+    formDataVacation.leaveRange === "AFTERNOON"
+  ) {
+    formDataVacation.leaveStartDate = null;
+    formDataVacation.leaveEndDate = null;
+  }
+  console.log("testnull");
+}
+
+/** ฟังก์ชั่นแปลงค่า ครึ่งวัน/ทั้งวัน */
+const isReadOnly = computed(() => {
+  const conditionleaveRange =
+    formDataVacation.leaveRange === "MORNING" ||
+    formDataVacation.leaveRange === "AFTERNOON";
+  if (conditionleaveRange) {
+    formDataVacation.leaveEndDate = formDataVacation.leaveStartDate; // Set formDataVacation.leaveEndDate to null
+    formDataVacation.leaveTotal = 0.5;
+  } else {
+    formDataVacation.leaveTotal = null;
+  }
+  return conditionleaveRange;
+});
+
+/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
+onMounted(() => {
+  if (props.data) {
+    // console.log("data==>", props.data)
+    formDataVacation.leaveWrote = props.data.leaveWrote;
+    formDataVacation.restDayOldTotal = props.data.restDayOldTotal;
+    formDataVacation.restDayCurrentTotal = props.data.restDayCurrentTotal;
+    formDataVacation.leaveStartDate = props.data.leaveStartDate;
+    formDataVacation.leaveEndDate = props.data.leaveEndDate;
+    formDataVacation.leaveTotal = props.data.leaveTotal;
+    formDataVacation.leaveNumber = props.data.leaveNumber;
+    formDataVacation.leaveDetail = props.data.leaveDetail;
+    // formDataVacation.leaveDocument = props.data.leaveDocument;
+  }
+});
+</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="row q-pa-sm q-col-gutter-sm">
+        <q-input
+          class="col-12 col-sm-12 cursor-pointer inputgreen"
+          ref="leaveWroteRef"
+          for="leaveWroteRef"
+          dense
+          hide-bottom-space
+          bg-color="white"
+          outlined
+          v-model="formDataVacation.leaveWrote"
+          label="เขียนที่"
+          :readonly="!edit"
+          :rules="[(val) => !!val || `${'เขียนที่'}`]"
+        />
+        <div class="col-12 col-md-4 col-sm-6">
+          <q-radio
+            v-model="formDataVacation.leaveRange"
+            val="ALL"
+            label="ลาทั้งวัน"
+            checked-icon="task_alt"
+          />
+          <q-radio
+            v-model="formDataVacation.leaveRange"
+            val="MORNING"
+            label="ลาครึ่งวันเช้า"
+            checked-icon="task_alt"
+            @update:model-value="resetDate"
+          />
+          <q-radio
+            v-model="formDataVacation.leaveRange"
+            val="AFTERNOON"
+            label="ลาครึ่งวันบ่าย"
+            checked-icon="task_alt"
+            @update:model-value="resetDate"
+          />
+        </div>
+        <q-input
+          class="col-12 col-md-4 col-sm-6"
+          ref="restDayOldTotalRef"
+          for="restDayOldTotalRef"
+          dense
+          hide-bottom-space
+          bg-color="white"
+          readonly
+          outlined
+          v-model="dataStore.restDayTotalOld"
+          label="จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา"
+        />
+
+        <q-input
+          class="col-12 col-md-4 col-sm-6"
+          ref="restDayCurrentTotalRef"
+          for="restDayCurrentTotalRef"
+          dense
+          readonly
+          hide-bottom-space
+          bg-color="white"
+          outlined
+          v-model="dataStore.leaveRemain"
+          label="จำนวนวันลาพักผ่อนประจำปีปัจจุบัน"
+        />
+
+        <datepicker
+          class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataVacation.leaveStartDate"
+          :locale="'th'"
+          autoApply
+          hide-bottom-space
+          borderless
+          :enableTimePicker="false"
+          week-start="0"
+          :readonly="!edit"
+          @update:model-value="formDataVacation.leaveEndDate = null"
+        >
+          <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
+              bg-color="white"
+              :readonly="!edit"
+              class="full-width datepicker"
+              :model-value="
+                formDataVacation.leaveStartDate != null
+                  ? date2Thai(formDataVacation.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 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataVacation.leaveEndDate"
+          :locale="'th'"
+          autoApply
+          hide-bottom-space
+          @update:model-value="fetchCheck()"
+          borderless
+          :enableTimePicker="false"
+          week-start="0"
+          :readonly="isReadOnly"
+          :min-date="formDataVacation.leaveStartDate"
+        >
+          <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"
+              class="full-width datepicker"
+              :readonly="isReadOnly"
+              :model-value="
+                formDataVacation.leaveEndDate != null
+                  ? date2Thai(formDataVacation.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-2 col-sm-6"
+          bg-color="white"
+          dense
+          outlined
+          ref="leaveTotalRef"
+          for="leaveTotalRef"
+          v-model="formDataVacation.leaveTotal"
+          label="จำนวนวันที่ลา"
+          readonly
+          hide-bottom-space
+        />
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <q-input
+              class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
+              dense
+              outlined
+              hide-bottom-space
+              bg-color="white"
+              ref="leaveNumberRef"
+              for="leaveNumberRef"
+              v-model="formDataVacation.leaveNumber"
+              mask="(###)-###-####"
+              unmasked-value
+              label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+              :readonly="!edit"
+              :rules="[
+                (val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
+              ]"
+            />
+
+            <q-input
+              class="col-12 col-md-9 col-sm-6 cursor-pointer inputgreen"
+              dense
+              outlined
+              hide-bottom-space
+              bg-color="white"
+              ref="leaveAddressRef"
+              for="leaveAddressRef"
+              v-model="formDataVacation.leaveAddress"
+              label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
+              :readonly="!edit"
+              :rules="[
+                (val) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
+              ]"
+            />
+          </div>
+        </div>
+        <q-input
+          type="textarea"
+          hide-bottom-space
+          bg-color="white"
+          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+          dense
+          outlined
+          ref="leaveDetailRef"
+          for="leaveDetailRef"
+          v-model="formDataVacation.leaveDetail"
+          label="รายละเอียด"
+          :readonly="!edit"
+        />
+
+        <q-file
+          ref="leaveDocumentRef"
+          bg-color="white"
+          v-model="formDataVacation.leaveDocument"
+          @added="fileUploadDoc"
+          dense
+          label="เอกสารประกอบ"
+          outlined
+          use-chips
+          multiple
+          class="q-pl-sm col-12"
+        >
+          <template v-slot:prepend>
+            <q-icon name="attach_file" color="primary" />
+          </template>
+        </q-file>
+
+        <div class="col-12 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 formDataVacation.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" />
+    <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="บันทึก"
+        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+      >
+      <q-btn
+        v-if="data"
+        id="onSubmit"
+        type="button"
+        unelevated
+        dense
+        class="q-px-md items-center q-ml-sm"
+        color="primary"
+        label="ยื่นใบลา"
+        @click="onConfirm"
+        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+      >
+    </div>
+  </form>
+</template>

src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue

@@ -0,0 +1,671 @@
+<script setup lang="ts">
+import { reactive, ref, onMounted } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import type { OrdinationForm } from "@/modules/05_leave/interface/request/AddAbsence";
+import { useLeaveStore } from "@/modules/05_leave/store";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRouter } from "vue-router";
+
+/** Use */
+const dataStore = useLeaveStore();
+const $q = useQuasar();
+const router = useRouter();
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  dialogConfirm,
+  calculateDurationYmd,
+  fails,
+  dateToISO,
+  success,
+  messageError,
+} = mixin;
+const edit = ref<boolean>(true);
+const files = ref<any>(null);
+
+/** รับ props มาจากหน้าหลัก */
+const props = defineProps({
+  data: {
+    type: Array,
+    default: null,
+  },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
+  onConfirm: {
+    type: Function,
+    default: () => "",
+  },
+});
+
+/** ตัวแปร ref สำหรับแสดง validate */
+const ordainDayLocationNumberRef = ref<object | null>(null);
+const leaveWroteRef = ref<object | null>(null);
+const leavebirthDateRef = ref<object | null>(null);
+const leavegovernmentDateRef = ref<object | null>(null);
+const totalLeaveRef = ref<object | null>(null);
+const leaveEndDateRef = ref<object | null>(null);
+const ordainDayOrdinationRef = ref<object | null>(null);
+const leaveStartDateRef = ref<object | null>(null);
+const ordainDayLocationAddressRef = ref<object | null>(null);
+const ordainDayBuddhistLentAddressRef = ref<object | null>(null);
+const ordainDayLocationNameRef = ref<object | null>(null);
+const ordainDayBuddhistLentNameRef = ref<object | null>(null);
+const leaveDocumentRef = ref<object | null>(null);
+
+/** ข้อมูล v-model ของฟอร์ม */
+const formDataOrdination = reactive<any>({
+  type: dataStore.typeId,
+  leaveWrote: "",
+  leavegovernmentDate: new Date(),
+  leavebirthDate: new Date(),
+  leaveStartDate: null,
+  leaveEndDate: null,
+  totalLeave: new Date(),
+  ordainDayOrdination: new Date(),
+  ordainDayLocationName: "",
+  ordainDayLocationNumber: null,
+  ordainDayLocationAddress: "",
+  ordainDayBuddhistLentName: "",
+  ordainDayBuddhistLentAddress: "",
+  ordainDayStatus: "true",
+  leaveDocument: null,
+});
+
+/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
+const formRef: OrdinationForm = {
+  leaveWrote: leaveWroteRef,
+  leavegovernmentDate: leavegovernmentDateRef,
+  leavebirthDate: leavebirthDateRef,
+  leaveStartDate: leaveStartDateRef,
+  leaveEndDate: leaveEndDateRef,
+  totalLeave: totalLeaveRef,
+  ordainDayOrdination: ordainDayOrdinationRef,
+  ordainDayLocationName: ordainDayLocationNameRef,
+  ordainDayLocationNumber: ordainDayLocationNumberRef,
+  ordainDayLocationAddress: ordainDayLocationAddressRef,
+  ordainDayBuddhistLentName: ordainDayBuddhistLentNameRef,
+  ordainDayBuddhistLentAddress: ordainDayBuddhistLentAddressRef,
+  leaveDocument: leaveDocumentRef,
+};
+
+/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
+const nameFile = ref<string>("");
+const fileDocDataUpload = ref<File[]>([]);
+const fileUploadDoc = async (files: any) => {
+  files.forEach((file: any) => {
+    fileDocDataUpload.value.push(file);
+  });
+};
+
+/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
+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)) {
+    const formData = new FormData();
+    // if (formDataOrdination.leaveDocument.length > 0) {
+    // 	const blob = formDataOrdination.leaveDocument.slice(0, formDataOrdination.leaveDocument[0].size)
+    // 	const newFile = new File(blob, nameFile.value, {
+    // 		type: formDataOrdination.leaveDocument[0].type,
+    // 	})
+    // 	formData.append("leaveDocument", newFile)
+    // }
+    formData.append("leaveDocument", formDataOrdination.leaveDocument);
+    formData.append("type", formDataOrdination.type);
+    formData.append(
+      "leaveStartDate",
+      dateToISO(formDataOrdination.leaveStartDate)
+    );
+    formData.append("leaveEndDate", dateToISO(formDataOrdination.leaveEndDate));
+    formData.append(
+      "ordainDayOrdination",
+      dateToISO(formDataOrdination.ordainDayOrdination)
+    );
+    formData.append(
+      "ordainDayLocationName",
+      formDataOrdination.ordainDayLocationName
+    );
+    formData.append(
+      "ordainDayLocationNumber",
+      formDataOrdination.ordainDayLocationNumber
+    );
+    formData.append(
+      "ordainDayLocationAddress",
+      formDataOrdination.ordainDayLocationAddress
+    );
+    formData.append(
+      "ordainDayBuddhistLentName",
+      formDataOrdination.ordainDayBuddhistLentName
+    );
+    formData.append(
+      "ordainDayBuddhistLentAddress",
+      formDataOrdination.ordainDayBuddhistLentAddress
+    );
+    formData.append("ordainDayStatus", formDataOrdination.ordainDayStatus);
+    formData.append("leaveWrote", formDataOrdination.leaveWrote);
+    formData.append("leaveDetail", formDataOrdination.leaveDetail);
+    formData.append(
+      "leavebirthDate",
+      dateToISO(formDataOrdination.leavebirthDate)
+    );
+    formData.append(
+      "leavegovernmentDate",
+      dateToISO(formDataOrdination.leavegovernmentDate)
+    );
+    props.onSubmit(formData);
+  }
+}
+
+/**
+ * check ว่าลาได้ไหม จาก api
+ * @param formData
+ */
+const isLeave = ref<boolean>(true);
+async function fetchCheck() {
+  await http
+    .post(config.API.leaveCheck(), {
+      type: dataStore.typeId ?? null,
+      StartLeaveDate: formDataOrdination.leaveStartDate ?? null,
+      EndLeaveDate: formDataOrdination.leaveEndDate ?? null,
+    })
+    .then((res: any) => {
+      const data = res.data.result;
+      isLeave.value = data.isLeave;
+      if (data.isLeave === true) {
+        // formDataOrdination.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
+        formDataOrdination.leaveTotal = data.totalDate;
+      } else {
+        fails($q, "ไม่สามารถลาได้");
+      }
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
+}
+
+/**
+ * function อัพเดทค่า LeaveTotal
+ */
+function updateLeaveTotal() {
+  const newLeaveTotal = calculateDurationYmd(
+    formDataOrdination.leaveStartDate,
+    formDataOrdination.leaveEndDate
+  );
+  formDataOrdination.leaveTotal = newLeaveTotal;
+}
+
+/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
+onMounted(() => {
+  if (props.data) {
+    formDataOrdination.leaveWrote = props.data.leaveWrote;
+    formDataOrdination.leaveStartDate = props.data.leaveStartDate;
+    formDataOrdination.leaveEndDate = props.data.leaveEndDate;
+    formDataOrdination.totalLeave = props.data.leaveTotal;
+    formDataOrdination.ordainDayOrdination = props.data.ordainDayOrdination;
+    formDataOrdination.ordainDayLocationName = props.data.ordainDayLocationName;
+    formDataOrdination.ordainDayLocationNumber =
+      props.data.ordainDayLocationNumber;
+    formDataOrdination.ordainDayLocationAddress =
+      props.data.ordainDayLocationAddress;
+    formDataOrdination.ordainDayBuddhistLentName =
+      props.data.ordainDayBuddhistLentName;
+    formDataOrdination.ordainDayBuddhistLentAddress =
+      props.data.ordainDayBuddhistLentAddress;
+    formDataOrdination.ordainDayStatus = props.data.ordainDayStatus;
+    formDataOrdination.leaveDetail = props.data.leaveDetail;
+    // formDataOrdination.leaveDocument = props.data.leaveDocument;
+  }
+});
+</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="onValidate" class="full-width">
+    <q-card bordered class="q-pa-md bg-grey-1">
+      <div class="row q-pa-sm q-col-gutter-sm">
+        <q-input
+          ref="leaveWroteRef"
+          class="col-12 col-sm-12 cursor-pointer inputgreen"
+          dense
+          outlined
+          bg-color="white"
+          hide-bottom-space
+          v-model="formDataOrdination.leaveWrote"
+          label="เขียนที่"
+          :rules="[(val) => !!val || `${'เขียนที่'}`]"
+        />
+
+        <datepicker
+          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataOrdination.leaveStartDate"
+          :locale="'th'"
+          autoApply
+          borderless
+          :enableTimePicker="false"
+          week-start="0"
+          @update:model-value="formDataOrdination.leaveEndDate = null"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              bg-color="white"
+              dense
+              ref="leaveStartDateRef"
+              hide-bottom-space
+              class="full-width datepicker"
+              :model-value="
+                formDataOrdination.leaveStartDate != null
+                  ? date2Thai(formDataOrdination.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-4 col-sm-6 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataOrdination.leaveEndDate"
+          :locale="'th'"
+          autoApply
+          borderless
+          @update:model-value="updateLeaveTotal, fetchCheck()"
+          :readonly="!formDataOrdination.leaveStartDate"
+          :enableTimePicker="false"
+          :min-date="formDataOrdination.leaveStartDate"
+          week-start="0"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              dense
+              ref="leaveEndDateRef"
+              bg-color="white"
+              hide-bottom-space
+              class="full-width datepicker"
+              :model-value="
+                formDataOrdination.leaveEndDate != null
+                  ? date2Thai(formDataOrdination.leaveEndDate)
+                  : null
+              "
+              :label="`${'ลาถึงวันที่'}`"
+              :readonly="!formDataOrdination.leaveStartDate"
+              :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-2 col-sm-6"
+          dense
+          outlined
+          bg-color="white"
+          ref="leaveTotalRef"
+          for="leaveTotalRef"
+          v-model="formDataOrdination.leaveTotal"
+          label="จำนวนวันที่ลา"
+          readonly
+          hide-bottom-space
+        />
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <datepicker
+              class="col-12 col-md-4 col-sm-6"
+              menu-class-name="modalfix"
+              v-model="formDataOrdination.leavegovernmentDate"
+              :locale="'th'"
+              autoApply
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+              readonly
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  ref="leavegovernmentDateRef"
+                  dense
+                  bg-color="white"
+                  hide-bottom-space
+                  readonly
+                  class="full-width"
+                  :model-value="
+                    formDataOrdination.leavegovernmentDate != null
+                      ? date2Thai(formDataOrdination.leavegovernmentDate)
+                      : null
+                  "
+                  :label="`${'วันที่เข้ารับราชการ'}`"
+                  :rules="[
+                    (val) => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`,
+                  ]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--black)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+
+            <datepicker
+              class="col-12 col-md-4 col-sm-6"
+              menu-class-name="modalfix"
+              v-model="formDataOrdination.leavebirthDate"
+              :locale="'th'"
+              autoApply
+              borderless
+              readonly
+              :enableTimePicker="false"
+              week-start="0"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  ref="leavebirthDateRef"
+                  dense
+                  bg-color="white"
+                  hide-bottom-space
+                  readonly
+                  class="full-width"
+                  :model-value="
+                    formDataOrdination.leavebirthDate != null
+                      ? date2Thai(formDataOrdination.leavebirthDate)
+                      : null
+                  "
+                  :label="`${'วันเดือนปีเกิด'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกวันเดือนปีเกิด'}`]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--black)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+        </div>
+
+        <div class="q-pl-sm text-weight-bold text-dark col-12">
+          เคยบวชหรือไม่
+        </div>
+        <div class="col-12">
+          <q-radio
+            v-model="formDataOrdination.ordainDayStatus"
+            val="true"
+            label="เคยบวช"
+            checked-icon="task_alt "
+            hide-bottom-space
+          />
+          <q-radio
+            v-model="formDataOrdination.ordainDayStatus"
+            val="false"
+            label="ไม่เคยบวช"
+            checked-icon="task_alt"
+            hide-bottom-space
+          />
+        </div>
+
+        <div class="text-weight-bold text-dark col-12">สถานที่บวช</div>
+        <datepicker
+          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataOrdination.ordainDayOrdination"
+          :locale="'th'"
+          autoApply
+          full-width
+          borderless
+          hide-bottom-space
+          :enableTimePicker="false"
+          week-start="0"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              ref="ordainDayOrdinationRef"
+              dense
+              bg-color="white"
+              hide-bottom-space
+              class="full-width datepicker"
+              :model-value="
+                formDataOrdination.ordainDayOrdination != null
+                  ? date2Thai(formDataOrdination.ordainDayOrdination)
+                  : 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-sm-6 col-md-4 cursor-pointer inputgreen"
+          dense
+          hide-bottom-space
+          ref="ordainDayLocationNameRef"
+          bg-color="white"
+          outlined
+          full-width
+          v-model="formDataOrdination.ordainDayLocationName"
+          label="ชื่อวัด"
+          :rules="[(val) => !!val || `${'กรุณากรอกชื่อวัด'}`]"
+        />
+
+        <q-input
+          class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+          ref="ordainDayLocationNumberRef"
+          dense
+          full-width
+          outlined
+          v-model="formDataOrdination.ordainDayLocationNumber"
+          bg-color="white"
+          mask="(###)-###-####"
+          unmasked-value
+          hide-bottom-space
+          label="หมายเลขโทรศัพท์"
+          :rules="[(val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์'}`]"
+        />
+        <q-input
+          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+          dense
+          ref="ordainDayLocationAddressRef"
+          bg-color="white"
+          outlined
+          hide-bottom-space
+          v-model="formDataOrdination.ordainDayLocationAddress"
+          label="ที่อยู่"
+          :rules="[(val) => !!val || `${'กรุณากรอกที่อยู่'}`]"
+          type="textarea"
+        />
+
+        <div class="q-pl-sm text-weight-bold text-dark col-12">
+          สถานที่จำพรรษา
+        </div>
+        <q-input
+          class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+          dense
+          ref="ordainDayBuddhistLentNameRef"
+          bg-color="white"
+          hide-bottom-space
+          outlined
+          v-model="formDataOrdination.ordainDayBuddhistLentName"
+          label="ชื่อวัด"
+          :rules="[(val) => !!val || `${'กรุณากรอกชื่อวัด'}`]"
+        />
+
+        <q-input
+          class="col-12 cursor-pointer inputgreen"
+          dense
+          ref="ordainDayBuddhistLentAddressRef"
+          bg-color="white"
+          outlined
+          v-model="formDataOrdination.ordainDayBuddhistLentAddress"
+          label="ที่อยู่"
+          :rules="[(val) => !!val || `${'กรุณากรอกที่อยู่'}`]"
+          type="textarea"
+          hide-bottom-space
+        />
+        <q-input
+          type="textarea"
+          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+          dense
+          bg-color="white"
+          outlined
+          ref="leaveDetailRef"
+          for="leaveDetailRef"
+          v-model="formDataOrdination.leaveDetail"
+          label="รายละเอียด"
+          :readonly="!edit"
+        />
+
+        <div class="col-12 col-sm-6">
+          <q-file
+            ref="leaveDocumentRef"
+            v-model="formDataOrdination.leaveDocument"
+            @added="fileUploadDoc"
+            dense
+            label="เอกสารประกอบ"
+            outlined
+            bg-color="white"
+            multiple
+            use-chips
+          >
+            <template v-slot:prepend>
+              <q-icon name="attach_file" color="primary" />
+            </template>
+          </q-file>
+        </div>
+
+        <div class="col-12 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 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>
+
+    <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="บันทึก"
+        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+      >
+      <q-btn
+        v-if="data"
+        id="onSubmit"
+        type="button"
+        unelevated
+        dense
+        class="q-px-md items-center q-ml-sm"
+        color="primary"
+        label="ยื่นใบลา"
+        @click="onConfirm"
+        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+      >
+    </div>
+  </form>
+</template>

src/modules/05_leave/components/FormLeave/07_HajjForm.vue

@@ -0,0 +1,442 @@
+<script setup lang="ts">
+import { reactive, ref, onMounted } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import type { HajiForm } from "@/modules/05_leave/interface/request/AddAbsence";
+import { useLeaveStore } from "@/modules/05_leave/store";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRouter } from "vue-router";
+
+/** Use */
+const router = useRouter();
+const dataStore = useLeaveStore();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  dialogConfirm,
+  calculateDurationYmd,
+  fails,
+  messageError,
+  success,
+  dateToISO,
+} = mixin;
+const edit = ref<boolean>(true);
+const files = ref<any>(null);
+
+/** ตัวแปร ref สำหรับแสดง validate */
+const leaveWroteRef = ref<object | null>(null);
+const leavegovernmentDateRef = ref<object | null>(null);
+const leaveStartDateRef = ref<object | null>(null);
+const leaveEndDateRef = ref<object | null>(null);
+const leaveDocumentRef = ref<object | null>(null);
+
+/** รับ props มาจากหน้าหลัก */
+const props = defineProps({
+  data: {
+    type: Array,
+    default: null,
+  },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
+  onConfirm: {
+    type: Function,
+    default: () => "",
+  },
+});
+
+/** ข้อมูล v-model ของฟอร์ม */
+const formDataHaji = reactive<any>({
+  type: dataStore.typeId,
+  leaveWrote: "",
+  leavegovernmentDate: new Date(),
+  leaveStartDate: null,
+  leaveEndDate: null,
+  totalLeave: new Date(),
+  hajjDayStatus: "true",
+  leaveDocument: null,
+});
+
+/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
+const formRef: HajiForm = {
+  leaveWrote: leaveWroteRef,
+  leavegovernmentDate: leavegovernmentDateRef,
+  leaveStartDate: leaveStartDateRef,
+  leaveEndDate: leaveEndDateRef,
+  leaveDocument: leaveDocumentRef,
+};
+
+/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
+const nameFile = ref<string>("");
+const fileDocDataUpload = ref<File[]>([]);
+const fileUploadDoc = async (files: any) => {
+  files.forEach((file: any) => {
+    fileDocDataUpload.value.push(file);
+  });
+};
+
+/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
+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)) {
+    const formData = new FormData();
+    // if (formDataHaji.leaveDocument.length > 0) {
+    // 	const blob = formDataHaji.leaveDocument.slice(0, formDataHaji.leaveDocument[0].size)
+    // 	const newFile = new File(blob, nameFile.value, {
+    // 		type: formDataHaji.leaveDocument[0].type,
+    // 	})
+    // 	formData.append("leaveDocument", newFile)
+    // }
+    formData.append("leaveDocument", formDataHaji.leaveDocument);
+    formData.append("type", formDataHaji.type);
+    formData.append("leaveStartDate", dateToISO(formDataHaji.leaveStartDate));
+    formData.append("leaveEndDate", dateToISO(formDataHaji.leaveEndDate));
+    formData.append("hajjDayStatus", formDataHaji.hajjDayStatus);
+    formData.append("leaveWrote", formDataHaji.leaveWrote);
+    formData.append("leaveDetail", formDataHaji.leaveDetail);
+    formData.append(
+      "leavegovernmentDate",
+      dateToISO(formDataHaji.leavegovernmentDate)
+    );
+    props.onSubmit(FormData);
+  }
+}
+
+/**
+ * check ว่าลาได้ไหม จาก api
+ * @param formData
+ */
+const isLeave = ref<boolean>(true);
+async function fetchCheck() {
+  await http
+    .post(config.API.leaveCheck(), {
+      type: dataStore.typeId ?? null,
+      StartLeaveDate: formDataHaji.leaveStartDate ?? null,
+      EndLeaveDate: formDataHaji.leaveEndDate ?? null,
+    })
+    .then((res: any) => {
+      const data = res.data.result;
+      isLeave.value = data.isLeave;
+      if (data.isLeave === true) {
+        // formDataHaji.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
+        formDataHaji.leaveTotal = data.totalDate;
+      } else {
+        fails($q, "ไม่สามารถลาได้");
+      }
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
+}
+
+/**
+ * function อัพเดทค่า LeaveTotal
+ */
+function updateLeaveTotal() {
+  const newLeaveTotal = calculateDurationYmd(
+    formDataHaji.leaveStartDate,
+    formDataHaji.leaveEndDate
+  );
+  formDataHaji.leaveTotal = newLeaveTotal;
+}
+
+/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
+onMounted(() => {
+  if (props.data) {
+    formDataHaji.leaveWrote = props.data.leaveWrote;
+    formDataHaji.leavegovernmentDate = props.data.leavegovernmentDate;
+    formDataHaji.leaveStartDate = props.data.leaveStartDate;
+    formDataHaji.leaveEndDate = props.data.leaveEndDate;
+    formDataHaji.totalLeave = props.data.totalLeave;
+    formDataHaji.hajjDayStatus = props.data.hajjDayStatus;
+    formDataHaji.leaveDetail = props.data.leaveDetail;
+    // formDataHaji.leaveDocument = props.data.leaveDocument;
+  }
+});
+</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="onValidate" class="full-width">
+    <q-card bordered class="q-pa-md bg-grey-1">
+      <div class="row q-pa-sm q-col-gutter-sm">
+        <q-input
+          v-model="formDataHaji.leaveWrote"
+          ref="leaveWroteRef"
+          class="col-12 col-sm-12 cursor-pointer inputgreen"
+          bg-color="white"
+          dense
+          outlined
+          label="เขียนที่"
+          hide-bottom-space
+          :rules="[(val) => !!val || `${'เขียนที่'}`]"
+        />
+
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <datepicker
+              v-model="formDataHaji.leaveStartDate"
+              class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+              menu-class-name="modalfix"
+              autoApply
+              borderless
+              week-start="0"
+              :enableTimePicker="false"
+              :locale="'th'"
+              @update:model-value="formDataHaji.leaveEndDate = null"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  ref="leaveStartDateRef"
+                  bg-color="white"
+                  class="full-width datepicker"
+                  outlined
+                  dense
+                  hide-bottom-space
+                  :label="`${'ลาตั้งแต่วันที่'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+                  :model-value="
+                    formDataHaji.leaveStartDate != null
+                      ? date2Thai(formDataHaji.leaveStartDate)
+                      : null
+                  "
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+
+            <datepicker
+              v-model="formDataHaji.leaveEndDate"
+              class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+              menu-class-name="modalfix"
+              autoApply
+              borderless
+              week-start="0"
+              :enableTimePicker="false"
+              :locale="'th'"
+              @update:model-value="updateLeaveTotal"
+              :readonly="!formDataHaji.leaveStartDate"
+              :min-date="formDataHaji.leaveStartDate"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  ref="leaveEndDateRef"
+                  class="full-width datepicker"
+                  bg-color="white"
+                  outlined
+                  dense
+                  :readonly="!formDataHaji.leaveStartDate"
+                  hide-bottom-space
+                  :label="`${'ลาถึงวันที่'}`"
+                  @update:model-value="fetchCheck()"
+                  :model-value="
+                    formDataHaji.leaveEndDate != null
+                      ? date2Thai(formDataHaji.leaveEndDate)
+                      : null
+                  "
+                  :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-2 col-sm-6"
+              dense
+              outlined
+              bg-color="white"
+              ref="leaveTotalRef"
+              for="leaveTotalRef"
+              v-model="formDataHaji.leaveTotal"
+              label="จำนวนวันที่ลา"
+              readonly
+              hide-bottom-space
+            />
+            <datepicker
+              v-model="formDataHaji.leavegovernmentDate"
+              class="col-12 col-md-4 col-sm-6"
+              menu-class-name="modalfix"
+              autoApply
+              borderless
+              readonly
+              week-start="0"
+              :locale="'th'"
+              :enableTimePicker="false"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  ref="leavegovernmentDateRef"
+                  bg-color="white"
+                  class="full-width"
+                  outlined
+                  dense
+                  readonly
+                  hide-bottom-space
+                  :label="`${'วันที่เข้ารับราชการ'}`"
+                  :model-value="
+                    formDataHaji.leavegovernmentDate != null
+                      ? date2Thai(formDataHaji.leavegovernmentDate)
+                      : null
+                  "
+                  :rules="[
+                    (val) => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`,
+                  ]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--black)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+        </div>
+
+        <div class="q-pl-sm text-weight-bold text-dark col-12">
+          เคยไปประกอบพิธีฮัจญ์หรือไม่
+        </div>
+        <div class="col-12">
+          <q-radio
+            v-model="formDataHaji.hajjDayStatus"
+            val="true"
+            checked-icon="task_alt"
+            label="เคย"
+          />
+          <q-radio
+            v-model="formDataHaji.hajjDayStatus"
+            val="false"
+            checked-icon="task_alt"
+            label="ไม่เคยไปประกอบพิธีฮัจญ์"
+          />
+        </div>
+
+        <q-input
+          v-model="formDataHaji.leaveDetail"
+          class="col-12 q-mt-sm cursor-pointer inputgreen"
+          bg-color="white"
+          dense
+          outlined
+          type="textarea"
+          label="รายละเอียด"
+        />
+
+        <div class="col-12 col-sm-6">
+          <q-file
+            v-model="formDataHaji.leaveDocument"
+            bg-color="white"
+            label="เอกสารประกอบ"
+            use-chips
+            @added="fileUploadDoc"
+            dense
+            outlined
+            multiple
+            hide-bottom-space
+          >
+            <template v-slot:prepend>
+              <q-icon name="attach_file" color="primary" />
+            </template>
+          </q-file>
+        </div>
+
+        <div class="col-12 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 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>
+    <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="บันทึก"
+        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+      >
+      <q-btn
+        v-if="data"
+        id="onSubmit"
+        type="button"
+        unelevated
+        dense
+        class="q-px-md items-center q-ml-sm"
+        color="primary"
+        label="ยื่นใบลา"
+        @click="onConfirm"
+        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+      >
+    </div>
+  </form>
+</template>

src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue

@@ -0,0 +1,493 @@
+<script setup lang="ts">
+import { reactive, ref, onMounted } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import type { MilitaryForm } from "@/modules/05_leave/interface/request/AddAbsence";
+import { useLeaveStore } from "@/modules/05_leave/store";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRouter } from "vue-router";
+
+/** Use */
+const router = useRouter();
+const dataStore = useLeaveStore();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  dialogConfirm,
+  calculateDurationYmd,
+  dateToISO,
+  success,
+  messageError,
+  fails,
+} = mixin;
+const edit = ref<boolean>(true);
+const files = ref<any>(null);
+
+/** ตัวแปร ref สำหรับแสดง validate */
+const leaveStartDateRef = ref<object | null>(null);
+const leaveEndDateRef = ref<object | null>(null);
+const leaveWroteRef = ref<object | null>(null);
+const absentDaySummonRef = ref<object | null>(null);
+const absentDayLocationRef = ref<object | null>(null);
+const absentDayRegistorDateRef = ref<object | null>(null);
+const absentDayGetInRef = ref<object | null>(null);
+const absentDayAtRef = ref<object | null>(null);
+const leaveDetailRef = ref<object | null>(null);
+
+/** รับ props มาจากหน้าหลัก */
+const props = defineProps({
+  data: {
+    type: Array,
+    default: null,
+  },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
+  onConfirm: {
+    type: Function,
+    default: () => "",
+  },
+});
+
+/** ข้อมูล v-model ของฟอร์ม */
+const formDataMilitary = reactive<any>({
+  type: dataStore.typeId,
+  leaveStartDate: null,
+  leaveEndDate: null,
+  leaveTotal: 0,
+  leaveDocument: null,
+  leaveWrote: "",
+  absentDaySummon: "",
+  absentDayLocation: "",
+  absentDayRegistorDate: null,
+  absentDayGetIn: "",
+  absentDayAt: "",
+  leaveDetail: "",
+});
+
+/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
+const nameFile = ref<string>("");
+const fileDocDataUpload = ref<File[]>([]);
+const fileUploadDoc = async (files: any) => {
+  files.forEach((file: any) => {
+    fileDocDataUpload.value.push(file);
+  });
+};
+
+/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
+const formRef: MilitaryForm = {
+  leaveStartDate: leaveStartDateRef,
+  leaveEndDate: leaveEndDateRef,
+  leaveWrote: leaveWroteRef,
+  absentDaySummon: absentDaySummonRef,
+  absentDayLocation: absentDayLocationRef,
+  absentDayRegistorDate: absentDayRegistorDateRef,
+  absentDayGetIn: absentDayGetInRef,
+  absentDayAt: absentDayAtRef,
+  leaveDetail: leaveDetailRef,
+};
+
+/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
+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)) {
+    const formData = new FormData();
+    // if (formDataMilitary.leaveDocument.length > 0) {
+    // 	const blob = formDataMilitary.leaveDocument.slice(0, formDataMilitary.leaveDocument[0].size)
+    // 	const newFile = new File(blob, nameFile.value, {
+    // 		type: formDataMilitary.leaveDocument[0].type,
+    // 	})
+    // 	formData.append("leaveDocument", newFile)
+    // }
+    formData.append("leaveDocument", formDataMilitary.leaveDocument);
+    formData.append("type", formDataMilitary.type);
+    formData.append(
+      "leaveStartDate",
+      dateToISO(formDataMilitary.leaveStartDate)
+    );
+    formData.append("leaveEndDate", dateToISO(formDataMilitary.leaveEndDate));
+    formData.append("absentDaySummon", formDataMilitary.absentDaySummon);
+    formData.append("absentDayLocation", formDataMilitary.absentDayLocation);
+    formData.append(
+      "absentDayRegistorDate",
+      dateToISO(formDataMilitary.absentDayRegistorDate)
+    );
+    formData.append("absentDayGetIn", formDataMilitary.absentDayGetIn);
+    formData.append("absentDayAt", formDataMilitary.absentDayAt);
+    formData.append("leaveWrote", formDataMilitary.leaveWrote);
+    formData.append("leaveDetail", formDataMilitary.leaveDetail);
+    props.onSubmit(formData);
+  }
+}
+
+/**
+ * check ว่าลาได้ไหม จาก api
+ * @param formData
+ */
+const isLeave = ref<boolean>(true);
+async function fetchCheck() {
+  await http
+    .post(config.API.leaveCheck(), {
+      type: dataStore.typeId ?? null,
+      StartLeaveDate: formDataMilitary.leaveStartDate ?? null,
+      EndLeaveDate: formDataMilitary.leaveEndDate ?? null,
+    })
+    .then((res: any) => {
+      const data = res.data.result;
+      isLeave.value = data.isLeave;
+      if (data.isLeave === true) {
+        // formDataMilitary.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
+        formDataMilitary.leaveTotal = data.totalDate;
+      } else {
+        fails($q, "ไม่สามารถลาได้");
+      }
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
+}
+
+/**
+ * function อัพเดทค่า LeaveTotal
+ */
+function updateLeaveTotal() {
+  const newLeaveTotal = calculateDurationYmd(
+    formDataMilitary.leaveStartDate,
+    formDataMilitary.leaveEndDate
+  );
+  formDataMilitary.leaveTotal = newLeaveTotal;
+  console.log("test");
+}
+
+/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
+onMounted(() => {
+  if (props.data) {
+    formDataMilitary.leaveWrote = props.data.leaveWrote;
+    formDataMilitary.leaveStartDate = props.data.leaveStartDate;
+    formDataMilitary.leaveEndDate = props.data.leaveEndDate;
+    formDataMilitary.leaveTotal = props.data.leaveTotal;
+    formDataMilitary.absentDaySummon = props.data.absentDaySummon;
+    formDataMilitary.absentDayLocation = props.data.absentDayLocation;
+    formDataMilitary.absentDayRegistorDate = props.data.absentDayRegistorDate;
+    formDataMilitary.absentDayGetIn = props.data.absentDayGetIn;
+    formDataMilitary.absentDayAt = props.data.absentDayAt;
+    formDataMilitary.leaveDetail = props.data.leaveDetail;
+    // formDataMilitary.leaveDocument = props.data.leaveDocument;
+  }
+});
+</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="onValidate">
+    <q-card bordered class="q-pa-md bg-grey-1">
+      <div class="row q-pa-sm q-col-gutter-sm">
+        <q-input
+          ref="leaveWroteRef"
+          class="col-12 col-sm-12 cursor-pointer inputgreen"
+          dense
+          outlined
+          bg-color="white"
+          hide-bottom-space
+          v-model="formDataMilitary.leaveWrote"
+          label="เขียนที่"
+          :rules="[(val) => !!val || `${'เขียนที่'}`]"
+        />
+
+        <datepicker
+          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataMilitary.leaveStartDate"
+          :locale="'th'"
+          autoApply
+          borderless
+          :enableTimePicker="false"
+          week-start="0"
+          @update:model-value="formDataMilitary.leaveEndDate = null"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              bg-color="white"
+              dense
+              ref="leaveStartDateRef"
+              hide-bottom-space
+              class="full-width datepicker"
+              :model-value="
+                formDataMilitary.leaveStartDate != null
+                  ? date2Thai(formDataMilitary.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-4 col-sm-6 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataMilitary.leaveEndDate"
+          :locale="'th'"
+          autoApply
+          borderless
+          :enableTimePicker="false"
+          week-start="0"
+          @update:model-value="updateLeaveTotal, fetchCheck()"
+          :readonly="!formDataMilitary.leaveStartDate"
+          :min-date="formDataMilitary.leaveStartDate"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              dense
+              ref="leaveEndDateRef"
+              bg-color="white"
+              hide-bottom-space
+              :readonly="!formDataMilitary.leaveStartDate"
+              class="full-width datepicker"
+              :model-value="
+                formDataMilitary.leaveEndDate != null
+                  ? date2Thai(formDataMilitary.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-2 col-sm-6"
+          dense
+          outlined
+          bg-color="white"
+          ref="leaveTotalRef"
+          for="leaveTotalRef"
+          v-model="formDataMilitary.leaveTotal"
+          label="จำนวนวันที่ลา"
+          readonly
+          hide-bottom-space
+        />
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <q-input
+              ref="absentDaySummonRef"
+              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              dense
+              bg-color="white"
+              outlined
+              v-model="formDataMilitary.absentDaySummon"
+              label="ได้รับหมายเรียกของ"
+              hide-bottom-space
+              :rules="[(val) => !!val || `${'กรุณากรอกได้รับหมายเรียกของ'}`]"
+            />
+
+            <q-input
+              ref="atRef"
+              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              dense
+              bg-color="white"
+              outlined
+              v-model="formDataMilitary.absentDayLocation"
+              label="ที่"
+              hide-bottom-space
+              :rules="[(val) => !!val || `${'กรุณากรอกที่'}`]"
+            />
+          </div>
+        </div>
+
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <datepicker
+              class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+              menu-class-name="modalfix"
+              v-model="formDataMilitary.absentDayRegistorDate"
+              :locale="'th'"
+              autoApply
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  dense
+                  ref="absentDayRegistorDateRef"
+                  bg-color="white"
+                  hide-bottom-space
+                  class="full-width datepicker"
+                  :model-value="
+                    formDataMilitary.absentDayRegistorDate != null
+                      ? date2Thai(formDataMilitary.absentDayRegistorDate)
+                      : 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-sm-6 col-md-4 cursor-pointer inputgreen"
+              dense
+              bg-color="white"
+              ref="absentDayGetInRef"
+              outlined
+              v-model="formDataMilitary.absentDayGetIn"
+              label="ให้เข้ารับการ"
+              hide-bottom-space
+              :rules="[(val) => !!val || `${'กรุณากรอกให้เข้ารับการ'}`]"
+            />
+
+            <q-input
+              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              dense
+              bg-color="white"
+              outlined
+              ref="absentDayAtRef"
+              v-model="formDataMilitary.absentDayAt"
+              label="ณ ที่"
+              hide-bottom-space
+              :rules="[(val) => !!val || `${'กรุณากรอก ณ ที่'}`]"
+            />
+          </div>
+        </div>
+
+        <q-input
+          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+          dense
+          bg-color="white"
+          outlined
+          v-model="formDataMilitary.leaveDetail"
+          type="textarea"
+          label="รายละเอียด"
+        />
+
+        <div class="col-12 col-sm-6">
+          <q-file
+            v-model="formDataMilitary.leaveDocument"
+            dense
+            label="เอกสารประกอบ"
+            outlined
+            bg-color="white"
+            multiple
+            hide-bottom-space
+            use-chips
+            @added="fileUploadDoc"
+          >
+            <template v-slot:prepend>
+              <q-icon name="attach_file" color="primary" />
+            </template>
+          </q-file>
+        </div>
+
+        <div class="col-12 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 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>
+    <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="บันทึก"
+        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+      >
+      <q-btn
+        v-if="data"
+        id="onSubmit"
+        type="button"
+        unelevated
+        dense
+        class="q-px-md items-center q-ml-sm"
+        color="primary"
+        label="ยื่นใบลา"
+        @click="onConfirm"
+        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+      >
+    </div>
+  </form>
+</template>

src/modules/05_leave/components/FormLeave/09_StudyForm.vue

@@ -0,0 +1,646 @@
+<script setup lang="ts">
+import { reactive, ref, computed, onMounted } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import type { studyDaySubjectForm } from "@/modules/05_leave/interface/request/AddAbsence";
+import { useLeaveStore } from "@/modules/05_leave/store";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRouter } from "vue-router";
+
+/** Use */
+const dataStore = useLeaveStore();
+const $q = useQuasar();
+const router = useRouter();
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  dialogConfirm,
+  calculateDurationYmd,
+  fails,
+  dateToISO,
+  success,
+  messageError,
+  arabicNumberToText,
+} = mixin;
+const edit = ref<boolean>(true);
+const files = ref<any>(null);
+
+/** ตัวแปร ref สำหรับแสดง validate */
+const leaveStartDateRef = ref<object | null>(null);
+const leaveEndDateRef = ref<object | null>(null);
+const leavebirthDateRef = ref<object | null>(null);
+const leavegovernmentDateRef = ref<object | null>(null);
+const leaveSalaryRef = ref<object | null>(null);
+const leaveNumberRef = ref<object | null>(null);
+const leaveAddressRef = ref<object | null>(null);
+const studyDayScholarshipRef = ref<object | null>(null);
+const studyDayCountryRef = ref<object | null>(null);
+const studyDayUniversityNameRef = ref<object | null>(null);
+const studyDayDegreeLevelRef = ref<object | null>(null);
+const studyDaySubjectRef = ref<object | null>(null);
+const leaveWroteRef = ref<object | null>(null);
+
+/** รับ props มาจากหน้าหลัก */
+const props = defineProps({
+  data: {
+    type: Array,
+    default: null,
+  },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
+  onConfirm: {
+    type: Function,
+    default: () => "",
+  },
+});
+
+/** ข้อมูล v-model ของฟอร์ม */
+const formDataStudy = reactive<any>({
+  type: dataStore.typeId, //
+  leaveWrote: "", //
+  leaveStartDate: null,
+  leaveEndDate: null,
+  leavebirthDate: new Date(),
+  leavegovernmentDate: new Date(),
+  leaveSalary: 10000,
+  leaveSalaryText: arabicNumberToText(10000),
+  leaveNumber: "",
+  leaveAddress: "",
+  studyDayScholarship: "",
+  studyDayCountry: "",
+  studyDayUniversityName: "", //
+  studyDayDegreeLevel: "", //
+  studyDaySubject: "", //
+  leaveDocument: "", //
+  leaveDetail: "",
+  leaveTotal: "",
+});
+
+/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
+const formRef: studyDaySubjectForm = {
+  leaveStartDate: leaveStartDateRef,
+  leaveEndDate: leaveEndDateRef,
+  leavebirthDate: leavebirthDateRef,
+  leavegovernmentDate: leavegovernmentDateRef,
+  leaveSalary: leaveSalaryRef,
+  leaveNumber: leaveNumberRef,
+  leaveAddress: leaveAddressRef,
+  studyDayScholarship: studyDayScholarshipRef,
+  studyDayCountry: studyDayCountryRef,
+  studyDayUniversityName: studyDayUniversityNameRef,
+  studyDayDegreeLevel: studyDayDegreeLevelRef,
+  studyDaySubject: studyDaySubjectRef,
+  leaveWrote: leaveWroteRef,
+};
+
+/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
+const nameFile = ref<string>("");
+const fileDocDataUpload = ref<File[]>([]);
+const fileUploadDoc = async (files: any) => {
+  files.forEach((file: any) => {
+    fileDocDataUpload.value.push(file);
+  });
+};
+
+/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
+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)) {
+    const formData = new FormData();
+    // if (formDataStudy.leaveDocument.length > 0) {
+    // 	const blob = formDataStudy.leaveDocument.slice(0, formDataStudy.leaveDocument[0].size)
+    // 	const newFile = new File(blob, nameFile.value, {
+    // 		type: formDataStudy.leaveDocument[0].type,
+    // 	})
+    // 	formData.append("leaveDocument", newFile)
+    // }
+    formData.append("leaveDocument", formDataStudy.leaveDocument);
+    formData.append("type", formDataStudy.type); //
+    formData.append("leaveStartDate", dateToISO(formDataStudy.leaveStartDate)); //
+    formData.append("leaveEndDate", dateToISO(formDataStudy.leaveEndDate)); //
+    formData.append("studyDaySubject", formDataStudy.studyDaySubject);
+    formData.append("studyDayDegreeLevel", formDataStudy.studyDayDegreeLevel);
+    formData.append(
+      "leavegovernmentDate",
+      dateToISO(formDataStudy.leavegovernmentDate)
+    );
+    formData.append("leavebirthDate", dateToISO(formDataStudy.leavebirthDate));
+    formData.append(
+      "studyDayUniversityName",
+      formDataStudy.studyDayUniversityName
+    );
+    formData.append("studyDayCountry", formDataStudy.studyDayCountry);
+    formData.append("leaveWrote", formDataStudy.leaveWrote); //
+    formData.append("leaveDetail", formDataStudy.leaveDetail); //
+    formData.append("studyDayScholarship", formDataStudy.studyDayScholarship);
+    formData.append("leaveAddress", formDataStudy.leaveAddress); //
+    formData.append("leaveNumber", formDataStudy.leaveNumber); //
+    props.onSubmit(formData);
+  }
+}
+
+/**
+ * check ว่าลาได้ไหม จาก api
+ * @param formData
+ */
+const isLeave = ref<boolean>(true);
+async function FetchCheck() {
+  await http
+    .post(config.API.leaveCheck(), {
+      type: dataStore.typeId ?? null,
+      StartLeaveDate: formDataStudy.leaveStartDate ?? null,
+      EndLeaveDate: formDataStudy.leaveEndDate ?? null,
+    })
+    .then((res: any) => {
+      const data = res.data.result;
+      isLeave.value = data.isLeave;
+      if (data.isLeave === true) {
+        formDataStudy.leaveTotal =
+          data.fetchCheck - data.sumDateWork - data.sumDateHoliday;
+        // formDataStudy.leaveLast = data.fetchCheck
+      } else {
+        fails($q, "ไม่สามารถลาได้");
+      }
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
+}
+
+/**
+ * function อัพเดทค่า LeaveTotal
+ */
+function updateLeaveTotal() {
+  const newLeaveTotal = calculateDurationYmd(
+    formDataStudy.leaveStartDate,
+    formDataStudy.leaveEndDate
+  );
+  formDataStudy.leaveTotal = newLeaveTotal;
+  console.log("test");
+}
+
+/**
+ * แปลงตัวเลขเงินเดือน
+ */
+const formattedleaveSalary = computed(() => {
+  return dataStore.salary !== null
+    ? dataStore.salary.toLocaleString("th-TH")
+    : "";
+});
+
+/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
+onMounted(() => {
+  if (props.data) {
+    formDataMilitary.leaveWrote = props.data.leaveWrote;
+    formDataMilitary.leaveStartDate = props.data.leaveStartDate;
+    formDataMilitary.leaveEndDate = props.data.leaveEndDate;
+    formDataMilitary.leaveTotal = props.data.leaveTotal;
+    formDataMilitary.leavebirthDate = props.data.leavebirthDate;
+    formDataMilitary.leavegovernmentDate = props.data.leavegovernmentDate;
+    formDataMilitary.leaveSalary = props.data.leaveSalary;
+    formDataMilitary.leaveSalaryText = props.data.leaveSalaryText;
+    formDataMilitary.leaveNumber = props.data.leaveNumber;
+    formDataMilitary.leaveAddress = props.data.leaveAddress;
+    formDataMilitary.studyDayScholarship = props.data.studyDayScholarship;
+    formDataMilitary.studyDayCountry = props.data.studyDayCountry;
+    formDataMilitary.studyDayUniversityName = props.data.studyDayUniversityName;
+    formDataMilitary.studyDayDegreeLevel = props.data.studyDayDegreeLevel;
+    formDataMilitary.studyDaySubject = props.data.studyDaySubject;
+    // formDataMilitary.leaveDocument = props.data.leaveDocument;
+    formDataMilitary.leaveDetail = props.data.leaveDetail;
+  }
+});
+</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="onValidate">
+    <q-card bordered class="q-pa-md bg-grey-1">
+      <div class="row q-pa-sm q-col-gutter-sm">
+        <q-input
+          v-model="formDataStudy.leaveWrote"
+          ref="leaveWroteRef"
+          class="col-12 col-sm-12 cursor-pointer inputgreen"
+          bg-color="white"
+          dense
+          outlined
+          label="เขียนที่"
+          hide-bottom-space
+          :rules="[(val) => !!val || `${'เขียนที่'}`]"
+        />
+
+        <datepicker
+          v-model="formDataStudy.leaveStartDate"
+          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          autoApply
+          borderless
+          week-start="0"
+          :enableTimePicker="false"
+          :locale="'th'"
+          @update:model-value="formDataStudy.leaveEndDate = null"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              ref="leaveStartDateRef"
+              class="full-width datepicker"
+              bg-color="white"
+              outlined
+              dense
+              lazy-rules
+              hide-bottom-space
+              :label="`${'ลาตั้งแต่วันที่'}`"
+              :model-value="
+                formDataStudy.leaveStartDate != null
+                  ? date2Thai(formDataStudy.leaveStartDate)
+                  : null
+              "
+              :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
+          v-model="formDataStudy.leaveEndDate"
+          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          autoApply
+          borderless
+          week-start="0"
+          :locale="'th'"
+          @update:model-value="updateLeaveTotal, FetchCheck()"
+          :readonly="!formDataStudy.leaveStartDate"
+          :enableTimePicker="false"
+          :min-date="formDataStudy.leaveStartDate"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              ref="leaveEndDateRef"
+              class="full-width datepicker"
+              outlined
+              dense
+              lazy-rules
+              bg-color="white"
+              hide-bottom-space
+              :label="`${'ลาถึงวันที่'}`"
+              :readonly="!formDataStudy.leaveStartDate"
+              :model-value="
+                formDataStudy.leaveEndDate != null
+                  ? date2Thai(formDataStudy.leaveEndDate)
+                  : null
+              "
+              :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-2 col-sm-6"
+          dense
+          outlined
+          bg-color="white"
+          ref="leaveTotalRef"
+          for="leaveTotalRef"
+          v-model="formDataStudy.leaveTotal"
+          label="มีกำหนด"
+          readonly
+          hide-bottom-space
+        />
+
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <datepicker
+              v-model="formDataStudy.leavegovernmentDate"
+              class="col-12 col-md-3 col-sm-6"
+              menu-class-name="modalfix"
+              autoApply
+              borderless
+              week-start="0"
+              readonly
+              :enableTimePicker="false"
+              :locale="'th'"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  ref="leavegovernmentDateRef"
+                  class="full-width"
+                  bg-color="white"
+                  outlined
+                  readonly
+                  dense
+                  hide-bottom-space
+                  :label="`${'วันที่เข้ารับราชการ'}`"
+                  :model-value="
+                    dataStore.dateAppoint != null
+                      ? date2Thai(dataStore.dateAppoint)
+                      : null
+                  "
+                  :rules="[
+                    (val) => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`,
+                  ]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--black)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+
+            <datepicker
+              v-model="formDataStudy.leavebirthDate"
+              class="col-12 col-md-3 col-sm-6"
+              menu-class-name="modalfix"
+              autoApply
+              borderless
+              readonly
+              week-start="0"
+              :enableTimePicker="false"
+              :locale="'th'"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  ref="leavebirthDateRef"
+                  class="full-width"
+                  bg-color="white"
+                  outlined
+                  dense
+                  readonly
+                  hide-bottom-space
+                  :label="`${'วันเดือนปีเกิด'}`"
+                  :model-value="
+                    dataStore.birthDate != null
+                      ? date2Thai(dataStore.birthDate)
+                      : null
+                  "
+                  :rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--black)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+
+            <q-input
+              v-model="formattedleaveSalary"
+              ref="leaveSalaryRef"
+              class="col-12 col-sm-6 col-md-3"
+              bg-color="white"
+              dense
+              outlined
+              readonly
+              label="เงินเดือนปัจจุบัน"
+            />
+
+            <q-input
+              v-model="dataStore.salaryText"
+              ref="leaveSalaryRef"
+              class="col-12 col-sm-6 col-md-3"
+              bg-color="white"
+              dense
+              readonly
+              outlined
+              label="เงินเดือนปัจจุบัน (ตัวอักษร)"
+              hide-bottom-space
+              :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือนปัจจุบัน'}`]"
+            />
+          </div>
+        </div>
+
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <q-input
+              v-model="formDataStudy.studyDayUniversityName"
+              ref="studyDayUniversityNameRef"
+              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              bg-color="white"
+              dense
+              outlined
+              label="ชื่อสถานศึกษา"
+              hide-bottom-space
+              :rules="[(val) => !!val || `${'กรุณากรอกชื่อสถานศึกษา'}`]"
+            />
+
+            <q-input
+              v-model="formDataStudy.studyDayDegreeLevel"
+              ref="studyDayDegreeLevelRef"
+              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              bg-color="white"
+              dense
+              outlined
+              label="ชั้นปริญญา"
+              hide-bottom-space
+              :rules="[(val) => !!val || `${'กรุณากรอกชั้นปริญญา'}`]"
+            />
+
+            <q-input
+              v-model="formDataStudy.studyDaySubject"
+              ref="studyDaySubjectRef"
+              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              bg-color="white"
+              dense
+              outlined
+              label="ศึกษาวิชา"
+              hide-bottom-space
+              :rules="[(val) => !!val || `${'กรุณากรอกศึกษาวิชา'}`]"
+            />
+
+            <q-input
+              v-model="formDataStudy.studyDayCountry"
+              ref="studyDayCountryRef"
+              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              bg-color="white"
+              dense
+              outlined
+              label="ประเทศ"
+              hide-bottom-space
+              :rules="[(val) => !!val || `${'กรุณากรอกประเทศ'}`]"
+            />
+
+            <q-input
+              v-model="formDataStudy.studyDayScholarship"
+              ref="studyDayScholarshipRef"
+              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              bg-color="white"
+              dense
+              outlined
+              label="ด้วยทุน"
+              hide-bottom-space
+              :rules="[(val) => !!val || `${'กรุณากรอกด้วยทุน'}`]"
+            />
+
+            <q-input
+              v-model="formDataStudy.leaveNumber"
+              ref="leaveNumberRef"
+              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              bg-color="white"
+              dense
+              outlined
+              unmasked-value
+              hide-bottom-space
+              mask="(###)-###-####"
+              label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+              :rules="[
+                (val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
+              ]"
+            />
+
+            <q-input
+              v-model="formDataStudy.leaveAddress"
+              ref="leaveAddressRef"
+              class="col-12 cursor-pointer inputgreen"
+              bg-color="white"
+              dense
+              outlined
+              label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
+              hide-bottom-space
+              :rules="[
+                (val) => !!val || `${'กรุณากรอก ที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
+              ]"
+            />
+          </div>
+        </div>
+
+        <q-input
+          v-model="formDataStudy.leaveDetail"
+          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+          bg-color="white"
+          dense
+          outlined
+          type="textarea"
+          label="รายละเอียด"
+        />
+
+        <div class="col-12 col-sm-6">
+          <q-file
+            v-model="formDataStudy.leaveDocument"
+            bg-color="white"
+            dense
+            outlined
+            multiple
+            use-chips
+            @added="fileUploadDoc"
+            label="เอกสารประกอบ"
+          >
+            <template v-slot:prepend>
+              <q-icon name="attach_file" color="primary" />
+            </template>
+          </q-file>
+        </div>
+
+        <div class="col-12 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 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>
+    <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="บันทึก"
+        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+      >
+      <q-btn
+        v-if="data"
+        id="onSubmit"
+        type="button"
+        unelevated
+        dense
+        class="q-px-md items-center q-ml-sm"
+        color="primary"
+        label="ยื่นใบลา"
+        @click="onConfirm"
+        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+      >
+    </div>
+  </form>
+</template>

src/modules/05_leave/components/FormLeave/10_TrainForm.vue

@@ -0,0 +1,622 @@
+<script setup lang="ts">
+import { reactive, ref, computed, onMounted } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import type { TrainForm } from "@/modules/05_leave/interface/request/AddAbsence";
+import { useQuasar } from "quasar";
+import { useLeaveStore } from "@/modules/05_leave/store";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRouter } from "vue-router";
+
+/** Use */
+const dataStore = useLeaveStore();
+const $q = useQuasar();
+const router = useRouter();
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  dialogConfirm,
+  arabicNumberToText,
+  calculateDurationYmd,
+  fails,
+  dateToISO,
+  success,
+  messageError,
+} = mixin;
+const edit = ref<boolean>(true);
+const files = ref<any>(null);
+
+/** รับ props มาจากหน้าหลัก */
+const props = defineProps({
+  data: {
+    type: Array,
+    default: null,
+  },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
+  onConfirm: {
+    type: Function,
+    default: () => "",
+  },
+});
+
+/** ข้อมูล v-model ของฟอร์ม */
+const formDataTrain = reactive<any>({
+  type: dataStore.typeId,
+  leaveWrote: "",
+  leaveStartDate: null,
+  leaveEndDate: null,
+  leavebirthDate: new Date(),
+  leavegovernmentDate: new Date(),
+  leaveSalary: 10000,
+  leaveSalaryText: arabicNumberToText(10000),
+  leaveNumber: "",
+  leaveAddress: "",
+  studyDayScholarship: "",
+  studyDayCountry: "",
+  studyDayTrainingSubject: "",
+  studyDayTrainingName: "",
+  leaveDocument: "",
+  leaveDetail: "",
+});
+
+/** ตัวแปร ref สำหรับแสดง validate */
+const leaveStartDateRef = ref<object | null>(null);
+const leaveEndDateRef = ref<object | null>(null);
+const leavebirthDateRef = ref<object | null>(null);
+const leavegovernmentDateRef = ref<object | null>(null);
+const leaveNumberRef = ref<object | null>(null);
+const leaveAddressRef = ref<object | null>(null);
+const studyDayScholarshipRef = ref<object | null>(null);
+const studyDayCountryRef = ref<object | null>(null);
+const studyDayTrainingSubjectRef = ref<object | null>(null);
+const studyDayTrainingNameRef = ref<object | null>(null);
+const leaveWroteRef = ref<object | null>(null);
+
+/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
+const formRef: TrainForm = {
+  leaveStartDate: leaveStartDateRef,
+  leaveEndDate: leaveEndDateRef,
+  leavebirthDate: leavebirthDateRef,
+  leavegovernmentDate: leavegovernmentDateRef,
+  leaveNumber: leaveNumberRef,
+  leaveAddress: leaveAddressRef,
+  studyDayScholarship: studyDayScholarshipRef,
+  studyDayCountry: studyDayCountryRef,
+  studyDayTrainingSubject: studyDayTrainingSubjectRef,
+  studyDayTrainingName: studyDayTrainingNameRef,
+  leaveWrote: leaveWroteRef,
+};
+
+/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
+const nameFile = ref<string>("");
+const fileDocDataUpload = ref<File[]>([]);
+const fileUploadDoc = async (files: any) => {
+  files.forEach((file: any) => {
+    fileDocDataUpload.value.push(file);
+  });
+};
+
+/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
+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)) {
+    const formData = new FormData();
+    // if (formDataTrain.leaveDocument.length > 0) {
+    // 	const blob = formDataTrain.leaveDocument.slice(0, formDataTrain.leaveDocument[0].size)
+    // 	const newFile = new File(blob, nameFile.value, {
+    // 		type: formDataTrain.leaveDocument[0].type,
+    // 	})
+    // 	formData.append("leaveDocument", newFile)
+    // } //
+    formData.append("leaveDocument", formDataTrain.leaveDocument);
+    formData.append("type", formDataTrain.type); //
+    formData.append("leaveStartDate", dateToISO(formDataTrain.leaveStartDate)); //
+    formData.append("leaveEndDate", dateToISO(formDataTrain.leaveEndDate)); //
+    formData.append("studyDayCountry", formDataTrain.studyDayCountry);
+    formData.append(
+      "leavegovernmentDate",
+      dateToISO(formDataTrain.leavegovernmentDate)
+    );
+    formData.append("leavebirthDate", dateToISO(formDataTrain.leavebirthDate));
+    formData.append("studyDayTrainingName", formDataTrain.studyDayTrainingName);
+    formData.append(
+      "studyDayTrainingSubject",
+      formDataTrain.studyDayTrainingSubject
+    );
+    formData.append("leaveWrote", formDataTrain.leaveWrote); //
+    formData.append("leaveDetail", formDataTrain.leaveDetail); //
+    formData.append("studyDayScholarship", formDataTrain.studyDayScholarship);
+    formData.append("leaveAddress", formDataTrain.leaveAddress); //
+    formData.append("leaveNumber", formDataTrain.leaveNumber); //
+    formData.append("leaveSalaryText", formDataTrain.leaveSalaryText); //
+    formData.append("leaveSalary", formDataTrain.leaveSalary); //
+    formData.append("leaveTotal", formDataTrain.leaveTotal); //
+    props.onSubmit(formData);
+  }
+}
+
+/**
+ * check ว่าลาได้ไหม จาก api
+ * @param formData
+ */
+const isLeave = ref<boolean>(true);
+async function FetchCheck() {
+  await http
+    .post(config.API.leaveCheck(), {
+      type: dataStore.typeId ?? null,
+      StartLeaveDate: formDataTrain.leaveStartDate ?? null,
+      EndLeaveDate: formDataTrain.leaveEndDate ?? null,
+    })
+    .then((res: any) => {
+      const data = res.data.result;
+      isLeave.value = data.isLeave;
+      if (data.isLeave === true) {
+        // formDataTrain.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
+        // formDataTrain.leaveTotal = data.totalDate
+      } else {
+        fails($q, "ไม่สามารถลาได้");
+      }
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
+}
+
+/**
+ * function อัพเดทค่า LeaveTotal
+ */
+function updateLeaveTotal() {
+  const newLeaveTotal = calculateDurationYmd(
+    formDataTrain.leaveStartDate,
+    formDataTrain.leaveEndDate
+  );
+  formDataTrain.leaveTotal = newLeaveTotal;
+  console.log("test");
+}
+
+/**
+ * แปลงตัวเลขเงินเดือน
+ */
+const formattedSalary = computed(() => {
+  return formDataTrain.leaveSalary !== null
+    ? formDataTrain.leaveSalary.toLocaleString("th-TH")
+    : "";
+});
+
+/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
+onMounted(() => {
+  if (props.data) {
+    formDataTrain.leaveWrote = props.data.leaveWrote;
+    formDataTrain.leaveStartDate = props.data.leaveStartDate;
+    formDataTrain.leaveEndDate = props.data.leaveEndDate;
+    formDataTrain.leavebirthDate = props.data.leavebirthDate;
+    formDataTrain.leavegovernmentDate = props.data.leavegovernmentDate;
+    formDataTrain.leaveSalary = props.data.leaveSalary;
+    formDataTrain.leaveSalaryText = props.data.leaveSalaryText;
+    formDataTrain.leaveNumber = props.data.leaveNumber;
+    formDataTrain.leaveAddress = props.data.leaveAddress;
+    formDataTrain.studyDayScholarship = props.data.studyDayScholarship;
+    formDataTrain.studyDayCountry = props.data.studyDayCountry;
+    formDataTrain.studyDayTrainingSubject = props.data.studyDayTrainingSubject;
+    formDataTrain.studyDayTrainingName = props.data.studyDayTrainingName;
+    formDataTrain.leaveDetail = props.data.leaveDetail;
+    // formDataTrain.leaveDocument = props.data.leaveDocument;
+  }
+});
+</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="onValidate">
+    <q-card bordered class="q-pa-md bg-grey-1">
+      <div class="row q-pa-sm q-col-gutter-sm">
+        <q-input
+          v-model="formDataTrain.leaveWrote"
+          ref="leaveWroteRef"
+          class="col-12 col-sm-12 cursor-pointer inputgreen"
+          bg-color="white"
+          dense
+          outlined
+          label="เขียนที่"
+          hide-bottom-space
+          :rules="[(val) => !!val || `${'เขียนที่'}`]"
+        />
+
+        <datepicker
+          v-model="formDataTrain.leaveStartDate"
+          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          autoApply
+          borderless
+          week-start="0"
+          :enableTimePicker="false"
+          :locale="'th'"
+          @update:model-value="formDataTrain.leaveEndDate = null"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              ref="leaveStartDateRef"
+              class="full-width datepicker"
+              bg-color="white"
+              outlined
+              dense
+              lazy-rules
+              hide-bottom-space
+              :label="`${'ลาตั้งแต่วันที่'}`"
+              :model-value="
+                formDataTrain.leaveStartDate != null
+                  ? date2Thai(formDataTrain.leaveStartDate)
+                  : null
+              "
+              :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
+          v-model="formDataTrain.leaveEndDate"
+          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          autoApply
+          borderless
+          @update:model-value="updateLeaveTotal, FetchCheck()"
+          week-start="0"
+          :readonly="!formDataTrain.leaveStartDate"
+          :locale="'th'"
+          :enableTimePicker="false"
+          :min-date="formDataTrain.leaveStartDate"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              ref="leaveEndDateRef"
+              class="full-width datepicker"
+              outlined
+              dense
+              lazy-rules
+              bg-color="white"
+              hide-bottom-space
+              :label="`${'ลาถึงวันที่'}`"
+              :readonly="!formDataTrain.leaveStartDate"
+              :model-value="
+                formDataTrain.leaveEndDate != null
+                  ? date2Thai(formDataTrain.leaveEndDate)
+                  : null
+              "
+              :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-2 col-sm-6"
+          dense
+          outlined
+          bg-color="white"
+          ref="leaveTotalRef"
+          for="leaveTotalRef"
+          v-model="formDataTrain.leaveTotal"
+          label="มีกำหนด"
+          readonly
+          hide-bottom-space
+        />
+
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <datepicker
+              v-model="formDataTrain.leavegovernmentDate"
+              class="col-12 col-md-3 col-sm-6"
+              menu-class-name="modalfix"
+              autoApply
+              borderless
+              week-start="0"
+              readonly
+              :enableTimePicker="false"
+              :locale="'th'"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  ref="leavegovernmentDateRef"
+                  class="full-width"
+                  outlined
+                  readonly
+                  bg-color="white"
+                  dense
+                  hide-bottom-space
+                  :label="`${'วันที่เข้ารับราชการ'}`"
+                  :model-value="
+                    formDataTrain.leavegovernmentDate != null
+                      ? date2Thai(formDataTrain.leavegovernmentDate)
+                      : null
+                  "
+                  :rules="[
+                    (val) => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`,
+                  ]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--black)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+
+            <datepicker
+              v-model="formDataTrain.leavebirthDate"
+              class="col-12 col-md-3 col-sm-6"
+              menu-class-name="modalfix"
+              autoApply
+              borderless
+              readonly
+              week-start="0"
+              :enableTimePicker="false"
+              :locale="'th'"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  ref="leavebirthDateRef"
+                  class="full-width"
+                  bg-color="white"
+                  outlined
+                  dense
+                  readonly
+                  hide-bottom-space
+                  :label="`${'วันเดือนปีเกิด'}`"
+                  :model-value="
+                    formDataTrain.leavebirthDate != null
+                      ? date2Thai(formDataTrain.leavebirthDate)
+                      : null
+                  "
+                  :rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(---black)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+
+            <q-input
+              v-model="formattedSalary"
+              class="col-12 col-sm-6 col-md-3"
+              bg-color="white"
+              dense
+              outlined
+              readonly
+              label="เงินเดือนปัจจุบัน"
+            />
+
+            <q-input
+              v-model="formDataTrain.leaveSalaryText"
+              class="col-12 col-sm-6 col-md-3"
+              dense
+              readonly
+              outlined
+              bg-color="white"
+              label="เงินเดือนปัจจุบัน (ตัวอักษร)"
+            />
+          </div>
+        </div>
+
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <q-input
+              v-model="formDataTrain.studyDayTrainingSubject"
+              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              ref="studyDayTrainingSubjectRef"
+              bg-color="white"
+              dense
+              outlined
+              label="ด้าน/หลักสูตร"
+              hide-bottom-space
+              :rules="[(val) => !!val || `${'กรุณากรอกด้าน/หลักสูตร'}`]"
+            />
+
+            <q-input
+              v-model="formDataTrain.studyDayTrainingName"
+              ref="studyDayTrainingNameRef"
+              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              bg-color="white"
+              dense
+              outlined
+              label="ณ สถานที่"
+              hide-bottom-space
+              :rules="[(val) => !!val || `${'กรุณากรอก ณ สถานที่'}`]"
+            />
+
+            <q-input
+              v-model="formDataTrain.studyDayCountry"
+              ref="studyDayCountryRef"
+              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              dense
+              bg-color="white"
+              outlined
+              label="ประเทศ"
+              hide-bottom-space
+              :rules="[(val) => !!val || `${'กรุณากรอกประเทศ'}`]"
+            />
+
+            <q-input
+              v-model="formDataTrain.studyDayScholarship"
+              ref="studyDayScholarshipRef"
+              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              bg-color="white"
+              dense
+              outlined
+              label="ด้วยทุน"
+              hide-bottom-space
+              :rules="[(val) => !!val || `${'กรุณากรอกด้วยทุน'}`]"
+            />
+
+            <q-input
+              v-model="formDataTrain.leaveNumber"
+              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              ref="leaveNumberRef"
+              dense
+              outlined
+              unmasked-value
+              hide-bottom-space
+              bg-color="white"
+              mask="(###)-###-####"
+              label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+              :rules="[
+                (val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
+              ]"
+            />
+
+            <q-input
+              v-model="formDataTrain.leaveAddress"
+              ref="leaveAddressRef"
+              class="col-12 cursor-pointer inputgreen"
+              bg-color="white"
+              dense
+              outlined
+              label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
+              hide-bottom-space
+              :rules="[
+                (val) => !!val || `${'กรุณากรอก ที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
+              ]"
+            />
+          </div>
+        </div>
+
+        <q-input
+          v-model="formDataTrain.leaveDetail"
+          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+          bg-color="white"
+          dense
+          outlined
+          type="textarea"
+          label="รายละเอียด"
+        />
+
+        <div class="col-12 col-sm-6">
+          <q-file
+            v-model="formDataTrain.leaveDocument"
+            bg-color="white"
+            dense
+            outlined
+            multiple
+            label="เอกสารประกอบ"
+          >
+            <template v-slot:prepend>
+              <q-icon name="attach_file" color="primary" />
+            </template>
+          </q-file>
+        </div>
+
+        <div class="col-12 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 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>
+    <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="บันทึก"
+        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+      >
+      <q-btn
+        v-if="data"
+        id="onSubmit"
+        type="button"
+        unelevated
+        dense
+        class="q-px-md items-center q-ml-sm"
+        color="primary"
+        label="ยื่นใบลา"
+        @click="onConfirm"
+        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+      >
+    </div>
+  </form>
+</template>

src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue

@@ -0,0 +1,461 @@
+<script setup lang="ts">
+import { ref, reactive, watch, onMounted } from "vue";
+import type { FormRef } from "@/modules/05_leave/interface/request/WorkInternationalForm";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import { useLeaveStore } from "@/modules/05_leave/store";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRouter } from "vue-router";
+import genReport from "@/plugins/genreport";
+
+/** Use */
+const dataStore = useLeaveStore();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { date2Thai, dialogConfirm, fails, dateToISO, success, messageError } =
+  mixin;
+const edit = ref<boolean>(true);
+const router = useRouter();
+const isSave = ref<boolean>(false);
+
+/** รับ props มาจากหน้าหลัก */
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
+  },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
+  onConfirm: {
+    type: Function,
+    default: () => "",
+  },
+});
+
+/** ข้อมูล v-model ของฟอร์ม */
+const formDataWorkInternational = reactive<any>({
+  type: dataStore.typeId,
+  leaveWrote: "",
+  leaveStartDate: null,
+  leaveEndDate: null,
+  leaveDetail: "",
+  leaveDocument: null,
+  leaveDraftDocument: null,
+});
+
+/** ตัวแปร ref สำหรับแสดง validate */
+const leaveWroteRef = ref<object | null>(null);
+const leaveStartDateRef = ref<object | null>(null);
+const leaveEndDateRef = ref<object | null>(null);
+const leaveDetailRef = ref<object | null>(null);
+const leaveDocumentRef = ref<object | null>(null);
+
+/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
+const FormRef: FormRef = {
+  leaveWrote: leaveWroteRef,
+  leaveStartDate: leaveStartDateRef,
+  leaveEndDate: leaveEndDateRef,
+  leaveDetail: leaveDetailRef,
+  leaveDocument: leaveDocumentRef,
+};
+
+/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
+const nameFile = ref<string>("");
+const nameFileDraft = ref<string>("");
+const fileDocDataUpload = ref<File[]>([]);
+const fileUploadDoc = async (files: any) => {
+  files.forEach((file: any) => {
+    fileDocDataUpload.value.push(file);
+  });
+};
+
+/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
+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);
+      }
+    }
+  }
+  // ถ้า Validate ผ่านให้บันทึกข้อมูล
+  if (hasError.every((result) => result === true)) {
+    const formData = new FormData();
+    // //
+    // if (formDataWorkInternational.leaveDocument.length > 0) {
+    // 	const blob = formDataWorkInternational.leaveDocument.slice(0, formDataWorkInternational.leaveDocument[0].size)
+    // 	const newFile = new File(blob, nameFile.value, {
+    // 		type: formDataWorkInternational.leaveDocument[0].type,
+    // 	})
+    // 	formData.append("leaveDocument", newFile)
+    // }
+
+    if (formDataWorkInternational.leaveDocument) {
+      formData.append("leaveDocument", formDataWorkInternational.leaveDocument);
+    }
+
+    if (formDataWorkInternational.leaveDraftDocument) {
+      formData.append(
+        "leaveDraftDocument",
+        formDataWorkInternational.leaveDraftDocument
+      );
+    }
+    formData.append("type", formDataWorkInternational.type); //
+    formData.append(
+      "leaveStartDate",
+      dateToISO(formDataWorkInternational.leaveStartDate)
+    ); //
+    formData.append(
+      "leaveEndDate",
+      dateToISO(formDataWorkInternational.leaveEndDate)
+    ); //
+    formData.append("leaveWrote", formDataWorkInternational.leaveWrote); //
+    formData.append("leaveDetail", formDataWorkInternational.leaveDetail); //
+    props.onSubmit(FormData);
+  }
+}
+
+//download function
+async function onClickDownloadFile(id: string, fileName: string) {
+  // showLoader();
+  await http
+    .get(config.API.leaveReport(id))
+    .then(async (res) => {
+      const data = res.data.result;
+      await genReport(data, fileName);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * check ว่าลาได้ไหม จาก api
+ * @param formData
+ */
+const isLeave = ref<boolean>(true);
+async function FetchCheck() {
+  await http
+    .post(config.API.leaveCheck(), {
+      type: dataStore.typeId ?? null,
+      StartLeaveDate: formDataWorkInternational.leaveStartDate ?? null,
+      EndLeaveDate: formDataWorkInternational.leaveEndDate ?? null,
+    })
+    .then((res: any) => {
+      const data = res.data.result;
+      isLeave.value = data.isLeave;
+      if (data.isLeave === true) {
+        formDataWorkInternational.leaveTotal =
+          data.totalDate - data.sumDateWork - data.sumDateHoliday;
+        // formDataWorkInternational.leaveLast = data.totalDate
+      } else {
+        fails($q, "ไม่สามารถลาได้");
+      }
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
+}
+
+/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
+onMounted(() => {
+  if (props.data) {
+    formDataWorkInternational.leaveWrote = props.data.leaveWrote;
+    formDataWorkInternational.leaveStartDate = new Date(
+      props.data.leaveStartDate
+    );
+    formDataWorkInternational.leaveEndDate = new Date(props.data.leaveEndDate);
+    formDataWorkInternational.leaveDetail = props.data.leaveDetail;
+    // formDataWorkInternational.leaveDocument = props.data.leaveDocument;
+    // formDataWorkInternational.leaveDraftDocument =
+    //   props.data.leaveDraftDocument;
+  }
+});
+</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 cursor-pointer inputgreen"
+          ref="leaveWroteRef"
+          hide-bottom-space
+          bg-color="white"
+          for="leaveWroteRef"
+          dense
+          outlined
+          v-model="formDataWorkInternational.leaveWrote"
+          label="เขียนที่"
+          :readonly="!edit"
+          :rules="[(val) => !!val || `${'เขียนที่'}`]"
+        />
+
+        <datepicker
+          class="col-12 col-md-6 col-sm-6 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataWorkInternational.leaveStartDate"
+          :locale="'th'"
+          hide-bottom-space
+          autoApply
+          borderless
+          :enableTimePicker="false"
+          week-start="0"
+          :readonly="!edit"
+          @update:model-value="formDataWorkInternational.leaveEndDate = null"
+        >
+          <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
+              bg-color="white"
+              :readonly="!edit"
+              class="full-width datepicker"
+              :model-value="
+                formDataWorkInternational.leaveStartDate != null
+                  ? date2Thai(formDataWorkInternational.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-6 col-sm-6 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataWorkInternational.leaveEndDate"
+          :locale="'th'"
+          autoApply
+          hide-bottom-space
+          borderless
+          :enableTimePicker="false"
+          @update:model-value="FetchCheck()"
+          week-start="0"
+          :readonly="!formDataWorkInternational.leaveStartDate"
+          :min-date="formDataWorkInternational.leaveStartDate"
+        >
+          <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="!formDataWorkInternational.leaveStartDate"
+              class="full-width datepicker"
+              :model-value="
+                formDataWorkInternational.leaveEndDate != null
+                  ? date2Thai(formDataWorkInternational.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-md-3 col-sm-12"
+							dense
+							outlined
+							ref="leaveTotalRef"
+							for="leaveTotalRef"
+							type="number"
+							v-model="formDataWorkInternational.leaveTotal"
+							label="จำนวนวันที่ลา"
+							readonly
+							:rules="[val => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
+						/> -->
+
+        <q-input
+          hide-bottom-space
+          type="textarea"
+          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+          dense
+          bg-color="white"
+          outlined
+          ref="leaveDetailRef"
+          for="leaveDetailRef"
+          v-model="formDataWorkInternational.leaveDetail"
+          label="รายละเอียด"
+          :readonly="!edit"
+        />
+
+        <q-file
+          ref="fileRef"
+          bg-color="white"
+          v-model="formDataWorkInternational.leaveDocument"
+          @added="fileUploadDoc"
+          dense
+          label="เอกสารประกอบ"
+          outlined
+          use-chips
+          class="q-pl-sm col-12"
+        >
+          <template v-slot:prepend>
+            <q-icon name="attach_file" color="primary" />
+          </template>
+        </q-file>
+
+        <div class="col-12 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 formDataWorkInternational.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>
+
+    <div
+      v-if="
+        formDataWorkInternational.leaveWrote &&
+        formDataWorkInternational.leaveEndDate &&
+        formDataWorkInternational.leaveStartDate
+      "
+      class="q-mt-md"
+    >
+      <div style="display: flex; align-items: center">
+        <q-icon name="mdi-numeric-4-circle" size="20px" color="primary" />
+        <div class="q-pl-sm text-weight-bold text-dark">
+          ดาวน์โหลด/อัปโหลดแบบฟอร์ม
+        </div>
+      </div>
+      <q-card class="bg-grey-1 q-pa-sm" bordered>
+        <div class="row">
+          <div class="col-12 col-sm-4 col-md-4 q-my-sm offset-sm-1 offset-md-2">
+            <div class="column q-mx-xs">
+              <div class="q-pl-sm text-weight-bold text-dark text-center">
+                ดาวน์โหลด
+              </div>
+              <q-btn
+                color="primary"
+                icon="download"
+                label="ดาวน์โหลดแบบฟอร์ม"
+                @click="
+                  onClickDownloadFile(data.id, `แบบฟอร์ม${data.leaveTypeName}`)
+                "
+              />
+            </div>
+          </div>
+          <div class="col-10 col-sm-5 col-md-4 q-my-sm">
+            <div class="column q-mx-xs">
+              <div class="q-pl-sm text-weight-bold text-dark text-center">
+                อัปโหลด
+              </div>
+              <q-file
+                v-model="formDataWorkInternational.leaveDraftDocument"
+                dense
+                label="แบบฟอร์ม"
+                outlined
+                bg-color="white"
+                accept=".pdf"
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" color="primary" />
+                </template>
+              </q-file>
+            </div>
+          </div>
+          <!-- <div class="col-md-1 self-end q-mb-sm">
+						<q-btn v-if="formDataWorkInternational.leaveDraftDocument != null" use-chips flat round color="primary" icon="mdi-arrow-up-bold" @click="fileUploadDoc"
+							><q-tooltip>อัปโหลด</q-tooltip></q-btn
+						>
+					</div> -->
+        </div>
+      </q-card>
+    </div>
+
+    <div v-if="!isSave">
+      <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="บันทึก"
+          ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+        >
+        <q-btn
+          v-if="data"
+          id="onSubmit"
+          type="button"
+          unelevated
+          dense
+          class="q-px-md items-center q-ml-sm"
+          color="primary"
+          label="ยื่นใบลา"
+          @click="onConfirm"
+          ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+        >
+      </div>
+    </div>
+  </form>
+</template>

src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue

@@ -0,0 +1,681 @@
+<script setup lang="ts">
+import { ref, reactive, computed, onMounted } from "vue";
+import type {
+  FormData,
+  FormRef,
+} from "@/modules/05_leave/interface/request/FollowSpouseForm";
+import { useCounterMixin } from "@/stores/mixin";
+import { useLeaveStore } from "@/modules/05_leave/store";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRouter } from "vue-router";
+
+/** Use */
+const dataStore = useLeaveStore();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const router = useRouter();
+const {
+  dialogConfirm,
+  date2Thai,
+  arabicNumberToText,
+  calculateDurationYmd,
+  dateToISO,
+  fails,
+  success,
+  messageError,
+} = mixin;
+const edit = ref<boolean>(true);
+
+/** รับ props มาจากหน้าหลัก */
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
+  },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
+  onConfirm: {
+    type: Function,
+    default: () => "",
+  },
+});
+
+/** ข้อมูล v-model ของฟอร์ม */
+const formDataFollowSpouse = reactive<any>({
+  type: dataStore.typeId,
+  leaveWrote: "",
+  leaveStartDate: null,
+  leaveEndDate: null,
+  leaveTotal: "", //จำนวนวันลา
+  leaveSalaryText: 25000,
+  leaveSalary: 25000, //เงินเดือนปัจจุบัน
+  coupleDayName: "", //ชื่อคู่สมรส
+  coupleDayPosition: "", //ตำแหน่งคู่สมรส
+  coupleDayLevel: "", //ระดับคู่สมรส
+  coupleDayLevelCountry: "", //ไปปฏิบัติราชการ ณ ประเทศ
+  followHistoryCountry: "ลาว", //ประวัติการลาติดตามคู่สมรส
+  followHistoryTime: "0 วัน",
+  followHistoryStart: new Date(),
+  followHistoryEnd: new Date(),
+  leaveDetail:
+    "ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา ...ปี, ...เดือน, ...วัน", //รายละเอียดการลา
+  leaveDocument: [], //เอกสารปะกอบ
+});
+
+/** แปลงตัวแปร Salary */
+const formattleaveSalaryText = arabicNumberToText(
+  formDataFollowSpouse.leaveSalaryText
+);
+const formattSalary = computed(() => {
+  return formDataFollowSpouse.leaveSalary !== null
+    ? formDataFollowSpouse.leaveSalary.toLocaleString("th-TH")
+    : "";
+});
+
+/** ตัวแปร ref สำหรับแสดง validate */
+const leaveWroteRef = ref<object | null>(null);
+const leaveStartDateRef = ref<object | null>(null);
+const leaveEndDateRef = ref<object | null>(null);
+const leaveSalaryRef = ref<object | null>(null);
+const leaveTotalRef = ref<object | null>(null);
+const coupleDayNameRef = ref<object | null>(null);
+const leaveAddressRef = ref<object | null>(null);
+const leaveDetailRef = ref<object | null>(null);
+const coupleDayPositionRef = ref<object | null>(null);
+const coupleDayLevelRef = ref<object | null>(null);
+const coupleDayLevelCountryRef = ref<object | null>(null);
+const followHistoryCountryRef = ref<object | null>(null);
+const followHistoryTimeRef = ref<object | null>(null);
+const followHistoryStartRef = ref<object | null>(null);
+const followHistoryEndRef = ref<object | null>(null);
+const leaveDocumentRef = ref<object | null>(null);
+
+/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
+const FormRef: FormRef = {
+  leaveWrote: leaveWroteRef, //เขียนที่***
+  leaveStartDate: leaveStartDateRef, //*วัน เดือน ปีเริ่มต้นลา
+  leaveEndDate: leaveEndDateRef, //*วัน เดือน ปีสิ้นสุดลา
+  leaveTotal: leaveTotalRef, //จำนวนวันลา
+  leaveSalary: leaveSalaryRef, //เงินเดือนปัจจุบัน
+  coupleDayName: coupleDayNameRef, //หมายเลขที่ติดต่อขณะลา
+  coupleDayPosition: coupleDayPositionRef, //ตำแหน่งคู่สมรส
+  coupleDayLevel: coupleDayLevelRef, //ระดับคู่สมรส
+  coupleDayLevelCountry: coupleDayLevelCountryRef, //ไปปฏิบัติราชการ ณ ประเทศ
+  followHistoryCountry: followHistoryCountryRef, //ประวัติการลาติดตามคู่สมรส
+  followHistoryEnd: followHistoryEndRef, //ประวัติการลาติดตามคู่สมรส
+  followHistoryTime: followHistoryTimeRef, //ประวัติการลาติดตามคู่สมรส
+  followHistoryStart: followHistoryStartRef, //ประวัติการลาติดตามคู่สมรส
+  leaveDetail: leaveDetailRef, //รายละเอียดการลา
+  leaveAddress: leaveAddressRef, //สถานที่ติดต่อขณะลา
+  leaveDocument: leaveDocumentRef,
+};
+
+/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
+const nameFile = ref<string>("");
+const fileDocDataUpload = ref<File[]>([]);
+const fileUploadDoc = async (files: any) => {
+  files.forEach((file: any) => {
+    fileDocDataUpload.value.push(file);
+  });
+};
+
+/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
+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)) {
+    const formData = new FormData();
+    // if (formDataFollowSpouse.leaveDocument.length > 0) {
+    // 	const blob = formDataFollowSpouse.leaveDocument.slice(0, formDataFollowSpouse.leaveDocument[0].size)
+    // 	const newFile = new File(blob, nameFile.value, {
+    // 		type: formDataFollowSpouse.leaveDocument[0].type,
+    // 	})
+    // 	formData.append("leaveDocument", newFile)
+    // } //
+    formData.append("leaveDocument", formDataFollowSpouse.leaveDocument);
+    formData.append("type", formDataFollowSpouse.type); //
+    formData.append(
+      "leaveStartDate",
+      dateToISO(formDataFollowSpouse.leaveStartDate)
+    ); //
+    formData.append(
+      "leaveEndDate",
+      dateToISO(formDataFollowSpouse.leaveEndDate)
+    ); //
+    formData.append(
+      "followHistoryStart",
+      dateToISO(formDataFollowSpouse.followHistoryStart)
+    ); //
+    formData.append(
+      "followHistoryEnd",
+      dateToISO(formDataFollowSpouse.followHistoryEnd)
+    ); //
+    formData.append("leaveWrote", formDataFollowSpouse.leaveWrote); //
+    formData.append("leaveDetail", formDataFollowSpouse.leaveDetail); //
+    formData.append("leaveSalaryText", formDataFollowSpouse.leaveSalaryText); //
+    formData.append("leaveSalary", formDataFollowSpouse.leaveSalary); //
+    formData.append(
+      "followHistoryTime",
+      formDataFollowSpouse.followHistoryTime
+    ); //
+    formData.append(
+      "followHistoryCountry",
+      formDataFollowSpouse.followHistoryCountry
+    ); //
+    formData.append(
+      "coupleDayLevelCountry",
+      formDataFollowSpouse.coupleDayLevelCountry
+    ); //
+    formData.append("coupleDayLevel", formDataFollowSpouse.coupleDayLevel); //
+    formData.append(
+      "coupleDayPosition",
+      formDataFollowSpouse.coupleDayPosition
+    ); //
+    formData.append("coupleDayName", formDataFollowSpouse.coupleDayName); //
+    formData.append("leaveTotal", formDataFollowSpouse.leaveTotal); //
+    props.onSubmit(formData);
+  }
+}
+
+/**
+ * check ว่าลาได้ไหม จาก api
+ * @param formData
+ */
+const isLeave = ref<boolean>(true);
+async function FetchCheck() {
+  await http
+    .post(config.API.leaveCheck(), {
+      type: dataStore.typeId ?? null,
+      StartLeaveDate: formDataFollowSpouse.leaveStartDate ?? null,
+      EndLeaveDate: formDataFollowSpouse.leaveEndDate ?? null,
+    })
+    .then((res: any) => {
+      const data = res.data.result;
+      isLeave.value = data.isLeave;
+      if (data.isLeave === true) {
+        formDataFollowSpouse.leaveTotal =
+          // data.totalDate - data.sumDateWork - data.sumDateHoliday;
+          formDataFollowSpouse.leaveTotal = data.totalDate;
+      } else {
+        fails($q, "ไม่สามารถลาได้");
+      }
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
+}
+
+/**
+ * function อัพเดทค่า LeaveTotal
+ */
+function updateLeaveTotal() {
+  const newLeaveTotal = calculateDurationYmd(
+    formDataFollowSpouse.leaveStartDate,
+    formDataFollowSpouse.leaveEndDate
+  );
+  formDataFollowSpouse.leaveTotal = newLeaveTotal;
+}
+
+/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
+onMounted(() => {
+  if (props.data) {
+    formDataFollowSpouse.leaveWrote = props.data.leaveWrote;
+    formDataFollowSpouse.leaveStartDate = new Date(props.data.leaveStartDate);
+    formDataFollowSpouse.leaveEndDate = new Date(props.data.leaveEndDate);
+    formDataFollowSpouse.leaveDetail = props.data.leaveDetail;
+    formDataFollowSpouse.leaveDocument = props.data.leaveDocument;
+    formDataFollowSpouse.leaveTotal = props.data.leaveTotal;
+    formDataFollowSpouse.leaveSalaryText = props.data.leaveSalaryText;
+    formDataFollowSpouse.leaveSalary = props.data.leaveSalary;
+    formDataFollowSpouse.coupleDayName = props.data.coupleDayName;
+    formDataFollowSpouse.coupleDayPosition = props.data.coupleDayPosition;
+    formDataFollowSpouse.coupleDayLevel = props.data.coupleDayLevel;
+    formDataFollowSpouse.coupleDayLevelCountry =
+      props.data.coupleDayLevelCountry;
+    formDataFollowSpouse.followHistoryCountry = props.data.followHistoryCountry;
+    formDataFollowSpouse.followHistoryTime = props.data.followHistoryTime;
+    formDataFollowSpouse.followHistoryStart = props.data.followHistoryStart;
+    formDataFollowSpouse.followHistoryEnd = props.data.followHistoryEnd;
+  }
+});
+</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 cursor-pointer inputgreen"
+          ref="leaveWroteRef"
+          for="leaveWroteRef"
+          dense
+          hide-bottom-space
+          bg-color="white"
+          outlined
+          v-model="formDataFollowSpouse.leaveWrote"
+          label="เขียนที่"
+          :readonly="!edit"
+          :rules="[(val) => !!val || `${'เขียนที่'}`]"
+        />
+        <datepicker
+          class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataFollowSpouse.leaveStartDate"
+          :locale="'th'"
+          autoApply
+          hide-bottom-space
+          borderless
+          :enableTimePicker="false"
+          week-start="0"
+          :readonly="!edit"
+          @update:model-value="formDataFollowSpouse.leaveEndDate = null"
+        >
+          <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
+              bg-color="white"
+              :readonly="!edit"
+              class="full-width datepicker"
+              :model-value="
+                formDataFollowSpouse.leaveStartDate != null
+                  ? date2Thai(formDataFollowSpouse.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-4 col-sm-12 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataFollowSpouse.leaveEndDate"
+          :locale="'th'"
+          autoApply
+          borderless
+          hide-bottom-space
+          :enableTimePicker="false"
+          week-start="0"
+          @update:model-value="updateLeaveTotal, FetchCheck()"
+          :readonly="!formDataFollowSpouse.leaveStartDate"
+          :min-date="formDataFollowSpouse.leaveStartDate"
+        >
+          <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="!formDataFollowSpouse.leaveStartDate"
+              class="full-width datepicker"
+              :model-value="
+                formDataFollowSpouse.leaveEndDate != null
+                  ? date2Thai(formDataFollowSpouse.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-2 col-sm-6"
+          bg-color="white"
+          dense
+          outlined
+          ref="leaveTotalRef"
+          for="leaveTotalRef"
+          v-model="formDataFollowSpouse.leaveTotal"
+          label="เป็นเวลา"
+          readonly
+          hide-bottom-space
+        />
+        <div class="col-12 col-md-6 col-sm-12">
+          <q-input
+            hide-bottom-space
+            bg-color="white"
+            class="col-12 col-sm-12"
+            ref="leaveSalaryRef"
+            for="leaveSalaryRef"
+            dense
+            outlined
+            v-model="formattSalary"
+            label="เงินเดือนปัจจุบัน"
+            readonly
+          />
+        </div>
+        <div class="col-12 col-md-6 col-sm-12">
+          <q-input
+            hide-bottom-space
+            bg-color="white"
+            class="col-12 col-sm-12"
+            ref="leaveSalaryRef"
+            for="leaveSalaryRef"
+            dense
+            outlined
+            v-model="formattleaveSalaryText"
+            label="เงินเดือนปัจจุบัน"
+            readonly
+          />
+        </div>
+
+        <div class="col-md-3 col-sm-12">
+          <q-input
+            class="col-12 col-sm-12 cursor-pointer inputgreen"
+            hide-bottom-space
+            ref="coupleDayNameRef"
+            for="coupleDayNameRef"
+            dense
+            bg-color="white"
+            outlined
+            v-model="formDataFollowSpouse.coupleDayName"
+            label="ชื่อคู่สมรส"
+            :readonly="!edit"
+            :rules="[(val) => !!val || `${'ชื่อคู่สมรส'}`]"
+          />
+        </div>
+        <div class="col-md-3 col-sm-12">
+          <q-input
+            class="col-12 col-sm-12 cursor-pointer inputgreen"
+            hide-bottom-space
+            ref="coupleDayPositionRef"
+            for="coupleDayPositionRef"
+            dense
+            outlined
+            bg-color="white"
+            v-model="formDataFollowSpouse.coupleDayPosition"
+            label="ตำแหน่งคู่สมรส"
+            :readonly="!edit"
+            :rules="[(val) => !!val || `${'ตำแหน่งคู่สมรส'}`]"
+          />
+        </div>
+        <div class="col-md-3 col-sm-12">
+          <q-input
+            class="col-12 col-sm-12 cursor-pointer inputgreen"
+            ref="coupleDayLevelRef"
+            for="coupleDayLevelRef"
+            dense
+            hide-bottom-space
+            outlined
+            bg-color="white"
+            v-model="formDataFollowSpouse.coupleDayLevel"
+            label="ระดับคู่สมรส"
+            :readonly="!edit"
+            :rules="[(val) => !!val || `${'ระดับคู่สมรส'}`]"
+          />
+        </div>
+        <div class="col-md-3 col-sm-12">
+          <q-input
+            class="col-12 col-sm-12 cursor-pointer inputgreen"
+            ref="coupleDayLevelCountryRef"
+            for="coupleDayLevelCountryRef"
+            hide-bottom-space
+            dense
+            outlined
+            bg-color="white"
+            v-model="formDataFollowSpouse.coupleDayLevelCountry"
+            label="ไปปฏิบัติราชการ ณ ประเทศ"
+            :readonly="!edit"
+            :rules="[(val) => !!val || `${'ปฏิบัติราชการ ณ ประเทศ'}`]"
+          />
+        </div>
+        <div class="text-weight-bold text-dark col-12">
+          ประวัติการลาติดตามคู่สมรสครั้งสุดท้าย
+        </div>
+        <datepicker
+          class="col-12 col-md-3 col-sm-12"
+          menu-class-name="modalfix"
+          v-model="formDataFollowSpouse.followHistoryStart"
+          :locale="'th'"
+          autoApply
+          hide-bottom-space
+          borderless
+          :enableTimePicker="false"
+          week-start="0"
+          readonly
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              dense
+              ref="followHistoryStartRef"
+              for="followHistoryStartRef"
+              hide-bottom-space
+              readonly
+              bg-color="white"
+              class="full-width"
+              :model-value="
+                formDataFollowSpouse.followHistoryStart != null
+                  ? date2Thai(formDataFollowSpouse.followHistoryStart)
+                  : null
+              "
+              :label="`${'ตั้งแต่วันที่'}`"
+              :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--black)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+        <datepicker
+          class="col-12 col-md-3 col-sm-12"
+          menu-class-name="modalfix"
+          v-model="formDataFollowSpouse.followHistoryEnd"
+          :locale="'th'"
+          autoApply
+          hide-bottom-space
+          borderless
+          :enableTimePicker="false"
+          week-start="0"
+          readonly
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              dense
+              ref="followHistoryEndRef"
+              for="followHistoryEndRef"
+              hide-bottom-space
+              bg-color="white"
+              readonly
+              class="full-width"
+              :model-value="
+                formDataFollowSpouse.followHistoryEnd != null
+                  ? date2Thai(formDataFollowSpouse.followHistoryEnd)
+                  : null
+              "
+              :label="`${'ถึงวันที่'}`"
+              :rules="[(val) => !!val || `${'กรุณาเลือกถึงวันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--black)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+        <q-input
+          class="col-12 col-md-3 col-sm-12"
+          dense
+          outlined
+          hide-bottom-space
+          bg-color="white"
+          ref="followHistoryCountryRef"
+          for="followHistoryCountryRef"
+          v-model="formDataFollowSpouse.followHistoryCountry"
+          label="ประเทศ"
+          :rules="[(val) => !!val || `${'กรุณาเลือกประเทศ'}`]"
+          readonly
+        />
+        <q-input
+          class="col-12 col-md-3 col-sm-12"
+          dense
+          outlined
+          :readonly="formDataFollowSpouse.followHistoryTime !== ''"
+          hide-bottom-space
+          bg-color="white"
+          ref="followHistoryTimeRef"
+          for="followHistoryTimeRef"
+          v-model="formDataFollowSpouse.followHistoryTime"
+          label="เป็นเวลา"
+        />
+
+        <q-input
+          hide-bottom-space
+          type="textarea"
+          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+          dense
+          bg-color="white"
+          outlined
+          ref="leaveDetailRef"
+          for="leaveDetailRef"
+          v-model="formDataFollowSpouse.leaveDetail"
+          label="รายละเอียด"
+          :readonly="!edit"
+        />
+
+        <q-file
+          ref="fileRef"
+          bg-color="white"
+          v-model="formDataFollowSpouse.leaveDocument"
+          @added="fileUploadDoc"
+          dense
+          label="เอกสารประกอบ"
+          outlined
+          use-chips
+          multiple
+          class="q-pl-sm col-12"
+        >
+          <template v-slot:prepend>
+            <q-icon name="attach_file" color="primary" />
+          </template>
+        </q-file>
+
+        <div class="col-12 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 formDataFollowSpouse.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" />
+    <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="บันทึก"
+        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+      >
+      <q-btn
+        v-if="data"
+        id="onSubmit"
+        type="button"
+        unelevated
+        dense
+        class="q-px-md items-center q-ml-sm"
+        color="primary"
+        label="ยื่นใบลา"
+        @click="onConfirm"
+        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+      >
+    </div>
+  </form>
+</template>

src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue

@@ -0,0 +1,437 @@
+<script setup lang="ts">
+import { reactive, ref, onMounted } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import type { RehabilitationForm } from "@/modules/05_leave/interface/request/AddAbsence";
+import { useLeaveStore } from "@/modules/05_leave/store";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRouter } from "vue-router";
+import genReport from "@/plugins/genreport";
+
+/** Use */
+const dataStore = useLeaveStore();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { date2Thai, dialogConfirm, fails, dateToISO, success, messageError } =
+  mixin;
+const router = useRouter();
+const edit = ref<boolean>(true);
+const isSave = ref<boolean>(false);
+const files = ref<any>(null);
+
+/** ตัวแปร ref สำหรับแสดง validate */
+const leaveStartDateRef = ref<object | null>(null);
+const leaveEndDateRef = ref<object | null>(null);
+const leaveWroteRef = ref<object | null>(null);
+
+/** รับ props มาจากหน้าหลัก */
+const props = defineProps({
+  data: {
+    type: Array,
+    default: null,
+  },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
+  onConfirm: {
+    type: Function,
+    default: () => "",
+  },
+});
+
+/** ข้อมูล v-model ของฟอร์ม */
+const formDataRehabilitation = reactive<any>({
+  type: dataStore.typeId,
+  leaveWrote: "",
+  leaveStartDate: null,
+  leaveEndDate: null,
+  leaveDocument: "",
+  leaveDetail: "",
+  leaveDraftDocument: null,
+});
+
+/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
+const formRef: RehabilitationForm = {
+  leaveStartDate: leaveStartDateRef,
+  leaveEndDate: leaveEndDateRef,
+  leaveWrote: leaveWroteRef,
+};
+
+/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
+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)) {
+    const formData = new FormData();
+    // if (formDataRehabilitation.leaveDraftDocument.length > 0) {
+    // 	const blobDrafe = formDataRehabilitation.leaveDraftDocument.slice(0, formDataRehabilitation.leaveDraftDocument[0].size)
+    // 	const newFileDraft = new File(blobDrafe, nameFileDraft.value, {
+    // 		type: formDataRehabilitation.leaveDraftDocument[0].type,
+    // 	})
+    // 	formData.append("leaveDraftDocument", newFileDraft) //
+    // }
+
+    // if (formDataRehabilitation.leaveDocument.length > 0) {
+    // 	const blob = formDataRehabilitation.leaveDocument.slice(0, formDataRehabilitation.leaveDocument[0].size)
+    // 	const newFile = new File(blob, nameFile.value, {
+    // 		type: formDataRehabilitation.leaveDocument[0].type,
+    // 	})
+    // 	formData.append("leaveDocument", newFile)
+    // } //
+    formData.append(
+      "leaveDraftDocument",
+      formDataRehabilitation.leaveDraftDocument
+    );
+    formData.append("leaveDocument", formDataRehabilitation.leaveDocument);
+    formData.append("type", formDataRehabilitation.type); //
+    formData.append(
+      "leaveStartDate",
+      dateToISO(formDataRehabilitation.leaveStartDate)
+    ); //
+    formData.append(
+      "leaveEndDate",
+      dateToISO(formDataRehabilitation.leaveEndDate)
+    ); //
+    formData.append("leaveWrote", formDataRehabilitation.leaveWrote); //
+    formData.append("leaveDetail", formDataRehabilitation.leaveDetail); //
+    props.onSubmit(formData);
+  }
+}
+
+/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
+const nameFile = ref<string>("");
+const nameFileDraft = ref<string>("");
+const fileDocDataUpload = ref<File[]>([]);
+const fileUploadDoc = async (files: any) => {
+  files.forEach((file: any) => {
+    fileDocDataUpload.value.push(file);
+  });
+};
+
+/**
+ * check ว่าลาได้ไหม จาก api
+ * @param formData
+ */
+const isLeave = ref<boolean>(true);
+async function FetchCheck() {
+  await http
+    .post(config.API.leaveCheck(), {
+      type: dataStore.typeId ?? null,
+      StartLeaveDate: formDataRehabilitation.leaveStartDate ?? null,
+      EndLeaveDate: formDataRehabilitation.leaveEndDate ?? null,
+    })
+    .then((res: any) => {
+      const data = res.data.result;
+      isLeave.value = data.isLeave;
+      if (data.isLeave === true) {
+        // formDataRehabilitation.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
+        // formDataRehabilitation.leaveTotal = data.totalDate
+      } else {
+        fails($q, "ไม่สามารถลาได้");
+      }
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
+}
+
+//download function
+async function onClickDownloadFile(id: string, fileName: string) {
+  showLoader();
+  await http
+    .get(config.API.leaveReport(id))
+    .then(async (res) => {
+      console.log(res);
+      const data = res.data.result;
+      await genReport(data, fileName);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
+onMounted(() => {
+  if (props.data) {
+    formDataRehabilitation.leaveWrote = props.data.leaveWrote;
+    formDataRehabilitation.leaveStartDate = new Date(props.data.leaveStartDate);
+    formDataRehabilitation.leaveEndDate = new Date(props.data.leaveEndDate);
+    formDataRehabilitation.leaveDetail = props.data.leaveDetail;
+    // formDataRehabilitation.leaveDocument = props.data.leaveDocument;
+    // formDataRehabilitation.leaveDraftDocument =
+    //   props.data.leaveDraftDocument;
+  }
+});
+</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="onValidate">
+    <q-card bordered class="q-pa-md bg-grey-1">
+      <div class="row q-pa-sm q-col-gutter-sm">
+        <q-input
+          v-model="formDataRehabilitation.leaveWrote"
+          class="col-12 col-sm-12 cursor-pointer inputgreen"
+          ref="leaveWroteRef"
+          dense
+          outlined
+          bg-color="white"
+          label="เขียนที่"
+          hide-bottom-space
+          :rules="[(val) => !!val || `${'เขียนที่'}`]"
+        />
+
+        <datepicker
+          v-model="formDataRehabilitation.leaveStartDate"
+          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          autoApply
+          borderless
+          week-start="0"
+          :enableTimePicker="false"
+          :locale="'th'"
+          @update:model-value="formDataRehabilitation.leaveEndDate = null"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              ref="leaveStartDateRef"
+              class="full-width datepicker"
+              bg-color="white"
+              outlined
+              dense
+              lazy-rules
+              hide-bottom-space
+              :model-value="
+                formDataRehabilitation.leaveStartDate != null
+                  ? date2Thai(formDataRehabilitation.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
+          v-model="formDataRehabilitation.leaveEndDate"
+          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          autoApply
+          borderless
+          week-start="0"
+          :locale="'th'"
+          @update:model-value="FetchCheck()"
+          :readonly="!formDataRehabilitation.leaveStartDate"
+          :enableTimePicker="false"
+          :min-date="formDataRehabilitation.leaveStartDate"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              ref="leaveEndDateRef"
+              class="full-width datepicker"
+              outlined
+              dense
+              lazy-rules
+              bg-color="white"
+              hide-bottom-space
+              :readonly="!formDataRehabilitation.leaveStartDate"
+              :model-value="
+                formDataRehabilitation.leaveEndDate != null
+                  ? date2Thai(formDataRehabilitation.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
+          v-model="formDataRehabilitation.leaveDetail"
+          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+          bg-color="white"
+          dense
+          outlined
+          type="textarea"
+          label="รายละเอียด"
+        />
+
+        <div class="col-12 col-sm-6">
+          <q-file
+            v-model="formDataRehabilitation.leaveDocument"
+            @added="fileUploadDoc"
+            use-chips
+            bg-color="white"
+            dense
+            outlined
+            multiple
+            label="เอกสารประกอบ"
+          >
+            <template v-slot:prepend>
+              <q-icon name="attach_file" color="primary" />
+            </template>
+          </q-file>
+        </div>
+
+        <div class="col-12 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 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
+      v-if="
+        formDataRehabilitation.leaveWrote &&
+        formDataRehabilitation.leaveStartDate &&
+        formDataRehabilitation.leaveEndDate
+      "
+      class="q-mt-md"
+    >
+      <div style="display: flex; align-items: center">
+        <q-icon name="mdi-numeric-4-circle" size="20px" color="primary" />
+        <div class="q-pl-sm text-weight-bold text-dark">
+          ดาวน์โหลด/อัปโหลดแบบฟอร์ม
+        </div>
+      </div>
+      <q-card class="bg-grey-1 q-pa-sm" bordered>
+        <div class="row">
+          <div class="col-12 col-sm-4 col-md-4 q-my-sm offset-sm-1 offset-md-2">
+            <div class="column q-mx-xs">
+              <div class="q-pl-sm text-weight-bold text-dark text-center">
+                ดาวน์โหลด
+              </div>
+              <q-btn
+                color="primary"
+                icon="download"
+                label="ดาวน์โหลดแบบฟอร์ม"
+                @click="
+                  onClickDownloadFile(
+                    '08dc05c8-4cfd-4603-81f8-92a401571717',
+                    'แบบฟอร์ม'
+                  )
+                "
+              />
+            </div>
+          </div>
+          <div class="col-10 col-sm-5 col-md-4 q-my-sm">
+            <div class="column q-mx-xs">
+              <div class="q-pl-sm text-weight-bold text-dark text-center">
+                อัปโหลด
+              </div>
+              <q-file
+                v-model="formDataRehabilitation.leaveDraftDocument"
+                use-chips
+                dense
+                label="แบบฟอร์ม"
+                outlined
+                bg-color="white"
+                multiple
+                accept="application/pdf"
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" color="primary" />
+                </template>
+              </q-file>
+            </div>
+          </div>
+          <!-- <div class="col-md-1 self-end q-mb-sm">
+						<q-btn v-if="formDataRehabilitation.leaveDraftDocument != null" flat round color="primary" icon="mdi-arrow-up-bold" @click="fileUploadDoc"
+							><q-tooltip>อัปโหลด</q-tooltip></q-btn
+						>
+					</div> -->
+        </div>
+      </q-card>
+    </div>
+
+    <div v-if="!isSave">
+      <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="บันทึก"
+          ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+        >
+        <q-btn
+          v-if="data"
+          id="onSubmit"
+          type="button"
+          unelevated
+          dense
+          class="q-px-md items-center q-ml-sm"
+          color="primary"
+          label="ยื่นใบลา"
+          @click="onConfirm"
+          ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+        >
+      </div>
+    </div>
+  </form>
+</template>

src/modules/05_leave/components/FormLeave/Form.vue

@@ -0,0 +1,171 @@
+<script setup lang="ts">
+import { reactive, onMounted } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import type { FormData } from "@/modules/05_leave/interface/request/AddAbsence";
+import { useLeaveStore } from "@/modules/05_leave/store";
+
+const mixin = useCounterMixin();
+const dataStore = useLeaveStore();
+const { date2Thai } = mixin;
+
+/** รับ props มาจากหน้าหลัก */
+const props = defineProps({
+  model: {
+    type: String,
+    default: "",
+  },
+});
+
+/** ข้อมูล v-model ของฟอร์ม */
+const formData = reactive<FormData>({
+  dateStart: new Date(),
+  subject: "เรื่อง",
+  who: "เรียนผู้ใด",
+  requestName: "ชื่อผู้ยื่น",
+  position: "ตำแหน่ง",
+  level: "ระดับ",
+  ocRequest: "สังกัด",
+  leaveabsentDaySummon: "2",
+  leaveUse: "1",
+  leaveRemaining: "1",
+});
+
+onMounted(() => {
+  dataStore.typeLeave = "";
+});
+</script>
+
+<template>
+  <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-12 col-sm-4"
+        menu-class-name="modalfix"
+        v-model="dataStore.dateSendLeave"
+        :locale="'th'"
+        autoApply
+        borderless
+        :enableTimePicker="false"
+        week-start="0"
+        readonly
+      >
+        <template #year="{ year }">
+          {{ year + 543 }}
+        </template>
+        <template #year-overlay-value="{ value }">
+          {{ parseInt(value + 543) }}
+        </template>
+        <template #trigger>
+          <q-input
+            outlined
+            dense
+            bg-color="white"
+            hide-bottom-space
+            readonly
+            class="full-width"
+            :model-value="
+              dataStore.dateSendLeave != null
+                ? date2Thai(dataStore.dateSendLeave)
+                : null
+            "
+            :label="`${'วันที่ยื่นใบลา'}`"
+            :rules="[(val) => !!val || `${'กรุณาเลือกวันที่ยื่นใบลา'}`]"
+          >
+            <template v-slot:prepend>
+              <q-icon
+                name="event"
+                class="cursor-pointer inputblack"
+                style="color: var(--black)"
+              >
+              </q-icon>
+            </template>
+          </q-input>
+        </template>
+      </datepicker>
+      <q-input
+        class="col-12 col-sm-4"
+        dense
+        bg-color="white"
+        outlined
+        readonly
+        v-model="dataStore.typeLeave"
+        label="เรื่อง"
+      />
+      <q-input
+        class="col-12 col-sm-4"
+        dense
+        outlined
+        readonly
+        bg-color="white"
+        v-model="dataStore.dear"
+        label="เรียน"
+      />
+      <q-input
+        class="col-12 col-sm-3"
+        dense
+        outlined
+        readonly
+        bg-color="white"
+        v-model="dataStore.fullName"
+        label="ชื่อผู้ยื่นขอ"
+      />
+      <q-input
+        class="col-12 col-sm-3"
+        dense
+        outlined
+        readonly
+        bg-color="white"
+        v-model="dataStore.positionName"
+        label="ตำแหน่งผู้ยื่นขอ"
+      />
+      <q-input
+        class="col-12 col-sm-3"
+        dense
+        outlined
+        readonly
+        bg-color="white"
+        v-model="dataStore.positionLevelName"
+        label="ระดับผู้ยื่นขอ"
+      />
+      <q-input
+        class="col-12 col-sm-3"
+        dense
+        outlined
+        readonly
+        bg-color="white"
+        v-model="dataStore.organizationName"
+        label="สังกัดผู้ยื่นขอ"
+      />
+      <q-input
+        v-if="props.model === 'LV-005'"
+        class="col-12 col-sm-4"
+        dense
+        outlined
+        readonly
+        bg-color="white"
+        v-model="dataStore.leaveLimit"
+        label="จำนวนสิทธิ์การลาที่ได้รับ"
+      />
+      <q-input
+        class="col-12 col-sm-4"
+        dense
+        outlined
+        readonly
+        bg-color="white"
+        v-model="dataStore.leaveTotal"
+        label="จำนวนสิทธิ์การลาที่ใช้ไป"
+      />
+      <q-input
+        v-if="props.model === 'LV-005'"
+        class="col-12 col-sm-4"
+        dense
+        outlined
+        readonly
+        bg-color="white"
+        v-model="dataStore.leaveRemain"
+        label="จำนวนสิทธิ์การลาคงเหลือ"
+      />
+    </div>
+  </q-card>
+</template>