feat: option from json
This commit is contained in:
puriphatt
parent
12a5f618bb
commit
cb01378114
9 changed files with 1271 additions and 626 deletions
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { onMounted, ref } from 'vue';
|
||||
|
||||
const customerName = defineModel<string>('customerName');
|
||||
const customerNameEn = defineModel<string>('customerNameEn');
|
||||
|
|
@ -12,13 +12,6 @@ const customerBranchId = defineModel<string>('customerBranchId');
|
|||
const employeeID = defineModel<string>('employeeID');
|
||||
const nrcNo = defineModel<string>('nrcNo');
|
||||
|
||||
const branchOption = ref([
|
||||
{
|
||||
label: 'uuu',
|
||||
value: 'ad87961c-c44f-47ca-8c1e-0ef30c2b16ba',
|
||||
},
|
||||
]);
|
||||
|
||||
defineProps<{
|
||||
dense?: boolean;
|
||||
outlined?: boolean;
|
||||
|
|
@ -26,7 +19,15 @@ defineProps<{
|
|||
separator?: boolean;
|
||||
typeCustomer?: string;
|
||||
employee?: boolean;
|
||||
|
||||
employeeOwnerOption?: { label: string; value: string }[];
|
||||
}>();
|
||||
|
||||
defineEmits<{
|
||||
(e: 'filterOwnerBranch', val: string, update: void): void;
|
||||
}>();
|
||||
|
||||
onMounted(async () => {});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -82,6 +83,8 @@ defineProps<{
|
|||
<div v-if="employee" class="col-9 row q-col-gutter-md">
|
||||
<q-select
|
||||
id="select-employer-branch"
|
||||
use-input
|
||||
input-debounce="0"
|
||||
:dense="dense"
|
||||
:outlined="!readonly"
|
||||
:readonly="readonly"
|
||||
|
|
@ -94,7 +97,8 @@ defineProps<{
|
|||
option-value="value"
|
||||
emit-value
|
||||
map-options
|
||||
:options="branchOption"
|
||||
:options="employeeOwnerOption"
|
||||
@filter="(val, update) => $emit('filterOwnerBranch', val, update)"
|
||||
:rules="[
|
||||
(val: string) =>
|
||||
!!val || $t('selectValidate') + $t('formDialogEmployerBranchCode'),
|
||||
|
|
@ -112,6 +116,7 @@ defineProps<{
|
|||
v-model="employeeID"
|
||||
/>
|
||||
<q-input
|
||||
mask="## #### ###### #"
|
||||
for="input-nrcNo"
|
||||
:dense="dense"
|
||||
:outlined="!readonly"
|
||||
|
|
|
|||
|
|
@ -21,6 +21,14 @@ const addrOptions = reactive<{
|
|||
});
|
||||
|
||||
const employeeCheckup = defineModel<EmployeeCheckupCreate[]>('employeeCheckup');
|
||||
const checkupTypeOption =
|
||||
defineModel<{ label: string; value: string }[]>('checkupTypeOption');
|
||||
const medicalBenefitOption = defineModel<{ label: string; value: string }[]>(
|
||||
'medicalBenefitOption',
|
||||
);
|
||||
const insuranceCompanyOption = defineModel<{ label: string; value: string }[]>(
|
||||
'insuranceCompanyOption',
|
||||
);
|
||||
|
||||
const tab = ref();
|
||||
|
||||
|
|
@ -73,271 +81,273 @@ onMounted(async () => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="bordered-b full-width">
|
||||
<q-tabs
|
||||
v-model="tab"
|
||||
dense
|
||||
class="text-grey"
|
||||
active-class="active-tab"
|
||||
indicator-color="transparent"
|
||||
align="left"
|
||||
:breakpoint="0"
|
||||
>
|
||||
<q-btn
|
||||
@click="addData"
|
||||
flat
|
||||
class="app-text-muted"
|
||||
style="background-color: var(--_body-bg)"
|
||||
icon="mdi-plus"
|
||||
padding="8px 8px"
|
||||
:disable="readonly"
|
||||
:color="$q.dark.isActive ? 'primary' : ''"
|
||||
:class="tab !== 'tab0' ? 'bordered-r' : ''"
|
||||
/>
|
||||
<q-tab
|
||||
v-for="(tab, index) in employeeCheckup"
|
||||
<div>
|
||||
<div class="bordered-b full-width">
|
||||
<q-tabs
|
||||
v-model="tab"
|
||||
dense
|
||||
class="text-grey"
|
||||
active-class="active-tab"
|
||||
indicator-color="transparent"
|
||||
align="left"
|
||||
:breakpoint="0"
|
||||
>
|
||||
<q-btn
|
||||
@click="addData"
|
||||
flat
|
||||
class="app-text-muted"
|
||||
style="background-color: var(--_body-bg)"
|
||||
icon="mdi-plus"
|
||||
padding="8px 8px"
|
||||
:disable="readonly"
|
||||
:color="$q.dark.isActive ? 'primary' : ''"
|
||||
:class="tab !== 'tab0' ? 'bordered-r' : ''"
|
||||
/>
|
||||
<q-tab
|
||||
v-for="(tab, index) in employeeCheckup"
|
||||
v-bind:key="index"
|
||||
:name="`tab${index}`"
|
||||
class="content-tab text-capitalize"
|
||||
style="z-index: 999"
|
||||
>
|
||||
<div class="text-weight-medium row items-center">
|
||||
{{ $t('formDialogTabCheckup') + (index + 1) }}
|
||||
<q-btn
|
||||
v-if="!readonly && employeeCheckup?.length !== 1"
|
||||
round
|
||||
flat
|
||||
id="closeDialog"
|
||||
size="sm"
|
||||
icon="mdi-close"
|
||||
padding="xs"
|
||||
color="red"
|
||||
:class="{ dark: $q.dark.isActive }"
|
||||
@click.stop="removeData(index)"
|
||||
/>
|
||||
</div>
|
||||
</q-tab>
|
||||
</q-tabs>
|
||||
</div>
|
||||
|
||||
<q-tab-panels v-model="tab" style="padding-top: 0px">
|
||||
<q-tab-panel
|
||||
v-for="(checkup, index) in employeeCheckup"
|
||||
v-bind:key="index"
|
||||
:name="`tab${index}`"
|
||||
class="content-tab text-capitalize"
|
||||
style="z-index: 999"
|
||||
class="row col-12 items-start"
|
||||
style="overflow: auto; height: 50vh"
|
||||
>
|
||||
<div class="text-weight-medium row items-center">
|
||||
{{ $t('formDialogTabCheckup') + (index + 1) }}
|
||||
<q-btn
|
||||
v-if="!readonly && employeeCheckup?.length !== 1"
|
||||
round
|
||||
flat
|
||||
id="closeDialog"
|
||||
size="sm"
|
||||
icon="mdi-close"
|
||||
padding="xs"
|
||||
color="red"
|
||||
:class="{ dark: $q.dark.isActive }"
|
||||
@click.stop="removeData(index)"
|
||||
/>
|
||||
<div class="col-3 app-text-muted">
|
||||
• {{ $t(`formDialogTitleHealthCheck`) }}
|
||||
</div>
|
||||
</q-tab>
|
||||
</q-tabs>
|
||||
<div class="col-9 row q-col-gutter-md">
|
||||
<q-input
|
||||
:dense="dense"
|
||||
:outlined="!readonly"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
class="col-6"
|
||||
:label="$t('formDialogInputCheckupRes')"
|
||||
v-model="checkup.checkupResult"
|
||||
/>
|
||||
<q-select
|
||||
id="select-province"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
emit-value
|
||||
map-options
|
||||
v-model="checkup.checkupType"
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
:label="$t('formDialogInputCheckupType')"
|
||||
class="col-6"
|
||||
:options="checkupTypeOption"
|
||||
lazy-rules
|
||||
/>
|
||||
<q-select
|
||||
id="select-province"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
emit-value
|
||||
map-options
|
||||
v-model="checkup.provinceId"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
:label="$t('province')"
|
||||
class="col-3"
|
||||
:options="addrOptions.provinceOps"
|
||||
lazy-rules
|
||||
/>
|
||||
<q-input
|
||||
:dense="dense"
|
||||
:outlined="!readonly"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
class="col-9"
|
||||
:label="$t('formDialogInputHospital')"
|
||||
v-model="checkup.hospitalName"
|
||||
/>
|
||||
<q-input
|
||||
:label="$t('formDialogInputRemark')"
|
||||
:dense="dense"
|
||||
:outlined="!readonly"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
class="col-12"
|
||||
v-model="checkup.remark"
|
||||
type="textarea"
|
||||
/>
|
||||
<q-select
|
||||
id="select-province"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
emit-value
|
||||
map-options
|
||||
v-model="checkup.medicalBenefitScheme"
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
:label="$t('formDialogInputMedicalBenefit')"
|
||||
class="col-6"
|
||||
:options="medicalBenefitOption"
|
||||
lazy-rules
|
||||
/>
|
||||
<q-select
|
||||
id="select-province"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
emit-value
|
||||
map-options
|
||||
v-model="checkup.insuranceCompany"
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
:label="$t('formDialogInputInsuranceCompany')"
|
||||
class="col-6"
|
||||
:options="insuranceCompanyOption"
|
||||
lazy-rules
|
||||
/>
|
||||
<VueDatePicker
|
||||
utc
|
||||
autoApply
|
||||
:teleport="true"
|
||||
v-model="checkup.coverageStartDate"
|
||||
:locale="'th'"
|
||||
:enableTimePicker="false"
|
||||
:disabled="readonly"
|
||||
class="col-3"
|
||||
>
|
||||
<template #year="{ value }">
|
||||
{{ value + 543 }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
id="input-birth-date"
|
||||
:label="$t('formDialogInputCoverageStartDate')"
|
||||
:dense="dense"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
:model-value="
|
||||
checkup.coverageStartDate
|
||||
? dateFormat(checkup.coverageStartDate)
|
||||
: ''
|
||||
"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
size="xs"
|
||||
name="mdi-calendar-blank-outline"
|
||||
class="cursor-pointer"
|
||||
color="positive"
|
||||
/>
|
||||
</template>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
v-if="checkup.coverageStartDate && !readonly"
|
||||
name="mdi-close"
|
||||
class="cursor-pointer"
|
||||
size="xs"
|
||||
@click="checkup.coverageStartDate = undefined"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</VueDatePicker>
|
||||
<VueDatePicker
|
||||
utc
|
||||
autoApply
|
||||
:teleport="true"
|
||||
v-model="checkup.coverageExpireDate"
|
||||
:locale="'th'"
|
||||
:enableTimePicker="false"
|
||||
:disabled="readonly"
|
||||
class="col-3"
|
||||
>
|
||||
<template #year="{ value }">
|
||||
{{ value + 543 }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
id="input-birth-date"
|
||||
:label="$t('formDialogInputCoverageExpiretDate')"
|
||||
:dense="dense"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
:model-value="
|
||||
checkup.coverageExpireDate
|
||||
? dateFormat(checkup.coverageExpireDate)
|
||||
: ''
|
||||
"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
size="xs"
|
||||
name="mdi-calendar-blank-outline"
|
||||
class="cursor-pointer"
|
||||
color="positive"
|
||||
/>
|
||||
</template>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
v-if="checkup.coverageExpireDate && !readonly"
|
||||
name="mdi-close"
|
||||
class="cursor-pointer"
|
||||
size="xs"
|
||||
@click="checkup.coverageExpireDate = undefined"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</VueDatePicker>
|
||||
</div>
|
||||
|
||||
<q-separator
|
||||
v-if="separator"
|
||||
class="col-12 q-mt-xl q-mb-md"
|
||||
style="padding-block: 0.5px"
|
||||
/>
|
||||
</q-tab-panel>
|
||||
</q-tab-panels>
|
||||
</div>
|
||||
|
||||
<q-tab-panels v-model="tab" style="padding-top: 0px">
|
||||
<q-tab-panel
|
||||
v-for="(checkup, index) in employeeCheckup"
|
||||
v-bind:key="index"
|
||||
:name="`tab${index}`"
|
||||
class="row col-12 items-start"
|
||||
style="overflow: auto; height: 50vh"
|
||||
>
|
||||
<div class="col-3 app-text-muted">
|
||||
• {{ $t(`formDialogTitleHealthCheck`) }}
|
||||
</div>
|
||||
<div class="col-9 row q-col-gutter-md">
|
||||
<q-input
|
||||
:dense="dense"
|
||||
:outlined="!readonly"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
class="col-6"
|
||||
:label="$t('formDialogInputCheckupRes')"
|
||||
v-model="checkup.checkupResult"
|
||||
/>
|
||||
<q-select
|
||||
id="select-province"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
emit-value
|
||||
map-options
|
||||
v-model="checkup.checkupType"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
:label="$t('formDialogInputCheckupType')"
|
||||
class="col-6"
|
||||
:options="addrOptions.provinceOps"
|
||||
lazy-rules
|
||||
/>
|
||||
<q-select
|
||||
id="select-province"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
emit-value
|
||||
map-options
|
||||
v-model="checkup.provinceId"
|
||||
option-value="id"
|
||||
option-label="nameEN"
|
||||
:label="$t('province')"
|
||||
class="col-3"
|
||||
:options="addrOptions.provinceOps"
|
||||
lazy-rules
|
||||
/>
|
||||
<q-input
|
||||
:dense="dense"
|
||||
:outlined="!readonly"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
class="col-9"
|
||||
:label="$t('formDialogInputHospital')"
|
||||
v-model="checkup.hospitalName"
|
||||
/>
|
||||
<q-input
|
||||
:label="$t('formDialogInputRemark')"
|
||||
:dense="dense"
|
||||
:outlined="!readonly"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
class="col-12"
|
||||
v-model="checkup.remark"
|
||||
type="textarea"
|
||||
/>
|
||||
<q-select
|
||||
id="select-province"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
emit-value
|
||||
map-options
|
||||
v-model="checkup.medicalBenefitScheme"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
:label="$t('formDialogInputMedicalBenefit')"
|
||||
class="col-6"
|
||||
:options="addrOptions.provinceOps"
|
||||
lazy-rules
|
||||
/>
|
||||
<q-select
|
||||
id="select-province"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
emit-value
|
||||
map-options
|
||||
v-model="checkup.insuranceCompany"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
:label="$t('formDialogInputInsuranceCompany')"
|
||||
class="col-6"
|
||||
:options="addrOptions.provinceOps"
|
||||
lazy-rules
|
||||
/>
|
||||
<VueDatePicker
|
||||
utc
|
||||
autoApply
|
||||
:teleport="true"
|
||||
v-model="checkup.coverageStartDate"
|
||||
:locale="'th'"
|
||||
:enableTimePicker="false"
|
||||
:disabled="readonly"
|
||||
class="col-3"
|
||||
>
|
||||
<template #year="{ value }">
|
||||
{{ value + 543 }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
id="input-birth-date"
|
||||
:label="$t('formDialogInputCoverageStartDate')"
|
||||
:dense="dense"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
:model-value="
|
||||
checkup.coverageStartDate
|
||||
? dateFormat(checkup.coverageStartDate)
|
||||
: ''
|
||||
"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
size="xs"
|
||||
name="mdi-calendar-blank-outline"
|
||||
class="cursor-pointer"
|
||||
color="positive"
|
||||
/>
|
||||
</template>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
v-if="checkup.coverageStartDate && !readonly"
|
||||
name="mdi-close"
|
||||
class="cursor-pointer"
|
||||
size="xs"
|
||||
@click="checkup.coverageStartDate = undefined"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</VueDatePicker>
|
||||
<VueDatePicker
|
||||
utc
|
||||
autoApply
|
||||
:teleport="true"
|
||||
v-model="checkup.coverageExpireDate"
|
||||
:locale="'th'"
|
||||
:enableTimePicker="false"
|
||||
:disabled="readonly"
|
||||
class="col-3"
|
||||
>
|
||||
<template #year="{ value }">
|
||||
{{ value + 543 }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
id="input-birth-date"
|
||||
:label="$t('formDialogInputCoverageExpiretDate')"
|
||||
:dense="dense"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
:model-value="
|
||||
checkup.coverageExpireDate
|
||||
? dateFormat(checkup.coverageExpireDate)
|
||||
: ''
|
||||
"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
size="xs"
|
||||
name="mdi-calendar-blank-outline"
|
||||
class="cursor-pointer"
|
||||
color="positive"
|
||||
/>
|
||||
</template>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
v-if="checkup.coverageExpireDate && !readonly"
|
||||
name="mdi-close"
|
||||
class="cursor-pointer"
|
||||
size="xs"
|
||||
@click="checkup.coverageExpireDate = undefined"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</VueDatePicker>
|
||||
</div>
|
||||
|
||||
<q-separator
|
||||
v-if="separator"
|
||||
class="col-12 q-mt-xl q-mb-md"
|
||||
style="padding-block: 0.5px"
|
||||
/>
|
||||
</q-tab-panel>
|
||||
</q-tab-panels>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
|
|
@ -89,7 +89,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
|
|||
hide-bottom-space
|
||||
class="col-6"
|
||||
:label="$t('formDialogInputFamilyBirthPlace')"
|
||||
v-model="employeeOther.birthPlace"
|
||||
v-model="employeeOther.fatherBirthPlace"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12" />
|
||||
|
|
@ -150,7 +150,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
|
|||
hide-bottom-space
|
||||
class="col-6"
|
||||
:label="$t('formDialogInputFamilyBirthPlace')"
|
||||
v-model="employeeOther.birthPlace"
|
||||
v-model="employeeOther.motherBirthPlace"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,23 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import { onMounted, reactive } from 'vue';
|
||||
import { onMounted } from 'vue';
|
||||
import { dateFormat } from 'src/utils/datetime';
|
||||
import useAddressStore, {
|
||||
District,
|
||||
Province,
|
||||
SubDistrict,
|
||||
} from 'src/stores/address';
|
||||
|
||||
const adrressStore = useAddressStore();
|
||||
|
||||
const addrOptions = reactive<{
|
||||
provinceOps: Province[];
|
||||
districtOps: District[];
|
||||
subDistrictOps: SubDistrict[];
|
||||
}>({
|
||||
provinceOps: [],
|
||||
districtOps: [],
|
||||
subDistrictOps: [],
|
||||
});
|
||||
|
||||
const passportType = defineModel<string>('passportType');
|
||||
const passportNumber = defineModel<string>('passportNumber');
|
||||
|
|
@ -28,6 +11,11 @@ const passportIssuingPlace = defineModel<string>('passportIssuingPlace');
|
|||
const previousPassportReference = defineModel<string>(
|
||||
'previousPassportReference',
|
||||
);
|
||||
const passportTypeOption =
|
||||
defineModel<{ label: string; value: string }[]>('passportTypeOption');
|
||||
const passportIssuingCountryOption = defineModel<
|
||||
{ label: string; value: string }[]
|
||||
>('passportIssuingCountryOption');
|
||||
|
||||
defineProps<{
|
||||
title?: string;
|
||||
|
|
@ -35,18 +23,7 @@ defineProps<{
|
|||
outlined?: boolean;
|
||||
readonly?: boolean;
|
||||
separator?: boolean;
|
||||
typeCustomer?: string;
|
||||
}>();
|
||||
|
||||
async function fetchProvince() {
|
||||
const result = await adrressStore.fetchProvince();
|
||||
|
||||
if (result) addrOptions.provinceOps = result;
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await fetchProvince();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -63,11 +40,11 @@ onMounted(async () => {
|
|||
emit-value
|
||||
map-options
|
||||
v-model="passportType"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
:label="$t('formDialogInputPassportType')"
|
||||
class="col-3"
|
||||
:options="addrOptions.provinceOps"
|
||||
:options="passportTypeOption"
|
||||
lazy-rules
|
||||
:rules="[
|
||||
(val: string) =>
|
||||
|
|
@ -130,11 +107,11 @@ onMounted(async () => {
|
|||
emit-value
|
||||
map-options
|
||||
v-model="passportIssuingCountry"
|
||||
option-value="id"
|
||||
option-label="nameEN"
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
:label="$t('formDialogInputPassportCountry')"
|
||||
class="col-3"
|
||||
:options="addrOptions.provinceOps"
|
||||
:options="passportIssuingCountryOption"
|
||||
lazy-rules
|
||||
:rules="[
|
||||
(val: string) =>
|
||||
|
|
|
|||
|
|
@ -28,6 +28,9 @@ const visaStayUntilDate = defineModel<Date | null>('visaStayUntilDate');
|
|||
const tm6Number = defineModel<string>('tm6Number');
|
||||
const entryDate = defineModel<Date | null>('entryDate');
|
||||
|
||||
const visaTypeOption =
|
||||
defineModel<{ label: string; value: string }[]>('visaTypeOption');
|
||||
|
||||
defineProps<{
|
||||
title?: string;
|
||||
dense?: boolean;
|
||||
|
|
@ -62,11 +65,11 @@ onMounted(async () => {
|
|||
emit-value
|
||||
map-options
|
||||
v-model="visaType"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
:label="$t('formDialogInputVisaType')"
|
||||
class="col-3"
|
||||
:options="addrOptions.provinceOps"
|
||||
:options="visaTypeOption"
|
||||
lazy-rules
|
||||
:rules="[
|
||||
(val: string) =>
|
||||
|
|
|
|||
|
|
@ -1,26 +1,15 @@
|
|||
<script setup lang="ts">
|
||||
import { onMounted, reactive, ref } from 'vue';
|
||||
import { dateFormat } from 'src/utils/datetime';
|
||||
import useAddressStore, {
|
||||
District,
|
||||
Province,
|
||||
SubDistrict,
|
||||
} from 'src/stores/address';
|
||||
import { EmployeeWorkCreate } from 'src/stores/employee/types';
|
||||
|
||||
const adrressStore = useAddressStore();
|
||||
|
||||
const addrOptions = reactive<{
|
||||
provinceOps: Province[];
|
||||
districtOps: District[];
|
||||
subDistrictOps: SubDistrict[];
|
||||
}>({
|
||||
provinceOps: [],
|
||||
districtOps: [],
|
||||
subDistrictOps: [],
|
||||
});
|
||||
|
||||
const employeeWork = defineModel<EmployeeWorkCreate[]>('employeeWork');
|
||||
const positionNameOption =
|
||||
defineModel<{ label: string; value: string }[]>('positionNameOption');
|
||||
const jobTypeOption =
|
||||
defineModel<{ label: string; value: string }[]>('jobTypeOption');
|
||||
const workplaceOption =
|
||||
defineModel<{ label: string; value: string }[]>('workplaceOption');
|
||||
|
||||
const tab = ref();
|
||||
|
||||
|
|
@ -30,15 +19,8 @@ defineProps<{
|
|||
outlined?: boolean;
|
||||
readonly?: boolean;
|
||||
separator?: boolean;
|
||||
typeCustomer?: string;
|
||||
}>();
|
||||
|
||||
async function fetchProvince() {
|
||||
const result = await adrressStore.fetchProvince();
|
||||
|
||||
if (result) addrOptions.provinceOps = result;
|
||||
}
|
||||
|
||||
function addData() {
|
||||
employeeWork.value?.push({
|
||||
workEndDate: null,
|
||||
|
|
@ -66,308 +48,309 @@ function removeData(index: number) {
|
|||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await fetchProvince();
|
||||
tab.value = 'tab0';
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="bordered-b full-width">
|
||||
<q-tabs
|
||||
v-model="tab"
|
||||
dense
|
||||
class="text-grey"
|
||||
active-class="active-tab"
|
||||
indicator-color="transparent"
|
||||
align="left"
|
||||
:breakpoint="0"
|
||||
>
|
||||
<q-btn
|
||||
@click="addData"
|
||||
flat
|
||||
class="app-text-muted"
|
||||
style="background-color: var(--_body-bg)"
|
||||
icon="mdi-plus"
|
||||
padding="8px 8px"
|
||||
:disable="readonly"
|
||||
:color="$q.dark.isActive ? 'primary' : ''"
|
||||
:class="tab !== 'tab0' ? 'bordered-r' : ''"
|
||||
/>
|
||||
<q-tab
|
||||
v-for="(tab, index) in employeeWork"
|
||||
<div>
|
||||
<div class="bordered-b full-width">
|
||||
<q-tabs
|
||||
v-model="tab"
|
||||
dense
|
||||
class="text-grey"
|
||||
active-class="active-tab"
|
||||
indicator-color="transparent"
|
||||
align="left"
|
||||
:breakpoint="0"
|
||||
>
|
||||
<q-btn
|
||||
@click="addData"
|
||||
flat
|
||||
class="app-text-muted"
|
||||
style="background-color: var(--_body-bg)"
|
||||
icon="mdi-plus"
|
||||
padding="8px 8px"
|
||||
:disable="readonly"
|
||||
:color="$q.dark.isActive ? 'primary' : ''"
|
||||
:class="tab !== 'tab0' ? 'bordered-r' : ''"
|
||||
/>
|
||||
<q-tab
|
||||
v-for="(tab, index) in employeeWork"
|
||||
v-bind:key="index"
|
||||
:name="`tab${index}`"
|
||||
class="content-tab text-capitalize"
|
||||
style="z-index: 999"
|
||||
>
|
||||
<div class="text-weight-medium row items-center">
|
||||
{{ $t('formDialogTabWork') + (index + 1) }}
|
||||
<q-btn
|
||||
v-if="!readonly && employeeWork?.length !== 1"
|
||||
round
|
||||
flat
|
||||
id="closeDialog"
|
||||
size="sm"
|
||||
icon="mdi-close"
|
||||
padding="xs"
|
||||
color="red"
|
||||
:class="{ dark: $q.dark.isActive }"
|
||||
@click.stop="removeData(index)"
|
||||
/>
|
||||
</div>
|
||||
</q-tab>
|
||||
</q-tabs>
|
||||
</div>
|
||||
|
||||
<q-tab-panels v-model="tab" style="padding-top: 0px">
|
||||
<q-tab-panel
|
||||
v-for="(work, index) in employeeWork"
|
||||
v-bind:key="index"
|
||||
:name="`tab${index}`"
|
||||
class="content-tab text-capitalize"
|
||||
style="z-index: 999"
|
||||
class="row col-12 items-start"
|
||||
style="overflow: auto; height: 50vh"
|
||||
>
|
||||
<div class="text-weight-medium row items-center">
|
||||
{{ $t('formDialogTabWork') + (index + 1) }}
|
||||
<q-btn
|
||||
v-if="!readonly && employeeWork?.length !== 1"
|
||||
round
|
||||
flat
|
||||
id="closeDialog"
|
||||
size="sm"
|
||||
icon="mdi-close"
|
||||
padding="xs"
|
||||
color="red"
|
||||
:class="{ dark: $q.dark.isActive }"
|
||||
@click.stop="removeData(index)"
|
||||
<div class="col-3 app-text-muted">• {{ $t(`workHistory`) }}</div>
|
||||
<div class="col-9 row q-col-gutter-md">
|
||||
<q-input
|
||||
for="input-ownerName"
|
||||
:dense="dense"
|
||||
:outlined="!readonly"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
class="col-6"
|
||||
:label="$t('formDialogInputOwnerName')"
|
||||
v-model="work.ownerName"
|
||||
/>
|
||||
<q-select
|
||||
id="select-positionName"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
emit-value
|
||||
map-options
|
||||
v-model="work.positionName"
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
:label="$t('formDialogInputJobPosition')"
|
||||
class="col-6"
|
||||
:options="positionNameOption"
|
||||
lazy-rules
|
||||
/>
|
||||
<q-select
|
||||
id="select-jobType"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
emit-value
|
||||
map-options
|
||||
v-model="work.jobType"
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
:label="$t('formDialogInputJobType')"
|
||||
class="col-6"
|
||||
:options="jobTypeOption"
|
||||
lazy-rules
|
||||
/>
|
||||
<q-select
|
||||
id="select-province"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
emit-value
|
||||
map-options
|
||||
v-model="work.workplace"
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
:label="$t('formDialogInputWorkPlace')"
|
||||
class="col-6"
|
||||
:options="workplaceOption"
|
||||
lazy-rules
|
||||
/>
|
||||
<q-input
|
||||
for="input-workEndDate"
|
||||
:label="$t('formDialogInputRemark')"
|
||||
:dense="dense"
|
||||
:outlined="!readonly"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
class="col-12"
|
||||
v-model="work.remark"
|
||||
type="textarea"
|
||||
/>
|
||||
<VueDatePicker
|
||||
id="date-picker-workEndDate"
|
||||
utc
|
||||
autoApply
|
||||
:teleport="true"
|
||||
v-model="work.workEndDate"
|
||||
:locale="'th'"
|
||||
:enableTimePicker="false"
|
||||
:disabled="readonly"
|
||||
class="col-6"
|
||||
>
|
||||
<template #year="{ value }">
|
||||
{{ value + 543 }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
id="input-birth-date"
|
||||
:label="$t('formDialogInputWorkUntil')"
|
||||
:dense="dense"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
:model-value="
|
||||
work.workEndDate ? dateFormat(work.workEndDate) : ''
|
||||
"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
size="xs"
|
||||
name="mdi-calendar-blank-outline"
|
||||
class="cursor-pointer"
|
||||
color="positive"
|
||||
/>
|
||||
</template>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
v-if="work.workEndDate && !readonly"
|
||||
name="mdi-close"
|
||||
class="cursor-pointer"
|
||||
size="xs"
|
||||
@click="work.workEndDate = undefined"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</VueDatePicker>
|
||||
<q-input
|
||||
for="input-workPermitNo"
|
||||
:dense="dense"
|
||||
:outlined="!readonly"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
class="col-6"
|
||||
:label="$t('formDialogInputWorkPermitNo')"
|
||||
v-model="work.workPermitNo"
|
||||
/>
|
||||
<VueDatePicker
|
||||
id="date-picker-workPermitIssuDate"
|
||||
utc
|
||||
autoApply
|
||||
:teleport="true"
|
||||
v-model="work.workPermitIssuDate"
|
||||
:locale="'th'"
|
||||
:enableTimePicker="false"
|
||||
:disabled="readonly"
|
||||
class="col-6"
|
||||
>
|
||||
<template #year="{ value }">
|
||||
{{ value + 543 }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
id="input-birth-date"
|
||||
:label="$t('formDialogInputWorkPermitIssueDate')"
|
||||
:dense="dense"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
:model-value="
|
||||
work.workPermitIssuDate
|
||||
? dateFormat(work.workPermitIssuDate)
|
||||
: ''
|
||||
"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
size="xs"
|
||||
name="mdi-calendar-blank-outline"
|
||||
class="cursor-pointer"
|
||||
color="positive"
|
||||
/>
|
||||
</template>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
v-if="work.workPermitIssuDate && !readonly"
|
||||
name="mdi-close"
|
||||
class="cursor-pointer"
|
||||
size="xs"
|
||||
@click="work.workPermitIssuDate = undefined"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</VueDatePicker>
|
||||
<VueDatePicker
|
||||
id="date-picker-workPermitExpireDate"
|
||||
utc
|
||||
autoApply
|
||||
:teleport="true"
|
||||
v-model="work.workPermitExpireDate"
|
||||
:locale="'th'"
|
||||
:enableTimePicker="false"
|
||||
:disabled="readonly"
|
||||
class="col-6"
|
||||
>
|
||||
<template #year="{ value }">
|
||||
{{ value + 543 }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
id="input-birth-date"
|
||||
:label="$t('formDialogInputWorkPermitExpireDate')"
|
||||
:dense="dense"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
:model-value="
|
||||
work.workPermitExpireDate
|
||||
? dateFormat(work.workPermitExpireDate)
|
||||
: ''
|
||||
"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
size="xs"
|
||||
name="mdi-calendar-blank-outline"
|
||||
class="cursor-pointer"
|
||||
color="positive"
|
||||
/>
|
||||
</template>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
v-if="work.workPermitExpireDate && !readonly"
|
||||
name="mdi-close"
|
||||
class="cursor-pointer"
|
||||
size="xs"
|
||||
@click="work.workPermitExpireDate = undefined"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</VueDatePicker>
|
||||
</div>
|
||||
</q-tab>
|
||||
</q-tabs>
|
||||
|
||||
<q-separator
|
||||
v-if="separator"
|
||||
class="col-12 q-mt-xl q-mb-md"
|
||||
style="padding-block: 0.5px"
|
||||
/>
|
||||
</q-tab-panel>
|
||||
</q-tab-panels>
|
||||
</div>
|
||||
|
||||
<q-tab-panels v-model="tab" style="padding-top: 0px">
|
||||
<q-tab-panel
|
||||
v-for="(work, index) in employeeWork"
|
||||
v-bind:key="index"
|
||||
:name="`tab${index}`"
|
||||
class="row col-12 items-start"
|
||||
style="overflow: auto; height: 50vh"
|
||||
>
|
||||
<div class="col-3 app-text-muted">• {{ $t(`workHistory`) }}</div>
|
||||
<div class="col-9 row q-col-gutter-md">
|
||||
<q-input
|
||||
for="input-ownerName"
|
||||
:dense="dense"
|
||||
:outlined="!readonly"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
class="col-6"
|
||||
:label="$t('formDialogInputOwnerName')"
|
||||
v-model="work.ownerName"
|
||||
/>
|
||||
<q-select
|
||||
id="select-positionName"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
emit-value
|
||||
map-options
|
||||
v-model="work.positionName"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
:label="$t('formDialogInputJobPosition')"
|
||||
class="col-6"
|
||||
:options="addrOptions.provinceOps"
|
||||
lazy-rules
|
||||
/>
|
||||
<q-select
|
||||
id="select-jobType"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
emit-value
|
||||
map-options
|
||||
v-model="work.jobType"
|
||||
option-value="id"
|
||||
option-label="nameEN"
|
||||
:label="$t('formDialogInputJobType')"
|
||||
class="col-6"
|
||||
:options="addrOptions.provinceOps"
|
||||
lazy-rules
|
||||
/>
|
||||
<q-select
|
||||
id="select-province"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
emit-value
|
||||
map-options
|
||||
v-model="work.workplace"
|
||||
option-value="id"
|
||||
option-label="nameEN"
|
||||
:label="$t('formDialogInputWorkPlace')"
|
||||
class="col-6"
|
||||
:options="addrOptions.provinceOps"
|
||||
lazy-rules
|
||||
/>
|
||||
<q-input
|
||||
for="input-workEndDate"
|
||||
:label="$t('formDialogInputRemark')"
|
||||
:dense="dense"
|
||||
:outlined="!readonly"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
class="col-12"
|
||||
v-model="work.remark"
|
||||
type="textarea"
|
||||
/>
|
||||
<VueDatePicker
|
||||
id="date-picker-workEndDate"
|
||||
utc
|
||||
autoApply
|
||||
:teleport="true"
|
||||
v-model="work.workEndDate"
|
||||
:locale="'th'"
|
||||
:enableTimePicker="false"
|
||||
:disabled="readonly"
|
||||
class="col-6"
|
||||
>
|
||||
<template #year="{ value }">
|
||||
{{ value + 543 }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
id="input-birth-date"
|
||||
:label="$t('formDialogInputWorkUntil')"
|
||||
:dense="dense"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
:model-value="
|
||||
work.workEndDate ? dateFormat(work.workEndDate) : ''
|
||||
"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
size="xs"
|
||||
name="mdi-calendar-blank-outline"
|
||||
class="cursor-pointer"
|
||||
color="positive"
|
||||
/>
|
||||
</template>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
v-if="work.workEndDate && !readonly"
|
||||
name="mdi-close"
|
||||
class="cursor-pointer"
|
||||
size="xs"
|
||||
@click="work.workEndDate = undefined"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</VueDatePicker>
|
||||
<q-input
|
||||
for="input-workPermitNo"
|
||||
:dense="dense"
|
||||
:outlined="!readonly"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
class="col-6"
|
||||
:label="$t('formDialogInputWorkPermitNo')"
|
||||
v-model="work.workPermitNo"
|
||||
/>
|
||||
<VueDatePicker
|
||||
id="date-picker-workPermitIssuDate"
|
||||
utc
|
||||
autoApply
|
||||
:teleport="true"
|
||||
v-model="work.workPermitIssuDate"
|
||||
:locale="'th'"
|
||||
:enableTimePicker="false"
|
||||
:disabled="readonly"
|
||||
class="col-6"
|
||||
>
|
||||
<template #year="{ value }">
|
||||
{{ value + 543 }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
id="input-birth-date"
|
||||
:label="$t('formDialogInputWorkPermitIssueDate')"
|
||||
:dense="dense"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
:model-value="
|
||||
work.workPermitIssuDate
|
||||
? dateFormat(work.workPermitIssuDate)
|
||||
: ''
|
||||
"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
size="xs"
|
||||
name="mdi-calendar-blank-outline"
|
||||
class="cursor-pointer"
|
||||
color="positive"
|
||||
/>
|
||||
</template>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
v-if="work.workPermitIssuDate && !readonly"
|
||||
name="mdi-close"
|
||||
class="cursor-pointer"
|
||||
size="xs"
|
||||
@click="work.workPermitIssuDate = undefined"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</VueDatePicker>
|
||||
<VueDatePicker
|
||||
id="date-picker-workPermitExpireDate"
|
||||
utc
|
||||
autoApply
|
||||
:teleport="true"
|
||||
v-model="work.workPermitExpireDate"
|
||||
:locale="'th'"
|
||||
:enableTimePicker="false"
|
||||
:disabled="readonly"
|
||||
class="col-6"
|
||||
>
|
||||
<template #year="{ value }">
|
||||
{{ value + 543 }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
id="input-birth-date"
|
||||
:label="$t('formDialogInputWorkPermitExpireDate')"
|
||||
:dense="dense"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
:model-value="
|
||||
work.workPermitExpireDate
|
||||
? dateFormat(work.workPermitExpireDate)
|
||||
: ''
|
||||
"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
size="xs"
|
||||
name="mdi-calendar-blank-outline"
|
||||
class="cursor-pointer"
|
||||
color="positive"
|
||||
/>
|
||||
</template>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
v-if="work.workPermitExpireDate && !readonly"
|
||||
name="mdi-close"
|
||||
class="cursor-pointer"
|
||||
size="xs"
|
||||
@click="work.workPermitExpireDate = undefined"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</VueDatePicker>
|
||||
</div>
|
||||
|
||||
<q-separator
|
||||
v-if="separator"
|
||||
class="col-12 q-mt-xl q-mb-md"
|
||||
style="padding-block: 0.5px"
|
||||
/>
|
||||
</q-tab-panel>
|
||||
</q-tab-panels>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue