Merge branch 'develop'

src/api/org/api.org.ts

@@ -54,6 +54,8 @@ export default {
   dataUserSalary: `${profileOrg}/salary/user`,
   dataUserSalaryByType: (type: string) => `${org}/profile${type}/salary/user`,
   dataUserAssessments: `${profileOrg}/assessments/user`,
+  dataUserPortfolio: `${env.API_URI}/development/portfolio/user`,
+  dataUserPerformance: `${env.API_URI}/evaluation/performance/user`,
   dataUserNopaid: `${profileOrg}/nopaid/user`,
   dataUserNopaidByType: (type: string) => `${org}/profile${type}/nopaid/user`,
 
@@ -61,8 +63,7 @@ export default {
   dataUserCertificateByType: (emType: string, type: string) =>
     `${org}/profile${emType}/${type}/user`,
 
-  dataUserEvaByType: (type: string) =>
+  dataUserEvaByType: (type: string) => `${org}/profile/${type}/user`,
-    `${org}/profile/${type}/user`,
 
   dataUserOther: `${profileOrg}/other/user`,
   dataUserOtherByType: (type: string) => `${org}/profile${type}/other/user`,

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) => {
@@ -498,7 +510,7 @@ watch(
             />
 
             <!-- ข้าราชการแสดงเฉพาะที่ยื่นใบลาไปแล้วเท่านั้น ลูกจ้างไม่มี workflow -->
-            <Workflow
+            <!-- <Workflow
               v-if="leaveStatus != 'DRAFT'"
               :id="props.leaveId"
               :sys-name="
@@ -506,7 +518,7 @@ watch(
                   ? 'SYS_LEAVE_LIST'
                   : 'SYS_LEAVE_LIST_EMP'
               "
-            />
+            /> -->
           </div>
 
           <div

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,39 +188,14 @@ async function fetchCheck() {
     })
     .catch((e: any) => {
       messageError($q, e);
+      hideLoader();
     })
     .finally(() => {
+      hideLoader();
       leaveDocumentRef.value.resetValidation();
     });
 }
 
-/**
- * ฟังก์ชั่นแปลงครึ่งวัน/ทั้งวัน
- */
-const isReadOnly = computed(() => {
-  const conditionleaveRange =
-    formDataSick.leaveRange === "MORNING" ||
-    formDataSick.leaveRange === "AFTERNOON";
-  if (conditionleaveRange) {
-    formDataSick.leaveEndDate = formDataSick.leaveStartDate; // Set formDataSick.leaveEndDate to null
-    formDataSick.leaveTotal = 0.5;
-  } else {
-    formDataSick.leaveTotal = null;
-  }
-  return conditionleaveRange;
-});
-
-/**
- * แก้ไขClassเมื่อ status เป็น edit
- * @param val status edit true/false
- */
-function inputEdit(val: boolean) {
-  return {
-    "full-width cursor-pointer ": val,
-    "full-width cursor-pointer inputgreen": !val,
-  };
-}
-
 /** แจ้งเมื่อวันลาไม่ถูกต้อง */
 const dateEndInputStyle = computed(() => {
   return !isLeave.value ? "input-alert" : "";
@@ -212,6 +213,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 +230,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;
@@ -243,255 +246,297 @@ onMounted(() => {
   </div>
   <q-form greedy @submit.prevent @validation-success="onValidate">
     <q-card bordered class="q-pa-md bg-grey-1">
-      <div class="col-12 row q-pa-sm q-col-gutter-sm">
+      <div class="row q-col-gutter-sm">
-        <q-input
+        <div class="col-12 col-sm-12 inputgreen">
-          class="col-12 col-sm-12 cursor-pointer inputgreen"
+          <q-input
-          ref="leaveWroteRef"
+            ref="leaveWroteRef"
-          for="leaveWroteRef"
+            for="leaveWroteRef"
-          dense
+            dense
-          hide-bottom-space
+            hide-bottom-space
-          bg-color="white"
+            bg-color="white"
-          outlined
+            outlined
-          v-model="formDataSick.leaveWrote"
+            v-model="formDataSick.leaveWrote"
-          label="เขียนที่"
+            label="เขียนที่"
-          :readonly="!edit || statusCheck === 'NEW'"
+            :readonly="!edit || statusCheck === 'NEW'"
-          :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
+            :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
-        />
-
-        <div class="col-12 col-md-4 col-sm-12">
-          <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"
-              menu-class-name="modalfix"
-              v-model="formDataSick.leaveStartDate"
-              :locale="'th'"
-              autoApply
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-              :readonly="!edit || statusCheck === 'NEW'"
-              @update:model-value="formDataSick.leaveEndDate = null"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  dense
-                  ref="leaveStartDateRef"
-                  for="leaveStartDateRef"
-                  hide-bottom-space
-                  :readonly="!edit || statusCheck === 'NEW'"
-                  bg-color="white"
-                  class="full-width cursor-pointer inputgreen"
-                  :model-value="
-                    formDataSick.leaveStartDate != null
-                      ? date2Thai(formDataSick.leaveStartDate)
-                      : null
-                  "
-                  :label="`${'ลาตั้งแต่วันที่'}`"
-                  :rules="[(val:string) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-                  style="color: var(--q-primary)"
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--q-primary)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
 
-            <datepicker
+        <div class="col-12">
-              class="col-12 col-md-3 col-sm-6"
+          <div class="row q-col-gutter-sm">
-              menu-class-name="modalfix"
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
-              v-model="formDataSick.leaveEndDate"
+              <datepicker
-              :locale="'th'"
+                menu-class-name="modalfix"
-              autoApply
+                v-model="formDataSick.leaveStartDate"
-              borderless
+                :locale="'th'"
-              :enableTimePicker="false"
+                autoApply
-              week-start="0"
+                hide-bottom-space
-              :readonly="isReadOnly"
+                borderless
-              @update:model-value="fetchCheck()"
+                :enableTimePicker="false"
-              :min-date="formDataSick.leaveStartDate"
+                week-start="0"
-            >
+                :readonly="!edit || statusCheck === 'NEW'"
-              <template #year="{ year }">
+                @update:model-value="
-                {{ year + 543 }}
+                  (formDataSick.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 }">
-                  outlined
+                  {{ parseInt(value + 543) }}
-                  dense
+                </template>
-                  ref="leaveEndDateRef"
+                <template #trigger>
-                  for="leaveEndDateRef"
+                  <q-input
-                  hide-bottom-space
+                    outlined
-                  bg-color="white"
+                    dense
-                  :readonly="isReadOnly"
+                    ref="leaveStartDateRef"
-                  :class="inputEdit(isReadOnly)"
+                    for="leaveStartDateRef"
-                  :model-value="
+                    hide-bottom-space
-                    formDataSick.leaveEndDate != null
+                    bg-color="white"
-                      ? date2Thai(formDataSick.leaveEndDate)
+                    :readonly="!edit || statusCheck === 'NEW'"
-                      : null
+                    class="full-width datepicker"
-                  "
+                    :model-value="
-                  :label="`${'ลาถึงวันที่'}`"
+                      formDataSick.leaveStartDate != null
-                  :rules="[(val:string) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+                        ? date2Thai(formDataSick.leaveStartDate)
-                >
+                        : null
-                  <template v-slot:prepend>
+                    "
-                    <q-icon
+                    :label="`${'วันที่เริ่มต้น'}`"
-                      name="event"
+                    :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
-                      class="cursor-pointer"
+                  >
-                      style="color: var(--q-primary)"
+                    <template v-slot:prepend>
-                    >
+                      <q-icon
-                    </q-icon>
+                        name="event"
-                  </template>
+                        class="cursor-pointer"
-                </q-input>
+                        style="color: var(--q-primary)"
-              </template>
+                      >
-            </datepicker>
+                      </q-icon>
-            <q-input
+                    </template>
-              :bottom-slots="!isLeave ? true : false"
+                  </q-input>
-              :color="!isLeave ? 'red' : 'black'"
+                </template>
-              :bg-color="!isLeave ? 'red-2' : 'white'"
+              </datepicker>
-              :border-color="!isLeave ? 'red' : 'gray'"
+            </div>
-              :input-class="!isLeave ? dateEndInputStyle : ''"
-              class="col-12 col-md-3 col-sm-6"
-              dense
-              outlined
-              ref="leaveTotalRef"
-              for="leaveTotalRef"
-              v-model="formDataSick.leaveTotal"
-              label="จำนวนวันที่ลา"
-              readonly
-            >
-              <template v-slot:hint>
-                <span style="color: red">
-                  {{ !isLeave ? reasonLeave : "" }}
-                </span>
-              </template>
-            </q-input>
 
-            <q-input
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
-              class="col-12 col-md-3 col-sm-6"
+              <q-select
-              dense
+                outlined
-              outlined
+                dense
-              ref="leaveLastRef"
+                bg-color="white"
-              for="leaveLastRef"
+                v-model="formDataSick.leaveRange"
-              v-model="dataStore.leaveLast"
+                :options="dataStore.rangeOptions"
-              label="ลาครั้งสุดท้ายเมื่อวันที่"
+                emit-value
-              readonly
+                map-options
-              hide-bottom-space
+                option-value="id"
-              bg-color="white"
+                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>
+
+        <div class="col-12">
+          <div class="row q-col-gutter-sm">
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formDataSick.leaveEndDate"
+                :locale="'th'"
+                autoApply
+                hide-bottom-space
+                @update:model-value="fetchCheck()"
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+                :min-date="formDataSick.leaveStartDate"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    ref="leaveEndDateRef"
+                    for="leaveEndDateRef"
+                    hide-bottom-space
+                    bg-color="white"
+                    class="full-width datepicker"
+                    :model-value="
+                      formDataSick.leaveEndDate != null
+                        ? date2Thai(formDataSick.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>
+            </div>
+
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <q-select
+                v-if="!checkDate"
+                outlined
+                dense
+                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>
+            </div>
+          </div>
+        </div>
+
+        <div class="col-12">
+          <div class="row q-col-gutter-sm">
+            <div class="col-12 col-md-3 col-sm-6">
+              <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="formDataSick.leaveTotal"
+                label="จำนวนวันที่ลา (วัน)"
+                readonly
+              >
+                <template v-slot:hint>
+                  <span style="color: red">
+                    {{ !isLeave ? reasonLeave : "" }}
+                  </span>
+                </template>
+              </q-input>
+            </div>
+
+            <div class="col-12 col-md-3 col-sm-6">
+              <q-input
+                dense
+                outlined
+                ref="leaveLastRef"
+                for="leaveLastRef"
+                v-model="dataStore.leaveLast"
+                label="ลาครั้งสุดท้ายเมื่อวันที่"
+                readonly
+                hide-bottom-space
+                bg-color="white"
+              />
+            </div>
+          </div>
+        </div>
+
         <div class="full-width">
           <div class="q-col-gutter-sm row">
-            <q-input
+            <div class="col-12 col-md-3 col-sm-12 inputgreen">
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+              <q-input
-              dense
+                dense
-              outlined
+                outlined
-              ref="leaveNumberRef"
+                ref="leaveNumberRef"
-              for="leaveNumberRef"
+                for="leaveNumberRef"
-              v-model="dataStore.telephoneNumber"
+                v-model="dataStore.telephoneNumber"
-              mask="(###)-###-####"
+                mask="(###)-###-####"
-              hide-bottom-space
+                hide-bottom-space
-              bg-color="white"
+                bg-color="white"
-              lazy-rules
+                lazy-rules
-              unmasked-value
+                unmasked-value
-              label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+                label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-              :readonly="!edit || statusCheck === 'NEW'"
+                :readonly="!edit || statusCheck === 'NEW'"
-              :rules="[
+                :rules="[
                 (val:string) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
               ]"
-            />
+              />
+            </div>
 
-            <q-input
+            <div class="col-12 col-md-9 col-sm-12 inputgreen">
-              class="col-12 col-md-9 col-sm-6 cursor-pointer inputgreen"
+              <q-input
-              dense
+                dense
-              outlined
+                outlined
-              ref="leaveAddressRef"
+                ref="leaveAddressRef"
-              for="leaveAddressRef"
+                for="leaveAddressRef"
-              v-model="dataStore.currentAddress"
+                v-model="dataStore.currentAddress"
-              label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
+                label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
-              :readonly="!edit || statusCheck === 'NEW'"
+                :readonly="!edit || statusCheck === 'NEW'"
-              :rules="[
+                :rules="[
                 (val:string) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
               ]"
-              hide-bottom-space
+                hide-bottom-space
-              bg-color="white"
+                bg-color="white"
-            />
+              />
+            </div>
           </div>
         </div>
-        <q-input
+
-          type="textarea"
+        <div class="col-12 inputgreen">
-          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+          <q-input
-          dense
+            type="textarea"
-          outlined
+            dense
-          ref="leaveDetailRef"
+            outlined
-          for="leaveDetailRef"
+            ref="leaveDetailRef"
-          v-model="formDataSick.leaveDetail"
+            for="leaveDetailRef"
-          label="สาเหตุการลา"
+            v-model="formDataSick.leaveDetail"
-          :readonly="!edit || statusCheck === 'NEW'"
+            label="สาเหตุการลา"
-          bg-color="white"
+            :readonly="!edit || statusCheck === 'NEW'"
-        />
+            bg-color="white"
+          />
+        </div>
+
         <div class="full-width" v-if="statusCheck != 'NEW'">
           <div class="q-col-gutter-sm row">
             <!-- multiple -->
-            <q-file
+            <div class="col-12 q-pl-sm col-12">
-              ref="leaveDocumentRef"
+              <q-file
-              for="leaveDocumentRef"
+                ref="leaveDocumentRef"
-              v-model="formDataSick.leaveDocument"
+                for="leaveDocumentRef"
-              dense
+                v-model="formDataSick.leaveDocument"
-              label="เอกสารประกอบ"
+                dense
-              outlined
+                label="เอกสารประกอบ"
-              use-chips
+                outlined
-              lazy-rules
+                use-chips
-              multiple
+                lazy-rules
-              hide-bottom-space
+                multiple
-              bg-color="white"
+                hide-bottom-space
-              class="col-12 q-pl-sm col-12"
+                bg-color="white"
-              :rules="typeForm == 'LV-001' && formDataSick.leaveTotal >= 30 ?[
+                :rules="typeForm == 'LV-001' && formDataSick.leaveTotal >= 30 ?[
                 (val:string) => !!val && val.length >= 30 || `${'กรุณาแนบเอกสารประกอบ หรือ ใบรับรองแพทย์ กรณีลาป่วยตั้งเเต่ 30 วันขึ้นไป'}`,
               ]:[]"
-            >
+              >
-              <template v-slot:prepend>
+                <template v-slot:prepend>
-                <q-icon name="attach_file" color="primary" />
+                  <q-icon name="attach_file" color="primary" />
-              </template>
+                </template>
-            </q-file>
+              </q-file>
+            </div>
           </div>
         </div>
         <div class="col-12" v-if="data">

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

@@ -13,7 +13,14 @@ 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 +53,8 @@ const formDataBirth = reactive<any>({
   leaveEndDate: null,
   leaveTotal: "",
   leaveLast: "",
+  leaveRange: "ALL",
+  leaveRangeEnd: "ALL",
   leaveDetail: "",
   leaveDocument: [],
 });
@@ -115,6 +124,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 +133,36 @@ 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 +171,7 @@ async function fetchCheck() {
         : "จำนวนวันลาเกินที่กำหนด";
     })
     .catch((e: any) => {
+      hideLoader();
       messageError($q, e);
     });
 }
@@ -161,6 +191,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 +207,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;
   }
@@ -190,222 +223,293 @@ onMounted(() => {
   </div>
   <form @submit.prevent.stop="onValidate">
     <q-card bordered class="q-pa-md bg-grey-1">
-      <div class="col-12 row q-pa-sm q-col-gutter-sm">
+      <div class="col-12 row q-col-gutter-sm">
-        <q-input
+        <div class="col-12 inputgreen">
-          class="col-12 col-sm-12 cursor-pointer inputgreen"
+          <q-input
-          ref="leaveWroteRef"
+            ref="leaveWroteRef"
-          for="leaveWroteRef"
+            for="leaveWroteRef"
-          dense
+            dense
-          outlined
+            outlined
-          v-model="formDataBirth.leaveWrote"
+            v-model="formDataBirth.leaveWrote"
-          label="เขียนที่"
+            label="เขียนที่"
-          hide-bottom-space
+            hide-bottom-space
-          bg-color="white"
+            bg-color="white"
-          :readonly="!edit || statusCheck === 'NEW'"
+            :readonly="!edit || statusCheck === 'NEW'"
-          :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
+            :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
-        />
+          />
+        </div>
 
-        <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"
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
-          v-model="formDataBirth.leaveStartDate"
+              <datepicker
-          :locale="'th'"
+                menu-class-name="modalfix"
-          autoApply
+                v-model="formDataBirth.leaveStartDate"
-          hide-bottom-space
+                :locale="'th'"
-          borderless
+                autoApply
-          :enableTimePicker="false"
+                hide-bottom-space
-          week-start="0"
+                borderless
-          :readonly="!edit || statusCheck === 'NEW'"
+                :enableTimePicker="false"
-          @update:model-value="formDataBirth.leaveEndDate = null"
+                week-start="0"
-        >
+                :readonly="!edit || statusCheck === 'NEW'"
-          <template #year="{ year }">
+                @update:model-value="
-            {{ year + 543 }}
+                  (formDataBirth.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 }">
-              outlined
+                  {{ parseInt(value + 543) }}
-              dense
+                </template>
-              ref="leaveStartDateRef"
+                <template #trigger>
-              for="leaveStartDateRef"
+                  <q-input
-              hide-bottom-space
+                    outlined
-              bg-color="white"
+                    dense
-              :readonly="!edit || statusCheck === 'NEW'"
+                    ref="leaveStartDateRef"
-              class="full-width datepicker"
+                    for="leaveStartDateRef"
-              :model-value="
+                    hide-bottom-space
-                formDataBirth.leaveStartDate != null
+                    bg-color="white"
-                  ? date2Thai(formDataBirth.leaveStartDate)
+                    :readonly="!edit || statusCheck === 'NEW'"
-                  : null
+                    class="full-width datepicker"
-              "
+                    :model-value="
-              :label="`${'ลาตั้งแต่วันที่'}`"
+                      formDataBirth.leaveStartDate != null
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+                        ? date2Thai(formDataBirth.leaveStartDate)
-            >
+                        : null
-              <template v-slot:prepend>
+                    "
-                <q-icon
+                    :label="`${'วันที่เริ่มต้น'}`"
-                  name="event"
+                    :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
-                  class="cursor-pointer"
+                  >
-                  style="color: var(--q-primary)"
+                    <template v-slot:prepend>
-                >
+                      <q-icon
-                </q-icon>
+                        name="event"
-              </template>
+                        class="cursor-pointer"
-            </q-input>
+                        style="color: var(--q-primary)"
-          </template>
+                      >
-        </datepicker>
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
 
-        <datepicker
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
-          class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
+              <q-select
-          menu-class-name="modalfix"
+                outlined
-          v-model="formDataBirth.leaveEndDate"
+                dense
-          :locale="'th'"
+                bg-color="white"
-          autoApply
+                v-model="formDataBirth.leaveRange"
-          @update:model-value="fetchCheck()"
+                :options="dataStore.rangeOptions"
-          borderless
+                emit-value
-          hide-bottom-space
+                map-options
-          :enableTimePicker="false"
+                option-value="id"
-          week-start="0"
+                option-label="name"
-          :readonly="!formDataBirth.leaveStartDate"
+                @update:model-value="fetchCheck()"
-          :min-date="formDataBirth.leaveStartDate"
+              >
-        >
+                <template v-slot:prepend>
-          <template #year="{ year }">
+                  <q-icon
-            {{ year + 543 }}
+                    name="mdi-clock-outline"
-          </template>
+                    style="color: var(--q-primary)"
-          <template #year-overlay-value="{ value }">
+                  />
-            {{ parseInt(value + 543) }}
+                </template>
-          </template>
+              </q-select>
-          <template #trigger>
+            </div>
-            <q-input
-              outlined
-              dense
-              ref="leaveEndDateRef"
-              for="leaveEndDateRef"
-              hide-bottom-space
-              :readonly="!formDataBirth.leaveStartDate"
-              class="full-width datepicker"
-              bg-color="white"
-              :model-value="
-                formDataBirth.leaveEndDate != null
-                  ? date2Thai(formDataBirth.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
-          class="col-12 col-md-3 col-sm-6"
-          dense
-          outlined
-          ref="leaveTotalRef"
-          for="leaveTotalRef"
-          v-model="formDataBirth.leaveTotal"
-          label="จำนวนวันที่ลา"
-          readonly
-          :bottom-slots="!isLeave ? true : false"
-          :color="!isLeave ? 'red' : 'black'"
-          :bg-color="!isLeave ? 'red-2' : 'white'"
-          :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
-              class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
-              dense
-              outlined
-              hide-bottom-space
-              bg-color="white"
-              ref="leaveNumberRef"
-              for="leaveNumberRef"
-              v-model="dataStore.telephoneNumber"
-              mask="(###)-###-####"
-              unmasked-value
-              lazy-rules
-              label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-              :readonly="!edit || statusCheck === 'NEW'"
-              :rules="[
-                (val:string) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
-              ]"
-            />
-
-            <q-input
-              class="col-12 col-md-9 col-sm-12 cursor-pointer inputgreen"
-              dense
-              outlined
-              hide-bottom-space
-              bg-color="white"
-              ref="leaveAddressRef"
-              for="leaveAddressRef"
-              v-model="dataStore.currentAddress"
-              label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
-              :readonly="!edit || statusCheck === 'NEW'"
-              :rules="[
-                (val:string) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
-              ]"
-            />
           </div>
         </div>
-        <q-input
+
-          type="textarea"
+        <div class="col-12">
-          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+          <div class="row q-col-gutter-sm">
-          dense
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
-          outlined
+              <datepicker
-          bg-color="white"
+                menu-class-name="modalfix"
-          ref="leaveDetailRef"
+                v-model="formDataBirth.leaveEndDate"
-          for="leaveDetailRef"
+                :locale="'th'"
-          v-model="formDataBirth.leaveDetail"
+                autoApply
-          label="สาเหตุการลา"
+                hide-bottom-space
-          :readonly="!edit || statusCheck === 'NEW'"
+                @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 || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <q-select
+                v-if="!checkDate"
+                outlined
+                dense
+                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>
+            </div>
+          </div>
+        </div>
+
+        <div class="col-12">
+          <div class="row q-col-gutter-sm">
+            <div class="col-12 col-md-3 col-sm-6">
+              <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="formDataBirth.leaveTotal"
+                label="จำนวนวันที่ลา (วัน)"
+                readonly
+              >
+                <template v-slot:hint>
+                  <span style="color: red">
+                    {{ !isLeave ? reasonLeave : "" }}
+                  </span>
+                </template>
+              </q-input>
+            </div>
+
+            <div class="col-12 col-md-3 col-sm-6">
+              <q-input
+                dense
+                outlined
+                ref="leaveLastRef"
+                for="leaveLastRef"
+                v-model="dataStore.leaveLast"
+                label="ลาครั้งสุดท้ายเมื่อวันที่"
+                readonly
+                hide-bottom-space
+                bg-color="white"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <div class="col-12 col-md-3 col-sm-12 inputgreen">
+              <q-input
+                dense
+                outlined
+                hide-bottom-space
+                bg-color="white"
+                ref="leaveNumberRef"
+                for="leaveNumberRef"
+                v-model="dataStore.telephoneNumber"
+                mask="(###)-###-####"
+                unmasked-value
+                lazy-rules
+                label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+                :readonly="!edit || statusCheck === 'NEW'"
+                :rules="[
+                (val:string) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
+              ]"
+              />
+            </div>
+
+            <div class="col-12 col-md-9 col-sm-12 inputgreen">
+              <q-input
+                dense
+                outlined
+                hide-bottom-space
+                bg-color="white"
+                ref="leaveAddressRef"
+                for="leaveAddressRef"
+                v-model="dataStore.currentAddress"
+                label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
+                :readonly="!edit || statusCheck === 'NEW'"
+                :rules="[
+                (val:string) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
+              ]"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div class="col-12 inputgreen">
+          <q-input
+            type="textarea"
+            dense
+            outlined
+            bg-color="white"
+            ref="leaveDetailRef"
+            for="leaveDetailRef"
+            v-model="formDataBirth.leaveDetail"
+            label="สาเหตุการลา"
+            :readonly="!edit || statusCheck === 'NEW'"
+          />
+        </div>
+
         <div class="full-width" v-if="statusCheck != 'NEW'">
           <div class="q-col-gutter-sm row">
             <!-- multiple -->
-            <q-file
+            <div class="q-pl-sm col-12">
-              for="leaveDocumentRef"
+              <q-file
-              hide-bottom-space
+                for="leaveDocumentRef"
-              v-model="formDataBirth.leaveDocument"
+                hide-bottom-space
-              @added="fileUploadDoc"
+                v-model="formDataBirth.leaveDocument"
-              dense
+                @added="fileUploadDoc"
-              bg-color="white"
+                dense
-              label="เอกสารประกอบ"
+                bg-color="white"
-              outlined
+                label="เอกสารประกอบ"
-              multiple
+                outlined
-              use-chips
+                multiple
-              class="q-pl-sm col-12"
+                use-chips
-            >
+              >
-              <template v-slot:prepend>
+                <template v-slot:prepend>
-                <q-icon name="attach_file" color="primary" />
+                  <q-icon name="attach_file" color="primary" />
-              </template>
+                </template>
-            </q-file>
+              </q-file>
+            </div>
           </div>
         </div>
         <div class="col-12 row" v-if="data">

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,53 @@ 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;
-
       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,6 +203,8 @@ 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;
     formDataHelpWife.leaveDocument = [];
     leaveDocumentList.value = props.data.leaveDocument;
@@ -193,7 +213,7 @@ watch(props.data, () => {
 });
 
 /**Hook */
