152 lines
4.3 KiB
Vue
152 lines
4.3 KiB
Vue
<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="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="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="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="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="readonly"
|
|
hide-bottom-space
|
|
class="col-3"
|
|
:label="$t('formDialogInputLastNameEN')"
|
|
v-model="employeeOther.fatherLastNameEN"
|
|
/>
|
|
<q-input
|
|
for="input-father-birthplace"
|
|
:dense="dense"
|
|
outlined
|
|
:readonly="readonly"
|
|
hide-bottom-space
|
|
class="col-6"
|
|
:label="$t('formDialogInputFamilyBirthPlace')"
|
|
v-model="employeeOther.fatherBirthPlace"
|
|
/>
|
|
</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="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="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="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="readonly"
|
|
hide-bottom-space
|
|
class="col-3"
|
|
:label="$t('formDialogInputLastNameEN')"
|
|
v-model="employeeOther.motherLastNameEN"
|
|
/>
|
|
<q-input
|
|
for="input-mother-birthplace"
|
|
:dense="dense"
|
|
outlined
|
|
:readonly="readonly"
|
|
hide-bottom-space
|
|
class="col-6"
|
|
:label="$t('formDialogInputFamilyBirthPlace')"
|
|
v-model="employeeOther.motherBirthPlace"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<q-separator
|
|
v-if="separator"
|
|
class="col-12 q-mb-md"
|
|
style="padding-block: 0.5px; margin-top: 32px"
|
|
/>
|
|
</template>
|