feat: employee form (passport, visa, work, other)

This commit is contained in:
puriphatt 2024-06-10 11:25:38 +00:00
parent 6057ce0c0f
commit 2b56c26e1b
7 changed files with 1542 additions and 266 deletions

View file

@ -0,0 +1,163 @@
<script setup lang="ts">
import { EmployeeOtherCreate } from 'stores/employee/types';
defineProps<{
dense?: boolean;
outlined?: boolean;
readonly?: boolean;
separator?: boolean;
employee?: boolean;
}>();
const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
</script>
<template>
<div class="col-12" v-if="employeeOther">
<div class="col-12 app-text-muted row items-center q-mb-md">
{{ $t('formDialogTitleFamilyHistory') }}
</div>
<div class="col-12 row q-col-gutter-y-md">
<div class="col-3 q-pl-xl"></div>
<div class="col-9 row q-col-gutter-md">
<q-input
for="input-citizenId"
:dense="dense"
:outlined="readonly ? false : outlined"
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
:label="$t('formDialogInputCitizenId')"
class="col"
v-model="employeeOther.citizenId"
lazy-rules
/>
</div>
<div class="col-3 q-pl-xl app-text-muted">
{{ $t('formDialogTitleFamilyHistoryDad') }}
</div>
<div class="col-9 row q-col-gutter-md">
<q-input
for="input-father-first-name"
:dense="dense"
:outlined="readonly ? false : outlined"
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-3"
:label="$t('formDialogInputFirstName')"
v-model="employeeOther.fatherFirstName"
/>
<q-input
for="input-father-last-name"
:dense="dense"
:outlined="readonly ? false : outlined"
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-3"
:label="$t('formDialogInputLastName')"
v-model="employeeOther.fatherLastName"
/>
<q-input
for="input-father-first-name-en"
:dense="dense"
:outlined="readonly ? false : outlined"
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-3"
:label="$t('formDialogInputFirstNameEN')"
v-model="employeeOther.fatherFirstNameEN"
/>
<q-input
for="input-father-last-name-en"
:dense="dense"
:outlined="readonly ? false : outlined"
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-3"
:label="$t('formDialogInputLastNameEN')"
v-model="employeeOther.fatherLastNameEN"
/>
<q-input
for="input-father-birthplace"
:dense="dense"
:outlined="readonly ? false : outlined"
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-6"
:label="$t('formDialogInputFamilyBirthPlace')"
v-model="employeeOther.birthPlace"
/>
</div>
<div class="col-12" />
<div class="col-3 q-pl-xl app-text-muted">
{{ $t('formDialogTitleFamilyHistoryMom') }}
</div>
<div class="col-9 row q-col-gutter-md">
<q-input
for="input-mother-first-name"
:dense="dense"
:outlined="readonly ? false : outlined"
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-3"
:label="$t('formDialogInputFirstName')"
v-model="employeeOther.motherFirstName"
/>
<q-input
for="input-mother-last-name"
:dense="dense"
:outlined="readonly ? false : outlined"
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-3"
:label="$t('formDialogInputLastName')"
v-model="employeeOther.motherLastName"
/>
<q-input
for="input-mother-first-name-en"
:dense="dense"
:outlined="readonly ? false : outlined"
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-3"
:label="$t('formDialogInputFirstNameEN')"
v-model="employeeOther.motherFirstNameEN"
/>
<q-input
for="input-mother-last-name-en"
:dense="dense"
:outlined="readonly ? false : outlined"
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-3"
:label="$t('formDialogInputLastNameEN')"
v-model="employeeOther.motherLastNameEN"
/>
<q-input
for="input-mother-birthplace"
:dense="dense"
:outlined="readonly ? false : outlined"
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-6"
:label="$t('formDialogInputFamilyBirthPlace')"
v-model="employeeOther.birthPlace"
/>
</div>
</div>
</div>
<q-separator
v-if="separator"
class="col-12 q-mb-md"
style="padding-block: 0.5px; margin-top: 32px"
/>
</template>