71 lines
1.6 KiB
Vue
71 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
import DatePicker from 'src/components/shared/DatePicker.vue';
|
|
|
|
const passportNo = defineModel<string>('passportNo');
|
|
const documentExpireDate = defineModel<Date>('documentExpireDate');
|
|
|
|
defineProps<{
|
|
noAction?: boolean;
|
|
title?: string;
|
|
dense?: boolean;
|
|
outlined?: boolean;
|
|
readonly?: boolean;
|
|
typeCustomer?: string;
|
|
employee?: boolean;
|
|
prefixId: string;
|
|
showBtnSave?: boolean;
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<div class="row col-12">
|
|
<div
|
|
class="col-12 items-center row justify-between q-pb-sm text-weight-bold text-body1"
|
|
>
|
|
<div>
|
|
<q-icon
|
|
flat
|
|
size="xs"
|
|
class="q-pa-sm rounded q-mr-xs"
|
|
color="info"
|
|
name="mdi-office-building-outline"
|
|
style="background-color: var(--surface-3)"
|
|
/>
|
|
{{ $t(`${title}`) }}
|
|
</div>
|
|
<!-- v-if="!readonly" -->
|
|
</div>
|
|
|
|
<div class="col-12 row" style="gap: var(--size-2)">
|
|
<q-input
|
|
:for="`${prefixId}-input-passport-no`"
|
|
:dense="dense"
|
|
outlined
|
|
hide-bottom-space
|
|
:readonly="readonly"
|
|
class="col-4"
|
|
:label="$t('customerEmployee.form.passportNo')"
|
|
v-model="passportNo"
|
|
/>
|
|
|
|
<DatePicker
|
|
v-model="documentExpireDate"
|
|
class="col-4"
|
|
:id="`${prefixId}-input-document-expire-date`"
|
|
:label="$t('quotation.documentExpireDate')"
|
|
:readonly="readonly"
|
|
clearable
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.clear-btn {
|
|
opacity: 50%;
|
|
transition: opacity 0.2s ease-in-out;
|
|
&:hover {
|
|
opacity: 100%;
|
|
}
|
|
}
|
|
</style>
|