120 lines
3.7 KiB
Vue
120 lines
3.7 KiB
Vue
<script lang="ts" setup>
|
|
import FormAddress from './FormAddress.vue';
|
|
|
|
defineProps<{
|
|
readonly?: boolean;
|
|
titleFormAddress?: string;
|
|
addressTitle?: string;
|
|
addressTitleEN?: string;
|
|
noAddress?: boolean;
|
|
noPaddingTab?: boolean;
|
|
disabledRule?: boolean;
|
|
employee?: boolean;
|
|
tabsList?: { name: string; label: string }[];
|
|
}>();
|
|
|
|
const address = defineModel('address', { default: '' });
|
|
const addressEN = defineModel('addressEN', { default: '' });
|
|
const provinceId = defineModel<string | null | undefined>('provinceId');
|
|
const districtId = defineModel<string | null | undefined>('districtId');
|
|
const subDistrictId = defineModel<string | null | undefined>('subDistrictId');
|
|
const zipCode = defineModel<string>('zipCode', { default: '' });
|
|
|
|
const sameWithEmployer = defineModel<boolean>('sameWithEmployer');
|
|
const employeeTab = defineModel<string>('employeeTab');
|
|
</script>
|
|
<template>
|
|
<div class="column full-width full-height">
|
|
<div
|
|
v-if="tabsList && tabsList.length > 0"
|
|
class="row surface-2 q-px-md q-pt-md full-width"
|
|
style="border-bottom: 1px solid var(--brand-1)"
|
|
>
|
|
<q-tabs
|
|
inline-label
|
|
mobile-arrows
|
|
dense
|
|
class="app-text-muted cancel-overflow full-width"
|
|
v-model="employeeTab"
|
|
active-class="active-tab"
|
|
indicator-color="transparent"
|
|
align="left"
|
|
>
|
|
<q-tab
|
|
v-for="tab in tabsList"
|
|
v-bind:key="tab.name"
|
|
class="content-tab text-capitalize"
|
|
:name="tab.name"
|
|
:label="$t(tab.label)"
|
|
style="z-index: 999"
|
|
/>
|
|
</q-tabs>
|
|
</div>
|
|
|
|
<div
|
|
class="col full-height q-pa-md"
|
|
:class="{ row: $q.screen.gt.sm, column: $q.screen.lt.md }"
|
|
>
|
|
<div class="col-md-2" v-if="$slots['person-card']">
|
|
<slot name="person-card"></slot>
|
|
</div>
|
|
|
|
<div
|
|
class="bordered surface-1 rounded scroll full-height col"
|
|
:class="{
|
|
'q-ml-md': $q.screen.gt.sm && $slots['person-card'],
|
|
'q-mt-md': $q.screen.lt.md,
|
|
'q-pa-md': !noPaddingTab,
|
|
}"
|
|
>
|
|
<div class="row q-col-gutter-y-md">
|
|
<slot name="information"></slot>
|
|
<slot name="person"></slot>
|
|
<slot name="address" v-if="!noAddress">
|
|
<FormAddress
|
|
dense
|
|
outlined
|
|
separator
|
|
prefix-id="default"
|
|
:employee="employee"
|
|
:readonly="readonly"
|
|
:disabledRule="disabledRule"
|
|
v-model:address="address"
|
|
v-model:addressEN="addressEN"
|
|
v-model:provinceId="provinceId"
|
|
v-model:districtId="districtId"
|
|
v-model:subDistrictId="subDistrictId"
|
|
v-model:zipCode="zipCode"
|
|
v-model:same-with-employer="sameWithEmployer"
|
|
:title="titleFormAddress"
|
|
:addressTitle="addressTitle || ''"
|
|
:addressTitleEN="addressTitleEN || ''"
|
|
v-if="!$slots.address"
|
|
/>
|
|
</slot>
|
|
<slot name="qr-code"></slot>
|
|
<slot name="location"></slot>
|
|
<slot name="by-type"></slot>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style scoped lang="scss">
|
|
.active-tab {
|
|
color: var(--brand-1);
|
|
background-color: var(--surface-tab);
|
|
border-top: 1px solid var(--brand-1);
|
|
border-left: 1px solid var(--brand-1);
|
|
border-right: 1px solid var(--brand-1);
|
|
border-top-left-radius: var(--radius-2);
|
|
border-top-right-radius: var(--radius-2);
|
|
margin-bottom: -1.5px;
|
|
border-bottom: 3px solid var(--surface-tab);
|
|
}
|
|
|
|
.content-tab {
|
|
border-top-left-radius: var(--radius-2);
|
|
border-top-right-radius: var(--radius-2);
|
|
}
|
|
</style>
|