340 lines
9.3 KiB
Vue
340 lines
9.3 KiB
Vue
<script setup lang="ts">
|
|
import { onMounted, reactive, ref } from 'vue';
|
|
import useAddressStore, {
|
|
District,
|
|
Province,
|
|
SubDistrict,
|
|
} from 'stores/address';
|
|
import { EmployeeCheckupCreate } from 'stores/employee/types';
|
|
import { selectFilterOptionRefMod } from 'stores/utils';
|
|
import { QSelect } from 'quasar';
|
|
import DatePicker from '../shared/DatePicker.vue';
|
|
|
|
import SelectInput from 'components/shared/SelectInput.vue';
|
|
import {
|
|
AddButton,
|
|
EditButton,
|
|
DeleteButton,
|
|
SaveButton,
|
|
UndoButton,
|
|
} from 'components/button';
|
|
|
|
const adrressStore = useAddressStore();
|
|
|
|
const addrOptions = reactive<{
|
|
provinceOps: Province[];
|
|
districtOps: District[];
|
|
subDistrictOps: SubDistrict[];
|
|
}>({
|
|
provinceOps: [],
|
|
districtOps: [],
|
|
subDistrictOps: [],
|
|
});
|
|
|
|
const currentIndex = defineModel<number>('currentIndex');
|
|
const employeeCheckup = defineModel<EmployeeCheckupCreate[]>('employeeCheckup');
|
|
|
|
const checkupResultsOption = defineModel<{ label: string; value: string }[]>(
|
|
'checkupResultsOption',
|
|
{ required: true },
|
|
);
|
|
const checkupTypeOption = defineModel<{ label: string; value: string }[]>(
|
|
'checkupTypeOption',
|
|
{ required: true },
|
|
);
|
|
const medicalBenefitOption = defineModel<{ label: string; value: string }[]>(
|
|
'medicalBenefitOption',
|
|
{ required: true },
|
|
);
|
|
const insuranceCompanyOption = defineModel<{ label: string; value: string }[]>(
|
|
'insuranceCompanyOption',
|
|
{ required: true },
|
|
);
|
|
|
|
const tab = ref();
|
|
|
|
withDefaults(
|
|
defineProps<{
|
|
title?: string;
|
|
dense?: boolean;
|
|
outlined?: boolean;
|
|
readonly?: boolean;
|
|
typeCustomer?: string;
|
|
prefixId: string;
|
|
showBtnSave?: boolean;
|
|
hideAction?: boolean;
|
|
}>(),
|
|
{
|
|
hideAction: false,
|
|
showBtnSave: false,
|
|
},
|
|
);
|
|
|
|
defineEmits<{
|
|
(e: 'save', index: number): void;
|
|
(e: 'edit', index: number): void;
|
|
(e: 'delete', index: number): void;
|
|
(e: 'undo', index: number): void;
|
|
}>();
|
|
|
|
async function fetchProvince() {
|
|
const result = await adrressStore.fetchProvince();
|
|
|
|
if (result) addrOptions.provinceOps = result;
|
|
|
|
provinceFilter = selectFilterOptionRefMod(
|
|
ref(addrOptions.provinceOps),
|
|
provinceOptions,
|
|
'name',
|
|
);
|
|
}
|
|
|
|
function removeData(index: number) {
|
|
if (!employeeCheckup.value) return;
|
|
if (employeeCheckup.value.length === 1) return;
|
|
|
|
employeeCheckup.value.splice(index, 1);
|
|
|
|
if (index) if (tab.value === `tab${index}`) tab.value = `tab${index - 1}`;
|
|
if (tab.value === `tab${employeeCheckup.value.length}`)
|
|
tab.value = `tab${employeeCheckup.value.length - 1}`;
|
|
}
|
|
|
|
onMounted(async () => {
|
|
await fetchProvince();
|
|
tab.value = 'tab0';
|
|
});
|
|
|
|
const provinceOptions = ref<Record<string, unknown>[]>([]);
|
|
let provinceFilter: (
|
|
value: string,
|
|
update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
|
|
) => void;
|
|
|
|
const checkupResultsOptions = ref<Record<string, unknown>[]>([]);
|
|
const checkupResultsFilter = selectFilterOptionRefMod(
|
|
checkupResultsOption,
|
|
checkupResultsOptions,
|
|
'label',
|
|
);
|
|
|
|
const checkupTypeOptions = ref<Record<string, unknown>[]>([]);
|
|
const checkupTypeFilter = selectFilterOptionRefMod(
|
|
checkupTypeOption,
|
|
checkupTypeOptions,
|
|
'label',
|
|
);
|
|
|
|
const medicalBenefitOptions = ref<Record<string, unknown>[]>([]);
|
|
const medicalBenefitFilter = selectFilterOptionRefMod(
|
|
medicalBenefitOption,
|
|
medicalBenefitOptions,
|
|
'label',
|
|
);
|
|
|
|
const insuranceCompanyOptions = ref<Record<string, unknown>[]>([]);
|
|
const insuranceCompanyFilter = selectFilterOptionRefMod(
|
|
insuranceCompanyOption,
|
|
insuranceCompanyOptions,
|
|
'label',
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="row">
|
|
<div
|
|
v-for="(checkup, index) in employeeCheckup"
|
|
v-bind:key="index"
|
|
class="col-12 row q-col-gutter-sm"
|
|
:class="{ 'q-pt-lg': index !== 0 }"
|
|
:id="`${prefixId}-checkup-${index}`"
|
|
>
|
|
<q-separator
|
|
v-if="index > 0"
|
|
class="full-width"
|
|
style="padding-block: 0.1px"
|
|
spaced="lg"
|
|
/>
|
|
<span class="col-12 flex justify-between items-center">
|
|
{{ $t('general.times', { number: index + 1 }) }}
|
|
<div class="row items-center" v-if="!hideAction">
|
|
<UndoButton
|
|
v-if="!readonly && !!checkup.id && !checkup.statusSave"
|
|
id="btn-info-health-undo"
|
|
icon-only
|
|
@click="$emit('undo', index)"
|
|
type="button"
|
|
:disabled="!(currentIndex === -1) && !(currentIndex === index)"
|
|
/>
|
|
<SaveButton
|
|
icon-only
|
|
id="btn-info-health-save"
|
|
v-if="!readonly && !checkup.statusSave"
|
|
@click="$emit('save', index)"
|
|
type="submit"
|
|
:disabled="!(currentIndex === -1) && !(currentIndex === index)"
|
|
/>
|
|
<EditButton
|
|
icon-only
|
|
id="btn-info-health-edit"
|
|
v-if="!readonly && checkup.statusSave"
|
|
@click="$emit('edit', index)"
|
|
type="button"
|
|
:disabled="!(currentIndex === -1) && !(currentIndex === index)"
|
|
/>
|
|
<DeleteButton
|
|
icon-only
|
|
id="btn-info-health-delete"
|
|
v-if="!readonly && !!checkup.id && checkup.statusSave"
|
|
@click="$emit('delete', index)"
|
|
type="button"
|
|
:disabled="!(currentIndex === -1) && !(currentIndex === index)"
|
|
/>
|
|
</div>
|
|
</span>
|
|
|
|
<q-select
|
|
outlined
|
|
clearable
|
|
use-input
|
|
fill-input
|
|
emit-value
|
|
map-options
|
|
hide-selected
|
|
hide-bottom-space
|
|
class="col-6"
|
|
input-debounce="0"
|
|
option-value="value"
|
|
option-label="label"
|
|
v-model="checkup.checkupResult"
|
|
:dense="dense"
|
|
:readonly="readonly || checkup.statusSave"
|
|
:options="checkupResultsOptions"
|
|
:hide-dropdown-icon="readonly || checkup.statusSave"
|
|
:for="`${prefixId}-select-health-checkresult`"
|
|
:label="$t('customerEmployee.formHealthCheck.result')"
|
|
@filter="checkupResultsFilter"
|
|
>
|
|
<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-select
|
|
outlined
|
|
clearable
|
|
use-input
|
|
fill-input
|
|
emit-value
|
|
map-options
|
|
hide-selected
|
|
hide-bottom-space
|
|
class="col-6"
|
|
input-debounce="0"
|
|
option-value="value"
|
|
option-label="label"
|
|
v-model="checkup.checkupType"
|
|
:dense="dense"
|
|
:readonly="readonly || checkup.statusSave"
|
|
:options="checkupTypeOptions"
|
|
:hide-dropdown-icon="readonly || checkup.statusSave"
|
|
:for="`${prefixId}-select-checkup-type`"
|
|
:label="$t('customerEmployee.formHealthCheck.checkupType')"
|
|
@filter="checkupTypeFilter"
|
|
>
|
|
<template v-slot:no-option>
|
|
<q-item>
|
|
<q-item-section class="text-grey">
|
|
{{ $t('general.noData') }}
|
|
</q-item-section>
|
|
</q-item>
|
|
</template>
|
|
</q-select>
|
|
<!-- @filter="provinceFilter" -->
|
|
<q-input
|
|
:dense="dense"
|
|
outlined
|
|
:readonly="readonly || checkup.statusSave"
|
|
hide-bottom-space
|
|
class="col-12"
|
|
:label="$t('customerEmployee.formHealthCheck.hospital')"
|
|
v-model="checkup.hospitalName"
|
|
:for="`${prefixId}-input-hospital`"
|
|
/>
|
|
|
|
<div class="col-md col-6">
|
|
<DatePicker
|
|
v-model="checkup.coverageStartDate"
|
|
:id="`${prefixId}-input-coverage-start-date`"
|
|
:readonly="readonly || checkup.statusSave"
|
|
clearable
|
|
/>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<DatePicker
|
|
:label="$t('customerEmployee.formHealthCheck.coverageExpireDate')"
|
|
v-model="checkup.coverageExpireDate"
|
|
:id="`${prefixId}-input-coverage-expire-date`"
|
|
:readonly="readonly || checkup.statusSave"
|
|
:disabled-dates="
|
|
(date: Date) =>
|
|
date.getTime() <
|
|
((checkup.coverageStartDate &&
|
|
new Date(checkup.coverageStartDate).getTime()) ||
|
|
Date.now())
|
|
"
|
|
clearable
|
|
/>
|
|
</div>
|
|
|
|
<q-select
|
|
outlined
|
|
clearable
|
|
use-input
|
|
fill-input
|
|
emit-value
|
|
map-options
|
|
hide-selected
|
|
hide-bottom-space
|
|
class="col-md-6 col-12"
|
|
input-debounce="0"
|
|
option-value="value"
|
|
option-label="label"
|
|
v-model="checkup.medicalBenefitScheme"
|
|
:dense="dense"
|
|
:readonly="readonly || checkup.statusSave"
|
|
:hide-dropdown-icon="readonly || checkup.statusSave"
|
|
:options="medicalBenefitOptions"
|
|
:for="`${prefixId}-select-province`"
|
|
:label="$t('customerEmployee.formHealthCheck.medicalBenefit')"
|
|
@filter="medicalBenefitFilter"
|
|
>
|
|
<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
|
|
:label="$t('general.remark')"
|
|
:dense="dense"
|
|
outlined
|
|
:readonly="readonly || checkup.statusSave"
|
|
hide-bottom-space
|
|
class="col-12"
|
|
v-model="checkup.remark"
|
|
type="textarea"
|
|
:for="`${prefixId}-input-remark`"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|