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

refactor: add FormEmployeePassport and tab

Browse source
This commit is contained in:
Net 2024-08-06 15:02:01 +07:00
parent 00d0e698a6
commit 39dfba95b1
1 changed files with 112 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

116
src/pages/03_customer-management/MainPage.vue
View file

@ -6,7 +6,6 @@ import { useRoute, useRouter } from 'vue-router';
import { getUserId, getRole } from 'src/services/keycloak';
import { calculateAge, dateFormat } from 'src/utils/datetime';
import useCustomerStore from 'stores/customer';
import useEmployeeStore from 'stores/employee';
import useMyBranchStore from 'stores/my-branch';
@ -32,6 +31,8 @@ import FormBasicInfo from './components/FormBasicInfo.vue';
import FormBranch from './components/FormBranch.vue';
import CustomerInfoComponent from './components/CustomerBranch.vue';
import FormAddress from 'src/components/02_personnel-management/FormAddress.vue';
import FormEmployeePassport from 'src/components/03_customer-management/FormEmployeePassport.vue';
import FormEmployeeVisa from 'src/components/03_customer-management/FormEmployeeVisa.vue';
import {
columnsCustomer,
@ -1966,6 +1967,7 @@ function createEmployeeForm() {
employee
separator
:title="$t('personalInfo')"
v-model:open="employeeFormState.dialogModal"
v-model:firstName="currentFromDataEmployee.firstName"
v-model:lastName="currentFromDataEmployee.lastName"
v-model:firstNameEN="currentFromDataEmployee.firstNameEN"
@ -2094,9 +2096,26 @@ function createEmployeeForm() {
<div class="q-mx-lg q-mt-lg">
<ProfileBanner
active
hideFade
:img="employeeFormState.profileUrl"
useToggle
color="white"
icon="mdi-account-plus"
bgColor="linear-gradient(135deg, rgba(43,137,223,1) 0%, rgba(230,51,81,1) 100%)"
v-model:current-tab="employeeFormState.currentTab"
v-model:cover-url="employeeFormState.profileUrl"
fallbackCover="images/employee-banner.png"
:img="`images/employee-avatar.png`"
:tabs-list="[
{ name: 'personalInfo', label: 'personalInfo' },
{ name: 'healthCheck', label: 'healthCheck' },
{ name: 'workHistory', label: 'workHistory' },
{ name: 'other', label: 'other' },
]"
:menu="formMenuIconEmployee"
:toggleTitle="$t('formDialogTitleUserStatus')"
:hideFade="
employeeFormState.profileUrl === '' ||
employeeFormState.profileUrl === undefined
"
/>
</div>
<div
@ -2137,7 +2156,10 @@ function createEmployeeForm() {
/>
</div>
</div>
<div class="col-10 q-pa-md q-gutter-y-xl">
<div
v-if="employeeFormState.currentTab === 'personalInfo'"
class="col-10 q-pa-md q-gutter-y-xl"
>
<BasicInformation
id="form-information"
prefix-id="drawer-info-employee"
@ -2173,6 +2195,7 @@ function createEmployeeForm() {
/>
<FormAddress
id="form-personal-address"
employee
v-model:address="currentFromDataEmployee.address"
v-model:addressEN="currentFromDataEmployee.addressEN"
v-model:provinceId="currentFromDataEmployee.provinceId"
@ -2183,6 +2206,91 @@ function createEmployeeForm() {
prefix-id="drawer-info-personnel"
dense
/>
<FormEmployeePassport
prefix-id="drawer-info-employee"
id="form-passport"
dense
outlined
separator
:title="$t('formDialogTitlePassport')"
:readonly="!employeeFormState.isEmployeeEdit"
v-model:passport-type="currentFromDataEmployee.passportType"
v-model:passport-number="currentFromDataEmployee.passportNumber"
v-model:passport-issue-date="
currentFromDataEmployee.passportIssueDate
"
v-model:passport-expiry-date="
currentFromDataEmployee.passportExpiryDate
"
v-model:passport-issuing-place="
currentFromDataEmployee.passportIssuingPlace
"
v-model:passport-issuing-country="
currentFromDataEmployee.passportIssuingCountry
"
v-model:previous-passport-reference="
currentFromDataEmployee.previousPassportReference
"
/>
<FormEmployeeVisa
prefix-id="drawer-info-employee"
id="form-visa"
dense
outlined
:title="$t(`formDialogTitleVisa`)"
:readonly="!employeeFormState.isEmployeeEdit"
v-model:visa-type="currentFromDataEmployee.visaType"
v-model:visa-number="currentFromDataEmployee.visaNumber"
v-model:visa-issue-date="currentFromDataEmployee.visaIssueDate"
v-model:visa-expiry-date="currentFromDataEmployee.visaExpiryDate"
v-model:visa-issuing-place="
currentFromDataEmployee.visaIssuingPlace
"
v-model:visa-stay-until-date="
currentFromDataEmployee.visaStayUntilDate
"
v-model:tm6-number="currentFromDataEmployee.tm6Number"
v-model:entry-date="currentFromDataEmployee.entryDate"
/>
</div>
<div class="col-10 q-pa-md q-gutter-y-xl" v-else>
<FormEmployeeHealthCheck
v-if="employeeFormState.currentTab === 'healthCheck'"
id="form-checkup"
prefix-id="form-employee"
dense
outlined
v-model:employeeCheckup="currentFromDataEmployee.employeeCheckup"
v-model:checkupTypeOption="optionStore.globalOption.insurancePlace"
v-model:medicalBenefitOption="
optionStore.globalOption.typeInsurance
"
v-model:insuranceCompanyOption="
optionStore.globalOption.insurancePlace
"
/>
<FormEmployeeWorkHistory
v-if="employeeFormState.currentTab === 'workHistory'"
id="form-work-history"
prefix-id="form-employee"
dense
outlined
v-model:employee-work="currentFromDataEmployee.employeeWork"
v-model:position-name-option="optionStore.globalOption.position"
v-model:job-type-option="optionStore.globalOption.businessType"
v-model:workplace-option="optionStore.globalOption.area"
/>
<FormEmployeeOther
v-if="employeeFormState.currentTab === 'other'"
id="form-other"
prefix-id="form-employee"
dense
outlined
v-model:employee-other="currentFromDataEmployee.employeeOtherInfo"
/>
</div>
</div>
</div>