feat: customer employee form (basic info & checkup)
This commit is contained in:
puriphatt
parent
768686d41c
commit
a6a0c5d1e1
7 changed files with 728 additions and 136 deletions
|
|
@ -32,6 +32,8 @@ import {
|
|||
CustomerBranch,
|
||||
} from 'stores/customer/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 { dialog } from 'src/stores/utils';
|
||||
|
||||
|
|
@ -75,6 +77,36 @@ const formData = ref<CustomerCreate>({
|
|||
image: new File([''], 'dummy.jpg'),
|
||||
});
|
||||
|
||||
const formDataEmployeeSameAddr = ref(false);
|
||||
const formDataEmployeeTab = ref('personalInfo');
|
||||
const formDataEmployee = ref({
|
||||
employerId: '',
|
||||
employeeId: '',
|
||||
nrcNo: '',
|
||||
firstName: '',
|
||||
firstNameEN: '',
|
||||
lastName: '',
|
||||
lastNameEN: '',
|
||||
nationality: '',
|
||||
gender: '',
|
||||
birthDate: null,
|
||||
address: '',
|
||||
addressEN: '',
|
||||
provinceId: '',
|
||||
districtId: '',
|
||||
subDistrictId: '',
|
||||
zipCode: '',
|
||||
checkupResult: '',
|
||||
checkupType: '',
|
||||
provinceCheckId: '',
|
||||
hospitalName: '',
|
||||
remark: '',
|
||||
insuranceCompany: '',
|
||||
medicalBenefitScheme: '',
|
||||
coverageStartDate: null,
|
||||
coverageExpireDate: null,
|
||||
});
|
||||
|
||||
const indexTab = ref<number>(0);
|
||||
const statusToggle = ref<boolean>(false);
|
||||
const profileSubmit = ref<boolean>(false);
|
||||
|
|
@ -137,8 +169,28 @@ const customerStats = [
|
|||
},
|
||||
];
|
||||
|
||||
const employeeTab = [
|
||||
{
|
||||
name: 'personalInfo',
|
||||
label: 'personalInfo',
|
||||
},
|
||||
{
|
||||
name: 'healthCheck',
|
||||
label: 'healthCheck',
|
||||
},
|
||||
{
|
||||
name: 'workHistory',
|
||||
label: 'workHistory',
|
||||
},
|
||||
{
|
||||
name: 'other',
|
||||
label: 'other',
|
||||
},
|
||||
];
|
||||
|
||||
const dialogCustomerType = ref<boolean>(false);
|
||||
const dialogInputForm = ref<boolean>(false);
|
||||
const dialogEmployee = ref<boolean>(false);
|
||||
|
||||
const selectorLabel = ref<string>('');
|
||||
const selectorList = computed(() => [
|
||||
|
|
@ -148,7 +200,7 @@ const selectorList = computed(() => [
|
|||
(statsCustomerType.value?.CORP ?? 0) +
|
||||
(statsCustomerType.value?.PERS ?? 0),
|
||||
},
|
||||
{ label: 'WORKER', count: 0 },
|
||||
{ label: 'EMPLOYEE', count: 0 },
|
||||
]);
|
||||
|
||||
const customerType = ref<
|
||||
|
|
@ -162,7 +214,13 @@ function triggerCreate(type: 'customerLegalEntity' | 'customerNaturalPerson') {
|
|||
}
|
||||
|
||||
function openDialogCustomerType() {
|
||||
dialogCustomerType.value = true;
|
||||
if (selectorLabel.value === 'EMPLOYER') {
|
||||
dialogCustomerType.value = true;
|
||||
}
|
||||
|
||||
if (selectorLabel.value === 'EMPLOYEE') {
|
||||
dialogEmployee.value = true;
|
||||
}
|
||||
}
|
||||
|
||||
function openDialogInputForm(action: 'FORM' | 'INFO' = 'FORM', id?: string) {
|
||||
|
|
@ -301,7 +359,15 @@ onMounted(async () => {
|
|||
|
||||
if (resultStats) statsCustomerType.value = resultStats;
|
||||
|
||||
console.log(resultList);
|
||||
if (resultList) listCustomer.value = resultList.result;
|
||||
|
||||
if (
|
||||
(statsCustomerType.value?.CORP ?? 0) +
|
||||
(statsCustomerType.value?.PERS ?? 0) >
|
||||
0
|
||||
) {
|
||||
selectorLabel.value = 'EMPLOYER';
|
||||
}
|
||||
|
||||
if (resultList) listCustomer.value = resultList.result;
|
||||
});
|
||||
|
|
@ -316,6 +382,7 @@ onMounted(async () => {
|
|||
<div v-if="isMainPage">
|
||||
<div class="row full-width q-mb-md no-wrap">
|
||||
<SelectorList
|
||||
clickable
|
||||
:list="selectorList"
|
||||
v-model:selector="selectorLabel"
|
||||
class="q-mr-md col-4"
|
||||
|
|
@ -325,14 +392,22 @@ onMounted(async () => {
|
|||
<AppBox bordered class="column full-width">
|
||||
<div class="row q-pb-sm justify-between items-center">
|
||||
<div class="text-weight-bold text-subtitle1">
|
||||
{{ $t('customerStatTitle') }}
|
||||
{{
|
||||
selectorLabel === 'EMPLOYER'
|
||||
? $t('customerEmployerStatTitle')
|
||||
: $t('customerEmployeeStatTitle')
|
||||
}}
|
||||
</div>
|
||||
{{ selectorLabel }}
|
||||
<q-btn
|
||||
id="btn-add-customer"
|
||||
dense
|
||||
icon="mdi-plus"
|
||||
unelevated
|
||||
:label="'+ ' + $t('customerAdd')"
|
||||
:label="
|
||||
selectorLabel === 'EMPLOYER'
|
||||
? $t('customerEmployerAdd')
|
||||
: $t('customerEmployeeAdd')
|
||||
"
|
||||
padding="4px 16px"
|
||||
@click="openDialogCustomerType()"
|
||||
style="background-color: var(--cyan-6); color: white"
|
||||
|
|
@ -361,103 +436,110 @@ onMounted(async () => {
|
|||
|
||||
<!-- main -->
|
||||
<AppBox bordered class="column" style="width: 100%; min-height: 70vh">
|
||||
<div v-if="false" class="row q-mb-md justify-between">
|
||||
<div class="col-1 self-end">
|
||||
<div class="row">
|
||||
<TooltipComponent
|
||||
title="customerTooltipTitle"
|
||||
caption="customerTooltipCaption"
|
||||
imgSrc="personnel-table-"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template v-if="listCustomer && selectorLabel === 'EMPLOYER'">
|
||||
<div
|
||||
class="col self-center"
|
||||
style="display: flex; flex-grow: 1; align-items: center"
|
||||
class="row full-width customer-row"
|
||||
:style="`grid-template-columns: repeat(${$q.screen.lt.sm ? '1' : '4'}, 1fr)`"
|
||||
>
|
||||
<AddButton
|
||||
:label="'customerAdd'"
|
||||
:cyanOn="true"
|
||||
@trigger="openDialogCustomerType()"
|
||||
<UsersDetailCardComponent
|
||||
v-for="i in listCustomer"
|
||||
:key="i.id"
|
||||
:color="i.customerType === 'CORP' ? 'purple' : 'green'"
|
||||
:metadata="{ id: '1', disabled: false }"
|
||||
:badge="i.branch"
|
||||
:list="{
|
||||
id: i.id,
|
||||
imageUrl: i.imageUrl,
|
||||
type:
|
||||
i.customerType === 'CORP'
|
||||
? 'customerLegalEntity'
|
||||
: 'customerNaturalPerson',
|
||||
name: i.customerName === '' ? '-' : i.customerName,
|
||||
code: i.code,
|
||||
|
||||
detail: [
|
||||
{
|
||||
label: 'customerNameTh',
|
||||
value: i.customerName,
|
||||
},
|
||||
{
|
||||
label: 'customerNameEn',
|
||||
value: i.customerNameEN,
|
||||
},
|
||||
],
|
||||
}"
|
||||
@enter-card="
|
||||
() => {
|
||||
currentCustomerId = i.id;
|
||||
isMainPage = false;
|
||||
}
|
||||
"
|
||||
@update-card="
|
||||
() => {
|
||||
if (!listCustomer) return;
|
||||
|
||||
currentCustomerId = i.id;
|
||||
|
||||
assignFormData(i);
|
||||
infoDrawerEdit = true;
|
||||
openDialogInputForm('INFO', i.id);
|
||||
}
|
||||
"
|
||||
@view-card="
|
||||
() => {
|
||||
assignFormData(i);
|
||||
openDialogInputForm('INFO', i.id);
|
||||
}
|
||||
"
|
||||
@delete-card="
|
||||
dialog({
|
||||
color: 'negative',
|
||||
icon: 'mdi-alert',
|
||||
title: $t('deleteConfirmTitle'),
|
||||
actionText: $t('ok'),
|
||||
persistent: true,
|
||||
message: $t('deleteConfirmMessage'),
|
||||
action: async () => {
|
||||
await userCustomer.deleteById(i.id);
|
||||
|
||||
const resultList = await fetchList({ includeBranch: true });
|
||||
|
||||
if (resultList) listCustomer = resultList.result;
|
||||
},
|
||||
cancel: () => {},
|
||||
})
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div
|
||||
class="row full-width customer-row"
|
||||
:style="`grid-template-columns: repeat(${$q.screen.lt.sm ? '1' : '4'}, 1fr)`"
|
||||
>
|
||||
<UsersDetailCardComponent
|
||||
v-for="i in listCustomer"
|
||||
:key="i.id"
|
||||
:color="i.customerType === 'CORP' ? 'purple' : 'green'"
|
||||
:metadata="{ id: '1', disabled: false }"
|
||||
:badge="i.branch"
|
||||
:list="{
|
||||
id: i.id,
|
||||
imageUrl: i.imageUrl,
|
||||
type:
|
||||
i.customerType === 'CORP'
|
||||
? 'customerLegalEntity'
|
||||
: 'customerNaturalPerson',
|
||||
name: i.customerName === '' ? '-' : i.customerName,
|
||||
code: i.code,
|
||||
|
||||
detail: [
|
||||
{
|
||||
label: 'customerNameTh',
|
||||
value: i.customerName,
|
||||
},
|
||||
{
|
||||
label: 'customerNameEn',
|
||||
value: i.customerNameEN,
|
||||
},
|
||||
],
|
||||
}"
|
||||
@enter-card="
|
||||
() => {
|
||||
currentCustomerId = i.id;
|
||||
isMainPage = false;
|
||||
}
|
||||
<template v-else>
|
||||
<TooltipComponent
|
||||
class="self-end"
|
||||
:title="
|
||||
selectorLabel === 'EMPLOYER'
|
||||
? 'customerEmployerTooltipTitle'
|
||||
: 'customerEmployeeTooltipTitle'
|
||||
"
|
||||
@update-card="
|
||||
() => {
|
||||
if (!listCustomer) return;
|
||||
|
||||
currentCustomerId = i.id;
|
||||
|
||||
assignFormData(i);
|
||||
infoDrawerEdit = true;
|
||||
openDialogInputForm('INFO', i.id);
|
||||
}
|
||||
"
|
||||
@view-card="
|
||||
() => {
|
||||
assignFormData(i);
|
||||
openDialogInputForm('INFO', i.id);
|
||||
}
|
||||
"
|
||||
@delete-card="
|
||||
dialog({
|
||||
color: 'negative',
|
||||
icon: 'mdi-alert',
|
||||
title: $t('deleteConfirmTitle'),
|
||||
actionText: $t('ok'),
|
||||
persistent: true,
|
||||
message: $t('deleteConfirmMessage'),
|
||||
action: async () => {
|
||||
await userCustomer.deleteById(i.id);
|
||||
|
||||
const resultList = await fetchList({ includeBranch: true });
|
||||
|
||||
if (resultList) listCustomer = resultList.result;
|
||||
},
|
||||
cancel: () => {},
|
||||
})
|
||||
:caption="
|
||||
selectorLabel === 'EMPLOYER'
|
||||
? 'customerEmployerTooltipCaption'
|
||||
: 'customerEmployeeTooltipCaption'
|
||||
"
|
||||
imgSrc="personnel-table-"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="row items-center justify-center" style="flex-grow: 1">
|
||||
<AddButton
|
||||
:label="
|
||||
selectorLabel === 'EMPLOYER'
|
||||
? 'customerEmployerAdd'
|
||||
: 'customerEmployeeAdd'
|
||||
"
|
||||
@trigger="() => openDialogCustomerType()"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</AppBox>
|
||||
</div>
|
||||
<div v-else>
|
||||
|
|
@ -497,7 +579,7 @@ onMounted(async () => {
|
|||
|
||||
<FormDialog
|
||||
v-model:modal="dialogInputForm"
|
||||
:title="`เพิ่มนายจ้าง`"
|
||||
:title="$t('customerEmployerAdd')"
|
||||
:customer-label="customerType"
|
||||
:submit="
|
||||
() => {
|
||||
|
|
@ -643,6 +725,82 @@ onMounted(async () => {
|
|||
</template>
|
||||
</FormDialog>
|
||||
|
||||
<FormDialog
|
||||
employee
|
||||
:noAddress="formDataEmployeeTab !== 'personalInfo'"
|
||||
v-model:tabs-list="employeeTab"
|
||||
v-model:employee-tab="formDataEmployeeTab"
|
||||
v-model:modal="dialogEmployee"
|
||||
v-model:same-with-employer="formDataEmployeeSameAddr"
|
||||
v-model:address="formDataEmployee.address"
|
||||
v-model:addressEN="formDataEmployee.addressEN"
|
||||
v-model:provinceId="formDataEmployee.provinceId"
|
||||
v-model:districtId="formDataEmployee.districtId"
|
||||
v-model:subDistrictId="formDataEmployee.subDistrictId"
|
||||
v-model:zipCode="formDataEmployee.zipCode"
|
||||
:title="$t('customerEmployeeAdd')"
|
||||
:submit="
|
||||
() => {
|
||||
onSubmit();
|
||||
}
|
||||
"
|
||||
:close="() => {}"
|
||||
>
|
||||
<template #prepend>
|
||||
<ProfileUpload
|
||||
v-model:url-profile="profileUrl"
|
||||
v-model:status-toggle="statusToggle"
|
||||
v-model:profile-submit="profileSubmit"
|
||||
@input-file="inputFile.click()"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #person>
|
||||
<FormPerson
|
||||
v-if="formDataEmployeeTab === 'personalInfo'"
|
||||
dense
|
||||
outlined
|
||||
employee
|
||||
separator
|
||||
v-model:firstName="formDataEmployee.firstName"
|
||||
v-model:lastName="formDataEmployee.lastName"
|
||||
v-model:firstNameEN="formDataEmployee.firstNameEN"
|
||||
v-model:lastNameEN="formDataEmployee.lastNameEN"
|
||||
v-model:gender="formDataEmployee.gender"
|
||||
v-model:birthDate="formDataEmployee.birthDate"
|
||||
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
|
||||
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"
|
||||
/>
|
||||
</template>
|
||||
</FormDialog>
|
||||
|
||||
<DrawerInfo
|
||||
title="บริษัททดสอบ"
|
||||
v-model:drawer-open="infoDrawer"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue