111 lines
2.5 KiB
Vue
111 lines
2.5 KiB
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>
|