hrms-user/src/modules/05_leave/componenst/Forms/03_Birth.vue

<script setup lang="ts">
import { ref, reactive, watch } from "vue";
import type {
  FormData,
  FormRef,
} from "@/modules/05_leave/interface/request/BirthForm";
import { useCounterMixin } from "@/stores/mixin";

const mixin = useCounterMixin();
const { date2Thai, calculateDurationYmd } = mixin;
const edit = ref<boolean>(true);

/** รับ props มาจากหน้าหลัก */
const props = defineProps({
  data: {
    type: Object,
    default: null,
  },
  onSubmit: {
    type: Function,
    default: () => "",
  },
});

/** ข้อมูล v-model ของฟอร์ม */
const formData = reactive<any>({
  leaveNo: "",
  startLeaveDate: null,
  endLeaveDate: null,
  contractTel: "",
  leaveTotal: "",
  leaveLast: "",
  leaveContactTel: "",
  leaveContactLocation: "",
  leaveDetail: "",
  file: [],
});

/** ตัวแปร ref สำหรับแสดง validate */
const leaveNoRef = ref<object | null>(null);
const startLeaveDateRef = ref<object | null>(null);
const endLeaveDateRef = ref<object | null>(null);
const contractTelRef = ref<object | null>(null);
const leaveTotalRef = ref<object | null>(null);
const leaveContactTelRef = ref<object | null>(null);
const leaveContactLocationRef = ref<object | null>(null);
const leaveDetailRef = ref<object | null>(null);
const fileRef = ref<object | null>(null);

/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const FormRef: FormRef = {
  leaveNo: leaveNoRef,
  startLeaveDate: startLeaveDateRef,
  endLeaveDate: endLeaveDateRef,
  contractTel: contractTelRef,
  leaveTotal: leaveTotalRef,
  leaveContactTel: leaveContactTelRef,
  leaveContactLocation: leaveContactLocationRef,
  leaveDetail: leaveDetailRef,
  file: fileRef,
};

/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
watch(props.data, async () => {
  // console.log("data==>", props.data)
  formData.leaveNo = props.data.leaveNo;
  formData.startLeaveDate = props.data.startLeaveDate;
  formData.endLeaveDate = props.data.endLeaveDate;
  formData.contractTel = props.data.contractTel;
  formData.leaveTotal = props.data.leaveTotal;
  formData.leaveContactTel = props.data.leaveContactTel;
  formData.leaveDetail = props.data.leaveDetail;
  formData.file = props.data.file;
});

/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
const fileDocDataUpload = ref<File[]>([]);
async function fileUploadDoc(files: any) {
  files.forEach((file: any) => {
    fileDocDataUpload.value.push(file);
  });
}

/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
function onValidate() {
  const hasError = [];
  for (const key in FormRef) {
    if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
      const property = FormRef[key];
      if (property.value && typeof property.value.validate === "function") {
        const isValid = property.value.validate();
        hasError.push(isValid);
      }
    }
  }
  if (hasError.every((result) => result === true)) {
    props.onSubmit();
  }
}
</script>

