hrms-mgt/src/modules/04_registryPerson/components/Dialog/01_Information.vue

<script setup lang="ts">
import { type PropType, watch } from "vue";
import { useQuasar } from "quasar";

import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useProfileDataStore } from "@/modules/04_registryPerson/stores/profile";

import type { RequestObject } from "@/modules/04_registryPerson/interface/request/Profile";

const formInformations = defineModel<RequestObject>("formInformations", {
  required: true,
});
const age = defineModel<string | null>("age", {
  required: true,
});

const $q = useQuasar();
const storeProfile = useProfileDataStore();
const { filterSelector, calculateAge } = storeProfile;
const { date2Thai, messageError, dialogMessageNotify } = useCounterMixin();

const props = defineProps({
  Ops: {
    type: Object as PropType<any>,
  },
  OpsFilter: {
    type: Object as PropType<any>,
  },
});

const dataLabel = {
  citizenId: "เลขประจำตัวประชาชน",
  name: "ชื่อ - สกุล",
  birthDate: "วัน/เดือน/ปีเกิด",
  age: "อายุ",
  gender: "เพศ",
  relationship: "สถานภาพ",
  nationality: "สัญชาติ",
  ethnicity: "เชื้อชาติ",
  religion: "ศาสนา",
  bloodGroup: "หมู่เลือด",
  phone: "เบอร์โทร",
  prefix: "คำนำหน้าชื่อ",
  rank: "ยศ",
  firstName: "ชื่อ",
  lastName: "นามสกุล",
};

/**
 * function  เช็คเลขประจำตัวประชาชนช้ำ
 * @param citizenId เลขประจำตัวประชาชน
 */
function changeCardID(citizenId: string | number | null) {
  if (citizenId != null && typeof citizenId == "string") {
    if (citizenId.length == 13 && citizenId) {
      http
        .put(config.API.profileNewCitizenId(citizenId), {
          citizenId: citizenId,
        })
        .then(() => {})
        .catch((err) => {
          if (err.response.data.status === 500) {
            dialogMessageNotify($q, err.response.data.message);
          } else {
            messageError($q, err);
          }
        });
    }
  }
}

/**
 * function เช็คอายุไม่เกิน 18 ปี
 */
function calculateMaxDate() {
  const today = new Date();
  today.setFullYear(today.getFullYear() - 18);
  return today;
}

/**
 * ดูการเปลี่ยนแปลงของวันเกิดเมื่อมีการเปลี่ยนแปลงจะคำนวนอายูใหม่
 */
watch(
  () => formInformations.value.birthDate,
  (v) => {
    if (v) {
      age.value = calculateAge(v);
    }
  }
);
</script>
<template>
  <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
    <div class="col-12 text-tooltip text-weight-medium">ข้อมูลส่วนตัว</div>
    <div class="col-xs-6 col-sm-6 col-md-3">
      <q-input
        dense
        outlined
        readonly
        lazy-rules
        hide-bottom-space
        maxlength="13"
        mask="#############"
        v-model="formInformations.citizenId"
        class="inputgreen"
        :label="dataLabel.citizenId"
        :rules="[
                (val: string) => !!val || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
                (val: string) =>
                  val.length >= 13 ||
                  `${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,
              ]"
        @update:model-value="changeCardID"
      />
    </div>
    <div class="col-xs-6 col-sm-6 col-md-3">
      <q-input
        dense
        outlined
        lazy-rules
        hide-bottom-space
        v-model="formInformations.prefix"
        class="inputgreen"
        :label="dataLabel.prefix"
        :rules="[(val: string) => !!val || `${'กรุณากรอก คำนำหน้าชื่อ'}`]"
      />
    </div>
    <!-- <div class="col-xs-6 col-sm-6 col-md-3">
      <q-input
        dense
        outlined
        lazy-rules
        v-model="formInformations.rank"
        class="inputgreen"
        :label="dataLabel.rank"
      />
    </div> -->
    <div class="col-xs-6 col-sm-6 col-md-3">
      <q-input
        dense
        outlined
        lazy-rules
        hide-bottom-space
        v-model="formInformations.firstName"
        class="inputgreen"
        :label="dataLabel.firstName"
        :rules="[(val: string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
      />
    </div>
    <div class="col-xs-6 col-sm-6 col-md-3">
      <q-input
        dense
        outlined
        lazy-rules
        hide-bottom-space
        v-model="formInformations.lastName"
        class="inputgreen"
        :label="dataLabel.lastName"
        :rules="[(val: string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
      />
    </div>
    <div class="col-xs-6 col-sm-6 col-md-3">
      <datepicker
        autoApply
        :max-date="calculateMaxDate()"
        borderless
        :enableTimePicker="false"
        week-start="0"
        menu-class-name="modalfix"
        v-model="formInformations.birthDate"
        :locale="'th'"
      >
        <template #year="{ year }">
          {{ year + 543 }}
        </template>
        <template #year-overlay-value="{ value }">
          {{ parseInt(value + 543) }}
        </template>
        <template #trigger>
          <q-input
            for="inputDatereceive"
            ref="dateReceivedRef"
            outlined
            dense
            hide-bottom-space
            class="inputgreen"
            :model-value="
              formInformations.birthDate
                ? date2Thai(formInformations.birthDate)
                : null
            "
            :label="dataLabel.birthDate"
            :rules="[
                      (val:string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`,
                    ]"
          >
            <template v-slot:prepend>
              <q-icon name="event" class="cursor-pointer" color="primary">
              </q-icon>
            </template>
          </q-input>
        </template>
      </datepicker>
    </div>
    <div class="col-xs-6 col-sm-6 col-md-3">
      <q-input
        dense
        outlined
        lazy-rules
        hide-bottom-space
        readonly
        v-model="age"
        :label="dataLabel.age"
      />
    </div>
    <div class="col-xs-6 col-sm-6 col-md-3">
      <q-input
        dense
        outlined
        lazy-rules
        v-model="formInformations.gender"
        class="inputgreen"
        :label="dataLabel.gender"
      />
    </div>
    <div class="col-xs-6 col-sm-6 col-md-3">
      <q-input
        dense
        outlined
        lazy-rules
        v-model="formInformations.relationship"
        class="inputgreen"
        :label="dataLabel.relationship"
      />
    </div>
    <div class="col-xs-6 col-sm-6 col-md-3">
      <q-input
        dense
        outlined
        lazy-rules
        hide-bottom-space
        class="inputgreen"
        v-model="formInformations.nationality"
        :label="dataLabel.nationality"
      />
    </div>
    <!-- <div class="col-xs-6 col-sm-6 col-md-3">
      <q-input
        dense
        outlined
        lazy-rules
        hide-bottom-space
        class="inputgreen"
        v-model="formInformations.ethnicity"
        :label="dataLabel.ethnicity"
      />
    </div>
    <div class="col-xs-6 col-sm-6 col-md-3">
      <q-input
        dense
        outlined
        lazy-rules
        v-model="formInformations.religion"
        class="inputgreen"
        :label="dataLabel.religion"
      />
    </div> -->
    <!-- <div class="col-xs-6 col-sm-6 col-md-3">
      <q-input
        dense
        outlined
        lazy-rules
        v-model="formInformations.bloodGroup"
        class="inputgreen"
        :label="dataLabel.bloodGroup"
      />
    </div> -->
  </div>
</template>