แก้ UI รายการลา

src/modules/05_leave/components/DialogDetail.vue

@@ -140,6 +140,8 @@ const formData = reactive<FremDetail>({
   approveStep: "",
   dear: "",
   leaveRange: "",
+  leaveRangeEnd: "",
+  leaveSubTypeName: "",
 });
 
 /** Form รายละเอียดข้อมูล*/
@@ -154,6 +156,7 @@ const formDataCancle = reactive<FromCancelDetail>({
   leaveAddress: "",
   leaveNumber: "",
   leaveDetail: "",
+  leaveSubTypeName: "",
   leaveTotal: 0,
   leaveStartDate: new Date(),
   leaveEndDate: new Date(),
@@ -194,8 +197,7 @@ async function fetchDataDetail(id: string) {
       formData.dateSendLeave =
         data.dateSendLeave && date2Thai(data.dateSendLeave);
       formData.status = data.status ?? "-";
-      formData.leaveDateStart =
+      formData.leaveDateStart = data.leaveStartDate && date2Thai(data.leaveStartDate);
-        data.leaveStartDate && date2Thai(data.leaveStartDate);
       formData.leaveDateEnd = data.leaveEndDate && date2Thai(data.leaveEndDate);
       formData.leaveCount = calculateDurationYmd(
         data.leaveStartDate,
@@ -205,9 +207,11 @@ async function fetchDataDetail(id: string) {
       formData.leaveAddress = data.leaveAddress ?? "-";
       formData.leaveNumber = data.leaveNumber ?? "-";
       formData.leaveDetail = data.leaveDetail ?? "-";
+      formData.leaveSubTypeName = data.leaveSubTypeName ?? null;
       formData.leaveDocument = data.leaveDocument;
       formData.leaveDraftDocument = data.leaveDraftDocument;
       formData.leaveRange = data.leaveRange;
+      formData.leaveRangeEnd = data.leaveRangeEnd;
       formData.leaveLastStart =
         data.leaveLastStart && date2Thai(data.leaveLastStart);
       formData.leaveLastEnd =
@@ -226,7 +230,7 @@ async function fetchDataDetail(id: string) {
         data.wifeDayDateBorn && date2Thai(data.wifeDayDateBorn);
       formData.restDayOldTotal = data.restDayOldTotal ?? "-";
       formData.restDayCurrentTotal = data.restDayCurrentTotal ?? "-";
-      formData.ordainDayStatus = data.ordainDayStatus ? "เคย" : "ไม่เคยบวช";
+      formData.ordainDayStatus = data.ordainDayStatus;
       formData.ordainDayLocationName = data.ordainDayLocationName ?? "-";
       formData.ordainDayLocationAddress = data.ordainDayLocationAddress ?? "-";
       formData.ordainDayLocationNumber = data.ordainDayLocationNumber ?? "-";
@@ -236,9 +240,7 @@ async function fetchDataDetail(id: string) {
         data.ordainDayBuddhistLentName ?? "-";
       formData.ordainDayBuddhistLentAddress =
         data.ordainDayBuddhistLentAddress ?? "-";
-      formData.hajjDayStatus = data.hajjDayStatus
+      formData.hajjDayStatus = data.hajjDayStatus;
-        ? "เคย"
-        : "ไม่เคยไปประกอบพิธีฮัจญ์";
       formData.absentDaySummon = data.absentDaySummon ?? "-";
       formData.absentDayLocation = data.absentDayLocation ?? "-";
       formData.absentDayRegistorDate =
@@ -301,15 +303,24 @@ function checkLeaveType(
       checkForm.value = "FormChildbirth";
     } else if (type === "LV-005") {
       checkForm.value = "FormHoliday";
-    } else if (type === "LV-006" && ordainDayLocationName === "") {
+    } else if (type === "LV-006" && formData.leaveSubTypeName === "ลาอุปสมบท") {
-      checkForm.value = "FormHajj";
-    } else if (type === "LV-006") {
       checkForm.value = "FormUpasom";
+    } else if (
+      type === "LV-006" &&
+      formData.leaveSubTypeName === "ลาประกอบพิธีฮัจญ์"
+    ) {
+      checkForm.value = "FormHajj";
     } else if (type === "LV-007") {
       checkForm.value = "FormCheckSelect";
-    } else if (type === "LV-008" && studyDayTrainingSubject === "") {
+    } else if (
+      type === "LV-008" &&
+      formData.leaveSubTypeName === "ลาไปศึกษาต่อ"
+    ) {
       checkForm.value = "FormStudy";
-    } else if (type === "LV-008") {
+    } else if (
+      type === "LV-008" &&
+      formData.leaveSubTypeName === "ลาฝึกอบรม/ปฎิบัติการวิจัย/ดูงาน"
+    ) {
       checkForm.value = "FormLeaveToTraining";
     } else if (type === "LV-009") {
       checkForm.value = "FormLeaveToWorkInternational";
@@ -344,6 +355,7 @@ async function fetchDataCancelDetail(id: string) {
       formDataCancle.leaveNumber = data.leaveNumber ?? "-";
       formDataCancle.leaveResonDelete = data.leaveReasonDelete ?? "-";
       formDataCancle.leaveDetail = data.leaveDetail ?? "-";
+      formDataCancle.leaveSubTypeName = data.leaveSubTypeName ?? null;
       formDataCancle.leaveDocDelete = data.leaveDocDelete ?? null;
     })
     .catch((err) => {

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

@@ -15,7 +15,14 @@ const typeForm = defineModel<string>("type", { required: true });
 const $q = useQuasar();
 const dataStore = useLeaveStore();
 const mixin = useCounterMixin();
-const { date2Thai, dateToISO, messageError, convertDateToAPI } = mixin;
+const {
+  date2Thai,
+  dateToISO,
+  messageError,
+  convertDateToAPI,
+  showLoader,
+  hideLoader,
+} = mixin;
 const edit = ref<boolean>(true);
 const leaveDocumentRef = ref<any>(null);
 
@@ -46,6 +53,7 @@ const formDataSick = reactive<any>({
   leaveStartDate: null,
   leaveEndDate: null,
   leaveRange: "ALL",
+  leaveRangeEnd: "ALL",
   leaveTotal: "",
   leaveLast: null,
   leaveDetail: "",
@@ -121,6 +129,7 @@ function onValidate() {
 
     formData.append("type", formDataSick.type);
     formData.append("leaveRange", formDataSick.leaveRange);
+    formData.append("leaveRangeEnd", formDataSick.leaveRangeEnd);
     formData.append(
       "leaveStartDate",
       convertDateToAPI(formDataSick.leaveStartDate) ?? ""
@@ -144,12 +153,29 @@ function onValidate() {
  */
 const isLeave = ref<boolean>(true);
 const reasonLeave = ref<string>("");
+
+const checkDate = computed(() => {
+  if (
+    convertDateToAPI(formDataSick.leaveStartDate) ==
+    convertDateToAPI(formDataSick.leaveEndDate)
+  ) {
+    return true;
+  } else {
+    return false;
+  }
+});
+
 async function fetchCheck() {
+  showLoader();
   await http
     .post(config.API.leaveCheck(), {
       type: dataStore.typeId ?? null,
       StartLeaveDate: convertDateToAPI(formDataSick.leaveStartDate) ?? null,
       EndLeaveDate: convertDateToAPI(formDataSick.leaveEndDate) ?? null,
+      leaveRange: formDataSick.leaveRange,
+      leaveRangeEnd: checkDate.value
+        ? formDataSick.leaveRange
+        : formDataSick.leaveRangeEnd,
     })
     .then((res: any) => {
       const data = res.data.result;
@@ -162,8 +188,10 @@ async function fetchCheck() {
     })
     .catch((e: any) => {
       messageError($q, e);
+      hideLoader();
     })
     .finally(() => {
+      hideLoader();
       leaveDocumentRef.value.resetValidation();
     });
 }
@@ -212,6 +240,7 @@ watch(props.data, () => {
     formDataSick.leaveTotal = props.data.leaveTotal;
     formDataSick.leaveDetail = props.data.leaveDetail;
     formDataSick.leaveRange = props.data.leaveRange;
+    formDataSick.leaveRangeEnd = props.data.leaveRangeEnd;
     leaveDocumentList.value = props.data.leaveDocument;
     statusCheck.value = props.data.status;
     formDataSick.leaveDocument = [];
@@ -228,6 +257,7 @@ onMounted(() => {
     formDataSick.leaveTotal = props.data.leaveTotal;
     formDataSick.leaveDetail = props.data.leaveDetail;
     formDataSick.leaveRange = props.data.leaveRange;
+    formDataSick.leaveRangeEnd = props.data.leaveRangeEnd;
     leaveDocumentList.value = props.data.leaveDocument;
     statusCheck.value = props.data.status;
     leaveId.value = props.data.id;
@@ -257,45 +287,22 @@ onMounted(() => {
           :readonly="!edit || statusCheck === 'NEW'"
           :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
         />
-
+        <div class="col-12">
-        <div class="col-12 col-md-4 col-sm-12">
+          <div class="row q-col-gutter-sm">
-          <q-radio
-            v-model="formDataSick.leaveRange"
-            :disable="!edit || statusCheck === 'NEW'"
-            val="ALL"
-            label="ลาทั้งวัน"
-            checked-icon="task_alt"
-          />
-          <q-radio
-            v-model="formDataSick.leaveRange"
-            :disable="!edit || statusCheck === 'NEW'"
-            val="MORNING"
-            label="ลาครึ่งวันเช้า"
-            checked-icon="task_alt"
-            @update:model-value="resetDate"
-          />
-          <q-radio
-            v-model="formDataSick.leaveRange"
-            :disable="!edit || statusCheck === 'NEW'"
-            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"
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
               menu-class-name="modalfix"
               v-model="formDataSick.leaveStartDate"
               :locale="'th'"
               autoApply
+              hide-bottom-space
               borderless
               :enableTimePicker="false"
               week-start="0"
               :readonly="!edit || statusCheck === 'NEW'"
-              @update:model-value="formDataSick.leaveEndDate = null"
+              @update:model-value="
+                (formDataSick.leaveEndDate = null), fetchCheck()
+              "
             >
               <template #year="{ year }">
                 {{ year + 543 }}
@@ -310,17 +317,16 @@ onMounted(() => {
                   ref="leaveStartDateRef"
                   for="leaveStartDateRef"
                   hide-bottom-space
-                  :readonly="!edit || statusCheck === 'NEW'"
                   bg-color="white"
-                  class="full-width cursor-pointer inputgreen"
+                  :readonly="!edit || statusCheck === 'NEW'"
+                  class="full-width datepicker"
                   :model-value="
                     formDataSick.leaveStartDate != null
                       ? date2Thai(formDataSick.leaveStartDate)
                       : null
                   "
-                  :label="`${'ลาตั้งแต่วันที่'}`"
+                  :label="`${'วันที่เริ่มต้น'}`"
-                  :rules="[(val:string) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+                  :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
-                  style="color: var(--q-primary)"
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -333,18 +339,41 @@ onMounted(() => {
                 </q-input>
               </template>
             </datepicker>
-
+            <q-select
+              outlined
+              dense
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+              bg-color="white"
+              v-model="formDataSick.leaveRange"
+              :options="dataStore.rangeOptions"
+              emit-value
+              map-options
+              option-value="id"
+              option-label="name"
+              @update:model-value="fetchCheck()"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="mdi-clock-outline"
+                  style="color: var(--q-primary)"
+                />
+              </template>
+            </q-select>
+          </div>
+        </div>
+        <div class="col-12">
+          <div class="row q-col-gutter-sm">
             <datepicker
-              class="col-12 col-md-3 col-sm-6"
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
               menu-class-name="modalfix"
               v-model="formDataSick.leaveEndDate"
               :locale="'th'"
               autoApply
+              hide-bottom-space
+              @update:model-value="fetchCheck()"
               borderless
               :enableTimePicker="false"
               week-start="0"
-              :readonly="isReadOnly"
-              @update:model-value="fetchCheck()"
               :min-date="formDataSick.leaveStartDate"
             >
               <template #year="{ year }">
@@ -361,15 +390,14 @@ onMounted(() => {
                   for="leaveEndDateRef"
                   hide-bottom-space
                   bg-color="white"
-                  :readonly="isReadOnly"
+                  class="full-width datepicker"
-                  :class="inputEdit(isReadOnly)"
                   :model-value="
                     formDataSick.leaveEndDate != null
                       ? date2Thai(formDataSick.leaveEndDate)
                       : null
                   "
-                  :label="`${'ลาถึงวันที่'}`"
+                  :label="`${'วันที่สิ้นสุด'}`"
-                  :rules="[(val:string) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+                  :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -382,6 +410,27 @@ onMounted(() => {
                 </q-input>
               </template>
             </datepicker>
+            <q-select
+              v-if="!checkDate"
+              outlined
+              dense
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+              bg-color="white"
+              v-model="formDataSick.leaveRangeEnd"
+              :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
+              emit-value
+              map-options
+              option-value="id"
+              option-label="name"
+              @update:model-value="fetchCheck()"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="mdi-clock-outline"
+                  style="color: var(--q-primary)"
+                />
+              </template>
+            </q-select>
             <q-input
               :bottom-slots="!isLeave ? true : false"
               :color="!isLeave ? 'red' : 'black'"
@@ -403,7 +452,6 @@ onMounted(() => {
                 </span>
               </template>
             </q-input>
-
             <q-input
               class="col-12 col-md-3 col-sm-6"
               dense
@@ -418,6 +466,7 @@ onMounted(() => {
             />
           </div>
         </div>
+
         <div class="full-width">
           <div class="q-col-gutter-sm row">
             <q-input

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

@@ -13,7 +13,7 @@ import type { FormRef } from "@/modules/05_leave/interface/request/BirthForm";
 const $q = useQuasar();
 const dataStore = useLeaveStore();
 const mixin = useCounterMixin();
-const { date2Thai, dateToISO, messageError, convertDateToAPI } = mixin;
+const { date2Thai, dateToISO, messageError, convertDateToAPI,showLoader,hideLoader } = mixin;
 
 const edit = ref<boolean>(true);
 const leaveId = ref<string>("");
@@ -46,6 +46,8 @@ const formDataBirth = reactive<any>({
   leaveEndDate: null,
   leaveTotal: "",
   leaveLast: "",
+  leaveRange: "ALL",
+  leaveRangeEnd: "ALL",
   leaveDetail: "",
   leaveDocument: [],
 });
@@ -115,6 +117,8 @@ function onValidate() {
     formData.append("leaveNumber", dataStore.telephoneNumber);
     formData.append("leaveDetail", formDataBirth.leaveDetail);
     formData.append("leaveTotal", formDataBirth.leaveTotal);
+    formData.append("leaveRange", formDataBirth.leaveRange);
+    formData.append("leaveRangeEnd", formDataBirth.leaveRangeEnd);
 
     props.onSubmit(formData, isLeave.value);
   }
@@ -122,18 +126,34 @@ function onValidate() {
 
 const isLeave = ref<boolean>(true);
 const reasonLeave = ref<string>("");
+
+const checkDate = computed(() => {
+  if (
+    convertDateToAPI(formDataBirth.leaveEndDate) ==
+    convertDateToAPI(formDataBirth.leaveStartDate)
+  ) {
+    return true;
+  } else {
+    return false;
+  }
+});
+
 /**
  * check ว่าลาได้ไหม จาก api
  * @param formData
  */
 async function fetchCheck() {
+  showLoader()
   await http
     .post(config.API.leaveCheck(), {
       type: dataStore.typeId ?? null,
       StartLeaveDate: convertDateToAPI(formDataBirth.leaveStartDate) ?? null,
       EndLeaveDate: convertDateToAPI(formDataBirth.leaveEndDate) ?? null,
+      leaveRange: formDataBirth.leaveRange,
+      leaveRangeEnd: checkDate.value ? formDataBirth.leaveRange : formDataBirth.leaveRangeEnd
     })
     .then((res: any) => {
+      hideLoader()
       const data = res.data.result;
       isLeave.value = data.isLeave;
       formDataBirth.leaveTotal = data.totalDate;
@@ -142,6 +162,7 @@ async function fetchCheck() {
         : "จำนวนวันลาเกินที่กำหนด";
     })
     .catch((e: any) => {
+      hideLoader()
       messageError($q, e);
     });
 }
@@ -161,6 +182,7 @@ watch(props.data, () => {
     formDataBirth.leaveEndDate = props.data.leaveEndDate;
     formDataBirth.leaveTotal = props.data.leaveTotal;
     formDataBirth.leaveDetail = props.data.leaveDetail;
+    formDataBirth.leaveRangeEnd = props.data.leaveRangeEnd;
     leaveDocumentList.value = props.data.leaveDocument;
     statusCheck.value = props.data.status;
     formDataBirth.leaveDocument = [];
@@ -176,6 +198,8 @@ onMounted(() => {
     formDataBirth.leaveTotal = props.data.leaveTotal;
     formDataBirth.leaveDetail = props.data.leaveDetail;
     leaveDocumentList.value = props.data.leaveDocument;
+    formDataBirth.leaveRange = props.data.leaveRange;
+    formDataBirth.leaveRangeEnd = props.data.leaveRangeEnd;
     statusCheck.value = props.data.status;
     leaveId.value = props.data.id;
   }
@@ -205,137 +229,186 @@ onMounted(() => {
           :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
         />
 
-        <datepicker
+        <div class="col-12">
-          class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
+          <div class="row q-col-gutter-sm">
-          menu-class-name="modalfix"
+            <datepicker
-          v-model="formDataBirth.leaveStartDate"
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-          :locale="'th'"
+              menu-class-name="modalfix"
-          autoApply
+              v-model="formDataBirth.leaveStartDate"
-          hide-bottom-space
+              :locale="'th'"
-          borderless
+              autoApply
-          :enableTimePicker="false"
-          week-start="0"
-          :readonly="!edit || statusCheck === 'NEW'"
-          @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"
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
               :readonly="!edit || statusCheck === 'NEW'"
-              class="full-width datepicker"
+              @update:model-value="
-              :model-value="
+                (formDataBirth.leaveEndDate = null), fetchCheck()
-                formDataBirth.leaveStartDate != null
-                  ? date2Thai(formDataBirth.leaveStartDate)
-                  : null
               "
-              :label="`${'ลาตั้งแต่วันที่'}`"
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
             >
-              <template v-slot:prepend>
+              <template #year="{ year }">
-                <q-icon
+                {{ year + 543 }}
-                  name="event"
-                  class="cursor-pointer"
-                  style="color: var(--q-primary)"
-                >
-                </q-icon>
               </template>
-            </q-input>
+              <template #year-overlay-value="{ value }">
-          </template>
+                {{ parseInt(value + 543) }}
-        </datepicker>
+              </template>
-
+              <template #trigger>
-        <datepicker
+                <q-input
-          class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
+                  outlined
-          menu-class-name="modalfix"
+                  dense
-          v-model="formDataBirth.leaveEndDate"
+                  ref="leaveStartDateRef"
-          :locale="'th'"
+                  for="leaveStartDateRef"
-          autoApply
+                  hide-bottom-space
-          @update:model-value="fetchCheck()"
+                  bg-color="white"
-          borderless
+                  :readonly="!edit || statusCheck === 'NEW'"
-          hide-bottom-space
+                  class="full-width datepicker"
-          :enableTimePicker="false"
+                  :model-value="
-          week-start="0"
+                    formDataBirth.leaveStartDate != null
-          :readonly="!formDataBirth.leaveStartDate"
+                      ? date2Thai(formDataBirth.leaveStartDate)
-          :min-date="formDataBirth.leaveStartDate"
+                      : null
-        >
+                  "
-          <template #year="{ year }">
+                  :label="`${'วันที่เริ่มต้น'}`"
-            {{ year + 543 }}
+                  :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
-          </template>
+                >
-          <template #year-overlay-value="{ value }">
+                  <template v-slot:prepend>
-            {{ parseInt(value + 543) }}
+                    <q-icon
-          </template>
+                      name="event"
-          <template #trigger>
+                      class="cursor-pointer"
-            <q-input
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+            <q-select
               outlined
               dense
-              ref="leaveEndDateRef"
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              for="leaveEndDateRef"
-              hide-bottom-space
-              :readonly="!formDataBirth.leaveStartDate"
-              class="full-width datepicker"
               bg-color="white"
-              :model-value="
+              v-model="formDataBirth.leaveRange"
-                formDataBirth.leaveEndDate != null
+              :options="dataStore.rangeOptions"
-                  ? date2Thai(formDataBirth.leaveEndDate)
+              emit-value
-                  : null
+              map-options
-              "
+              option-value="id"
-              :label="`${'ลาถึงวันที่'}`"
+              option-label="name"
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+              @update:model-value="fetchCheck()"
             >
               <template v-slot:prepend>
                 <q-icon
-                  name="event"
+                  name="mdi-clock-outline"
-                  class="cursor-pointer"
                   style="color: var(--q-primary)"
+                />
+              </template>
+            </q-select>
+          </div>
+        </div>
+        <div class="col-12">
+          <div class="row q-col-gutter-sm">
+            <datepicker
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+              menu-class-name="modalfix"
+              v-model="formDataBirth.leaveEndDate"
+              :locale="'th'"
+              autoApply
+              hide-bottom-space
+              @update:model-value="fetchCheck()"
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+              :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"
+                  class="full-width datepicker"
+                  :model-value="
+                    formDataBirth.leaveEndDate != null
+                      ? date2Thai(formDataBirth.leaveEndDate)
+                      : null
+                  "
+                  :label="`${'วันที่สิ้นสุด'}`"
+                  :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
                 >
-                </q-icon>
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+            <q-select
+            v-if="!checkDate"
+              outlined
+              dense
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+              bg-color="white"
+              v-model="formDataBirth.leaveRangeEnd"
+              :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
+              emit-value
+              map-options
+              option-value="id"
+              option-label="name"
+              @update:model-value="fetchCheck()"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="mdi-clock-outline"
+                  style="color: var(--q-primary)"
+                />
+              </template>
+            </q-select>
+            <q-input
+              :bottom-slots="!isLeave ? true : false"
+              :color="!isLeave ? 'red' : 'black'"
+              :bg-color="!isLeave ? 'red-2' : 'white'"
+              :border-color="!isLeave ? 'red' : 'gray'"
+              :input-class="!isLeave ? dateEndInputStyle : ''"
+              class="col-12 col-md-3 col-sm-6"
+              dense
+              outlined
+              ref="leaveTotalRef"
+              for="leaveTotalRef"
+              v-model="formDataBirth.leaveTotal"
+              label="จำนวนวันที่ลา"
+              readonly
+            >
+              <template v-slot:hint>
+                <span style="color: red">
+                  {{ !isLeave ? reasonLeave : "" }}
+                </span>
               </template>
             </q-input>
-          </template>
+            <q-input
-        </datepicker>
+              class="col-12 col-md-3 col-sm-6"
-        <q-input
+              dense
-          class="col-12 col-md-3 col-sm-6"
+              outlined
-          dense
+              ref="leaveLastRef"
-          outlined
+              for="leaveLastRef"
-          ref="leaveTotalRef"
+              v-model="dataStore.leaveLast"
-          for="leaveTotalRef"
+              label="ลาครั้งสุดท้ายเมื่อวันที่"
-          v-model="formDataBirth.leaveTotal"
+              readonly
-          label="จำนวนวันที่ลา"
+              hide-bottom-space
-          readonly
+              bg-color="white"
-          :bottom-slots="!isLeave ? true : false"
+            />
-          :color="!isLeave ? 'red' : 'black'"
+          </div>
-          :bg-color="!isLeave ? 'red-2' : 'white'"
+        </div>
-          :border-color="!isLeave ? 'red' : 'gray'"
+
-          :input-class="!isLeave ? dateEndInputStyle : ''"
-        >
-          <template v-slot:hint>
-            <span style="color: red">
-              {{ !isLeave ? reasonLeave : "" }}
-            </span>
-          </template>
-        </q-input>
-        <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

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

@@ -14,8 +14,17 @@ import type { FormRef } from "@/modules/05_leave/interface/request/HelpWifeForm"
 const $q = useQuasar();
 const dataStore = useLeaveStore();
 const mixin = useCounterMixin();
-const { date2Thai, calculateDurationYmd, dateToISO, messageError,convertDateToAPI } = mixin;
+const {
+  date2Thai,
+  calculateDurationYmd,
+  dateToISO,
+  messageError,
+  convertDateToAPI,
+  showLoader,
+  hideLoader,
+} = mixin;
 
+const leaveText = ref<string>("");
 const edit = ref<boolean>(true);
 const leaveId = ref<string>("");
 
@@ -49,6 +58,8 @@ const formDataHelpWife = reactive<any>({
   leaveEndDate: null,
   leaveTotal: "",
   leaveDetail: "",
+  leaveRange: "ALL",
+  leaveRangeEnd: "ALL",
   leaveDocument: [],
 });
 
@@ -115,20 +126,22 @@ function onValidate() {
     formData.append("type", formDataHelpWife.type);
     formData.append(
       "leaveStartDate",
-      convertDateToAPI(formDataHelpWife.leaveStartDate)??''
+      convertDateToAPI(formDataHelpWife.leaveStartDate) ?? ""
     );
     formData.append(
       "leaveEndDate",
-      convertDateToAPI(formDataHelpWife.leaveEndDate)??''
+      convertDateToAPI(formDataHelpWife.leaveEndDate) ?? ""
     );
     formData.append("leaveWrote", formDataHelpWife.leaveWrote);
     formData.append("leaveAddress", dataStore.currentAddress);
     formData.append("leaveNumber", dataStore.telephoneNumber);
     formData.append("leaveDetail", formDataHelpWife.leaveDetail);
     formData.append("wifeDayName", formDataHelpWife.wifeDayName);
+    formData.append("leaveRange", formDataHelpWife.leaveRange);
+    formData.append("leaveRangeEnd", formDataHelpWife.leaveRangeEnd);
     formData.append(
       "wifeDayDateBorn",
-      convertDateToAPI(formDataHelpWife.wifeDayDateBorn)??''
+      convertDateToAPI(formDataHelpWife.wifeDayDateBorn) ?? ""
     );
     formData.append("leaveTotal", formDataHelpWife.leaveTotal);
 
@@ -136,48 +149,57 @@ function onValidate() {
   }
 }
 
-/**
- * function อัพเดทค่า LeaveTotal
- */
-function updateLeaveTotal() {
-  const newLeaveTotal = calculateDurationYmd(
-    formDataHelpWife.leaveStartDate,
-    formDataHelpWife.leaveEndDate
-  );
-  formDataHelpWife.leaveTotal = newLeaveTotal;
-}
-
 const reasonLeave = ref<string>("");
+const checkDate = computed(() => {
+  if (
+    convertDateToAPI(formDataHelpWife.leaveEndDate) ==
+    convertDateToAPI(formDataHelpWife.leaveStartDate)
+  ) {
+    return true;
+  } else {
+    return false;
+  }
+});
 
 /**
  * check ว่าลาได้ไหม จาก api
  * @param formData
  */
 async function fetchCheck() {
+  showLoader();
   await http
     .post(config.API.leaveCheck(), {
       type: dataStore.typeId ?? null,
       StartLeaveDate: convertDateToAPI(formDataHelpWife.leaveStartDate) ?? null,
       EndLeaveDate: convertDateToAPI(formDataHelpWife.leaveEndDate) ?? null,
+      leaveRange: formDataHelpWife.leaveRange,
+      leaveRangeEnd: checkDate.value
+        ? formDataHelpWife.leaveRange
+        : formDataHelpWife.leaveRangeEnd,
     })
     .then((res: any) => {
       const data = res.data.result;
       isLeave.value = data.isLeave;
       formDataHelpWife.leaveTotal =
         data.totalDate - data.sumDateWork - data.sumDateHoliday;
-
+      leaveText.value = calculateDurationYmd(
+        formDataHelpWife.leaveStartDate,
+        formDataHelpWife.leaveEndDate
+      );
       reasonLeave.value = data.message
         ? data.message
         : "จำนวนวันลาเกินที่กำหนด";
+      hideLoader();
     })
     .catch((e: any) => {
       messageError($q, e);
+      hideLoader();
     });
 }
 
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 
-watch(props.data, () => {
+watch(props.data, async () => {
   if (props.data) {
     formDataHelpWife.leaveWrote = props.data.leaveWrote;
     formDataHelpWife.wifeDayName = props.data.wifeDayName;
@@ -185,7 +207,14 @@ watch(props.data, () => {
     formDataHelpWife.leaveStartDate = props.data.leaveStartDate;
     formDataHelpWife.leaveEndDate = props.data.leaveEndDate;
     formDataHelpWife.leaveTotal = props.data.leaveTotal;
+    formDataHelpWife.leaveRangeEnd = props.data.leaveRangeEnd;
+    formDataHelpWife.leaveRange = props.data.leaveRange;
     formDataHelpWife.leaveDetail = props.data.leaveDetail;
+    const leaveTotal = await calculateDurationYmd(
+      props.data.leaveStartDate,
+      props.data.leaveEndDate
+    );
+    leaveText.value = leaveTotal;
     formDataHelpWife.leaveDocument = [];
     leaveDocumentList.value = props.data.leaveDocument;
     statusCheck.value = props.data.status;
@@ -193,7 +222,7 @@ watch(props.data, () => {
 });
 
 /**Hook */
-onMounted(() => {
+onMounted(async () => {
   if (props.data) {
     formDataHelpWife.leaveWrote = props.data.leaveWrote;
     formDataHelpWife.wifeDayName = props.data.wifeDayName;
@@ -203,6 +232,14 @@ onMounted(() => {
     formDataHelpWife.leaveTotal = props.data.leaveTotal;
     formDataHelpWife.leaveDetail = props.data.leaveDetail;
     leaveDocumentList.value = props.data.leaveDocument;
+    formDataHelpWife.leaveRange = props.data.leaveRange;
+    formDataHelpWife.leaveRangeEnd = props.data.leaveRangeEnd;
+    const leaveTotal = await calculateDurationYmd(
+      props.data.leaveStartDate,
+      props.data.leaveEndDate
+    );
+    leaveText.value = leaveTotal;
+
     statusCheck.value = props.data.status;
     leaveId.value = props.data.id;
   }
@@ -230,125 +267,174 @@ onMounted(() => {
           :readonly="!edit || statusCheck === 'NEW'"
           :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
         />
-        <datepicker
+        <div class="col-12">
-          class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
+          <div class="row q-col-gutter-sm">
-          menu-class-name="modalfix"
+            <datepicker
-          v-model="formDataHelpWife.leaveStartDate"
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-          :locale="'th'"
+              menu-class-name="modalfix"
-          autoApply
+              v-model="formDataHelpWife.leaveStartDate"
-          hide-bottom-space
+              :locale="'th'"
-          borderless
+              autoApply
-          :enableTimePicker="false"
-          week-start="0"
-          :readonly="!edit || statusCheck === 'NEW'"
-          @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"
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
               :readonly="!edit || statusCheck === 'NEW'"
-              class="full-width datepicker"
+              @update:model-value="
-              :model-value="
+                (formDataHelpWife.leaveEndDate = null), fetchCheck()
-                formDataHelpWife.leaveStartDate != null
-                  ? date2Thai(formDataHelpWife.leaveStartDate)
-                  : null
               "
-              :label="`${'ลาตั้งแต่วันที่'}`"
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
             >
-              <template v-slot:prepend>
+              <template #year="{ year }">
-                <q-icon
+                {{ year + 543 }}
-                  name="event"
-                  class="cursor-pointer"
-                  style="color: var(--q-primary)"
-                >
-                </q-icon>
               </template>
-            </q-input>
+              <template #year-overlay-value="{ value }">
-          </template>
+                {{ parseInt(value + 543) }}
-        </datepicker>
+              </template>
-
+              <template #trigger>
-        <datepicker
+                <q-input
-          class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
+                  outlined
-          menu-class-name="modalfix"
+                  dense
-          v-model="formDataHelpWife.leaveEndDate"
+                  ref="leaveStartDateRef"
-          :locale="'th'"
+                  for="leaveStartDateRef"
-          autoApply
+                  hide-bottom-space
-          borderless
+                  bg-color="white"
-          hide-bottom-space
+                  :readonly="!edit || statusCheck === 'NEW'"
-          :enableTimePicker="false"
+                  class="full-width datepicker"
-          @update:model-value="updateLeaveTotal, fetchCheck()"
+                  :model-value="
-          week-start="0"
+                    formDataHelpWife.leaveStartDate != null
-          :readonly="!formDataHelpWife.leaveStartDate"
+                      ? date2Thai(formDataHelpWife.leaveStartDate)
-          :min-date="formDataHelpWife.leaveStartDate"
+                      : null
-        >
+                  "
-          <template #year="{ year }">
+                  :label="`${'วันที่เริ่มต้น'}`"
-            {{ year + 543 }}
+                  :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
-          </template>
+                >
-          <template #year-overlay-value="{ value }">
+                  <template v-slot:prepend>
-            {{ parseInt(value + 543) }}
+                    <q-icon
-          </template>
+                      name="event"
-          <template #trigger>
+                      class="cursor-pointer"
-            <q-input
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+            <q-select
               outlined
               dense
-              ref="leaveEndDateRef"
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              for="leaveEndDateRef"
-              hide-bottom-space
               bg-color="white"
-              :readonly="!formDataHelpWife.leaveStartDate"
+              v-model="formDataHelpWife.leaveRange"
-              class="full-width datepicker"
+              :options="dataStore.rangeOptions"
-              :model-value="
+              emit-value
-                formDataHelpWife.leaveEndDate != null
+              map-options
-                  ? date2Thai(formDataHelpWife.leaveEndDate)
+              option-value="id"
-                  : null
+              option-label="name"
-              "
+              @update:model-value="fetchCheck()"
-              :label="`${'ลาถึงวันที่'}`"
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
             >
               <template v-slot:prepend>
                 <q-icon
-                  name="event"
+                  name="mdi-clock-outline"
-                  class="cursor-pointer"
                   style="color: var(--q-primary)"
-                >
+                />
-                </q-icon>
               </template>
-            </q-input>
+            </q-select>
-          </template>
+          </div>
-        </datepicker>
+        </div>
-        <q-input
+        <div class="col-12">
-          class="col-12 col-md-2 col-sm-6"
+          <div class="row q-col-gutter-sm">
-          dense
+            <datepicker
-          outlined
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-          ref="leaveTotalRef"
+              menu-class-name="modalfix"
-          for="leaveTotalRef"
+              v-model="formDataHelpWife.leaveEndDate"
-          v-model="formDataHelpWife.leaveTotal"
+              :locale="'th'"
-          label="จำนวนวันที่ลา"
+              autoApply
-          readonly
+              hide-bottom-space
-          :bottom-slots="!isLeave ? true : false"
+              @update:model-value="fetchCheck()"
-          :color="!isLeave ? 'red' : 'black'"
+              borderless
-          :bg-color="!isLeave ? 'red-2' : 'white'"
+              :enableTimePicker="false"
-          :border-color="!isLeave ? 'red' : 'gray'"
+              week-start="0"
-          :input-class="!isLeave ? dateEndInputStyle : ''"
+              :min-date="formDataHelpWife.leaveStartDate"
-        >
+            >
-          <template v-slot:hint>
+              <template #year="{ year }">
-            <span style="color: red">
+                {{ year + 543 }}
-              {{ !isLeave ? reasonLeave : "" }}
+              </template>
-            </span>
+              <template #year-overlay-value="{ value }">
-          </template>
+                {{ parseInt(value + 543) }}
-        </q-input>
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  dense
+                  ref="leaveEndDateRef"
+                  for="leaveEndDateRef"
+                  hide-bottom-space
+                  bg-color="white"
+                  class="full-width datepicker"
+                  :model-value="
+                    formDataHelpWife.leaveEndDate != null
+                      ? date2Thai(formDataHelpWife.leaveEndDate)
+                      : null
+                  "
+                  :label="`${'วันที่สิ้นสุด'}`"
+                  :rules="[(val:string) => !!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-select
+              v-if="!checkDate"
+              outlined
+              dense
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+              bg-color="white"
+              v-model="formDataHelpWife.leaveRangeEnd"
+              :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
+              emit-value
+              map-options
+              option-value="id"
+              option-label="name"
+              @update:model-value="fetchCheck()"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="mdi-clock-outline"
+                  style="color: var(--q-primary)"
+                />
+              </template>
+            </q-select>
+          </div>
+        </div>
+        <div class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen">
+          <q-input
+            :bottom-slots="!isLeave ? true : false"
+            :color="!isLeave ? 'red' : 'black'"
+            :bg-color="!isLeave ? 'red-2' : 'white'"
+            :border-color="!isLeave ? 'red' : 'gray'"
+            :input-class="!isLeave ? dateEndInputStyle : ''"
+            dense
+            outlined
+            ref="leaveTotalRef"
+            for="leaveTotalRef"
+            v-model="leaveText"
+            label="จำนวนวันที่ลา"
+            readonly
+          >
+            <template v-slot:hint>
+              <span style="color: red">
+                {{ !isLeave ? reasonLeave : "" }}
+              </span>
+            </template>
+          </q-input>
+        </div>
         <div class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen">
           <q-input
             class="col-12 col-sm-12"

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

@@ -9,12 +9,20 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useLeaveStore } from "@/modules/05_leave/store";
 
 import type { FormRef } from "@/modules/05_leave/interface/request/VacationForm";
+import type { DataOption } from "@/modules/14_IDP/interface/Main";
 
 /** Use */
 const $q = useQuasar();
 const dataStore = useLeaveStore();
 const mixin = useCounterMixin();
-const { date2Thai, dateToISO, messageError,convertDateToAPI } = mixin;
+const {
+  date2Thai,
+  dateToISO,
+  messageError,
+  convertDateToAPI,
+  showLoader,
+  hideLoader,
+} = mixin;
 
 const edit = ref<boolean>(true);
 const leaveId = ref<string>("");
@@ -50,6 +58,7 @@ const formDataVacation = reactive<any>({
   leaveEndDate: null,
   leaveTotal: "",
   leaveDetail: "",
+  leaveRangeEnd: "ALL",
   leaveDocument: [],
 });
 
@@ -134,13 +143,14 @@ function onValidate() {
     // formData.append("leaveDocument", formDataVacation.leaveDocument);
     formData.append("type", formDataVacation.type);
     formData.append("leaveRange", formDataVacation.leaveRange);
+    formData.append("leaveRangeEnd", formDataVacation.leaveRangeEnd);
     formData.append(
       "leaveStartDate",
-      convertDateToAPI(formDataVacation.leaveStartDate)??''
+      convertDateToAPI(formDataVacation.leaveStartDate) ?? ""
     );
     formData.append(
       "leaveEndDate",
-      convertDateToAPI(formDataVacation.leaveEndDate)??''
+      convertDateToAPI(formDataVacation.leaveEndDate) ?? ""
     );
     formData.append("leaveWrote", formDataVacation.leaveWrote);
     formData.append("leaveAddress", dataStore.currentAddress);
@@ -158,12 +168,28 @@ function onValidate() {
 const isLeave = ref<boolean>(true);
 const reasonLeave = ref<string>("");
 
+const checkDate = computed(() => {
+  if (
+    convertDateToAPI(formDataVacation.leaveEndDate) ==
+    convertDateToAPI(formDataVacation.leaveStartDate)
+  ) {
+    return true;
+  } else {
+    return false;
+  }
+});
+
 async function fetchCheck() {
+  showLoader();
   await http
     .post(config.API.leaveCheck(), {
       type: dataStore.typeId ?? null,
       StartLeaveDate: convertDateToAPI(formDataVacation.leaveStartDate) ?? null,
       EndLeaveDate: convertDateToAPI(formDataVacation.leaveEndDate) ?? null,
+      leaveRange: formDataVacation.leaveRange,
+      leaveRangeEnd: checkDate.value
+        ? formDataVacation.leaveRange
+        : formDataVacation.leaveRangeEnd,
     })
     .then((res: any) => {
       const data = res.data.result;
@@ -174,9 +200,11 @@ async function fetchCheck() {
       reasonLeave.value = data.message
         ? data.message
         : "จำนวนวันลาเกินที่กำหนด";
+      hideLoader();
     })
     .catch((e: any) => {
       messageError($q, e);
+      hideLoader();
     });
 }
 
@@ -203,6 +231,7 @@ watch(props.data, () => {
     formDataVacation.leaveTotal = props.data.leaveTotal;
 
     formDataVacation.leaveDetail = props.data.leaveDetail;
+    formDataVacation.leaveRangeEnd = props.data.leaveRangeEnd;
     leaveDocumentList.value = props.data.leaveDocument;
     statusCheck.value = props.data.status;
     formDataVacation.leaveRange = props.data.leaveRange;
@@ -224,6 +253,7 @@ onMounted(() => {
     leaveDocumentList.value = props.data.leaveDocument;
     statusCheck.value = props.data.status;
     formDataVacation.leaveRange = props.data.leaveRange;
+    formDataVacation.leaveRangeEnd = props.data.leaveRangeEnd;
     leaveId.value = props.data.id;
   }
 });
@@ -248,9 +278,177 @@ onMounted(() => {
           v-model="formDataVacation.leaveWrote"
           label="เขียนที่"
           :readonly="!edit || statusCheck === 'NEW'"
-          :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
+          :rules="[(val:string) => !!val || `${'กรุณากรอกเขียนที่'}`]"
         />
-        <div class="col-12 col-md-4 col-sm-6">
+        <div class="col-12">
+          <div class="row q-col-gutter-sm">
+            <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 || statusCheck === 'NEW'"
+              @update:model-value="
+                (formDataVacation.leaveEndDate = null), fetchCheck()
+              "
+            >
+              <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 || statusCheck === 'NEW'"
+                  class="full-width datepicker"
+                  :model-value="
+                    formDataVacation.leaveStartDate != null
+                      ? date2Thai(formDataVacation.leaveStartDate)
+                      : null
+                  "
+                  :label="`${'วันที่เริ่มต้น'}`"
+                  :rules="[(val:string) => !!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-select
+              outlined
+              dense
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+              bg-color="white"
+              v-model="formDataVacation.leaveRange"
+              :options="dataStore.rangeOptions"
+              emit-value
+              map-options
+              option-value="id"
+              option-label="name"
+              @update:model-value="fetchCheck()"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="mdi-clock-outline"
+                  style="color: var(--q-primary)"
+                />
+              </template>
+            </q-select>
+          </div>
+        </div>
+        <div class="col-12">
+          <div class="row q-col-gutter-sm">
+            <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"
+              :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"
+                  :model-value="
+                    formDataVacation.leaveEndDate != null
+                      ? date2Thai(formDataVacation.leaveEndDate)
+                      : null
+                  "
+                  :label="`${'วันที่สิ้นสุด'}`"
+                  :rules="[(val:string) => !!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-select
+              v-if="!checkDate"
+              outlined
+              dense
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+              bg-color="white"
+              v-model="formDataVacation.leaveRangeEnd"
+              :options="dataStore.rangeOptions.filter((items:DataOption)=> items.id !== 'AFTERNOON')"
+              emit-value
+              map-options
+              option-value="id"
+              option-label="name"
+              @update:model-value="fetchCheck()"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="mdi-clock-outline"
+                  style="color: var(--q-primary)"
+                />
+              </template>
+            </q-select>
+            <q-input
+              :bottom-slots="!isLeave ? true : false"
+              :color="!isLeave ? 'red' : 'black'"
+              :bg-color="!isLeave ? 'red-2' : 'white'"
+              :border-color="!isLeave ? 'red' : 'gray'"
+              :input-class="!isLeave ? dateEndInputStyle : ''"
+              class="col-12 col-md-2 col-sm-6"
+              dense
+              outlined
+              ref="leaveTotalRef"
+              for="leaveTotalRef"
+              v-model="formDataVacation.leaveTotal"
+              label="จำนวนวันที่ลา"
+              readonly
+            >
+              <template v-slot:hint>
+                <span style="color: red">
+                  {{ !isLeave ? reasonLeave : "" }}
+                </span>
+              </template>
+            </q-input>
+          </div>
+        </div>
+
+        <!-- <div class="col-12 col-md-4 col-sm-6">
           <q-radio
             v-model="formDataVacation.leaveRange"
             val="ALL"
@@ -271,7 +469,7 @@ onMounted(() => {
             checked-icon="task_alt"
             @update:model-value="resetDate"
           />
-        </div>
+        </div> -->
         <q-input
           class="col-12 col-md-4 col-sm-6"
           ref="restDayOldTotalRef"
@@ -298,125 +496,6 @@ onMounted(() => {
           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 || statusCheck === 'NEW'"
-          @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 || statusCheck === 'NEW'"
-              class="full-width datepicker"
-              :model-value="
-                formDataVacation.leaveStartDate != null
-                  ? date2Thai(formDataVacation.leaveStartDate)
-                  : null
-              "
-              :label="`${'ลาตั้งแต่วันที่'}`"
-              :rules="[(val:string) => !!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:string) => !!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
-          :bottom-slots="!isLeave ? true : false"
-          :color="!isLeave ? 'red' : 'black'"
-          :bg-color="!isLeave ? 'red-2' : 'white'"
-          :border-color="!isLeave ? 'red' : 'gray'"
-          :input-class="!isLeave ? dateEndInputStyle : ''"
-          class="col-12 col-md-2 col-sm-6"
-          dense
-          outlined
-          ref="leaveTotalRef"
-          for="leaveTotalRef"
-          v-model="formDataVacation.leaveTotal"
-          label="จำนวนวันที่ลา"
-          readonly
-        >
-          <template v-slot:hint>
-            <span style="color: red">
-              {{ !isLeave ? reasonLeave : "" }}
-            </span>
-          </template>
-        </q-input>
         <div class="full-width">
           <div class="q-col-gutter-sm row">
             <q-input

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

@@ -13,10 +13,18 @@ import type { OrdinationForm } from "@/modules/05_leave/interface/request/AddAbs
 const $q = useQuasar();
 const dataStore = useLeaveStore();
 const mixin = useCounterMixin();
-const { date2Thai, calculateDurationYmd, dateToISO, messageError,convertDateToAPI } = mixin;
+const {
+  date2Thai,
+  calculateDurationYmd,
+  dateToISO,
+  messageError,
+  convertDateToAPI,
+  showLoader,
+  hideLoader,
+} = mixin;
 const edit = ref<boolean>(true);
 const leaveId = ref<string>("");
-
+const leaveText = ref<string>("");
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
   data: {
@@ -70,6 +78,8 @@ const formDataOrdination = reactive<any>({
   ordainDayStatus: true,
   leaveDocument: [],
   leaveDetail: "",
+  leaveRange: "ALL",
+  leaveRangeEnd: "ALL",
 });
 
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
@@ -122,15 +132,15 @@ function onValidate() {
     formData.append("type", formDataOrdination.type);
     formData.append(
       "leaveStartDate",
-      convertDateToAPI(formDataOrdination.leaveStartDate)??''
+      convertDateToAPI(formDataOrdination.leaveStartDate) ?? ""
     );
     formData.append(
       "leaveEndDate",
-      convertDateToAPI(formDataOrdination.leaveEndDate)??''
+      convertDateToAPI(formDataOrdination.leaveEndDate) ?? ""
     );
     formData.append(
       "ordainDayOrdination",
-      convertDateToAPI(formDataOrdination.ordainDayOrdination)??''
+      convertDateToAPI(formDataOrdination.ordainDayOrdination) ?? ""
     );
     formData.append(
       "ordainDayLocationName",
@@ -138,7 +148,7 @@ function onValidate() {
     );
     formData.append(
       "ordainDayLocationNumber",
-      dataStore.telephoneNumber
+      formDataOrdination.ordainDayLocationNumber
     );
     formData.append(
       "ordainDayLocationAddress",
@@ -156,33 +166,59 @@ function onValidate() {
     formData.append("leaveWrote", formDataOrdination.leaveWrote);
     formData.append("leaveDetail", formDataOrdination.leaveDetail);
     formData.append("leaveTotal", formDataOrdination.leaveTotal);
+    formData.append("leaveRange", formDataOrdination.leaveRange);
+    formData.append("leaveRangeEnd", formDataOrdination.leaveRangeEnd);
     props.onSubmit(formData, isLeave.value);
   }
 }
 
 const isLeave = ref<boolean>(true);
 const reasonLeave = ref<string>("");
+
+const checkDate = computed(() => {
+  if (
+    convertDateToAPI(formDataOrdination.leaveEndDate) ==
+    convertDateToAPI(formDataOrdination.leaveStartDate)
+  ) {
+    return true;
+  } else {
+    return false;
+  }
+});
+
 /**
  * check ว่าลาได้ไหม จาก api
  * @param formData
  */
 async function fetchCheck() {
+  showLoader();
   await http
     .post(config.API.leaveCheck(), {
       type: dataStore.typeId ?? null,
-      StartLeaveDate: convertDateToAPI(formDataOrdination.leaveStartDate) ?? null,
+      StartLeaveDate:
+        convertDateToAPI(formDataOrdination.leaveStartDate) ?? null,
       EndLeaveDate: convertDateToAPI(formDataOrdination.leaveEndDate) ?? null,
+      leaveRange: formDataOrdination.leaveRange,
+      leaveRangeEnd: checkDate.value
+        ? formDataOrdination.leaveRange
+        : formDataOrdination.leaveRangeEnd,
     })
     .then((res: any) => {
       const data = res.data.result;
       isLeave.value = data.isLeave;
       formDataOrdination.leaveTotal = data.totalDate;
+      leaveText.value = calculateDurationYmd(
+        formDataOrdination.leaveStartDate,
+        formDataOrdination.leaveEndDate
+      );
       reasonLeave.value = data.message
         ? data.message
         : "จำนวนวันลาเกินที่กำหนด";
+      hideLoader();
     })
     .catch((e: any) => {
       messageError($q, e);
+      hideLoader();
     });
 }
 
@@ -206,7 +242,7 @@ const dateEndInputStyle = computed(() => {
 const leaveDocumentList = ref<any>();
 const statusCheck = ref<string>("");
 
-watch(props.data, () => {
+watch(props.data, async () => {
   if (props.data) {
     formDataOrdination.leaveWrote = props.data.leaveWrote;
     formDataOrdination.leaveStartDate = props.data.leaveStartDate;
@@ -214,7 +250,11 @@ watch(props.data, () => {
     formDataOrdination.leaveTotal = props.data.leaveTotal;
     formDataOrdination.ordainDayOrdination = props.data.ordainDayOrdination;
     formDataOrdination.ordainDayLocationName = props.data.ordainDayLocationName;
-
+    const leaveTotal = await calculateDurationYmd(
+      props.data.leaveStartDate,
+      props.data.leaveEndDate
+    );
+    leaveText.value = leaveTotal;
     formDataOrdination.ordainDayLocationAddress =
       props.data.ordainDayLocationAddress;
     formDataOrdination.ordainDayBuddhistLentName =
@@ -224,13 +264,17 @@ watch(props.data, () => {
     formDataOrdination.ordainDayStatus = props.data.ordainDayStatus;
     formDataOrdination.leaveDetail = props.data.leaveDetail;
     leaveDocumentList.value = props.data.leaveDocument;
+    formDataOrdination.ordainDayLocationNumber =
+      props.data.ordainDayLocationNumber;
+    formDataOrdination.leaveRange = props.data.leaveRange;
+    formDataOrdination.leaveRangeEnd = props.data.leaveRangeEnd;
     statusCheck.value = props.data.status;
     formDataOrdination.leaveDocument = [];
   }
 });
 
 /** Hook */
-onMounted(() => {
+onMounted(async () => {
   if (props.data) {
     formDataOrdination.leaveWrote = props.data.leaveWrote;
     formDataOrdination.leaveStartDate = props.data.leaveStartDate;
@@ -247,8 +291,24 @@ onMounted(() => {
       props.data.ordainDayBuddhistLentAddress;
     formDataOrdination.ordainDayStatus = props.data.ordainDayStatus;
     formDataOrdination.leaveDetail = props.data.leaveDetail;
+
+    formDataOrdination.ordainDayStatus = props.data.ordainDayStatus;
+    formDataOrdination.ordainDayLocationNumber =
+      props.data.ordainDayLocationNumber;
+    formDataOrdination.leaveRange = props.data.leaveRange;
+    formDataOrdination.leaveRangeEnd = props.data.leaveRangeEnd;
+
+    formDataOrdination.ordainDayLocationNumber =
+      props.data.ordainDayLocationNumber;
+    formDataOrdination.ordainDayStatus = props.data.ordainDayStatus;
+
     leaveDocumentList.value = props.data.leaveDocument;
     statusCheck.value = props.data.status;
+    const leaveTotal = await calculateDurationYmd(
+      props.data.leaveStartDate,
+      props.data.leaveEndDate
+    );
+    leaveText.value = leaveTotal;
     leaveId.value = props.data.id;
   }
 });
@@ -275,129 +335,176 @@ onMounted(() => {
           :readonly="!edit || statusCheck === 'NEW'"
           :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
         />
-
+        <div class="col-12">
-        <datepicker
+          <div class="row q-col-gutter-sm">
-          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+            <datepicker
-          menu-class-name="modalfix"
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-          v-model="formDataOrdination.leaveStartDate"
+              menu-class-name="modalfix"
-          :locale="'th'"
+              v-model="formDataOrdination.leaveStartDate"
-          autoApply
+              :locale="'th'"
-          borderless
+              autoApply
-          :enableTimePicker="false"
+              hide-bottom-space
-          week-start="0"
+              borderless
-          :readonly="!edit || statusCheck === 'NEW'"
+              :enableTimePicker="false"
-          @update:model-value="formDataOrdination.leaveEndDate = null"
+              week-start="0"
-        >
-          <template #year="{ year }">
-            {{ year + 543 }}
-          </template>
-          <template #year-overlay-value="{ value }">
-            {{ parseInt(value + 543) }}
-          </template>
-          <template #trigger>
-            <q-input
-              outlined
-              bg-color="white"
               :readonly="!edit || statusCheck === 'NEW'"
-              dense
+              @update:model-value="
-              ref="leaveStartDateRef"
+                (formDataOrdination.leaveEndDate = null), fetchCheck()
-              hide-bottom-space
-              class="full-width datepicker"
-              :model-value="
-                formDataOrdination.leaveStartDate != null
-                  ? date2Thai(formDataOrdination.leaveStartDate)
-                  : null
               "
-              :label="`${'ลาตั้งแต่วันที่'}`"
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
             >
-              <template v-slot:prepend>
+              <template #year="{ year }">
-                <q-icon
+                {{ year + 543 }}
-                  name="event"
-                  class="cursor-pointer"
-                  style="color: var(--q-primary)"
-                >
-                </q-icon>
               </template>
-            </q-input>
+              <template #year-overlay-value="{ value }">
-          </template>
+                {{ parseInt(value + 543) }}
-        </datepicker>
+              </template>
-
+              <template #trigger>
-        <datepicker
+                <q-input
-          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+                  outlined
-          menu-class-name="modalfix"
+                  dense
-          v-model="formDataOrdination.leaveEndDate"
+                  ref="leaveStartDateRef"
-          :locale="'th'"
+                  for="leaveStartDateRef"
-          autoApply
+                  hide-bottom-space
-          borderless
+                  bg-color="white"
-          @update:model-value="updateLeaveTotal, fetchCheck()"
+                  :readonly="!edit || statusCheck === 'NEW'"
-          :readonly="
+                  class="full-width datepicker"
-            !formDataOrdination.leaveStartDate || statusCheck === 'NEW'
+                  :model-value="
-          "
+                    formDataOrdination.leaveStartDate != null
-          :enableTimePicker="false"
+                      ? date2Thai(formDataOrdination.leaveStartDate)
-          :min-date="formDataOrdination.leaveStartDate"
+                      : null
-          week-start="0"
+                  "
-        >
+                  :label="`${'วันที่เริ่มต้น'}`"
-          <template #year="{ year }">
+                  :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
-            {{ year + 543 }}
+                >
-          </template>
+                  <template v-slot:prepend>
-          <template #year-overlay-value="{ value }">
+                    <q-icon
-            {{ parseInt(value + 543) }}
+                      name="event"
-          </template>
+                      class="cursor-pointer"
-          <template #trigger>
+                      style="color: var(--q-primary)"
-            <q-input
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+            <q-select
               outlined
               dense
-              ref="leaveEndDateRef"
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
               bg-color="white"
-              hide-bottom-space
+              v-model="formDataOrdination.leaveRange"
-              class="full-width datepicker"
+              :options="dataStore.rangeOptions"
-              :model-value="
+              emit-value
-                formDataOrdination.leaveEndDate != null
+              map-options
-                  ? date2Thai(formDataOrdination.leaveEndDate)
+              option-value="id"
-                  : null
+              option-label="name"
-              "
+              @update:model-value="fetchCheck()"
-              :label="`${'ลาถึงวันที่'}`"
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-              :readonly="
-                !formDataOrdination.leaveStartDate || statusCheck === 'NEW'
-              "
             >
               <template v-slot:prepend>
                 <q-icon
-                  name="event"
+                  name="mdi-clock-outline"
-                  class="cursor-pointer"
                   style="color: var(--q-primary)"
-                >
+                />
-                </q-icon>
               </template>
-            </q-input>
+            </q-select>
-          </template>
+          </div>
-        </datepicker>
+        </div>
-        <q-input
+        <div class="col-12">
-          :bottom-slots="!isLeave ? true : false"
+          <div class="row q-col-gutter-sm">
-          :color="!isLeave ? 'red' : 'black'"
+            <datepicker
-          :bg-color="!isLeave ? 'red-2' : 'white'"
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-          :border-color="!isLeave ? 'red' : 'gray'"
+              menu-class-name="modalfix"
-          :input-class="!isLeave ? dateEndInputStyle : ''"
+              v-model="formDataOrdination.leaveEndDate"
-          class="col-12 col-md-2 col-sm-6"
+              :locale="'th'"
-          dense
+              autoApply
-          outlined
+              hide-bottom-space
-          ref="leaveTotalRef"
+              @update:model-value="fetchCheck()"
-          for="leaveTotalRef"
+              borderless
-          v-model="formDataOrdination.leaveTotal"
+              :enableTimePicker="false"
-          label="จำนวนวันที่ลา"
+              week-start="0"
-          readonly
+              :min-date="formDataOrdination.leaveStartDate"
-        >
+            >
-          <template v-slot:hint>
+              <template #year="{ year }">
-            <span style="color: red">
+                {{ year + 543 }}
-              {{ !isLeave ? reasonLeave : "" }}
+              </template>
-            </span>
+              <template #year-overlay-value="{ value }">
-          </template>
+                {{ parseInt(value + 543) }}
-        </q-input>
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  dense
+                  ref="leaveEndDateRef"
+                  for="leaveEndDateRef"
+                  hide-bottom-space
+                  bg-color="white"
+                  class="full-width datepicker"
+                  :model-value="
+                    formDataOrdination.leaveEndDate != null
+                      ? date2Thai(formDataOrdination.leaveEndDate)
+                      : null
+                  "
+                  :label="`${'วันที่สิ้นสุด'}`"
+                  :rules="[(val:string) => !!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-select
+              v-if="!checkDate"
+              outlined
+              dense
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+              bg-color="white"
+              v-model="formDataOrdination.leaveRangeEnd"
+              :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
+              emit-value
+              map-options
+              option-value="id"
+              option-label="name"
+              @update:model-value="fetchCheck()"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="mdi-clock-outline"
+                  style="color: var(--q-primary)"
+                />
+              </template>
+            </q-select>
+          </div>
+        </div>
 
         <div class="full-width">
           <div class="q-col-gutter-sm row">
+            <q-input
+              :bottom-slots="!isLeave ? true : false"
+              :color="!isLeave ? 'red' : 'black'"
+              :bg-color="!isLeave ? 'red-2' : 'white'"
+              :border-color="!isLeave ? 'red' : 'gray'"
+              :input-class="!isLeave ? dateEndInputStyle : ''"
+              class="col-12 col-md-4 col-sm-6"
+              dense
+              outlined
+              ref="leaveTotalRef"
+              for="leaveTotalRef"
+              v-model="leaveText"
+              label="จำนวนวันที่ลา"
+              readonly
+            >
+              <template v-slot:hint>
+                <span style="color: red">
+                  {{ !isLeave ? reasonLeave : "" }}
+                </span>
+              </template>
+            </q-input>
             <datepicker
               class="col-12 col-md-4 col-sm-6"
               menu-class-name="modalfix"
@@ -497,7 +604,7 @@ onMounted(() => {
           <q-radio
             v-model="formDataOrdination.ordainDayStatus"
             :disable="!edit || statusCheck === 'NEW'"
-            :val="'true'"
+            :val="true"
             label="เคยบวช"
             checked-icon="task_alt "
             hide-bottom-space
@@ -505,7 +612,7 @@ onMounted(() => {
           <q-radio
             v-model="formDataOrdination.ordainDayStatus"
             :disable="!edit || statusCheck === 'NEW'"
-            :val="'false'"
+            :val="false"
             label="ไม่เคยบวช"
             checked-icon="task_alt"
             hide-bottom-space
@@ -581,7 +688,7 @@ onMounted(() => {
           dense
           full-width
           outlined
-          v-model="dataStore.telephoneNumber"
+          v-model="formDataOrdination.ordainDayLocationNumber"
           bg-color="white"
           mask="(###)-###-####"
           lazy-rules

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

@@ -13,10 +13,19 @@ import type { HajiForm } from "@/modules/05_leave/interface/request/AddAbsence";
 const dataStore = useLeaveStore();
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { date2Thai, calculateDurationYmd, messageError, dateToISO,convertDateToAPI } = mixin;
+const {
+  date2Thai,
+  calculateDurationYmd,
+  messageError,
+  dateToISO,
+  convertDateToAPI,
+  showLoader,
+  hideLoader,
+} = mixin;
 
 const edit = ref<boolean>(true);
 const leaveId = ref<any>("");
+const leaveText = ref<string>("");
 
 /** ตัวแปร ref สำหรับแสดง validate */
 const leaveWroteRef = ref<object | null>(null);
@@ -56,6 +65,8 @@ const formDataHaji = reactive<any>({
   hajjDayStatus: true,
   leaveDocument: [],
   leaveDetail: "",
+  leaveRange: "ALL",
+  leaveRangeEnd: "ALL",
 });
 
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
@@ -99,16 +110,18 @@ function onValidate() {
     formData.append("type", formDataHaji.type);
     formData.append(
       "leaveStartDate",
-      convertDateToAPI(formDataHaji.leaveStartDate)??''
+      convertDateToAPI(formDataHaji.leaveStartDate) ?? ""
     );
     formData.append(
       "leaveEndDate",
-      convertDateToAPI(formDataHaji.leaveEndDate)??''
+      convertDateToAPI(formDataHaji.leaveEndDate) ?? ""
     );
     formData.append("hajjDayStatus", formDataHaji.hajjDayStatus);
     formData.append("leaveWrote", formDataHaji.leaveWrote);
     formData.append("leaveDetail", formDataHaji.leaveDetail);
     formData.append("leaveTotal", formDataHaji.leaveTotal);
+    formData.append("leaveRange", formDataHaji.leaveRange);
+    formData.append("leaveRangeEnd", formDataHaji.leaveRangeEnd);
     props.onSubmit(formData, isLeave.value);
   }
 }
@@ -119,24 +132,46 @@ function onValidate() {
  */
 const isLeave = ref<boolean>(true);
 const reasonLeave = ref<string>("");
+
+const checkDate = computed(() => {
+  if (
+    convertDateToAPI(formDataHaji.leaveEndDate) ==
+    convertDateToAPI(formDataHaji.leaveStartDate)
+  ) {
+    return true;
+  } else {
+    return false;
+  }
+});
+
 async function fetchCheck() {
+  showLoader();
   await http
     .post(config.API.leaveCheck(), {
       type: dataStore.typeId ?? null,
       StartLeaveDate: convertDateToAPI(formDataHaji.leaveStartDate) ?? null,
       EndLeaveDate: convertDateToAPI(formDataHaji.leaveEndDate) ?? null,
+      leaveRange: formDataHaji.leaveRange,
+      leaveRangeEnd: checkDate.value
+        ? formDataHaji.leaveRange
+        : formDataHaji.leaveRangeEnd,
     })
     .then((res: any) => {
       const data = res.data.result;
       isLeave.value = data.isLeave;
       formDataHaji.leaveTotal = data.totalDate;
-
+      leaveText.value = calculateDurationYmd(
+        formDataHaji.leaveStartDate,
+        formDataHaji.leaveEndDate
+      );
       reasonLeave.value = data.message
         ? data.message
         : "จำนวนวันลาเกินที่กำหนด";
+      hideLoader();
     })
     .catch((e: any) => {
       messageError($q, e);
+      hideLoader();
     });
 }
 
@@ -159,7 +194,7 @@ const dateEndInputStyle = computed(() => {
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 const leaveDocumentList = ref<any>();
 const statusCheck = ref<any>("");
-watch(props.data, () => {
+watch(props.data, async () => {
   if (props.data) {
     formDataHaji.leaveWrote = props.data.leaveWrote;
     formDataHaji.leaveTotal = props.data.leaveTotal;
@@ -168,14 +203,21 @@ watch(props.data, () => {
     formDataHaji.totalLeave = props.data.totalLeave;
     formDataHaji.hajjDayStatus = props.data.hajjDayStatus;
     formDataHaji.leaveDetail = props.data.leaveDetail;
+    formDataHaji.leaveRangeEnd = props.data.leaveRangeEnd;
+    formDataHaji.leaveRange = props.data.leaveRange;
     leaveDocumentList.value = props.data.leaveDocument;
     statusCheck.value = props.data.status;
+    const leaveTotal = await calculateDurationYmd(
+      props.data.leaveStartDate,
+      props.data.leaveEndDate
+    );
+    leaveText.value = leaveTotal;
     formDataHaji.leaveDocument = [];
   }
 });
 
 /**Hook */
-onMounted(() => {
+onMounted(async () => {
   if (props.data) {
     formDataHaji.leaveWrote = props.data.leaveWrote;
     formDataHaji.leaveTotal = props.data.leaveTotal;
@@ -185,6 +227,14 @@ onMounted(() => {
     formDataHaji.hajjDayStatus = props.data.hajjDayStatus;
     formDataHaji.leaveDetail = props.data.leaveDetail;
     leaveDocumentList.value = props.data.leaveDocument;
+    formDataHaji.leaveRange = props.data.leaveRange;
+    formDataHaji.leaveRangeEnd = props.data.leaveRangeEnd;
+    const leaveTotal = await calculateDurationYmd(
+      props.data.leaveStartDate,
+      props.data.leaveEndDate
+    );
+    leaveText.value = leaveTotal;
+
     statusCheck.value = props.data.status;
     // formDataHaji.leaveDocument = props.data.leaveDocument;
     leaveId.value = props.data.id;
@@ -213,19 +263,22 @@ onMounted(() => {
           :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
         />
 
-        <div class="full-width">
+        <div class="col-12">
-          <div class="q-col-gutter-sm row">
+          <div class="row q-col-gutter-sm">
             <datepicker
-              v-model="formDataHaji.leaveStartDate"
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
               menu-class-name="modalfix"
-              autoApply
+              v-model="formDataHaji.leaveStartDate"
-              borderless
-              week-start="0"
-              :enableTimePicker="false"
               :locale="'th'"
+              autoApply
+              hide-bottom-space
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
               :readonly="!edit || statusCheck === 'NEW'"
-              @update:model-value="formDataHaji.leaveEndDate = null"
+              @update:model-value="
+                (formDataHaji.leaveEndDate = null), fetchCheck()
+              "
             >
               <template #year="{ year }">
                 {{ year + 543 }}
@@ -235,20 +288,21 @@ onMounted(() => {
               </template>
               <template #trigger>
                 <q-input
-                  ref="leaveStartDateRef"
-                  bg-color="white"
-                  class="full-width datepicker"
                   outlined
                   dense
+                  ref="leaveStartDateRef"
+                  for="leaveStartDateRef"
                   hide-bottom-space
-                  :label="`${'ลาตั้งแต่วันที่'}`"
+                  bg-color="white"
                   :readonly="!edit || statusCheck === 'NEW'"
-                  :rules="[(val:string) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+                  class="full-width datepicker"
                   :model-value="
                     formDataHaji.leaveStartDate != null
                       ? date2Thai(formDataHaji.leaveStartDate)
                       : null
                   "
+                  :label="`${'วันที่เริ่มต้น'}`"
+                  :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -261,18 +315,41 @@ onMounted(() => {
                 </q-input>
               </template>
             </datepicker>
-
+            <q-select
+              outlined
+              dense
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+              bg-color="white"
+              v-model="formDataHaji.leaveRange"
+              :options="dataStore.rangeOptions"
+              emit-value
+              map-options
+              option-value="id"
+              option-label="name"
+              @update:model-value="fetchCheck()"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="mdi-clock-outline"
+                  style="color: var(--q-primary)"
+                />
+              </template>
+            </q-select>
+          </div>
+        </div>
+        <div class="col-12">
+          <div class="row q-col-gutter-sm">
             <datepicker
-              v-model="formDataHaji.leaveEndDate"
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
               menu-class-name="modalfix"
-              autoApply
+              v-model="formDataHaji.leaveEndDate"
-              borderless
-              week-start="0"
-              :enableTimePicker="false"
               :locale="'th'"
-              @update:model-value="updateLeaveTotal(), fetchCheck()"
+              autoApply
-              :readonly="!formDataHaji.leaveStartDate || statusCheck === 'NEW'"
+              hide-bottom-space
+              @update:model-value="fetchCheck()"
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
               :min-date="formDataHaji.leaveStartDate"
             >
               <template #year="{ year }">
@@ -283,23 +360,20 @@ onMounted(() => {
               </template>
               <template #trigger>
                 <q-input
-                  ref="leaveEndDateRef"
-                  class="full-width datepicker"
-                  bg-color="white"
                   outlined
                   dense
-                  :readonly="
+                  ref="leaveEndDateRef"
-                    !formDataHaji.leaveStartDate || statusCheck === 'NEW'
+                  for="leaveEndDateRef"
-                  "
                   hide-bottom-space
-                  :label="`${'ลาถึงวันที่'}`"
+                  bg-color="white"
+                  class="full-width datepicker"
                   :model-value="
                     formDataHaji.leaveEndDate != null
                       ? date2Thai(formDataHaji.leaveEndDate)
                       : null
                   "
-                  :rules="[(val:string) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+                  :label="`${'วันที่สิ้นสุด'}`"
-                  @update:model-value="fetchCheck()"
+                  :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -312,19 +386,44 @@ onMounted(() => {
                 </q-input>
               </template>
             </datepicker>
+            <q-select
+              v-if="!checkDate"
+              outlined
+              dense
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+              bg-color="white"
+              v-model="formDataHaji.leaveRangeEnd"
+              :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
+              emit-value
+              map-options
+              option-value="id"
+              option-label="name"
+              @update:model-value="fetchCheck()"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="mdi-clock-outline"
+                  style="color: var(--q-primary)"
+                />
+              </template>
+            </q-select>
+          </div>
+        </div>
 
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
             <q-input
               :bottom-slots="!isLeave ? true : false"
               :color="!isLeave ? 'red' : 'black'"
               :bg-color="!isLeave ? 'red-2' : 'white'"
               :border-color="!isLeave ? 'red' : 'gray'"
               :input-class="!isLeave ? dateEndInputStyle : ''"
-              class="col-12 col-md-2 col-sm-6"
+              class="col-12 col-md-3 col-sm-6"
               dense
               outlined
               ref="leaveTotalRef"
               for="leaveTotalRef"
-              v-model="formDataHaji.leaveTotal"
+              v-model="leaveText"
               label="จำนวนวันที่ลา"
               readonly
             >
@@ -334,9 +433,8 @@ onMounted(() => {
                 </span>
               </template>
             </q-input>
-
             <datepicker
-              class="col-12 col-md-4 col-sm-6"
+              class="col-12 col-md-3 col-sm-6"
               menu-class-name="modalfix"
               autoApply
               borderless

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

@@ -13,10 +13,18 @@ import type { MilitaryForm } from "@/modules/05_leave/interface/request/AddAbsen
 const dataStore = useLeaveStore();
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { date2Thai, calculateDurationYmd, dateToISO, messageError,convertDateToAPI } = mixin;
+const {
+  date2Thai,
+  calculateDurationYmd,
+  dateToISO,
+  messageError,
+  convertDateToAPI,
+  showLoader,
+  hideLoader,
+} = mixin;
 const edit = ref<boolean>(true);
 const leaveId = ref<string>("");
-
+const leaveText = ref<string>("");
 /** ตัวแปร ref สำหรับแสดง validate */
 const leaveStartDateRef = ref<object | null>(null);
 const leaveEndDateRef = ref<object | null>(null);
@@ -60,6 +68,8 @@ const formDataMilitary = reactive<any>({
   absentDayLocation: "",
   absentDayRegistorDate: null,
   absentDayGetIn: "",
+  leaveRange: "ALL",
+  leaveRangeEnd: "ALL",
   absentDayAt: "",
   leaveDetail: "",
 });
@@ -117,49 +127,74 @@ function onValidate() {
     formData.append("type", formDataMilitary.type);
     formData.append(
       "leaveStartDate",
-      convertDateToAPI(formDataMilitary.leaveStartDate)??''
+      convertDateToAPI(formDataMilitary.leaveStartDate) ?? ""
     );
     formData.append(
       "leaveEndDate",
-      convertDateToAPI(formDataMilitary.leaveEndDate)??''
+      convertDateToAPI(formDataMilitary.leaveEndDate) ?? ""
     );
     formData.append("absentDaySummon", formDataMilitary.absentDaySummon);
     formData.append("absentDayLocation", formDataMilitary.absentDayLocation);
     formData.append(
       "absentDayRegistorDate",
-      convertDateToAPI(formDataMilitary.absentDayRegistorDate)??''
+      convertDateToAPI(formDataMilitary.absentDayRegistorDate) ?? ""
     );
     formData.append("absentDayGetIn", formDataMilitary.absentDayGetIn);
     formData.append("absentDayAt", formDataMilitary.absentDayAt);
     formData.append("leaveWrote", formDataMilitary.leaveWrote);
     formData.append("leaveDetail", formDataMilitary.leaveDetail);
     formData.append("leaveTotal", formDataMilitary.leaveTotal);
+
+    formData.append("leaveRange", formDataMilitary.leaveRange);
+    formData.append("leaveRangeEnd", formDataMilitary.leaveRangeEnd);
     props.onSubmit(formData, isLeave.value);
   }
 }
 const reasonLeave = ref<string>("");
 
+const checkDate = computed(() => {
+  if (
+    convertDateToAPI(formDataMilitary.leaveEndDate) ==
+    convertDateToAPI(formDataMilitary.leaveStartDate)
+  ) {
+    return true;
+  } else {
+    return false;
+  }
+});
+
 /**
  * check ว่าลาได้ไหม จาก api
  * @param formData
  */
 async function fetchCheck() {
+  showLoader();
   await http
     .post(config.API.leaveCheck(), {
       type: dataStore.typeId ?? null,
       StartLeaveDate: convertDateToAPI(formDataMilitary.leaveStartDate) ?? null,
       EndLeaveDate: convertDateToAPI(formDataMilitary.leaveEndDate) ?? null,
+      leaveRange: formDataMilitary.leaveRange,
+      leaveRangeEnd: checkDate.value
+        ? formDataMilitary.leaveRange
+        : formDataMilitary.leaveRangeEnd,
     })
     .then((res: any) => {
       const data = res.data.result;
       isLeave.value = data.isLeave;
       formDataMilitary.leaveTotal = data.totalDate;
+      leaveText.value = calculateDurationYmd(
+        formDataMilitary.leaveStartDate,
+        formDataMilitary.leaveEndDate
+      );
       reasonLeave.value = data.message
         ? data.message
         : "จำนวนวันลาเกินที่กำหนด";
+      hideLoader();
     })
     .catch((e: any) => {
       messageError($q, e);
+      hideLoader();
     });
 }
 
@@ -174,7 +209,7 @@ function updateLeaveTotal() {
   formDataMilitary.leaveTotal = newLeaveTotal;
 }
 
-watch(props.data, () => {
+watch(props.data, async () => {
   if (props.data) {
     formDataMilitary.leaveWrote = props.data.leaveWrote;
     formDataMilitary.leaveStartDate = props.data.leaveStartDate;
@@ -185,6 +220,13 @@ watch(props.data, () => {
     formDataMilitary.absentDayRegistorDate = props.data.absentDayRegistorDate;
     formDataMilitary.absentDayGetIn = props.data.absentDayGetIn;
     formDataMilitary.absentDayAt = props.data.absentDayAt;
+    formDataMilitary.leaveRange = props.data.leaveRange;
+    formDataMilitary.leaveRangeEnd = props.data.leaveRangeEnd;
+    const leaveTotal = await calculateDurationYmd(
+      props.data.leaveStartDate,
+      props.data.leaveEndDate
+    );
+    leaveText.value = leaveTotal;
     formDataMilitary.leaveDetail = props.data.leaveDetail;
     leaveDocumentList.value = props.data.leaveDocument;
     statusCheck.value = props.data.status;
@@ -193,7 +235,7 @@ watch(props.data, () => {
 });
 
 /**Hook */
-onMounted(() => {
+onMounted(async () => {
   if (props.data) {
     formDataMilitary.leaveWrote = props.data.leaveWrote;
     formDataMilitary.leaveStartDate = props.data.leaveStartDate;
@@ -205,6 +247,14 @@ onMounted(() => {
     formDataMilitary.absentDayGetIn = props.data.absentDayGetIn;
     formDataMilitary.absentDayAt = props.data.absentDayAt;
     formDataMilitary.leaveDetail = props.data.leaveDetail;
+
+    formDataMilitary.leaveRange = props.data.leaveRange;
+    formDataMilitary.leaveRangeEnd = props.data.leaveRangeEnd;
+    const leaveTotal = await calculateDurationYmd(
+      props.data.leaveStartDate,
+      props.data.leaveEndDate
+    );
+    leaveText.value = leaveTotal;
     leaveDocumentList.value = props.data.leaveDocument;
     statusCheck.value = props.data.status;
     leaveId.value = props.data.id;
@@ -233,127 +283,176 @@ onMounted(() => {
           :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
         />
 
-        <datepicker
+        <div class="col-12">
-          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+          <div class="row q-col-gutter-sm">
-          menu-class-name="modalfix"
+            <datepicker
-          v-model="formDataMilitary.leaveStartDate"
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-          :locale="'th'"
+              menu-class-name="modalfix"
-          autoApply
+              v-model="formDataMilitary.leaveStartDate"
-          borderless
+              :locale="'th'"
-          :enableTimePicker="false"
+              autoApply
-          week-start="0"
-          :readonly="!edit || statusCheck === 'NEW'"
-          @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
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
               :readonly="!edit || statusCheck === 'NEW'"
-              class="full-width datepicker"
+              @update:model-value="
-              :model-value="
+                (formDataMilitary.leaveEndDate = null), fetchCheck()
-                formDataMilitary.leaveStartDate != null
-                  ? date2Thai(formDataMilitary.leaveStartDate)
-                  : null
               "
-              :label="`${'ลาตั้งแต่วันที่'}`"
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
             >
-              <template v-slot:prepend>
+              <template #year="{ year }">
-                <q-icon
+                {{ year + 543 }}
-                  name="event"
-                  class="cursor-pointer"
-                  style="color: var(--q-primary)"
-                >
-                </q-icon>
               </template>
-            </q-input>
+              <template #year-overlay-value="{ value }">
-          </template>
+                {{ parseInt(value + 543) }}
-        </datepicker>
+              </template>
-
+              <template #trigger>
-        <datepicker
+                <q-input
-          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+                  outlined
-          menu-class-name="modalfix"
+                  dense
-          v-model="formDataMilitary.leaveEndDate"
+                  ref="leaveStartDateRef"
-          :locale="'th'"
+                  for="leaveStartDateRef"
-          autoApply
+                  hide-bottom-space
-          borderless
+                  bg-color="white"
-          :enableTimePicker="false"
+                  :readonly="!edit || statusCheck === 'NEW'"
-          week-start="0"
+                  class="full-width datepicker"
-          @update:model-value="updateLeaveTotal, fetchCheck()"
+                  :model-value="
-          :readonly="!formDataMilitary.leaveStartDate || statusCheck === 'NEW'"
+                    formDataMilitary.leaveStartDate != null
-          :min-date="formDataMilitary.leaveStartDate"
+                      ? date2Thai(formDataMilitary.leaveStartDate)
-        >
+                      : null
-          <template #year="{ year }">
+                  "
-            {{ year + 543 }}
+                  :label="`${'วันที่เริ่มต้น'}`"
-          </template>
+                  :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
-          <template #year-overlay-value="{ value }">
+                >
-            {{ parseInt(value + 543) }}
+                  <template v-slot:prepend>
-          </template>
+                    <q-icon
-          <template #trigger>
+                      name="event"
-            <q-input
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+            <q-select
               outlined
               dense
-              ref="leaveEndDateRef"
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
               bg-color="white"
-              hide-bottom-space
+              v-model="formDataMilitary.leaveRange"
-              :readonly="
+              :options="dataStore.rangeOptions"
-                !formDataMilitary.leaveStartDate || statusCheck === 'NEW'
+              emit-value
-              "
+              map-options
-              class="full-width datepicker"
+              option-value="id"
-              :model-value="
+              option-label="name"
-                formDataMilitary.leaveEndDate != null
+              @update:model-value="fetchCheck()"
-                  ? date2Thai(formDataMilitary.leaveEndDate)
-                  : null
-              "
-              :label="`${'ลาถึงวันที่'}`"
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
             >
               <template v-slot:prepend>
                 <q-icon
-                  name="event"
+                  name="mdi-clock-outline"
-                  class="cursor-pointer"
                   style="color: var(--q-primary)"
-                >
+                />
-                </q-icon>
               </template>
-            </q-input>
+            </q-select>
-          </template>
+          </div>
-        </datepicker>
+        </div>
-
+        <div class="col-12">
-        <q-input
+          <div class="row q-col-gutter-sm">
-          :bottom-slots="!isLeave ? true : false"
+            <datepicker
-          :color="!isLeave ? 'red' : 'black'"
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-          :bg-color="!isLeave ? 'red-2' : 'white'"
+              menu-class-name="modalfix"
-          :border-color="!isLeave ? 'red' : 'gray'"
+              v-model="formDataMilitary.leaveEndDate"
-          :input-class="!isLeave ? dateEndInputStyle : ''"
+              :locale="'th'"
-          class="col-12 col-md-2 col-sm-6"
+              autoApply
-          dense
+              hide-bottom-space
-          outlined
+              @update:model-value="fetchCheck()"
-          ref="leaveTotalRef"
+              borderless
-          for="leaveTotalRef"
+              :enableTimePicker="false"
-          v-model="formDataMilitary.leaveTotal"
+              week-start="0"
-          label="จำนวนวันที่ลา"
+              :min-date="formDataMilitary.leaveStartDate"
-          readonly
+            >
-        >
+              <template #year="{ year }">
-          <template v-slot:hint>
+                {{ year + 543 }}
-            <span style="color: red">
+              </template>
-              {{ !isLeave ? reasonLeave : "" }}
+              <template #year-overlay-value="{ value }">
-            </span>
+                {{ parseInt(value + 543) }}
-          </template>
+              </template>
-        </q-input>
+              <template #trigger>
+                <q-input
+                  outlined
+                  dense
+                  ref="leaveEndDateRef"
+                  for="leaveEndDateRef"
+                  hide-bottom-space
+                  bg-color="white"
+                  class="full-width datepicker"
+                  :model-value="
+                    formDataMilitary.leaveEndDate != null
+                      ? date2Thai(formDataMilitary.leaveEndDate)
+                      : null
+                  "
+                  :label="`${'วันที่สิ้นสุด'}`"
+                  :rules="[(val:string) => !!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-select
+              v-if="!checkDate"
+              outlined
+              dense
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+              bg-color="white"
+              v-model="formDataMilitary.leaveRangeEnd"
+              :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
+              emit-value
+              map-options
+              option-value="id"
+              option-label="name"
+              @update:model-value="fetchCheck()"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="mdi-clock-outline"
+                  style="color: var(--q-primary)"
+                />
+              </template>
+            </q-select>
+          </div>
+        </div>
 
         <div class="full-width">
           <div class="q-col-gutter-sm row">
+            <q-input
+              :bottom-slots="!isLeave ? true : false"
+              :color="!isLeave ? 'red' : 'black'"
+              :bg-color="!isLeave ? 'red-2' : 'white'"
+              :border-color="!isLeave ? 'red' : 'gray'"
+              :input-class="!isLeave ? dateEndInputStyle : ''"
+              class="col-12 col-md-4 col-sm-6"
+              dense
+              outlined
+              ref="leaveTotalRef"
+              for="leaveTotalRef"
+              v-model="leaveText"
+              label="จำนวนวันที่ลา"
+              readonly
+            >
+              <template v-slot:hint>
+                <span style="color: red">
+                  {{ !isLeave ? reasonLeave : "" }}
+                </span>
+              </template>
+            </q-input>
             <q-input
               ref="absentDaySummonRef"
               class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"

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

@@ -19,9 +19,12 @@ const {
   dateToISO,
   messageError,
   arabicNumberToText,
-  convertDateToAPI
+  convertDateToAPI,
+  showLoader,
+  hideLoader,
 } = mixin;
 
+const leaveText = ref<string>("");
 const edit = ref<boolean>(true);
 const leaveId = ref<string>("");
 const leaveStartDateRef = ref<object | null>(null);
@@ -76,6 +79,8 @@ const formDataStudy = reactive<any>({
   leaveDocument: [], //
   leaveDetail: "",
   leaveTotal: "",
+  leaveRange: "ALL",
+  leaveRangeEnd: "ALL",
   leaveTotalDay: "", //จำนวนวันลา
 });
 
@@ -133,11 +138,11 @@ function onValidate() {
     formData.append("type", formDataStudy.type); //
     formData.append(
       "leaveStartDate",
-      convertDateToAPI(formDataStudy.leaveStartDate)??''
+      convertDateToAPI(formDataStudy.leaveStartDate) ?? ""
     );
     formData.append(
       "leaveEndDate",
-      convertDateToAPI(formDataStudy.leaveEndDate)??''
+      convertDateToAPI(formDataStudy.leaveEndDate) ?? ""
     );
     formData.append("studyDaySubject", formDataStudy.studyDaySubject);
     formData.append("studyDayDegreeLevel", formDataStudy.studyDayDegreeLevel);
@@ -155,30 +160,56 @@ function onValidate() {
     formData.append("studyDayScholarship", formDataStudy.studyDayScholarship);
     formData.append("leaveAddress", dataStore.currentAddress); //
     formData.append("leaveNumber", dataStore.telephoneNumber); //
-    formData.append("leaveTotal", formDataStudy.leaveTotalDay); //
+    formData.append("leaveTotal", formDataStudy.leaveTotal); //
+
+    formData.append("leaveRange", formDataStudy.leaveRange);
+    formData.append("leaveRangeEnd", formDataStudy.leaveRangeEnd);
+
     props.onSubmit(formData, isLeave.value);
   }
 }
 
 const reasonLeave = ref<string>("");
 
+const checkDate = computed(() => {
+  if (
+    convertDateToAPI(formDataStudy.leaveEndDate) ==
+    convertDateToAPI(formDataStudy.leaveStartDate)
+  ) {
+    return true;
+  } else {
+    return false;
+  }
+});
+
 async function fetchCheck() {
+  showLoader();
   await http
     .post(config.API.leaveCheck(), {
       type: dataStore.typeId ?? null,
       StartLeaveDate: convertDateToAPI(formDataStudy.leaveStartDate) ?? null,
       EndLeaveDate: convertDateToAPI(formDataStudy.leaveEndDate) ?? null,
+      leaveRange: formDataStudy.leaveRange,
+      leaveRangeEnd: checkDate.value
+        ? formDataStudy.leaveRange
+        : formDataStudy.leaveRangeEnd,
     })
     .then((res: any) => {
       const data = res.data.result;
       isLeave.value = data.isLeave;
-      formDataStudy.leaveTotalDay = data.totalDate;
+      formDataStudy.leaveTotal = data.totalDate;
+      leaveText.value = calculateDurationYmd(
+        formDataStudy.leaveStartDate,
+        formDataStudy.leaveEndDate
+      );
       reasonLeave.value = data.message
         ? data.message
         : "จำนวนวันลาเกินที่กำหนด";
+      hideLoader();
     })
     .catch((e: any) => {
       messageError($q, e);
+      hideLoader();
     });
 }
 
@@ -211,13 +242,15 @@ watch(props.data, async () => {
     formDataStudy.studyDayDegreeLevel = props.data.studyDayDegreeLevel;
     formDataStudy.studyDaySubject = props.data.studyDaySubject;
     formDataStudy.leaveDetail = props.data.leaveDetail;
+    formDataStudy.leaveRange = props.data.leaveRange;
+    formDataStudy.leaveRangeEnd = props.data.leaveRangeEnd;
     formDataStudy.leaveDocument = [];
     leaveDocumentList.value = props.data.leaveDocument;
     const leaveTotal = await calculateDurationYmd(
       props.data.leaveStartDate,
       props.data.leaveEndDate
     );
-    formDataStudy.leaveTotal = leaveTotal;
+    leaveText.value = leaveTotal;
     statusCheck.value = props.data.status;
   }
 });
@@ -228,7 +261,6 @@ onMounted(async () => {
     formDataStudy.leaveWrote = props.data.leaveWrote;
     formDataStudy.leaveStartDate = props.data.leaveStartDate;
     formDataStudy.leaveEndDate = props.data.leaveEndDate;
-    formDataStudy.leaveTotal = props.data.leaveTotal;
     formDataStudy.leavebirthDate = props.data.leavebirthDate;
     formDataStudy.leavegovernmentDate = props.data.leavegovernmentDate;
     formDataStudy.leaveSalary = props.data.leaveSalary;
@@ -240,12 +272,18 @@ onMounted(async () => {
     formDataStudy.studyDayDegreeLevel = props.data.studyDayDegreeLevel;
     formDataStudy.studyDaySubject = props.data.studyDaySubject;
     formDataStudy.leaveDetail = props.data.leaveDetail;
+
+    formDataStudy.leaveRange = props.data.leaveRange;
+    formDataStudy.leaveRangeEnd = props.data.leaveRangeEnd;
+
     leaveDocumentList.value = props.data.leaveDocument;
+    formDataStudy.leaveTotal = props.data.leaveTotal;
+
     const leaveTotal = await calculateDurationYmd(
       props.data.leaveStartDate,
       props.data.leaveEndDate
     );
-    formDataStudy.leaveTotal = leaveTotal;
+    leaveText.value = leaveTotal;
     statusCheck.value = props.data.status;
     leaveId.value = props.data.id;
   }
@@ -273,127 +311,176 @@ onMounted(async () => {
           :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
         />
 
-        <datepicker
+        <div class="col-12">
-          v-model="formDataStudy.leaveStartDate"
+          <div class="row q-col-gutter-sm">
-          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+            <datepicker
-          menu-class-name="modalfix"
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-          autoApply
+              menu-class-name="modalfix"
-          borderless
+              v-model="formDataStudy.leaveStartDate"
-          week-start="0"
+              :locale="'th'"
-          :enableTimePicker="false"
+              autoApply
-          :locale="'th'"
+              hide-bottom-space
-          :readonly="!edit || statusCheck === 'NEW'"
+              borderless
-          @update:model-value="formDataStudy.leaveEndDate = null"
+              :enableTimePicker="false"
-        >
+              week-start="0"
-          <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
               :readonly="!edit || statusCheck === 'NEW'"
-              hide-bottom-space
+              @update:model-value="
-              :label="`${'ลาตั้งแต่วันที่'}`"
+                (formDataStudy.leaveEndDate = null), fetchCheck()
-              :model-value="
-                formDataStudy.leaveStartDate != null
-                  ? date2Thai(formDataStudy.leaveStartDate)
-                  : null
               "
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
             >
-              <template v-slot:prepend>
+              <template #year="{ year }">
-                <q-icon
+                {{ year + 543 }}
-                  name="event"
-                  class="cursor-pointer"
-                  style="color: var(--q-primary)"
-                >
-                </q-icon>
               </template>
-            </q-input>
+              <template #year-overlay-value="{ value }">
-          </template>
+                {{ parseInt(value + 543) }}
-        </datepicker>
+              </template>
-
+              <template #trigger>
-        <datepicker
+                <q-input
-          v-model="formDataStudy.leaveEndDate"
+                  outlined
-          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+                  dense
-          menu-class-name="modalfix"
+                  ref="leaveStartDateRef"
-          autoApply
+                  for="leaveStartDateRef"
-          borderless
+                  hide-bottom-space
-          week-start="0"
+                  bg-color="white"
-          :locale="'th'"
+                  :readonly="!edit || statusCheck === 'NEW'"
-          @update:model-value="updateLeaveTotal(), fetchCheck()"
+                  class="full-width datepicker"
-          :readonly="!formDataStudy.leaveStartDate || statusCheck === 'NEW'"
+                  :model-value="
-          :enableTimePicker="false"
+                    formDataStudy.leaveStartDate != null
-          :min-date="formDataStudy.leaveStartDate"
+                      ? date2Thai(formDataStudy.leaveStartDate)
-        >
+                      : null
-          <template #year="{ year }">
+                  "
-            {{ year + 543 }}
+                  :label="`${'วันที่เริ่มต้น'}`"
-          </template>
+                  :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
-          <template #year-overlay-value="{ value }">
+                >
-            {{ parseInt(value + 543) }}
+                  <template v-slot:prepend>
-          </template>
+                    <q-icon
-          <template #trigger>
+                      name="event"
-            <q-input
+                      class="cursor-pointer"
-              ref="leaveEndDateRef"
+                      style="color: var(--q-primary)"
-              class="full-width datepicker"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+            <q-select
               outlined
               dense
-              lazy-rules
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
               bg-color="white"
-              hide-bottom-space
+              v-model="formDataStudy.leaveRange"
-              :label="`${'ลาถึงวันที่'}`"
+              :options="dataStore.rangeOptions"
-              :readonly="!formDataStudy.leaveStartDate || statusCheck === 'NEW'"
+              emit-value
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+              map-options
-              :model-value="
+              option-value="id"
-                formDataStudy.leaveEndDate != null
+              option-label="name"
-                  ? date2Thai(formDataStudy.leaveEndDate)
+              @update:model-value="fetchCheck()"
-                  : null
-              "
             >
               <template v-slot:prepend>
                 <q-icon
-                  name="event"
+                  name="mdi-clock-outline"
-                  class="cursor-pointer"
                   style="color: var(--q-primary)"
-                >
+                />
-                </q-icon>
               </template>
-            </q-input>
+            </q-select>
-          </template>
+          </div>
-        </datepicker>
+        </div>
-
+        <div class="col-12">
-        <q-input
+          <div class="row q-col-gutter-sm">
-          :bottom-slots="!isLeave ? true : false"
+            <datepicker
-          :color="!isLeave ? 'red' : 'black'"
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-          :bg-color="!isLeave ? 'red-2' : 'white'"
+              menu-class-name="modalfix"
-          :border-color="!isLeave ? 'red' : 'gray'"
+              v-model="formDataStudy.leaveEndDate"
-          :input-class="!isLeave ? dateEndInputStyle : ''"
+              :locale="'th'"
-          class="col-12 col-md-2 col-sm-6"
+              autoApply
-          dense
+              hide-bottom-space
-          outlined
+              @update:model-value="fetchCheck()"
-          ref="leaveTotalRef"
+              borderless
-          for="leaveTotalRef"
+              :enableTimePicker="false"
-          v-model="formDataStudy.leaveTotal"
+              week-start="0"
-          label="มีกำหนด"
+              :min-date="formDataStudy.leaveStartDate"
-          readonly
+            >
-        >
+              <template #year="{ year }">
-          <template v-slot:hint>
+                {{ year + 543 }}
-            <span style="color: red">
+              </template>
-              {{ !isLeave ? reasonLeave : "" }}
+              <template #year-overlay-value="{ value }">
-            </span>
+                {{ parseInt(value + 543) }}
-          </template>
+              </template>
-        </q-input>
+              <template #trigger>
+                <q-input
+                  outlined
+                  dense
+                  ref="leaveEndDateRef"
+                  for="leaveEndDateRef"
+                  hide-bottom-space
+                  bg-color="white"
+                  class="full-width datepicker"
+                  :model-value="
+                    formDataStudy.leaveEndDate != null
+                      ? date2Thai(formDataStudy.leaveEndDate)
+                      : null
+                  "
+                  :label="`${'วันที่สิ้นสุด'}`"
+                  :rules="[(val:string) => !!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-select
+              v-if="!checkDate"
+              outlined
+              dense
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+              bg-color="white"
+              v-model="formDataStudy.leaveRangeEnd"
+              :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
+              emit-value
+              map-options
+              option-value="id"
+              option-label="name"
+              @update:model-value="fetchCheck()"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="mdi-clock-outline"
+                  style="color: var(--q-primary)"
+                />
+              </template>
+            </q-select>
+          </div>
+        </div>
 
         <div class="full-width">
           <div class="q-col-gutter-sm row">
+            <q-input
+              :bottom-slots="!isLeave ? true : false"
+              :color="!isLeave ? 'red' : 'black'"
+              :bg-color="!isLeave ? 'red-2' : 'white'"
+              :border-color="!isLeave ? 'red' : 'gray'"
+              :input-class="!isLeave ? dateEndInputStyle : ''"
+              class="col-12 col-md-3 col-sm-6"
+              dense
+              outlined
+              ref="leaveTotalRef"
+              for="leaveTotalRef"
+              v-model="leaveText"
+              label="มีกำหนด"
+              readonly
+            >
+              <template v-slot:hint>
+                <span style="color: red">
+                  {{ !isLeave ? reasonLeave : "" }}
+                </span>
+              </template>
+            </q-input>
             <datepicker
               class="col-12 col-md-3 col-sm-6"
               menu-class-name="modalfix"

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

@@ -19,9 +19,12 @@ const {
   calculateDurationYmd,
   dateToISO,
   messageError,
-  convertDateToAPI
+  convertDateToAPI,
+  showLoader,
+  hideLoader,
 } = mixin;
 
+const leaveText = ref<string>("");
 const edit = ref<boolean>(true);
 const leaveId = ref<any>("");
 
@@ -58,6 +61,8 @@ const formDataTrain = reactive<any>({
   studyDayScholarship: "",
   studyDayCountry: "",
   studyDayTrainingSubject: "",
+  leaveRange: "ALL",
+  leaveRangeEnd: "ALL",
   studyDayTrainingName: "",
   leaveDocument: [],
   leaveDetail: "",
@@ -123,11 +128,11 @@ function onValidate() {
     formData.append("type", formDataTrain.type); //
     formData.append(
       "leaveStartDate",
-      convertDateToAPI(formDataTrain.leaveStartDate)??''
+      convertDateToAPI(formDataTrain.leaveStartDate) ?? ""
     ); //
     formData.append(
       "leaveEndDate",
-      convertDateToAPI(formDataTrain.leaveEndDate)??''
+      convertDateToAPI(formDataTrain.leaveEndDate) ?? ""
     ); //
     formData.append("studyDayCountry", formDataTrain.studyDayCountry);
     formData.append("studyDayTrainingName", formDataTrain.studyDayTrainingName);
@@ -142,31 +147,55 @@ function onValidate() {
     formData.append("leaveNumber", dataStore.telephoneNumber); //
     formData.append("leaveSalaryText", formDataTrain.leaveSalaryText); //
     formData.append("leaveSalary", formDataTrain.leaveSalary); //
-    formData.append("leaveTotal", formDataTrain.leaveTotalDay); //
+    formData.append("leaveTotal", formDataTrain.leaveTotal); //
+
+    formData.append("leaveRange", formDataTrain.leaveRange);
+    formData.append("leaveRangeEnd", formDataTrain.leaveRangeEnd);
     props.onSubmit(formData, isLeave.value);
   }
 }
 
 const reasonLeave = ref<string>("");
 
+const checkDate = computed(() => {
+  if (
+    convertDateToAPI(formDataTrain.leaveEndDate) ==
+    convertDateToAPI(formDataTrain.leaveStartDate)
+  ) {
+    return true;
+  } else {
+    return false;
+  }
+});
+
 async function fetchCheck() {
+  showLoader();
   await http
     .post(config.API.leaveCheck(), {
       type: dataStore.typeId ?? null,
       StartLeaveDate: convertDateToAPI(formDataTrain.leaveStartDate) ?? null,
       EndLeaveDate: convertDateToAPI(formDataTrain.leaveEndDate) ?? null,
+      leaveRange: formDataTrain.leaveRange,
+      leaveRangeEnd: checkDate.value
+        ? formDataTrain.leaveRange
+        : formDataTrain.leaveRangeEnd,
     })
     .then((res: any) => {
       const data = res.data.result;
       isLeave.value = data.isLeave;
       formDataTrain.leaveTotalDay = data.totalDate;
-
+      leaveText.value = calculateDurationYmd(
+        formDataTrain.leaveStartDate,
+        formDataTrain.leaveEndDate
+      );
       reasonLeave.value = data.message
         ? data.message
         : "จำนวนวันลาเกินที่กำหนด";
+      hideLoader();
     })
     .catch((e: any) => {
       messageError($q, e);
+      hideLoader();
     });
 }
 
@@ -196,12 +225,14 @@ watch(props.data, async () => {
     formDataTrain.studyDayTrainingSubject = props.data.studyDayTrainingSubject;
     formDataTrain.studyDayTrainingName = props.data.studyDayTrainingName;
     formDataTrain.leaveDetail = props.data.leaveDetail;
+    formDataTrain.leaveRange = props.data.leaveRange;
+    formDataTrain.leaveRangeEnd = props.data.leaveRangeEnd;
     formDataTrain.leaveDocument = [];
     const leaveTotal = await calculateDurationYmd(
       props.data.leaveStartDate,
       props.data.leaveEndDate
     );
-    formDataTrain.leaveTotal = leaveTotal;
+    leaveText.value = leaveTotal;
     leaveDocumentList.value = props.data.leaveDocument;
     statusCheck.value = props.data.status;
   }
@@ -221,6 +252,10 @@ onMounted(async () => {
     formDataTrain.studyDayScholarship = props.data.studyDayScholarship;
     formDataTrain.studyDayCountry = props.data.studyDayCountry;
     formDataTrain.studyDayTrainingSubject = props.data.studyDayTrainingSubject;
+
+    formDataTrain.leaveRange = props.data.leaveRange;
+    formDataTrain.leaveRangeEnd = props.data.leaveRangeEnd;
+
     formDataTrain.studyDayTrainingName = props.data.studyDayTrainingName;
     formDataTrain.leaveDetail = props.data.leaveDetail;
     // formDataTrain.leaveDocument = props.data.leaveDocument;
@@ -228,7 +263,7 @@ onMounted(async () => {
       props.data.leaveStartDate,
       props.data.leaveEndDate
     );
-    formDataTrain.leaveTotal = leaveTotal;
+    leaveText.value = leaveTotal;
     leaveDocumentList.value = props.data.leaveDocument;
     statusCheck.value = props.data.status;
     leaveId.value = props.data.id;
@@ -257,127 +292,176 @@ onMounted(async () => {
           :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
         />
 
-        <datepicker
+        <div class="col-12">
-          v-model="formDataTrain.leaveStartDate"
+          <div class="row q-col-gutter-sm">
-          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+            <datepicker
-          menu-class-name="modalfix"
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-          autoApply
+              menu-class-name="modalfix"
-          borderless
+              v-model="formDataTrain.leaveStartDate"
-          week-start="0"
+              :locale="'th'"
-          :enableTimePicker="false"
+              autoApply
-          :locale="'th'"
-          :readonly="!edit || statusCheck === 'NEW'"
-          @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
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
               :readonly="!edit || statusCheck === 'NEW'"
-              :label="`${'ลาตั้งแต่วันที่'}`"
+              @update:model-value="
-              :model-value="
+                (formDataTrain.leaveEndDate = null), fetchCheck()
-                formDataTrain.leaveStartDate != null
-                  ? date2Thai(formDataTrain.leaveStartDate)
-                  : null
               "
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
             >
-              <template v-slot:prepend>
+              <template #year="{ year }">
-                <q-icon
+                {{ year + 543 }}
-                  name="event"
-                  class="cursor-pointer"
-                  style="color: var(--q-primary)"
-                >
-                </q-icon>
               </template>
-            </q-input>
+              <template #year-overlay-value="{ value }">
-          </template>
+                {{ parseInt(value + 543) }}
-        </datepicker>
+              </template>
-
+              <template #trigger>
-        <datepicker
+                <q-input
-          v-model="formDataTrain.leaveEndDate"
+                  outlined
-          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+                  dense
-          menu-class-name="modalfix"
+                  ref="leaveStartDateRef"
-          autoApply
+                  for="leaveStartDateRef"
-          borderless
+                  hide-bottom-space
-          @update:model-value="updateLeaveTotal(), fetchCheck()"
+                  bg-color="white"
-          week-start="0"
+                  :readonly="!edit || statusCheck === 'NEW'"
-          :readonly="!formDataTrain.leaveStartDate || statusCheck === 'NEW'"
+                  class="full-width datepicker"
-          :locale="'th'"
+                  :model-value="
-          :enableTimePicker="false"
+                    formDataTrain.leaveStartDate != null
-          :min-date="formDataTrain.leaveStartDate"
+                      ? date2Thai(formDataTrain.leaveStartDate)
-        >
+                      : null
-          <template #year="{ year }">
+                  "
-            {{ year + 543 }}
+                  :label="`${'วันที่เริ่มต้น'}`"
-          </template>
+                  :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
-          <template #year-overlay-value="{ value }">
+                >
-            {{ parseInt(value + 543) }}
+                  <template v-slot:prepend>
-          </template>
+                    <q-icon
-          <template #trigger>
+                      name="event"
-            <q-input
+                      class="cursor-pointer"
-              ref="leaveEndDateRef"
+                      style="color: var(--q-primary)"
-              class="full-width datepicker"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+            <q-select
               outlined
               dense
-              lazy-rules
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
               bg-color="white"
-              hide-bottom-space
+              v-model="formDataTrain.leaveRange"
-              :label="`${'ลาถึงวันที่'}`"
+              :options="dataStore.rangeOptions"
-              :readonly="!formDataTrain.leaveStartDate || statusCheck === 'NEW'"
+              emit-value
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+              map-options
-              :model-value="
+              option-value="id"
-                formDataTrain.leaveEndDate != null
+              option-label="name"
-                  ? date2Thai(formDataTrain.leaveEndDate)
+              @update:model-value="fetchCheck()"
-                  : null
-              "
             >
               <template v-slot:prepend>
                 <q-icon
-                  name="event"
+                  name="mdi-clock-outline"
-                  class="cursor-pointer"
                   style="color: var(--q-primary)"
-                >
+                />
-                </q-icon>
               </template>
-            </q-input>
+            </q-select>
-          </template>
+          </div>
-        </datepicker>
+        </div>
-
+        <div class="col-12">
-        <q-input
+          <div class="row q-col-gutter-sm">
-          class="col-12 col-md-2 col-sm-6"
+            <datepicker
-          dense
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-          outlined
+              menu-class-name="modalfix"
-          ref="leaveTotalRef"
+              v-model="formDataTrain.leaveEndDate"
-          for="leaveTotalRef"
+              :locale="'th'"
-          v-model="formDataTrain.leaveTotal"
+              autoApply
-          label="มีกำหนด"
+              hide-bottom-space
-          readonly
+              @update:model-value="fetchCheck()"
-          :bottom-slots="!isLeave ? true : false"
+              borderless
-          :color="!isLeave ? 'red' : 'black'"
+              :enableTimePicker="false"
-          :bg-color="!isLeave ? 'red-2' : 'white'"
+              week-start="0"
-          :border-color="!isLeave ? 'red' : 'gray'"
+              :min-date="formDataTrain.leaveStartDate"
-          :input-class="!isLeave ? dateEndInputStyle : ''"
+            >
-        >
+              <template #year="{ year }">
-          <template v-slot:hint>
+                {{ year + 543 }}
-            <span style="color: red">
+              </template>
-              {{ !isLeave ? reasonLeave : "" }}
+              <template #year-overlay-value="{ value }">
-            </span>
+                {{ parseInt(value + 543) }}
-          </template>
+              </template>
-        </q-input>
+              <template #trigger>
+                <q-input
+                  outlined
+                  dense
+                  ref="leaveEndDateRef"
+                  for="leaveEndDateRef"
+                  hide-bottom-space
+                  bg-color="white"
+                  class="full-width datepicker"
+                  :model-value="
+                    formDataTrain.leaveEndDate != null
+                      ? date2Thai(formDataTrain.leaveEndDate)
+                      : null
+                  "
+                  :label="`${'วันที่สิ้นสุด'}`"
+                  :rules="[(val:string) => !!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-select
+              v-if="!checkDate"
+              outlined
+              dense
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+              bg-color="white"
+              v-model="formDataTrain.leaveRangeEnd"
+              :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
+              emit-value
+              map-options
+              option-value="id"
+              option-label="name"
+              @update:model-value="fetchCheck()"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="mdi-clock-outline"
+                  style="color: var(--q-primary)"
+                />
+              </template>
+            </q-select>
+          </div>
+        </div>
 
         <div class="full-width">
           <div class="q-col-gutter-sm row">
+            <q-input
+              :bottom-slots="!isLeave ? true : false"
+              :color="!isLeave ? 'red' : 'black'"
+              :bg-color="!isLeave ? 'red-2' : 'white'"
+              :border-color="!isLeave ? 'red' : 'gray'"
+              :input-class="!isLeave ? dateEndInputStyle : ''"
+              class="col-12 col-md-3 col-sm-6"
+              dense
+              outlined
+              ref="leaveTotalRef"
+              for="leaveTotalRef"
+              v-model="leaveText"
+              label="มีกำหนด"
+              readonly
+            >
+              <template v-slot:hint>
+                <span style="color: red">
+                  {{ !isLeave ? reasonLeave : "" }}
+                </span>
+              </template>
+            </q-input>
             <datepicker
               v-model="formDataTrain.leavegovernmentDate"
               class="col-12 col-md-3 col-sm-6"

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

@@ -15,7 +15,14 @@ import type { FormRef } from "@/modules/05_leave/interface/request/WorkInternati
 const $q = useQuasar();
 const dataStore = useLeaveStore();
 const mixin = useCounterMixin();
-const { date2Thai, dateToISO, messageError, showLoader, hideLoader,convertDateToAPI } = mixin;
+const {
+  date2Thai,
+  dateToISO,
+  messageError,
+  showLoader,
+  hideLoader,
+  convertDateToAPI,
+} = mixin;
 
 const edit = ref<boolean>(true);
 const isSave = ref<boolean>(false);
@@ -48,6 +55,8 @@ const formDataWorkInternational = reactive<any>({
   leaveStartDate: null,
   leaveEndDate: null,
   leaveDetail: "",
+  leaveRange: "ALL",
+  leaveRangeEnd: "ALL",
   leaveDocument: [],
   leaveDraftDocument: null,
 });
@@ -109,15 +118,19 @@ async function onValidate() {
     formData.append("type", formDataWorkInternational.type); //
     formData.append(
       "leaveStartDate",
-      convertDateToAPI(formDataWorkInternational.leaveStartDate)??''
+      convertDateToAPI(formDataWorkInternational.leaveStartDate) ?? ""
     ); //
     formData.append(
       "leaveEndDate",
-      convertDateToAPI(formDataWorkInternational.leaveEndDate)??''
+      convertDateToAPI(formDataWorkInternational.leaveEndDate) ?? ""
     ); //
     formData.append("leaveWrote", formDataWorkInternational.leaveWrote); //
     formData.append("leaveDetail", formDataWorkInternational.leaveDetail);
     formData.append("leaveTotal", formDataWorkInternational.leaveTotal); //
+
+    formData.append("leaveRange", formDataWorkInternational.leaveRange);
+    formData.append("leaveRangeEnd", formDataWorkInternational.leaveRangeEnd);
+
     await props.onSubmit(formData, isLeave.value);
   }
 }
@@ -141,6 +154,17 @@ async function onClickDownloadFile(id: string, fileName: string) {
 
 const reasonLeave = ref<string>("");
 
+const checkDate = computed(() => {
+  if (
+    convertDateToAPI(formDataWorkInternational.leaveEndDate) ==
+    convertDateToAPI(formDataWorkInternational.leaveStartDate)
+  ) {
+    return true;
+  } else {
+    return false;
+  }
+});
+
 /**
  * check ว่าลาได้ไหม จาก api
  * @param formData
@@ -150,14 +174,19 @@ async function fetchCheck() {
   await http
     .post(config.API.leaveCheck(), {
       type: dataStore.typeId ?? null,
-      StartLeaveDate: convertDateToAPI(formDataWorkInternational.leaveStartDate) ?? null,
+      StartLeaveDate:
-      EndLeaveDate: convertDateToAPI(formDataWorkInternational.leaveEndDate) ?? null,
+        convertDateToAPI(formDataWorkInternational.leaveStartDate) ?? null,
+      EndLeaveDate:
+        convertDateToAPI(formDataWorkInternational.leaveEndDate) ?? null,
+      leaveRange: formDataWorkInternational.leaveRange,
+      leaveRangeEnd: checkDate.value
+        ? formDataWorkInternational.leaveRange
+        : formDataWorkInternational.leaveRangeEnd,
     })
     .then((res: any) => {
       const data = res.data.result;
       isLeave.value = data.isLeave;
       formDataWorkInternational.leaveTotal = data.totalDate;
-
       reasonLeave.value = data.message
         ? data.message
         : "จำนวนวันลาเกินที่กำหนด";
@@ -186,6 +215,9 @@ watch(props, () => {
     formDataWorkInternational.leaveEndDate = new Date(props.data.leaveEndDate);
     formDataWorkInternational.leaveDetail = props.data.leaveDetail;
     leaveDraftDocument.value = props.data.leaveDraftDocument;
+    formDataWorkInternational.leaveRange = props.data.leaveRange;
+    formDataWorkInternational.leaveRangeEnd = props.data.leaveRangeEnd;
+    formDataWorkInternational.leaveTotal = props.data.leaveTotal;
     leaveDocumentList.value = props.data.leaveDocument;
     statusCheck.value = props.data.status;
     formDataWorkInternational.leaveDraftDocument = null;
@@ -209,6 +241,11 @@ watch(
 onMounted(() => {
   if (props.data) {
     formDataWorkInternational.leaveWrote = props.data.leaveWrote;
+
+    formDataWorkInternational.leaveRange = props.data.leaveRange;
+    formDataWorkInternational.leaveRangeEnd = props.data.leaveRangeEnd;
+    formDataWorkInternational.leaveTotal = props.data.leaveTotal;
+
     formDataWorkInternational.leaveStartDate = new Date(
       props.data.leaveStartDate
     );
@@ -244,114 +281,173 @@ onMounted(() => {
           :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
         />
 
-        <datepicker
+        <div class="col-12">
-          class="col-12 col-md-6 col-sm-6 cursor-pointer inputgreen"
+          <div class="row q-col-gutter-sm">
-          menu-class-name="modalfix"
+            <datepicker
-          v-model="formDataWorkInternational.leaveStartDate"
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-          :locale="'th'"
+              menu-class-name="modalfix"
-          hide-bottom-space
+              v-model="formDataWorkInternational.leaveStartDate"
-          autoApply
+              :locale="'th'"
-          borderless
+              autoApply
-          :enableTimePicker="false"
+              hide-bottom-space
-          week-start="0"
+              borderless
-          :readonly="!edit || statusCheck === 'NEW'"
+              :enableTimePicker="false"
-          @update:model-value="formDataWorkInternational.leaveEndDate = null"
+              week-start="0"
-        >
+              :readonly="!edit || statusCheck === 'NEW'"
-          <template #year="{ year }">
+              @update:model-value="
-            {{ year + 543 }}
+                (formDataWorkInternational.leaveEndDate = null), fetchCheck()
-          </template>
+              "
-          <template #year-overlay-value="{ value }">
+            >
-            {{ parseInt(value + 543) }}
+              <template #year="{ year }">
-          </template>
+                {{ year + 543 }}
-          <template #trigger>
+              </template>
-            <q-input
+              <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 || statusCheck === 'NEW'"
+                  class="full-width datepicker"
+                  :model-value="
+                    formDataWorkInternational.leaveStartDate != null
+                      ? date2Thai(formDataWorkInternational.leaveStartDate)
+                      : null
+                  "
+                  :label="`${'วันที่เริ่มต้น'}`"
+                  :rules="[(val:string) => !!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-select
               outlined
               dense
-              ref="leaveStartDateRef"
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              for="leaveStartDateRef"
-              hide-bottom-space
               bg-color="white"
-              :readonly="!edit || statusCheck === 'NEW'"
+              v-model="formDataWorkInternational.leaveRange"
-              class="full-width datepicker"
+              :options="dataStore.rangeOptions"
-              :model-value="
+              emit-value
-                formDataWorkInternational.leaveStartDate != null
+              map-options
-                  ? date2Thai(formDataWorkInternational.leaveStartDate)
+              option-value="id"
-                  : null
+              option-label="name"
-              "
+              @update:model-value="fetchCheck()"
-              :label="`${'ลาตั้งแต่วันที่'}`"
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
             >
               <template v-slot:prepend>
                 <q-icon
-                  name="event"
+                  name="mdi-clock-outline"
-                  class="cursor-pointer"
                   style="color: var(--q-primary)"
-                >
+                />
-                </q-icon>
               </template>
-            </q-input>
+            </q-select>
-          </template>
+          </div>
-        </datepicker>
+        </div>
-
+        <div class="col-12">
-        <datepicker
+          <div class="row q-col-gutter-sm">
-          :class="!isLeave ? dateEndInputStyle : ''"
+            <datepicker
-          class="col-12 col-md-6 col-sm-6 cursor-pointer"
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-          menu-class-name="modalfix"
+              menu-class-name="modalfix"
-          v-model="formDataWorkInternational.leaveEndDate"
+              v-model="formDataWorkInternational.leaveEndDate"
-          :locale="'th'"
+              :locale="'th'"
-          autoApply
+              autoApply
-          hide-bottom-space
+              hide-bottom-space
-          borderless
+              @update:model-value="fetchCheck()"
-          :enableTimePicker="false"
+              borderless
-          week-start="0"
+              :enableTimePicker="false"
-          :readonly="
+              week-start="0"
-            !formDataWorkInternational.leaveStartDate || statusCheck === 'NEW'
+              :min-date="formDataWorkInternational.leaveStartDate"
-          "
+            >
-          :min-date="formDataWorkInternational.leaveStartDate"
+              <template #year="{ year }">
-        >
+                {{ year + 543 }}
-          <template #year="{ year }">
+              </template>
-            {{ year + 543 }}
+              <template #year-overlay-value="{ value }">
-          </template>
+                {{ parseInt(value + 543) }}
-          <template #year-overlay-value="{ value }">
+              </template>
-            {{ parseInt(value + 543) }}
+              <template #trigger>
-          </template>
+                <q-input
-          <template #trigger>
+                  outlined
-            <q-input
+                  dense
+                  ref="leaveEndDateRef"
+                  for="leaveEndDateRef"
+                  hide-bottom-space
+                  bg-color="white"
+                  class="full-width datepicker"
+                  :model-value="
+                    formDataWorkInternational.leaveEndDate != null
+                      ? date2Thai(formDataWorkInternational.leaveEndDate)
+                      : null
+                  "
+                  :label="`${'วันที่สิ้นสุด'}`"
+                  :rules="[(val:string) => !!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-select
               outlined
               dense
-              ref="leaveEndDateRef"
+              v-if="!checkDate"
-              for="leaveEndDateRef"
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              :readonly="
+              bg-color="white"
-                !formDataWorkInternational.leaveStartDate ||
+              v-model="formDataWorkInternational.leaveRangeEnd"
-                statusCheck === 'NEW'
+              :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
-              "
+              emit-value
-              class="full-width datepicker"
+              map-options
-              :model-value="
+              option-value="id"
-                formDataWorkInternational.leaveEndDate != null
+              option-label="name"
-                  ? date2Thai(formDataWorkInternational.leaveEndDate)
+              @update:model-value="fetchCheck()"
-                  : null
+            >
-              "
+              <template v-slot:prepend>
-              :label="`${'ลาถึงวันที่'}`"
+                <q-icon
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+                  name="mdi-clock-outline"
+                  style="color: var(--q-primary)"
+                />
+              </template>
+            </q-select>
+            <q-input
               :bottom-slots="!isLeave ? true : false"
               :color="!isLeave ? 'red' : 'black'"
               :bg-color="!isLeave ? 'red-2' : 'white'"
               :border-color="!isLeave ? 'red' : 'gray'"
               :input-class="!isLeave ? dateEndInputStyle : ''"
+              class="col-12 col-md-3 col-sm-6"
+              dense
+              outlined
+              ref="leaveTotalRef"
+              for="leaveTotalRef"
+              v-model="formDataWorkInternational.leaveTotal"
+              label="เป็นเวลา"
+              readonly
             >
-              <template v-slot:prepend>
-                <q-icon name="event" class="cursor-pointer" color="primary">
-                </q-icon>
-              </template>
-
               <template v-slot:hint>
                 <span style="color: red">
                   {{ !isLeave ? reasonLeave : "" }}
                 </span>
               </template>
             </q-input>
-          </template>
+          </div>
-        </datepicker>
+        </div>
         <q-input
           hide-bottom-space
           type="textarea"

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

@@ -21,9 +21,24 @@ const {
   dateToISO,
   messageError,
   convertDateToAPI,
+  showLoader,
+  hideLoader,
 } = mixin;
+
+const leaveText = ref<string>("");
+const leaveHistoryText = ref<string>("");
 const edit = ref<boolean>(true);
 const leaveId = ref<string>("");
+const checkDate = computed(() => {
+  if (
+    convertDateToAPI(formDataFollowSpouse.leaveEndDate) ==
+    convertDateToAPI(formDataFollowSpouse.leaveStartDate)
+  ) {
+    return true;
+  } else {
+    return false;
+  }
+});
 
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
@@ -54,6 +69,8 @@ const formDataFollowSpouse = reactive<any>({
   leaveTotal: "", //จำนวนวันลา
   leaveTotalDay: "", //จำนวนวันลา
   leaveSalaryText: "",
+  leaveRange: "ALL",
+  leaveRangeEnd: "ALL",
   leaveSalary: 0, //เงินเดือนปัจจุบัน
   coupleDayName: "", //ชื่อคู่สมรส
   coupleDayPosition: "", //ตำแหน่งคู่สมรส
@@ -173,7 +190,10 @@ function onValidate() {
       formDataFollowSpouse.coupleDayPosition
     ); //
     formData.append("coupleDayName", formDataFollowSpouse.coupleDayName); //
-    formData.append("leaveTotal", formDataFollowSpouse.leaveTotalDay); //
+    formData.append("leaveTotal", formDataFollowSpouse.leaveTotal); //
+
+    formData.append("leaveRange", formDataFollowSpouse.leaveRange);
+    formData.append("leaveRangeEnd", formDataFollowSpouse.leaveRangeEnd);
     props.onSubmit(formData, isLeave.value);
   }
 }
@@ -186,23 +206,34 @@ const reasonLeave = ref<string>("");
  */
 const isLeave = ref<boolean>(true);
 async function fetchCheck() {
+  showLoader();
   await http
     .post(config.API.leaveCheck(), {
       type: dataStore.typeId ?? null,
       StartLeaveDate:
         convertDateToAPI(formDataFollowSpouse.leaveStartDate) ?? null,
       EndLeaveDate: convertDateToAPI(formDataFollowSpouse.leaveEndDate) ?? null,
+      leaveRange: formDataFollowSpouse.leaveRange,
+      leaveRangeEnd: checkDate.value
+        ? formDataFollowSpouse.leaveRange
+        : formDataFollowSpouse.leaveRangeEnd,
     })
     .then((res: any) => {
       const data = res.data.result;
       isLeave.value = data.isLeave;
       formDataFollowSpouse.leaveTotalDay = data.totalDate;
+      leaveText.value = calculateDurationYmd(
+        formDataFollowSpouse.leaveStartDate,
+        formDataFollowSpouse.leaveEndDate
+      );
       reasonLeave.value = data.message
         ? data.message
         : "จำนวนวันลาเกินที่กำหนด";
+      hideLoader();
     })
     .catch((e: any) => {
       messageError($q, e);
+      hideLoader();
     });
 }
 
@@ -250,6 +281,8 @@ watch(props.data, async () => {
     formDataFollowSpouse.coupleDayName = props.data.coupleDayName;
     formDataFollowSpouse.coupleDayPosition = props.data.coupleDayPosition;
     formDataFollowSpouse.coupleDayLevel = props.data.coupleDayLevel;
+    formDataFollowSpouse.leaveRange = props.data.leaveRange;
+    formDataFollowSpouse.leaveRangeEnd = props.data.leaveRangeEnd;
     formDataFollowSpouse.coupleDayLevelCountry =
       props.data.coupleDayLevelCountry;
     formDataFollowSpouse.coupleDayCountryHistory =
@@ -266,7 +299,8 @@ watch(props.data, async () => {
       props.data.leaveStartDate,
       props.data.leaveEndDate
     );
-    formDataFollowSpouse.leaveTotal = leaveTotal;
+    leaveText.value = leaveTotal;
+
     const coupleDayTotalHistory = await calculateDurationYmd(
       props.data.coupleDayStartDateHistory,
       props.data.coupleDayEndDateHistory
@@ -285,6 +319,9 @@ onMounted(async () => {
     formDataFollowSpouse.leaveEndDate = new Date(props.data.leaveEndDate);
     formDataFollowSpouse.leaveDetail = props.data.leaveDetail;
     formDataFollowSpouse.leaveTotal = props.data.leaveTotal;
+    formDataFollowSpouse.leaveRange = props.data.leaveRange;
+    formDataFollowSpouse.leaveRangeEnd = props.data.leaveRangeEnd;
+
     formDataFollowSpouse.leaveSalaryText = props.data.leaveSalaryText;
     formDataFollowSpouse.leaveSalary = props.data.leaveSalary;
     formDataFollowSpouse.coupleDayName = props.data.coupleDayName;
@@ -306,7 +343,8 @@ onMounted(async () => {
       props.data.leaveStartDate,
       props.data.leaveEndDate
     );
-    formDataFollowSpouse.leaveTotal = leaveTotal;
+    leaveText.value = leaveTotal;
+
     const coupleDayTotalHistory = await calculateDurationYmd(
       props.data.coupleDayStartDateHistory,
       props.data.coupleDayEndDateHistory
@@ -339,131 +377,175 @@ onMounted(async () => {
           :readonly="!edit || statusCheck === 'NEW'"
           :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
         />
-        <datepicker
+        <div class="col-12">
-          class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
+          <div class="row q-col-gutter-sm">
-          menu-class-name="modalfix"
+            <datepicker
-          v-model="formDataFollowSpouse.leaveStartDate"
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-          :locale="'th'"
+              menu-class-name="modalfix"
-          autoApply
+              v-model="formDataFollowSpouse.leaveStartDate"
-          hide-bottom-space
+              :locale="'th'"
-          borderless
+              autoApply
-          :enableTimePicker="false"
-          week-start="0"
-          :readonly="!edit || statusCheck === 'NEW'"
-          @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"
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
               :readonly="!edit || statusCheck === 'NEW'"
-              class="full-width datepicker"
+              @update:model-value="
-              :model-value="
+                (formDataFollowSpouse.leaveEndDate = null), fetchCheck()
-                formDataFollowSpouse.leaveStartDate != null
-                  ? date2Thai(formDataFollowSpouse.leaveStartDate)
-                  : null
               "
-              :label="`${'ลาตั้งแต่วันที่'}`"
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
             >
-              <template v-slot:prepend>
+              <template #year="{ year }">
-                <q-icon
+                {{ year + 543 }}
-                  name="event"
-                  class="cursor-pointer"
-                  style="color: var(--q-primary)"
-                >
-                </q-icon>
               </template>
-            </q-input>
+              <template #year-overlay-value="{ value }">
-          </template>
+                {{ parseInt(value + 543) }}
-        </datepicker>
+              </template>
-
+              <template #trigger>
-        <datepicker
+                <q-input
-          class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
+                  outlined
-          menu-class-name="modalfix"
+                  dense
-          v-model="formDataFollowSpouse.leaveEndDate"
+                  ref="leaveStartDateRef"
-          :locale="'th'"
+                  for="leaveStartDateRef"
-          autoApply
+                  hide-bottom-space
-          borderless
+                  bg-color="white"
-          hide-bottom-space
+                  :readonly="!edit || statusCheck === 'NEW'"
-          :enableTimePicker="false"
+                  class="full-width datepicker"
-          week-start="0"
+                  :model-value="
-          @update:model-value="updateLeaveTotal(), fetchCheck()"
+                    formDataFollowSpouse.leaveStartDate != null
-          :readonly="
+                      ? date2Thai(formDataFollowSpouse.leaveStartDate)
-            !formDataFollowSpouse.leaveStartDate || statusCheck === 'NEW'
+                      : null
-          "
+                  "
-          :min-date="formDataFollowSpouse.leaveStartDate"
+                  :label="`${'วันที่เริ่มต้น'}`"
-        >
+                  :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
-          <template #year="{ year }">
+                >
-            {{ year + 543 }}
+                  <template v-slot:prepend>
-          </template>
+                    <q-icon
-          <template #year-overlay-value="{ value }">
+                      name="event"
-            {{ parseInt(value + 543) }}
+                      class="cursor-pointer"
-          </template>
+                      style="color: var(--q-primary)"
-          <template #trigger>
+                    >
-            <q-input
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+            <q-select
               outlined
               dense
-              ref="leaveEndDateRef"
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              for="leaveEndDateRef"
-              hide-bottom-space
               bg-color="white"
-              :readonly="
+              v-model="formDataFollowSpouse.leaveRange"
-                !formDataFollowSpouse.leaveStartDate || statusCheck === 'NEW'
+              :options="dataStore.rangeOptions"
-              "
+              emit-value
-              class="full-width datepicker"
+              map-options
-              :model-value="
+              option-value="id"
-                formDataFollowSpouse.leaveEndDate != null
+              option-label="name"
-                  ? date2Thai(formDataFollowSpouse.leaveEndDate)
+              @update:model-value="fetchCheck()"
-                  : null
-              "
-              :label="`${'ลาถึงวันที่'}`"
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
             >
               <template v-slot:prepend>
                 <q-icon
-                  name="event"
+                  name="mdi-clock-outline"
-                  class="cursor-pointer"
                   style="color: var(--q-primary)"
-                >
+                />
-                </q-icon>
               </template>
-            </q-input>
+            </q-select>
-          </template>
+          </div>
-        </datepicker>
+        </div>
-        <q-input
+        <div class="col-12">
-          :bottom-slots="!isLeave ? true : false"
+          <div class="row q-col-gutter-sm">
-          :color="!isLeave ? 'red' : 'black'"
+            <datepicker
-          :bg-color="!isLeave ? 'red-2' : 'white'"
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-          :border-color="!isLeave ? 'red' : 'gray'"
+              menu-class-name="modalfix"
-          :input-class="!isLeave ? dateEndInputStyle : ''"
+              v-model="formDataFollowSpouse.leaveEndDate"
-          class="col-12 col-md-2 col-sm-6"
+              :locale="'th'"
-          dense
+              autoApply
-          outlined
+              hide-bottom-space
-          ref="leaveTotalRef"
+              @update:model-value="fetchCheck()"
-          for="leaveTotalRef"
+              borderless
-          v-model="formDataFollowSpouse.leaveTotal"
+              :enableTimePicker="false"
-          label="เป็นเวลา"
+              week-start="0"
-          readonly
+              :min-date="formDataFollowSpouse.leaveStartDate"
-        >
+            >
-          <template v-slot:hint>
+              <template #year="{ year }">
-            <span style="color: red">
+                {{ year + 543 }}
-              {{ !isLeave ? reasonLeave : "" }}
+              </template>
-            </span>
+              <template #year-overlay-value="{ value }">
-          </template>
+                {{ parseInt(value + 543) }}
-        </q-input>
+              </template>
-
+              <template #trigger>
-        <div class="col-12 col-md-6 col-sm-12">
+                <q-input
+                  outlined
+                  dense
+                  ref="leaveEndDateRef"
+                  for="leaveEndDateRef"
+                  hide-bottom-space
+                  bg-color="white"
+                  class="full-width datepicker"
+                  :model-value="
+                    formDataFollowSpouse.leaveEndDate != null
+                      ? date2Thai(formDataFollowSpouse.leaveEndDate)
+                      : null
+                  "
+                  :label="`${'วันที่สิ้นสุด'}`"
+                  :rules="[(val:string) => !!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-select
+              v-if="!checkDate"
+              outlined
+              dense
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+              bg-color="white"
+              v-model="formDataFollowSpouse.leaveRangeEnd"
+              :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
+              emit-value
+              map-options
+              option-value="id"
+              option-label="name"
+              @update:model-value="fetchCheck()"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="mdi-clock-outline"
+                  style="color: var(--q-primary)"
+                />
+              </template>
+            </q-select>
+          </div>
+        </div>
+        <div class="col-12 col-md-4 col-sm-12">
+          <q-input
+            :bottom-slots="!isLeave ? true : false"
+            :color="!isLeave ? 'red' : 'black'"
+            :bg-color="!isLeave ? 'red-2' : 'white'"
+            :border-color="!isLeave ? 'red' : 'gray'"
+            :input-class="!isLeave ? dateEndInputStyle : ''"
+            dense
+            outlined
+            ref="leaveTotalRef"
+            for="leaveTotalRef"
+            v-model="leaveText"
+            label="เป็นเวลา"
+            readonly
+          >
+            <template v-slot:hint>
+              <span style="color: red">
+                {{ !isLeave ? reasonLeave : "" }}
+              </span>
+            </template>
+          </q-input>
+        </div>
+        <div class="col-12 col-md-4 col-sm-12">
           <q-input
             hide-bottom-space
             bg-color="white"
@@ -477,7 +559,7 @@ onMounted(async () => {
             readonly
           />
         </div>
-        <div class="col-12 col-md-6 col-sm-12">
+        <div class="col-12 col-md-4 col-sm-12">
           <q-input
             hide-bottom-space
             bg-color="white"
@@ -555,6 +637,7 @@ onMounted(async () => {
         <div class="text-weight-bold text-dark col-12">
           ประวัติการลาติดตามคู่สมรสครั้งสุดท้าย
         </div>
+
         <datepicker
           class="col-12 col-md-3 col-sm-12 inputgreen"
           menu-class-name="modalfix"
@@ -612,6 +695,7 @@ onMounted(async () => {
           borderless
           :enableTimePicker="false"
           :readonly="!edit || statusCheck === 'NEW'"
+          :min-date="formDataFollowSpouse.coupleDayStartDateHistory"
           week-start="0"
           @update:model-value="updateLeaveHistoryTotal()"
         >

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

@@ -56,6 +56,8 @@ const formDataRehabilitation = reactive<any>({
   leaveEndDate: null,
   leaveDocument: [],
   leaveDetail: "",
+  leaveRange: "ALL",
+  leaveRangeEnd: "ALL",
   leaveDraftDocument: null,
 });
 
@@ -94,6 +96,9 @@ async function onValidate() {
   formData.append("leaveWrote", formDataRehabilitation.leaveWrote); //
   formData.append("leaveDetail", formDataRehabilitation.leaveDetail); //
   formData.append("leaveTotal", formDataRehabilitation.leaveTotal); //
+
+  formData.append("leaveRange", formDataRehabilitation.leaveRange);
+  formData.append("leaveRangeEnd", formDataRehabilitation.leaveRangeEnd);
   props.onSubmit(formData, isLeave.value);
 }
 
@@ -108,11 +113,22 @@ const fileUploadDoc = async (files: any) => {
 const reasonLeave = ref<string>("");
 const isLeave = ref<boolean>(true);
 
+const checkDate = computed(() => {
+  if (
+    convertDateToAPI(formDataRehabilitation.leaveEndDate) ==
+    convertDateToAPI(formDataRehabilitation.leaveStartDate)
+  ) {
+    return true;
+  } else {
+    return false;
+  }
+});
+
 /**
  * check ว่าลาได้ไหม จาก api
  * @param formData
  */
-async function FetchCheck() {
+async function fetchCheck() {
   showLoader();
   await http
     .post(config.API.leaveCheck(), {
@@ -121,6 +137,10 @@ async function FetchCheck() {
         convertDateToAPI(formDataRehabilitation.leaveStartDate) ?? null,
       EndLeaveDate:
         convertDateToAPI(formDataRehabilitation.leaveEndDate) ?? null,
+      leaveRange: formDataRehabilitation.leaveRange,
+      leaveRangeEnd: checkDate.value
+        ? formDataRehabilitation.leaveRange
+        : formDataRehabilitation.leaveRangeEnd,
     })
     .then((res: any) => {
       const data = res.data.result;
@@ -173,6 +193,8 @@ watch(props.data, () => {
     formDataRehabilitation.leaveDetail = props.data.leaveDetail;
     leaveDraftDocument.value = props.data.leaveDraftDocument;
     leaveDocumentList.value = props.data.leaveDocument;
+    formDataRehabilitation.leaveRange = props.data.leaveRange;
+    formDataRehabilitation.leaveRangeEnd = props.data.leaveRangeEnd;
     formDataRehabilitation.leaveDraftDocument = null;
     formDataRehabilitation.leaveDocument = [];
     statusCheck.value = props.data.status;
@@ -186,11 +208,15 @@ onMounted(() => {
     formDataRehabilitation.leaveStartDate = new Date(props.data.leaveStartDate);
     formDataRehabilitation.leaveEndDate = new Date(props.data.leaveEndDate);
     formDataRehabilitation.leaveDetail = props.data.leaveDetail;
+
+    formDataRehabilitation.leaveRange = props.data.leaveRange;
+    formDataRehabilitation.leaveRangeEnd = props.data.leaveRangeEnd;
+
     leaveDraftDocument.value = props.data.leaveDraftDocument;
     leaveDocumentList.value = props.data.leaveDocument;
     statusCheck.value = props.data.status;
     leaveId.value = props.data.id;
-    FetchCheck();
+    fetchCheck();
   }
 });
 </script>
@@ -217,130 +243,173 @@ onMounted(() => {
           :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
         />
 
-        <datepicker
+        <div class="col-12">
-          v-model="formDataRehabilitation.leaveStartDate"
+          <div class="row q-col-gutter-sm">
-          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+            <datepicker
-          menu-class-name="modalfix"
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-          autoApply
+              menu-class-name="modalfix"
-          borderless
+              v-model="formDataRehabilitation.leaveStartDate"
-          week-start="0"
+              :locale="'th'"
-          :enableTimePicker="false"
+              autoApply
-          :locale="'th'"
+              hide-bottom-space
-          :readonly="!edit || statusCheck === 'NEW'"
+              borderless
-          @update:model-value="formDataRehabilitation.leaveEndDate = null"
+              :enableTimePicker="false"
-        >
+              week-start="0"
-          <template #year="{ year }">
+              :readonly="!edit || statusCheck === 'NEW'"
-            {{ year + 543 }}
+              @update:model-value="
-          </template>
+                (formDataRehabilitation.leaveEndDate = null), fetchCheck()
-          <template #year-overlay-value="{ value }">
+              "
-            {{ parseInt(value + 543) }}
+            >
-          </template>
+              <template #year="{ year }">
-          <template #trigger>
+                {{ year + 543 }}
-            <q-input
+              </template>
-              ref="leaveStartDateRef"
+              <template #year-overlay-value="{ value }">
-              class="full-width datepicker"
+                {{ parseInt(value + 543) }}
-              bg-color="white"
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  dense
+                  ref="leaveStartDateRef"
+                  for="leaveStartDateRef"
+                  hide-bottom-space
+                  bg-color="white"
+                  :readonly="!edit || statusCheck === 'NEW'"
+                  class="full-width datepicker"
+                  :model-value="
+                    formDataRehabilitation.leaveStartDate != null
+                      ? date2Thai(formDataRehabilitation.leaveStartDate)
+                      : null
+                  "
+                  :label="`${'วันที่เริ่มต้น'}`"
+                  :rules="[(val:string) => !!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-select
               outlined
               dense
-              lazy-rules
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              hide-bottom-space
+              bg-color="white"
-              :readonly="!edit || statusCheck === 'NEW'"
+              v-model="formDataRehabilitation.leaveRange"
-              :model-value="
+              :options="dataStore.rangeOptions"
-                formDataRehabilitation.leaveStartDate != null
+              emit-value
-                  ? date2Thai(formDataRehabilitation.leaveStartDate)
+              map-options
-                  : null
+              option-value="id"
-              "
+              option-label="name"
-              :label="`${'ลาตั้งแต่วันที่'}`"
+              @update:model-value="fetchCheck()"
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
             >
               <template v-slot:prepend>
                 <q-icon
-                  name="event"
+                  name="mdi-clock-outline"
-                  class="cursor-pointer"
                   style="color: var(--q-primary)"
-                >
+                />
-                </q-icon>
               </template>
-            </q-input>
+            </q-select>
-          </template>
+          </div>
-        </datepicker>
+        </div>
-
+        <div class="col-12">
-        <datepicker
+          <div class="row q-col-gutter-sm">
-          :class="!isLeave ? dateEndInputStyle : ''"
+            <datepicker
-          v-model="formDataRehabilitation.leaveEndDate"
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+              menu-class-name="modalfix"
-          menu-class-name="modalfix"
+              v-model="formDataRehabilitation.leaveEndDate"
-          autoApply
+              :locale="'th'"
-          borderless
+              autoApply
-          week-start="0"
+              hide-bottom-space
-          :locale="'th'"
+              @update:model-value="fetchCheck()"
-          @update:model-value="FetchCheck()"
+              borderless
-          :readonly="
+              :enableTimePicker="false"
-            !formDataRehabilitation.leaveStartDate || statusCheck === 'NEW'
+              week-start="0"
-          "
+              :min-date="formDataRehabilitation.leaveStartDate"
-          :enableTimePicker="false"
+            >
-          :min-date="formDataRehabilitation.leaveStartDate"
+              <template #year="{ year }">
-        >
+                {{ year + 543 }}
-          <template #year="{ year }">
+              </template>
-            {{ year + 543 }}
+              <template #year-overlay-value="{ value }">
-          </template>
+                {{ parseInt(value + 543) }}
-          <template #year-overlay-value="{ value }">
+              </template>
-            {{ parseInt(value + 543) }}
+              <template #trigger>
-          </template>
+                <q-input
-          <template #trigger>
+                  outlined
-            <q-input
+                  dense
-              ref="leaveEndDateRef"
+                  ref="leaveEndDateRef"
-              class="full-width datepicker"
+                  for="leaveEndDateRef"
+                  hide-bottom-space
+                  bg-color="white"
+                  class="full-width datepicker"
+                  :model-value="
+                    formDataRehabilitation.leaveEndDate != null
+                      ? date2Thai(formDataRehabilitation.leaveEndDate)
+                      : null
+                  "
+                  :label="`${'วันที่สิ้นสุด'}`"
+                  :rules="[(val:string) => !!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-select
+              v-if="!checkDate"
               outlined
               dense
-              lazy-rules
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              hide-bottom-space
+              bg-color="white"
-              :readonly="
+              v-model="formDataRehabilitation.leaveRangeEnd"
-                !formDataRehabilitation.leaveStartDate || statusCheck === 'NEW'
+              :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
-              "
+              emit-value
-              :model-value="
+              map-options
-                formDataRehabilitation.leaveEndDate != null
+              option-value="id"
-                  ? date2Thai(formDataRehabilitation.leaveEndDate)
+              option-label="name"
-                  : null
+              @update:model-value="fetchCheck()"
-              "
+            >
-              :label="`${'ลาถึงวันที่'}`"
+              <template v-slot:prepend>
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+                <q-icon
+                  name="mdi-clock-outline"
+                  style="color: var(--q-primary)"
+                />
+              </template>
+            </q-select>
+            <q-input
               :bottom-slots="!isLeave ? true : false"
               :color="!isLeave ? 'red' : 'black'"
               :bg-color="!isLeave ? 'red-2' : 'white'"
               :border-color="!isLeave ? 'red' : 'gray'"
               :input-class="!isLeave ? dateEndInputStyle : ''"
+              class="col-12 col-md-2 col-sm-6"
+              dense
+              outlined
+              ref="leaveTotalRef"
+              for="leaveTotalRef"
+              v-model="formDataRehabilitation.leaveTotal"
+              label="เป็นเวลา"
+              readonly
             >
-              <template v-slot:prepend>
-                <q-icon
-                  name="event"
-                  class="cursor-pointer"
-                  style="color: var(--q-primary)"
-                >
-                </q-icon>
-              </template>
-
               <template v-slot:hint>
                 <span style="color: red">
                   {{ !isLeave ? reasonLeave : "" }}
                 </span>
               </template>
             </q-input>
-          </template>
+          </div>
-        </datepicker>
+        </div>
-
-        <q-input
-          class="col-12 col-md-4 col-sm-12"
-          dense
-          outlined
-          readonly
-          hide-bottom-space
-          bg-color="white"
-          ref="coupleDayTotalHistoryRef"
-          for="coupleDayTotalHistoryRef"
-          v-model="formDataRehabilitation.leaveTotal"
-          label="เป็นเวลา"
-        />
 
         <q-input
           v-model="formDataRehabilitation.leaveDetail"

src/modules/05_leave/components/ListView.vue

@@ -202,7 +202,7 @@ onMounted(async () => {
           :props="props"
           @click="onClickView(props.row.id, props.row.status)"
         >
-          {{ convert(props.row) }}
+          {{ props.row.leaveTypeName ? `${props.row.leaveTypeName} ${props.row.leaveSubTypeName ? `(${props.row.leaveSubTypeName})`:''}`: '-' }}
         </q-td>
         <q-td
           key="dateLeave"

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

@@ -1,4 +1,8 @@
 <script setup lang="ts">
+import { useLeaveStore } from "@/modules/05_leave/store";
+
+const store = useLeaveStore();
+const { converstType } = store;
 /**
  * รับ prop จาก component
  */
@@ -26,22 +30,16 @@ const props = defineProps({
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">ลาตั้งแต่วันที่</div>
-      <div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }}</div>
+<div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }} {{ `${props.data.leaveRange && props.data.leaveRange !== 'ALL' ? `(${converstType(props.data.leaveRange)})`:''}` }}</div>
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">ลาถึงวันที่</div>
-      <div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }}</div>
+<div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }} {{ `${props.data.leaveDateStart !== props.data.leaveDateEnd ?  `${props.data.leaveRangeEnd && props.data.leaveRangeEnd !== 'ALL' ? `(${converstType(props.data.leaveRangeEnd)})`:''}` :''}` }}</div>
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">จำนวนวันที่ลา</div>
       <div class="col-xs-12 col-md-6">
-        {{
+        {{ props.data.leaveTotal ? props.data.leaveTotal + " วัน" : "-" }}
-          props.data.leaveRange == "ALL"
-            ? props.data.leaveTotal + " วัน"
-            : props.data.leaveRange == "MORNING"
-            ? "ลาครึ่งวันเช้า (0.5)"
-            : "ลาครึ่งวันบ่าย (0.5)"
-        }}
       </div>
     </div>
     <div class="row">

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

@@ -1,4 +1,8 @@
 <script setup lang="ts">
+import { useLeaveStore } from '@/modules/05_leave/store'
+
+const store = useLeaveStore()
+const { converstType } = store
 /**
  * รับ prop จาก component
  */
@@ -25,11 +29,11 @@ const props = defineProps({
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">ลาตั้งแต่วันที่</div>
-      <div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }}</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }} {{ `${props.data.leaveRange && props.data.leaveRange !== 'ALL' ? `(${converstType(props.data.leaveRange)})`:''}` }}</div>
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">ลาถึงวันที่</div>
-      <div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }}</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }} {{ `${props.data.leaveDateStart !== props.data.leaveDateEnd ?  `${props.data.leaveRangeEnd && props.data.leaveRangeEnd !== 'ALL' ? `(${converstType(props.data.leaveRangeEnd)})`:''}` :''}` }}</div>
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">จำนวนวันที่ลา</div>

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

@@ -1,4 +1,8 @@
 <script setup lang="ts">
+import { useLeaveStore } from "@/modules/05_leave/store";
+
+const store = useLeaveStore();
+const { converstType } = store;
 /**
  * รับ prop จาก component
  */
@@ -38,22 +42,16 @@ const props = defineProps({
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">ลาตั้งแต่วันที่</div>
-      <div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }}</div>
+<div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }} {{ `${props.data.leaveRange && props.data.leaveRange !== 'ALL' ? `(${converstType(props.data.leaveRange)})`:''}` }}</div>
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">ลาถึงวันที่</div>
-      <div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }}</div>
+<div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }} {{ `${props.data.leaveDateStart !== props.data.leaveDateEnd ?  `${props.data.leaveRangeEnd && props.data.leaveRangeEnd !== 'ALL' ? `(${converstType(props.data.leaveRangeEnd)})`:''}` :''}` }}</div>
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">จำนวนวันที่ลา</div>
       <div class="col-xs-12 col-md-6">
-        {{
+        {{ props.data.leaveTotal ? props.data.leaveTotal + " วัน" : "-" }}
-          props.data.leaveRange == "ALL"
-            ? props.data.leaveTotal + " วัน"
-            : props.data.leaveRange == "MORNING"
-            ? "ลาครึ่งวันเช้า (0.5)"
-            : "ลาครึ่งวันบ่าย (0.5)"
-        }}
       </div>
     </div>
     <div class="row">

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

@@ -1,4 +1,8 @@
 <script setup lang="ts">
+import { useLeaveStore } from '@/modules/05_leave/store'
+
+const store = useLeaveStore()
+const { converstType } = store
 /**
  * รับ prop จาก component
  */
@@ -26,11 +30,11 @@ const props = defineProps({
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">ลาตั้งแต่วันที่</div>
-      <div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }}</div>
+<div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }} {{ `${props.data.leaveRange && props.data.leaveRange !== 'ALL' ? `(${converstType(props.data.leaveRange)})`:''}` }}</div>
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">ลาถึงวันที่</div>
-      <div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }}</div>
+<div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }} {{ `${props.data.leaveDateStart !== props.data.leaveDateEnd ?  `${props.data.leaveRangeEnd && props.data.leaveRangeEnd !== 'ALL' ? `(${converstType(props.data.leaveRangeEnd)})`:''}` :''}` }}</div>
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">จำนวนวันที่ลา</div>

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

@@ -1,4 +1,8 @@
 <script setup lang="ts">
+import { useLeaveStore } from '@/modules/05_leave/store'
+
+const store = useLeaveStore()
+const { converstType } = store
 /**
  * รับ prop จาก component
  */
@@ -26,11 +30,11 @@ const props = defineProps({
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">ลาตั้งแต่วันที่</div>
-      <div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }}</div>
+<div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }} {{ `${props.data.leaveRange && props.data.leaveRange !== 'ALL' ? `(${converstType(props.data.leaveRange)})`:''}` }}</div>
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">ลาถึงวันที่</div>
-      <div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }}</div>
+<div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }} {{ `${props.data.leaveDateStart !== props.data.leaveDateEnd ?  `${props.data.leaveRangeEnd && props.data.leaveRangeEnd !== 'ALL' ? `(${converstType(props.data.leaveRangeEnd)})`:''}` :''}` }}</div>
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">จำนวนวันที่ลา</div>

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

@@ -1,4 +1,8 @@
 <script setup lang="ts">
+import { useLeaveStore } from '@/modules/05_leave/store'
+
+const store = useLeaveStore()
+const { converstType } = store
 /**
  * รับ prop จาก component
  */
@@ -26,11 +30,11 @@ const props = defineProps({
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">ลาตั้งแต่วันที่</div>
-      <div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }}</div>
+<div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }} {{ `${props.data.leaveRange && props.data.leaveRange !== 'ALL' ? `(${converstType(props.data.leaveRange)})`:''}` }}</div>
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">ลาถึงวันที่</div>
-      <div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }}</div>
+<div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }} {{ `${props.data.leaveDateStart !== props.data.leaveDateEnd ?  `${props.data.leaveRangeEnd && props.data.leaveRangeEnd !== 'ALL' ? `(${converstType(props.data.leaveRangeEnd)})`:''}` :''}` }}</div>
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">จำนวนวันที่ลา</div>

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

@@ -1,4 +1,8 @@
 <script setup lang="ts">
+import { useLeaveStore } from '@/modules/05_leave/store'
+
+const store = useLeaveStore()
+const { converstType } = store
 /**
  * รับ prop จาก component
  */
@@ -18,7 +22,7 @@ const props = defineProps({
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">เรื่อง</div>
-      <div class="col-xs-12 col-md-6">{{ props.data.leaveTypeName }}</div>
+      <div class="col-xs-12 col-md-6">ลาไปศึกษาต่อ</div>
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">เขียนที่</div>
@@ -26,11 +30,11 @@ const props = defineProps({
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">ลาตั้งแต่วันที่</div>
-      <div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }}</div>
+<div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }} {{ `${props.data.leaveRange && props.data.leaveRange !== 'ALL' ? `(${converstType(props.data.leaveRange)})`:''}` }}</div>
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">ลาถึงวันที่</div>
-      <div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }}</div>
+<div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }} {{ `${props.data.leaveDateStart !== props.data.leaveDateEnd ?  `${props.data.leaveRangeEnd && props.data.leaveRangeEnd !== 'ALL' ? `(${converstType(props.data.leaveRangeEnd)})`:''}` :''}` }}</div>
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">จำนวนวันที่ลา</div>

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

@@ -1,4 +1,8 @@
 <script setup lang="ts">
+import { useLeaveStore } from '@/modules/05_leave/store'
+
+const store = useLeaveStore()
+const { converstType } = store
 /**
  * รับ prop จาก component
  */
@@ -17,7 +21,7 @@ const props = defineProps({
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">เรื่อง</div>
-      <div class="col-xs-12 col-md-6">{{ props.data.leaveTypeName }}</div>
+      <div class="col-xs-12 col-md-6">ลาฝึกอบรม/ปฎิบัติการวิจัย/ดูงาน</div>
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">เขียนที่</div>
@@ -25,11 +29,11 @@ const props = defineProps({
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">ลาตั้งแต่วันที่</div>
-      <div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }}</div>
+<div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }} {{ `${props.data.leaveRange && props.data.leaveRange !== 'ALL' ? `(${converstType(props.data.leaveRange)})`:''}` }}</div>
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">ลาถึงวันที่</div>
-      <div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }}</div>
+<div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }} {{ `${props.data.leaveDateStart !== props.data.leaveDateEnd ?  `${props.data.leaveRangeEnd && props.data.leaveRangeEnd !== 'ALL' ? `(${converstType(props.data.leaveRangeEnd)})`:''}` :''}` }}</div>
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">จำนวนวันที่ลา</div>

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

@@ -1,4 +1,8 @@
 <script setup lang="ts">
+import { useLeaveStore } from '@/modules/05_leave/store'
+
+const store = useLeaveStore()
+const { converstType } = store
 /**
  * รับ prop จาก component
  */
@@ -25,11 +29,11 @@ const props = defineProps({
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">ลาตั้งแต่วันที่</div>
-      <div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }}</div>
+<div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }} {{ `${props.data.leaveRange && props.data.leaveRange !== 'ALL' ? `(${converstType(props.data.leaveRange)})`:''}` }}</div>
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">ลาถึงวันที่</div>
-      <div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }}</div>
+<div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }} {{ `${props.data.leaveDateStart !== props.data.leaveDateEnd ?  `${props.data.leaveRangeEnd && props.data.leaveRangeEnd !== 'ALL' ? `(${converstType(props.data.leaveRangeEnd)})`:''}` :''}` }}</div>
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">จำนวนวันที่ลา</div>

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

@@ -1,4 +1,8 @@
 <script setup lang="ts">
+import { useLeaveStore } from '@/modules/05_leave/store'
+
+const store = useLeaveStore()
+const { converstType } = store
 /**
  * รับ prop จาก component
  */
@@ -25,11 +29,11 @@ const props = defineProps({
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">ลาตั้งแต่วันที่</div>
-      <div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }}</div>
+<div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }} {{ `${props.data.leaveRange && props.data.leaveRange !== 'ALL' ? `(${converstType(props.data.leaveRange)})`:''}` }}</div>
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">ลาถึงวันที่</div>
-      <div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }}</div>
+<div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }} {{ `${props.data.leaveDateStart !== props.data.leaveDateEnd ?  `${props.data.leaveRangeEnd && props.data.leaveRangeEnd !== 'ALL' ? `(${converstType(props.data.leaveRangeEnd)})`:''}` :''}` }}</div>
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">จำนวนวันที่ลา</div>

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

@@ -1,4 +1,8 @@
 <script setup lang="ts">
+import { useLeaveStore } from '@/modules/05_leave/store'
+
+const store = useLeaveStore()
+const { converstType } = store
 /**
  * รับ prop จาก component
  */
@@ -25,11 +29,11 @@ const props = defineProps({
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">ลาตั้งแต่วันที่</div>
-      <div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }}</div>
+<div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }} {{ `${props.data.leaveRange && props.data.leaveRange !== 'ALL' ? `(${converstType(props.data.leaveRange)})`:''}` }}</div>
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">ลาถึงวันที่</div>
-      <div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }}</div>
+<div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }} {{ `${props.data.leaveDateStart !== props.data.leaveDateEnd ?  `${props.data.leaveRangeEnd && props.data.leaveRangeEnd !== 'ALL' ? `(${converstType(props.data.leaveRangeEnd)})`:''}` :''}` }}</div>
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">จำนวนวันที่ลา</div>

src/modules/05_leave/components/formDetail/formCancel.vue

@@ -1,4 +1,8 @@
 <script setup lang="ts">
+import { useLeaveStore } from "@/modules/05_leave/store";
+
+const store = useLeaveStore();
+const { converstType } = store;
 /**
  * รับ prop จาก component
  */
@@ -20,7 +24,13 @@ const props = defineProps({
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">ประเภทการลา</div>
       <div class="col-xs-12 col-md-6">
-        {{ props.data.leaveTypeName ? props.data.leaveTypeName : "-" }}
+        {{
+          props.data.leaveSubTypeName
+            ? props.data.leaveSubTypeName
+            : props.data.leaveTypeName
+            ? props.data.leaveTypeName
+            : "-"
+        }}
       </div>
     </div>
     <div class="row">
@@ -38,13 +48,31 @@ const props = defineProps({
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">ลาตั้งแต่วันที่</div>
       <div class="col-xs-12 col-md-6">
-        {{ props.data.leaveStartDate ? props.data.leaveStartDate : "-" }}
+        {{ props.data.leaveDateStart }}
+        {{
+          `${
+            props.data.leaveRange && props.data.leaveRange !== "ALL"
+              ? `(${converstType(props.data.leaveRange)})`
+              : ""
+          }`
+        }}
       </div>
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">ลาถึงวันที่</div>
       <div class="col-xs-12 col-md-6">
-        {{ props.data.leaveEndDate ? props.data.leaveEndDate : "-" }}
+        {{ props.data.leaveDateEnd }}
+        {{
+          `${
+            props.data.leaveDateStart !== props.data.leaveDateEnd
+              ? `${
+                  props.data.leaveRangeEnd && props.data.leaveRangeEnd !== "ALL"
+                    ? `(${converstType(props.data.leaveRangeEnd)})`
+                    : ""
+                }`
+              : ""
+          }`
+        }}
       </div>
     </div>
     <div class="row">

src/modules/05_leave/interface/index/main.ts

@@ -122,7 +122,9 @@ interface FormData {
   coupleDaySumTotalHistory: string;
   approveStep: string;
   dear: string;
+  leaveRangeEnd: string;
   leaveLast: string;
+  leaveSubTypeName: string;
   leaveRange: string;
 }
 

src/modules/05_leave/interface/response/leave.ts

@@ -7,6 +7,9 @@ interface ListLeave {
   fullName: string; //คำนำหน้า ชื่อ นามสกุล คนขอลา
   dateSendLeave: Date | null; //วันที่ยื่นใบลา
   status: string; //สถานะการของลา
+  leaveSubTypeName: string;
+  leaveRange: string;
+  leaveRangeEnd: string;
   isDelete: boolean; //ขอยกเลิกคำขอลา ถ้าเคยขอแล้วจะเป็น true ไม่เคยเป็น false
   hajjDayStatus: boolean;
 }
@@ -18,6 +21,9 @@ interface ListLeaveTable {
   fullName: string;
   dateSendLeave: string | null;
   status: string;
+  leaveSubTypeName: string;
+  leaveRange: string;
+  leaveRangeEnd: string;
   isDelete: boolean;
   hajjDayStatus: boolean;
 }
@@ -82,6 +88,8 @@ interface FremDetail {
   approveStep: string;
   dear: string;
   leaveRange: string;
+  leaveRangeEnd: string;
+  leaveSubTypeName: string;
 }
 
 interface FromCancelDetail {
@@ -90,6 +98,7 @@ interface FromCancelDetail {
   fullname: String; //คำนำหน้า ชื่อ นามสกุล คนขอลา
   status: String; //สถานะการของลา
   leaveDocDelete: string; //เอกสารการยกเลิกการลา
+  leaveSubTypeName: string;
   leaveResonDelete: String; //เหตุผลการยกเลิกการลา
   leaveWrote: String; //เขียนที่
   leaveAddress: String; //สถานที่ติดต่อขณะลา

src/modules/05_leave/store.ts

@@ -15,6 +15,7 @@ import type {
   ListLeave,
   ListLeaveTable,
 } from "@/modules/05_leave/interface/response/leave";
+import type { DataOption } from "../14_IDP/interface/Main";
 
 const mixin = useCounterMixin();
 const { date2Thai, messageError, showLoader, hideLoader } = mixin;
@@ -41,9 +42,22 @@ export const useLeaveStore = defineStore("Leave", () => {
       fullName: e.fullName,
       dateSendLeave: e.dateSendLeave && date2Thai(e.dateSendLeave, false, true),
       dateLeave:
-        date2Thai(e.leaveStartDate) + " - " + date2Thai(e.leaveEndDate),
+        e.leaveStartDate && e.leaveEndDate
+          ? e.leaveStartDate === e.leaveEndDate
+            ? date2Thai(e.leaveEndDate)
+            : `${date2Thai(e.leaveStartDate)}${
+                e.leaveRange !== "ALL" ? ` (${converstType(e.leaveRange)})` : ""
+              } - ${date2Thai(e.leaveEndDate)}${
+                e.leaveRangeEnd !== "ALL"
+                  ? ` (${converstType(e.leaveRangeEnd)})`
+                  : ""
+              }`
+          : "-",
       status: e.status,
       hajjDayStatus: e.hajjDayStatus,
+      leaveRange: e.leaveRange,
+      leaveRangeEnd: e.leaveRangeEnd,
+      leaveSubTypeName: e.leaveSubTypeName,
       statusConvert: convertStatud(e.status),
       isDelete: e.isDelete,
     }));
@@ -143,17 +157,39 @@ export const useLeaveStore = defineStore("Leave", () => {
     }
   }
 
+  const rangeOptions = ref<DataOption[]>([
+    {
+      id: "ALL",
+      name: "เต็มวัน",
+    },
+    {
+      id: "MORNING",
+      name: "ครึ่งวันเช้า",
+    },
+    {
+      id: "AFTERNOON",
+      name: "ครึ่งวันบ่าย",
+    },
+  ]);
+
+  function converstType(val: string) {
+    switch (val) {
+      case "ALL":
+        return "";
+      case "MORNING":
+        return "ครึ่งวันเช้า";
+      case "AFTERNOON":
+        return "ครึ่งวันบ่าย";
+    }
+  }
   /** รายการประเภทการลาของ ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน*/
-  const optionsSpecific = ref<OptionData[]>([
+  const optionsSpecific = ref<string[]>([
-    { id: "s1", name: "ลาไปศึกษาต่อ", code: "s1" },
+    "ลาไปศึกษาต่อ",
-    { id: "s2", name: "ลาฝึกอบรม/ปฎิบัติการวิจัย/ดูงาน", code: "s2" },
+    "ลาฝึกอบรม/ปฎิบัติการวิจัย/ดูงาน",
   ]);
 
   /** รายการประเภทการลาของ ลาอุปสมบทหรือลาประกอบพิธีฮัจญ์*/
-  const optionsOrdination = ref<OptionData[]>([
+  const optionsOrdination = ref<string[]>(["ลาอุปสมบท", "ลาประกอบพิธีฮัจญ์"]);
-    { id: "b1", name: "ลาอุปสมบท", code: "b1" },
-    { id: "b2", name: "ลาประกอบพิธีฮัจญ์", code: "b2" },
-  ]);
 
   /** data table filter & column ของรายการลา */
   const visibleColumns = ref<string[]>([
@@ -233,24 +269,6 @@ export const useLeaveStore = defineStore("Leave", () => {
     return options.value.find((x) => x.code == val)?.name;
   }
 
-  /**
-   *ฟังก์ชั่นแปลงประเภทแบบฟอร์มลา ลาอุปสมบท/ลาประกอบพิธีฮัจญ์ ย่อย
-   * @param val ค่า string
-   * @returns ส่งค่าที่แปลงแล้ว
-   */
-  function convertSubtitleInfo(val: string) {
-    return optionsOrdination.value.find((x) => x.id == val)?.name;
-  }
-
-  /**
-   *ฟังก์ชั่นแปลง ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน
-   * @param val ค่า string
-   * @returns ส่งค่าที่แปลงแล้ว
-   */
-  function convertSubtitleInfo2(val: string) {
-    return optionsSpecific.value.find((x) => x.id == val)?.name;
-  }
-
   /**
    *ฟังก์ชั่นหา id จาก api
    * @param val ค่า string
@@ -432,5 +450,7 @@ export const useLeaveStore = defineStore("Leave", () => {
     statusOptionsMain,
     telephoneNumber,
     currentAddress,
+    rangeOptions,
+    converstType,
   };
 });

src/modules/05_leave/views/AddPage.vue

@@ -29,7 +29,14 @@ const myform = ref<QForm | null>(null);
 const dataStore = useLeaveStore();
 const mixin = useCounterMixin();
 const { fetchLeaveType } = dataStore;
-const { dialogConfirm, success, messageError, showLoader, hideLoader } = mixin;
+const {
+  dialogConfirm,
+  success,
+  messageError,
+  showLoader,
+  hideLoader,
+  convertDateToAPI,
+} = mixin;
 
 const model = ref<string>("");
 const modelSpecific = ref<string>("");
@@ -53,8 +60,16 @@ function onSubmit(postData: FormData, isLeave: boolean = true) {
   if (isLeave) {
     dialogConfirm($q, async () => {
       showLoader();
+      if (model.value === "LV-006" || model.value === "LV-008") {
+        postData.append("leaveSubTypeName", modelSpecific.value);
+      }
+      if (postData.get("leaveEndDate") === postData.get("leaveStartDate")) {
+        postData.set("leaveRangeEnd", postData.get("leaveRange") as string);
+      }
+
       await http
         .post(config.API.leaveUser(), postData)
+
         .then((res) => {
           router.push(`/leave/edit/${res.data.result.id}`);
           success($q, "บันทึกสำเร็จ");
@@ -167,14 +182,11 @@ onMounted(async () => {
                           ? dataStore.optionsOrdination
                           : dataStore.optionsSpecific
                       "
-                      option-value="code"
+                      option-value="id"
                       option-label="name"
                       emit-value
                       map-options
                       prefix="ประเภทการลา :"
-                      @update:model-value="
-                        dataStore.typeConvert(model, modelSpecific)
-                      "
                     />
                   </div>
                 </div>
@@ -208,11 +220,13 @@ onMounted(async () => {
               />
               <VacationForm v-if="model === 'LV-005'" :on-submit="onSubmit" />
               <OrdinationForm
-                v-if="model === 'LV-006' && modelSpecific == 'b1'"
+                v-if="model === 'LV-006' && modelSpecific == 'ลาอุปสมบท'"
                 :on-submit="onSubmit"
               />
               <HajjForm
-                v-if="model === 'LV-006' && modelSpecific == 'b2'"
+                v-if="
+                  model === 'LV-006' && modelSpecific == 'ลาประกอบพิธีฮัจญ์'
+                "
                 :on-submit="onSubmit"
               />
               <MilitaryForm
@@ -221,15 +235,14 @@ onMounted(async () => {
                 :on-submit="onSubmit"
               />
               <StudyForm
-                v-if="model === 'LV-008' && modelSpecific === 's1'"
+                v-if="model === 'LV-008' && modelSpecific === 'ลาไปศึกษาต่อ'"
                 style="width: 100%"
                 :on-submit="onSubmit"
               />
               <TrainForm
                 v-if="
                   model === 'LV-008' &&
-                  modelSpecific != 's1' &&
+                  modelSpecific == 'ลาฝึกอบรม/ปฎิบัติการวิจัย/ดูงาน'
-                  modelSpecific != ''
                 "
                 :on-submit="onSubmit"
               />

src/modules/05_leave/views/EditPage.vue

@@ -99,9 +99,11 @@ const formData = reactive<FormData>({
   coupleDayEndDateHistory: null, //ประวัติ ถึงวันที่ (ลาติดตามคู่สมรส)
   coupleDaySumTotalHistory: "", //ประวัติ ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
   approveStep: "",
+  leaveRangeEnd: "",
   dear: "",
   leaveLast: "",
   leaveRange: "",
+  leaveSubTypeName: "",
 });
 
 const model = computed(() => {
@@ -109,23 +111,7 @@ const model = computed(() => {
     dataStore.options.find((x) => x.id == formData.leaveTypeId)?.code ?? ""
   );
 });
-const modelSpecific = computed(() => {
+const modelSpecific = ref<string>("");
-  const code = dataStore.options.find(
-    (x) => x.id == formData.leaveTypeId
-  )?.code;
-
-  if (code == "LV-006" && formData.ordainDayLocationName != "") {
-    return "b1";
-  } else if (code == "LV-006" && formData.ordainDayLocationName == "") {
-    return "b2";
-  } else if (code == "LV-008" && formData.studyDayTrainingSubject == "") {
-    return "s1";
-  } else if (code == "LV-008" && formData.studyDayTrainingSubject != "") {
-    return "s2";
-  } else {
-    return "";
-  }
-});
 
 /**
  * function เรียกข้อมูลการลา
@@ -208,6 +194,11 @@ async function fetchDataDetail(id: string) {
       formData.dear = data.dear ?? "-";
       formData.leaveLast = data.leaveLast ?? "-";
       formData.leaveRange = data.leaveRange;
+      formData.leaveRangeEnd =
+        data.leaveRangeEnd == "AFTERNOON" ? "ALL" : data.leaveRangeEnd;
+      formData.ordainDayLocationNumber = data.ordainDayLocationNumber;
+      formData.ordainDayStatus = data.ordainDayStatus;
+      modelSpecific.value = data.leaveSubTypeName;
 
       dataStore.telephoneNumber =
         data.leaveNumber && data.leaveNumber !== "-" ? data.leaveNumber : null;
@@ -228,10 +219,16 @@ async function fetchDataDetail(id: string) {
  * @param formData  ข้อมูลใน formdata
  * @param isLeave  ตัวแปรเช็คว่าใช้หน้า edit หรือไม่
  */
-function onSubmit(formData: FormData, isLeave: boolean = true) {
+function onSubmit(formData: any, isLeave: boolean = true) {
   if (isLeave) {
     dialogConfirm($q, async () => {
       showLoader();
+      if (model.value === "LV-006" || model.value === "LV-008") {
+        formData.append("leaveSubTypeName", modelSpecific.value);
+      }
+      if (formData.get("leaveEndDate") === formData.get("leaveStartDate")) {
+        formData.set("leaveRangeEnd", formData.get("leaveRange") as string);
+      }
       await http
         .put(config.API.leaveUserId(personalId.value), formData)
         .then(async () => {
@@ -386,14 +383,11 @@ onMounted(async () => {
                           ? dataStore.optionsOrdination
                           : dataStore.optionsSpecific
                       "
-                      option-value="code"
+                      option-value="id"
                       option-label="name"
                       emit-value
                       map-options
                       prefix="ประเภทการลา :"
-                      @update:model-value="
-                        dataStore.typeConvert(model, modelSpecific)
-                      "
                     />
                   </div>
                 </div>
@@ -447,14 +441,16 @@ onMounted(async () => {
                 :click-delete="clickDelete"
               />
               <OrdinationForm
-                v-if="model === 'LV-006' && modelSpecific === 'b1'"
+                v-if="model === 'LV-006' && modelSpecific === 'ลาอุปสมบท'"
                 :data="formData"
                 :on-submit="onSubmit"
                 :on-confirm="onConfirm"
                 :click-delete="clickDelete"
               />
               <HajjForm
-                v-if="model === 'LV-006' && modelSpecific === 'b2'"
+                v-if="
+                  model === 'LV-006' && modelSpecific === 'ลาประกอบพิธีฮัจญ์'
+                "
                 :data="formData"
                 :on-submit="onSubmit"
                 :on-confirm="onConfirm"
@@ -469,7 +465,7 @@ onMounted(async () => {
                 :click-delete="clickDelete"
               />
               <StudyForm
-                v-if="model === 'LV-008' && modelSpecific === 's1'"
+                v-if="model === 'LV-008' && modelSpecific === 'ลาไปศึกษาต่อ'"
                 style="width: 100%"
                 :data="formData"
                 :on-submit="onSubmit"
@@ -479,8 +475,7 @@ onMounted(async () => {
               <TrainForm
                 v-if="
                   model === 'LV-008' &&
-                  modelSpecific != 's1' &&
+                  modelSpecific == 'ลาฝึกอบรม/ปฎิบัติการวิจัย/ดูงาน'
-                  modelSpecific != ''
                 "
                 :data="formData"
                 :on-submit="onSubmit"