refactor: add props showBtnSave of Employee

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

@@ -40,16 +40,21 @@ const insuranceCompanyOption = defineModel<{ label: string; value: string }[]>(
 
 const tab = ref();
 
-defineProps<{
+withDefaults(
-  title?: string;
+  defineProps<{
-  dense?: boolean;
+    title?: string;
-  outlined?: boolean;
+    dense?: boolean;
-  readonly?: boolean;
+    outlined?: boolean;
-  separator?: boolean;
+    readonly?: boolean;
-  typeCustomer?: string;
+    separator?: boolean;
-  prefixId: string;
+    typeCustomer?: string;
-}>();
+    prefixId: string;
-
+    showBtnSave?: boolean;
+  }>(),
+  {
+    showBtnSave: false,
+  },
+);
 async function fetchProvince() {
   const result = await adrressStore.fetchProvince();
 
@@ -483,6 +488,19 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
               </q-input>
             </template>
           </VueDatePicker>
+
+          <div class="col-12 row justify-end" style="min-height: 50px">
+            <q-btn
+              v-if="!readonly && showBtnSave"
+              dense
+              unelevated
+              id="save-basic-info"
+              color="primary"
+              class="q-px-md"
+              :label="$t('save')"
+              @click="$emit('save')"
+            />
+          </div>
         </div>
 
         <q-separator

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

@@ -1,14 +1,20 @@
 <script setup lang="ts">
 import { EmployeeOtherCreate } from 'stores/employee/types';
 
-defineProps<{
+withDefaults(
-  dense?: boolean;
+  defineProps<{
-  outlined?: boolean;
+    dense?: boolean;
-  readonly?: boolean;
+    outlined?: boolean;
-  separator?: boolean;
+    readonly?: boolean;
-  employee?: boolean;
+    separator?: boolean;
-  prefixId: string;
+    employee?: boolean;
-}>();
+    prefixId: string;
+    showBtnSave: boolean;
+  }>(),
+  {
+    showBtnSave: false,
+  },
+);
 const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
 </script>
 <template>
@@ -159,6 +165,19 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
           v-model="employeeOther.motherBirthPlace"
         />
       </div>
+
+      <div class="col-12 row justify-end" style="min-height: 50px">
+        <q-btn
+          v-if="!readonly && showBtnSave"
+          dense
+          unelevated
+          id="save-basic-info"
+          color="primary"
+          class="q-px-md"
+          :label="$t('save')"
+          @click="$emit('save')"
+        />
+      </div>
     </div>
   </div>
   <q-separator

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

@@ -38,15 +38,21 @@ const visaTypeOption = defineModel<{ label: string; value: string }[]>(
   { required: true },
 );
 
-defineProps<{
+withDefaults(
-  title?: string;
+  defineProps<{
-  dense?: boolean;
+    title?: string;
-  outlined?: boolean;
+    dense?: boolean;
-  readonly?: boolean;
+    outlined?: boolean;
-  separator?: boolean;
+    readonly?: boolean;
-  typeCustomer?: string;
+    separator?: boolean;
-  prefixId: string;
+    typeCustomer?: string;
-}>();
+    prefixId: string;
+    showBtnSave: boolean;
+  }>(),
+  {
+    showBtnSave: false,
+  },
+);
 
 async function fetchProvince() {
   const result = await adrressStore.fetchProvince();
@@ -423,6 +429,19 @@ const visaTypeFilter = selectFilterOptionRefMod(
         </q-input>
       </template>
     </VueDatePicker>
+
+    <div class="col-12 row justify-end" style="min-height: 50px">
+      <q-btn
+        v-if="!readonly && showBtnSave"
+        dense
+        unelevated
+        id="save-basic-info"
+        color="primary"
+        class="q-px-md"
+        :label="$t('save')"
+        @click="$emit('save')"
+      />
+    </div>
   </div>
 
   <q-separator

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

@@ -23,14 +23,20 @@ const workplaceOption = defineModel<{ label: string; value: string }[]>(
 
 const tab = ref();
 
-defineProps<{
+withDefaults(
-  title?: string;
+  defineProps<{
-  dense?: boolean;
+    title?: string;
-  outlined?: boolean;
+    dense?: boolean;
-  readonly?: boolean;
+    outlined?: boolean;
-  separator?: boolean;
+    readonly?: boolean;
-  prefixId: string;
+    separator?: boolean;
-}>();
+    prefixId: string;
+    showBtnSave: boolean;
+  }>(),
+  {
+    showBtnSave: false,
+  },
+);
 
 function addData() {
   const canAdd = checkTabBeforeAdd(employeeWork.value || []);
@@ -470,6 +476,19 @@ const workplaceFilter = selectFilterOptionRefMod(
               </q-input>
             </template>
           </VueDatePicker>
+
+          <div class="col-12 row justify-end" style="min-height: 50px">
+            <q-btn
+              v-if="!readonly && showBtnSave"
+              dense
+              unelevated
+              id="save-basic-info"
+              color="primary"
+              class="q-px-md"
+              :label="$t('save')"
+              @click="$emit('save')"
+            />
+          </div>
         </div>
 
         <q-separator

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

@@ -3394,6 +3394,7 @@ watch(isMainPage, () => {
           formDataEmployeeTab === 'healthCheck' &&
           formDataEmployee.employeeCheckup
         "
+        show-btn-save
         dense
         outlined
         v-model:employee-checkup="formDataEmployee.employeeCheckup"
@@ -3412,6 +3413,7 @@ watch(isMainPage, () => {
         v-model:position-name-option="optionStore.globalOption.position"
         v-model:job-type-option="optionStore.globalOption.businessType"
         v-model:workplace-option="optionStore.globalOption.area"
+        show-btn-save
       />
       <FormEmployeeOther
         prefix-id="form-dialog"
@@ -3421,6 +3423,7 @@ watch(isMainPage, () => {
         dense
         outlined
         v-model:employee-other="formDataEmployee.employeeOtherInfo"
+        show-btn-save
       />
     </template>
     <template #by-type>
@@ -3460,6 +3463,7 @@ watch(isMainPage, () => {
         v-model:tm6-number="formDataEmployee.tm6Number"
         v-model:entry-date="formDataEmployee.entryDate"
         v-model:visa-type-option="optionStore.globalOption.nationality"
+        show-btn-save
       />
     </template>
   </FormDialog>