feat: employee form (passport, visa, work, other)
This commit is contained in:
puriphatt
parent
6057ce0c0f
commit
2b56c26e1b
7 changed files with 1542 additions and 266 deletions
|
|
@ -4,7 +4,9 @@ import { storeToRefs } from 'pinia';
|
|||
|
||||
import { Pagination } from 'src/stores/types';
|
||||
import useCustomerStore from 'src/stores/customer';
|
||||
import useEmployeeStore from 'src/stores/employee';
|
||||
|
||||
import PersonCard from 'components/home/PersonCard.vue';
|
||||
import UsersDetailCardComponent from 'src/components/UsersDetailCardComponent.vue';
|
||||
import SelectorList from 'components/SelectorList.vue';
|
||||
import StatCardComponent from 'components/StatCardComponent.vue';
|
||||
|
|
@ -32,11 +34,17 @@ import {
|
|||
CustomerBranch,
|
||||
CustomerBranchCreate,
|
||||
} from 'stores/customer/types';
|
||||
import { EmployeeCreate } from 'stores/employee/types';
|
||||
import { onMounted } from 'vue';
|
||||
|
||||
import FormPerson from 'src/components/02_personnel-management/FormPerson.vue';
|
||||
import FormEmployeeHealthCheck from 'src/components/03_customer-management/FormEmployeeHealthCheck.vue';
|
||||
import FormEmployeeWorkHistory from 'src/components/03_customer-management/FormEmployeeWorkHistory.vue';
|
||||
import FormEmployeeOther from 'src/components/03_customer-management/FormEmployeeOther.vue';
|
||||
import FormEmployeePassport from 'src/components/03_customer-management/FormEmployeePassport.vue';
|
||||
import FormEmployeeVisa from 'src/components/03_customer-management/FormEmployeeVisa.vue';
|
||||
|
||||
import { dialog } from 'src/stores/utils';
|
||||
import { dialog, calculateAge } from 'src/stores/utils';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
const { t, locale } = useI18n();
|
||||
|
|
@ -51,6 +59,7 @@ const {
|
|||
deleteBranchById,
|
||||
editBranchById,
|
||||
} = userCustomer;
|
||||
const employeeStore = useEmployeeStore();
|
||||
const formData = ref<CustomerCreate>({
|
||||
status: 'CREATED',
|
||||
customerType: 'CORP',
|
||||
|
|
@ -97,32 +106,84 @@ const fieldSelectedCustomer = ref<{ label: string; value: string }>({
|
|||
|
||||
const formDataEmployeeSameAddr = ref(false);
|
||||
const formDataEmployeeTab = ref('personalInfo');
|
||||
const formDataEmployee = ref({
|
||||
employerId: '',
|
||||
employeeId: '',
|
||||
const formDataEmployee = ref<EmployeeCreate>({
|
||||
image: new File([''], 'dummy.jpg'),
|
||||
customerBranchId: '0b16ee4a-2ff3-40b8-b09d-c7589422d03d',
|
||||
nrcNo: '',
|
||||
dateOfBirth: new Date(),
|
||||
gender: '',
|
||||
nationality: '',
|
||||
|
||||
firstName: '',
|
||||
firstNameEN: '',
|
||||
lastName: '',
|
||||
lastNameEN: '',
|
||||
nationality: '',
|
||||
gender: '',
|
||||
birthDate: null,
|
||||
address: '',
|
||||
|
||||
addressEN: '',
|
||||
provinceId: '',
|
||||
districtId: '',
|
||||
subDistrictId: '',
|
||||
address: '',
|
||||
zipCode: '',
|
||||
checkupResult: '',
|
||||
checkupType: '',
|
||||
provinceCheckId: '',
|
||||
hospitalName: '',
|
||||
remark: '',
|
||||
insuranceCompany: '',
|
||||
medicalBenefitScheme: '',
|
||||
coverageStartDate: null,
|
||||
coverageExpireDate: null,
|
||||
|
||||
passportType: '',
|
||||
passportNumber: '',
|
||||
passportIssueDate: new Date(),
|
||||
passportExpiryDate: new Date(),
|
||||
passportIssuingCountry: '',
|
||||
passportIssuingPlace: '',
|
||||
previousPassportReference: '',
|
||||
|
||||
visaType: '',
|
||||
visaNumber: '',
|
||||
visaIssueDate: new Date(),
|
||||
visaExpiryDate: new Date(),
|
||||
visaIssuingPlace: '',
|
||||
visaStayUntilDate: new Date(),
|
||||
tm6Number: '',
|
||||
entryDate: new Date(),
|
||||
workerStatus: '',
|
||||
|
||||
subDistrictId: '',
|
||||
districtId: '',
|
||||
provinceId: '',
|
||||
|
||||
employeeWork: [
|
||||
// {
|
||||
// workEndDate: undefined,
|
||||
// workPermitExpireDate: undefined,
|
||||
// workPermitIssuDate: undefined,
|
||||
// workPermitNo: '',
|
||||
// workplace: '',
|
||||
// jobType: '',
|
||||
// positionName: '',
|
||||
// ownerName: '',
|
||||
// remark: '',
|
||||
// },
|
||||
],
|
||||
employeeCheckup: [
|
||||
// {
|
||||
// coverageExpireDate: undefined,
|
||||
// coverageStartDate: undefined,
|
||||
// insuranceCompany: '',
|
||||
// medicalBenefitScheme: '',
|
||||
// remark: '',
|
||||
// hospitalName: '',
|
||||
// provinceId: '',
|
||||
// checkupResult: '',
|
||||
// checkupType: '',
|
||||
// },
|
||||
],
|
||||
employeeOtherInfo: {
|
||||
birthPlace: '',
|
||||
citizenId: '',
|
||||
fatherFirstName: '',
|
||||
fatherLastName: '',
|
||||
fatherFirstNameEN: '',
|
||||
fatherLastNameEN: '',
|
||||
|
||||
motherFirstName: '',
|
||||
motherLastName: '',
|
||||
motherFirstNameEN: '',
|
||||
motherLastNameEN: '',
|
||||
},
|
||||
});
|
||||
|
||||
const indexTab = ref<number>(0);
|
||||
|
|
@ -164,6 +225,7 @@ const inputFile = (() => {
|
|||
})();
|
||||
|
||||
const listCustomer = ref<(Customer & { branch: CustomerBranch[] })[]>();
|
||||
const listEmployee = ref();
|
||||
|
||||
const itemCard = [
|
||||
{
|
||||
|
|
@ -231,7 +293,10 @@ const selectorList = computed(() => [
|
|||
(statsCustomerType.value?.CORP ?? 0) +
|
||||
(statsCustomerType.value?.PERS ?? 0),
|
||||
},
|
||||
{ label: 'EMPLOYEE', count: 0 },
|
||||
{
|
||||
label: 'EMPLOYEE',
|
||||
count: listEmployee.value ? listEmployee.value.length : 0,
|
||||
},
|
||||
]);
|
||||
|
||||
const customerType = ref<
|
||||
|
|
@ -370,6 +435,12 @@ async function onSubmit() {
|
|||
const resultList = await fetchList({ includeBranch: true });
|
||||
|
||||
if (resultList) listCustomer.value = resultList.result;
|
||||
|
||||
if (selectorLabel.value === 'EMPLOYEE') {
|
||||
await employeeStore.create(formDataEmployee.value);
|
||||
const resultList = await employeeStore.fetchList();
|
||||
if (resultList) listEmployee.value = resultList.result;
|
||||
}
|
||||
}
|
||||
|
||||
async function onSubmitCustomerBranch() {
|
||||
|
|
@ -420,6 +491,24 @@ async function onSubmitEdit(id: string) {
|
|||
clearForm();
|
||||
}
|
||||
|
||||
async function onDelete(id: string) {
|
||||
if (!id) return;
|
||||
dialog({
|
||||
color: 'negative',
|
||||
icon: 'mdi-alert',
|
||||
title: t('deleteConfirmTitle'),
|
||||
actionText: t('ok'),
|
||||
persistent: true,
|
||||
message: t('deleteConfirmMessage'),
|
||||
action: async () => {
|
||||
await employeeStore.deleteById(id);
|
||||
const resultList = await employeeStore.fetchList();
|
||||
if (resultList) listEmployee.value = resultList.result;
|
||||
},
|
||||
cancel: () => {},
|
||||
});
|
||||
}
|
||||
|
||||
async function submitBranch() {
|
||||
if (formData.value.customerBranch?.[0]) {
|
||||
await editBranchById(currentBranchId.value, {
|
||||
|
|
@ -487,6 +576,7 @@ onMounted(async () => {
|
|||
const resultStats = await getStatsCustomer();
|
||||
|
||||
const resultList = await fetchList({ includeBranch: true });
|
||||
const resultListEmployee = await employeeStore.fetchList();
|
||||
|
||||
if (resultStats) statsCustomerType.value = resultStats;
|
||||
|
||||
|
|
@ -501,6 +591,14 @@ onMounted(async () => {
|
|||
}
|
||||
|
||||
if (resultList) listCustomer.value = resultList.result;
|
||||
if (resultListEmployee) listEmployee.value = resultListEmployee.result;
|
||||
});
|
||||
|
||||
watch(locale, () => {
|
||||
fieldSelectedCustomer.value = {
|
||||
label: t(`${fieldSelectedCustomer.value.label}`),
|
||||
value: fieldSelectedCustomer.value?.value,
|
||||
};
|
||||
});
|
||||
|
||||
watch(locale, () => {
|
||||
|
|
@ -634,7 +732,13 @@ watch(locale, () => {
|
|||
</q-btn>
|
||||
</div>
|
||||
|
||||
<template v-if="listCustomer && selectorLabel === 'EMPLOYER'">
|
||||
<template
|
||||
v-if="
|
||||
listCustomer &&
|
||||
listCustomer.length > 0 &&
|
||||
selectorLabel === 'EMPLOYER'
|
||||
"
|
||||
>
|
||||
<div
|
||||
class="row full-width customer-row"
|
||||
:style="`grid-template-columns: repeat(${$q.screen.lt.sm ? '1' : $q.screen.lt.md ? '2 ' : '4'}, 1fr)`"
|
||||
|
|
@ -711,7 +815,48 @@ watch(locale, () => {
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<template
|
||||
v-if="
|
||||
listEmployee &&
|
||||
listEmployee.length > 0 &&
|
||||
selectorLabel === 'EMPLOYEE'
|
||||
"
|
||||
>
|
||||
<div>
|
||||
<PersonCard
|
||||
:list="
|
||||
listEmployee.map((v) => ({
|
||||
id: v.id,
|
||||
name:
|
||||
$i18n.locale === 'en-US'
|
||||
? `${v.firstNameEN} ${v.lastNameEN}`
|
||||
: `${v.firstName} ${v.lastName}`,
|
||||
male: v.gender === 'male',
|
||||
female: v.gender === 'female',
|
||||
badge: v.code,
|
||||
detail: [
|
||||
{
|
||||
label: $t('personnelCardNationality'),
|
||||
value: v.nationality,
|
||||
},
|
||||
{
|
||||
label: $t('personnelCardAge'),
|
||||
value: calculateAge(v.dateOfBirth),
|
||||
},
|
||||
],
|
||||
})) || []
|
||||
"
|
||||
@delete-card="onDelete"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template
|
||||
v-if="
|
||||
(listCustomer?.length === 0 && selectorLabel === 'EMPLOYER') ||
|
||||
(listEmployee?.length === 0 && selectorLabel === 'EMPLOYEE')
|
||||
"
|
||||
>
|
||||
<TooltipComponent
|
||||
class="self-end"
|
||||
:title="
|
||||
|
|
@ -942,6 +1087,7 @@ watch(locale, () => {
|
|||
|
||||
<FormDialog
|
||||
employee
|
||||
addressSeparator
|
||||
:noAddress="formDataEmployeeTab !== 'personalInfo'"
|
||||
v-model:tabs-list="employeeTab"
|
||||
v-model:employee-tab="formDataEmployeeTab"
|
||||
|
|
@ -970,6 +1116,18 @@ watch(locale, () => {
|
|||
/>
|
||||
</template>
|
||||
|
||||
<template #information>
|
||||
<BasicInformation
|
||||
v-if="formDataEmployeeTab === 'personalInfo'"
|
||||
employee
|
||||
dense
|
||||
outlined
|
||||
separator
|
||||
v-model:customer-branch-id="formDataEmployee.customerBranchId"
|
||||
v-model:nrc-no="formDataEmployee.nrcNo"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #person>
|
||||
<FormPerson
|
||||
v-if="formDataEmployeeTab === 'personalInfo'"
|
||||
|
|
@ -982,37 +1140,187 @@ watch(locale, () => {
|
|||
v-model:firstNameEN="formDataEmployee.firstNameEN"
|
||||
v-model:lastNameEN="formDataEmployee.lastNameEN"
|
||||
v-model:gender="formDataEmployee.gender"
|
||||
v-model:birthDate="formDataEmployee.birthDate"
|
||||
v-model:birthDate="formDataEmployee.dateOfBirth"
|
||||
v-model:nationality="formDataEmployee.nationality"
|
||||
/>
|
||||
<FormEmployeeHealthCheck
|
||||
v-if="formDataEmployeeTab === 'healthCheck'"
|
||||
dense
|
||||
outlined
|
||||
v-model:checkup-result="formDataEmployee.checkupResult"
|
||||
v-model:checkup-type="formDataEmployee.checkupType"
|
||||
v-model:province-id="formDataEmployee.provinceCheckId"
|
||||
v-model:hospital-name="formDataEmployee.hospitalName"
|
||||
v-model:remark="formDataEmployee.remark"
|
||||
v-model:insurance-company="formDataEmployee.insuranceCompany"
|
||||
v-model:medical-benefit-scheme="formDataEmployee.medicalBenefitScheme"
|
||||
v-model:coverage-start-date="formDataEmployee.coverageStartDate"
|
||||
v-model:coverage-expire-date="formDataEmployee.coverageExpireDate"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #information>
|
||||
<BasicInformation
|
||||
v-if="formDataEmployeeTab === 'personalInfo'"
|
||||
employee
|
||||
<FormEmployeeWorkHistory
|
||||
v-if="formDataEmployeeTab === 'workHistory'"
|
||||
dense
|
||||
outlined
|
||||
separator
|
||||
:type-customer="customerType"
|
||||
v-model:customer-name="formData.customerName"
|
||||
v-model:customer-name-en="formData.customerNameEN"
|
||||
v-model:tax-no="formData.taxNo"
|
||||
/>
|
||||
<FormEmployeeOther
|
||||
v-if="
|
||||
formDataEmployeeTab === 'other' && formDataEmployee.employeeOtherInfo
|
||||
"
|
||||
dense
|
||||
outlined
|
||||
v-model:employee-other="formDataEmployee.employeeOtherInfo"
|
||||
/>
|
||||
</template>
|
||||
<template #by-type>
|
||||
<FormEmployeePassport
|
||||
v-if="formDataEmployeeTab === 'personalInfo'"
|
||||
dense
|
||||
outlined
|
||||
employee
|
||||
separator
|
||||
v-model:passport-type="formDataEmployee.passportType"
|
||||
v-model:passport-number="formDataEmployee.passportNumber"
|
||||
v-model:passport-issue-date="formDataEmployee.passportIssueDate"
|
||||
v-model:passport-expiry-date="formDataEmployee.passportExpiryDate"
|
||||
v-model:passport-issuing-country="
|
||||
formDataEmployee.passportIssuingCountry
|
||||
"
|
||||
v-model:passport-issuing-place="formDataEmployee.passportIssuingCountry"
|
||||
v-model:previous-passport-reference="
|
||||
formDataEmployee.previousPassportReference
|
||||
"
|
||||
/>
|
||||
<FormEmployeeVisa
|
||||
v-if="formDataEmployeeTab === 'personalInfo'"
|
||||
dense
|
||||
outlined
|
||||
employee
|
||||
v-model:visa-type="formDataEmployee.visaType"
|
||||
v-model:visa-number="formDataEmployee.visaNumber"
|
||||
v-model:visa-issue-date="formDataEmployee.visaIssueDate"
|
||||
v-model:visa-expiry-date="formDataEmployee.visaExpiryDate"
|
||||
v-model:visa-issuing-place="formDataEmployee.visaIssuingPlace"
|
||||
v-model:visa-stay-until-date="formDataEmployee.visaStayUntilDate"
|
||||
v-model:tm6-number="formDataEmployee.tm6Number"
|
||||
v-model:entry-date="formDataEmployee.entryDate"
|
||||
/>
|
||||
</template>
|
||||
</FormDialog>
|
||||
|
||||
<FormDialog
|
||||
v-model:modal="dialogInputCustomerBranchForm"
|
||||
:title="$t('formDialogTitleCreateSubBranch')"
|
||||
:submit="
|
||||
() => {
|
||||
onSubmitCustomerBranch();
|
||||
}
|
||||
"
|
||||
:close="() => {}"
|
||||
>
|
||||
<template #address>
|
||||
<!-- <FormCustomerBranch separator dense outlined /> -->
|
||||
|
||||
<div class="col-3 app-text-muted">
|
||||
• {{ $t('formDialogCustomerBranch') }}
|
||||
</div>
|
||||
|
||||
<div class="col-12 row bordered q-pt-none rounded">
|
||||
<TabComponent
|
||||
v-model:customer-branch="formData.customerBranch"
|
||||
v-model:tab-index="indexTab"
|
||||
>
|
||||
<template #address>
|
||||
<FormAddress
|
||||
v-if="
|
||||
indexTab !== undefined && formData.customerBranch?.[indexTab]
|
||||
"
|
||||
v-model:address="formData.customerBranch[indexTab].address"
|
||||
v-model:address-e-n="formData.customerBranch[indexTab].addressEN"
|
||||
v-model:province-id="formData.customerBranch[indexTab].provinceId"
|
||||
v-model:district-id="formData.customerBranch[indexTab].districtId"
|
||||
v-model:sub-district-id="
|
||||
formData.customerBranch[indexTab].subDistrictId
|
||||
"
|
||||
v-model:zip-code="formData.customerBranch[indexTab].zipCode"
|
||||
separator
|
||||
dense
|
||||
outlined
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #businessInformation>
|
||||
<FormBusiness
|
||||
v-if="
|
||||
indexTab !== undefined && formData.customerBranch?.[indexTab]
|
||||
"
|
||||
v-model:employment-office="
|
||||
formData.customerBranch[indexTab].employmentOffice
|
||||
"
|
||||
v-model:bussiness-type="
|
||||
formData.customerBranch[indexTab].bussinessType
|
||||
"
|
||||
v-model:bussiness-type-en="
|
||||
formData.customerBranch[indexTab].bussinessTypeEN
|
||||
"
|
||||
v-model:job-position="
|
||||
formData.customerBranch[indexTab].jobPosition
|
||||
"
|
||||
v-model:job-position-en="
|
||||
formData.customerBranch[indexTab].jobPositionEN
|
||||
"
|
||||
v-model:job-description="
|
||||
formData.customerBranch[indexTab].jobDescription
|
||||
"
|
||||
v-model:sale-employee="
|
||||
formData.customerBranch[indexTab].saleEmployee
|
||||
"
|
||||
v-model:pay-date="formData.customerBranch[indexTab].payDate"
|
||||
v-model:wage-rate="formData.customerBranch[indexTab].wageRate"
|
||||
separator
|
||||
dense
|
||||
outlined
|
||||
/>
|
||||
</template>
|
||||
<template #about>
|
||||
<AboutComponent
|
||||
v-if="
|
||||
indexTab !== undefined && formData.customerBranch?.[indexTab]
|
||||
"
|
||||
:type-customer="customerType"
|
||||
v-model:tax-no="formData.customerBranch[indexTab].taxNo"
|
||||
v-model:customer-name="formData.customerBranch[indexTab].name"
|
||||
v-model:customer-english-name="
|
||||
formData.customerBranch[indexTab].nameEN
|
||||
"
|
||||
v-model:authorized-capital="
|
||||
formData.customerBranch[indexTab].authorizedCapital
|
||||
"
|
||||
v-model:register-name="
|
||||
formData.customerBranch[indexTab].registerName
|
||||
"
|
||||
v-model:register-date="
|
||||
formData.customerBranch[indexTab].registerDate
|
||||
"
|
||||
dense
|
||||
outlined
|
||||
bordered
|
||||
separator
|
||||
/>
|
||||
</template>
|
||||
<template #contactInformation>
|
||||
<ContactComponent
|
||||
v-if="
|
||||
indexTab !== undefined && formData.customerBranch?.[indexTab]
|
||||
"
|
||||
v-model:mail="formData.customerBranch[indexTab].email"
|
||||
v-model:telephone="formData.customerBranch[indexTab].telephoneNo"
|
||||
dense
|
||||
outlined
|
||||
separator
|
||||
/>
|
||||
</template>
|
||||
<template #otherDocuments>
|
||||
<OtherInformation
|
||||
v-if="
|
||||
indexTab !== undefined && formData.customerBranch?.[indexTab]
|
||||
"
|
||||
dense
|
||||
outlined
|
||||
/>
|
||||
</template>
|
||||
</TabComponent>
|
||||
</div>
|
||||
</template>
|
||||
</FormDialog>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue