refactor: handle edit

src/components/03_customer-management/FormEmployeeHealthCheck.vue

@@ -31,6 +31,7 @@ const addrOptions = reactive<{
   subDistrictOps: [],
 });
 
+const currentIndex = defineModel<number>('currentIndex');
 const employeeCheckup = defineModel<EmployeeCheckupCreate[]>('employeeCheckup');
 const checkupTypeOption = defineModel<{ label: string; value: string }[]>(
   'checkupTypeOption',
@@ -164,6 +165,7 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
         class="q-ml-sm"
         type="button"
         @click="addCheckup"
+        :disabled="!(currentIndex === -1)"
       />
     </div>
 
@@ -188,12 +190,14 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
             icon-only
             @click="$emit('undo', index)"
             type="button"
+            :disabled="!(currentIndex === -1) && !(currentIndex === index)"
           />
           <SaveButton
             icon-only
             id="btn-info-health-save"
             v-if="!readonly && !checkup.statusSave"
             @click="$emit('save', index)"
+            :disabled="!(currentIndex === -1) && !(currentIndex === index)"
           />
           <EditButton
             icon-only
@@ -201,6 +205,7 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
             v-if="!readonly && checkup.statusSave"
             @click="$emit('edit', index)"
             type="button"
+            :disabled="!(currentIndex === -1) && !(currentIndex === index)"
           />
           <DeleteButton
             icon-only
@@ -208,6 +213,7 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
             v-if="!readonly && !!checkup.id && checkup.statusSave"
             @click="$emit('delete', index)"
             type="button"
+            :disabled="!(currentIndex === -1) && !(currentIndex === index)"
           />
         </div>
       </span>

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

@@ -2527,6 +2527,7 @@ watch(
         await fetchListEmployee();
 
         employeeFormState.isEmployeeEdit = false;
+        employeeFormState.currentIndex = -1;
       }
     "
     :show="
@@ -2734,9 +2735,12 @@ watch(
             prefix-id="form-employee"
             dense
             outlined
-            v-model:employeeCheckup="currentFromDataEmployee.employeeCheckup"
-            v-model:checkupTypeOption="optionStore.globalOption.insurancePlace"
-            v-model:medicalBenefitOption="
+            v-model:current-index="employeeFormState.currentIndex"
+            v-model:employee-checkup="currentFromDataEmployee.employeeCheckup"
+            v-model:checkup-type-option="
+              optionStore.globalOption.insurancePlace
+            "
+            v-model:medical-benefit-option="
               optionStore.globalOption.typeInsurance
             "
             v-model:insuranceCompanyOption="
@@ -2753,6 +2757,7 @@ watch(
                 if (
                   currentFromDataEmployee.employeeCheckup?.[index].statusSave
                 ) {
+                  employeeFormState.currentIndex = index;
                   currentFromDataEmployee.employeeCheckup[index].statusSave =
                     false;
                 }
@@ -2764,6 +2769,7 @@ watch(
                   currentFromDataEmployee.employeeCheckup?.[index]
                     .statusSave === false
                 ) {
+                  employeeFormState.currentIndex = -1;
                   currentFromDataEmployee.employeeCheckup[index].statusSave =
                     true;
                   employeeFormStore.resetFormDataEmployee();
@@ -2783,6 +2789,7 @@ watch(
             prefix-id="form-employee"
             dense
             outlined
+            v-model:current-index="employeeFormState.currentIndex"
             v-model:employee-work="currentFromDataEmployee.employeeWork"
             v-model:position-name-option="optionStore.globalOption.position"
             v-model:job-type-option="optionStore.globalOption.businessType"
@@ -2804,6 +2811,7 @@ watch(
                   currentFromDataEmployee.employeeWork?.[index].statusSave ===
                   false
                 ) {
+                  employeeFormState.currentIndex = -1;
                   currentFromDataEmployee.employeeWork[index].statusSave = true;
                 }
               }
@@ -2811,6 +2819,7 @@ watch(
             @edit="
               (index) => {
                 if (currentFromDataEmployee.employeeWork?.[index].statusSave) {
+                  employeeFormState.currentIndex = index;
                   currentFromDataEmployee.employeeWork[index].statusSave =
                     false;
                 }

src/pages/03_customer-management/form.ts

@@ -392,6 +392,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
     currentTab: string;
     dialogModal: boolean;
     drawerModal: boolean;
+
     currentEmployeeCode: string;
     currentEmployee: Employee | null;
     currentIndex: number;
@@ -422,7 +423,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
         }
       | undefined;
   }>({
-    currentIndex: 0,
+    currentIndex: -1,
     statusSavePersonal: false,
     drawerModal: false,
     imageDialog: false,