149 lines
3.4 KiB
Vue
149 lines
3.4 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import { CustomerBranchCreate } from 'stores/customer/types';
|
|
|
|
defineProps<{
|
|
readonly?: 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({
|
|
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')} ${index + 1}`"
|
|
@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"
|
|
: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>
|