jws-frontend/src/components/TabComponent.vue

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { CustomerBranchCreate } from 'stores/customer/types';

const customerBranch = defineModel<CustomerBranchCreate[]>('customerBranch', {
  default: [],
});

const indexTab = defineModel<number>('indexTab');

const tab = ref<string>('');

const index = ref<number>(0);

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: '',
  });
}

async function close(index: number) {
  if (customerBranch.value.length > 1) {
    customerBranch.value.splice(index, 1);
  }
  // tab.value = await tabList.value[tabList.value.length - 1].name;
  setTimeout(() => {
    tab.value = `สาขาที่ ${customerBranch.value.length.toString()}`;
  }, 10);
}
</script>
<template>
  <div class="column">
    <q-tabs
      active-bg-color="white"
      active-color="primary"
      indicator-color="white"
      active-class="active-tab"
      v-model="tab"
      align="left"
      inline-label
      class="text-grey"
      style="width: 960px; background-color: var(--_body-bg)"
    >
      <q-tab icon="mdi-plus" @click="addData()" />
      <q-tab
        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-tabs>
  </div>
  <div class="column">
    <q-tab-panels v-model="tab" class="rounded-borders">
      <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>
        <slot name="contactInformation"></slot>

        <slot name="otherDocuments"></slot>
      </q-tab-panel>
    </q-tab-panels>
  </div>
</template>

<style scoped>
.active-tab {
  border: 1px solid #e0dcdc;
  border-bottom: none;
}
</style>