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

refactor: handle show data readonly

Browse source
This commit is contained in:
Thanaphon Frappet 2024-11-15 14:40:59 +07:00 • committed by Methapon Metanipat
parent 4515f93933
commit 6fa930ff29
1 changed files with 691 additions and 426 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -646,7 +646,6 @@ watch(
currentFromDataEmployee.value.provinceId = e.provinceId;
currentFromDataEmployee.value.districtId = e.districtId;
currentFromDataEmployee.value.subDistrictId = e.subDistrictId;
currentFromDataEmployee.value.zipCode = e.zipCode;
}
currentFromDataEmployee.value.customerBranchId = e.id;
},
@ -667,8 +666,6 @@ watch(
employeeFormState.value.formDataEmployeeOwner.districtId;
currentFromDataEmployee.value.subDistrictId =
employeeFormState.value.formDataEmployeeOwner.subDistrictId;
currentFromDataEmployee.value.zipCode =
employeeFormState.value.formDataEmployeeOwner.zipCode;
}
currentFromDataEmployee.value.customerBranchId =
employeeFormState.value.formDataEmployeeOwner.id;
@ -1581,6 +1578,7 @@ const emptyCreateDialog = ref(false);
v !== 'contactName'
);
})"
!
:key="key"
>
<span class="col-4 app-text-muted">
@ -2300,7 +2298,6 @@ const emptyCreateDialog = ref(false);
}
statusEmployeeCreate = true;
employeeFormState.isEmployeeEdit = false;
employeeFormState.currentIndex = -1;
await fetchListEmployee(true);
}
@ -2496,12 +2493,46 @@ const emptyCreateDialog = ref(false);
sub: true,
})) || []),
{
name: $t('customerEmployee.form.group.visa'),
anchor: 'form-employee-checkup',
tab: 'healthCheck',
useBtn:
currentFromDataEmployee.employeeCheckup?.filter(
(item) => {
if (item.id === undefined) {
return true;
}
return false;
},
).length === 0 &&
employeeFormState.currentIndexCheckup === -1
? true
: false,
},
...(currentFromDataEmployee.employeeCheckup?.map((v, i) => ({
name: $t('general.times', { number: i + 1 }),
anchor: `form-employee-checkup-${i}`,
tab: 'healthCheck',
})) || []),
{
name: $t('customerEmployee.form.group.workHistory'),
anchor: 'form-employee-work-history',
tab: 'workHistory',
useBtn:
currentFromDataEmployee.employeeWork?.filter((item) => {
if (item.id === undefined) {
return true;
}
return false;
}).length === 0 &&
employeeFormState.currentIndexWorkHistory === -1
? true
: false,
},
...(currentFromDataEmployee.employeeWork?.map((v, i) => ({
name: $t('general.times', { number: i + 1 }),
anchor: `form-employee-work-history-${i}`,
@ -2524,6 +2555,7 @@ const emptyCreateDialog = ref(false);
>
<template v-slot:btn-form-passport>
<q-btn
id="form-add-passport"
dense
flat
icon="mdi-plus"
@ -2537,6 +2569,7 @@ const emptyCreateDialog = ref(false);
<template v-slot:btn-drawer-visa>
<q-btn
id="form-add-visa"
dense
flat
icon="mdi-plus"
@ -2546,6 +2579,32 @@ const emptyCreateDialog = ref(false);
@click.stop="employeeFormStore.addVisa()"
/>
</template>
<template v-slot:btn-drawer-employee-checkup>
<q-btn
id="form-add-checkup"
dense
flat
icon="mdi-plus"
size="sm"
rounded
style="color: var(--stone-9)"
@click.stop="employeeFormStore.addCheckup()"
/>
</template>
<template v-slot:btn-drawer-employee-work-history>
<q-btn
id="form-add-work-history"
dense
flat
icon="mdi-plus"
size="sm"
rounded
style="color: var(--stone-9)"
@click.stop="employeeFormStore.addWorkHistory()"
/>
</template>
</SideMenu>
</div>
</div>
@ -3175,13 +3234,13 @@ const emptyCreateDialog = ref(false);
@click.stop="
() => {
employeeFormState.currentIndexPassport = index;
deleteEmployeeById({ type: 'passport' });
deleteEmployeeById({ type: 'passport', index });
}
"
type="button"
:disabled="
!(employeeFormState.currentIndex === -1) &&
!(employeeFormState.currentIndex === index)
!(employeeFormState.currentIndexPassport === -1) &&
!(employeeFormState.currentIndexPassport === index)
"
/>
</div>
@ -3191,6 +3250,19 @@ const emptyCreateDialog = ref(false);
</template>
<template v-if="employeeFormState.currentTab === 'visa'">
<div class="q-gutter-sm">
<div class="col-12 q-pb-sm text-weight-bold text-body1">
<q-icon
flat
size="xs"
class="q-pa-sm rounded q-mr-xs"
color="info"
name="mdi-passport"
style="background-color: var(--surface-3)"
/>
{{ $t('customerEmployee.form.group.visa') }}
</div>
<FormEmployeeVisa
v-for="(value, index) in currentFromDataEmployee.employeeVisa"
prefix-id="drawer-info-employee"
@ -3199,13 +3271,22 @@ const emptyCreateDialog = ref(false);
outlined
title="customerEmployee.form.group.visa"
:readonly="employeeFormState.currentIndexVisa !== index"
v-model:visa-type="value.type"
v-model:visa-number="value.number"
hide-title
v-model:arrival-at="value.arrivalAt"
v-model:arrival-tm-no="value.arrivalTMNo"
v-model:arrival-tm="value.arrivalTM"
v-model:mrz="value.mrz"
v-model:entry-count="value.entryCount"
v-model:issue-place="value.issuePlace"
v-model:issue-country="value.issueCountry"
v-model:issueDate="value.issueDate"
v-model:type="value.type"
v-model:expire-date="value.expireDate"
v-model:visa-issue-date="value.issueDate"
v-model:visa-expiry-date="value.expireDate"
v-model:visa-issuing-place="value.issuePlace"
v-model:entry-count="value.entryCount"
v-model:issue-country="value.issueCountry"
v-model:remark="value.remark"
v-model:worker-type="value.workerType"
v-model:number="value.number"
>
<template v-slot:expiryDate>
{{ $t('general.expirationDate') }} :
@ -3284,29 +3365,48 @@ const emptyCreateDialog = ref(false);
@click.stop="
() => {
employeeFormState.currentIndexVisa = index;
deleteEmployeeById({ type: 'visa' });
deleteEmployeeById({ type: 'visa', index });
}
"
type="button"
:disabled="
!(employeeFormState.currentIndex === -1) &&
!(employeeFormState.currentIndex === index)
!(employeeFormState.currentIndexVisa === -1) &&
!(employeeFormState.currentIndexVisa === index)
"
/>
</div>
</template>
</FormEmployeeVisa>
</div>
</template>
<template v-if="employeeFormState.currentTab === 'healthCheck'">
<div class="q-gutter-sm">
<div class="q-pb-sm text-weight-bold text-body1 row items-center">
<q-icon
flat
size="xs"
class="q-pa-sm rounded q-mr-sm"
color="info"
name="mdi-hospital-box-outline"
style="background-color: var(--surface-3)"
/>
{{ $t(`customerEmployee.formHealthCheck.title`) }}
</div>
<FormEmployeeHealthCheck
v-if="employeeFormState.currentTab === 'healthCheck'"
id="form-checkup"
prefix-id="form-employee"
dense
outlined
v-model:current-index="employeeFormState.currentIndex"
v-model:employee-checkup="currentFromDataEmployee.employeeCheckup"
v-model:current-index="employeeFormState.currentIndexCheckup"
v-model:employee-checkup="
currentFromDataEmployee.employeeCheckup
"
v-model:checkup-results-option="
optionStore.globalOption.checkupResults
"
v-model:checkup-type-option="
optionStore.globalOption.insurancePlace
"
@ -3318,13 +3418,13 @@ const emptyCreateDialog = ref(false);
"
@delete="
(index) => {
employeeFormState.currentIndex = index;
deleteEmployeeById({ type: 'healthCheck' });
employeeFormState.currentIndexCheckup = index;
deleteEmployeeById({ type: 'healthCheck', index });
}
"
@save="
(index) => {
employeeFormState.currentIndex = index;
employeeFormState.currentIndexCheckup = index;
notify('create', $t('general.success'));
}
"
@ -3334,52 +3434,72 @@ const emptyCreateDialog = ref(false);
currentFromDataEmployee.employeeCheckup?.[index]
.statusSave === false
) {
currentFromDataEmployee.employeeCheckup[index].statusSave =
true;
currentFromDataEmployee.employeeCheckup[
index
].statusSave = true;
}
}
"
@edit="
(index) => {
if (
currentFromDataEmployee.employeeCheckup?.[index].statusSave
currentFromDataEmployee.employeeCheckup?.[index]
.statusSave
) {
currentFromDataEmployee.employeeCheckup[index].statusSave =
false;
currentFromDataEmployee.employeeCheckup[
index
].statusSave = false;
}
}
"
/>
</div>
</template>
<template v-if="employeeFormState.currentTab === 'workHistory'">
<div class="q-gutter-sm">
<div
class="col-12 q-pb-sm text-weight-bold text-body1 row items-center"
>
<q-icon
flat
size="xs"
class="q-pa-sm rounded q-mr-xs"
color="info"
name="mdi-briefcase-outline"
style="background-color: var(--surface-3)"
/>
{{ $t(`customerEmployee.form.group.workHistory`) }}
</div>
<FormEmployeeWorkHistory
v-if="employeeFormState.currentTab === 'workHistory'"
id="form-work-history"
prefix-id="form-employee"
dense
outlined
v-model:current-index="employeeFormState.currentIndex"
v-model:current-index="
employeeFormState.currentIndexWorkHistory
"
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"
@delete="
(index) => {
employeeFormState.currentIndex = index;
deleteEmployeeById({ type: 'work' });
employeeFormState.currentIndexWorkHistory = index;
deleteEmployeeById({ type: 'work', index });
}
"
@save="
(index) => {
employeeFormState.currentIndex = index;
employeeFormState.currentIndexWorkHistory = index;
}
"
@undo="
(index) => {
if (
currentFromDataEmployee.employeeWork?.[index].statusSave ===
false
currentFromDataEmployee.employeeWork?.[index]
.statusSave === false
) {
currentFromDataEmployee.employeeWork[index].statusSave =
true;
@ -3397,7 +3517,7 @@ const emptyCreateDialog = ref(false);
}
"
/>
a
</div>
</template>
<template v-if="employeeFormState.currentTab === 'other'">
@ -4071,7 +4191,6 @@ const emptyCreateDialog = ref(false);
await fetchListEmployee();
employeeFormState.isEmployeeEdit = false;
employeeFormState.currentIndex = -1;
}
"
:before-close="
@ -4248,6 +4367,24 @@ const emptyCreateDialog = ref(false);
sub: true,
})) || []),
{
name: $t('customerEmployee.form.group.visa'),
anchor: 'drawer-employee-checkup',
tab: 'healthCheck',
useBtn:
currentFromDataEmployee.employeeCheckup?.filter(
(item) => {
if (item.id === undefined) {
return true;
}
return false;
},
).length === 0 &&
employeeFormState.currentIndexCheckup === -1
? true
: false,
},
...(currentFromDataEmployee.employeeCheckup?.map(
(_v, i) => ({
name: $t('general.times', { number: i + 1 }),
@ -4255,11 +4392,29 @@ const emptyCreateDialog = ref(false);
tab: 'healthCheck',
}),
) || []),
{
name: $t('customerEmployee.form.group.workHistory'),
anchor: 'drawer-employee-work-history',
tab: 'workHistory',
useBtn:
currentFromDataEmployee.employeeWork?.filter((item) => {
if (item.id === undefined) {
return true;
}
return false;
}).length === 0 &&
employeeFormState.currentIndexWorkHistory === -1
? true
: false,
},
...(currentFromDataEmployee.employeeWork?.map((_v, i) => ({
name: $t('general.times', { number: i + 1 }),
anchor: `drawer-employee-work-history-${i}`,
tab: 'workHistory',
})) || []),
{
name: $t('customerEmployee.form.group.family'),
anchor: 'drawer-other',
@ -4276,6 +4431,8 @@ const emptyCreateDialog = ref(false);
>
<template v-slot:btn-drawer-passport>
<q-btn
v-if="currentTab === 'employee'"
id="form-add-passport"
dense
flat
icon="mdi-plus"
@ -4289,6 +4446,8 @@ const emptyCreateDialog = ref(false);
<template v-slot:btn-drawer-visa>
<q-btn
v-if="currentTab === 'employee'"
id="form-add-visa"
dense
flat
icon="mdi-plus"
@ -4298,6 +4457,34 @@ const emptyCreateDialog = ref(false);
@click.stop="employeeFormStore.addVisa()"
/>
</template>
<template v-slot:btn-drawer-employee-checkup>
<q-btn
v-if="currentTab === 'employee'"
id="form-add-checkup"
dense
flat
icon="mdi-plus"
size="sm"
rounded
style="color: var(--stone-9)"
@click.stop="employeeFormStore.addCheckup()"
/>
</template>
<template v-slot:btn-drawer-employee-work-history>
<q-btn
v-if="currentTab === 'employee'"
id="form-add-work-history"
dense
flat
icon="mdi-plus"
size="sm"
rounded
style="color: var(--stone-9)"
@click.stop="employeeFormStore.addWorkHistory()"
/>
</template>
</SideMenu>
</div>
</div>
@ -4806,7 +4993,7 @@ const emptyCreateDialog = ref(false);
</template>
<template v-if="employeeFormState.currentTab === 'passport'">
<div class="q-gutter-sm">
<div class="q-gutter-sm full-width">
<div class="col-12 q-pb-sm text-weight-bold text-body1">
<q-icon
flat
@ -4943,18 +5130,38 @@ const emptyCreateDialog = ref(false);
"
type="button"
:disabled="
!(employeeFormState.currentIndex === -1) &&
!(employeeFormState.currentIndex === index)
!(employeeFormState.currentIndexPassport === -1) &&
!(employeeFormState.currentIndexPassport === index)
"
/>
</div>
</template>
</FormEmployeePassport>
</template>
<div class="full-width flex flex-center">
<NoData
v-if="
currentFromDataEmployee.employeePassport?.length === 0
"
/>
</div>
</div>
</template>
<template v-if="employeeFormState.currentTab === 'visa'">
<div class="q-gutter-sm full-width">
<div class="col-12 q-pb-sm text-weight-bold text-body1">
<q-icon
flat
size="xs"
class="q-pa-sm rounded q-mr-xs"
color="info"
name="mdi-passport"
style="background-color: var(--surface-3)"
/>
{{ $t('customerEmployee.form.group.visa') }}
</div>
<FormEmployeeVisa
v-for="(value, index) in currentFromDataEmployee.employeeVisa"
prefix-id="drawer-info-employee"
@ -4963,7 +5170,7 @@ const emptyCreateDialog = ref(false);
outlined
:title="$t('customerEmployee.form.group.visa')"
:readonly="employeeFormState.currentIndexVisa !== index"
:hide-title="index !== 0"
hide-title
v-model:arrival-at="value.arrivalAt"
v-model:arrival-tm-no="value.arrivalTMNo"
v-model:arrival-tm="value.arrivalTM"
@ -5061,16 +5268,39 @@ const emptyCreateDialog = ref(false);
"
type="button"
:disabled="
!(employeeFormState.currentIndex === -1) &&
!(employeeFormState.currentIndex === index)
!(employeeFormState.currentIndexVisa === -1) &&
!(employeeFormState.currentIndexVisa === index)
"
/>
</div>
</template>
</FormEmployeeVisa>
<div class="full-width flex flex-center">
<NoData
v-if="currentFromDataEmployee.employeeVisa?.length === 0"
/>
</div>
</div>
</template>
<template v-if="employeeFormState.currentTab === 'healthCheck'">
<div class="q-gutter-sm full-width">
<div
class="q-pb-sm text-weight-bold text-body1 row items-center"
>
<q-icon
flat
size="xs"
class="q-pa-sm rounded q-mr-sm"
color="info"
name="mdi-hospital-box-outline"
style="background-color: var(--surface-3)"
/>
{{ $t(`customerEmployee.formHealthCheck.title`) }}
</div>
<FormEmployeeHealthCheck
v-if="employeeFormState.currentTab === 'healthCheck'"
id="drawer-form-checkup"
@ -5081,7 +5311,7 @@ const emptyCreateDialog = ref(false);
currentTab !== 'employee' ||
currentFromDataEmployee.status === 'INACTIVE'
"
v-model:current-index="employeeFormState.currentIndex"
v-model:current-index="employeeFormState.currentIndexCheckup"
v-model:employee-checkup="
currentFromDataEmployee.employeeCheckup
"
@ -5099,7 +5329,7 @@ const emptyCreateDialog = ref(false);
"
@save="
(index) => {
employeeFormState.currentIndex = index;
employeeFormState.currentIndexCheckup = index;
notify('create', $t('general.success'));
}
"
@ -5109,7 +5339,7 @@ const emptyCreateDialog = ref(false);
currentFromDataEmployee.employeeCheckup?.[index]
.statusSave
) {
employeeFormState.currentIndex = index;
employeeFormState.currentIndexCheckup = index;
currentFromDataEmployee.employeeCheckup[
index
].statusSave = false;
@ -5122,7 +5352,7 @@ const emptyCreateDialog = ref(false);
currentFromDataEmployee.employeeCheckup?.[index]
.statusSave === false
) {
employeeFormState.currentIndex = -1;
employeeFormState.currentIndexCheckup = -1;
currentFromDataEmployee.employeeCheckup[
index
].statusSave = true;
@ -5132,13 +5362,35 @@ const emptyCreateDialog = ref(false);
"
@delete="
(index) => {
employeeFormState.currentIndex = index;
deleteEmployeeById({ type: 'healthCheck' });
employeeFormState.currentIndexCheckup = index;
deleteEmployeeById({ type: 'healthCheck', index });
}
"
/>
<div class="full-width flex flex-center">
<NoData
v-if="currentFromDataEmployee.employeeCheckup?.length === 0"
/>
</div>
</div>
</template>
<template v-if="employeeFormState.currentTab === 'workHistory'">
<div class="q-gutter-sm full-width">
<div
class="col-12 q-pb-sm text-weight-bold text-body1 row items-center"
>
<q-icon
flat
size="xs"
class="q-pa-sm rounded q-mr-xs"
color="info"
name="mdi-briefcase-outline"
style="background-color: var(--surface-3)"
/>
{{ $t(`customerEmployee.form.group.workHistory`) }}
</div>
<FormEmployeeWorkHistory
v-if="employeeFormState.currentTab === 'workHistory'"
id="drawer-work-history"
@ -5149,20 +5401,26 @@ const emptyCreateDialog = ref(false);
currentFromDataEmployee.status === 'INACTIVE'
"
outlined
v-model:current-index="employeeFormState.currentIndex"
v-model:current-index="
employeeFormState.currentIndexWorkHistory
"
v-model:employee-work="currentFromDataEmployee.employeeWork"
v-model:position-name-option="optionStore.globalOption.position"
v-model:job-type-option="optionStore.globalOption.businessType"
v-model:position-name-option="
optionStore.globalOption.position
"
v-model:job-type-option="
optionStore.globalOption.businessType
"
v-model:workplace-option="optionStore.globalOption.area"
@delete="
(index) => {
employeeFormState.currentIndex = index;
deleteEmployeeById({ type: 'work' });
employeeFormState.currentIndexWorkHistory = index;
deleteEmployeeById({ type: 'work', index });
}
"
@save="
(index) => {
employeeFormState.currentIndex = index;
employeeFormState.currentIndexWorkHistory = index;
}
"
@undo="
@ -5171,7 +5429,7 @@ const emptyCreateDialog = ref(false);
currentFromDataEmployee.employeeWork?.[index]
.statusSave === false
) {
employeeFormState.currentIndex = -1;
employeeFormState.currentIndexWorkHistory = -1;
currentFromDataEmployee.employeeWork[index].statusSave =
true;
}
@ -5182,16 +5440,24 @@ const emptyCreateDialog = ref(false);
if (
currentFromDataEmployee.employeeWork?.[index].statusSave
) {
employeeFormState.currentIndex = index;
employeeFormState.currentIndexWorkHistory = index;
currentFromDataEmployee.employeeWork[index].statusSave =
false;
}
}
"
/>
</div>
<div class="full-width flex flex-center">
<NoData
v-if="currentFromDataEmployee.employeeWork?.length === 0"
/>
</div>
</template>
<template v-if="employeeFormState.currentTab === 'other'">
<FormEmployeeOther
:readonly="currentTab !== 'employee'"
:hide-action="
currentTab !== 'employee' ||
currentFromDataEmployee.status === 'INACTIVE'
@ -5228,7 +5494,6 @@ const emptyCreateDialog = ref(false);
</div>
</div>
</DrawerInfo>
{{ employeeHistory }}
<DialogForm
:title="$t('general.historyEdit')"