feat: สร้าง form ได้เรื่อยๆ

src/components/TabComponent.vue

@@ -1,32 +1,51 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue';
+import { CustomerBranchCreate } from 'stores/customer/types';
 
-import AppBox from './app/AppBox.vue';
+const customerBranch = defineModel<CustomerBranchCreate[]>('customerBranch', {
+  default: [],
+});
+
+const indexTab = defineModel<number>('indexTab');
 
 const tab = ref<string>('');
 
-const tabList = ref<{ name: string; label: string }[]>([]);
+const index = ref<number>(0);
 
-function test() {
-  tabList.value.push({
-    name: `สาขาที่ ${tabList.value.length + 1}`,
-    label: `สาขาที่ ${tabList.value.length + 1}`,
+function addData() {
+  index.value++;
+  customerBranch.value.push({
+    status: 'CREATED',
+    legalPersonNo: '',
+    taxNo: '',
+    name: '',
+    nameEN: '',
+    addressEN: '',
+    address: '',
+    zipCode: '',
+    email: '',
+    telephoneNo: '',
+    longitude: '',
+    latitude: '',
+    registerName: '',
+    registerDate: null,
+    authorizedCapital: '',
+    subDistrictId: '',
+    districtId: '',
+    provinceId: '',
   });
-
-  tab.value = tabList.value[tabList.value.length - 1].name;
 }
 
 async function close(index: number) {
-  if (tabList.value.length > 1) {
-    tabList.value.splice(index, 1);
+  if (customerBranch.value.length > 1) {
+    customerBranch.value.splice(index, 1);
   }
   // tab.value = await tabList.value[tabList.value.length - 1].name;
   setTimeout(() => {
-    tab.value = `สาขาที่ ${tabList.value.length.toString()}`;
+    tab.value = `สาขาที่ ${customerBranch.value.length.toString()}`;
   }, 10);
 }
 </script>
-
 <template>
   <div class="column">
     <q-tabs
@@ -40,31 +59,35 @@ async function close(index: number) {
       class="text-grey"
       style="width: 960px; background-color: var(--_body-bg)"
     >
-      <q-tab icon="mdi-plus" @click="test()" />
+      <q-tab icon="mdi-plus" @click="addData()" />
       <q-tab
-        v-for="(v, index) in tabList"
-        :key="index - 4"
-        :name="v.name"
-        :label="`${$t('branchLabel')} ${index + 1}`"
+        v-for="(v, index) in customerBranch"
+        :key="index"
+        :name="index"
+        :label="`${$t('customerBranchFormTab')} ${index + 1}`"
+        @click="indexTab = index"
         no-caps
-      >
-        <q-btn
-          round
-          flat
-          id="closeDialog"
-          icon="mdi-close"
-          padding="xs"
-          color="red"
-          :class="{ dark: $q.dark.isActive }"
-          @click="close(index)"
-        />
-      </q-tab>
+      />
+
+      <q-btn
+        round
+        flat
+        id="closeDialog"
+        icon="mdi-close"
+        padding="xs"
+        color="red"
+        :class="{ dark: $q.dark.isActive }"
+        @click="close(index)"
+      />
     </q-tabs>
   </div>
   <div class="column">
     <q-tab-panels v-model="tab" class="rounded-borders">
-      <q-tab-panel v-for="v in tabList" :key="v.name" :name="v.name">
-        {{ tab }}
+      <q-tab-panel
+        v-for="(v, index) in customerBranch"
+        :key="index"
+        :name="index"
+      >
         <slot name="about"></slot>
         <slot name="address"></slot>
         <slot name="businessInformation"></slot>