484 lines
14 KiB
Vue
484 lines
14 KiB
Vue
<script setup lang="ts">
|
|
import { QSelect } from 'quasar';
|
|
import { onMounted, reactive, ref, computed } from 'vue';
|
|
import useAddressStore, {
|
|
District,
|
|
Province,
|
|
SubDistrict,
|
|
} from 'stores/address';
|
|
import { selectFilterOptionRefMod } from 'stores/utils';
|
|
import useOptionStore from 'stores/options';
|
|
import { watch } from 'vue';
|
|
import DatePicker from '../shared/DatePicker.vue';
|
|
|
|
const optionStore = useOptionStore();
|
|
const addressStore = useAddressStore();
|
|
|
|
const addrOptions = reactive<{
|
|
provinceOps: Province[];
|
|
districtOps: District[];
|
|
subDistrictOps: SubDistrict[];
|
|
}>({
|
|
provinceOps: [],
|
|
districtOps: [],
|
|
subDistrictOps: [],
|
|
});
|
|
const arrivalAt = defineModel<string>('arrivalAt');
|
|
|
|
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 issueDate = defineModel<Date | null | string>('visaIssueDate');
|
|
const type = defineModel<string>('type');
|
|
const expireDate = defineModel<Date>('expireDate');
|
|
const remark = defineModel<string>('remark');
|
|
const workerType = defineModel<string>('workerType');
|
|
const number = defineModel<string>('number');
|
|
|
|
const calculatedVisaDate = computed(() => {
|
|
if (!issueDate.value) return undefined;
|
|
return calculate90DayNext(issueDate.value);
|
|
});
|
|
|
|
defineProps<{
|
|
title?: string;
|
|
dense?: boolean;
|
|
outlined?: boolean;
|
|
readonly?: boolean;
|
|
separator?: boolean;
|
|
typeCustomer?: string;
|
|
prefixId: string;
|
|
hideTitle?: boolean;
|
|
|
|
ocr?: boolean;
|
|
}>();
|
|
|
|
function calculate90DayNext(currentDate: Date | null | string) {
|
|
if (currentDate === null) return null;
|
|
|
|
const date =
|
|
typeof currentDate === 'string'
|
|
? new Date(currentDate)
|
|
: new Date(currentDate.getTime());
|
|
date.setDate(date.getDate() + 90);
|
|
|
|
return date;
|
|
}
|
|
|
|
async function fetchProvince() {
|
|
const result = await addressStore.fetchProvince();
|
|
|
|
if (result) addrOptions.provinceOps = result;
|
|
}
|
|
|
|
onMounted(async () => {
|
|
await fetchProvince();
|
|
});
|
|
|
|
const visaIssueCountryOptions = ref<Record<string, unknown>[]>([]);
|
|
let visaIssueCountryFilter: (
|
|
value: string,
|
|
update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
|
|
) => void;
|
|
|
|
const visaTypeOptions = ref<Record<string, unknown>[]>([]);
|
|
let visaTypeFilter: (
|
|
value: string,
|
|
update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
|
|
) => void;
|
|
|
|
const workerTypeOptions = ref<Record<string, unknown>[]>([]);
|
|
let workerTypeFilter: (
|
|
value: string,
|
|
update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
|
|
) => void;
|
|
|
|
onMounted(() => {
|
|
visaTypeFilter = selectFilterOptionRefMod(
|
|
ref(optionStore.globalOption?.visaType),
|
|
visaTypeOptions,
|
|
'label',
|
|
);
|
|
|
|
visaIssueCountryFilter = selectFilterOptionRefMod(
|
|
ref(optionStore.globalOption?.nationality),
|
|
visaIssueCountryOptions,
|
|
'label',
|
|
);
|
|
|
|
workerTypeFilter = selectFilterOptionRefMod(
|
|
ref(optionStore.globalOption?.workerType),
|
|
workerTypeOptions,
|
|
'label',
|
|
);
|
|
});
|
|
|
|
watch(
|
|
() => optionStore.globalOption,
|
|
() => {
|
|
visaIssueCountryFilter = selectFilterOptionRefMod(
|
|
ref(optionStore.globalOption?.nationality),
|
|
visaIssueCountryOptions,
|
|
'label',
|
|
);
|
|
|
|
visaTypeFilter = selectFilterOptionRefMod(
|
|
optionStore.globalOption.visaType,
|
|
visaTypeOptions,
|
|
'label',
|
|
);
|
|
|
|
workerTypeFilter = selectFilterOptionRefMod(
|
|
ref(optionStore.globalOption?.workerType),
|
|
workerTypeOptions,
|
|
'label',
|
|
);
|
|
},
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<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: $q.screen.gt.sm }">
|
|
<div
|
|
v-if="!ocr"
|
|
class="col row justify-center"
|
|
:class="{ 'q-mb-md': $q.screen.lt.md }"
|
|
style="max-height: 50%"
|
|
>
|
|
<q-avatar
|
|
style="border: 1px dashed; border-color: black"
|
|
square
|
|
size="100px"
|
|
font-size="50px"
|
|
color="grey-4"
|
|
text-color="grey"
|
|
icon="mdi-image-outline"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="row q-col-gutter-sm"
|
|
:class="{ 'col-10': !ocr, 'col-12': ocr }"
|
|
>
|
|
<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-md-4 col-6': !ocr, 'col-6': ocr }"
|
|
: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 = ''"
|
|
:rules="[
|
|
(val) => (val && val.length > 0) || $t('form.error.required'),
|
|
]"
|
|
>
|
|
<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-md-4 col-6': !ocr, 'col-6': ocr }"
|
|
:label="$t('customerEmployee.form.visaNo')"
|
|
:model-value="readonly ? number || '-' : number"
|
|
@update:model-value="
|
|
(v) => (typeof v === 'string' ? (number = v) : '')
|
|
"
|
|
/>
|
|
|
|
<q-input
|
|
:for="`${prefixId}-input-visa-place`"
|
|
:dense="dense"
|
|
outlined
|
|
:readonly="readonly"
|
|
hide-bottom-space
|
|
:class="{ 'col-md-4 col-12': !ocr, 'col-6': ocr }"
|
|
:label="$t('customerEmployee.form.visaPlace')"
|
|
:model-value="readonly ? issuePlace || '-' : issuePlace"
|
|
@update:model-value="
|
|
(v) => (typeof v === 'string' ? (issuePlace = v) : '')
|
|
"
|
|
:rules="[
|
|
(val) => (val && val.length > 0) || $t('form.error.required'),
|
|
]"
|
|
/>
|
|
|
|
<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-md-4 col-6': !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-md col-6">
|
|
<DatePicker
|
|
:id="`${prefixId}-date-picker-visa-issuance`"
|
|
:readonly="readonly"
|
|
:label="$t('customerEmployee.form.visaIssuance')"
|
|
v-model="issueDate"
|
|
@update:model-value="
|
|
(v) => {
|
|
if (!v) return;
|
|
if (!expireDate) return;
|
|
if (new Date(v).getTime() >= new Date(expireDate).getTime()) {
|
|
const newValue = new Date(v);
|
|
newValue.setDate(newValue.getDate() + 1);
|
|
expireDate = newValue;
|
|
}
|
|
}
|
|
"
|
|
:rules="[
|
|
(val) => (val && val.length > 0) || $t('form.error.required'),
|
|
]"
|
|
clearable
|
|
/>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<DatePicker
|
|
:id="`${prefixId}-date-picker-visa-expire`"
|
|
:readonly="readonly"
|
|
:label="$t('customerEmployee.form.visaExpire')"
|
|
v-model="expireDate"
|
|
:disabled-dates="
|
|
(date: Date) =>
|
|
date.getTime() <
|
|
((issueDate && new Date(issueDate).getTime()) || Date.now())
|
|
"
|
|
clearable
|
|
:rules="[
|
|
(val) => (val && val.length > 0) || $t('form.error.required'),
|
|
]"
|
|
/>
|
|
</div>
|
|
<div class="col">
|
|
<DatePicker
|
|
:id="`${prefixId}-date-picker-visa-issuance`"
|
|
:readonly
|
|
:disabled="!readonly"
|
|
:label="$t('customerEmployee.form.visa90Day')"
|
|
:model-value="calculatedVisaDate"
|
|
clearable
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<q-input
|
|
:for="`${prefixId}-input-visa-no`"
|
|
:dense="dense"
|
|
outlined
|
|
:readonly="readonly"
|
|
hide-bottom-space
|
|
class="col-md-4 col-12"
|
|
:label="$t('customerEmployee.form.arrivalCardNo')"
|
|
:model-value="readonly ? arrivalTMNo || '-' : arrivalTMNo"
|
|
@update:model-value="
|
|
(v) => (typeof v === 'string' ? (arrivalTMNo = v) : '')
|
|
"
|
|
:rules="[
|
|
(val) => (val && val.length > 0) || $t('form.error.required'),
|
|
]"
|
|
/>
|
|
|
|
<DatePicker
|
|
class="col-md-4 col-12"
|
|
:id="`${prefixId}-date-picker-visa-enter`"
|
|
:readonly="readonly"
|
|
:label="$t('customerEmployee.form.visaEnter')"
|
|
v-model="arrivalTM"
|
|
clearable
|
|
:rules="[
|
|
(val) => (val && val.length > 0) || $t('form.error.required'),
|
|
]"
|
|
/>
|
|
|
|
<q-input
|
|
:for="`${prefixId}-input-visa-no`"
|
|
:dense="dense"
|
|
outlined
|
|
:readonly="readonly"
|
|
hide-bottom-space
|
|
class="col-md-4 col-12"
|
|
:label="$t('customerEmployee.form.visaCheckpoint')"
|
|
:model-value="readonly ? arrivalAt || '-' : arrivalAt"
|
|
@update:model-value="
|
|
(v) => (typeof v === 'string' ? (arrivalAt = v) : '')
|
|
"
|
|
:rules="[
|
|
(val) => (val && val.length > 0) || $t('form.error.required'),
|
|
]"
|
|
/>
|
|
|
|
<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-md-4 col-6"
|
|
:dense="dense"
|
|
:readonly="readonly"
|
|
:options="visaIssueCountryOptions"
|
|
:hide-dropdown-icon="readonly"
|
|
:for="`${prefixId}-select-issue-country`"
|
|
:label="$t('customerEmployee.form.issueCountry')"
|
|
@filter="visaIssueCountryFilter"
|
|
:model-value="readonly ? issueCountry || '-' : issueCountry"
|
|
@update:model-value="
|
|
(v) => (typeof v === 'string' ? (issueCountry = v) : '')
|
|
"
|
|
@clear="type = ''"
|
|
:rules="[
|
|
(val) => (val && val.length > 0) || $t('form.error.required'),
|
|
]"
|
|
>
|
|
<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-md-4 col-6"
|
|
:label="$t('customerEmployee.form.entryCount')"
|
|
v-model="entryCount"
|
|
type="number"
|
|
min="0"
|
|
:rules="[(val) => (!!val && val > 0) || $t('form.error.required')]"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|