jws-frontend/src/components/TabComponent.vue

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

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

const tab = defineModel<number>('tabIndex', { required: true });

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

  tab.value = customerBranch.value.length - 1;
}

function close(index: number) {
  if (customerBranch.value.length === 1) return;

  if (customerBranch.value.length === index + 1) {
    tab.value = tab.value - 1;
  } else if (tab.value >= index) {
    tab.value = tab.value - 1;
  }

  if (customerBranch.value.length > 1) {
    customerBranch.value.splice(index, 1);
  }
}
</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="(tab = index), console.log(customerBranch)"
        no-caps
      >
        <q-btn
          round
          flat
          id="closeDialog"
          icon="mdi-close"
          padding="xs"
          color="red"
          :class="{ dark: $q.dark.isActive }"
          @click.stop="close(index)"
        />
      </q-tab>
    </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>