feat: เพิ่มข้อมูลในแต่ ละ index

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

@@ -11,7 +11,6 @@ import ItemCard from 'src/components/ItemCard.vue';
 import FormDialog from 'src/components/FormDialog.vue';
 import ProfileUpload from 'src/components/ProfileUpload.vue';
 import BasicInformation from 'src/components/03_customer-management/BasicInformation.vue';
-import FormCustomerBranch from 'src/components/03_customer-management/FormCustomerBranch.vue';
 import TabComponent from 'src/components/TabComponent.vue';
 import FormAddress from 'src/components/02_personnel-management/FormAddress.vue';
 import AboutComponent from 'src/components/03_customer-management/AboutComponent.vue';
@@ -21,6 +20,38 @@ import FormBusiness from 'src/components/03_customer-management/FormBusiness.vue
 import DrawerInfo from 'src/components/DrawerInfo.vue';
 import InfoForm from 'src/components/02_personnel-management/InfoForm.vue';
 
+import { CustomerCreate } from 'stores/customer/types';
+
+const formData = ref<CustomerCreate>({
+  customerType: 'CORP',
+  customerName: '',
+  customerNameEN: '',
+  customerBranch: [
+    {
+      status: 'CREATED',
+      legalPersonNo: '',
+      taxNo: '',
+      name: '',
+      nameEN: '',
+      addressEN: '',
+      address: '',
+      zipCode: '',
+      email: '',
+      telephoneNo: '',
+      longitude: '',
+      latitude: '',
+      registerName: '',
+      registerDate: null,
+      authorizedCapital: '',
+      subDistrictId: '',
+      districtId: '',
+      provinceId: '',
+    },
+  ],
+  image: new File([''], 'dummy.jpg'),
+});
+
+const indexTab = ref<number>(0);
 const statusToggle = ref<boolean>(false);
 const profileSubmit = ref<boolean>(false);
 const profileFile = ref<File | undefined>(undefined);
@@ -64,13 +95,17 @@ const customerStats = [
   {
     id: 1,
     count: 2,
-    name: 'customerLegalEntity',
+    name: 'นายจ้าง 1',
+    nameEN: 'Employer 1',
+    isEmployer: true,
   },
 
   {
     id: 2,
     count: 3,
-    name: 'customerNaturalPerson',
+    name: 'นายจ้าง 2',
+    nameEN: 'Employer 2',
+    isEmployer: true,
   },
 ];
 
@@ -137,8 +172,8 @@ function onClose() {
             :branch="
               customerStats.map((v) => ({
                 count: v.count,
-                label: v.name,
+                label: $i18n.locale === 'en-US' ? v.nameEN : v.name,
-                color: v.name === 'customerLegalEntity' ? 'purple' : 'green',
+                color: v.isEmployer ? 'pink' : 'purple',
               }))
             "
             :dark="$q.dark.isActive"
@@ -276,22 +311,88 @@ function onClose() {
       <div
         class="col-12 full-width row bordered-b bordered-l bordered-r rounded"
       >
-        <TabComponent>
+        <TabComponent
+          v-model:customer-branch="formData.customerBranch"
+          v-model:indexTab="indexTab"
+        >
           <template #address>
-            <FormAddress separator dense outlined />
+            {{
+              indexTab && formData.customerBranch?.[indexTab] ? 'จริง' : 'ไม่'
+            }}
+
+            {{ indexTab }}
+
+            <FormAddress
+              v-if="
+                indexTab !== undefined && formData.customerBranch?.[indexTab]
+              "
+              v-model:address="formData.customerBranch[indexTab].address"
+              v-model:address-e-n="formData.customerBranch[indexTab].addressEN"
+              v-model:province-id="formData.customerBranch[indexTab].provinceId"
+              v-model:district-id="formData.customerBranch[indexTab].districtId"
+              v-model:sub-district-id="
+                formData.customerBranch[indexTab].subDistrictId
+              "
+              v-model:zip-code="formData.customerBranch[indexTab].zipCode"
+              separator
+              dense
+              outlined
+            />
           </template>
 
           <template #businessInformation>
-            <FormBusiness separator dense outlined />
+            <FormBusiness
+              v-if="
+                indexTab !== undefined && formData.customerBranch?.[indexTab]
+              "
+              separator
+              dense
+              outlined
+            />
           </template>
           <template #about>
-            <AboutComponent dense outlined separator />
+            <AboutComponent
+              v-if="
+                indexTab !== undefined && formData.customerBranch?.[indexTab]
+              "
+              v-model:customer-name="formData.customerBranch[indexTab].name"
+              v-model:customer-english-name="
+                formData.customerBranch[indexTab].nameEN
+              "
+              v-model:authorized-capital="
+                formData.customerBranch[indexTab].authorizedCapital
+              "
+              v-model:register-name="
+                formData.customerBranch[indexTab].registerName
+              "
+              v-model:register-date="
+                formData.customerBranch[indexTab].registerDate
+              "
+              dense
+              outlined
+              separator
+            />
           </template>
           <template #contactInformation>
-            <ContactComponent dense outlined separator />
+            <ContactComponent
+              v-if="
+                indexTab !== undefined && formData.customerBranch?.[indexTab]
+              "
+              v-model:mail="formData.customerBranch[indexTab].email"
+              v-model:telephone="formData.customerBranch[indexTab].telephoneNo"
+              dense
+              outlined
+              separator
+            />
           </template>
           <template #otherDocuments>
-            <OtherInformation dense outlined />
+            <OtherInformation
+              v-if="
+                indexTab !== undefined && formData.customerBranch?.[indexTab]
+              "
+              dense
+              outlined
+            />
           </template>
         </TabComponent>
       </div>