fix: form dialog tab & address

src/components/02_personnel-management/FormAddress.vue

@@ -86,6 +86,7 @@ watch(districtId, fetchSubDistrict);
         style="border-radius: var(--radius-3)"
       >
         <span
+          id="same"
           class="q-px-sm q-mr-lg rounded cursor-pointer"
           :class="{
             dark: $q.dark.isActive,
@@ -97,6 +98,7 @@ watch(districtId, fetchSubDistrict);
           {{ $t('formDialogToggleSameAddress') }}
         </span>
         <span
+          id="custom"
           class="q-px-sm rounded cursor-pointer"
           :class="{
             dark: $q.dark.isActive,

src/components/FormDialog.vue

@@ -16,6 +16,7 @@ defineProps<{
   noAppBox?: boolean;
   noPaddingTab?: boolean;
   maxWidth?: number;
+  width?: number;
   employee?: boolean;
   noAddress?: boolean;
   disabledRule?: boolean;
@@ -38,14 +39,15 @@ const districtId = defineModel<string | null | undefined>('districtId');
 const subDistrictId = defineModel<string | null | undefined>('subDistrictId');
 const zipCode = defineModel<string>('zipCode', { default: '' });
 const sameWithEmployer = defineModel<boolean>('sameWithEmployer');
-const employeeTab = defineModel<string>('employeeTab');
+
+const currentTab = defineModel<string>('currentTab');
 const tabsList = defineModel<{ name: string; label: string }[]>('tabsList');
 </script>
 <template>
   <q-dialog v-model="modal" @hide="close">
     <AppBox
       style="padding: 0; border-radius: var(--radius-2); max-height: 100%"
-      :style="`max-width:${maxWidth ? maxWidth : '85'}%`"
+      :style="`max-width:${maxWidth ? maxWidth : '85%'}; width: ${width ? width : '85%'}`"
     >
       <q-form greedy @submit.prevent @validation-success="submit">
         <!-- header -->
@@ -145,7 +147,7 @@ const tabsList = defineModel<{ name: string; label: string }[]>('tabsList');
           <q-tabs
             dense
             class="app-text-muted cancel-overflow"
-            v-model="employeeTab"
+            v-model="currentTab"
             active-class="active-tab"
             indicator-color="transparent"
           >
@@ -165,7 +167,7 @@ const tabsList = defineModel<{ name: string; label: string }[]>('tabsList');
           :class="{
             dark: $q.dark.isActive,
             'surface-2': !employee,
-            'surface-tab': employee,
+            'surface-tab': employee || tabsList,
           }"
           :style="
             $q.screen.gt.sm

src/pages/03_customer-management/MainPage.vue

@@ -1784,7 +1784,7 @@ watch(currentStatus, async () => {
       formDataEmployeeTab === 'workHistory'
     "
     v-model:tabs-list="employeeTab"
-    v-model:employee-tab="formDataEmployeeTab"
+    v-model:current-tab="formDataEmployeeTab"
     v-model:same-with-employer="formDataEmployeeSameAddr"
     v-model:address="formDataEmployee.address"
     v-model:addressEN="formDataEmployee.addressEN"