-onMounted(() => {
+onMounted(async () => {
   if (props.data) {
     formDataHelpWife.leaveWrote = props.data.leaveWrote;
     formDataHelpWife.wifeDayName = props.data.wifeDayName;
@@ -203,6 +223,8 @@ 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;
     statusCheck.value = props.data.status;
     leaveId.value = props.data.id;
   }
@@ -217,139 +239,204 @@ onMounted(() => {
   <form @submit.prevent.stop="onValidate">
     <q-card bordered class="q-pa-md bg-grey-1">
       <div class="col-12 row q-pa-sm q-col-gutter-sm">
-        <q-input
+        <div class="col-12 inputgreen">
-          class="col-12 col-12 col-sm-12 cursor-pointer inputgreen"
+          <q-input
-          ref="leaveWroteRef"
+            ref="leaveWroteRef"
-          for="leaveWroteRef"
+            for="leaveWroteRef"
-          dense
+            dense
-          outlined
+            outlined
-          hide-bottom-space
+            hide-bottom-space
-          bg-color="white"
+            bg-color="white"
-          v-model="formDataHelpWife.leaveWrote"
+            v-model="formDataHelpWife.leaveWrote"
-          label="เขียนที่"
+            label="เขียนที่"
-          :readonly="!edit || statusCheck === 'NEW'"
+            :readonly="!edit || statusCheck === 'NEW'"
-          :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
+            :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
-        />
+          />
-        <datepicker
+        </div>
-          class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
-          menu-class-name="modalfix"
-          v-model="formDataHelpWife.leaveStartDate"
-          :locale="'th'"
-          autoApply
-          hide-bottom-space
-          borderless
-          :enableTimePicker="false"
-          week-start="0"
-          :readonly="!edit || 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"
-              :readonly="!edit || statusCheck === 'NEW'"
-              class="full-width datepicker"
-              :model-value="
-                formDataHelpWife.leaveStartDate != null
-                  ? date2Thai(formDataHelpWife.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
+        <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"
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
-          v-model="formDataHelpWife.leaveEndDate"
+              <datepicker
-          :locale="'th'"
+                menu-class-name="modalfix"
-          autoApply
+                v-model="formDataHelpWife.leaveStartDate"
-          borderless
+                :locale="'th'"
-          hide-bottom-space
+                autoApply
-          :enableTimePicker="false"
+                hide-bottom-space
-          @update:model-value="updateLeaveTotal, fetchCheck()"
+                borderless
-          week-start="0"
+                :enableTimePicker="false"
-          :readonly="!formDataHelpWife.leaveStartDate"
+                week-start="0"
-          :min-date="formDataHelpWife.leaveStartDate"
+                :readonly="!edit || statusCheck === 'NEW'"
-        >
+                @update:model-value="
-          <template #year="{ year }">
+                  (formDataHelpWife.leaveEndDate = null), fetchCheck()
-            {{ year + 543 }}
+                "
-          </template>
+              >
-          <template #year-overlay-value="{ value }">
+                <template #year="{ year }">
-            {{ parseInt(value + 543) }}
+                  {{ year + 543 }}
-          </template>
+                </template>
-          <template #trigger>
+                <template #year-overlay-value="{ value }">
-            <q-input
+                  {{ parseInt(value + 543) }}
-              outlined
+                </template>
-              dense
+                <template #trigger>
-              ref="leaveEndDateRef"
+                  <q-input
-              for="leaveEndDateRef"
+                    outlined
-              hide-bottom-space
+                    dense
-              bg-color="white"
+                    ref="leaveStartDateRef"
-              :readonly="!formDataHelpWife.leaveStartDate"
+                    for="leaveStartDateRef"
-              class="full-width datepicker"
+                    hide-bottom-space
-              :model-value="
+                    bg-color="white"
-                formDataHelpWife.leaveEndDate != null
+                    :readonly="!edit || statusCheck === 'NEW'"
-                  ? date2Thai(formDataHelpWife.leaveEndDate)
+                    class="full-width datepicker"
-                  : null
+                    :model-value="
-              "
+                      formDataHelpWife.leaveStartDate != null
-              :label="`${'ลาถึงวันที่'}`"
+                        ? date2Thai(formDataHelpWife.leaveStartDate)
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+                        : null
-            >
+                    "
-              <template v-slot:prepend>
+                    :label="`${'วันที่เริ่มต้น'}`"
-                <q-icon
+                    :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
-                  name="event"
+                  >
-                  class="cursor-pointer"
+                    <template v-slot:prepend>
-                  style="color: var(--q-primary)"
+                      <q-icon
-                >
+                        name="event"
-                </q-icon>
+                        class="cursor-pointer"
-              </template>
+                        style="color: var(--q-primary)"
-            </q-input>
+                      >
-          </template>
+                      </q-icon>
-        </datepicker>
+                    </template>
-        <q-input
+                  </q-input>
-          class="col-12 col-md-2 col-sm-6"
+                </template>
-          dense
+              </datepicker>
-          outlined
+            </div>
-          ref="leaveTotalRef"
+
-          for="leaveTotalRef"
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
-          v-model="formDataHelpWife.leaveTotal"
+              <q-select
-          label="จำนวนวันที่ลา"
+                outlined
-          readonly
+                dense
-          :bottom-slots="!isLeave ? true : false"
+                bg-color="white"
-          :color="!isLeave ? 'red' : 'black'"
+                v-model="formDataHelpWife.leaveRange"
-          :bg-color="!isLeave ? 'red-2' : 'white'"
+                :options="dataStore.rangeOptions"
-          :border-color="!isLeave ? 'red' : 'gray'"
+                emit-value
-          :input-class="!isLeave ? dateEndInputStyle : ''"
+                map-options
-        >
+                option-value="id"
-          <template v-slot:hint>
+                option-label="name"
-            <span style="color: red">
+                @update:model-value="fetchCheck()"
-              {{ !isLeave ? reasonLeave : "" }}
+              >
-            </span>
+                <template v-slot:prepend>
-          </template>
+                  <q-icon
-        </q-input>
+                    name="mdi-clock-outline"
-        <div class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen">
+                    style="color: var(--q-primary)"
+                  />
+                </template>
+              </q-select>
+            </div>
+          </div>
+        </div>
+
+        <div class="col-12">
+          <div class="row q-col-gutter-sm">
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formDataHelpWife.leaveEndDate"
+                :locale="'th'"
+                autoApply
+                hide-bottom-space
+                @update:model-value="fetchCheck()"
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+                :min-date="formDataHelpWife.leaveStartDate"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    ref="leaveEndDateRef"
+                    for="leaveEndDateRef"
+                    hide-bottom-space
+                    bg-color="white"
+                    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>
+            </div>
+
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <q-select
+                v-if="!checkDate"
+                outlined
+                dense
+                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>
+
+        <div class="col-12">
+          <div class="row q-col-gutter-sm">
+            <div class="col-12 col-md-3 col-sm-6 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 : ''"
+                class="col-12 col-md-3 col-sm-6"
+                dense
+                outlined
+                ref="leaveTotalRef"
+                for="leaveTotalRef"
+                v-model="formDataHelpWife.leaveTotal"
+                label="จำนวนวันที่ลา (วัน)"
+                readonly
+              >
+                <template v-slot:hint>
+                  <span style="color: red">
+                    {{ !isLeave ? reasonLeave : "" }}
+                  </span>
+                </template>
+              </q-input>
+            </div>
+          </div>
+        </div>
+
+        <div class="col-12 col-md-8 col-sm-12 inputgreen">
           <q-input
             class="col-12 col-sm-12"
             ref="wifeDayNameRef"
@@ -365,122 +452,130 @@ onMounted(() => {
           />
         </div>
 
-        <datepicker
+        <div class="col-12 col-md-4 col-sm-12 inputgreen">
-          class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
+          <datepicker
-          menu-class-name="modalfix"
+            menu-class-name="modalfix"
-          v-model="formDataHelpWife.wifeDayDateBorn"
+            v-model="formDataHelpWife.wifeDayDateBorn"
-          :locale="'th'"
+            :locale="'th'"
-          autoApply
+            autoApply
-          borderless
+            borderless
-          hide-bottom-space
+            hide-bottom-space
-          :enableTimePicker="false"
+            :enableTimePicker="false"
-          week-start="0"
+            week-start="0"
-          :readonly="!edit || statusCheck === 'NEW'"
+            :readonly="!edit || statusCheck === 'NEW'"
-        >
+          >
-          <template #year="{ year }">
+            <template #year="{ year }">
-            {{ year + 543 }}
+              {{ year + 543 }}
-          </template>
+            </template>
-          <template #year-overlay-value="{ value }">
+            <template #year-overlay-value="{ value }">
-            {{ parseInt(value + 543) }}
+              {{ parseInt(value + 543) }}
-          </template>
+            </template>
-          <template #trigger>
+            <template #trigger>
-            <q-input
+              <q-input
-              outlined
+                outlined
-              dense
+                dense
-              ref="wifeDayDateBornRef"
+                ref="wifeDayDateBornRef"
-              for="wifeDayDateBornRef"
+                for="wifeDayDateBornRef"
-              hide-bottom-space
+                hide-bottom-space
-              bg-color="white"
+                bg-color="white"
-              :readonly="!edit || statusCheck === 'NEW'"
+                :readonly="!edit || statusCheck === 'NEW'"
-              class="full-width datepicker"
+                class="full-width datepicker"
-              :model-value="
+                :model-value="
-                formDataHelpWife.wifeDayDateBorn != null
+                  formDataHelpWife.wifeDayDateBorn != null
-                  ? date2Thai(formDataHelpWife.wifeDayDateBorn)
+                    ? date2Thai(formDataHelpWife.wifeDayDateBorn)
-                  : null
+                    : null
-              "
+                "
-              :label="`${'วันที่คลอด'}`"
+                :label="`${'วันที่คลอด'}`"
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่คลอด'}`]"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่คลอด'}`]"
-            >
+              >
-              <template v-slot:prepend>
+                <template v-slot:prepend>
-                <q-icon
+                  <q-icon
-                  name="event"
+                    name="event"
-                  class="cursor-pointer"
+                    class="cursor-pointer"
-                  style="color: var(--q-primary)"
+                    style="color: var(--q-primary)"
-                >
+                  >
-                </q-icon>
+                  </q-icon>
-              </template>
+                </template>
-            </q-input>
+              </q-input>
-          </template>
+            </template>
-        </datepicker>
+          </datepicker>
+        </div>
+
         <div class="full-width">
           <div class="q-col-gutter-sm row">
-            <q-input
+            <div class="col-12 col-md-3 col-sm-12 inputgreen">
-              class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
+              <q-input
-              dense
+                dense
-              outlined
+                outlined
-              ref="leaveNumberRef"
+                ref="leaveNumberRef"
-              for="leaveNumberRef"
+                for="leaveNumberRef"
-              v-model="dataStore.telephoneNumber"
+                v-model="dataStore.telephoneNumber"
-              mask="(###)-###-####"
+                mask="(###)-###-####"
-              unmasked-value
+                unmasked-value
-              hide-bottom-space
+                hide-bottom-space
-              lazy-rules
+                lazy-rules
-              bg-color="white"
+                bg-color="white"
-              label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+                label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-              :readonly="!edit || statusCheck === 'NEW'"
+                :readonly="!edit || statusCheck === 'NEW'"
-              :rules="[
+                :rules="[
                 (val:string) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
               ]"
-            />
+              />
+            </div>
 
-            <q-input
+            <div class="col-12 col-md-9 col-sm-12 inputgreen">
-              class="col-12 col-md-9 col-sm-12 cursor-pointer inputgreen"
+              <q-input
-              dense
+                dense
-              outlined
+                outlined
-              hide-bottom-space
+                hide-bottom-space
-              bg-color="white"
+                bg-color="white"
-              ref="leaveAddressRef"
+                ref="leaveAddressRef"
-              for="leaveAddressRef"
+                for="leaveAddressRef"
-              v-model="dataStore.currentAddress"
+                v-model="dataStore.currentAddress"
-              label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
+                label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
-              :readonly="!edit || statusCheck === 'NEW'"
+                :readonly="!edit || statusCheck === 'NEW'"
-              :rules="[
+                :rules="[
                 (val:string) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
               ]"
-            />
+              />
+            </div>
           </div>
         </div>
-        <q-input
+
-          hide-bottom-space
+        <div class="col-12 inputgreen">
-          bg-color="white"
+          <q-input
-          type="textarea"
+            hide-bottom-space
-          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+            bg-color="white"
-          dense
+            type="textarea"
-          outlined
+            dense
-          ref="leaveDetailRef"
+            outlined
-          for="leaveDetailRef"
+            ref="leaveDetailRef"
-          v-model="formDataHelpWife.leaveDetail"
+            for="leaveDetailRef"
-          label="สาเหตุการลา"
+            v-model="formDataHelpWife.leaveDetail"
-          :readonly="!edit || statusCheck === 'NEW'"
+            label="สาเหตุการลา"
-        />
+            :readonly="!edit || statusCheck === 'NEW'"
+          />
+        </div>
+
         <div class="full-width" v-if="statusCheck != 'NEW'">
           <div class="q-col-gutter-sm row">
-            <q-file
+            <div class="q-pl-sm col-12">
-              bg-color="white"
+              <q-file
-              ref="leaveDocumentRef"
+                bg-color="white"
-              v-model="formDataHelpWife.leaveDocument"
+                ref="leaveDocumentRef"
-              @added="fileUploadDoc"
+                v-model="formDataHelpWife.leaveDocument"
-              dense
+                @added="fileUploadDoc"
-              label="เอกสารประกอบ"
+                dense
-              outlined
+                label="เอกสารประกอบ"
-              use-chips
+                outlined
-              class="q-pl-sm col-12"
+                use-chips
-              multiple
+                multiple
-            >
+              >
-              <template v-slot:prepend>
+                <template v-slot:prepend>
-                <q-icon name="attach_file" color="primary" />
+                  <q-icon name="attach_file" color="primary" />
-              </template>
+                </template>
-            </q-file>
+              </q-file>
+            </div>
           </div>
         </div>
         <div class="col-12" v-if="data">

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

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted, computed, watch } from "vue";
 import { useQuasar } from "quasar";
-import { useRouter } from "vue-router";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -9,12 +8,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 +57,7 @@ const formDataVacation = reactive<any>({
   leaveEndDate: null,
   leaveTotal: "",
   leaveDetail: "",
+  leaveRangeEnd: "ALL",
   leaveDocument: [],
 });
 
@@ -93,20 +101,6 @@ const fileUploadDoc = async (files: any) => {
 const leaveDocumentList = ref<any>();
 const statusCheck = ref<string>("");
 
-/** ฟังก์ชั่นแปลงค่า ครึ่งวัน/ทั้งวัน */
-const isReadOnly = computed(() => {
-  const conditionleaveRange =
-    formDataVacation.leaveRange === "MORNING" ||
-    formDataVacation.leaveRange === "AFTERNOON";
-  if (conditionleaveRange) {
-    formDataVacation.leaveEndDate = formDataVacation.leaveStartDate; // Set formDataVacation.leaveEndDate to null
-    formDataVacation.leaveTotal = 0.5;
-  } else {
-    formDataVacation.leaveTotal = null;
-  }
-  return conditionleaveRange;
-});
-
 /** แจ้งเมื่อวันลาไม่ถูกต้อง */
 const dateEndInputStyle = computed(() => {
   return !isLeave.value ? "input-alert" : "";
@@ -134,13 +128,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 +153,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 +185,11 @@ async function fetchCheck() {
       reasonLeave.value = data.message
         ? data.message
         : "จำนวนวันลาเกินที่กำหนด";
+      hideLoader();
     })
     .catch((e: any) => {
       messageError($q, e);
+      hideLoader();
     });
 }
 
@@ -203,6 +216,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 +238,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;
   }
 });
@@ -237,20 +252,175 @@ onMounted(() => {
   <form @submit.prevent.stop="onValidate">
     <q-card bordered class="q-pa-md bg-grey-1">
       <div class="row q-pa-sm q-col-gutter-sm">
-        <q-input
+        <div class="col-12 inputgreen">
-          class="col-12 col-sm-12 cursor-pointer inputgreen"
+          <q-input
-          ref="leaveWroteRef"
+            ref="leaveWroteRef"
-          for="leaveWroteRef"
+            for="leaveWroteRef"
-          dense
+            dense
-          hide-bottom-space
+            hide-bottom-space
-          bg-color="white"
+            bg-color="white"
-          outlined
+            outlined
-          v-model="formDataVacation.leaveWrote"
+            v-model="formDataVacation.leaveWrote"
-          label="เขียนที่"
+            label="เขียนที่"
-          :readonly="!edit || statusCheck === 'NEW'"
+            :readonly="!edit || statusCheck === 'NEW'"
-          :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
+            :rules="[(val:string) => !!val || `${'กรุณากรอกเขียนที่'}`]"
-        />
+          />
-        <div class="col-12 col-md-4 col-sm-6">
+        </div>
+
+        <div class="col-12">
+          <div class="row q-col-gutter-sm">
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <datepicker
+                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>
+            </div>
+
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <q-select
+                outlined
+                dense
+                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>
+        <div class="col-12">
+          <div class="row q-col-gutter-sm">
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <datepicker
+                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>
+            </div>
+
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <q-select
+                v-if="!checkDate"
+                outlined
+                dense
+                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>
+            </div>
+          </div>
+        </div>
+
+        <!-- <div class="col-12 col-md-4 col-sm-6">
           <q-radio
             v-model="formDataVacation.leaveRange"
             val="ALL"
@@ -271,222 +441,134 @@ onMounted(() => {
             checked-icon="task_alt"
             @update:model-value="resetDate"
           />
+        </div> -->
+        <div class="col-12 col-md-3 col-sm-6">
+          <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="formDataVacation.leaveTotal"
+            label="จำนวนวันที่ลา (วัน)"
+            readonly
+          >
+            <template v-slot:hint>
+              <span style="color: red">
+                {{ !isLeave ? reasonLeave : "" }}
+              </span>
+            </template>
+          </q-input>
         </div>
-        <q-input
-          class="col-12 col-md-4 col-sm-6"
-          ref="restDayOldTotalRef"
-          for="restDayOldTotalRef"
-          dense
-          hide-bottom-space
-          bg-color="white"
-          readonly
-          outlined
-          v-model="dataStore.restDayTotalOld"
-          label="จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา"
-        />
 
-        <q-input
+        <div class="col-12 col-md-3 col-sm-6">
-          class="col-12 col-md-4 col-sm-6"
+          <q-input
-          ref="restDayCurrentTotalRef"
+            ref="restDayOldTotalRef"
-          for="restDayCurrentTotalRef"
+            for="restDayOldTotalRef"
-          dense
+            dense
-          readonly
+            hide-bottom-space
-          hide-bottom-space
+            bg-color="white"
-          bg-color="white"
+            readonly
-          outlined
+            outlined
-          v-model="dataStore.restDayCurrentTotal"
+            v-model="dataStore.restDayTotalOld"
-          label="จำนวนวันลาพักผ่อนประจำปีปัจจุบัน"
+            label="จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา"
-        />
+          />
+        </div>
 
-        <datepicker
+        <div class="col-12 col-md-3 col-sm-6">
-          class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+          <q-input
-          menu-class-name="modalfix"
+            ref="restDayCurrentTotalRef"
-          v-model="formDataVacation.leaveStartDate"
+            for="restDayCurrentTotalRef"
-          :locale="'th'"
+            dense
-          autoApply
+            readonly
-          hide-bottom-space
+            hide-bottom-space
-          borderless
+            bg-color="white"
-          :enableTimePicker="false"
+            outlined
-          week-start="0"
+            v-model="dataStore.restDayCurrentTotal"
-          :readonly="!edit || statusCheck === 'NEW'"
+            label="จำนวนวันลาพักผ่อนประจำปีปัจจุบัน"
-          @update:model-value="formDataVacation.leaveEndDate = null"
+          />
-        >
+        </div>
-          <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
+            <div class="col-12 col-md-3 col-sm-12 inputgreen">
-              class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
+              <q-input
-              dense
+                dense
-              outlined
+                outlined
-              hide-bottom-space
+                hide-bottom-space
-              bg-color="white"
+                bg-color="white"
-              ref="leaveNumberRef"
+                ref="leaveNumberRef"
-              for="leaveNumberRef"
+                for="leaveNumberRef"
-              v-model="dataStore.telephoneNumber"
+                v-model="dataStore.telephoneNumber"
-              mask="(###)-###-####"
+                mask="(###)-###-####"
-              lazy-rules
+                lazy-rules
-              unmasked-value
+                unmasked-value
-              label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+                label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-              :readonly="!edit || statusCheck === 'NEW'"
+                :readonly="!edit || statusCheck === 'NEW'"
-              :rules="[
+                :rules="[
                 (val:string) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
               ]"
-            />
+              />
+            </div>
 
-            <q-input
+            <div class="col-12 col-md-9 col-sm-12 inputgreen">
-              class="col-12 col-md-9 col-sm-6 cursor-pointer inputgreen"
+              <q-input
-              dense
+                dense
-              outlined
+                outlined
-              hide-bottom-space
+                hide-bottom-space
-              bg-color="white"
+                bg-color="white"
-              ref="leaveAddressRef"
+                ref="leaveAddressRef"
-              for="leaveAddressRef"
+                for="leaveAddressRef"
-              v-model="dataStore.currentAddress"
+                v-model="dataStore.currentAddress"
-              label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
+                label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
-              :readonly="!edit || statusCheck === 'NEW'"
+                :readonly="!edit || statusCheck === 'NEW'"
-              :rules="[
+                :rules="[
                 (val:string) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
               ]"
-            />
+              />
+            </div>
           </div>
         </div>
-        <q-input
+
-          type="textarea"
+        <div class="col-12 inputgreen">
-          hide-bottom-space
+          <q-input
-          bg-color="white"
+            type="textarea"
-          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+            hide-bottom-space
-          dense
+            bg-color="white"
-          outlined
+            dense
-          ref="leaveDetailRef"
+            outlined
-          for="leaveDetailRef"
+            ref="leaveDetailRef"
-          v-model="formDataVacation.leaveDetail"
+            for="leaveDetailRef"
-          label="สาเหตุการลา"
+            v-model="formDataVacation.leaveDetail"
-          :readonly="!edit || statusCheck === 'NEW'"
+            label="สาเหตุการลา"
-        />
+            :readonly="!edit || statusCheck === 'NEW'"
+          />
+        </div>
+
         <div class="full-width" v-if="statusCheck != 'NEW'">
           <div class="q-col-gutter-sm row">
             <!-- multiple -->
-            <q-file
+            <div class="q-pl-sm col-12">
-              ref="leaveDocumentRef"
+              <q-file
-              bg-color="white"
+                ref="leaveDocumentRef"
-              v-model="formDataVacation.leaveDocument"
+                bg-color="white"
-              @added="fileUploadDoc"
+                v-model="formDataVacation.leaveDocument"
-              dense
+                @added="fileUploadDoc"
-              label="เอกสารประกอบ"
+                dense
-              multiple
+                label="เอกสารประกอบ"
-              outlined
+                multiple
-              use-chips
+                outlined
-              class="q-pl-sm col-12"
+                use-chips
-            >
+              >
-              <template v-slot:prepend>
+                <template v-slot:prepend>
-                <q-icon name="attach_file" color="primary" />
+                  <q-icon name="attach_file" color="primary" />
-              </template>
+                </template>
-            </q-file>
+              </q-file>
+            </div>
           </div>
         </div>
         <div class="col-12" v-if="data">

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);
@@ -52,10 +61,12 @@ const formDataHaji = reactive<any>({
   leavegovernmentDate: null,
   leaveStartDate: null,
   leaveEndDate: null,
-  totalLeave: 0,
+  leaveTotal: 0,
   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,38 +132,49 @@ 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();
     });
 }
 
-/**
- * function อัพเดทค่า LeaveTotal
- */
-function updateLeaveTotal() {
-  const newLeaveTotal = calculateDurationYmd(
-    formDataHaji.leaveStartDate,
-    formDataHaji.leaveEndDate
-  );
-  formDataHaji.leaveTotal = newLeaveTotal;
-}
-
 /** แจ้งเมื่อวันลาไม่ถูกต้อง */
 const dateEndInputStyle = computed(() => {
   return !isLeave.value ? "input-alert" : "";
@@ -159,15 +183,16 @@ 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;
     formDataHaji.leaveStartDate = props.data.leaveStartDate;
     formDataHaji.leaveEndDate = props.data.leaveEndDate;
-    formDataHaji.totalLeave = props.data.totalLeave;
     formDataHaji.hajjDayStatus = props.data.hajjDayStatus;
     formDataHaji.leaveDetail = props.data.leaveDetail;
+    formDataHaji.leaveRangeEnd = props.data.leaveRangeEnd;
+    formDataHaji.leaveRange = props.data.leaveRange;
     leaveDocumentList.value = props.data.leaveDocument;
     statusCheck.value = props.data.status;
     formDataHaji.leaveDocument = [];
@@ -175,16 +200,17 @@ watch(props.data, () => {
 });
 
 /**Hook */
-onMounted(() => {
+onMounted(async () => {
   if (props.data) {
     formDataHaji.leaveWrote = props.data.leaveWrote;
     formDataHaji.leaveTotal = props.data.leaveTotal;
     formDataHaji.leaveStartDate = props.data.leaveStartDate;
     formDataHaji.leaveEndDate = props.data.leaveEndDate;
-    formDataHaji.totalLeave = props.data.totalLeave;
     formDataHaji.hajjDayStatus = props.data.hajjDayStatus;
     formDataHaji.leaveDetail = props.data.leaveDetail;
     leaveDocumentList.value = props.data.leaveDocument;
+    formDataHaji.leaveRange = props.data.leaveRange;
+    formDataHaji.leaveRangeEnd = props.data.leaveRangeEnd;
     statusCheck.value = props.data.status;
     // formDataHaji.leaveDocument = props.data.leaveDocument;
     leaveId.value = props.data.id;
@@ -203,7 +229,7 @@ onMounted(() => {
         <q-input
           v-model="formDataHaji.leaveWrote"
           ref="leaveWroteRef"
-          class="col-12 col-sm-12 cursor-pointer inputgreen"
+          class="col-12 col-sm-12 inputgreen"
           bg-color="white"
           dense
           outlined
@@ -213,19 +239,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 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 +264,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 +291,41 @@ onMounted(() => {
                 </q-input>
               </template>
             </datepicker>
-
+            <q-select
+              outlined
+              dense
+              class="col-12 col-md-3 col-sm-6 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 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 +336,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,31 +362,57 @@ onMounted(() => {
                 </q-input>
               </template>
             </datepicker>
-
+            <q-select
-            <q-input
+              v-if="!checkDate"
-              :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"
+              dense
-              for="leaveTotalRef"
+              class="col-12 col-md-3 col-sm-6 inputgreen"
-              v-model="formDataHaji.leaveTotal"
+              bg-color="white"
-              label="จำนวนวันที่ลา"
+              v-model="formDataHaji.leaveRangeEnd"
-              readonly
+              :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:hint>
+              <template v-slot:prepend>
-                <span style="color: red">
+                <q-icon
-                  {{ !isLeave ? reasonLeave : "" }}
+                  name="mdi-clock-outline"
-                </span>
+                  style="color: var(--q-primary)"
+                />
               </template>
-            </q-input>
+            </q-select>
+          </div>
+        </div>
+
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <div class="col-12 col-md-3 col-sm-6">
+              <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="formDataHaji.leaveTotal"
+                label="จำนวนวันที่ลา (วัน)"
+                readonly
+              >
+                <template v-slot:hint>
+                  <span style="color: red">
+                    {{ !isLeave ? reasonLeave : "" }}
+                  </span>
+                </template>
+              </q-input>
+            </div>
 
             <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
@@ -404,16 +480,18 @@ onMounted(() => {
           />
         </div>
 
-        <q-input
+        <div class="col-12 inputgreen">
-          v-model="formDataHaji.leaveDetail"
+          <q-input
-          class="col-12 q-mt-sm cursor-pointer inputgreen"
+            v-model="formDataHaji.leaveDetail"
-          bg-color="white"
+            :readonly="!edit || statusCheck === 'NEW'"
-          dense
+            bg-color="white"
-          outlined
+            dense
-          type="textarea"
+            outlined
-          label="สาเหตุการลา"
+            type="textarea"
-          :readonly="!edit || statusCheck === 'NEW'"
+            label="สาเหตุการลา"
-        />
+          />
+        </div>
+
         <div class="full-width" v-if="statusCheck != 'NEW'">
           <div class="q-col-gutter-sm row">
             <!-- multiple -->

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;
@@ -220,172 +270,237 @@ onMounted(() => {
   <form @submit.prevent="onValidate">
     <q-card bordered class="q-pa-md bg-grey-1">
       <div class="row q-pa-sm q-col-gutter-sm">
-        <q-input
+        <div class="col-12 inputgreen">
-          ref="leaveWroteRef"
+          <q-input
-          class="col-12 col-sm-12 cursor-pointer inputgreen"
+            ref="leaveWroteRef"
-          dense
+            dense
-          outlined
+            outlined
-          bg-color="white"
+            bg-color="white"
-          hide-bottom-space
+            hide-bottom-space
-          v-model="formDataMilitary.leaveWrote"
+            v-model="formDataMilitary.leaveWrote"
-          label="เขียนที่"
+            label="เขียนที่"
-          :readonly="!edit || statusCheck === 'NEW'"
+            :readonly="!edit || statusCheck === 'NEW'"
-          :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
+            :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
-        />
+          />
+        </div>
 
-        <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"
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
-          v-model="formDataMilitary.leaveStartDate"
+              <datepicker
-          :locale="'th'"
+                menu-class-name="modalfix"
-          autoApply
+                v-model="formDataMilitary.leaveStartDate"
-          borderless
+                :locale="'th'"
-          :enableTimePicker="false"
+                autoApply
-          week-start="0"
+                hide-bottom-space
-          :readonly="!edit || statusCheck === 'NEW'"
+                borderless
-          @update:model-value="formDataMilitary.leaveEndDate = null"
+                :enableTimePicker="false"
-        >
+                week-start="0"
-          <template #year="{ year }">
+                :readonly="!edit || statusCheck === 'NEW'"
-            {{ year + 543 }}
+                @update:model-value="
-          </template>
+                  (formDataMilitary.leaveEndDate = null), fetchCheck()
-          <template #year-overlay-value="{ value }">
+                "
-            {{ parseInt(value + 543) }}
+              >
-          </template>
+                <template #year="{ year }">
-          <template #trigger>
+                  {{ year + 543 }}
-            <q-input
+                </template>
-              outlined
+                <template #year-overlay-value="{ value }">
-              bg-color="white"
+                  {{ parseInt(value + 543) }}
-              dense
+                </template>
-              ref="leaveStartDateRef"
+                <template #trigger>
-              hide-bottom-space
+                  <q-input
-              :readonly="!edit || statusCheck === 'NEW'"
+                    outlined
-              class="full-width datepicker"
+                    dense
-              :model-value="
+                    ref="leaveStartDateRef"
-                formDataMilitary.leaveStartDate != null
+                    for="leaveStartDateRef"
-                  ? date2Thai(formDataMilitary.leaveStartDate)
+                    hide-bottom-space
-                  : null
+                    bg-color="white"
-              "
+                    :readonly="!edit || statusCheck === 'NEW'"
-              :label="`${'ลาตั้งแต่วันที่'}`"
+                    class="full-width datepicker"
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+                    :model-value="
-            >
+                      formDataMilitary.leaveStartDate != null
-              <template v-slot:prepend>
+                        ? date2Thai(formDataMilitary.leaveStartDate)
-                <q-icon
+                        : null
-                  name="event"
+                    "
-                  class="cursor-pointer"
+                    :label="`${'วันที่เริ่มต้น'}`"
-                  style="color: var(--q-primary)"
+                    :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
-                >
+                  >
-                </q-icon>
+                    <template v-slot:prepend>
-              </template>
+                      <q-icon
-            </q-input>
+                        name="event"
-          </template>
+                        class="cursor-pointer"
-        </datepicker>
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
 
-        <datepicker
+            <!-- <div class="col-12 col-sm-3 inputgreen">
-          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+              <q-select
-          menu-class-name="modalfix"
+                outlined
-          v-model="formDataMilitary.leaveEndDate"
+                dense
-          :locale="'th'"
+                bg-color="white"
-          autoApply
+                v-model="formDataMilitary.leaveRange"
-          borderless
+                :options="dataStore.rangeOptions"
-          :enableTimePicker="false"
+                emit-value
-          week-start="0"
+                map-options
-          @update:model-value="updateLeaveTotal, fetchCheck()"
+                option-value="id"
-          :readonly="!formDataMilitary.leaveStartDate || statusCheck === 'NEW'"
+                option-label="name"
-          :min-date="formDataMilitary.leaveStartDate"
+                @update:model-value="fetchCheck()"
-        >
+              >
-          <template #year="{ year }">
+                <template v-slot:prepend>
-            {{ year + 543 }}
+                  <q-icon
-          </template>
+                    name="mdi-clock-outline"
-          <template #year-overlay-value="{ value }">
+                    style="color: var(--q-primary)"
-            {{ parseInt(value + 543) }}
+                  />
-          </template>
+                </template>
-          <template #trigger>
+              </q-select>
-            <q-input
+            </div> -->
-              outlined
+            <!-- </div>
-              dense
+        </div>
-              ref="leaveEndDateRef"
-              bg-color="white"
-              hide-bottom-space
-              :readonly="
-                !formDataMilitary.leaveStartDate || statusCheck === 'NEW'
-              "
-              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-input
+        <div class="col-12">
-          :bottom-slots="!isLeave ? true : false"
+          <div class="row q-col-gutter-sm"> -->
-          :color="!isLeave ? 'red' : 'black'"
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
-          :bg-color="!isLeave ? 'red-2' : 'white'"
+              <datepicker
-          :border-color="!isLeave ? 'red' : 'gray'"
+                menu-class-name="modalfix"
-          :input-class="!isLeave ? dateEndInputStyle : ''"
+                v-model="formDataMilitary.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="formDataMilitary.leaveTotal"
+                :enableTimePicker="false"
-          label="จำนวนวันที่ลา"
+                week-start="0"
-          readonly
+                :min-date="formDataMilitary.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="
+                      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>
+            </div>
+
+            <!-- <div class="col-12 col-sm-3 inputgreen">
+              <q-select
+                v-if="!checkDate"
+                outlined
+                dense
+                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>
 
         <div class="full-width">
-          <div class="q-col-gutter-sm row">
+          <div class="q-col-gutter-sm row"> -->
-            <q-input
+            <div class="col-12 col-md-3 col-sm-6">
-              ref="absentDaySummonRef"
+              <q-input
-              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+                :bottom-slots="!isLeave ? true : false"
-              dense
+                :color="!isLeave ? 'red' : 'black'"
-              bg-color="white"
+                :bg-color="!isLeave ? 'red-2' : 'white'"
-              outlined
+                :border-color="!isLeave ? 'red' : 'gray'"
-              v-model="formDataMilitary.absentDaySummon"
+                :input-class="!isLeave ? dateEndInputStyle : ''"
-              label="ได้รับหมายเรียกของ"
+                dense
-              hide-bottom-space
+                outlined
-              :readonly="!edit || statusCheck === 'NEW'"
+                ref="leaveTotalRef"
-              :rules="[(val:string) => !!val || `${'กรุณากรอกได้รับหมายเรียกของ'}`]"
+                for="leaveTotalRef"
-            />
+                v-model="leaveText"
+                label="จำนวนวันที่ลา"
+                readonly
+              >
+                <template v-slot:hint>
+                  <span style="color: red">
+                    {{ !isLeave ? reasonLeave : "" }}
+                  </span>
+                </template>
+              </q-input>
+            </div>
+          </div>
+        </div>
 
-            <q-input
+        <div class="col-12">
-              ref="atRef"
+          <div class="row q-col-gutter-sm">
-              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+            <div class="col-12 col-md-8 col-sm-6 inputgreen">
-              dense
+              <q-input
-              bg-color="white"
+                ref="absentDaySummonRef"
-              outlined
+                dense
-              v-model="formDataMilitary.absentDayLocation"
+                bg-color="white"
-              label="ที่"
+                outlined
-              hide-bottom-space
+                v-model="formDataMilitary.absentDaySummon"
-              :readonly="!edit || statusCheck === 'NEW'"
+                label="ได้รับหมายเรียกของ"
-              :rules="[(val:string) => !!val || `${'กรุณากรอกที่'}`]"
+                hide-bottom-space
-            />
+                :readonly="!edit || statusCheck === 'NEW'"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกได้รับหมายเรียกของ'}`]"
+              />
+            </div>
+
+            <div class="col-12 col-md-4 col-sm-6 inputgreen">
+              <q-input
+                ref="atRef"
+                dense
+                bg-color="white"
+                outlined
+                v-model="formDataMilitary.absentDayLocation"
+                label="ที่"
+                hide-bottom-space
+                :readonly="!edit || statusCheck === 'NEW'"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกที่'}`]"
+              />
+            </div>
           </div>
         </div>
 
         <div class="full-width">
           <div class="q-col-gutter-sm row">
             <datepicker
-              class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+              class="col-12 col-md-4 col-sm-6 inputgreen"
               menu-class-name="modalfix"
               v-model="formDataMilitary.absentDayRegistorDate"
               :locale="'th'"
@@ -431,7 +546,7 @@ onMounted(() => {
             </datepicker>
 
             <q-input
-              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              class="col-12 col-md-4 col-sm-6 inputgreen"
               dense
               bg-color="white"
               ref="absentDayGetInRef"
@@ -444,7 +559,7 @@ onMounted(() => {
             />
 
             <q-input
-              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              class="col-12 col-md-4 col-sm-12 inputgreen"
               dense
               bg-color="white"
               outlined
@@ -458,16 +573,17 @@ onMounted(() => {
           </div>
         </div>
 
-        <q-input
+        <div class="col-12 inputgreen">
-          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+          <q-input
-          dense
+            v-model="formDataMilitary.leaveDetail"
-          :readonly="!edit || statusCheck === 'NEW'"
+            :readonly="!edit || statusCheck === 'NEW'"
-          bg-color="white"
+            bg-color="white"
-          outlined
+            dense
-          v-model="formDataMilitary.leaveDetail"
+            outlined
-          type="textarea"
+            type="textarea"
-          label="สาเหตุการลา"
+            label="สาเหตุการลา"
-        />
+          />
+        </div>
 
         <div class="col-12" v-if="statusCheck != 'NEW'">
           <!-- multiple -->

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;
   }
@@ -260,368 +298,447 @@ onMounted(async () => {
   <form @submit.prevent="onValidate">
     <q-card bordered class="q-pa-md bg-grey-1">
       <div class="row q-pa-sm q-col-gutter-sm">
-        <q-input
+        <div class="col-12 inputgreen">
-          v-model="formDataStudy.leaveWrote"
+          <q-input
-          ref="leaveWroteRef"
+            v-model="formDataStudy.leaveWrote"
-          class="col-12 col-sm-12 cursor-pointer inputgreen"
+            ref="leaveWroteRef"
-          bg-color="white"
+            bg-color="white"
-          dense
+            dense
-          outlined
+            outlined
-          label="เขียนที่"
+            label="เขียนที่"
-          hide-bottom-space
+            hide-bottom-space
-          :readonly="!edit || statusCheck === 'NEW'"
+            :readonly="!edit || statusCheck === 'NEW'"
-          :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
+            :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
-        />
+          />
+        </div>
 
-        <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"
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
-          menu-class-name="modalfix"
+              <datepicker
-          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 }">
+                :readonly="!edit || statusCheck === 'NEW'"
-            {{ year + 543 }}
+                @update:model-value="
-          </template>
+                  (formDataStudy.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>
-              outlined
+                <template #trigger>
-              dense
+                  <q-input
-              lazy-rules
+                    outlined
-              :readonly="!edit || statusCheck === 'NEW'"
+                    dense
-              hide-bottom-space
+                    ref="leaveStartDateRef"
-              :label="`${'ลาตั้งแต่วันที่'}`"
+                    for="leaveStartDateRef"
-              :model-value="
+                    hide-bottom-space
-                formDataStudy.leaveStartDate != null
+                    bg-color="white"
-                  ? date2Thai(formDataStudy.leaveStartDate)
+                    :readonly="!edit || statusCheck === 'NEW'"
-                  : null
+                    class="full-width datepicker"
-              "
+                    :model-value="
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+                      formDataStudy.leaveStartDate != null
-            >
+                        ? date2Thai(formDataStudy.leaveStartDate)
-              <template v-slot:prepend>
+                        : null
-                <q-icon
+                    "
-                  name="event"
+                    :label="`${'วันที่เริ่มต้น'}`"
-                  class="cursor-pointer"
+                    :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
-                  style="color: var(--q-primary)"
+                  >
-                >
+                    <template v-slot:prepend>
-                </q-icon>
+                      <q-icon
-              </template>
+                        name="event"
-            </q-input>
+                        class="cursor-pointer"
-          </template>
+                        style="color: var(--q-primary)"
-        </datepicker>
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
 
-        <datepicker
+            <!-- <div class="col-12 col-sm-3 inputgreen">
-          v-model="formDataStudy.leaveEndDate"
+              <q-select
-          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+                outlined
-          menu-class-name="modalfix"
+                dense
-          autoApply
+                bg-color="white"
-          borderless
+                v-model="formDataStudy.leaveRange"
-          week-start="0"
+                :options="dataStore.rangeOptions"
-          :locale="'th'"
+                emit-value
-          @update:model-value="updateLeaveTotal(), fetchCheck()"
+                map-options
-          :readonly="!formDataStudy.leaveStartDate || statusCheck === 'NEW'"
+                option-value="id"
-          :enableTimePicker="false"
+                option-label="name"
-          :min-date="formDataStudy.leaveStartDate"
+                @update:model-value="fetchCheck()"
-        >
+              >
-          <template #year="{ year }">
+                <template v-slot:prepend>
-            {{ year + 543 }}
+                  <q-icon
-          </template>
+                    name="mdi-clock-outline"
-          <template #year-overlay-value="{ value }">
+                    style="color: var(--q-primary)"
-            {{ parseInt(value + 543) }}
+                  />
-          </template>
+                </template>
-          <template #trigger>
+              </q-select>
-            <q-input
+            </div> -->
-              ref="leaveEndDateRef"
+            <!-- </div>
-              class="full-width datepicker"
+        </div>
-              outlined
-              dense
-              lazy-rules
-              bg-color="white"
-              hide-bottom-space
-              :label="`${'ลาถึงวันที่'}`"
-              :readonly="!formDataStudy.leaveStartDate || statusCheck === 'NEW'"
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-              :model-value="
-                formDataStudy.leaveEndDate != null
-                  ? date2Thai(formDataStudy.leaveEndDate)
-                  : null
-              "
-            >
-              <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
+        <div class="col-12">
-          :bottom-slots="!isLeave ? true : false"
+          <div class="row q-col-gutter-sm"> -->
-          :color="!isLeave ? 'red' : 'black'"
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
-          :bg-color="!isLeave ? 'red-2' : 'white'"
+              <datepicker
-          :border-color="!isLeave ? 'red' : 'gray'"
+                menu-class-name="modalfix"
-          :input-class="!isLeave ? dateEndInputStyle : ''"
+                v-model="formDataStudy.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="formDataStudy.leaveTotal"
+                :enableTimePicker="false"
-          label="มีกำหนด"
+                week-start="0"
-          readonly
+                :min-date="formDataStudy.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="
+                      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>
+            </div>
+
+            <!-- <div class="col-12 col-sm-3  inputgreen">
+              <q-select
+                v-if="!checkDate"
+                outlined
+                dense
+                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>
+
+        <div class="full-width">
+          <div class="q-col-gutter-sm row"> -->
+            <div class="col-12 col-md-3 col-sm-6">
+              <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>
+        </div>
 
         <div class="full-width">
           <div class="q-col-gutter-sm row">
-            <datepicker
+            <div class="col-12 col-md-3 col-sm-6">
-              class="col-12 col-md-3 col-sm-6"
+              <datepicker
-              menu-class-name="modalfix"
+                menu-class-name="modalfix"
-              autoApply
+                autoApply
-              borderless
+                borderless
-              week-start="0"
+                week-start="0"
-              readonly
+                readonly
-              :enableTimePicker="false"
+                :enableTimePicker="false"
-              :locale="'th'"
+                :locale="'th'"
-            >
+              >
-              <template #year="{ year }">
+                <template #year="{ year }">
-                {{ year + 543 }}
+                  {{ year + 543 }}
-              </template>
+                </template>
-              <template #year-overlay-value="{ value }">
+                <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
+                  {{ parseInt(value + 543) }}
-              </template>
+                </template>
-              <template #trigger>
+                <template #trigger>
-                <q-input
+                  <q-input
-                  ref="leavegovernmentDateRef"
+                    ref="leavegovernmentDateRef"
-                  class="full-width"
+                    class="full-width"
-                  bg-color="white"
+                    bg-color="white"
-                  outlined
+                    outlined
-                  readonly
+                    readonly
-                  dense
+                    dense
-                  hide-bottom-space
+                    hide-bottom-space
-                  :label="`${'วันที่เข้ารับราชการ'}`"
+                    :label="`${'วันที่เข้ารับราชการ'}`"
-                  :model-value="
+                    :model-value="
-                    dataStore.dateAppoint != null
+                      dataStore.dateAppoint != null
-                      ? date2Thai(dataStore.dateAppoint)
+                        ? date2Thai(dataStore.dateAppoint)
-                      : null
+                        : null
-                  "
+                    "
-                  :rules="[
+                    :rules="[
                     (val:string) => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`,
                   ]"
-                >
+                  >
-                  <template v-slot:prepend>
+                    <template v-slot:prepend>
-                    <q-icon
+                      <q-icon
-                      name="event"
+                        name="event"
-                      class="cursor-pointer"
+                        class="cursor-pointer"
-                      style="color: var(--black)"
+                        style="color: var(--black)"
-                    >
+                      >
-                    </q-icon>
+                      </q-icon>
-                  </template>
+                    </template>
-                </q-input>
+                  </q-input>
-              </template>
+                </template>
-            </datepicker>
+              </datepicker>
+            </div>
 
-            <datepicker
+            <div class="col-12 col-md-3 col-sm-6">
-              class="col-12 col-md-3 col-sm-6"
+              <datepicker
-              menu-class-name="modalfix"
+                menu-class-name="modalfix"
-              autoApply
+                autoApply
-              borderless
+                borderless
-              readonly
+                readonly
-              week-start="0"
+                week-start="0"
-              :enableTimePicker="false"
+                :enableTimePicker="false"
-              :locale="'th'"
+                :locale="'th'"
-            >
+              >
-              <template #year="{ year }">
+                <template #year="{ year }">
-                {{ year + 543 }}
+                  {{ year + 543 }}
-              </template>
+                </template>
-              <template #year-overlay-value="{ value }">
+                <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
+                  {{ parseInt(value + 543) }}
-              </template>
+                </template>
-              <template #trigger>
+                <template #trigger>
-                <q-input
+                  <q-input
-                  ref="leavebirthDateRef"
+                    ref="leavebirthDateRef"
-                  class="full-width"
+                    class="full-width"
-                  bg-color="white"
+                    bg-color="white"
-                  outlined
+                    outlined
-                  dense
+                    dense
-                  readonly
+                    readonly
-                  hide-bottom-space
+                    hide-bottom-space
-                  :label="`${'วันเดือนปีเกิด'}`"
+                    :label="`${'วันเดือนปีเกิด'}`"
-                  :model-value="
+                    :model-value="
-                    dataStore.birthDate != null
+                      dataStore.birthDate != null
-                      ? date2Thai(dataStore.birthDate)
+                        ? date2Thai(dataStore.birthDate)
-                      : null
+                        : null
-                  "
+                    "
-                >
+                  >
-                  <template v-slot:prepend>
+                    <template v-slot:prepend>
-                    <q-icon
+                      <q-icon
-                      name="event"
+                        name="event"
-                      class="cursor-pointer"
+                        class="cursor-pointer"
-                      style="color: var(--black)"
+                        style="color: var(--black)"
-                    >
+                      >
-                    </q-icon>
+                      </q-icon>
-                  </template>
+                    </template>
-                </q-input>
+                  </q-input>
-              </template>
+                </template>
-            </datepicker>
+              </datepicker>
+            </div>
 
-            <q-input
+            <div class="col-12 col-md-3 col-sm-6">
-              :model-value="dataStore.salary"
+              <q-input
-              ref="leaveSalaryRef"
+                :model-value="dataStore.salary"
-              class="col-12 col-sm-6 col-md-3"
+                ref="leaveSalaryRef"
-              bg-color="white"
+                bg-color="white"
-              dense
+                dense
-              outlined
+                outlined
-              readonly
+                readonly
-              label="เงินเดือนปัจจุบัน"
+                label="เงินเดือนปัจจุบัน"
-            />
+              />
+            </div>
 
-            <q-input
+            <div class="col-12 col-md-3 col-sm-6">
-              :model-value="dataStore.salaryText"
+              <q-input
-              ref="leaveSalaryRef"
+                :model-value="dataStore.salaryText"
-              class="col-12 col-sm-6 col-md-3"
+                ref="leaveSalaryRef"
-              bg-color="white"
+                bg-color="white"
-              dense
+                dense
-              readonly
+                readonly
-              outlined
+                outlined
-              label="เงินเดือนปัจจุบัน (ตัวอักษร)"
+                label="เงินเดือนปัจจุบัน (ตัวอักษร)"
-              hide-bottom-space
+                hide-bottom-space
-              :rules="[(val:string) => !!val || `${'กรุณากรอกเงินเดือนปัจจุบัน'}`]"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกเงินเดือนปัจจุบัน'}`]"
-            />
+              />
+            </div>
           </div>
         </div>
 
         <div class="full-width">
           <div class="q-col-gutter-sm row">
-            <q-input
+            <div class="col-12 col-md-4 col-sm-12 inputgreen">
-              v-model="formDataStudy.studyDayUniversityName"
+              <q-input
-              ref="studyDayUniversityNameRef"
+                v-model="formDataStudy.studyDayUniversityName"
-              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+                ref="studyDayUniversityNameRef"
-              bg-color="white"
+                bg-color="white"
-              dense
+                dense
-              outlined
+                outlined
-              :readonly="!edit || statusCheck === 'NEW'"
+                :readonly="!edit || statusCheck === 'NEW'"
-              label="ชื่อสถานศึกษา"
+                label="ชื่อสถานศึกษา"
-              hide-bottom-space
+                hide-bottom-space
-              :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อสถานศึกษา'}`]"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อสถานศึกษา'}`]"
-            />
+              />
+            </div>
 
-            <q-input
+            <div class="col-12 col-md-4 col-sm-6 inputgreen">
-              v-model="formDataStudy.studyDayDegreeLevel"
+              <q-input
-              ref="studyDayDegreeLevelRef"
+                v-model="formDataStudy.studyDayDegreeLevel"
-              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+                ref="studyDayDegreeLevelRef"
-              bg-color="white"
+                bg-color="white"
-              dense
+                dense
-              outlined
+                outlined
-              :readonly="!edit || statusCheck === 'NEW'"
+                :readonly="!edit || statusCheck === 'NEW'"
-              label="ชั้นปริญญา"
+                label="ชั้นปริญญา"
-              hide-bottom-space
+                hide-bottom-space
-              :rules="[(val:string) => !!val || `${'กรุณากรอกชั้นปริญญา'}`]"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกชั้นปริญญา'}`]"
-            />
+              />
+            </div>
 
-            <q-input
+            <div class="col-12 col-md-4 col-sm-6 inputgreen">
-              v-model="formDataStudy.studyDaySubject"
+              <q-input
-              ref="studyDaySubjectRef"
+                v-model="formDataStudy.studyDaySubject"
-              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+                ref="studyDaySubjectRef"
-              bg-color="white"
+                bg-color="white"
-              dense
+                dense
-              outlined
+                outlined
-              :readonly="!edit || statusCheck === 'NEW'"
+                :readonly="!edit || statusCheck === 'NEW'"
-              label="ศึกษาวิชา"
+                label="ศึกษาวิชา"
-              hide-bottom-space
+                hide-bottom-space
-              :rules="[(val:string) => !!val || `${'กรุณากรอกศึกษาวิชา'}`]"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกศึกษาวิชา'}`]"
-            />
+              />
+            </div>
 
-            <q-input
+            <div class="col-12 col-md-4 col-sm-6 inputgreen">
-              v-model="formDataStudy.studyDayCountry"
+              <q-input
-              ref="studyDayCountryRef"
+                v-model="formDataStudy.studyDayCountry"
-              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+                ref="studyDayCountryRef"
-              bg-color="white"
+                bg-color="white"
-              dense
+                dense
-              outlined
+                outlined
-              :readonly="!edit || statusCheck === 'NEW'"
+                :readonly="!edit || statusCheck === 'NEW'"
-              label="ประเทศ"
+                label="ประเทศ"
-              hide-bottom-space
+                hide-bottom-space
-              :rules="[(val:string) => !!val || `${'กรุณากรอกประเทศ'}`]"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกประเทศ'}`]"
-            />
+              />
+            </div>
 
-            <q-input
+            <div class="col-12 col-md-4 col-sm-6 inputgreen">
-              v-model="formDataStudy.studyDayScholarship"
+              <q-input
-              ref="studyDayScholarshipRef"
+                v-model="formDataStudy.studyDayScholarship"
-              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+                ref="studyDayScholarshipRef"
-              bg-color="white"
+                bg-color="white"
-              dense
+                dense
-              outlined
+                outlined
-              :readonly="!edit || statusCheck === 'NEW'"
+                :readonly="!edit || statusCheck === 'NEW'"
-              label="ด้วยทุน"
+                label="ด้วยทุน"
-              hide-bottom-space
+                hide-bottom-space
-              :rules="[(val:string) => !!val || `${'กรุณากรอกด้วยทุน'}`]"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกด้วยทุน'}`]"
-            />
+              />
-
+            </div>
-            <q-input
-              v-model="dataStore.telephoneNumber"
-              ref="leaveNumberRef"
-              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-              bg-color="white"
-              dense
-              outlined
-              :readonly="!edit || statusCheck === 'NEW'"
-              unmasked-value
-              hide-bottom-space
-              mask="(###)-###-####"
-              label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-              :rules="[
-                (val:string) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
-              ]"
-            />
-
-            <q-input
-              v-model="dataStore.currentAddress"
-              ref="leaveAddressRef"
-              class="col-12 cursor-pointer inputgreen"
-              bg-color="white"
-              dense
-              outlined
-              :readonly="!edit || statusCheck === 'NEW'"
-              label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
-              hide-bottom-space
-              :rules="[
-                (val:string) => !!val || `${'กรุณากรอก ที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
-              ]"
-            />
           </div>
         </div>
 
-        <q-input
+        <div class="full-width">
-          v-model="formDataStudy.leaveDetail"
+          <div class="q-col-gutter-sm row">
-          :readonly="!edit || statusCheck === 'NEW'"
+            <div class="col-12 col-md-4 col-sm-12 inputgreen">
-          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+              <q-input
-          bg-color="white"
+                v-model="dataStore.telephoneNumber"
-          dense
+                ref="leaveNumberRef"
-          outlined
+                bg-color="white"
-          type="textarea"
+                dense
-          label="สาเหตุการลา"
+                outlined
-        />
+                :readonly="!edit || statusCheck === 'NEW'"
+                unmasked-value
+                hide-bottom-space
+                mask="(###)-###-####"
+                label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+                :rules="[
+                (val:string) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
+              ]"
+              />
+            </div>
+
+            <div class="col-12 col-md-8 col-sm-12 inputgreen">
+              <q-input
+                v-model="dataStore.currentAddress"
+                ref="leaveAddressRef"
+                bg-color="white"
+                dense
+                outlined
+                :readonly="!edit || statusCheck === 'NEW'"
+                label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
+                hide-bottom-space
+                :rules="[
+                (val:string) => !!val || `${'กรุณากรอก ที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
+              ]"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div class="col-12 inputgreen">
+          <q-input
+            v-model="formDataStudy.leaveDetail"
+            :readonly="!edit || statusCheck === 'NEW'"
+            bg-color="white"
+            dense
+            outlined
+            type="textarea"
+            label="สาเหตุการลา"
+          />
+        </div>
 
         <div class="col-12" v-if="statusCheck != 'NEW'">
           <q-file

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

@@ -17,11 +17,13 @@ const {
   date2Thai,
   arabicNumberToText,
   calculateDurationYmd,
-  dateToISO,
   messageError,
-  convertDateToAPI
+  convertDateToAPI,
+  showLoader,
+  hideLoader,
 } = mixin;
 
+const leaveText = ref<string>("");
 const edit = ref<boolean>(true);
 const leaveId = ref<any>("");
 
@@ -58,6 +60,8 @@ const formDataTrain = reactive<any>({
   studyDayScholarship: "",
   studyDayCountry: "",
   studyDayTrainingSubject: "",
+  leaveRange: "ALL",
+  leaveRangeEnd: "ALL",
   studyDayTrainingName: "",
   leaveDocument: [],
   leaveDetail: "",
@@ -123,11 +127,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 +146,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;
+      formDataTrain.leaveTotal = 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 +224,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 +251,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 +262,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;
@@ -244,312 +278,386 @@ onMounted(async () => {
   <form @submit.prevent="onValidate">
     <q-card bordered class="q-pa-md bg-grey-1">
       <div class="row q-pa-sm q-col-gutter-sm">
-        <q-input
+        <div class="col-12 inputgreen">
-          v-model="formDataTrain.leaveWrote"
+          <q-input
-          ref="leaveWroteRef"
+            v-model="formDataTrain.leaveWrote"
-          class="col-12 col-sm-12 cursor-pointer inputgreen"
+            ref="leaveWroteRef"
-          bg-color="white"
+            bg-color="white"
-          dense
+            dense
-          outlined
+            outlined
-          label="เขียนที่"
+            label="เขียนที่"
-          :readonly="!edit || statusCheck === 'NEW'"
+            :readonly="!edit || statusCheck === 'NEW'"
-          hide-bottom-space
+            hide-bottom-space
-          :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
+            :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
-        />
+          />
+        </div>
 
-        <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"
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
-          menu-class-name="modalfix"
+              <datepicker
-          autoApply
+                menu-class-name="modalfix"
-          borderless
+                v-model="formDataTrain.leaveStartDate"
-          week-start="0"
+                :locale="'th'"
-          :enableTimePicker="false"
+                autoApply
-          :locale="'th'"
+                hide-bottom-space
-          :readonly="!edit || statusCheck === 'NEW'"
+                borderless
-          @update:model-value="formDataTrain.leaveEndDate = null"
+                :enableTimePicker="false"
-        >
+                week-start="0"
-          <template #year="{ year }">
+                :readonly="!edit || statusCheck === 'NEW'"
-            {{ year + 543 }}
+                @update:model-value="
-          </template>
+                  (formDataTrain.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>
-              outlined
+                <template #trigger>
-              dense
+                  <q-input
-              lazy-rules
+                    outlined
-              hide-bottom-space
+                    dense
-              :readonly="!edit || statusCheck === 'NEW'"
+                    ref="leaveStartDateRef"
-              :label="`${'ลาตั้งแต่วันที่'}`"
+                    for="leaveStartDateRef"
-              :model-value="
+                    hide-bottom-space
-                formDataTrain.leaveStartDate != null
+                    bg-color="white"
-                  ? date2Thai(formDataTrain.leaveStartDate)
+                    :readonly="!edit || statusCheck === 'NEW'"
-                  : null
+                    class="full-width datepicker"
-              "
+                    :model-value="
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+                      formDataTrain.leaveStartDate != null
-            >
+                        ? date2Thai(formDataTrain.leaveStartDate)
-              <template v-slot:prepend>
+                        : null
-                <q-icon
+                    "
-                  name="event"
+                    :label="`${'วันที่เริ่มต้น'}`"
-                  class="cursor-pointer"
+                    :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
-                  style="color: var(--q-primary)"
+                  >
-                >
+                    <template v-slot:prepend>
-                </q-icon>
+                      <q-icon
-              </template>
+                        name="event"
-            </q-input>
+                        class="cursor-pointer"
-          </template>
+                        style="color: var(--q-primary)"
-        </datepicker>
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
 
-        <datepicker
+            <!-- <div class="col-12 col-sm-3 inputgreen">
-          v-model="formDataTrain.leaveEndDate"
+              <q-select
-          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+                outlined
-          menu-class-name="modalfix"
+                dense
-          autoApply
+                bg-color="white"
-          borderless
+                v-model="formDataTrain.leaveRange"
-          @update:model-value="updateLeaveTotal(), fetchCheck()"
+                :options="dataStore.rangeOptions"
-          week-start="0"
+                emit-value
-          :readonly="!formDataTrain.leaveStartDate || statusCheck === 'NEW'"
+                map-options
-          :locale="'th'"
+                option-value="id"
-          :enableTimePicker="false"
+                option-label="name"
-          :min-date="formDataTrain.leaveStartDate"
+                @update:model-value="fetchCheck()"
-        >
+              >
-          <template #year="{ year }">
+                <template v-slot:prepend>
-            {{ year + 543 }}
+                  <q-icon
-          </template>
+                    name="mdi-clock-outline"
-          <template #year-overlay-value="{ value }">
+                    style="color: var(--q-primary)"
-            {{ parseInt(value + 543) }}
+                  />
-          </template>
+                </template>
-          <template #trigger>
+              </q-select>
-            <q-input
+            </div> -->
-              ref="leaveEndDateRef"
+            <!-- </div>
-              class="full-width datepicker"
+        </div>
-              outlined
+        <div class="col-12">
-              dense
+          <div class="row q-col-gutter-sm"> -->
-              lazy-rules
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
-              bg-color="white"
+              <datepicker
-              hide-bottom-space
+                menu-class-name="modalfix"
-              :label="`${'ลาถึงวันที่'}`"
+                v-model="formDataTrain.leaveEndDate"
-              :readonly="!formDataTrain.leaveStartDate || statusCheck === 'NEW'"
+                :locale="'th'"
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+                autoApply
-              :model-value="
+                hide-bottom-space
-                formDataTrain.leaveEndDate != null
+                @update:model-value="fetchCheck()"
-                  ? date2Thai(formDataTrain.leaveEndDate)
+                borderless
-                  : null
+                :enableTimePicker="false"
-              "
+                week-start="0"
-            >
+                :min-date="formDataTrain.leaveStartDate"
-              <template v-slot:prepend>
+              >
-                <q-icon
+                <template #year="{ year }">
-                  name="event"
+                  {{ year + 543 }}
-                  class="cursor-pointer"
+                </template>
-                  style="color: var(--q-primary)"
+                <template #year-overlay-value="{ value }">
-                >
+                  {{ parseInt(value + 543) }}
-                </q-icon>
+                </template>
-              </template>
+                <template #trigger>
-            </q-input>
+                  <q-input
-          </template>
+                    outlined
-        </datepicker>
+                    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>
+            </div>
 
-        <q-input
+            <!-- <div class="col-12 col-sm-3 inputgreen">
-          class="col-12 col-md-2 col-sm-6"
+              <q-select
-          dense
+                v-if="!checkDate"
-          outlined
+                outlined
-          ref="leaveTotalRef"
+                dense
-          for="leaveTotalRef"
+                bg-color="white"
-          v-model="formDataTrain.leaveTotal"
+                v-model="formDataTrain.leaveRangeEnd"
-          label="มีกำหนด"
+                :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
-          readonly
+                emit-value
-          :bottom-slots="!isLeave ? true : false"
+                map-options
-          :color="!isLeave ? 'red' : 'black'"
+                option-value="id"
-          :bg-color="!isLeave ? 'red-2' : 'white'"
+                option-label="name"
-          :border-color="!isLeave ? 'red' : 'gray'"
+                @update:model-value="fetchCheck()"
-          :input-class="!isLeave ? dateEndInputStyle : ''"
+              >
-        >
+                <template v-slot:prepend>
-          <template v-slot:hint>
+                  <q-icon
-            <span style="color: red">
+                    name="mdi-clock-outline"
-              {{ !isLeave ? reasonLeave : "" }}
+                    style="color: var(--q-primary)"
-            </span>
+                  />
-          </template>
+                </template>
-        </q-input>
+              </q-select>
+            </div> -->
+            <!-- </div>
+        </div>
+
+        <div class="full-width">
+          <div class="q-col-gutter-sm row"> -->
+            <div class="col-12 col-md-3 col-sm-6">
+              <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>
+        </div>
 
         <div class="full-width">
           <div class="q-col-gutter-sm row">
-            <datepicker
+            <div class="col-12 col-sm-3">
-              v-model="formDataTrain.leavegovernmentDate"
+              <datepicker
-              class="col-12 col-md-3 col-sm-6"
+                v-model="formDataTrain.leavegovernmentDate"
-              menu-class-name="modalfix"
+                menu-class-name="modalfix"
-              autoApply
+                autoApply
-              borderless
+                borderless
-              week-start="0"
+                week-start="0"
-              readonly
+                readonly
-              :enableTimePicker="false"
+                :enableTimePicker="false"
-              :locale="'th'"
+                :locale="'th'"
-            >
+              >
-              <template #year="{ year }">
+                <template #year="{ year }">
-                {{ year + 543 }}
+                  {{ year + 543 }}
-              </template>
+                </template>
-              <template #year-overlay-value="{ value }">
+                <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
+                  {{ parseInt(value + 543) }}
-              </template>
+                </template>
-              <template #trigger>
+                <template #trigger>
-                <q-input
+                  <q-input
-                  ref="leavegovernmentDateRef"
+                    ref="leavegovernmentDateRef"
-                  class="full-width"
+                    class="full-width"
-                  outlined
+                    outlined
-                  readonly
+                    readonly
-                  bg-color="white"
+                    bg-color="white"
-                  dense
+                    dense
-                  hide-bottom-space
+                    hide-bottom-space
-                  :label="`${'วันที่เข้ารับราชการ'}`"
+                    :label="`${'วันที่เข้ารับราชการ'}`"
-                  :model-value="
+                    :model-value="
-                    dataStore.dateAppoint != null
+                      dataStore.dateAppoint != null
-                      ? date2Thai(dataStore.dateAppoint)
+                        ? date2Thai(dataStore.dateAppoint)
-                      : null
+                        : null
-                  "
+                    "
-                  :rules="[
+                    :rules="[
                     (val:string) => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`,
                   ]"
-                >
+                  >
-                  <template v-slot:prepend>
+                    <template v-slot:prepend>
-                    <q-icon
+                      <q-icon
-                      name="event"
+                        name="event"
-                      class="cursor-pointer"
+                        class="cursor-pointer"
-                      style="color: var(--black)"
+                        style="color: var(--black)"
-                    >
+                      >
-                    </q-icon>
+                      </q-icon>
-                  </template>
+                    </template>
-                </q-input>
+                  </q-input>
-              </template>
+                </template>
-            </datepicker>
+              </datepicker>
+            </div>
 
-            <datepicker
+            <div class="col-12 col-sm-3">
-              v-model="formDataTrain.leavebirthDate"
+              <datepicker
-              class="col-12 col-md-3 col-sm-6"
+                v-model="formDataTrain.leavebirthDate"
-              menu-class-name="modalfix"
+                menu-class-name="modalfix"
-              autoApply
+                autoApply
-              borderless
+                borderless
-              readonly
+                readonly
-              week-start="0"
+                week-start="0"
-              :enableTimePicker="false"
+                :enableTimePicker="false"
-              :locale="'th'"
+                :locale="'th'"
-            >
+              >
-              <template #year="{ year }">
+                <template #year="{ year }">
-                {{ year + 543 }}
+                  {{ year + 543 }}
-              </template>
+                </template>
-              <template #year-overlay-value="{ value }">
+                <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
+                  {{ parseInt(value + 543) }}
-              </template>
+                </template>
-              <template #trigger>
+                <template #trigger>
-                <q-input
+                  <q-input
-                  ref="leavebirthDateRef"
+                    ref="leavebirthDateRef"
-                  class="full-width"
+                    class="full-width"
-                  bg-color="white"
+                    bg-color="white"
-                  outlined
+                    outlined
-                  dense
+                    dense
-                  readonly
+                    readonly
-                  hide-bottom-space
+                    hide-bottom-space
-                  :label="`${'วันเดือนปีเกิด'}`"
+                    :label="`${'วันเดือนปีเกิด'}`"
-                  :model-value="
+                    :model-value="
-                    dataStore.birthDate != null
+                      dataStore.birthDate != null
-                      ? date2Thai(dataStore.birthDate)
+                        ? date2Thai(dataStore.birthDate)
-                      : null
+                        : null
-                  "
+                    "
-                >
+                  >
-                  <template v-slot:prepend>
+                    <template v-slot:prepend>
-                    <q-icon
+                      <q-icon
-                      name="event"
+                        name="event"
-                      class="cursor-pointer"
+                        class="cursor-pointer"
-                      style="color: var(---black)"
+                        style="color: var(---black)"
-                    >
+                      >
-                    </q-icon>
+                      </q-icon>
-                  </template>
+                    </template>
-                </q-input>
+                  </q-input>
-              </template>
+                </template>
-            </datepicker>
+              </datepicker>
+            </div>
 
-            <q-input
+            <div class="col-12 col-sm-3">
-              v-model="dataStore.salary"
+              <q-input
-              class="col-12 col-sm-6 col-md-3"
+                v-model="dataStore.salary"
-              bg-color="white"
+                bg-color="white"
-              dense
+                dense
-              outlined
+                outlined
-              readonly
+                readonly
-              label="เงินเดือนปัจจุบัน"
+                label="เงินเดือนปัจจุบัน"
-            />
+              />
+            </div>
 
-            <q-input
+            <div class="col-12 col-sm-3">
-              v-model="dataStore.salaryText"
+              <q-input
-              class="col-12 col-sm-6 col-md-3"
+                v-model="dataStore.salaryText"
-              dense
+                dense
-              readonly
+                readonly
-              outlined
+                outlined
-              bg-color="white"
+                bg-color="white"
-              label="เงินเดือนปัจจุบัน (ตัวอักษร)"
+                label="เงินเดือนปัจจุบัน (ตัวอักษร)"
-            />
+              />
+            </div>
+          </div>
+        </div>
+
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <div class="col-12 col-sm-8 inputgreen">
+              <q-input
+                v-model="formDataTrain.studyDayTrainingSubject"
+                ref="studyDayTrainingSubjectRef"
+                bg-color="white"
+                dense
+                outlined
+                label="ด้าน/หลักสูตร"
+                hide-bottom-space
+                :readonly="!edit || statusCheck === 'NEW'"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกด้าน/หลักสูตร'}`]"
+              />
+            </div>
+
+            <div class="col-12 col-sm-4 inputgreen">
+              <q-input
+                v-model="formDataTrain.studyDayTrainingName"
+                ref="studyDayTrainingNameRef"
+                bg-color="white"
+                dense
+                outlined
+                label="ณ สถานที่"
+                hide-bottom-space
+                :readonly="!edit || statusCheck === 'NEW'"
+                :rules="[(val:string) => !!val || `${'กรุณากรอก ณ สถานที่'}`]"
+              />
+            </div>
+
+            <div class="col-12 col-sm-4 inputgreen">
+              <q-input
+                v-model="formDataTrain.studyDayCountry"
+                ref="studyDayCountryRef"
+                dense
+                bg-color="white"
+                outlined
+                label="ประเทศ"
+                hide-bottom-space
+                :readonly="!edit || statusCheck === 'NEW'"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกประเทศ'}`]"
+              />
+            </div>
+
+            <div class="col-12 col-sm-8 inputgreen">
+              <q-input
+                v-model="formDataTrain.studyDayScholarship"
+                ref="studyDayScholarshipRef"
+                bg-color="white"
+                dense
+                outlined
+                label="ด้วยทุน"
+                hide-bottom-space
+                :readonly="!edit || statusCheck === 'NEW'"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกด้วยทุน'}`]"
+              />
+            </div>
           </div>
         </div>
 
         <div class="full-width">
           <div class="q-col-gutter-sm row">
-            <q-input
-              v-model="formDataTrain.studyDayTrainingSubject"
-              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-              ref="studyDayTrainingSubjectRef"
-              bg-color="white"
-              dense
-              outlined
-              label="ด้าน/หลักสูตร"
-              hide-bottom-space
-              :readonly="!edit || statusCheck === 'NEW'"
-              :rules="[(val:string) => !!val || `${'กรุณากรอกด้าน/หลักสูตร'}`]"
-            />
-
-            <q-input
-              v-model="formDataTrain.studyDayTrainingName"
-              ref="studyDayTrainingNameRef"
-              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-              bg-color="white"
-              dense
-              outlined
-              label="ณ สถานที่"
-              hide-bottom-space
-              :readonly="!edit || statusCheck === 'NEW'"
-              :rules="[(val:string) => !!val || `${'กรุณากรอก ณ สถานที่'}`]"
-            />
-
-            <q-input
-              v-model="formDataTrain.studyDayCountry"
-              ref="studyDayCountryRef"
-              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-              dense
-              bg-color="white"
-              outlined
-              label="ประเทศ"
-              hide-bottom-space
-              :readonly="!edit || statusCheck === 'NEW'"
-              :rules="[(val:string) => !!val || `${'กรุณากรอกประเทศ'}`]"
-            />
-
-            <q-input
-              v-model="formDataTrain.studyDayScholarship"
-              ref="studyDayScholarshipRef"
-              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-              bg-color="white"
-              dense
-              outlined
-              label="ด้วยทุน"
-              hide-bottom-space
-              :readonly="!edit || statusCheck === 'NEW'"
-              :rules="[(val:string) => !!val || `${'กรุณากรอกด้วยทุน'}`]"
-            />
-
             <q-input
               v-model="dataStore.telephoneNumber"
-              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              class="col-12 col-sm-4 inputgreen"
               ref="leaveNumberRef"
               dense
               outlined
@@ -567,7 +675,7 @@ onMounted(async () => {
             <q-input
               v-model="dataStore.currentAddress"
               ref="leaveAddressRef"
-              class="col-12 cursor-pointer inputgreen"
+              class="col-12 col-sm-8 inputgreen"
               bg-color="white"
               dense
               outlined
@@ -581,16 +689,17 @@ onMounted(async () => {
           </div>
         </div>
 
-        <q-input
+        <div class="col-12 inputgreen">
-          v-model="formDataTrain.leaveDetail"
+          <q-input
-          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+            v-model="formDataTrain.leaveDetail"
-          :readonly="!edit || statusCheck === 'NEW'"
+            :readonly="!edit || statusCheck === 'NEW'"
-          bg-color="white"
+            bg-color="white"
-          dense
+            dense
-          outlined
+            outlined
-          type="textarea"
+            type="textarea"
-          label="สาเหตุการลา"
+            label="สาเหตุการลา"
-        />
+          />
+        </div>
 
         <div class="col-12" v-if="statusCheck != 'NEW'">
           <q-file

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

@@ -15,11 +15,19 @@ 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,
+  calculateDurationYmd,
+  messageError,
+  showLoader,
+  hideLoader,
+  convertDateToAPI,
+} = mixin;
 
 const edit = ref<boolean>(true);
 const isSave = ref<boolean>(false);
 const leaveId = ref<string>("");
+const leaveText = ref<string>("");
 
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
@@ -48,6 +56,8 @@ const formDataWorkInternational = reactive<any>({
   leaveStartDate: null,
   leaveEndDate: null,
   leaveDetail: "",
+  leaveRange: "ALL",
+  leaveRangeEnd: "ALL",
   leaveDocument: [],
   leaveDraftDocument: null,
 });
@@ -109,15 +119,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 +155,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 +175,24 @@ 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;
 
+      leaveText.value = calculateDurationYmd(
+        formDataWorkInternational.leaveStartDate,
+        formDataWorkInternational.leaveEndDate
+      );
       reasonLeave.value = data.message
         ? data.message
         : "จำนวนวันลาเกินที่กำหนด";
@@ -177,7 +212,7 @@ const leaveDocumentList = ref<any>();
 const leaveDraftDocument = ref<string>();
 const statusCheck = ref<string>("");
 
-watch(props, () => {
+watch(props, async () => {
   if (props.data) {
     formDataWorkInternational.leaveWrote = props.data.leaveWrote;
     formDataWorkInternational.leaveStartDate = new Date(
@@ -186,10 +221,18 @@ 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;
     formDataWorkInternational.leaveDocument = [];
+    const leaveTotal = await calculateDurationYmd(
+      props.data.leaveStartDate,
+      props.data.leaveEndDate
+    );
+    leaveText.value = leaveTotal;
   }
 });
 
@@ -206,9 +249,14 @@ watch(
 );
 
 /**Hook */
-onMounted(() => {
+onMounted(async () => {
   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
     );
@@ -218,6 +266,11 @@ onMounted(() => {
     leaveDocumentList.value = props.data.leaveDocument;
     statusCheck.value = props.data.status;
     leaveId.value = props.data.id;
+    const leaveTotal = await calculateDurationYmd(
+      props.data.leaveStartDate,
+      props.data.leaveEndDate
+    );
+    leaveText.value = leaveTotal;
   }
 });
 </script>
@@ -230,141 +283,212 @@ onMounted(() => {
   <form @submit.prevent.stop="onValidate">
     <q-card bordered class="q-pa-md bg-grey-1">
       <div class="col-12 row q-pa-sm q-col-gutter-sm">
-        <q-input
+        <div class="col-12 inputgreen">
-          class="col-12 col-sm-12 cursor-pointer inputgreen"
+          <q-input
-          ref="leaveWroteRef"
+            ref="leaveWroteRef"
-          hide-bottom-space
+            hide-bottom-space
-          bg-color="white"
+            bg-color="white"
-          for="leaveWroteRef"
+            for="leaveWroteRef"
-          dense
+            dense
-          outlined
+            outlined
-          v-model="formDataWorkInternational.leaveWrote"
+            v-model="formDataWorkInternational.leaveWrote"
-          label="เขียนที่"
+            label="เขียนที่"
-          :readonly="!edit || statusCheck === 'NEW'"
+            :readonly="!edit || statusCheck === 'NEW'"
-          :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
+            :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
-        />
+          />
+        </div>
 
-        <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"
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
-          v-model="formDataWorkInternational.leaveStartDate"
+              <datepicker
-          :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 }">
-              outlined
+                  {{ parseInt(value + 543) }}
-              dense
+                </template>
-              ref="leaveStartDateRef"
+                <template #trigger>
-              for="leaveStartDateRef"
+                  <q-input
-              hide-bottom-space
+                    outlined
-              bg-color="white"
+                    dense
-              :readonly="!edit || statusCheck === 'NEW'"
+                    ref="leaveStartDateRef"
-              class="full-width datepicker"
+                    for="leaveStartDateRef"
-              :model-value="
+                    hide-bottom-space
-                formDataWorkInternational.leaveStartDate != null
+                    bg-color="white"
-                  ? date2Thai(formDataWorkInternational.leaveStartDate)
+                    :readonly="!edit || statusCheck === 'NEW'"
-                  : null
+                    class="full-width datepicker"
-              "
+                    :model-value="
-              :label="`${'ลาตั้งแต่วันที่'}`"
+                      formDataWorkInternational.leaveStartDate != null
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+                        ? date2Thai(formDataWorkInternational.leaveStartDate)
-            >
+                        : null
-              <template v-slot:prepend>
+                    "
-                <q-icon
+                    :label="`${'วันที่เริ่มต้น'}`"
-                  name="event"
+                    :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
-                  class="cursor-pointer"
+                  >
-                  style="color: var(--q-primary)"
+                    <template v-slot:prepend>
-                >
+                      <q-icon
-                </q-icon>
+                        name="event"
-              </template>
+                        class="cursor-pointer"
-            </q-input>
+                        style="color: var(--q-primary)"
-          </template>
+                      >
-        </datepicker>
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
 
-        <datepicker
+            <!-- <div class="col-12 col-md-3 col-sm-6 inputgreen">
-          :class="!isLeave ? dateEndInputStyle : ''"
+              <q-select
-          class="col-12 col-md-6 col-sm-6 cursor-pointer"
+                outlined
-          menu-class-name="modalfix"
+                dense
-          v-model="formDataWorkInternational.leaveEndDate"
+                bg-color="white"
-          :locale="'th'"
+                v-model="formDataWorkInternational.leaveRange"
-          autoApply
+                :options="dataStore.rangeOptions"
-          hide-bottom-space
+                emit-value
-          borderless
+                map-options
-          :enableTimePicker="false"
+                option-value="id"
-          week-start="0"
+                option-label="name"
-          :readonly="
+                @update:model-value="fetchCheck()"
-            !formDataWorkInternational.leaveStartDate || statusCheck === 'NEW'
+              >
-          "
+                <template v-slot:prepend>
-          :min-date="formDataWorkInternational.leaveStartDate"
+                  <q-icon
-        >
+                    name="mdi-clock-outline"
-          <template #year="{ year }">
+                    style="color: var(--q-primary)"
-            {{ year + 543 }}
+                  />
-          </template>
+                </template>
-          <template #year-overlay-value="{ value }">
+              </q-select>
-            {{ parseInt(value + 543) }}
+            </div> -->
-          </template>
+            <!-- </div>
-          <template #trigger>
+        </div>
-            <q-input
+        <div class="col-12">
-              outlined
+          <div class="row q-col-gutter-sm"> -->
-              dense
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
-              ref="leaveEndDateRef"
+              <datepicker
-              for="leaveEndDateRef"
+                menu-class-name="modalfix"
-              :readonly="
+                v-model="formDataWorkInternational.leaveEndDate"
-                !formDataWorkInternational.leaveStartDate ||
+                :locale="'th'"
-                statusCheck === 'NEW'
+                autoApply
-              "
+                hide-bottom-space
-              class="full-width datepicker"
+                @update:model-value="fetchCheck()"
-              :model-value="
+                borderless
-                formDataWorkInternational.leaveEndDate != null
+                :enableTimePicker="false"
-                  ? date2Thai(formDataWorkInternational.leaveEndDate)
+                week-start="0"
-                  : null
+                :min-date="formDataWorkInternational.leaveStartDate"
-              "
+              >
-              :label="`${'ลาถึงวันที่'}`"
+                <template #year="{ year }">
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+                  {{ year + 543 }}
-              :bottom-slots="!isLeave ? true : false"
+                </template>
-              :color="!isLeave ? 'red' : 'black'"
+                <template #year-overlay-value="{ value }">
-              :bg-color="!isLeave ? 'red-2' : 'white'"
+                  {{ parseInt(value + 543) }}
-              :border-color="!isLeave ? 'red' : 'gray'"
+                </template>
-              :input-class="!isLeave ? dateEndInputStyle : ''"
+                <template #trigger>
-            >
+                  <q-input
-              <template v-slot:prepend>
+                    outlined
-                <q-icon name="event" class="cursor-pointer" color="primary">
+                    dense
-                </q-icon>
+                    ref="leaveEndDateRef"
-              </template>
+                    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>
+            </div>
+
+            <!-- <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <q-select
+                outlined
+                dense
+                v-if="!checkDate"
+                bg-color="white"
+                v-model="formDataWorkInternational.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 class="col-12 col-md-3 col-sm-6">
+              <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>
+        </div>
+
+        <div class="col-12 inputgreen">
+          <q-input
+            hide-bottom-space
+            type="textarea"
+            dense
+            bg-color="white"
+            outlined
+            ref="leaveDetailRef"
+            for="leaveDetailRef"
+            v-model="formDataWorkInternational.leaveDetail"
+            label="สาเหตุการลา"
+            :readonly="!edit || statusCheck === 'NEW'"
+          />
+        </div>
 
-              <template v-slot:hint>
-                <span style="color: red">
-                  {{ !isLeave ? reasonLeave : "" }}
-                </span>
-              </template>
-            </q-input>
-          </template>
-        </datepicker>
-        <q-input
-          hide-bottom-space
-          type="textarea"
-          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-          dense
-          bg-color="white"
-          outlined
-          ref="leaveDetailRef"
-          for="leaveDetailRef"
-          v-model="formDataWorkInternational.leaveDetail"
-          label="สาเหตุการลา"
-          :readonly="!edit || statusCheck === 'NEW'"
-        />
         <div class="full-width" v-if="statusCheck != 'NEW'">
           <div class="q-col-gutter-sm row">
             <q-file

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

@@ -21,9 +21,23 @@ const {
   dateToISO,
   messageError,
   convertDateToAPI,
+  showLoader,
+  hideLoader,
 } = mixin;
+
+const leaveText = 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 +68,8 @@ const formDataFollowSpouse = reactive<any>({
   leaveTotal: "", //จำนวนวันลา
   leaveTotalDay: "", //จำนวนวันลา
   leaveSalaryText: "",
+  leaveRange: "ALL",
+  leaveRangeEnd: "ALL",
   leaveSalary: 0, //เงินเดือนปัจจุบัน
   coupleDayName: "", //ชื่อคู่สมรส
   coupleDayPosition: "", //ตำแหน่งคู่สมรส
@@ -173,7 +189,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 +205,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 +280,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 +298,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 +318,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 +342,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
@@ -326,144 +363,199 @@ onMounted(async () => {
   <form @submit.prevent.stop="onValidate">
     <q-card bordered class="q-pa-md bg-grey-1">
       <div class="col-12 row q-pa-sm q-col-gutter-sm">
-        <q-input
+        <div class="col-12 col-sm-12 inputgreen">
-          class="col-12 col-sm-12 cursor-pointer inputgreen"
+          <q-input
-          ref="leaveWroteRef"
+            ref="leaveWroteRef"
-          for="leaveWroteRef"
+            for="leaveWroteRef"
-          dense
+            dense
-          hide-bottom-space
+            hide-bottom-space
-          bg-color="white"
+            bg-color="white"
-          outlined
+            outlined
-          v-model="formDataFollowSpouse.leaveWrote"
+            v-model="formDataFollowSpouse.leaveWrote"
-          label="เขียนที่"
+            label="เขียนที่"
-          :readonly="!edit || statusCheck === 'NEW'"
+            :readonly="!edit || statusCheck === 'NEW'"
-          :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
+            :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
-        />
+          />
-        <datepicker
+        </div>
-          class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
-          menu-class-name="modalfix"
-          v-model="formDataFollowSpouse.leaveStartDate"
-          :locale="'th'"
-          autoApply
-          hide-bottom-space
-          borderless
-          :enableTimePicker="false"
-          week-start="0"
-          :readonly="!edit || 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"
-              :readonly="!edit || statusCheck === 'NEW'"
-              class="full-width datepicker"
-              :model-value="
-                formDataFollowSpouse.leaveStartDate != null
-                  ? date2Thai(formDataFollowSpouse.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
+        <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"
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
-          v-model="formDataFollowSpouse.leaveEndDate"
+              <datepicker
-          :locale="'th'"
+                menu-class-name="modalfix"
-          autoApply
+                v-model="formDataFollowSpouse.leaveStartDate"
-          borderless
+                :locale="'th'"
-          hide-bottom-space
+                autoApply
-          :enableTimePicker="false"
+                hide-bottom-space
-          week-start="0"
+                borderless
-          @update:model-value="updateLeaveTotal(), fetchCheck()"
+                :enableTimePicker="false"
-          :readonly="
+                week-start="0"
-            !formDataFollowSpouse.leaveStartDate || statusCheck === 'NEW'
+                :readonly="!edit || statusCheck === 'NEW'"
-          "
+                @update:model-value="
-          :min-date="formDataFollowSpouse.leaveStartDate"
+                  (formDataFollowSpouse.leaveEndDate = null), fetchCheck()
-        >
+                "
-          <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
+                    outlined
-              ref="leaveEndDateRef"
+                    dense
-              for="leaveEndDateRef"
+                    ref="leaveStartDateRef"
-              hide-bottom-space
+                    for="leaveStartDateRef"
-              bg-color="white"
+                    hide-bottom-space
-              :readonly="
+                    bg-color="white"
-                !formDataFollowSpouse.leaveStartDate || statusCheck === 'NEW'
+                    :readonly="!edit || statusCheck === 'NEW'"
-              "
+                    class="full-width datepicker"
-              class="full-width datepicker"
+                    :model-value="
-              :model-value="
+                      formDataFollowSpouse.leaveStartDate != null
-                formDataFollowSpouse.leaveEndDate != null
+                        ? date2Thai(formDataFollowSpouse.leaveStartDate)
-                  ? date2Thai(formDataFollowSpouse.leaveEndDate)
+                        : null
-                  : null
+                    "
-              "
+                    :label="`${'วันที่เริ่มต้น'}`"
-              :label="`${'ลาถึงวันที่'}`"
+                    :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+                  >
-            >
+                    <template v-slot:prepend>
-              <template v-slot:prepend>
+                      <q-icon
-                <q-icon
+                        name="event"
-                  name="event"
+                        class="cursor-pointer"
-                  class="cursor-pointer"
+                        style="color: var(--q-primary)"
-                  style="color: var(--q-primary)"
+                      >
-                >
+                      </q-icon>
-                </q-icon>
+                    </template>
-              </template>
+                  </q-input>
-            </q-input>
+                </template>
-          </template>
+              </datepicker>
-        </datepicker>
+            </div>
-        <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="formDataFollowSpouse.leaveTotal"
-          label="เป็นเวลา"
-          readonly
-        >
-          <template v-slot:hint>
-            <span style="color: red">
-              {{ !isLeave ? reasonLeave : "" }}
-            </span>
-          </template>
-        </q-input>
 
-        <div class="col-12 col-md-6 col-sm-12">
+            <!-- <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <q-select
+                outlined
+                dense
+                bg-color="white"
+                v-model="formDataFollowSpouse.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>
+
+        <div class="col-12">
+          <div class="row q-col-gutter-sm"> -->
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formDataFollowSpouse.leaveEndDate"
+                :locale="'th'"
+                autoApply
+                hide-bottom-space
+                @update:model-value="fetchCheck()"
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+                :min-date="formDataFollowSpouse.leaveStartDate"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    ref="leaveEndDateRef"
+                    for="leaveEndDateRef"
+                    hide-bottom-space
+                    bg-color="white"
+                    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>
+            </div>
+
+            <!-- <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <q-select
+                v-if="!checkDate"
+                outlined
+                dense
+                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 class="col-12 col-md-3 col-sm-6">
+              <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>
+        </div>
+
+        <div class="col-12 col-md-3 col-sm-12">
           <q-input
             hide-bottom-space
             bg-color="white"
@@ -477,7 +569,7 @@ onMounted(async () => {
             readonly
           />
         </div>
-        <div class="col-12 col-md-6 col-sm-12">
+        <div class="col-12 col-md-9 col-sm-12">
           <q-input
             hide-bottom-space
             bg-color="white"
@@ -494,7 +586,7 @@ onMounted(async () => {
 
         <div class="col-md-3 col-sm-12">
           <q-input
-            class="col-12 col-sm-12 cursor-pointer inputgreen"
+            class="col-12 col-sm-12 inputgreen"
             hide-bottom-space
             ref="coupleDayNameRef"
             for="coupleDayNameRef"
@@ -509,7 +601,7 @@ onMounted(async () => {
         </div>
         <div class="col-md-3 col-sm-12">
           <q-input
-            class="col-12 col-sm-12 cursor-pointer inputgreen"
+            class="col-12 col-sm-12 inputgreen"
             hide-bottom-space
             ref="coupleDayPositionRef"
             for="coupleDayPositionRef"
@@ -524,7 +616,7 @@ onMounted(async () => {
         </div>
         <div class="col-md-3 col-sm-12">
           <q-input
-            class="col-12 col-sm-12 cursor-pointer inputgreen"
+            class="col-12 col-sm-12 inputgreen"
             ref="coupleDayLevelRef"
             for="coupleDayLevelRef"
             dense
@@ -539,7 +631,7 @@ onMounted(async () => {
         </div>
         <div class="col-md-3 col-sm-12">
           <q-input
-            class="col-12 col-sm-12 cursor-pointer inputgreen"
+            class="col-12 col-sm-12 inputgreen"
             ref="coupleDayLevelCountryRef"
             for="coupleDayLevelCountryRef"
             hide-bottom-space
@@ -555,6 +647,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 +705,7 @@ onMounted(async () => {
           borderless
           :enableTimePicker="false"
           :readonly="!edit || statusCheck === 'NEW'"
+          :min-date="formDataFollowSpouse.coupleDayStartDateHistory"
           week-start="0"
           @update:model-value="updateLeaveHistoryTotal()"
         >
@@ -681,7 +775,7 @@ onMounted(async () => {
         <q-input
           hide-bottom-space
           type="textarea"
-          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+          class="col-12 col-md-12 col-sm-12 inputgreen"
           dense
           bg-color="white"
           outlined

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

@@ -14,7 +14,7 @@ const dataStore = useLeaveStore();
 const mixin = useCounterMixin();
 const {
   date2Thai,
-  dateToISO,
+  calculateDurationYmd,
   messageError,
   showLoader,
   hideLoader,
@@ -27,6 +27,7 @@ const leaveId = ref<any>("");
 const leaveStartDateRef = ref<object | null>(null);
 const leaveEndDateRef = ref<object | null>(null);
 const leaveWroteRef = ref<object | null>(null);
+const leaveText = ref<string>("");
 
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
@@ -56,6 +57,8 @@ const formDataRehabilitation = reactive<any>({
   leaveEndDate: null,
   leaveDocument: [],
   leaveDetail: "",
+  leaveRange: "ALL",
+  leaveRangeEnd: "ALL",
   leaveDraftDocument: null,
 });
 
@@ -94,6 +97,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 +114,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,11 +138,19 @@ 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;
       isLeave.value = data.isLeave;
       formDataRehabilitation.leaveTotal = data.totalDate;
+      leaveText.value = calculateDurationYmd(
+        formDataRehabilitation.leaveStartDate,
+        formDataRehabilitation.leaveEndDate
+      );
 
       reasonLeave.value = data.message
         ? data.message
@@ -165,7 +190,7 @@ const dateEndInputStyle = computed(() => {
 const leaveDocumentList = ref<any>();
 const leaveDraftDocument = ref<string>();
 const statusCheck = ref<string>("");
-watch(props.data, () => {
+watch(props.data, async () => {
   if (props.data) {
     formDataRehabilitation.leaveWrote = props.data.leaveWrote;
     formDataRehabilitation.leaveStartDate = new Date(props.data.leaveStartDate);
@@ -173,24 +198,41 @@ 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;
+    const leaveTotal = await calculateDurationYmd(
+      props.data.leaveStartDate,
+      props.data.leaveEndDate
+    );
+    leaveText.value = leaveTotal;
   }
 });
 
 /**Hook */
-onMounted(() => {
+onMounted(async () => {
   if (props.data) {
     formDataRehabilitation.leaveWrote = props.data.leaveWrote;
     formDataRehabilitation.leaveStartDate = new Date(props.data.leaveStartDate);
     formDataRehabilitation.leaveEndDate = new Date(props.data.leaveEndDate);
     formDataRehabilitation.leaveDetail = props.data.leaveDetail;
+
+    formDataRehabilitation.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();
+    const leaveTotal = await calculateDurationYmd(
+      props.data.leaveStartDate,
+      props.data.leaveEndDate
+    );
+    leaveText.value = leaveTotal;
+
+    fetchCheck();
   }
 });
 </script>
@@ -204,154 +246,207 @@ onMounted(() => {
   <q-form greedy @submit.prevent @validation-success="onValidate">
     <q-card bordered class="q-pa-md bg-grey-1">
       <div class="row q-pa-sm q-col-gutter-sm">
-        <q-input
+        <div class="col-12 col-sm-12 inputgreen">
-          v-model="formDataRehabilitation.leaveWrote"
+          <q-input
-          class="col-12 col-sm-12 cursor-pointer inputgreen"
+            v-model="formDataRehabilitation.leaveWrote"
-          ref="leaveWroteRef"
+            ref="leaveWroteRef"
-          dense
+            dense
-          outlined
+            outlined
-          bg-color="white"
+            bg-color="white"
-          label="เขียนที่"
+            label="เขียนที่"
-          hide-bottom-space
+            hide-bottom-space
-          :readonly="!edit || statusCheck === 'NEW'"
+            :readonly="!edit || statusCheck === 'NEW'"
-          :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
+            :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
-        />
+          />
+        </div>
 
-        <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"
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
-          menu-class-name="modalfix"
+              <datepicker
-          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>
-              outlined
+                <template #trigger>
-              dense
+                  <q-input
-              lazy-rules
+                    outlined
-              hide-bottom-space
+                    dense
-              :readonly="!edit || statusCheck === 'NEW'"
+                    ref="leaveStartDateRef"
-              :model-value="
+                    for="leaveStartDateRef"
-                formDataRehabilitation.leaveStartDate != null
+                    hide-bottom-space
-                  ? date2Thai(formDataRehabilitation.leaveStartDate)
+                    bg-color="white"
-                  : null
+                    :readonly="!edit || statusCheck === 'NEW'"
-              "
+                    class="full-width datepicker"
-              :label="`${'ลาตั้งแต่วันที่'}`"
+                    :model-value="
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+                      formDataRehabilitation.leaveStartDate != null
-            >
+                        ? date2Thai(formDataRehabilitation.leaveStartDate)
-              <template v-slot:prepend>
+                        : null
-                <q-icon
+                    "
-                  name="event"
+                    :label="`${'วันที่เริ่มต้น'}`"
-                  class="cursor-pointer"
+                    :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
-                  style="color: var(--q-primary)"
+                  >
-                >
+                    <template v-slot:prepend>
-                </q-icon>
+                      <q-icon
-              </template>
+                        name="event"
-            </q-input>
+                        class="cursor-pointer"
-          </template>
+                        style="color: var(--q-primary)"
-        </datepicker>
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
 
-        <datepicker
+            <!-- <div class="col-12 col-md-3 col-sm-6 inputgreen">
-          :class="!isLeave ? dateEndInputStyle : ''"
+              <q-select
-          v-model="formDataRehabilitation.leaveEndDate"
+                outlined
-          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+                dense
-          menu-class-name="modalfix"
+                bg-color="white"
-          autoApply
+                v-model="formDataRehabilitation.leaveRange"
-          borderless
+                :options="dataStore.rangeOptions"
-          week-start="0"
+                emit-value
-          :locale="'th'"
+                map-options
-          @update:model-value="FetchCheck()"
+                option-value="id"
-          :readonly="
+                option-label="name"
-            !formDataRehabilitation.leaveStartDate || statusCheck === 'NEW'
+                @update:model-value="fetchCheck()"
-          "
+              >
-          :enableTimePicker="false"
+                <template v-slot:prepend>
-          :min-date="formDataRehabilitation.leaveStartDate"
+                  <q-icon
-        >
+                    name="mdi-clock-outline"
-          <template #year="{ year }">
+                    style="color: var(--q-primary)"
-            {{ year + 543 }}
+                  />
-          </template>
+                </template>
-          <template #year-overlay-value="{ value }">
+              </q-select>
-            {{ parseInt(value + 543) }}
+            </div> -->
-          </template>
+            <!-- </div>
-          <template #trigger>
+        </div>
-            <q-input
+        <div class="col-12">
-              ref="leaveEndDateRef"
+          <div class="row q-col-gutter-sm"> -->
-              class="full-width datepicker"
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
-              outlined
+              <datepicker
-              dense
+                menu-class-name="modalfix"
-              lazy-rules
+                v-model="formDataRehabilitation.leaveEndDate"
-              hide-bottom-space
+                :locale="'th'"
-              :readonly="
+                autoApply
-                !formDataRehabilitation.leaveStartDate || statusCheck === 'NEW'
+                hide-bottom-space
-              "
+                @update:model-value="fetchCheck()"
-              :model-value="
+                borderless
-                formDataRehabilitation.leaveEndDate != null
+                :enableTimePicker="false"
-                  ? date2Thai(formDataRehabilitation.leaveEndDate)
+                week-start="0"
-                  : null
+                :min-date="formDataRehabilitation.leaveStartDate"
-              "
+              >
-              :label="`${'ลาถึงวันที่'}`"
+                <template #year="{ year }">
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+                  {{ year + 543 }}
-              :bottom-slots="!isLeave ? true : false"
+                </template>
-              :color="!isLeave ? 'red' : 'black'"
+                <template #year-overlay-value="{ value }">
-              :bg-color="!isLeave ? 'red-2' : 'white'"
+                  {{ parseInt(value + 543) }}
-              :border-color="!isLeave ? 'red' : 'gray'"
+                </template>
-              :input-class="!isLeave ? dateEndInputStyle : ''"
+                <template #trigger>
-            >
+                  <q-input
-              <template v-slot:prepend>
+                    outlined
-                <q-icon
+                    dense
-                  name="event"
+                    ref="leaveEndDateRef"
-                  class="cursor-pointer"
+                    for="leaveEndDateRef"
-                  style="color: var(--q-primary)"
+                    hide-bottom-space
-                >
+                    bg-color="white"
-                </q-icon>
+                    class="full-width datepicker"
-              </template>
+                    :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>
+            </div>
 
-              <template v-slot:hint>
+            <!-- <div class="col-12 col-md-3 col-sm-6 inputgreen">
-                <span style="color: red">
+              <q-select
-                  {{ !isLeave ? reasonLeave : "" }}
+                v-if="!checkDate"
-                </span>
+                outlined
-              </template>
+                dense
-            </q-input>
+                bg-color="white"
-          </template>
+                v-model="formDataRehabilitation.leaveRangeEnd"
-        </datepicker>
+                :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> -->
 
-        <q-input
+            <div class="col-12 col-md-3 col-sm-6">
-          class="col-12 col-md-4 col-sm-12"
+              <q-input
-          dense
+                :bottom-slots="!isLeave ? true : false"
-          outlined
+                :color="!isLeave ? 'red' : 'black'"
-          readonly
+                :bg-color="!isLeave ? 'red-2' : 'white'"
-          hide-bottom-space
+                :border-color="!isLeave ? 'red' : 'gray'"
-          bg-color="white"
+                :input-class="!isLeave ? dateEndInputStyle : ''"
-          ref="coupleDayTotalHistoryRef"
+                dense
-          for="coupleDayTotalHistoryRef"
+                outlined
-          v-model="formDataRehabilitation.leaveTotal"
+                ref="leaveTotalRef"
-          label="เป็นเวลา"
+                for="leaveTotalRef"
-        />
+                v-model="leaveText"
+                label="เป็นเวลา"
+                readonly
+              >
+                <template v-slot:hint>
+                  <span style="color: red">
+                    {{ !isLeave ? reasonLeave : "" }}
+                  </span>
+                </template>
+              </q-input>
+            </div>
+          </div>
+        </div>
 
-        <q-input
+        <div class="col-12 col-md-12 col-sm-12 inputgreen">
-          v-model="formDataRehabilitation.leaveDetail"
+          <q-input
-          :readonly="!edit || statusCheck === 'NEW'"
+            v-model="formDataRehabilitation.leaveDetail"
-          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+            :readonly="!edit || statusCheck === 'NEW'"
-          bg-color="white"
+            bg-color="white"
-          dense
+            dense
-          outlined
+            outlined
-          type="textarea"
+            type="textarea"
-          label="สาเหตุการลา"
+            label="สาเหตุการลา"
-        />
+          />
+        </div>
 
         <div class="col-12" v-if="statusCheck != 'NEW'">
           <q-file

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

@@ -84,9 +84,10 @@ onMounted(() => {
         outlined
         readonly
         bg-color="white"
-        v-model="dataStore.dear"
+        v-model="dataStore.commanderPosition"
         label="เรียน"
       />
+
       <q-input
         class="col-12 col-sm-4"
         dense

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/request/AddAbsence.ts

@@ -16,7 +16,7 @@ interface OrdinationForm {
   leavebirthDate: object | null;
   leaveStartDate: object | null;
   leaveEndDate: object | null;
-  totalLeave: object | null;
+  leaveTotal: object | null;
   ordainDayOrdination: object | null;
   ordainDayLocationName: object | null;
   ordainDayLocationNumber: object | null;

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
@@ -266,6 +284,7 @@ export const useLeaveStore = defineStore("Leave", () => {
   const dateSendLeave = ref<Date>(); //วันที่ยื่นใบลา
   const leaveTypeName = ref<string>(""); //Name ประเภทการลา
   const dear = ref<string>(""); //เรียน
+  const commanderPosition = ref<string>(""); //ตำแหน่งผู้บังคับบัญชา
   const fullName = ref<string>(""); //คำนำหน้า ชื่อ นามสกุล ผู้ยื่นขอ
   const positionName = ref<string>(""); //ตำแหน่งผู้ยื่นขอ
   const positionLevelName = ref<string>(""); //ระดับผู้ยื่นขอ
@@ -294,6 +313,7 @@ export const useLeaveStore = defineStore("Leave", () => {
         dateSendLeave.value = data.dateSendLeave;
         leaveTypeName.value = data.leaveTypeName;
         dear.value = data.dear;
+        commanderPosition.value = data.commanderPosition;
         fullName.value = data.fullName;
         positionName.value = data.positionName;
         positionLevelName.value = data.positionLevelName;
@@ -352,6 +372,7 @@ export const useLeaveStore = defineStore("Leave", () => {
     dateSendLeave.value = data.dateSendLeave;
     typeLeave.value = data.leaveTypeName;
     dear.value = data.dear;
+    commanderPosition.value = data.commanderPosition;
     fullName.value = data.fullName;
     positionName.value = data.positionName;
     positionLevelName.value = data.positionLevelName;
@@ -365,6 +386,7 @@ export const useLeaveStore = defineStore("Leave", () => {
     dateSendLeave.value = undefined;
     leaveTypeName.value = "";
     dear.value = "";
+    commanderPosition.value = "";
     fullName.value = "";
     positionName.value = "";
     positionLevelName.value = "";
@@ -409,6 +431,7 @@ export const useLeaveStore = defineStore("Leave", () => {
     dateSendLeave,
     leaveTypeName,
     dear,
+    commanderPosition,
     fullName,
     positionName,
     positionLevelName,
@@ -432,5 +455,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, "บันทึกสำเร็จ");
@@ -126,7 +141,7 @@ onMounted(async () => {
                 <div class="row">
                   <q-select
                     dense
-                    class="col-12 col-sm-6 col-md-4 inputgreen"
+                    class="col-12 col-sm-9 col-md-6 inputgreen"
                     outlined
                     v-model="model"
                     :options="option"
@@ -155,7 +170,7 @@ onMounted(async () => {
 
                 <div class="row q-mt-sm">
                   <div
-                    class="col-12 col-sm-6 col-md-3"
+                    class="col-12 col-sm-6 col-md-4"
                     v-if="model === 'LV-006' || model === 'LV-008'"
                   >
                     <q-select
@@ -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 () => {
@@ -361,7 +358,7 @@ onMounted(async () => {
                   <q-select
                     readonly
                     dense
-                    class="col-12 col-sm-6 col-md-4"
+                    class="col-12 col-sm-9 col-md-6"
                     outlined
                     v-model="formData.leaveTypeName"
                     option-value="code"
@@ -373,7 +370,7 @@ onMounted(async () => {
                 </div>
                 <div class="row q-mt-sm">
                   <div
-                    class="col-12 col-sm-6 col-md-3"
+                    class="col-12 col-sm-6 col-md-4"
                     v-if="model === 'LV-006' || model === 'LV-008'"
                   >
                     <q-select
@@ -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"

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

@@ -135,11 +135,14 @@ async function fetchStatsTable() {
                 : el.leaveTypeName === "ลากิจส่วนตัว"
                 ? "text-deep-purple"
                 : "text-indigo",
-            value: Math.round(
+            value:
-              (Number(el.leaveCountApprove) /
+              el.leaveLimit > 0 || el.leaveExtend > 0
-                (Number(el.leaveLimit) + Number(el.leaveExtend))) *
+                ? Math.round(
-                100
+                    (Number(el.leaveCountApprove) /
-            ),
+                      (Number(el.leaveLimit) + Number(el.leaveExtend))) *
+                      100
+                  )
+                : 0,
             all: Number(el.leaveLimit) + Number(el.leaveExtend),
             use: el.leaveCountApprove,
             remain:

src/modules/06_evaluate/components/EvaluateStepMain.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted, watch } from "vue";
+import { ref, reactive, onMounted, watch, nextTick } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import { useQuasar } from "quasar";
 
@@ -71,7 +71,7 @@ async function onCilckNextStep() {
   store.step === 1
     ? checkSelectForm()
     : store.step === 2 || store.step === 6
-    ? validateForm()
+    ? onSubmitFormData()
     : store.step == 3 || store.step == 7
     ? dialogConfirm(
         $q,
@@ -85,35 +85,42 @@ async function onCilckNextStep() {
 }
 
 /** function validateForm Step 2,4*/
-async function validateForm() {
+async function onSubmitFormData() {
   store.checkFileupload = !store.checkFileupload;
-  const emptyValues = downloadFileRef.value.filter((e: string) => e === "");
+  if (store.step === 2) {
-  const hasError = [];
+    if (!store.statusUpload) {
-  for (const key in formCommandRef) {
+      saveStep2();
-    if (Object.prototype.hasOwnProperty.call(formCommandRef, key)) {
+    } else {
-      const property = formCommandRef[key];
+      if (!downloadFile.value.some((e: string) => e === "")) {
-      if (property.value && typeof property.value.validate === "function") {
-        const isValid = property.value.validate();
-        hasError.push(isValid);
-      }
-    }
-  }
-  if (hasError.every((result) => result === true)) {
-    if (emptyValues.length > 0 && store.statusUpload === true) {
-    } else if (store.step === 2) {
-      if (store.statusUpload === false) {
-        saveStep2();
-      } else {
         nextTostep3();
       }
+    }
+  } else {
+    if (!store.statusUpload6) {
+      saveStep6();
     } else {
-      if (store.statusUpload6 === false) {
+      if (!downloadFile.value.some((e: string) => e === "")) {
-        saveStep6();
-      } else {
         nextTostep7();
       }
     }
   }
+
+  // const emptyValues = downloadFileRef.value.filter((e: string) => e === "");
+  // const hasError = [];
+  // for (const key in formCommandRef) {
+  //   if (Object.prototype.hasOwnProperty.call(formCommandRef, key)) {
+  //     const property = formCommandRef[key];
+
+  //     if (property.value && typeof property.value.validate === "function") {
+  //       const isValid = property.value.validate();
+  //       hasError.push(isValid);
+  //     }
+  //   }
+  // }
+  // if (hasError.every((result) => result === true)) {
+  //   if (emptyValues.length > 0 && store.statusUpload === true) {
+  // }
+  // }
 }
 
 const pdfSrc = ref<any>();
@@ -250,19 +257,7 @@ function checkSelectForm() {
 /** function บันทักตรวจสอบคุณสมบัติ*/
 async function saveStep1() {
   showLoader();
-
   const salaries = formDetail.value.salaries.map((e: any) => ({
-    // amount: e.amount,
-    // date: e.date,
-    // mouthSalaryAmount: e.mouthSalaryAmount ? e.mouthSalaryAmount : 0,
-    // posNo: e.posNo,
-    // position: e.position,
-    // positionSalaryAmount: e.positionSalaryAmount ? e.positionSalaryAmount : 0,
-    // refCommandDate: e.refCommandDate,
-    // refCommandNo: e.refCommandNo ? e.refCommandNo : "",
-    // salaryClass: e.salaryClass ? e.salaryClass : "",
-    // salaryRef: e.salaryRef ? e.salaryRef : "",
-    // salaryStatus: e.salaryStatus ? e.salariesStatus : "",
     profileId: e.profileId,
     commandCode: e.commandCode,
     commandNo: e.commandNo,
@@ -317,16 +312,32 @@ async function saveStep1() {
     startDate: e.startDate,
   }));
 
-  const assessments = formDetail.value.assessments.map((e: any) => ({
+  const certificates = formDetail.value.certificates.map((e: any) => ({
-    date: e.date,
+    ...e,
-    point1: e.point1,
-    point1Total: e.point1Total,
-    point2: e.point2,
-    point2Total: e.point2Total,
-    pointSum: e.pointSum,
-    pointSumTotal: e.pointSumTotal,
   }));
 
+  const trainings = formDetail.value.trainings.map((e: any) => ({
+    ...e,
+  }));
+
+  const performances = formDetail.value.assessments.map(
+    ({ id, isAdd, ...rest }: any) => ({
+      ...rest,
+    })
+  );
+  const portfolios = formDetail.value.experience.map(
+    ({
+      id,
+      lastUpdatedAt,
+      lastUpdateFullName,
+      createdFullName,
+      createdAt,
+      ...rest
+    }: any) => ({
+      ...rest,
+    })
+  );
+
   const evaluateType = route.params.type.toString();
   const form = {
     root: formDetail.value.root,
@@ -351,12 +362,15 @@ async function saveStep1() {
     isHaveSpecificQft: formSpec.isHaveSpecificQft,
     isHaveProLicense: formSpec.isHaveProLicense,
     isHaveMinPeriodOrHoldPos: formSpec.isHaveMinPeriodOrHoldPos,
+    posExecutive: formDetail.value.posExecutive ?? "",
+    positionArea: formDetail.value.positionArea ?? "",
     reason: "",
     educations: [...educations],
-    certificates: [...formDetail.value.certificates],
+    certificates: [...certificates],
     salaries: [...salaries],
-    trainings: [...formDetail.value.trainings],
+    trainings: [...trainings],
-    assessments: [...assessments],
+    performances: [...performances],
+    portfolios: [...portfolios],
   };
 
   await http
@@ -378,41 +392,20 @@ const statusUpload = ref<boolean>(false);
 const formCommand = reactive<FormCommand>({
   commanderFullname: "",
   commanderPosition: "",
+  commanderPositionOld: "",
+  commanderOrg: "",
+  commanderOrgOld: "",
   commanderAboveFullname: "",
   commanderAbovePosition: "",
+  commanderAbovePositionOld: "",
+  commanderAboveOrgOld: "",
+  commanderAboveOrg: "",
   author: "",
-  subject: "",
+  subject: [],
   assignedPosition: "",
 });
-const commanderFullnameRef = ref<object | null>(null);
+const downloadFile = ref<string[]>([]);
-const commanderPositionRef = ref<object | null>(null);
+
-const commanderAboveFullnameRef = ref<object | null>(null);
-const commanderAbovePositionRef = ref<object | null>(null);
-const fileEvaluation1Ref = ref<object | null>(null);
-const fileEvaluation2Ref = ref<object | null>(null);
-const fileEvaluation3Ref = ref<object | null>(null);
-const fileEvaluation4Ref = ref<object | null>(null);
-const fileEvaluation5Ref = ref<object | null>(null);
-const fileEvaluation6Ref = ref<object | null>(null);
-const performanceRef = ref<object | null>(null);
-const performanceOwnerRef = ref<object | null>(null);
-const assignedPositionRef = ref<object | null>(null);
-const formCommandRef: FormCommandRef = {
-  commanderFullname: commanderFullnameRef,
-  commanderPosition: commanderPositionRef,
-  commanderAboveFullname: commanderAboveFullnameRef,
-  commanderAbovePosition: commanderAbovePositionRef,
-  fileEvaluation1: fileEvaluation1Ref,
-  fileEvaluation2: fileEvaluation2Ref,
-  fileEvaluation3: fileEvaluation3Ref,
-  fileEvaluation4: fileEvaluation4Ref,
-  fileEvaluation5: fileEvaluation5Ref,
-  fileEvaluation6: fileEvaluation6Ref,
-  performance: performanceRef,
-  performanceOwner: performanceOwnerRef,
-  assignedPosition: assignedPositionRef,
-};
-const downloadFileRef = ref<any>();
 /**
  * function  อัปเดท ผลงาน,ผู้เซ็นเอกสาร, Ref
  * @param val ผู้เซ็นเอกสาร
@@ -421,38 +414,22 @@ const downloadFileRef = ref<any>();
 function updateformCommand(val: any, ref: any) {
   formCommand.commanderFullname = val.commanderFullname;
   formCommand.commanderPosition = val.commanderPosition;
+  formCommand.commanderPositionOld = val.commanderPositionOld;
+  formCommand.commanderOrg = val.commanderOrg;
+  formCommand.commanderOrgOld = val.commanderOrgOld;
   formCommand.commanderAboveFullname = val.commanderAboveFullname;
   formCommand.commanderAbovePosition = val.commanderAbovePosition;
+  formCommand.commanderAbovePositionOld = val.commanderAbovePositionOld;
+  formCommand.commanderAboveOrgOld = val.commanderAboveOrgOld;
+  formCommand.commanderAboveOrg = val.commanderAboveOrg;
   formCommand.author = val.author;
   formCommand.subject = val.subject;
   formCommand.assignedPosition = val.assignedPosition;
-  commanderFullnameRef.value = ref.commanderFullnameRef;
+  downloadFile.value = ref.downloadFile;
-  commanderPositionRef.value = ref.commanderPositionRef;
-  commanderAboveFullnameRef.value = ref.commanderAboveFullnameRef;
-  commanderAbovePositionRef.value = ref.commanderAbovePositionRef;
-  fileEvaluation1Ref.value = ref.fileEvaluation1Ref;
-  fileEvaluation2Ref.value = ref.fileEvaluation2Ref;
-  fileEvaluation3Ref.value = ref.fileEvaluation3Ref;
-  fileEvaluation4Ref.value = ref.fileEvaluation4Ref;
-  fileEvaluation5Ref.value = ref.fileEvaluation5Ref;
-  fileEvaluation6Ref.value = ref.fileEvaluation6Ref;
-  downloadFileRef.value = ref.downloadFile;
-  performanceRef.value = ref.performance;
-  performanceOwnerRef.value = ref.performanceOwner;
-  assignedPositionRef.value = ref.assignedPosition;
   statusUpload.value = ref.statusUpload;
 }
 /** function บันทึกข้อมูล ผลงานม,ผู้เซ็นเอกสาร*/
 async function saveStep2() {
-  const body = {
-    commanderFullname: formCommand.commanderFullname,
-    commanderPosition: formCommand.commanderPosition,
-    commanderAboveFullname: formCommand.commanderAboveFullname,
-    commanderAbovePosition: formCommand.commanderAbovePosition,
-    author: formCommand.author,
-    subject: formCommand.subject,
-  };
-
   dialogConfirm(
     $q,
     async () => {
@@ -465,10 +442,10 @@ async function saveStep2() {
             route.params.id.toString(),
             "director"
           ),
-          body
+          { ...formCommand, assignedPosition: undefined }
         )
-        .then(() => {
+        .then(async () => {
-          route.params.id && fetchCheckStep(route.params.id.toString());
+          route.params.id && (await fetchCheckStep(route.params.id.toString()));
         })
         .catch((err) => {
           messageError($q, err);
@@ -530,8 +507,14 @@ async function saveStep6() {
   const body = {
     commanderAboveFullnameDoc2: formCommand.commanderAboveFullname,
     commanderAbovePositionDoc2: formCommand.commanderAbovePosition,
+    commanderAbovePositionOldDoc2: formCommand.commanderAbovePositionOld,
+    commanderAboveOrgOldDoc2: formCommand.commanderAboveOrgOld,
+    commanderAboveOrgDoc2: formCommand.commanderAboveOrg,
     commanderFullnameDoc2: formCommand.commanderFullname,
     commanderPositionDoc2: formCommand.commanderPosition,
+    commanderPositionOldDoc2: formCommand.commanderPositionOld,
+    commanderOrgDoc2: formCommand.commanderOrg,
+    commanderOrgOldDoc2: formCommand.commanderOrgOld,
     authorDoc2: formCommand.author,
     subjectDoc2: formCommand.subject,
     assignedPosition: formCommand.assignedPosition,
@@ -551,8 +534,8 @@ async function saveStep6() {
           ),
           body
         )
-        .then(() => {
+        .then(async () => {
-          route.params.id && fetchCheckStep(route.params.id.toString());
+          route.params.id && (await fetchCheckStep(route.params.id.toString()));
         })
         .catch((err) => {
           messageError($q, err);
@@ -679,164 +662,172 @@ onMounted(async () => {
               </div>
             </div>
           </div>
-
+          <q-form
-          <div class="col-xs-12 col-sm-9 q-pa-md" v-if="showLoadStatus">
+            class="col-xs-12 col-sm-9"
-            <div class="col-12 row items-center">
+            greedy
-              <div class="toptitle2">
+            @submit.prevent
-                {{ store.step }}.{{ store.title[store.step - 1] }}
+            @validation-success="onCilckNextStep"
+          >
+            <div class="col-xs-12 col-sm-9 q-pa-md" v-if="showLoadStatus">
+              <div class="col-12 row items-center">
+                <div class="toptitle2">
+                  {{ store.step }}.{{ store.title[store.step - 1] }}
+                </div>
+                <q-space />
+                <div>
+                  <q-btn
+                    v-if="store.step === 1"
+                    :href="externalLink"
+                    target="_blank"
+                    outline
+                    color="blue"
+                    dense
+                    class="q-px-md"
+                    no-caps
+                  >
+                    ตรวจสอบคุณสมบัติกับ ก.พ.
+                  </q-btn>
+                </div>
               </div>
-              <q-space />
+              <div class="col-12 q-pt-sm">
-              <div>
+                <div class="q-col-gutter-md col-12 row">
-                <q-btn
+                  <div
-                  v-if="store.step === 1"
+                    :class="
-                  :href="externalLink"
+                      store.step === 2 ||
-                  target="_blank"
+                      store.step === 4 ||
-                  outline
+                      store.step === 5 ||
-                  color="blue"
+                      store.step === 6 ||
-                  dense
+                      store.step === 8 ||
-                  class="q-px-md"
+                      store.step === 9
-                  no-caps
+                        ? 'col-12 row'
-                >
+                        : 'col-xs-12 col-sm-5 row'
-                  ตรวจสอบคุณสมบัติกับ ก.พ.
-                </q-btn>
-              </div>
-            </div>
-            <div class="col-12 q-pt-sm">
-              <div class="q-col-gutter-md col-12 row">
-                <div
-                  :class="
-                    store.step === 2 ||
-                    store.step === 4 ||
-                    store.step === 5 ||
-                    store.step === 6 ||
-                    store.step === 8 ||
-                    store.step === 9
-                      ? 'col-12 row'
-                      : 'col-xs-12 col-sm-5 row'
-                  "
-                >
-                  <q-card
-                    flat
-                    bordered
-                    class="col-12 shadow-0"
-                    :style="
-                      $q.screen.lt.sm
-                        ? ''
-                        : 'max-height: 60vh; overflow: scroll;'
                     "
                   >
-                    <Step1
+                    <q-card
-                      v-if="store.step === 1"
+                      flat
-                      @update:spec="updateCheckSpec"
+                      bordered
-                      :data="formDataStep1"
+                      class="col-12 shadow-0"
-                      :educations="formDetail?.educations"
+                      :style="
-                    />
+                        $q.screen.lt.sm
-                    <Step2
+                          ? ''
-                      v-if="store.step === 2"
+                          : 'max-height: 60vh; overflow: scroll;'
-                      @update:form="updateformCommand"
+                      "
-                    />
+                    >
-                    <Step3
+                      <Step1
-                      v-if="store.step === 3"
+                        v-if="store.step === 1"
-                      @update:file="updateFilePDF"
+                        @update:spec="updateCheckSpec"
-                    />
+                        :data="formDataStep1"
-                    <Step4 v-if="store.step === 4" />
+                        :educations="formDetail?.educations"
-                    <Step5 v-if="store.step === 5" />
+                      />
-                    <Step6
+                      <Step2
-                      v-if="store.step === 6"
+                        v-if="store.step === 2"
-                      @update:form="updateformCommand"
+                        @update:form="updateformCommand"
-                    />
+                      />
-                    <Step7
+                      <Step3
-                      v-if="store.step === 7"
+                        v-if="store.step === 3"
-                      @update:file="updateFilePDF"
+                        @update:file="updateFilePDF"
-                    />
+                      />
-                    <Step8 v-if="store.step === 8" />
+                      <Step4 v-if="store.step === 4" />
-                    <Step9 v-if="store.step === 9" />
+                      <Step5 v-if="store.step === 5" />
-                  </q-card>
+                      <Step6
-                </div>
+                        v-if="store.step === 6"
-                <div
+                        @update:form="updateformCommand"
-                  class="col-xs-12 col-sm-7"
+                      />
-                  v-if="
+                      <Step7
-                    store.step === 1 || store.step === 3 || store.step === 7
+                        v-if="store.step === 7"
-                  "
+                        @update:file="updateFilePDF"
-                >
+                      />
-                  <div class="col-12">
+                      <Step8 v-if="store.step === 8" />
-                    <ViewStep1
+                      <Step9 v-if="store.step === 9" />
-                      v-if="store.step === 1"
+                    </q-card>
-                      @update:formDeital="updateFormDetail"
+                  </div>
-                      :data="formDataStep1"
+                  <div
-                    />
+                    class="col-xs-12 col-sm-7"
-                    <ViewStep3
+                    v-if="
-                      v-if="store.step === 3 && pdfSrc"
+                      store.step === 1 || store.step === 3 || store.step === 7
-                      :pdfSrc="pdfSrc"
+                    "
-                      :urlDownloadFile="urlDownloadFile"
+                  >
-                    />
+                    <div class="col-12">
-                    <ViewStep7
+                      <ViewStep1
-                      v-if="store.step === 7 && pdfSrc"
+                        v-if="store.step === 1"
-                      :pdfSrc="pdfSrc"
+                        @update:formDeital="updateFormDetail"
-                      :urlDownloadFile="urlDownloadFile"
+                        :data="formDataStep1"
-                    />
+                      />
+                      <ViewStep3
+                        v-if="store.step === 3 && pdfSrc"
+                        :pdfSrc="pdfSrc"
+                        :urlDownloadFile="urlDownloadFile"
+                      />
+                      <ViewStep7
+                        v-if="store.step === 7 && pdfSrc"
+                        :pdfSrc="pdfSrc"
+                        :urlDownloadFile="urlDownloadFile"
+                      />
+                    </div>
                   </div>
                 </div>
               </div>
+              <q-card-actions
+                class="q-pt-sm q-pa-none q-gutter-sm"
+                align="right"
+              >
+                <q-btn
+                  v-if="
+                    store.step >= store.currentStep &&
+                    store.statusUpload === false &&
+                    store.step !== 3 &&
+                    store.step !== 4 &&
+                    store.step !== 5 &&
+                    store.step !== 7 &&
+                    store.step !== 8 &&
+                    store.step !== 9
+                  "
+                  unelevated
+                  :label="
+                    store.step === 2 || store.step === 6
+                      ? 'บันทึกข้อมูล'
+                      : 'ดำเนินการต่อ'
+                  "
+                  color="public"
+                  type="submit"
+                />
+
+                <q-btn
+                  v-else-if="
+                    store.step >= store.currentStep &&
+                    (store.step == 3 || store.step == 7)
+                  "
+                  unelevated
+                  label="ยื่นเอกสาร"
+                  color="public"
+                  type="submit"
+                />
+
+                <q-btn
+                  v-if="
+                    store.step >= store.currentStep &&
+                    store.step == 2 &&
+                    store.statusUpload
+                  "
+                  unelevated
+                  label="ดำเนินการต่อ"
+                  color="public"
+                  type="submit"
+                />
+                <q-btn
+                  v-if="
+                    store.step >= store.currentStep &&
+                    store.step == 6 &&
+                    store.statusUpload
+                  "
+                  unelevated
+                  label="ดำเนินการต่อ"
+                  color="public"
+                  type="submit"
+                />
+              </q-card-actions>
             </div>
-            <q-card-actions class="q-pt-sm q-pa-none q-gutter-sm" align="right">
+          </q-form>
-              <q-btn
-                v-if="
-                  store.step >= store.currentStep &&
-                  store.statusUpload === false &&
-                  store.step !== 3 &&
-                  store.step !== 4 &&
-                  store.step !== 5 &&
-                  store.step !== 7 &&
-                  store.step !== 8 &&
-                  store.step !== 9
-                "
-                unelevated
-                :label="
-                  store.step === 2 || store.step === 6
-                    ? 'บันทึกข้อมูล'
-                    : 'ดำเนินการต่อ'
-                "
-                color="public"
-                @click="onCilckNextStep()"
-              />
-
-              <q-btn
-                v-else-if="
-                  store.step >= store.currentStep &&
-                  (store.step == 3 || store.step == 7)
-                "
-                unelevated
-                label="ยื่นเอกสาร"
-                color="public"
-                @click="onCilckNextStep()"
-              />
-
-              <q-btn
-                v-if="
-                  store.step >= store.currentStep &&
-                  store.step == 2 &&
-                  store.statusUpload
-                "
-                unelevated
-                label="ดำเนินการต่อ"
-                color="public"
-                @click="onCilckNextStep()"
-              />
-              <q-btn
-                v-if="
-                  downloadFileRef &&
-                  store.step >= store.currentStep &&
-                  store.step == 6 &&
-                  store.statusUpload
-                "
-                unelevated
-                label="ดำเนินการต่อ"
-                color="public"
-                @click="onCilckNextStep()"
-              />
-            </q-card-actions>
-          </div>
         </q-card>
       </div>
     </div>

src/modules/06_evaluate/components/step/step2.vue

@@ -31,26 +31,53 @@ const emit = defineEmits(["update:form"]);
 const formCommand = reactive<FormCommand>({
   commanderFullname: "",
   commanderPosition: "",
+  commanderPositionOld: "",
+  commanderOrg: "",
+  commanderOrgOld: "",
   commanderAboveFullname: "",
   commanderAbovePosition: "",
+  commanderAbovePositionOld: "",
+  commanderAboveOrgOld: "",
+  commanderAboveOrg: "",
   author: "",
-  subject: "",
+  subject: [""],
   assignedPosition: "",
 });
 
-/** formRef */
+const formTemplates = ref<any[]>([
-const commanderFullnameRef = ref<object | null>(null);
+  {
-const commanderPositionRef = ref<object | null>(null);
+    code: "EV1_005",
-const commanderAboveFullnameRef = ref<object | null>(null);
+    templateName: "template-1",
-const commanderAbovePositionRef = ref<object | null>(null);
+    title: "แบบพิจารณาคุณสมบัติบุคคล",
-const fileEvaluation1Ref = ref<object | null>(null);
+    fileName: "1-แบบพิจารณาคุณสมบัติบุคคล",
-const fileEvaluation2Ref = ref<object | null>(null);
+    downloadFile: "",
-const fileEvaluation3Ref = ref<object | null>(null);
+    file: null,
-const fileEvaluation4Ref = ref<object | null>(null);
+  },
-const fileEvaluation5Ref = ref<object | null>(null);
+  {
-const fileEvaluation6Ref = ref<object | null>(null);
+    code: "EV1_006",
-const performanceRef = ref<object | null>(null);
+    templateName: "template-2",
-const performanceOwnerRef = ref<object | null>(null);
+    title: "แบบแสดงรายละเอียดการเสนอผลงาน",
+    fileName: "2-แบบแสดงรายละเอียดการเสนอผลงาน",
+    downloadFile: "",
+    file: null,
+  },
+  {
+    code: "EV1_008",
+    templateName: "template-4",
+    title: "แบบประเมินคุณลักษณะบุคคล",
+    fileName: "4-แบบประเมินคุณลักษณะบุคคล",
+    downloadFile: "",
+    file: null,
+  },
+  {
+    code: "EV1_010",
+    templateName: "template-6",
+    title: "ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
+    fileName: "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
+    downloadFile: "",
+    file: null,
+  },
+]);
 
 /**
  * function updateFormref
@@ -58,39 +85,12 @@ const performanceOwnerRef = ref<object | null>(null);
  */
 function updateInput(val: any) {
   const ref = {
-    commanderFullnameRef: commanderFullnameRef.value,
+    statusUpload: false,
-    commanderPositionRef: commanderPositionRef.value,
+    downloadFile: formTemplates.value.map((e) => e.downloadFile),
-    commanderAboveFullnameRef: commanderAboveFullnameRef.value,
-    commanderAbovePositionRef: commanderAbovePositionRef.value,
-    fileEvaluation1Ref: fileEvaluation1Ref.value,
-    fileEvaluation2Ref: fileEvaluation2Ref.value,
-    fileEvaluation3Ref: fileEvaluation3Ref.value,
-    fileEvaluation4Ref: fileEvaluation4Ref.value,
-    fileEvaluation5Ref: fileEvaluation5Ref.value,
-    fileEvaluation6Ref: fileEvaluation6Ref.value,
-    downloadFile: [
-      downloadFile1.value,
-      downloadFile2.value,
-      downloadFile3.value,
-      downloadFile4.value,
-      downloadFile5.value,
-      downloadFile6.value,
-    ],
-    performance: performanceRef.value,
-    performanceOwner: performanceOwnerRef.value,
-    statusUpload: store.statusUpload,
   };
   emit("update:form", val, ref); // ส่งข้อมูลไปอัปเดท
 }
 
-/** ตัวแปร file*/
-const fileEvaluation1 = ref<File | null>();
-const fileEvaluation2 = ref<File | null>();
-const fileEvaluation3 = ref<File | null>();
-const fileEvaluation4 = ref<File | null>();
-const fileEvaluation5 = ref<File | null>();
-const fileEvaluation6 = ref<File | null>();
-
 const modalView = ref<boolean>(false);
 const numOfPages = ref<number>(0);
 const page = ref<number>(1);
@@ -123,13 +123,13 @@ async function onClickDowloadFile(
   fileName: string
 ) {
   showLoader();
-
   const body = {
     template: tp,
     reportName: templateName,
     data: profile.value,
   };
   await genReport(body, fileName); //สร้างไฟล์ต้นแบบ
+  hideLoader();
 }
 
 /**
@@ -170,10 +170,9 @@ async function fetchPathUpload(
       })
       .catch((err) => {
         messageError($q, err);
-        hideLoader();
       })
       .finally(() => {
-        // hideLoader();
+        hideLoader();
       });
   }
 }
@@ -195,9 +194,6 @@ async function uploadfile(uploadUrl: string, file: any) {
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
@@ -206,16 +202,20 @@ async function uploadfile(uploadUrl: string, file: any) {
  * @param id evaluate ID
  */
 function fetcheSigner(id: string) {
-  showLoader();
   http
     .get(config.API.evaluationSignerDoc1(id))
     .then((res) => {
       const data = res.data.result;
-
       formCommand.commanderFullname = data.commanderFullname;
       formCommand.commanderPosition = data.commanderPosition;
+      formCommand.commanderPositionOld = data.commanderPositionOld;
+      formCommand.commanderOrg = data.commanderOrg;
+      formCommand.commanderOrgOld = data.commanderOrgOld;
       formCommand.commanderAboveFullname = data.commanderAboveFullname;
       formCommand.commanderAbovePosition = data.commanderAbovePosition;
+      formCommand.commanderAbovePositionOld = data.commanderAbovePositionOld;
+      formCommand.commanderAboveOrgOld = data.commanderAboveOrgOld;
+      formCommand.commanderAboveOrg = data.commanderAboveOrg;
       formCommand.author = data.author;
       formCommand.subject = data.subject;
       store.statusUpload = true;
@@ -223,11 +223,6 @@ function fetcheSigner(id: string) {
     .catch(() => {
       store.statusUpload = false;
       getCommander();
-    })
-    .finally(() => {
-      setTimeout(() => {
-        hideLoader();
-      }, 2000);
     });
 }
 
@@ -236,7 +231,6 @@ function fetcheSigner(id: string) {
  * @param id  evaluate ID
  */
 async function fetchCheckSpec(id: string) {
-  showLoader();
   await http
     .get(config.API.evaluationReportCheckspecByid(id))
     .then((res) => {
@@ -245,85 +239,31 @@ async function fetchCheckSpec(id: string) {
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(() => {
-      setTimeout(() => {
-        hideLoader();
-      }, 2000);
     });
 }
 
-const downloadFile1 = ref<string>("");
-const downloadFile2 = ref<string>("");
-const downloadFile3 = ref<string>("");
-const downloadFile4 = ref<string>("");
-const downloadFile5 = ref<string>("");
-const downloadFile6 = ref<string>("");
-
 /**
  * function ดาวน์โหลดไฟล์
  * @param fileName ชื่อไฟล์
  */
 async function downloadFile(fileName: string) {
-  // showLoader();
   await http
     .get(config.API.loadFileDocument("เล่ม 1", evaluateId.value, fileName))
     .then((res) => {
-      if (fileName === "1-แบบพิจารณาคุณสมบัติบุคคล") {
+      const index = formTemplates.value.findIndex(
-        downloadFile1.value = res.data.downloadUrl;
+        (item) => item.fileName === fileName
-        // fileEvaluation1.value = res.data.upload;
+      );
-      } else if (fileName === "2-แบบแสดงรายละเอียดการเสนอผลงาน") {
+      if (index !== -1) {
-        downloadFile2.value = res.data.downloadUrl;
+        formTemplates.value[index].downloadFile = res.data.downloadUrl;
-        // fileEvaluation2.value = res.data.upload;
-      } else if (
-        fileName ===
-        "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)"
-      ) {
-        downloadFile3.value = res.data.downloadUrl;
-        // fileEvaluation3.value = res.data.upload;
-      } else if (fileName === "4-แบบประเมินคุณลักษณะบุคคล") {
-        downloadFile4.value = res.data.downloadUrl;
-        // fileEvaluation4.value = res.data.upload;
-      } else if (
-        fileName === "5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)"
-      ) {
-        downloadFile5.value = res.data.downloadUrl;
-        // fileEvaluation5.value = res.data.upload;
-      } else if (fileName === "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)") {
-        downloadFile6.value = res.data.downloadUrl;
-        // fileEvaluation6.value = res.data.upload;
       }
     })
     .finally(() => {
       const ref = {
-        commanderFullnameRef: commanderFullnameRef.value,
-        commanderPositionRef: commanderPositionRef.value,
-        commanderAboveFullnameRef: commanderAboveFullnameRef.value,
-        commanderAbovePositionRef: commanderAbovePositionRef.value,
-        fileEvaluation1Ref: fileEvaluation1Ref.value,
-        fileEvaluation2Ref: fileEvaluation2Ref.value,
-        fileEvaluation3Ref: fileEvaluation3Ref.value,
-        fileEvaluation4Ref: fileEvaluation4Ref.value,
-        fileEvaluation5Ref: fileEvaluation5Ref.value,
-        fileEvaluation6Ref: fileEvaluation6Ref.value,
-        performance: performanceRef.value,
-        performanceOwner: performanceOwnerRef.value,
-        downloadFile: [
-          downloadFile1.value,
-          downloadFile2.value,
-          downloadFile3.value,
-          downloadFile4.value,
-          downloadFile5.value,
-          downloadFile6.value,
-        ],
         statusUpload: false,
+        downloadFile: formTemplates.value.map((e) => e.downloadFile),
       };
 
       emit("update:form", formCommand, ref);
-
-      setTimeout(() => {
-        hideLoader();
-      }, 2000);
     });
 }
 
@@ -339,32 +279,24 @@ function getCommander() {
     })
     .catch((e) => {
       console.log(e);
-      // messageError($q, e);
     });
 }
+
+function onAddSubject() {
+  formCommand.subject.push("");
+}
+
+function onDeleteSubject(index: number) {
+  formCommand.subject.splice(index, 1);
+}
+
 /** callback function */
 watch(
   () => store.checkFileupload,
   () => {
-    const fileEvaluationValues = [
+    for (let i = 0; i < formTemplates.value.length; i++) {
-      fileEvaluation1,
+      if (formTemplates.value[i].downloadFile === "") {
-      fileEvaluation2,
+        formTemplates.value[i].file = null;
-      fileEvaluation3,
-      fileEvaluation4,
-      fileEvaluation5,
-      fileEvaluation6,
-    ];
-    const downloadFileValues = [
-      downloadFile1,
-      downloadFile2,
-      downloadFile3,
-      downloadFile4,
-      downloadFile5,
-      downloadFile6,
-    ];
-    for (let i = 0; i < downloadFileValues.length; i++) {
-      if (downloadFileValues[i].value === "") {
-        fileEvaluationValues[i].value = null;
       }
     }
   }
@@ -385,19 +317,29 @@ onMounted(async () => {
   if (user) {
     formCommand.author = user.name;
   }
-  showLoader();
+
-  await Promise.all([
+  try {
-    fetcheSigner(evaluateId.value),
+    showLoader();
-    fetchCheckSpec(evaluateId.value),
+    await Promise.all([
-    downloadFile("1-แบบพิจารณาคุณสมบัติบุคคล"),
+      fetcheSigner(evaluateId.value),
-    downloadFile("2-แบบแสดงรายละเอียดการเสนอผลงาน"),
+      fetchCheckSpec(evaluateId.value),
-    downloadFile(
+      formTemplates.value.forEach((e) => {
-      "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)"
+        downloadFile(e.fileName);
-    ),
+      }),
-    downloadFile("4-แบบประเมินคุณลักษณะบุคคล"),
+      // downloadFile("1-แบบพิจารณาคุณสมบัติบุคคล"),
-    downloadFile("5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)"),
+      // downloadFile("2-แบบแสดงรายละเอียดการเสนอผลงาน"),
-    downloadFile("6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)"),
+      // downloadFile(
-  ]);
+      //   "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)"
+      // ),
+      // downloadFile("4-แบบประเมินคุณลักษณะบุคคล"),
+      // downloadFile("5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)"),
+      // downloadFile("6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)"),
+    ]);
+  } catch (error) {
+    console.log(error);
+  } finally {
+    hideLoader();
+  }
 });
 </script>
 
@@ -412,32 +354,67 @@ onMounted(async () => {
         <div class="col-12"><q-separator /></div>
         <div class="col-12 q-pa-sm">
           <div class="row q-col-gutter-sm">
-            <q-input
+            <div class="col-12">
-              :readonly="store.currentStep != 2 || store.statusUpload"
+              <q-input
-              ref="performanceRef"
+                :readonly="store.currentStep != 2 || store.statusUpload"
-              dense
+                dense
-              class="col-xs-12 col-sm-6"
+                outlined
-              outlined
+                v-model="formCommand.author"
-              label="ชื่อผลงาน"
+                @update:model-value="updateInput(formCommand)"
-              v-model="formCommand.subject"
+                label="เจ้าของผลงาน"
-              @update:model-value="updateInput(formCommand)"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกเจ้าของผลงาน'}`]"
-              :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อผลงาน'}`]"
+                lazy-rules
-              lazy-rules
+                hide-bottom-space
-              hide-bottom-space
+              />
-            />
+            </div>
-            <q-input
+            <div
-              :readonly="store.currentStep != 2 || store.statusUpload"
+              class="col-12"
-              ref="performanceOwnerRef"
+              v-if="store.currentStep === 2 && !store.statusUpload"
-              class="col-xs-12 col-sm-6"
+            >
-              dense
+              <q-btn
-              outlined
+                flat
-              v-model="formCommand.author"
+                round
-              @update:model-value="updateInput(formCommand)"
+                color="primary"
-              label="เจ้าของผลงาน"
+                icon="add"
-              :rules="[(val:string) => !!val || `${'กรุณากรอกเจ้าของผลงาน'}`]"
+                @click="onAddSubject"
-              lazy-rules
+              >
-              hide-bottom-space
+                <q-tooltip>เพิ่มชื่อผลงาน</q-tooltip>
-            />
+              </q-btn>
+            </div>
+            <div
+              class="row col-12 q-col-gutter-sm"
+              v-for="(item, index) in formCommand.subject"
+              :key="index"
+            >
+              <div class="col-11">
+                <q-input
+                  :readonly="store.currentStep != 2 || store.statusUpload"
+                  dense
+                  outlined
+                  label="ชื่อผลงาน"
+                  v-model="formCommand.subject[index]"
+                  @update:model-value="updateInput(formCommand)"
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อผลงาน'}`]"
+                  lazy-rules
+                  hide-bottom-space
+                />
+              </div>
+              <div
+                class="row col-1 items-centet justify-center"
+                v-if="index !== 0"
+              >
+                <q-btn
+                  v-if="store.currentStep === 2 && !store.statusUpload"
+                  flat
+                  round
+                  color="red"
+                  icon="delete"
+                  @click="onDeleteSubject(index)"
+                >
+                  <q-tooltip>ลบ</q-tooltip>
+                </q-btn>
+              </div>
+            </div>
           </div>
         </div>
       </q-card>
@@ -459,7 +436,6 @@ onMounted(async () => {
               <div class="row col-12 q-col-gutter-sm q-pa-sm">
                 <q-input
                   :readonly="store.currentStep != 2 || store.statusUpload"
-                  ref="commanderFullnameRef"
                   dense
                   class="col-xs-12 col-sm-6"
                   outlined
@@ -470,19 +446,55 @@ onMounted(async () => {
                   lazy-rules
                   hide-bottom-space
                 />
-                <q-input
+                <div class="col-12">
-                  :readonly="store.currentStep != 2 || store.statusUpload"
+                  <div class="row col-12 q-col-gutter-sm">
-                  ref="commanderPositionRef"
+                    <q-input
-                  class="col-xs-12 col-sm-6"
+                      :readonly="store.currentStep != 2 || store.statusUpload"
-                  dense
+                      class="col-xs-6 col-sm-6"
-                  outlined
+                      dense
-                  v-model="formCommand.commanderPosition"
+                      outlined
-                  @update:model-value="updateInput(formCommand)"
+                      v-model="formCommand.commanderPosition"
-                  label="ตำแหน่ง"
+                      @update:model-value="updateInput(formCommand)"
-                  :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
+                      label="ตำแหน่ง"
-                  lazy-rules
+                      :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
-                  hide-bottom-space
+                      lazy-rules
-                />
+                      hide-bottom-space
+                    />
+
+                    <q-input
+                      :readonly="store.currentStep != 2 || store.statusUpload"
+                      class="col-xs-6 col-sm-6"
+                      dense
+                      outlined
+                      v-model="formCommand.commanderOrg"
+                      @update:model-value="updateInput(formCommand)"
+                      label="สังกัด"
+                      :rules="[(val:string) => !!val || `${'กรุณากรอกสังกัด'}`]"
+                      lazy-rules
+                      hide-bottom-space
+                    />
+                    <q-input
+                      :readonly="store.currentStep != 2 || store.statusUpload"
+                      class="col-xs-6 col-sm-6"
+                      dense
+                      outlined
+                      v-model="formCommand.commanderPositionOld"
+                      @update:model-value="updateInput(formCommand)"
+                      label="ตำแหน่งเดิม"
+                      hide-bottom-space
+                    />
+                    <q-input
+                      :readonly="store.currentStep != 2 || store.statusUpload"
+                      class="col-xs-6 col-sm-6"
+                      dense
+                      outlined
+                      v-model="formCommand.commanderOrgOld"
+                      @update:model-value="updateInput(formCommand)"
+                      label="สังกัดเดิม"
+                      hide-bottom-space
+                    />
+                  </div>
+                </div>
               </div>
             </div>
           </div>
@@ -494,7 +506,6 @@ onMounted(async () => {
               <div class="row col-12 q-col-gutter-md q-pa-sm">
                 <q-input
                   :readonly="store.currentStep != 2 || store.statusUpload"
-                  ref="commanderAboveFullnameRef"
                   dense
                   class="col-xs-12 col-sm-6"
                   outlined
@@ -505,19 +516,55 @@ onMounted(async () => {
                   @update:model-value="updateInput(formCommand)"
                   hide-bottom-space
                 />
-                <q-input
+
-                  :readonly="store.currentStep != 2 || store.statusUpload"
+                <div class="col-12">
-                  ref="commanderAbovePositionRef"
+                  <div class="row col-12 q-col-gutter-sm">
-                  class="col-xs-12 col-sm-6"
+                    <q-input
-                  dense
+                      :readonly="store.currentStep != 2 || store.statusUpload"
-                  outlined
+                      class="col-xs-6 col-sm-6"
-                  v-model="formCommand.commanderAbovePosition"
+                      dense
-                  label="ตำแหน่ง"
+                      outlined
-                  :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
+                      v-model="formCommand.commanderAbovePosition"
-                  lazy-rules
+                      label="ตำแหน่ง"
-                  hide-bottom-space
+                      :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
-                  @update:model-value="updateInput(formCommand)"
+                      lazy-rules
-                />
+                      hide-bottom-space
+                      @update:model-value="updateInput(formCommand)"
+                    />
+                    <q-input
+                      :readonly="store.currentStep != 2 || store.statusUpload"
+                      class="col-xs-6 col-sm-6"
+                      dense
+                      outlined
+                      v-model="formCommand.commanderAboveOrg"
+                      label="สังกัด"
+                      :rules="[(val:string) => !!val || `${'กรุณากรอกสังกัด'}`]"
+                      lazy-rules
+                      hide-bottom-space
+                      @update:model-value="updateInput(formCommand)"
+                    />
+                    <q-input
+                      :readonly="store.currentStep != 2 || store.statusUpload"
+                      class="col-xs-6 col-sm-6"
+                      dense
+                      outlined
+                      v-model="formCommand.commanderAbovePositionOld"
+                      label="ตำแหน่งเดิม"
+                      hide-bottom-space
+                      @update:model-value="updateInput(formCommand)"
+                    />
+                    <q-input
+                      :readonly="store.currentStep != 2 || store.statusUpload"
+                      class="col-xs-6 col-sm-6"
+                      dense
+                      outlined
+                      v-model="formCommand.commanderAboveOrgOld"
+                      label="สังกัดเดิม"
+                      hide-bottom-space
+                      @update:model-value="updateInput(formCommand)"
+                    />
+                  </div>
+                </div>
               </div>
             </div>
           </div>
@@ -527,8 +574,97 @@ onMounted(async () => {
 
     <!-- v-if="store.statusUpload -->
     <div class="row q-col-gutter-sm">
+      <div
+        class="col-6"
+        v-if="store.currentStep === 2"
+        v-for="(item, index) in formTemplates"
+        :key="index"
+      >
+        <q-card bordered class="cardSp1">
+          <div
+            class="text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm col-12 row items-center"
+          >
+            <div>{{ item.title }}</div>
+            <q-space />
+            <div>
+              <q-btn
+                flat
+                dense
+                icon="download"
+                color="indigo"
+                @click="
+                  onClickDowloadFile(item.code, item.templateName, item.title)
+                "
+              >
+                <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
+              >
+            </div>
+            <div>
+              <q-btn
+                v-if="item.downloadFile != ''"
+                :href="item.downloadFile"
+                target="_blank"
+                class="q-ml-sm"
+                color="blue"
+                flat
+                dense
+                icon="visibility"
+              >
+                <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
+              >
+            </div>
+          </div>
+          <div class="col-12"><q-separator /></div>
+          <div class="row">
+            <div class="col-12 q-pa-sm">
+              <div class="row q-col-gutter-md col-12">
+                <q-file
+                  v-model="item.file"
+                  :disable="!store.statusUpload"
+                  class="col-xs-12 col-sm-12"
+                  label="อัปโหลดไฟล์"
+                  outlined
+                  dense
+                  lazy-rules
+                  hide-bottom-space
+                  accept=".pdf"
+                  :rules="
+                  item.downloadFile === ''
+                      ? [(val:any) => !!val || 'กรุณาเลือกไฟล์']
+                      : []
+                  "
+                >
+                  <template v-slot:prepend>
+                    <q-icon name="attach_file" />
+                  </template>
+                  <template v-slot:after>
+                    <q-btn
+                      :disable="!store.statusUpload"
+                      flat
+                      round
+                      dense
+                      color="primary"
+                      icon="mdi-upload"
+                      @click="
+                        fetchPathUpload(
+                          'เล่ม 1',
+                          evaluateId,
+                          item.fileName,
+                          item.file
+                        )
+                      "
+                      ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                    >
+                  </template>
+                </q-file>
+              </div>
+            </div>
+          </div>
+        </q-card>
+      </div>
+
       <!-- แบบพิจารณาคุณสมบัติบุคคล -->
-      <div class="col-6" v-if="store.currentStep === 2">
+      <!-- <div class="col-6" v-if="store.currentStep === 2">
         <q-card bordered class="cardSp1">
           <div
             class="text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm col-12 row items-center"
@@ -615,10 +751,10 @@ onMounted(async () => {
             </div>
           </div>
         </q-card>
-      </div>
+      </div> -->
 
       <!-- แบบแสดงรายละเอียดการเสนอผลงาน     -->
-      <div class="col-6" v-if="store.currentStep === 2">
+      <!-- <div class="col-6" v-if="store.currentStep === 2">
         <q-card bordered class="cardSp1">
           <div
             class="text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm col-12 row items-center"
@@ -705,10 +841,10 @@ onMounted(async () => {
             </div>
           </div>
         </q-card>
-      </div>
+      </div> -->
 
       <!-- แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก) -->
-      <div class="col-6" v-if="store.currentStep === 2">
+      <!-- <div class="col-6" v-if="store.currentStep === 2">
         <q-card bordered class="cardSp1">
           <div
             class="col-12 row text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm no-wrap"
@@ -795,10 +931,10 @@ onMounted(async () => {
             </div>
           </div>
         </q-card>
-      </div>
+      </div> -->
 
       <!-- แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9) -->
-      <div class="col-6" v-if="store.currentStep === 2">
+      <!-- <div class="col-6" v-if="store.currentStep === 2">
         <q-card bordered class="cardSp1">
           <div
             class="col-12 row text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm no-wrap"
@@ -884,10 +1020,10 @@ onMounted(async () => {
             </div>
           </div>
         </q-card>
-      </div>
+      </div> -->
 
       <!-- แบบประเมินคุณลักษณะบุคคล -->
-      <div class="col-6" v-if="store.currentStep === 2">
+      <!-- <div class="col-6" v-if="store.currentStep === 2">
         <q-card bordered class="cardSp1">
           <div
             class="col-12 row text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm items-center"
@@ -972,10 +1108,10 @@ onMounted(async () => {
             </div>
           </div>
         </q-card>
-      </div>
+      </div> -->
 
       <!--ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11) -->
-      <div class="col-6" v-if="store.currentStep === 2">
+      <!-- <div class="col-6" v-if="store.currentStep === 2">
         <q-card bordered class="cardSp1">
           <div
             class="col-12 row text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm items-center"
@@ -1060,7 +1196,7 @@ onMounted(async () => {
             </div>
           </div>
         </q-card>
-      </div>
+      </div> -->
     </div>
   </div>
 

src/modules/06_evaluate/components/step/step3.vue

@@ -22,13 +22,23 @@ const evaluateId = ref<string>(route.params.id.toString());
 const emit = defineEmits(["update:file"]);
 
 const selectedItem = ref(1);
-const fileName = ref([
+const formTemplates = ref([
-  "1-แบบพิจารณาคุณสมบัติบุคคล",
+  {
-  "2-แบบแสดงรายละเอียดการเสนอผลงาน",
+    title: "แบบพิจารณาคุณสมบัติบุคคล",
-  "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)",
+    fileName: "1-แบบพิจารณาคุณสมบัติบุคคล",
-  "4-แบบประเมินคุณลักษณะบุคคล",
+  },
-  "5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)",
+  {
-  "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
+    title: "แบบแสดงรายละเอียดการเสนอผลงาน",
+    fileName: "2-แบบแสดงรายละเอียดการเสนอผลงาน",
+  },
+  {
+    title: "แบบประเมินคุณลักษณะบุคคล",
+    fileName: "4-แบบประเมินคุณลักษณะบุคคล",
+  },
+  {
+    title: "ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
+    fileName: "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
+  },
 ]);
 
 /**
@@ -38,7 +48,7 @@ const fileName = ref([
 function handleItemClick(itemNumber: number) {
   store.tabPanels = itemNumber.toString();
   selectedItem.value = itemNumber;
-  fetchDocument(fileName.value[itemNumber - 1]);
+  fetchDocument(formTemplates.value[itemNumber - 1].fileName);
 }
 
 /**
@@ -50,14 +60,14 @@ async function fetchDocument(fileName: string) {
   evaluateId.value &&
     (await http
       .get(config.API.loadFileDocument("เล่ม 1", evaluateId.value, fileName))
-      .then((res) => {
+      .then(async (res) => {
-        downloadFile(res.data.downloadUrl);
+        await downloadFile(res.data.downloadUrl);
       })
       .catch((err) => {
         messageError($q, err);
       })
       .finally(() => {
-        showLoader();
+        hideLoader();
       }));
 }
 
@@ -66,7 +76,6 @@ async function fetchDocument(fileName: string) {
  * @param url ลิงก์ดาวน์โหลดไฟล์
  */
 async function downloadFile(url: string) {
-  showLoader();
   await axios
     .get(url, {
       responseType: "blob",
@@ -81,84 +90,28 @@ async function downloadFile(url: string) {
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
 /** HooK lifecycle*/
 onMounted(async () => {
-  await fetchDocument(fileName.value[selectedItem.value - 1]);
+  await fetchDocument(formTemplates.value[selectedItem.value - 1].fileName);
 });
 </script>
 
 <template>
   <q-list separator>
     <q-item
+      v-for="(item, index) in formTemplates"
+      :key="index"
       clickable
       v-ripple
-      :active="selectedItem === 1 ? true : false"
+      :active="selectedItem === index + 1 ? true : false"
       active-class="text-primary"
-      @click="handleItemClick(1)"
+      @click="handleItemClick(index + 1)"
       class="cursor-pointer"
     >
-      <q-item-section>แบบพิจารณาคุณสมบัติบุคคล</q-item-section>
+      <q-item-section>{{ item.title }}</q-item-section>
-    </q-item>
-    <q-item
-      clickable
-      v-ripple
-      :active="selectedItem === 2 ? true : false"
-      active-class="text-primary"
-      @click="handleItemClick(2)"
-      class="cursor-pointer"
-    >
-      <q-item-section>แบบแสดงรายละเอียดการเสนอผลงาน</q-item-section>
-    </q-item>
-    <q-item
-      clickable
-      v-ripple
-      :active="selectedItem === 3 ? true : false"
-      active-class="text-primary"
-      @click="handleItemClick(3)"
-      class="cursor-pointer"
-    >
-      <q-item-section
-        >แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล
-        (เอกสารแบบ ก)</q-item-section
-      >
-    </q-item>
-    <q-item
-      clickable
-      v-ripple
-      :active="selectedItem === 4 ? true : false"
-      active-class="text-primary"
-      @click="handleItemClick(4)"
-      class="cursor-pointer"
-    >
-      <q-item-section> แบบประเมินคุณลักษณะบุคคล </q-item-section>
-    </q-item>
-    <q-item
-      clickable
-      v-ripple
-      :active="selectedItem === 5 ? true : false"
-      active-class="text-primary"
-      @click="handleItemClick(5)"
-      class="cursor-pointer"
-    >
-      <q-item-section>
-        แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)
-      </q-item-section>
-    </q-item>
-    <q-item
-      clickable
-      v-ripple
-      :active="selectedItem === 6 ? true : false"
-      active-class="text-primary"
-      @click="handleItemClick(6)"
-      class="cursor-pointer"
-    >
-      <q-item-section> ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11) </q-item-section>
     </q-item>
   </q-list>
 </template>

src/modules/06_evaluate/components/step/step4.vue

@@ -1,7 +1,215 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import axios from "axios";
 
+import http from "@/plugins/http";
+import config from "@/app.config";
+import genReport from "@/plugins/genreport";
+import { useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useEvaluateStore } from "@/modules/06_evaluate/store";
+
+const $q = useQuasar();
+const route = useRoute();
+const store = useEvaluateStore();
+const { showLoader, hideLoader, messageError, success } = useCounterMixin();
+
+const formTemplates = ref<any[]>([
+  {
+    code: "EV1_005",
+    templateName: "template-1",
+    title: "แบบพิจารณาคุณสมบัติบุคคล (ฉบับแก้ไข)",
+    fileName: "1-แบบพิจารณาคุณสมบัติบุคคล (ฉบับแก้ไข)",
+    downloadFile: "",
+    file: null,
+  },
+  {
+    code: "EV1_006",
+    templateName: "template-2",
+    title: "แบบแสดงรายละเอียดการเสนอผลงาน (ฉบับแก้ไข)",
+    fileName: "2-แบบแสดงรายละเอียดการเสนอผลงาน (ฉบับแก้ไข)",
+    downloadFile: "",
+    file: null,
+  },
+  {
+    code: "EV1_008",
+    templateName: "template-4",
+    title: "แบบประเมินคุณลักษณะบุคคล (ฉบับแก้ไข)",
+    fileName: "4-แบบประเมินคุณลักษณะบุคคล (ฉบับแก้ไข)",
+    downloadFile: "",
+    file: null,
+  },
+  {
+    code: "EV1_010",
+    templateName: "template-6",
+    title: "ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11) (ฉบับแก้ไข)",
+    fileName: "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11) (ฉบับแก้ไข)",
+    downloadFile: "",
+    file: null,
+  },
+]);
+
+const evaluateId = ref<string>(route.params.id.toString());
 const status = ref<string>("WAIT_CHECK_DOC_V1");
+
+const profile = ref<any>();
+const author = ref<string>("");
+const subject = ref<string>("");
+
+/**
+ * function
+ * @param id  evaluate ID
+ */
+async function fetchCheckSpec(id: string) {
+  await http
+    .get(config.API.evaluationReportCheckspecByid(id))
+    .then((res) => {
+      const data = res.data.result;
+      profile.value = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+/**
+ * function fecth รายชื่อผู้เซ็นเอกสาร
+ * @param id evaluate ID
+ */
+function fetcheSigner(id: string) {
+  http
+    .get(config.API.evaluationSignerDoc1(id))
+    .then((res) => {
+      const data = res.data.result;
+      author.value = data.author;
+      subject.value = data.subject;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+/**
+ * funcion ดาวน์โหลดไฟล์
+ * @param tp templatname
+ * @param templateName
+ * @param fileName ชือ่ไฟล์
+ */
+async function onClickDowloadFile(
+  tp: string,
+  templateName: string,
+  fileName: string
+) {
+  showLoader();
+  const body = {
+    template: tp,
+    reportName: templateName,
+    data: profile.value,
+  };
+  await genReport(body, fileName); //สร้างไฟล์ต้นแบบ
+  hideLoader();
+}
+
+/**
+ * function fetch ลิงก์อัปโหลดไฟล์
+ * @param volume เล่ม
+ * @param id  evaluate ID
+ * @param type ประเภทไฟล์
+ * @param file ไฟล์
+ */
+async function fetchPathUpload(
+  volume: string,
+  id: string | undefined,
+  type: string,
+  file: any
+) {
+  const body = {
+    fileList: {
+      fileName: type,
+      metadata: {
+        subject: subject.value,
+        author: author.value,
+      },
+    },
+  };
+
+  if (id && file) {
+    showLoader();
+    await http
+      .post(config.API.loadPathDocument(volume, id), body)
+      .then(async (res) => {
+        const foundKey: string | undefined = Object.keys(res.data).find(
+          (key) =>
+            res.data[key]?.fileName !== undefined &&
+            res.data[key]?.fileName !== ""
+        );
+        foundKey && (await uploadfile(res.data[foundKey]?.uploadUrl, file));
+        await downloadFile(type);
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
+}
+
+/**
+ *  functoin อัปโหลดไฟล์
+ * @param uploadUrl  link อัปโหลด
+ * @param file  ไฟล์
+ */
+async function uploadfile(uploadUrl: string, file: any) {
+  await axios
+    .put(uploadUrl, file, {
+      headers: {
+        "Content-Type": file.type,
+      },
+    })
+    .then(() => {
+      success($q, "อัปโหลไฟล์สำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+/**
+ * function ดาวน์โหลดไฟล์
+ * @param fileName ชื่อไฟล์
+ */
+async function downloadFile(fileName: string) {
+  await http
+    .get(config.API.loadFileDocument("เล่ม 1", evaluateId.value, fileName))
+    .then((res) => {
+      const index = formTemplates.value.findIndex(
+        (item) => item.fileName === fileName
+      );
+      if (index !== -1) {
+        formTemplates.value[index].downloadFile = res.data.downloadUrl;
+      }
+    });
+}
+
+/**lifecycle Hooks*/
+onMounted(async () => {
+  try {
+    showLoader();
+    await Promise.all([
+      fetcheSigner(evaluateId.value),
+      fetchCheckSpec(evaluateId.value),
+      formTemplates.value.forEach((e) => {
+        downloadFile(e.fileName);
+      }),
+    ]);
+  } catch (error) {
+    console.log(error);
+  } finally {
+    hideLoader();
+  }
+});
 </script>
 
 <template>
@@ -15,6 +223,99 @@ const status = ref<string>("WAIT_CHECK_DOC_V1");
       style="font-size: 16px"
     />
   </div>
+
+  <div class="row q-col-gutter-sm q-pa-sm">
+    <div class="col-6" v-for="(item, index) in formTemplates" :key="index">
+      <q-card
+        bordered
+        class="cardSp1"
+        v-if="
+          (store.currentStep !== 4 &&
+            formTemplates.some((e) => e.downloadFile !== '')) ||
+          store.currentStep == 4
+        "
+      >
+        <div
+          class="text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm col-12 row items-center"
+        >
+          <div>{{ item.title }}</div>
+          <q-space />
+          <!-- <div>
+            <q-btn
+              flat
+              dense
+              icon="download"
+              color="indigo"
+              @click="
+                onClickDowloadFile(item.code, item.templateName, item.title)
+              "
+            >
+              <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
+            >
+          </div> -->
+          <div>
+            <q-btn
+              v-if="item.downloadFile != ''"
+              :href="item.downloadFile"
+              target="_blank"
+              class="q-ml-sm"
+              color="blue"
+              flat
+              dense
+              icon="visibility"
+            >
+              <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
+            >
+          </div>
+        </div>
+        <div class="col-12"><q-separator /></div>
+        <div class="row" v-if="store.currentStep === 4">
+          <div class="col-12 q-pa-sm">
+            <div class="row q-col-gutter-md col-12">
+              <q-file
+                v-model="item.file"
+                class="col-xs-12 col-sm-12"
+                label="อัปโหลดไฟล์"
+                outlined
+                dense
+                lazy-rules
+                hide-bottom-space
+                accept=".pdf"
+                :rules="
+                item.downloadFile === ''
+                    ? [(val:any) => !!val || 'กรุณาเลือกไฟล์']
+                    : []
+                "
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" />
+                </template>
+                <template v-slot:after>
+                  <q-btn
+                    :disable="!item.file"
+                    flat
+                    round
+                    dense
+                    color="primary"
+                    icon="mdi-upload"
+                    @click="
+                      fetchPathUpload(
+                        'เล่ม 1',
+                        evaluateId,
+                        item.fileName,
+                        item.file
+                      )
+                    "
+                    ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                  >
+                </template>
+              </q-file>
+            </div>
+          </div>
+        </div>
+      </q-card>
+    </div>
+  </div>
 </template>
 
 <style scoped></style>

src/modules/06_evaluate/components/step/step6.vue

@@ -34,36 +34,25 @@ const fileEvaluation1 = ref<any>();
 const formCommand = reactive<FormCommand>({
   commanderFullname: "",
   commanderPosition: "",
+  commanderPositionOld: "",
+  commanderOrg: "",
+  commanderOrgOld: "",
   commanderAboveFullname: "",
   commanderAbovePosition: "",
+  commanderAbovePositionOld: "",
+  commanderAboveOrgOld: "",
+  commanderAboveOrg: "",
   author: "",
-  subject: "",
+  subject: [""],
   assignedPosition: "",
 });
-/** ref input*/
-const commanderFullnameRef = ref<object | null>(null);
-const commanderPositionRef = ref<object | null>(null);
-const commanderAboveFullnameRef = ref<object | null>(null);
-const commanderAbovePositionRef = ref<object | null>(null);
-const fileEvaluation1Ref = ref<object | null>(null);
-const performanceRef = ref<object | null>(null);
-const performanceOwnerRef = ref<object | null>(null);
-const assignedPositionRef = ref<object | null>(null);
 
 const modalView = ref<boolean>(false);
 
 /** function อัปเดท ผลงาน,ผู้เซ็นเอกสาร*/
 function updateInput(value: any) {
   const ref = {
-    commanderFullnameRef: commanderFullnameRef.value,
-    commanderPositionRef: commanderPositionRef.value,
-    commanderAboveFullnameRef: commanderAboveFullnameRef.value,
-    commanderAbovePositionRef: commanderAbovePositionRef.value,
-    fileEvaluation1Ref: fileEvaluation1Ref.value,
     downloadFile: [downloadUrl.value],
-    performance: performanceRef.value,
-    performanceOwner: performanceOwnerRef.value,
-    assignedPosition: assignedPositionRef.value,
   };
   emit("update:form", value, ref);
 }
@@ -146,17 +135,25 @@ async function fetcheSigner(id: string) {
       const data = res.data.result;
       formCommand.commanderFullname = data.commanderFullnameDoc2;
       formCommand.commanderPosition = data.commanderPositionDoc2;
+      formCommand.commanderPositionOld = data.commanderPositionOldDoc2;
+      formCommand.commanderOrg = data.commanderOrgDoc2;
+      formCommand.commanderOrgOld = data.commanderOrgOldDoc2;
       formCommand.commanderAboveFullname = data.commanderAboveFullnameDoc2;
       formCommand.commanderAbovePosition = data.commanderAbovePositionDoc2;
+      formCommand.commanderAbovePositionOld =
+        data.commanderAbovePositionOldDoc2;
+      formCommand.commanderAboveOrgOld = data.commanderAboveOrgOldDoc2;
+      formCommand.commanderAboveOrg = data.commanderAboveOrgDoc2;
       formCommand.author = data.authorDoc2;
       formCommand.subject = data.subjectDoc2;
       formCommand.assignedPosition = data.assignedPosition;
 
-      store.statusUpload6 = data.commanderFullnameDoc2 === null ? false : true;
+      store.statusUpload6 = data.isUpdated;
     })
-    .catch(() => {
+    .catch((err) => {
-      store.statusUpload6 = false;
+      messageError($q, err);
-      getCommander();
+      // store.statusUpload6 = false;
+      // getCommander();
     })
     .finally(() => {
       hideLoader();
@@ -181,28 +178,17 @@ async function fetchCheckDate() {
 
 const downloadUrl = ref<string>("");
 /** function เช็คไฟล์อัปโหลด*/
-function checkDoc() {
+async function checkDoc() {
-  // showLoader();
+  await http
-  http
     .get(
       config.API.loadFileDocument("เล่ม 2", evaluateId.value, "1-เอกสารเล่ม 2")
     )
     .then((res: any) => {
       downloadUrl.value = res.data.downloadUrl;
     })
-    .catch(() => {})
     .finally(() => {
-      // hideLoader();
       const ref = {
-        commanderFullnameRef: commanderFullnameRef.value,
-        commanderPositionRef: commanderPositionRef.value,
-        commanderAboveFullnameRef: commanderAboveFullnameRef.value,
-        commanderAbovePositionRef: commanderAbovePositionRef.value,
-        fileEvaluation1Ref: fileEvaluation1Ref.value,
         downloadFile: [downloadUrl.value],
-        performance: performanceRef.value,
-        performanceOwner: performanceOwnerRef.value,
-        assignedPosition: assignedPositionRef.value,
       };
 
       emit("update:form", formCommand, ref);
@@ -221,8 +207,15 @@ function getCommander() {
     })
     .catch((e) => {
       messageError($q, e);
-    })
+    });
-    .finally(() => {});
+}
+
+function onAddSubject() {
+  formCommand.subject.push("");
+}
+
+function onDeleteSubject(index: number) {
+  formCommand.subject.splice(index, 1);
 }
 
 watch(
@@ -273,27 +266,12 @@ onMounted(async () => {
         <q-card bordered class="shadow-0" style="border: 1px solid #d6dee1">
           <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">ผลงาน</div>
           <div class="col-12"><q-separator /></div>
-          <div class="col-12">
+          <div class="col-12 q-pa-sm">
-            <div class="row q-col-gutter-sm col-12">
+            <div class="row q-col-gutter-sm">
-              <div class="col-xs-12 col-sm-12 row">
+              <div class="col-12 row q-col-gutter-sm">
-                <div class="row col-12 q-col-gutter-sm q-pa-sm">
+                <div class="col-6">
                   <q-input
-                    :readonly="store.currentStep != 6"
+                    :readonly="store.currentStep != 6 || store.statusUpload6"
-                    ref="performanceRef"
-                    dense
-                    class="col-xs-12 col-sm-6"
-                    outlined
-                    label="ชื่อผลงาน"
-                    v-model="formCommand.subject"
-                    @update:model-value="updateInput(formCommand)"
-                    :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อผลงาน'}`]"
-                    hide-bottom-space
-                    lazy-rules
-                  />
-                  <q-input
-                    :readonly="store.currentStep != 6"
-                    ref="performanceOwnerRef"
-                    class="col-xs-12 col-sm-6"
                     dense
                     outlined
                     v-model="formCommand.author"
@@ -303,9 +281,10 @@ onMounted(async () => {
                     :rules="[(val:string) => !!val || `${'กรุณากรอกเจ้าของผลงาน'}`]"
                     lazy-rules
                   />
+                </div>
+                <div class="col-6">
                   <q-input
-                    :readonly="store.currentStep != 6"
+                    :readonly="store.currentStep != 6 || store.statusUpload6"
-                    ref="assignedPositionRef"
                     class="col-xs-12 col-sm-6"
                     dense
                     outlined
@@ -314,12 +293,62 @@ onMounted(async () => {
                     label="ตำแหน่งที่ได้รับ"
                     hide-bottom-space
                     :rules="[
-                      (val:string) => !!val || `${'กรุณากรอกตำแหน่งที่ได้รับ'}`,
+                    (val:string) => !!val || `${'กรุณากรอกตำแหน่งที่ได้รับ'}`,
-                    ]"
+                  ]"
                     lazy-rules
                   />
                 </div>
               </div>
+
+              <div
+                class="col-12"
+                v-if="store.currentStep === 6 && !store.statusUpload6"
+              >
+                <q-btn
+                  flat
+                  round
+                  color="primary"
+                  icon="add"
+                  @click="onAddSubject"
+                >
+                  <q-tooltip>เพิ่มชื่อผลงาน</q-tooltip>
+                </q-btn>
+              </div>
+
+              <div
+                class="row col-12 q-col-gutter-sm"
+                v-for="(item, index) in formCommand.subject"
+                :key="index"
+              >
+                <div class="col-11">
+                  <q-input
+                    :readonly="store.currentStep != 6 || store.statusUpload6"
+                    dense
+                    outlined
+                    label="ชื่อผลงาน"
+                    v-model="formCommand.subject[index]"
+                    @update:model-value="updateInput(formCommand)"
+                    :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อผลงาน'}`]"
+                    hide-bottom-space
+                    lazy-rules
+                  />
+                </div>
+                <div
+                  class="row col-1 items-centet justify-center"
+                  v-if="index !== 0"
+                >
+                  <q-btn
+                    v-if="store.currentStep === 6 && !store.statusUpload6"
+                    flat
+                    round
+                    color="red"
+                    icon="delete"
+                    @click="onDeleteSubject(index)"
+                  >
+                    <q-tooltip>ลบ</q-tooltip>
+                  </q-btn>
+                </div>
+              </div>
             </div>
           </div>
         </q-card>
@@ -340,8 +369,7 @@ onMounted(async () => {
                 </div>
                 <div class="row col-12 q-col-gutter-sm q-pa-sm">
                   <q-input
-                    :readonly="store.currentStep != 6"
+                    :readonly="store.currentStep != 6 || store.statusUpload6"
-                    ref="commanderFullnameRef"
                     dense
                     class="col-xs-12 col-sm-6"
                     outlined
@@ -352,19 +380,63 @@ onMounted(async () => {
                     lazy-rules
                     hide-bottom-space
                   />
-                  <q-input
+                  <div class="col-12">
-                    :readonly="store.currentStep != 6"
+                    <div class="row col-12 q-col-gutter-sm">
-                    ref="commanderPositionRef"
+                      <q-input
-                    class="col-xs-12 col-sm-6"
+                        :readonly="
-                    dense
+                          store.currentStep != 6 || store.statusUpload6
-                    outlined
+                        "
-                    v-model="formCommand.commanderPosition"
+                        class="col-xs-6 col-sm-6"
-                    @update:model-value="updateInput(formCommand)"
+                        dense
-                    label="ตำแหน่ง"
+                        outlined
-                    :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
+                        v-model="formCommand.commanderPosition"
-                    lazy-rules
+                        @update:model-value="updateInput(formCommand)"
-                    hide-bottom-space
+                        label="ตำแหน่ง"
-                  />
+                        :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
+                        lazy-rules
+                        hide-bottom-space
+                      />
+
+                      <q-input
+                        :readonly="
+                          store.currentStep != 6 || store.statusUpload6
+                        "
+                        class="col-xs-6 col-sm-6"
+                        dense
+                        outlined
+                        v-model="formCommand.commanderOrg"
+                        @update:model-value="updateInput(formCommand)"
+                        label="สังกัด"
+                        :rules="[(val:string) => !!val || `${'กรุณากรอกสังกัด'}`]"
+                        lazy-rules
+                        hide-bottom-space
+                      />
+                      <q-input
+                        :readonly="
+                          store.currentStep != 6 || store.statusUpload6
+                        "
+                        class="col-xs-6 col-sm-6"
+                        dense
+                        outlined
+                        v-model="formCommand.commanderPositionOld"
+                        @update:model-value="updateInput(formCommand)"
+                        label="ตำแหน่งเดิม"
+                        hide-bottom-space
+                      />
+                      <q-input
+                        :readonly="
+                          store.currentStep != 6 || store.statusUpload6
+                        "
+                        class="col-xs-6 col-sm-6"
+                        dense
+                        outlined
+                        v-model="formCommand.commanderOrgOld"
+                        @update:model-value="updateInput(formCommand)"
+                        label="สังกัดเดิม"
+                        hide-bottom-space
+                      />
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>
@@ -376,8 +448,7 @@ onMounted(async () => {
                 </div>
                 <div class="row col-12 q-col-gutter-sm q-pa-sm">
                   <q-input
-                    :readonly="store.currentStep != 6"
+                    :readonly="store.currentStep != 6 || store.statusUpload6"
-                    ref="commanderAboveFullnameRef"
                     dense
                     class="col-xs-12 col-sm-6"
                     outlined
@@ -388,19 +459,63 @@ onMounted(async () => {
                     @update:model-value="updateInput(formCommand)"
                     hide-bottom-space
                   />
-                  <q-input
+
-                    :readonly="store.currentStep != 6"
+                  <div class="col-12">
-                    ref="commanderAbovePositionRef"
+                    <div class="row col-12 q-col-gutter-sm">
-                    class="col-xs-12 col-sm-6"
+                      <q-input
-                    dense
+                        :readonly="
-                    outlined
+                          store.currentStep != 6 || store.statusUpload6
-                    v-model="formCommand.commanderAbovePosition"
+                        "
-                    label="ตำแหน่ง"
+                        class="col-xs-6 col-sm-6"
-                    :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
+                        dense
-                    lazy-rules
+                        outlined
-                    @update:model-value="updateInput(formCommand)"
+                        v-model="formCommand.commanderAbovePosition"
-                    hide-bottom-space
+                        label="ตำแหน่ง"
-                  />
+                        :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
+                        lazy-rules
+                        @update:model-value="updateInput(formCommand)"
+                        hide-bottom-space
+                      />
+                      <q-input
+                        :readonly="
+                          store.currentStep != 6 || store.statusUpload6
+                        "
+                        class="col-xs-6 col-sm-6"
+                        dense
+                        outlined
+                        v-model="formCommand.commanderAboveOrg"
+                        label="สังกัด"
+                        :rules="[(val:string) => !!val || `${'กรุณากรอกสังกัด'}`]"
+                        lazy-rules
+                        hide-bottom-space
+                        @update:model-value="updateInput(formCommand)"
+                      />
+                      <q-input
+                        :readonly="
+                          store.currentStep != 6 || store.statusUpload6
+                        "
+                        class="col-xs-6 col-sm-6"
+                        dense
+                        outlined
+                        v-model="formCommand.commanderAbovePositionOld"
+                        label="ตำแหน่งเดิม"
+                        hide-bottom-space
+                        @update:model-value="updateInput(formCommand)"
+                      />
+                      <q-input
+                        :readonly="
+                          store.currentStep != 6 || store.statusUpload6
+                        "
+                        class="col-xs-6 col-sm-6"
+                        dense
+                        outlined
+                        v-model="formCommand.commanderAboveOrgOld"
+                        label="สังกัดเดิม"
+                        hide-bottom-space
+                        @update:model-value="updateInput(formCommand)"
+                      />
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>
@@ -434,7 +549,6 @@ onMounted(async () => {
                 <div class="col-12">
                   <q-file
                     :disable="!store.statusUpload6"
-                    ref="fileEvaluation1Ref"
                     v-model="fileEvaluation1"
                     class="col-12"
                     outlined

src/modules/06_evaluate/components/step/step7.vue

@@ -35,11 +35,14 @@ async function fetchDocument() {
           "1-เอกสารเล่ม 2"
         )
       )
-      .then((res) => {
+      .then(async (res) => {
-        downloadFile(res.data.downloadUrl);
+        await downloadFile(res.data.downloadUrl);
       })
       .catch((err) => {
         messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
       }));
 }
 
@@ -63,9 +66,6 @@ async function downloadFile(url: string) {
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 

src/modules/06_evaluate/components/step/step8.vue

@@ -69,20 +69,20 @@ async function fetchPathUpload(
     showLoader();
     await http
       .post(config.API.loadPathDocument(volume, id), body)
-      .then((res) => {
+      .then(async (res) => {
         const foundKey: string | undefined = Object.keys(res.data).find(
           (key) =>
             res.data[key]?.fileName !== undefined &&
             res.data[key]?.fileName !== ""
         );
-        foundKey && uploadfile(res.data[foundKey]?.uploadUrl, file);
+        foundKey && (await uploadfile(res.data[foundKey]?.uploadUrl, file));
       })
       .catch((err) => {
         messageError($q, err);
+      })
+      .finally(() => {
         hideLoader();
       });
-    // .finally(() => {
-    // });
   }
 }
 
@@ -103,16 +103,12 @@ async function uploadfile(uploadUrl: string, file: any) {
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
 const downloadUrl = ref<string>("");
 /** function เช็คไฟล์อัปโหลด*/
 function checkDoc() {
-  showLoader();
   http
     .get(
       config.API.loadFileDocument(
@@ -123,12 +119,6 @@ function checkDoc() {
     )
     .then((res: any) => {
       downloadUrl.value = res.data.downloadUrl;
-    })
-    .catch((e) => {
-      // messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
@@ -141,7 +131,6 @@ const assignedPosition = ref<string>("");
  * @param id ประเมิน
  */
 async function fetcheSigner(id: string) {
-  showLoader();
   await http
     .get(config.API.evaluationSignerDoc2(id))
     .then((res) => {
@@ -151,16 +140,21 @@ async function fetcheSigner(id: string) {
       assignedPosition.value = data.assignedPosition;
       evaluationResult.value = data.evaluationResult;
     })
-    .catch(() => {})
+    .catch((err) => {
-    .finally(() => {
+      messageError($q, err);
-      hideLoader();
     });
 }
 
 /** lifecycleHook*/
 onMounted(async () => {
-  await checkDoc();
+  try {
-  await fetcheSigner(evaluateId.value);
+    showLoader();
+    await Promise.all([checkDoc(), fetcheSigner(evaluateId.value)]);
+  } catch (error) {
+    console.log(error);
+  } finally {
+    hideLoader();
+  }
 });
 </script>
 
@@ -178,7 +172,12 @@ onMounted(async () => {
         />
       </div>
 
-      <div class="col-12">
+      <div
+        class="col-12"
+        v-if="
+          (store.currentStep !== 8 && downloadUrl) || store.currentStep == 8
+        "
+      >
         <q-card class="shadow-0" bordered>
           <div class="row col-12 bg-grey-1 q-px-sm q-py-xs items-center">
             <div class="text-weight-medium">เอกสารเล่ม 2 (ฉบับแก้ไข)</div>

src/modules/06_evaluate/components/viewstep/popupHistory.vue

@@ -73,7 +73,7 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
-const row = ref<any>();
+const row = ref<any[]>([]);
 
 /**
  * function เรียกข้อมูลประวัติการประเมิน

src/modules/06_evaluate/components/viewstep/viewStep1.vue

@@ -1,5 +1,6 @@
+div
 <script setup lang="ts">
-import { reactive, onMounted } from "vue";
+import { reactive, onMounted, ref } from "vue";
 import { useRoute } from "vue-router";
 import { useQuasar } from "quasar";
 
@@ -7,6 +8,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useEvaluateDetailStore } from "@/modules/06_evaluate/stores/evaluteDetail";
+import { useEvaluateStore } from "@/modules/06_evaluate/store";
 
 /** importType*/
 import type {
@@ -16,10 +18,12 @@ import type {
 
 /** importComponents*/
 import TableData from "@/modules/06_evaluate/components/viewstep/tableStep1.vue";
+import HeaderDialog from "@/components/DialogHeader.vue";
 
 /** use*/
 const mixin = useCounterMixin();
 const store = useEvaluateDetailStore();
+const storeEva = useEvaluateStore();
 const $q = useQuasar();
 const route = useRoute();
 const { showLoader, hideLoader, messageError, date2Thai, findOrgNameHtml } =
@@ -28,7 +32,7 @@ const {
   columnsCertificates,
   columnSalaries,
   columnTraining,
-  columnProjectsProposed,
+  columnExperience,
   columnAssessments,
 } = store;
 
@@ -58,21 +62,23 @@ const formDetail = reactive<any>({
     month: 0,
     day: 0,
   },
+  posExecutive: "",
+  positionArea: "",
   educations: [] as EducationForm[],
   certificates: [],
   salaries: [],
   trainings: [],
   assessments: [],
+  experience: [],
   honor: [],
 });
 
 /** function เรียกข้อมูลตรวจสอบคุณสมบัติ*/
 async function fetchDetail() {
-  showLoader();
   await http
     .get(config.API.positionBykeycloak())
-    .then((res) => {
+    .then(async (res) => {
-      const data = res.data.result;
+      const data = await res.data.result;
       formDetail.root = data.root;
       formDetail.rootId = data.rootId;
       formDetail.userId = data.id;
@@ -88,58 +94,67 @@ async function fetchDetail() {
       formDetail.birthDate = data.birthDate;
       // formDetail.govAge = data.govAge; // ยังไม่มี
       formDetail.salary = data.salary;
-
+      formDetail.posExecutive = data.posExecutive;
-      http.get(config.API.dataUserEducations).then((res) => {
+      formDetail.positionArea = data.positionArea;
-        formDetail.educations = res.data.result;
+      await fetchDataAllDetail();
-      });
-
-      http.get(config.API.dataUserCertificate("certificate")).then((res) => {
-        formDetail.certificates = res.data.result.map(
-          (e: CertificatesForm) => ({
-            certificateNo: e.certificateNo,
-            certificateType: e.certificateType,
-            expireDate: e.expireDate,
-            issueDate: e.issueDate,
-            issuer: e.issuer,
-          })
-        );
-      });
-
-      http.get(config.API.dataUserSalary).then((res) => {
-        formDetail.salaries = res.data.result;
-      });
-
-      http.get(config.API.dataUserCertificate("training")).then((res) => {
-        formDetail.trainings = res.data.result.map((e: any) => ({
-          dateOrder: e.dateOrder,
-          department: e.department,
-          duration: e.duration,
-          endDate: e.endDate,
-          name: e.name,
-          numberOrder: e.numberOrder,
-          place: e.place,
-          startDate: e.startDate,
-          topic: e.topic,
-          yearly: e.yearly,
-        }));
-      });
-
-      http.get(config.API.dataUserAssessments).then((res) => {
-        formDetail.assessments = res.data.result;
-      });
 
       emit("update:formDeital", formDetail);
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(() => {
-      setTimeout(() => {
-        hideLoader();
-      }, 2500);
     });
 }
 
+async function fetchDataAllDetail() {
+  // ดึงข้อมูลประวัติการศึกษา
+  http.get(config.API.dataUserEducations).then((res) => {
+    formDetail.educations = res.data.result;
+  });
+
+  // ดึงข้อมูลใบอนุญาตประกอบวิชาชีพ
+  http.get(config.API.dataUserCertificate("certificate")).then((res) => {
+    formDetail.certificates = res.data.result.map((e: CertificatesForm) => ({
+      certificateNo: e.certificateNo,
+      certificateType: e.certificateType,
+      expireDate: e.expireDate,
+      issueDate: e.issueDate,
+      issuer: e.issuer,
+    }));
+  });
+
+  // ดึงข้อมูลประวัติการรับราชการ
+  http.get(config.API.dataUserSalary).then((res) => {
+    formDetail.salaries = res.data.result;
+  });
+
+  // ดึงข้อมูลประวัติการฝึกอบรมดูงาน
+  http.get(config.API.dataUserCertificate("training")).then((res) => {
+    formDetail.trainings = res.data.result.map((e: any) => ({
+      dateOrder: e.dateOrder,
+      department: e.department,
+      duration: e.duration,
+      endDate: e.endDate,
+      name: e.name,
+      numberOrder: e.numberOrder,
+      place: e.place,
+      startDate: e.startDate,
+      topic: e.topic,
+      yearly: e.yearly,
+    }));
+  });
+
+  http.get(config.API.dataUserPerformance).then((res) => {
+    formDetail.assessments = res.data.result.map((e: any) => ({
+      ...e,
+      isAdd: false,
+    }));
+  });
+
+  http.get(config.API.dataUserPortfolio).then((res) => {
+    formDetail.experience = res.data.result;
+  });
+}
+
 /**
  *  function fetchData ตรวจสอบคุณสมบัติ
  * @param id ประเมิน
@@ -164,27 +179,7 @@ async function fetchCheckSpec(data: any) {
     issueDate: date2Thai(e.issueDate),
     issuer: e.issuer,
   }));
-  formDetail.salaries = data.salaries
+  formDetail.salaries = data.salaries;
-  // .map((e: any) => ({
-  //   amount: e.amount,
-  //   date: e.date,
-  //   mouthSalaryAmount: e.mouthSalaryAmount ? e.mouthSalaryAmount : 0,
-  //   posNo: e.posNo,
-  //   position: e.position,
-  //   positionSalaryAmount: e.positionSalaryAmount ? e.positionSalaryAmount : 0,
-  //   refCommandDate: e.refCommandDate ? e.refCommandDate : "",
-  //   salaryClass: e.salaryClass ? e.salaryClass : "",
-  //   salaryRef: e.salaryRef ? e.salaryRef : "",
-  //   salaryStatus: e.salaryStatus ? e.salariesStatus : "",
-  //   //
-  //   oc: "-",
-  //   lineWork: "-",
-  //   side: "-",
-  //   positionType: "-",
-  //   level: "-",
-  //   positionsAdministrative: "-",
-  //   aspectAdministrative: "-",
-  // }));
   formDetail.trainings = data.trainings.map((e: any) => ({
     dateOrder: date2Thai(e.dateOrder),
     department: e.department,
@@ -197,7 +192,8 @@ async function fetchCheckSpec(data: any) {
     topic: e.topic,
     yearly: e.yearly,
   }));
-  formDetail.assessments = data.assessments;
+  formDetail.assessments = data.performances;
+  formDetail.experience = data.portfolios;
 }
 
 /**
@@ -214,7 +210,6 @@ function formattedNumber(x: number) {
 
 /** get data */
 function getData() {
-  showLoader();
   http
     .get(config.API.dataUserGovernment)
     .then(async (res) => {
@@ -226,28 +221,94 @@ function getData() {
     })
     .catch((e) => {
       messageError($q, e);
-    })
-    .finally(() => {
-      setTimeout(() => {
-        hideLoader();
-      }, 2500);
     });
 }
 
+/** ผลงานที่เคยเสนอขอ*/
+const modalPerformance = ref<boolean>(false);
+const isEdit = ref<boolean>(false);
+const isIndex = ref<number>();
+const formPerformance = reactive<any>({
+  year: null,
+  type: "",
+  subject: "",
+  evaluationResult: "",
+});
+const typeOptions = ref<string[]>([
+  "ประเมินชำนาญการ",
+  "ประเมินชำนาญการพิเศษ",
+  "ประเมินเชี่ยวชาญ",
+]);
+
+const resultOptions = ref<any[]>([
+  { label: "ผ่าน", value: "ผ่าน" },
+  { label: "ไม่ผ่าน", value: "ไม่ผ่าน" },
+]);
+
+function onOpenDialogPerformance(
+  stetusEdit: boolean = false,
+  index: number | null = null
+) {
+  if (stetusEdit && index) {
+    isIndex.value = index;
+    const data = formDetail.assessments[index];
+    formPerformance.year = data.year ? Number(data.year) - 543 : null;
+    formPerformance.type = data.type;
+    formPerformance.subject = data.subject;
+    formPerformance.evaluationResult = data.evaluationResult;
+  }
+  isEdit.value = stetusEdit;
+  modalPerformance.value = true;
+}
+
+function onCloseDialogPerformance() {
+  modalPerformance.value = false;
+  formPerformance.year = null;
+  formPerformance.type = "";
+  formPerformance.subject = "";
+  formPerformance.evaluationResult = "";
+}
+
+function onSubmitPerformance() {
+  const body = {
+    ...formPerformance,
+    year: formPerformance.year ? Number(formPerformance.year) + 543 : null,
+    isAdd: true,
+  };
+
+  if (isEdit.value && isIndex.value) {
+    formDetail.assessments[isIndex.value] = body;
+  } else {
+    formDetail.assessments.push(body);
+  }
+  onCloseDialogPerformance();
+}
+
+function onDeletePerformance(index: number) {
+  formDetail.assessments.splice(index, 1);
+}
+
 onMounted(async () => {
-  const promises = [];
+  try {
+    showLoader();
+    const promises = [];
 
-  if (route.name === "evaluate-add") {
+    if (route.name === "evaluate-add") {
-    promises.push(fetchDetail());
+      promises.push(fetchDetail());
+    }
+
+    if (props.data) {
+      promises.push(fetchCheckSpec(props.data));
+    }
+
+    promises.push(getData());
+
+    await Promise.all(promises);
+  } catch (error) {
+    console.log(error);
+  } finally {
+    hideLoader();
   }
-
-  if (props.data) {
-    promises.push(fetchCheckSpec(props.data));
-  }
-
-  promises.push(getData());
-
-  await Promise.all(promises);
 });
 </script>
 
@@ -556,7 +617,6 @@ onMounted(async () => {
               </q-tr>
             </template>
           </d-table>
-          <!-- <TableData :columns="columnSalaries" :row="formDetail.salaries" /> -->
         </div>
       </q-card>
 
@@ -577,24 +637,187 @@ onMounted(async () => {
           <span class="q-ml-lg q-my-sm">ประสบการณ์ในการปฏิบัติงาน </span>
         </div>
         <div class="col-12"><q-separator /></div>
-        <div class="col-12 q-pa-sm">-</div>
+        <TableData
+          class="col-12"
+          :columns="columnExperience"
+          :row="formDetail.experience"
+        />
       </q-card>
 
       <q-card class="col-12 cardSp1" bordered>
         <div class="text-weight-bold row items-center bg-grey-2 col-12">
-          <span class="q-ml-lg q-my-sm">ผลงานที่เคยเสนอขอประเมิน (ถ้ามี)</span>
+          <span class="q-ml-lg q-my-sm">ผลงานที่เคยเสนอขอประเมิน (ถ้ามี) </span>
+          <q-btn
+            v-if="storeEva.currentStep === 1"
+            class="q-ml-sm"
+            flat
+            round
+            dense
+            color="primary"
+            icon="add"
+            @click.stop="onOpenDialogPerformance(false)"
+          >
+            <q-tooltip>เพิ่มข้อมูล </q-tooltip>
+          </q-btn>
         </div>
         <div class="col-12"><q-separator /></div>
-        <div class="col-12 q-pa-sm">-</div>
+        <div class="col-10">
-        <!-- <div class="col-10">
+          <div class="q-pa-sm row col-12">
-          <TableData
+            <d-table
-            :columns="columnAssessments"
+              flat
-            :row="formDetail.assessments"
+              bordered
-          />
+              :columns="columnAssessments"
-        </div> -->
+              :rows="formDetail.assessments"
+              dense
+              :rows-per-page-options="[10, 25, 50, 100]"
+              virtual-scroll
+              class="row col-12"
+              :style="$q.screen.lt.sm ? 'width: 80vw' : 'width: 50vw;'"
+            >
+              <template v-slot:header="props">
+                <q-tr :props="props" class="bg-grey-2">
+                  <q-th auto-widt v-if="storeEva.currentStep === 1" />
+                  <q-th
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                  >
+                    <span class="text-body2 text-black">{{ col.label }}</span>
+                  </q-th>
+                </q-tr>
+              </template>
+
+              <template v-slot:body="props">
+                <q-tr :props="props">
+                  <q-td auto-widt v-if="storeEva.currentStep === 1">
+                    <q-btn
+                      v-if="props.row.isAdd"
+                      flat
+                      dense
+                      round
+                      color="edit"
+                      icon="edit"
+                      @Click.stop.prevent="
+                        onOpenDialogPerformance(true, props.rowIndex)
+                      "
+                    >
+                      <q-tooltip>แก้ไข</q-tooltip>
+                    </q-btn>
+
+                    <q-btn
+                      v-if="props.row.isAdd"
+                      flat
+                      dense
+                      round
+                      color="red"
+                      icon="delete"
+                      @click.stop.pervent="onDeletePerformance(props.rowIndex)"
+                    >
+                      <q-tooltip>ลบ</q-tooltip>
+                    </q-btn>
+                  </q-td>
+                  <q-td
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                  >
+                    <div>
+                      {{ !col.value ? "-" : col.value }}
+                    </div>
+                  </q-td>
+                </q-tr>
+              </template>
+            </d-table>
+          </div>
+        </div>
       </q-card>
     </div>
   </q-card>
+
+  <q-dialog v-model="modalPerformance" persistent>
+    <q-card style="min-width: 35%">
+      <q-form greedy @submit.prevent @validation-success="onSubmitPerformance">
+        <HeaderDialog
+          :tittle="'ผลงานที่เคยเสนอขอประเมิน (ถ้ามี)'"
+          :close="onCloseDialogPerformance"
+        />
+        <q-separator />
+        <q-card-section>
+          <div class="row q-col-gutter-sm">
+            <div class="col-12">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formPerformance.year"
+                :locale="'th'"
+                autoApply
+                year-picker
+                :enableTimePicker="false"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    :model-value="
+                      !formPerformance.year
+                        ? null
+                        : Number(formPerformance.year) + 543
+                    "
+                    :label="`${'ปี พ.ศ.'}`"
+                    :rules="[(val:string) => !!val || 'กรุณาเลือกปี พ.ศ.']"
+                    hide-bottom-space
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-12">
+              <q-select
+                dense
+                outlined
+                label="ระดับตอนที่ยืนขอ"
+                hide-bottom-space
+                v-model="formPerformance.type"
+                :options="typeOptions"
+              />
+            </div>
+            <div class="col-12">
+              <q-input
+                v-model="formPerformance.subject"
+                label="เรื่อง/ชื่อเรื่อง"
+                outlined
+                dense
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-12">
+              <q-option-group
+                :options="resultOptions"
+                type="radio"
+                v-model="formPerformance.evaluationResult"
+                inline
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn label="บันทึก" color="public" type="submit" />
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
 </template>
 
 <style>

src/modules/06_evaluate/interface/evalute.ts

@@ -38,10 +38,16 @@ interface FormSpec {
 interface FormCommand {
   commanderFullname: string;
   commanderPosition: string;
+  commanderPositionOld: string;
+  commanderOrgOld: string;
+  commanderOrg: string;
   commanderAboveFullname: string;
   commanderAbovePosition: string;
+  commanderAbovePositionOld: string;
+  commanderAboveOrgOld: string;
+  commanderAboveOrg: string;
   author: string;
-  subject: string;
+  subject: string[];
   assignedPosition: string;
 }
 
@@ -134,5 +140,5 @@ export type {
   ListMenu,
   FormRef,
   FormData,
-  FormCommandSe
+  FormCommandSe,
 };

src/modules/06_evaluate/stores/evaluteDetail.ts

@@ -9,6 +9,7 @@ export const useEvaluateDetailStore = defineStore("evaluateDetailStore", () => {
   const mixin = useCounterMixin();
   const { date2Thai, findOrgNameHtml, findOrgName } = mixin;
 
+  //ใบอนุญาตประกอบวิชาชีพ
   const columnsCertificates = ref<QTableProps["columns"]>([
     {
       name: "certificateType",
@@ -57,6 +58,7 @@ export const useEvaluateDetailStore = defineStore("evaluateDetailStore", () => {
     },
   ]);
 
+  //ประวัติการรับราชการ
   const columnSalaries = ref<QTableProps["columns"]>([
     {
       name: "commandDateAffect",
@@ -237,6 +239,7 @@ export const useEvaluateDetailStore = defineStore("evaluateDetailStore", () => {
     },
   ]);
 
+  //ประวัติการฝึกอบรมดูงาน
   const columnTraining = ref<QTableProps["columns"]>([
     {
       name: "name",
@@ -354,97 +357,65 @@ export const useEvaluateDetailStore = defineStore("evaluateDetailStore", () => {
     },
   ]);
 
-  /** ผลงานที่เคยเสนอขอประเมิน (ถ้ามี)*/
+  //ผลงานที่เคยเสนอขอประเมิน (ถ้ามี)
   const columnAssessments = ref<QTableProps["columns"]>([
     {
-      name: "date",
+      name: "year",
       align: "left",
-      label: "วันที่ได้รับ",
+      label: "ปี พ.ศ.",
       sortable: true,
-      field: "date",
+      field: "year",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
-      format: (v) => date2Thai(v),
     },
     {
-      name: "point1Total",
+      name: "type",
       align: "left",
-      label: "ส่วนที่1 (น้ำหนัก)",
+      label: "ระดับตอนที่ยื่นขอ",
       sortable: true,
-      field: "point1Total",
+      field: "type",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
     },
     {
-      name: "point1",
+      name: "subject",
       align: "left",
-      label: "ผลประเมินส่วนที่1 (คะแนน)",
+      label: "เรื่อง/ชื่อเรื่อง",
       sortable: true,
-      field: "point1",
+      field: "subject",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
     },
     {
-      name: "point2Total",
+      name: "evaluationResult",
       align: "left",
-      label: "ส่วนที่2 (น้ำหนัก)",
+      label: "ผลการประเมิน (ผ่าน/ไม่ผ่าน)",
       sortable: true,
-      field: "point2Total",
+      field: "evaluationResult",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-    },
-    {
-      name: "point2",
-      align: "left",
-      label: "ผลประเมินส่วนที่2 (คะแนน)",
-      sortable: true,
-      field: "point2",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-    },
-    {
-      name: "pointSumTotal",
-      align: "left",
-      label: "ผลรวม (น้ำหนัก)",
-      sortable: true,
-      field: "pointSumTotal",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-    },
-    {
-      name: "pointSum",
-      align: "left",
-      label: "ผลประเมินรวม (คะแนน)",
-      sortable: true,
-      field: "pointSum",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
     },
+  ]);
+
+  //ประสบการณ์ในการปฏิบัติงาน
+  const columnExperience = ref<QTableProps["columns"]>([
     {
       name: "name",
       align: "left",
-      label: "ผลประเมิน",
+      label: "ชื่อผลงาน",
       sortable: true,
       field: "name",
-      format(val, row) {
-        return `${textPoint(row.pointSum)} ${textRangePoint(row.pointSum)}`;
-      },
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
-      sort: (a: string, b: string) =>
+    },
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    {
+      name: "detail",
+      align: "left",
+      label: "รายละเอียดผลงาน",
+      sortable: true,
+      field: "detail",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
     },
   ]);
 
@@ -473,6 +444,7 @@ export const useEvaluateDetailStore = defineStore("evaluateDetailStore", () => {
     columnSalaries,
     columnTraining,
     columnProjectsProposed,
+    columnExperience,
     columnAssessments,
   };
 });

src/modules/09_scholarship/interface/request/index.ts

@@ -61,6 +61,7 @@ interface FormsSholarship {
   totalPeriod: string; //รวมระยะเวลาในการศึกษา/รวมระยะเวลาในการฝึกอบรม
   planType: string; // INPLAN ในแผนฯ, OUTPLAN นอกแผนฯ
   isNoUseBudget: boolean; //
+  budgetSourceOther: string; //
 }
 
 interface DataSholarship {

src/modules/09_scholarship/views/main.vue

@@ -41,8 +41,12 @@ const scholarshipTypeOp = ref<DataOptions[]>([
     name: " ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยงานภายนอก (หลักสูตรประเภทนักบริหาร)",
   },
   {
-    id: "RESEARCH",
+    id: "STUDY",
-    name: "ศึกษา ฝึกอบรม ประชุม ดูงาน และปฏิบัติการวิจัย ณ ต่างประเทศ",
+    name: "ทุนการศึกษา ณ ต่างประเทศ",
+  },
+  {
+    id: "TRAINING",
+    name: "ทุนฝึกอบรม ณ ต่างประเทศ",
   },
 ]);
 
@@ -144,8 +148,10 @@ function convertType(val: string) {
       return "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรที่มีการไปต่างประเทศ)";
     case "EXECUTIVE":
       return "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรประเภทนักบริหาร)";
-    case "RESEARCH":
+    case "STUDY":
-      return "ศึกษา ฝึกอบรม ประชุม ดูงาน และปฏิบัติการวิจัย ณ ต่างประเทศ";
+      return "ทุนการศึกษา ณ ต่างประเทศ";
+    case "TRAINING":
+      return "ทุนฝึกอบรม ณ ต่างประเทศ";
   }
 }
 

src/modules/10_registry/store/RequestEdit.ts

@@ -15,6 +15,7 @@ export const useRequestEditStore = defineStore("requestEditStore", () => {
     "ขอแก้ไขข้อมูลประวัติการฝึกอบรม",
     "ขอแก้ไขใบอนุญาตประกอบวิชาชีพ",
     "ขอแก้ไขที่อยู่ปัจจุบัน",
+    "ขอแก้ไขใบอนุญาตประกอบวิชาชีพ",
   ]);
   const optionStatus = ref<DataOption[]>([
     { id: "", name: "ทั้งหมด" },

src/stores/data.ts

@@ -13,7 +13,8 @@ export const useDataStore = defineStore("dataMain", () => {
   const storeRegistry = useRegistryInFormationStore();
   const $q = useQuasar();
   const mixin = useCounterMixin();
-  const { messageError, showLoader, hideLoader, findPosMasterNo,findOrgName } = mixin;
+  const { messageError, showLoader, hideLoader, findPosMasterNo, findOrgName } =
+    mixin;
   // ref() คือการประกาศ state เหมือน vuex
   const formData = reactive<ProfileData>({
     profileId: "",
@@ -26,7 +27,7 @@ export const useDataStore = defineStore("dataMain", () => {
     posTypeName: "",
     posLevelName: "",
     salary: null,
-    birthDate: '',
+    birthDate: "",
     posNo: "",
     org: "",
     dateStart: "",
@@ -100,7 +101,6 @@ export const useDataStore = defineStore("dataMain", () => {
   async function getData(dataPerson: any) {
     const data = await dataPerson;
     isProbation.value = data.isProbation;
-
     formData.profileId = data.profileId;
     formData.rank = data.rank;
     formData.prefix = data.prefix;
@@ -112,7 +112,12 @@ export const useDataStore = defineStore("dataMain", () => {
     formData.birthDate = data.birthDate;
     formData.posTypeName = data.posTypeName;
     formData.posExecutiveName = data.posExecutiveName;
-    formData.posLevelName = data.posLevelName;
+    formData.posLevelName =
+      data.profileType === "EMPLOYEE"
+        ? data.posTypeShortName
+          ? `${data.posTypeShortName} ${data.posLevelName}`
+          : `${data.posLevelName}`
+        : data.posLevelName;
     formData.dateStart = data.dateStart;
     formData.dateRetireLaw = data.dateRetireLaw;
     formData.posNo = findPosMasterNo(data);

src/stores/mixin.ts

@@ -1096,7 +1096,7 @@ export const useCounterMixin = defineStore("mixin", () => {
           ? obj.child1ShortName
           : obj.rootShortName != null
           ? obj.rootShortName
-          : "") + (obj.posMasterNo != null ? obj.posMasterNo : "");
+          : "") + (obj.posMasterNo != null ? ` ${obj.posMasterNo}` : "");
       return shortName == "" ? "-" : shortName;
     } else {
       return "";