feat: tab branch

src/components/TabComponent.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import AppBox from './app/AppBox.vue';
+
+const tab = ref<string>('');
+
+const index = ref<number>(0);
+const tabList = ref<{ name: string; label: string }[]>([]);
+
+function test() {
+  index.value++;
+  tabList.value.push({
+    name: `สาขาที่ ${index.value}`,
+    label: `สาขาที่ ${index.value}`,
+  });
+
+  tab.value = tabList.value[tabList.value.length - 1].name;
+}
+</script>
+
+<template>
+  <div class="column">
+    <q-tabs
+      active-bg-color="white"
+      active-color="primary"
+      indicator-color="white"
+      v-model="tab"
+      align="left"
+      inline-label
+      class="bg-primary text-white"
+      style="width: 960px"
+    >
+      <q-tab icon="mdi-plus" @click="test()" />
+      <q-tab
+        v-for="v in tabList"
+        :key="v.name"
+        :name="v.name"
+        :label="v.label"
+      />
+    </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">
+        <slot name="about"></slot>
+        <slot name="address"></slot>
+        <slot name="businessInformation"></slot>
+        <slot name="contactInformation"></slot>
+
+        <slot name="otherDocuments"></slot>
+      </q-tab-panel>
+    </q-tab-panels>
+  </div>
+</template>
+
+<style scoped></style>

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

@@ -10,6 +10,7 @@ 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 TabComponent from 'src/components/TabComponent.vue';
 
 const statusToggle = ref<boolean>(false);
 const profileSubmit = ref<boolean>(false);
@@ -196,6 +197,10 @@ function openDialogInputForm() {
     <template #information>
       <BasicInformation dense outlined separator />
     </template>
+
+    <template #address>
+      <FormCustomerBranch separator dense outlined />
+    </template>
   </FormDialog>
 </template>