fix: form component

src/pages/02_personnel-management/MainPage.vue

@@ -17,8 +17,8 @@ import SelectorList from 'components/SelectorList.vue';
 import AddButton from 'components/AddButton.vue';
 import TooltipComponent from 'components/TooltipComponent.vue';
 import FormDialog from 'src/components/FormDialog.vue';
-import FormTop from 'src/components/02_personnel-management/FormTop.vue';
-import FormName from 'src/components/02_personnel-management/FormName.vue';
+import FormInformation from 'src/components/02_personnel-management/FormInformation.vue';
+import FormPerson from 'src/components/02_personnel-management/FormPerson.vue';
 import FormByType from 'src/components/02_personnel-management/FormByType.vue';
 
 const router = useRouter();
@@ -62,11 +62,11 @@ const isEdit = ref(false);
 const modal = ref(false);
 const status = ref(false);
 const userId = ref('');
-const code = ref('');
 const selectorLabel = ref('');
 const hqId = ref('');
 const brId = ref('');
 const username = ref('');
+const code = ref('');
 const formDialogRef = ref();
 const userStats = ref<BranchUserStats[]>();
 const typeStats = ref<UserTypeStats>();
@@ -416,34 +416,20 @@ watch(
   <!-- form -->
   <FormDialog
     ref="formDialogRef"
+    v-model:formData="formData"
     v-model:modal="modal"
-    v-model:address="formData.address"
-    v-model:addressEN="formData.addressEN"
-    v-model:provinceId="formData.provinceId"
-    v-model:districtId="formData.districtId"
-    v-model:subDistrictId="formData.subDistrictId"
-    v-model:zipCode="formData.zipCode"
+    v-model:hqId="hqId"
+    v-model:brId="brId"
+    v-model:username="username"
+    v-model:code="code"
     title="เพิ่มบุคลากร"
     addressTitle="ที่อยู่พนักงาน"
     addressENTitle="ที่อยู่พนักงาน ENG"
     :submit="() => onSubmit()"
     :close="() => onClose()"
   >
-    <template #top>
-      <FormTop
-        dense
-        outlined
-        v-model:hqId="hqId"
-        v-model:brId="brId"
-        v-model:userType="formData.userType"
-        v-model:userRole="formData.userRole"
-        v-model:userName="username"
-        v-model:userCode="code"
-      />
-    </template>
-
     <template #prepend>
-      <div class="q-pl-md text-center">
+      <div class="text-center">
         <div class="upload-img-preview">
           <q-img
             v-if="urlProfile"
@@ -493,29 +479,44 @@ watch(
       </div>
     </template>
 
-    <template #midTop>
-      <FormName
+    <template #information>
+      <FormInformation
         dense
         outlined
+        separator
+        :addressSeparator="formData.userType"
+        v-model:hqId="hqId"
+        v-model:brId="brId"
+        v-model:userType="formData.userType"
+        v-model:userRole="formData.userRole"
+        v-model:userName="username"
+        v-model:userCode="code"
+      />
+    </template>
+    <template #person>
+      <FormPerson
+        dense
+        outlined
+        separator
         v-model:firstName="formData.firstName"
         v-model:lastName="formData.lastName"
         v-model:firstNameEN="formData.firstNameEN"
         v-model:lastNameEN="formData.lastNameEN"
+        v-model:telephoneNo="formData.telephoneNo"
+        v-model:email="formData.email"
+        v-model:gender="formData.gender"
+        v-model:birthDate="formData.birthDate"
       />
     </template>
-
-    <template #midBottom v-if="formData.userType">
+    <template #by-type>
       <FormByType
         dense
         outlined
+        separator
         v-model:userType="formData.userType"
-        v-model:telephoneNo="formData.telephoneNo"
-        v-model:gender="formData.gender"
-        v-model:email="formData.email"
         v-model:registrationNo="formData.registrationNo"
         v-model:startDate="formData.startDate"
         v-model:retireDate="formData.retireDate"
-        v-model:birthDate="formData.birthDate"
         v-model:responsibleArea="formData.responsibleArea"
         v-model:discountCondition="formData.discountCondition"
         v-model:sourceNationality="formData.sourceNationality"

src/pages/02_personnel-management/person-info/MainPage.vue

@@ -12,8 +12,8 @@ import { dialog } from 'src/stores/utils';
 
 import PersonCard from 'components/home/PersonCard.vue';
 import AppBox from 'components/app/AppBox.vue';
-import FormTop from 'src/components/02_personnel-management/FormTop.vue';
-import FormName from 'src/components/02_personnel-management/FormName.vue';
+import FormTop from 'src/components/02_personnel-management/FormInfomation.vue';
+import FormName from 'src/components/02_personnel-management/FormPerson.vue';
 import FormByType from 'src/components/02_personnel-management/FormByType.vue';
 import useAddressStore, {
   District,