<!-- ฟอร์มลาคลอดบุตร-->
<template>
  <div style="display: flex; align-items: center">
    <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
    <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
  </div>
  <form @submit.prevent.stop="onValidate">
    <q-card bordered class="q-pa-md bg-grey-1">
      <div class="col-12 row q-pa-sm q-col-gutter-sm">
        <q-input
          class="col-12 col-sm-12"
          ref="leaveNoRef"
          for="leaveNoRef"
          dense
          outlined
          v-model="formData.leaveNo"
          label="เขียนที่"
          hide-bottom-space
          bg-color="white"
          :readonly="!edit"
          :rules="[(val) => !!val || `${'เขียนที่'}`]"
        />

        <datepicker
          class="col-12 col-md-3 col-sm-12"
          menu-class-name="modalfix"
          v-model="formData.startLeaveDate"
          :locale="'th'"
          autoApply
          hide-bottom-space
          borderless
          :enableTimePicker="false"
          week-start="0"
          :readonly="!edit"
        >
          <template #year="{ year }">
            {{ year + 543 }}
          </template>
          <template #year-overlay-value="{ value }">
            {{ parseInt(value + 543) }}
          </template>
          <template #trigger>
            <q-input
              outlined
              dense
              ref="startLeaveDateRef"
              for="startLeaveDateRef"
              hide-bottom-space
              bg-color="white"
              :readonly="!edit"
              class="full-width datepicker"
              :model-value="
                formData.startLeaveDate != null
                  ? date2Thai(formData.startLeaveDate)
                  : null
              "
              :label="`${'ลาตั้งแต่วันที่'}`"
              :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
            >
              <template v-slot:prepend>
                <q-icon
                  name="event"
                  class="cursor-pointer"
                  style="color: var(--q-primary)"
                >
                </q-icon>
              </template>
            </q-input>
          </template>
        </datepicker>

        <datepicker
          class="col-12 col-md-3 col-sm-12"
          menu-class-name="modalfix"
          v-model="formData.endLeaveDate"
          :locale="'th'"
          autoApply
          borderless
          hide-bottom-space
          :enableTimePicker="false"
          week-start="0"
          :readonly="!formData.startLeaveDate"
          :min-date="
            formData.startLeaveDate
              ? new Date(
                  formData.startLeaveDate.getTime() + 24 * 60 * 60 * 1000
                )
              : null
          "
        >
          <template #year="{ year }">
            {{ year + 543 }}
          </template>
          <template #year-overlay-value="{ value }">
            {{ parseInt(value + 543) }}
          </template>
          <template #trigger>
            <q-input
              outlined
              dense
              ref="endLeaveDateRef"
              for="endLeaveDateRef"
              hide-bottom-space
              bg-color="white"
              :readonly="!formData.startLeaveDate"
              class="full-width datepicker"
              :model-value="
                formData.endLeaveDate != null
                  ? date2Thai(formData.endLeaveDate)
                  : null
              "
              :label="`${'ลาถึงวันที่'}`"
              :rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
            >
              <template v-slot:prepend>
                <q-icon
                  name="event"
                  class="cursor-pointer"
                  style="color: var(--q-primary)"
                >
                </q-icon>
              </template>
            </q-input>
          </template>
        </datepicker>
        <q-input
          class="col-12 col-md-3 col-sm-6"
          dense
          outlined
          ref="leaveTotalRef"
          for="leaveTotalRef"
          v-model="formData.leaveTotal"
          label="จำนวนวันที่ลา"
          bg-color="white"
          readonly
          hide-bottom-space
        />
        <q-input
          class="col-12 col-md-3 col-sm-6"
          dense
          outlined
          ref="leaveLastRef"
          for="leaveLastRef"
          v-model="formData.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"
              dense
              outlined
              hide-bottom-space
              bg-color="white"
              ref="leaveContactTelRef"
              for="leaveContactTelRef"
              v-model="formData.leaveContactTel"
              mask="(###)-###-####"
              unmasked-value
              label="หมายเลขโทรศัพท์ที่ติดต่อได้"
              :readonly="!edit"
              :rules="[
                (val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
              ]"
            />

            <q-input
              class="col-12 col-md-9 col-sm-12"
              dense
              outlined
              hide-bottom-space
              bg-color="white"
              ref="leaveContactLocationRef"
              for="leaveContactLocationRef"
              v-model="formData.leaveContactLocation"
              label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
              :readonly="!edit"
              :rules="[
                (val) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
              ]"
            />
          </div>
        </div>
        <q-input
          type="textarea"
          class="col-12 col-md-12 col-sm-12"
          dense
          outlined
          bg-color="white"
          ref="leaveDetailRef"
          for="leaveDetailRef"
          v-model="formData.leaveDetail"
          label="รายละเอียด"
          :readonly="!edit"
        />

        <q-file
          ref="fileRef"
          for="fileRef"
          hide-bottom-space
          v-model="formData.file"
          @added="fileUploadDoc"
          dense
          bg-color="white"
          label="เอกสารประกอบ"
          outlined
          use-chips
          multiple
          class="q-pl-sm col-12"
          :rules="[(val) => !!val || `${'กรุณาเลือกไฟล์'}`]"
        >
          <template v-slot:prepend>
            <q-icon name="attach_file" color="primary" />
          </template>
        </q-file>

        <div class="col-12 row" v-if="!edit">
          <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
            <div class="q-pl-sm text-weight-bold text-dark">
              เอกสารเพิ่มเติม
            </div>
          </div>
          <q-card bordered flat class="full-width">
            <q-list separator>
              <q-item
                v-for="(file, index) in formData.file"
                :key="index"
                class="q-my-xs"
              >
                <q-item-section>
                  <q-item-label class="full-width ellipsis">
                    {{ file.name }}
                  </q-item-label>
                  <q-item-label caption> </q-item-label>
                </q-item-section>
              </q-item>
            </q-list>
          </q-card>
        </div>
      </div>
    </q-card>

    <q-separator class="q-mt-sm" />

    <div class="row col-12 q-pt-md">
      <q-space />
      <q-btn
        id="onSubmit"
        type="submit"
        unelevated
        dense
        class="q-px-md items-center btnBlue"
        label="ยื่นใบลา"
      />
    </div>
  </form>
</template>