jws-frontend/src/components/TabComponent.vue

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

defineProps<{
  readonly?: boolean;
  edit?: boolean;
}>();

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({
    code: '',
    branchNo: undefined,
    address: '',
    addressEN: '',
    provinceId: '',
    districtId: '',
    subDistrictId: '',
    zipCode: '',
    email: '',
    telephoneNo: '',
    name: '',
    status: 'CREATED',
    taxNo: '',
    nameEN: '',
    legalPersonNo: '',
    registerName: '',
    registerDate: new Date(),
    authorizedCapital: '',
    employmentOffice: '',
    bussinessType: '',
    bussinessTypeEN: '',
    jobPosition: '',
    jobPositionEN: '',
    jobDescription: '',
    saleEmployee: '',
    payDate: new Date(),
    wageRate: 0,
  });

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

function close(index: number) {
  if (customerBranch.value.length < 2) return;

  if (
    customerBranch.value.length === index + 1 &&
    tab.value + 1 === customerBranch.value.length
  ) {
    tab.value = tab.value - 1;
  } else if (tab.value >= index) {
    if (tab.value !== 0) {
      tab.value = tab.value - 1;
    }
  }
  customerBranch.value.splice(index, 1);
}
</script>
<template>
  <div class="row no-wrap">
    <q-btn
      id="btn-add"
      class="q-px-lg bordered-b bordered-r app-text-muted"
      flat
      :color="$q.dark.isActive ? 'primary' : ''"
      style="background-color: var(--_body-bg)"
      @click="addData()"
      icon="mdi-plus"
      :disable="readonly"
    ></q-btn>
    <q-tabs
      :active-bg-color="$q.dark.isActive ? 'dark' : 'white'"
      :active-color="$q.dark.isActive ? 'white' : 'primary'"
      indicator-color="transparent"
      active-class="bordered-r"
      v-model="tab"
      align="left"
      inline-label
      class="text-grey"
      style="background-color: var(--_body-bg); max-width: 55vw"
    >
      <q-tab
        :id="`tab-branch-${index}`"
        v-for="(v, index) in customerBranch"
        :key="index"
        :name="index"
        :label="`${$t('customerBranchFormTab')} `"
        :disable="tab !== index && edit"
        @click="tab = index"
        no-caps
        :class="tab === index ? '' : 'bordered-b bordered-r'"
      >
        <q-btn
          round
          flat
          :id="`close-tab-${index}`"
          icon="mdi-close"
          padding="xs"
          color="red"
          :class="{ dark: $q.dark.isActive }"
          @click.stop="close(index)"
          v-if="!readonly"
        />
      </q-tab>
    </q-tabs>
  </div>
  <div class="column seprarator-fix">
    <q-tab-panels v-model="tab" class="rounded-borders">
      <q-tab-panel
        :id="`tab-branch-${index}`"
        v-for="(v, index) in customerBranch.sort(
          (a, b) => (a.branchNo ?? 0) - (b.branchNo ?? 0),
        )"
        :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 lang="scss">
.active-tab {
  border: 1px solid #e0dcdc;
  border-bottom: none;
  border-top: none;
  border-left: none;
}

.tab-style {
  border: 1px solid #e0dcdc;
  border-left: none;
  border-top: none;
}

:deep(.q-separator) {
  padding-block: 0px !important;
}
</style>