From ad18731a8c93f3fdcc05ce3ec1824593e067fe77 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Mon, 17 Jun 2024 12:57:57 +0700
Subject: [PATCH] =?UTF-8?q?fix:=20=E0=B9=81=E0=B8=81=E0=B9=89=20id=20=20?=
 =?UTF-8?q?=E0=B8=8B=E0=B9=89=E0=B8=B3=E0=B8=81=E0=B8=B1=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../02_personnel-management/FormAddress.vue   | 22 ++++++++++---------
 src/pages/03_customer-management/MainPage.vue |  5 +++++
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/components/02_personnel-management/FormAddress.vue b/src/components/02_personnel-management/FormAddress.vue
index 9ccde753..761531fc 100644
--- a/src/components/02_personnel-management/FormAddress.vue
+++ b/src/components/02_personnel-management/FormAddress.vue
@@ -16,6 +16,7 @@ defineProps<{
   separator?: boolean;
   employee?: boolean;
   disabledRule?: boolean;
+  id?: number;
 }>();
 
 const adrressStore = useAddressStore();
@@ -115,7 +116,7 @@ watch(districtId, fetchSubDistrict);
       </div>
       <div class="col-9 row q-col-gutter-md">
         <q-input
-          for="input-address"
+          :for="`${id !== undefined ? `input-address-${id}` : 'input-address'}`"
           :dense="dense"
           :outlined="readonly ? false : outlined"
           :readonly="readonly || sameWithEmployer"
@@ -136,7 +137,7 @@ watch(districtId, fetchSubDistrict);
           "
         />
         <q-select
-          id="select-province"
+          :id="`${id ? `select-province-${id}` : 'select-province'}`"
           :dense="dense"
           :readonly="readonly || sameWithEmployer"
           :outlined="readonly ? false : outlined"
@@ -163,8 +164,9 @@ watch(districtId, fetchSubDistrict);
           "
           @update:model-value="districtId = subDistrictId = zipCode = null"
         />
+
         <q-select
-          id="select-district"
+          :id="`${id ? `select-district-${id}` : 'select-district'}`"
           :dense="dense"
           :readonly="readonly || sameWithEmployer"
           :outlined="readonly ? false : outlined"
@@ -192,7 +194,7 @@ watch(districtId, fetchSubDistrict);
           @update:model-value="subDistrictId = zipCode = null"
         />
         <q-select
-          id="select-sub-district"
+          :id="`${id ? `select-sub-district-${id}` : 'select-sub-district'}`"
           :dense="dense"
           :readonly="readonly || sameWithEmployer"
           :outlined="readonly ? false : outlined"
@@ -220,7 +222,7 @@ watch(districtId, fetchSubDistrict);
           @update:model-value="(v: string) => selectSubDistrict(v)"
         />
         <q-input
-          for="input-zip-code"
+          :for="`${id ? `input-zip-code-${id}` : 'input-zip-code'}`"
           :dense="dense"
           :outlined="readonly ? false : outlined"
           :borderless="readonly"
@@ -235,7 +237,7 @@ watch(districtId, fetchSubDistrict);
       </div>
       <div class="col-9 row q-col-gutter-md">
         <q-input
-          for="input-address-en"
+          :for="`${id ? `input-address-en-${id}` : 'input-address-en'}`"
           :dense="dense"
           :readonly="readonly || sameWithEmployer"
           :outlined="readonly ? false : outlined"
@@ -256,7 +258,7 @@ watch(districtId, fetchSubDistrict);
           "
         />
         <q-select
-          id="select-province-en"
+          :id="`${id ? `select-province-en-${id}` : 'select-province-en'}`"
           hide-bottom-space
           :dense="dense"
           :readonly="readonly || sameWithEmployer"
@@ -284,7 +286,7 @@ watch(districtId, fetchSubDistrict);
           @update:model-value="districtId = subDistrictId = zipCode = null"
         />
         <q-select
-          id="select-district-en"
+          :id="`${id ? `select-district-en-${id}` : 'select-district-en'}`"
           hide-bottom-space
           :dense="dense"
           :readonly="readonly || sameWithEmployer"
@@ -312,7 +314,7 @@ watch(districtId, fetchSubDistrict);
           @update:model-value="subDistrictId = zipCode = null"
         />
         <q-select
-          id="select-sub-district-en"
+          :id="`${id ? `select-sub-district-en-${id}` : 'select-sub-district-en'}`"
           hide-bottom-space
           :dense="dense"
           :readonly="readonly || sameWithEmployer"
@@ -341,7 +343,7 @@ watch(districtId, fetchSubDistrict);
         />
         <q-input
           hide-bottom-space
-          for="input-zip-code"
+          :for="`${id ? `input-zip-code-${id}` : 'input-zip-code'}`"
           :dense="dense"
           :outlined="readonly ? false : outlined"
           :borderless="readonly"
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 8562b5c2..e640014e 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -1667,6 +1667,7 @@ watch(currentStatus, async () => {
         >
           <template #address>
             <FormAddress
+              :id="indexTab"
               v-if="
                 indexTab !== undefined && formData.customerBranch?.[indexTab]
               "
@@ -1944,6 +1945,7 @@ watch(currentStatus, async () => {
         >
           <template #address>
             <FormAddress
+              :id="indexTab"
               v-if="
                 indexTab !== undefined && formData.customerBranch?.[indexTab]
               "
@@ -2070,6 +2072,7 @@ watch(currentStatus, async () => {
         >
           <template #address>
             <FormAddress
+              :id="indexTab"
               v-if="
                 indexTab !== undefined && formData.customerBranch?.[indexTab]
               "
@@ -2241,6 +2244,7 @@ watch(currentStatus, async () => {
             >
               <template #address>
                 <FormAddress
+                  :id="indexTab"
                   v-if="
                     indexTab !== undefined &&
                     formData.customerBranch?.[indexTab]
@@ -2431,6 +2435,7 @@ watch(currentStatus, async () => {
             >
               <template #address>
                 <FormAddress
+                  :id="indexTab"
                   v-if="
                     indexTab !== undefined &&
                     formData.customerBranch?.[indexTab]