refactor: edit layout visa
This commit is contained in:
Thanaphon Frappet
parent
b4fc7c7202
commit
3527d29427
1 changed files with 207 additions and 334 deletions
|
|
@ -1,6 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import { QSelect } from 'quasar';
|
||||
import { onMounted, reactive, ref } from 'vue';
|
||||
import { onMounted, reactive, ref, computed } from 'vue';
|
||||
import useAddressStore, {
|
||||
District,
|
||||
Province,
|
||||
|
|
@ -23,25 +23,25 @@ const addrOptions = reactive<{
|
|||
districtOps: [],
|
||||
subDistrictOps: [],
|
||||
});
|
||||
const arrivalAt = defineModel<string>('arrivalAt');
|
||||
|
||||
const visaType = defineModel<string>('visaType');
|
||||
const visaNumber = defineModel<string>('visaNumber');
|
||||
const visaIssueDate = defineModel<Date | null | string>('visaIssueDate');
|
||||
const visaExpiryDate = defineModel<Date | null | string>('visaExpiryDate');
|
||||
const visaIssuingPlace = defineModel<string>('visaIssuingPlace');
|
||||
const visaStayUntilDate = defineModel<Date | null | string>(
|
||||
'visaStayUntilDate',
|
||||
);
|
||||
const arrivalTMNo = defineModel<string>('arrivalTmNo');
|
||||
const arrivalTM = defineModel<string>('arrivalTm');
|
||||
const mrz = defineModel<string>('mrz');
|
||||
const entryCount = defineModel<number>('entryCount');
|
||||
const issuePlace = defineModel<string>('issuePlace');
|
||||
const issueCountry = defineModel<string>('issueCountry');
|
||||
|
||||
const tm6Number = defineModel<string>('tm6Number');
|
||||
const entryDate = defineModel<Date | null | string>('entryDate');
|
||||
|
||||
const issueDate = defineModel<Date | null | string>('visaIssueDate');
|
||||
const type = defineModel<string>('visaType');
|
||||
const expireDate = defineModel<Date>('expireDate');
|
||||
const remark = defineModel<string>('remark');
|
||||
const workerType = defineModel<string>('workerType');
|
||||
const dayNext = defineModel<Date>('dayNext');
|
||||
const tmNo = defineModel<string>('tmNo');
|
||||
const enteredCheckpoint = defineModel<string>('enteredCheckpoint');
|
||||
const number = defineModel<string>('visaNumber');
|
||||
|
||||
const calculatedVisaDate = computed(() => {
|
||||
if (!issueDate.value) return undefined;
|
||||
return calculate90DayNext(issueDate.value);
|
||||
});
|
||||
|
||||
defineProps<{
|
||||
title?: string;
|
||||
|
|
@ -51,18 +51,22 @@ defineProps<{
|
|||
separator?: boolean;
|
||||
typeCustomer?: string;
|
||||
prefixId: string;
|
||||
hideTitle?: boolean;
|
||||
|
||||
ocr?: boolean;
|
||||
}>();
|
||||
|
||||
async function calculate90DayNext(currentDate: Date) {
|
||||
const futureDate = new Date(currentDate);
|
||||
function calculate90DayNext(currentDate: Date | null | string) {
|
||||
if (currentDate === null) return null;
|
||||
|
||||
// Add 90 days to the current date
|
||||
futureDate.setDate(currentDate.getDate() + 90);
|
||||
const date =
|
||||
typeof currentDate === 'string' ? new Date(currentDate) : currentDate;
|
||||
|
||||
return futureDate;
|
||||
date.setDate(date.getDate() + 90);
|
||||
|
||||
return date;
|
||||
}
|
||||
|
||||
async function fetchProvince() {
|
||||
const result = await addressStore.fetchProvince();
|
||||
|
||||
|
|
@ -118,9 +122,49 @@ watch(
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<template v-if="!!ocr">
|
||||
{{ type }}
|
||||
|
||||
<div class="row col-12">
|
||||
<div v-if="!hideTitle" class="col-12 q-pb-sm text-weight-bold text-body1">
|
||||
<q-icon
|
||||
flat
|
||||
size="xs"
|
||||
class="q-pa-sm rounded q-mr-xs"
|
||||
color="info"
|
||||
name="mdi-passport"
|
||||
style="background-color: var(--surface-3)"
|
||||
/>
|
||||
{{ title }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="col-12 row justify-between items-center q-pb-sm text-weight-bold"
|
||||
>
|
||||
<div class="app-text-muted">
|
||||
<slot name="expiryDate" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<slot name="button"></slot>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 row q-col-gutter-sm">
|
||||
<div v-if="!ocr" class="col row justify-center" style="max-height: 50%">
|
||||
<div style="border: 1px dashed">
|
||||
<q-avatar
|
||||
square
|
||||
size="100px"
|
||||
font-size="50px"
|
||||
color="grey-4"
|
||||
text-color="grey"
|
||||
icon="mdi-image-outline"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="row q-col-gutter-sm"
|
||||
:class="{ 'col-10': !ocr, 'col-12': ocr }"
|
||||
>
|
||||
<q-select
|
||||
outlined
|
||||
clearable
|
||||
|
|
@ -133,19 +177,19 @@ watch(
|
|||
input-debounce="0"
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
class="col-6"
|
||||
:class="{ 'col-4': !ocr, 'col-6': ocr }"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:options="visaTypeOptions"
|
||||
:options="workerTypeOptions"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:for="`${prefixId}-select-visa-type`"
|
||||
:label="$t('customerEmployee.form.visaType')"
|
||||
@filter="visaTypeFilter"
|
||||
:model-value="readonly ? visaType || '-' : visaType"
|
||||
:label="$t('customerEmployee.form.workerType')"
|
||||
@filter="workerTypeFilter"
|
||||
:model-value="readonly ? workerType || '-' : workerType"
|
||||
@update:model-value="
|
||||
(v) => (typeof v === 'string' ? (visaType = v) : '')
|
||||
(v) => (typeof v === 'string' ? (workerType = v) : '')
|
||||
"
|
||||
@clear="visaType = ''"
|
||||
@clear="workerType = ''"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
|
|
@ -155,43 +199,20 @@ watch(
|
|||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
<!-- :rules="[
|
||||
(val: string) =>
|
||||
!!val || $t('selectValidate') + $t('formDialogInputVisaType'),
|
||||
]" -->
|
||||
|
||||
<q-input
|
||||
:for="`${prefixId}-input-visa-no`"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-6"
|
||||
:class="{ 'col-4': !ocr, 'col-6': ocr }"
|
||||
:label="$t('customerEmployee.form.visaNo')"
|
||||
:model-value="readonly ? visaNumber || '-' : visaNumber"
|
||||
:model-value="readonly ? number || '-' : number"
|
||||
@update:model-value="
|
||||
(v) => (typeof v === 'string' ? (visaNumber = v) : '')
|
||||
(v) => (typeof v === 'string' ? (number = v) : '')
|
||||
"
|
||||
/>
|
||||
<!-- :rules="[
|
||||
(val: string) =>
|
||||
!!val || $t('inputValidate') + $t('formDialogInputVisaNo'),
|
||||
]" -->
|
||||
<DatePicker
|
||||
class="col-6"
|
||||
:id="`${prefixId}-date-picker-visa-issuance`"
|
||||
:readonly="readonly"
|
||||
:label="$t('customerEmployee.form.visaIssuance')"
|
||||
v-model="visaIssueDate"
|
||||
clearable
|
||||
/>
|
||||
<DatePicker
|
||||
class="col-6"
|
||||
:id="`${prefixId}-date-picker-visa-expire`"
|
||||
:readonly="readonly"
|
||||
:label="$t('customerEmployee.form.visaExpire')"
|
||||
v-model="visaExpiryDate"
|
||||
clearable
|
||||
/>
|
||||
|
||||
<q-input
|
||||
:for="`${prefixId}-input-visa-place`"
|
||||
|
|
@ -199,53 +220,152 @@ watch(
|
|||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-6"
|
||||
:class="{ 'col-4': !ocr, 'col-6': ocr }"
|
||||
:label="$t('customerEmployee.form.visaPlace')"
|
||||
:model-value="readonly ? visaIssuingPlace || '-' : visaIssuingPlace"
|
||||
:model-value="readonly ? issuePlace || '-' : issuePlace"
|
||||
@update:model-value="
|
||||
(v) => (typeof v === 'string' ? (visaIssuingPlace = v) : '')
|
||||
(v) => (typeof v === 'string' ? (issuePlace = v) : '')
|
||||
"
|
||||
/>
|
||||
<!-- :rules="[
|
||||
(val: string) =>
|
||||
!!val || $t('selectValidate') + $t('formDialogInputVisaPlace'),
|
||||
]" -->
|
||||
<DatePicker
|
||||
class="col-6"
|
||||
:id="`${prefixId}-date-picker-visa-until`"
|
||||
:readonly="readonly"
|
||||
:label="$t('customerEmployee.form.visaStayUntil')"
|
||||
v-model="visaStayUntilDate"
|
||||
|
||||
<q-select
|
||||
v-if="ocr"
|
||||
outlined
|
||||
clearable
|
||||
/>
|
||||
use-input
|
||||
fill-input
|
||||
emit-value
|
||||
map-options
|
||||
hide-selected
|
||||
hide-bottom-space
|
||||
input-debounce="0"
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
:class="{ 'col-4': !ocr, 'col-6': ocr }"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:options="visaTypeOptions"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:for="`${prefixId}-select-visa-type`"
|
||||
:label="$t('customerEmployee.form.visaType')"
|
||||
@filter="visaTypeFilter"
|
||||
:model-value="readonly ? type || '-' : type"
|
||||
@update:model-value="(v) => (typeof v === 'string' ? (type = v) : '')"
|
||||
@clear="type = ''"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
{{ $t('general.noData') }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
|
||||
<div class="row q-col-gutter-sm">
|
||||
<q-select
|
||||
v-if="!ocr"
|
||||
outlined
|
||||
clearable
|
||||
use-input
|
||||
fill-input
|
||||
emit-value
|
||||
map-options
|
||||
hide-selected
|
||||
hide-bottom-space
|
||||
input-debounce="0"
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
:class="{ 'col-4': !ocr, 'col-6': ocr }"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:options="visaTypeOptions"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:for="`${prefixId}-select-visa-type`"
|
||||
:label="$t('customerEmployee.form.visaType')"
|
||||
@filter="visaTypeFilter"
|
||||
:model-value="readonly ? type || '-' : type"
|
||||
@update:model-value="
|
||||
(v) => (typeof v === 'string' ? (type = v) : '')
|
||||
"
|
||||
@clear="type = ''"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
{{ $t('general.noData') }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
|
||||
<div class="col">
|
||||
<DatePicker
|
||||
:id="`${prefixId}-date-picker-visa-issuance`"
|
||||
:readonly="readonly"
|
||||
:label="$t('customerEmployee.form.visaIssuance')"
|
||||
v-model="issueDate"
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<DatePicker
|
||||
:id="`${prefixId}-date-picker-visa-expire`"
|
||||
:readonly="readonly"
|
||||
:label="$t('customerEmployee.form.visaExpire')"
|
||||
v-model="expireDate"
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<DatePicker
|
||||
:id="`${prefixId}-date-picker-visa-issuance`"
|
||||
:readonly="readonly"
|
||||
:label="$t('customerEmployee.form.visa90Day')"
|
||||
:model-value="calculatedVisaDate"
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-input
|
||||
:for="`${prefixId}-input-tm6`"
|
||||
:for="`${prefixId}-input-visa-no`"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-6"
|
||||
:label="$t('customerEmployee.form.visaTM6')"
|
||||
:model-value="readonly ? tm6Number || '-' : tm6Number"
|
||||
class="col-4"
|
||||
:label="$t('customerEmployee.form.arrivalCardNo')"
|
||||
:model-value="readonly ? arrivalTMNo || '-' : arrivalTMNo"
|
||||
@update:model-value="
|
||||
(v) => (typeof v === 'string' ? (tm6Number = v) : '')
|
||||
(v) => (typeof v === 'string' ? (arrivalTMNo = v) : '')
|
||||
"
|
||||
@clear="tm6Number = ''"
|
||||
/>
|
||||
<!-- :rules="[
|
||||
(val: string) =>
|
||||
!!val || $t('inputValidate') + $t('formDialogInputVisaTM6'),
|
||||
]" -->
|
||||
|
||||
<DatePicker
|
||||
class="col-6"
|
||||
class="col-4"
|
||||
:id="`${prefixId}-date-picker-visa-enter`"
|
||||
:readonly="readonly"
|
||||
:label="$t('customerEmployee.form.visaEnter')"
|
||||
v-model="entryDate"
|
||||
v-model="arrivalTM"
|
||||
clearable
|
||||
/>
|
||||
|
||||
<q-input
|
||||
:for="`${prefixId}-input-visa-no`"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-4"
|
||||
:label="$t('customerEmployee.form.visaCheckpoint')"
|
||||
:model-value="readonly ? arrivalAt || '-' : arrivalAt"
|
||||
@update:model-value="
|
||||
(v) => (typeof v === 'string' ? (arrivalAt = v) : '')
|
||||
"
|
||||
/>
|
||||
|
||||
<q-select
|
||||
outlined
|
||||
clearable
|
||||
|
|
@ -258,7 +378,7 @@ watch(
|
|||
input-debounce="0"
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
class="col-6"
|
||||
class="col-4"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:options="visaTypeOptions"
|
||||
|
|
@ -270,7 +390,7 @@ watch(
|
|||
@update:model-value="
|
||||
(v) => (typeof v === 'string' ? (issueCountry = v) : '')
|
||||
"
|
||||
@clear="visaType = ''"
|
||||
@clear="type = ''"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
|
|
@ -282,13 +402,12 @@ watch(
|
|||
</q-select>
|
||||
|
||||
<q-input
|
||||
style="height: 60px"
|
||||
:for="`${prefixId}-input-entry-count`"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-6"
|
||||
class="col-4"
|
||||
:label="$t('customerEmployee.form.entryCount')"
|
||||
v-model="entryCount"
|
||||
type="number"
|
||||
|
|
@ -296,253 +415,7 @@ watch(
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-if="!ocr">
|
||||
<div class="column full-width" style="height: 150px; margin-bottom: 80px">
|
||||
<div
|
||||
class="col-3 row item-center justify-between text-weight-bold app-text-muted"
|
||||
>
|
||||
<div>
|
||||
<slot name="expiryDate" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<slot name="button"></slot>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col row">
|
||||
<div class="col row justify-center" style="max-height: 50%">
|
||||
<div style="border: 1px dashed">
|
||||
<q-avatar
|
||||
square
|
||||
size="100px"
|
||||
font-size="50px"
|
||||
color="grey-4"
|
||||
text-color="grey"
|
||||
icon="mdi-image-outline"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-10 row q-col-gutter-sm">
|
||||
<q-select
|
||||
outlined
|
||||
clearable
|
||||
use-input
|
||||
fill-input
|
||||
emit-value
|
||||
map-options
|
||||
hide-selected
|
||||
hide-bottom-space
|
||||
input-debounce="0"
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
class="col-4"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:options="workerTypeOptions"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:for="`${prefixId}-select-visa-type`"
|
||||
:label="$t('customerEmployee.form.workerType')"
|
||||
@filter="workerTypeFilter"
|
||||
:model-value="readonly ? workerType || '-' : workerType"
|
||||
@update:model-value="
|
||||
(v) => (typeof v === 'string' ? (workerType = v) : '')
|
||||
"
|
||||
@clear="workerType = ''"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
{{ $t('general.noData') }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
|
||||
<q-input
|
||||
:for="`${prefixId}-input-visa-no`"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-4"
|
||||
:label="$t('customerEmployee.form.visaNo')"
|
||||
:model-value="readonly ? visaNumber || '-' : visaNumber"
|
||||
@update:model-value="
|
||||
(v) => (typeof v === 'string' ? (visaNumber = v) : '')
|
||||
"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
:for="`${prefixId}-input-visa-place`"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-4"
|
||||
:label="$t('customerEmployee.form.visaPlace')"
|
||||
:model-value="readonly ? visaIssuingPlace || '-' : visaIssuingPlace"
|
||||
@update:model-value="
|
||||
(v) => (typeof v === 'string' ? (visaIssuingPlace = v) : '')
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="row q-col-gutter-sm">
|
||||
<q-select
|
||||
outlined
|
||||
clearable
|
||||
use-input
|
||||
fill-input
|
||||
emit-value
|
||||
map-options
|
||||
hide-selected
|
||||
hide-bottom-space
|
||||
input-debounce="0"
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
class="col-4"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:options="visaTypeOptions"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:for="`${prefixId}-select-visa-type`"
|
||||
:label="$t('customerEmployee.form.visaType')"
|
||||
@filter="visaTypeFilter"
|
||||
:model-value="readonly ? visaType || '-' : visaType"
|
||||
@update:model-value="
|
||||
(v) => (typeof v === 'string' ? (visaType = v) : '')
|
||||
"
|
||||
@clear="visaType = ''"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
{{ $t('general.noData') }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
|
||||
<div class="col">
|
||||
<DatePicker
|
||||
:id="`${prefixId}-date-picker-visa-issuance`"
|
||||
:readonly="readonly"
|
||||
:label="$t('customerEmployee.form.visaIssuance')"
|
||||
v-model="visaIssueDate"
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<DatePicker
|
||||
:id="`${prefixId}-date-picker-visa-expire`"
|
||||
:readonly="readonly"
|
||||
:label="$t('customerEmployee.form.visaExpire')"
|
||||
v-model="visaExpiryDate"
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
<DatePicker
|
||||
class="col-3"
|
||||
:id="`${prefixId}-date-picker-visa-issuance`"
|
||||
:readonly="readonly"
|
||||
:label="$t('customerEmployee.form.visa90Day')"
|
||||
v-model="dayNext"
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
|
||||
<q-input
|
||||
:for="`${prefixId}-input-visa-no`"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-4"
|
||||
:label="$t('customerEmployee.form.arrivalCardNo')"
|
||||
:model-value="readonly ? tmNo || '-' : tmNo"
|
||||
@update:model-value="
|
||||
(v) => (typeof v === 'string' ? (tmNo = v) : '')
|
||||
"
|
||||
/>
|
||||
|
||||
<DatePicker
|
||||
class="col-4"
|
||||
:id="`${prefixId}-date-picker-visa-enter`"
|
||||
:readonly="readonly"
|
||||
:label="$t('customerEmployee.form.visaEnter')"
|
||||
v-model="entryDate"
|
||||
clearable
|
||||
/>
|
||||
|
||||
<q-input
|
||||
:for="`${prefixId}-input-visa-no`"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-4"
|
||||
:label="$t('customerEmployee.form.visaCheckpoint')"
|
||||
:model-value="
|
||||
readonly ? enteredCheckpoint || '-' : enteredCheckpoint
|
||||
"
|
||||
@update:model-value="
|
||||
(v) => (typeof v === 'string' ? (enteredCheckpoint = v) : '')
|
||||
"
|
||||
/>
|
||||
|
||||
<q-select
|
||||
outlined
|
||||
clearable
|
||||
use-input
|
||||
fill-input
|
||||
emit-value
|
||||
map-options
|
||||
hide-selected
|
||||
hide-bottom-space
|
||||
input-debounce="0"
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
class="col-4"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:options="visaTypeOptions"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:for="`${prefixId}-select-issue-country`"
|
||||
:label="$t('customerEmployee.form.issueCountry')"
|
||||
@filter="visaTypeFilter"
|
||||
:model-value="readonly ? issueCountry || '-' : issueCountry"
|
||||
@update:model-value="
|
||||
(v) => (typeof v === 'string' ? (issueCountry = v) : '')
|
||||
"
|
||||
@clear="visaType = ''"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
{{ $t('general.noData') }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
|
||||
<q-input
|
||||
:for="`${prefixId}-input-entry-count`"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-4"
|
||||
:label="$t('customerEmployee.form.entryCount')"
|
||||
v-model="entryCount"
|
||||
type="number"
|
||||
min="0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue