hrms-mgt/src/modules/04_registryPerson/components/Dialog/02_Address.vue

<script setup lang="ts">
import { ref, onMounted, watch } from "vue";

import { useDataLinkCenter } from "@/modules/04_registryPerson/stores/LinkCenter";
import type { RequestregistrationAddressObject } from "@/modules/04_registryPerson/interface/request/Address";

const storeLinkCenter = useDataLinkCenter();
const formDataAddress = defineModel<RequestregistrationAddressObject>("formDataAddress", {
  required: true,
});
const presentAddress = defineModel<string>("presentAddress", {
  required: true,
});

const dataLabel = {
  registrationAddress: "ที่อยู่ตามทะเบียนบ้าน",
  registrationProvince: "จังหวัด",
  registrationDistrict: "เขต/อำเภอ",
  registrationSubDistrict: "แขวง / ตำบล",
  registrationZipCode: "รหัสไปรษณีย์",
};

/**
 * ฟังก์ชันเลือกข้อมูลจังหวัด
 * @param e id จังหวัด
 * @param name ที่อยู่ตามทะเบียนบ้าน , ที่อยู่ปัจจุบัน
 */
async function selectProvince(e: string | null, name: string) {
  if (e != null) {
    if (name == "1") {
      formDataAddress.value.registrationSubDistrictId = "";
      formDataAddress.value.registrationZipCode = "";
      formDataAddress.value.registrationDistrictId = "";
    }
    await storeLinkCenter.fetchDistrict(e, name, true);
  }
}

/**
 * ฟังก์ชันเลือก เขต / อำเภอ
 * @param e แขวง/ตำบลที่เลือก
 * @param name 1 คือ ที่อยู่ตามทะเบียนบ้าน 2 คือ ที่อยู่ปัจจุบัน
 */
async function selectDistrict(e: string | null, name: string) {
  if (!e) return;
  if (name == "1") {
    formDataAddress.value.registrationSubDistrictId = "";
    formDataAddress.value.registrationZipCode = "";
  }
  await storeLinkCenter.fetchSubDistrict(e, name, true);
}

/**
 * ฟังก์ชันเลือก  แขวง / ตำบล
 * @param e  แขวง / ตำบล ที่เลือก
 * @param name 1 คือ ที่อยู่ตามทะเบียนบ้าน 2 คือ ที่อยู่ปัจจุบัน
 */
function selectSubDistrict(e: string | null, name: string) {
  if (!e) return;
  if (name == "1") {
    const findcode = storeLinkCenter.OpsAddress.subdistrictOps.filter(
      (r) => r.id == e
    );
    const namecode = findcode.length > 0 ? findcode[0].zipCode : "";
    formDataAddress.value.registrationZipCode = namecode;
  } else {
    const findcode = storeLinkCenter.OpsAddress.subdistrictCOps.filter(
      (r) => r.id == e
    );
    const namecode = findcode.length > 0 ? findcode[0].zipCode : "";
  }
}

/**
 * ดูการเปลี่ยนแปลงที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน
 */
watch(
  () => presentAddress.value,
  (v) => {
    if (v === "0") {
      storeLinkCenter.OpsAddress.districtCOps = [];
      storeLinkCenter.OpsAddress.subdistrictCOps = [];
    }
  }
);
</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="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
      <div class="col-xs-6 col-sm-6 col-md-12">
        <q-input
          dense
          outlined
          lazy-rules
          hide-bottom-space
          class="inputgreen"
          v-model="formDataAddress.registrationAddress"
          :label="dataLabel.registrationAddress"
          :rules="[(val:string) => !!val || `${'กรุณากรอก ที่อยู่ตามทะเบียนบ้าน'}`]"
        />
      </div>
      <div class="col-xs-6 col-sm-6 col-md-3">
        <q-select
          dense
          outlined
          use-input
          lazy-rules
          emit-value
          map-options
          hide-bottom-space
          option-value="id"
          option-label="name"
          input-debounce="0"
          class="inputgreen"
          v-model="formDataAddress.registrationProvinceId"
          :options="storeLinkCenter.OpsAddress.provinceOps"
          :label="dataLabel.registrationProvince"
          :rules="[(val:string) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
          @update:model-value="(value:string) => selectProvince(value, '1')"
          @filter="(inputValue:string,
                      doneFn:Function) => storeLinkCenter.filterSelector(inputValue, doneFn,'provinceOps'
                      ) "
        />
      </div>
      <div class="col-xs-6 col-sm-6 col-md-3">
        <q-select
          dense
          outlined
          use-input
          lazy-rules
          emit-value
          map-options
          hide-bottom-space
          option-value="id"
          option-label="name"
          input-debounce="0"
          class="inputgreen"
          v-model="formDataAddress.registrationDistrictId"
          :options="storeLinkCenter.OpsAddress.districtOps"
          :label="dataLabel.registrationDistrict"
          :rules="[(val:string) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
          @update:model-value="(value:string) => selectDistrict(value, '1')"
          @filter="(inputValue:string,
                      doneFn:Function) => storeLinkCenter.filterSelector(inputValue, doneFn,'districtOps'
                      ) "
        />
      </div>
      <div class="col-xs-6 col-sm-6 col-md-3">
        <q-select
          dense
          outlined
          use-input
          lazy-rules
          emit-value
          map-options
          hide-bottom-space
          option-value="id"
          option-label="name"
          input-debounce="0"
          class="inputgreen"
          v-model="formDataAddress.registrationSubDistrictId"
          :options="storeLinkCenter.OpsAddress.subdistrictOps"
          :label="dataLabel.registrationSubDistrict"
          :rules="[(val:string) => !!val || `${'กรุณาเลือก แขวง / ตำบล'}`]"
          @update:model-value="(value:string) => selectSubDistrict(value, '1')"
          @filter="(inputValue:string,
                      doneFn:Function) => storeLinkCenter.filterSelector(inputValue, doneFn,'subdistrictOps'
                      ) "
        />
      </div>
      <div class="col-xs-6 col-sm-6 col-md-3">
        <q-input
          dense
          readonly
          outlined
          lazy-rules
          hide-bottom-space
          v-model="formDataAddress.registrationZipCode"
          :label="dataLabel.registrationZipCode"
        />
      </div>
    </div>
  </div>
</template>