chamomind/jws-frontend
chamomind/jws-frontend
7
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

feat: customer employee form (basic info & checkup)

Browse source
This commit is contained in:
puriphatt 2024-06-07 12:24:09 +00:00
parent 768686d41c
commit a6a0c5d1e1
7 changed files with 728 additions and 136 deletions
Download patch file Download diff file Expand all files Collapse all files

257
src/components/03_customer-management/FormEmployeeHealthCheck.vue Normal file
View file

@ -0,0 +1,257 @@
<script setup lang="ts">
import { onMounted, reactive } 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 checkupResult = defineModel<string>('checkupResult');
const checkupType = defineModel<string>('checkupType');
const provinceId = defineModel<string>('provinceId');
const hospitalName = defineModel<string>('hospitalName');
const remark = defineModel<string>('remark');
const medicalBenefitScheme = defineModel<string>('medicalBenefitScheme');
const insuranceCompany = defineModel<string>('insuranceCompany');
const coverageStartDate = defineModel<Date | null>('coverageStartDate');
const coverageExpireDate = defineModel<Date | null>('coverageExpireDate');
defineProps<{
title?: string;
dense?: boolean;
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>
<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="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="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="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="hospitalName"
/>
<q-input
:label="$t('formDialogInputRemark')"
:dense="dense"
:outlined="!readonly"
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-12"
v-model="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="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="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="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="coverageStartDate ? dateFormat(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="coverageStartDate && !readonly"
name="mdi-close"
class="cursor-pointer"
size="xs"
@click="coverageStartDate = undefined"
/>
</template>
</q-input>
</template>
</VueDatePicker>
<VueDatePicker
utc
autoApply
:teleport="true"
v-model="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="
coverageExpireDate ? dateFormat(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="coverageExpireDate && !readonly"
name="mdi-close"
class="cursor-pointer"
size="xs"
@click="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"
/>
</template>
<style scoped></style>