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

fix(03): profile layout

Browse source
This commit is contained in:
puriphatt 2024-09-27 15:22:21 +07:00
parent fb068c005d
commit f423c305fb
1 changed files with 160 additions and 257 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1948,7 +1948,12 @@ const emptyCreateDialog = ref(false);
</DialogHeader> </DialogHeader>
</template> </template>
<div class="q-px-lg q-pt-lg surface-2"> <div
:class="{
'q-mx-lg q-my-md': $q.screen.gt.sm,
'q-mx-md q-my-sm': !$q.screen.gt.sm,
}"
>
<ProfileBanner <ProfileBanner
v-if="customerFormData.customerBranch !== undefined" v-if="customerFormData.customerBranch !== undefined"
active active
@ -1989,8 +1994,11 @@ const emptyCreateDialog = ref(false);
</div> </div>
<div <div
style="flex: 1; width: 100%; overflow-y: auto" style="flex: 1; width: 100%; overflow-y: auto"
class="surface-2 q-pa-lg"
id="customer-form" id="customer-form"
:class="{
'q-px-lg q-pb-lg': $q.screen.gt.sm,
'q-px-md q-pb-sm': !$q.screen.gt.sm,
}"
> >
<div class="col surface-1 full-height rounded bordered scroll row"> <div class="col surface-1 full-height rounded bordered scroll row">
<div <div
@ -2050,7 +2058,11 @@ const emptyCreateDialog = ref(false);
</div> </div>
</div> </div>
<div <div
class="col-12 col-md-10 q-py-md q-pr-md q-pl-sm" class="col-12 col-md-10"
:class="{
'q-py-md q-pr-md ': $q.screen.gt.sm,
'q-py-md q-px-lg': !$q.screen.gt.sm,
}"
id="customer-form-content" id="customer-form-content"
style="height: 100%; max-height: 100%; overflow-y: auto" style="height: 100%; max-height: 100%; overflow-y: auto"
> >
@ -2322,7 +2334,12 @@ const emptyCreateDialog = ref(false);
} }
" "
> >
<div class="q-px-lg q-pt-lg surface-2"> <div
:class="{
'q-mx-lg q-my-md': $q.screen.gt.sm,
'q-mx-md q-my-sm': !$q.screen.gt.sm,
}"
>
<ProfileBanner <ProfileBanner
active active
useToggle useToggle
@ -2390,7 +2407,10 @@ const emptyCreateDialog = ref(false);
<div <div
style="flex: 1; width: 100%; overflow-y: auto" style="flex: 1; width: 100%; overflow-y: auto"
class="surface-2 q-pa-lg" :class="{
'q-px-lg q-pb-lg': $q.screen.gt.sm,
'q-px-md q-pb-sm': !$q.screen.gt.sm,
}"
id="drawer-employee-form" id="drawer-employee-form"
> >
<div class="col surface-1 full-height rounded bordered scroll row"> <div class="col surface-1 full-height rounded bordered scroll row">
@ -2463,58 +2483,68 @@ const emptyCreateDialog = ref(false);
</div> </div>
<div <div
class="col-12 col-md-10 q-py-md q-pr-md q-pl-sm" class="col-12 col-md-10"
:class="{
'q-py-md q-pr-md ': $q.screen.gt.sm,
'q-py-md q-px-lg': !$q.screen.gt.sm,
}"
id="employee-form-content" id="employee-form-content"
style="height: 100%; max-height: 100; overflow-y: auto" style="height: 100%; max-height: 100; overflow-y: auto"
> >
<template v-if="employeeFormState.currentTab === 'personalInfo'"> <template v-if="employeeFormState.currentTab === 'personalInfo'">
<div <div
class="surface-1 rounded q-pt-sm row" class="rounded row"
:class="{
'q-py-md q-px-lg': $q.screen.gt.sm,
' q-px-md': !$q.screen.gt.sm,
}"
style="position: absolute; z-index: 999; right: 4%" style="position: absolute; z-index: 999; right: 4%"
> >
<UndoButton <div class="surface-1 row rounded">
v-if=" <UndoButton
employeeFormState.isEmployeeEdit && v-if="
employeeFormState.dialogType !== 'create' employeeFormState.isEmployeeEdit &&
" employeeFormState.dialogType !== 'create'
id="btn-info-basic-undo" "
icon-only id="btn-info-basic-undo"
@click=" icon-only
() => { @click="
employeeFormStore.resetFormDataEmployee(); () => {
employeeFormState.isEmployeeEdit = false; employeeFormStore.resetFormDataEmployee();
employeeFormState.dialogType = 'info'; employeeFormState.isEmployeeEdit = false;
} employeeFormState.dialogType = 'info';
" }
type="button" "
/> type="button"
<SaveButton />
v-if="employeeFormState.isEmployeeEdit" <SaveButton
id="btn-info-basic-save" v-if="employeeFormState.isEmployeeEdit"
icon-only id="btn-info-basic-save"
type="submit" icon-only
/> type="submit"
<EditButton />
v-if="!employeeFormState.isEmployeeEdit" <EditButton
id="btn-info-basic-edit" v-if="!employeeFormState.isEmployeeEdit"
icon-only id="btn-info-basic-edit"
@click=" icon-only
() => { @click="
employeeFormState.isEmployeeEdit = true; () => {
employeeFormState.dialogType = 'edit'; employeeFormState.isEmployeeEdit = true;
} employeeFormState.dialogType = 'edit';
" }
type="button" "
/> type="button"
<DeleteButton />
v-if="!employeeFormState.isEmployeeEdit" <DeleteButton
id="btn-info-basic-delete" v-if="!employeeFormState.isEmployeeEdit"
icon-only id="btn-info-basic-delete"
@click=" icon-only
() => deleteEmployeeById({ id: currentFromDataEmployee.id }) @click="
" () => deleteEmployeeById({ id: currentFromDataEmployee.id })
type="button" "
/> type="button"
/>
</div>
</div> </div>
<BasicInformation <BasicInformation
@ -3146,7 +3176,12 @@ const emptyCreateDialog = ref(false);
" "
> >
<div class="column full-height"> <div class="column full-height">
<div class="q-px-lg q-pt-lg surface-2"> <div
:class="{
'q-mx-lg q-my-md': $q.screen.gt.sm,
'q-mx-md q-my-sm': !$q.screen.gt.sm,
}"
>
<ProfileBanner <ProfileBanner
v-if="customerFormData.customerBranch !== undefined" v-if="customerFormData.customerBranch !== undefined"
:active="customerFormData.status !== 'INACTIVE'" :active="customerFormData.status !== 'INACTIVE'"
@ -3199,8 +3234,12 @@ const emptyCreateDialog = ref(false);
<div <div
style="flex: 1; width: 100%; overflow-y: auto" style="flex: 1; width: 100%; overflow-y: auto"
class="surface-2 q-pa-lg column" class="column"
id="customer-form" id="customer-form"
:class="{
'q-px-lg q-pb-lg': $q.screen.gt.sm,
'q-px-md q-pb-sm': !$q.screen.gt.sm,
}"
> >
<div class="col bg-red surface-1 rounded bordered row"> <div class="col bg-red surface-1 rounded bordered row">
<div class="col full-height scroll" v-if="$q.screen.gt.sm"> <div class="col full-height scroll" v-if="$q.screen.gt.sm">
@ -3258,7 +3297,11 @@ const emptyCreateDialog = ref(false);
</div> </div>
<div <div
class="col-12 col-md-10 q-py-md q-pr-md q-pl-sm" class="col-12 col-md-10"
:class="{
'q-py-md q-pr-md ': $q.screen.gt.sm,
'q-py-md q-px-lg': !$q.screen.gt.sm,
}"
id="customer-form-content" id="customer-form-content"
style="height: 100%; max-height: 100%; overflow-y: auto" style="height: 100%; max-height: 100%; overflow-y: auto"
> >
@ -3541,7 +3584,12 @@ const emptyCreateDialog = ref(false);
" "
> >
<div class="column full-height"> <div class="column full-height">
<div class="q-px-lg q-pt-lg surface-2"> <div
:class="{
'q-mx-lg q-my-md': $q.screen.gt.sm,
'q-mx-md q-my-sm': !$q.screen.gt.sm,
}"
>
<ProfileBanner <ProfileBanner
hideFade hideFade
@view=" @view="
@ -3606,8 +3654,12 @@ const emptyCreateDialog = ref(false);
</div> </div>
<div <div
style="flex: 1; width: 100%; overflow-y: auto" style="flex: 1; width: 100%; overflow-y: auto"
class="surface-2 q-pa-lg column" class="column"
id="drawer-employee-form" id="drawer-employee-form"
:class="{
'q-px-lg q-pb-lg': $q.screen.gt.sm,
'q-px-md q-pb-sm': !$q.screen.gt.sm,
}"
> >
<div class="col bg-red surface-1 rounded bordered row"> <div class="col bg-red surface-1 rounded bordered row">
<div class="col full-height scroll" v-if="$q.screen.gt.sm"> <div class="col full-height scroll" v-if="$q.screen.gt.sm">
@ -3676,59 +3728,70 @@ const emptyCreateDialog = ref(false);
</div> </div>
</div> </div>
<div <div
class="col-12 col-md-10 q-py-md q-pr-md q-pl-sm" class="col-12 col-md-10"
:class="{
'q-py-md q-pr-md ': $q.screen.gt.sm,
'q-py-md q-px-lg': !$q.screen.gt.sm,
}"
id="drawer-employee-form-content" id="drawer-employee-form-content"
style="height: 100%; overflow-y: auto" style="height: 100%; overflow-y: auto"
> >
<template v-if="employeeFormState.currentTab === 'personalInfo'"> <template v-if="employeeFormState.currentTab === 'personalInfo'">
<div <div
class="surface-1 rounded q-pt-sm row" class="rounded row"
style="position: absolute; z-index: 999; right: 4%" style="position: absolute; z-index: 999; right: 4%"
v-if=" v-if="
currentTab === 'employee' && currentTab === 'employee' &&
currentFromDataEmployee.status !== 'INACTIVE' currentFromDataEmployee.status !== 'INACTIVE'
" "
:class="{
'q-py-md q-px-lg': $q.screen.gt.sm,
' q-px-md': !$q.screen.gt.sm,
}"
> >
<UndoButton <div class="surface-1 row rounded">
v-if="employeeFormState.isEmployeeEdit" <UndoButton
id="btn-info-basic-undo" v-if="employeeFormState.isEmployeeEdit"
icon-only id="btn-info-basic-undo"
@click=" icon-only
() => { @click="
employeeFormStore.resetFormDataEmployee(); () => {
employeeFormState.isEmployeeEdit = false; employeeFormStore.resetFormDataEmployee();
employeeFormState.dialogType = 'info'; employeeFormState.isEmployeeEdit = false;
} employeeFormState.dialogType = 'info';
" }
type="button" "
/> type="button"
<SaveButton />
v-if="employeeFormState.isEmployeeEdit" <SaveButton
id="btn-info-basic-save" v-if="employeeFormState.isEmployeeEdit"
icon-only id="btn-info-basic-save"
type="submit" icon-only
/> type="submit"
<EditButton />
v-if="!employeeFormState.isEmployeeEdit" <EditButton
id="btn-info-basic-edit" v-if="!employeeFormState.isEmployeeEdit"
icon-only id="btn-info-basic-edit"
@click=" icon-only
() => { @click="
employeeFormState.isEmployeeEdit = true; () => {
employeeFormState.dialogType = 'edit'; employeeFormState.isEmployeeEdit = true;
} employeeFormState.dialogType = 'edit';
" }
type="button" "
/> type="button"
<DeleteButton />
v-if="!employeeFormState.isEmployeeEdit" <DeleteButton
id="btn-info-basic-delete" v-if="!employeeFormState.isEmployeeEdit"
icon-only id="btn-info-basic-delete"
@click=" icon-only
() => deleteEmployeeById({ id: currentFromDataEmployee.id }) @click="
" () =>
type="button" deleteEmployeeById({ id: currentFromDataEmployee.id })
/> "
type="button"
/>
</div>
</div> </div>
<BasicInformation <BasicInformation
no-action no-action
@ -3801,166 +3864,6 @@ const emptyCreateDialog = ref(false);
{{ $t(`general.uploadFile`) }} {{ $t(`general.uploadFile`) }}
</div> </div>
<!-- แก้ไขลูกจ้าง --> <!-- แก้ไขลูกจ้าง -->
<UploadFileGroup
v-model:current-id="currentFromDataEmployee.id"
v-model="currentFromDataEmployee.file"
hide-action
v-model:current-selected-menu="currentSelectedMenu"
:group-list="uploadFileListEmployee"
:menu="uploadFileListEmployee"
:columns="columnsAttachment"
:ocr="
async (group, file) => {
const res = await ocrStore.sendOcr({
file: file,
category: group,
});
if (res) {
const tempValue = {
status: true,
group,
meta: res.fields,
};
return tempValue;
}
return { status: false, group, meta: [] };
}
"
auto-save
:download="
(obj) => {
employeeStore.getFile({
parentId: currentFromDataEmployee.id || '',
group: obj.group,
fileId: obj._meta.id,
download: true,
});
}
"
:delete-item="
async (obj) => {
const res = await employeeStore.delMeta({
parentId: currentFromDataEmployee.id || '',
group: obj.group,
metaId: obj._meta.id,
});
if (res) {
return true;
}
return false;
}
"
:save="
async (
group: 'passport' | 'visa',
_meta: any,
file: File | undefined,
) => {
if (
file !== undefined &&
currentFromDataEmployee.id &&
!_meta.hasOwnProperty('id')
) {
const res = await employeeStore.postMeta({
parentId: currentFromDataEmployee.id || '',
group,
meta: _meta,
file,
});
if (res) {
return true;
}
} else {
const {
id,
employeeId,
createdAt,
updatedAt,
...payload
} = _meta;
const res = await employeeStore.putMeta({
parentId: currentFromDataEmployee.id || '',
group,
metaId: _meta.id,
meta: payload,
file,
});
if (res) {
return true;
}
}
return false;
}
"
:get-file-list="
async (group: 'passport' | 'visa') => {
if (!!currentFromDataEmployee.id) {
const resMeta = await employeeStore.getMetaList({
parentId: currentFromDataEmployee.id,
group,
});
const tempValue = resMeta.map(async (i: any) => {
return {
_meta: { ...i },
name: i.id || '',
group: group,
url: await employeeStore.getFile({
parentId: currentFromDataEmployee.id || '',
group,
fileId: i.id,
}),
file: undefined,
};
});
return await waitAll(tempValue);
}
return [];
}
"
>
<template #form="{ mode, meta, isEdit }">
<FormEmployeePassport
v-if="mode === 'passport' && meta"
prefix-id="drawer-info-employee"
id="form-passport"
dense
outlined
separator
ocr
:title="$t('customerEmployee.form.group.passport')"
:readonly="!isEdit"
v-model:passport-type="meta.type"
v-model:passport-number="meta.number"
v-model:passport-issue-date="meta.issueDate"
v-model:passport-expiry-date="meta.expireDate"
v-model:passport-issuing-place="meta.issuePlace"
v-model:passport-issuing-country="meta.issueCountry"
/>
<FormEmployeeVisa
v-if="mode === 'visa' && meta"
prefix-id="drawer-info-employee"
id="form-visa"
ocr
dense
outlined
title="customerEmployee.form.group.visa"
:readonly="!isEdit"
v-model:visa-type="meta.type"
v-model:visa-number="meta.number"
v-model:visa-issue-date="meta.issueDate"
v-model:visa-expiry-date="meta.expireDate"
v-model:visa-issuing-place="meta.issuePlace"
/>
<FormTm6 v-if="mode === 'tm6' && meta" />
</template>
</UploadFileGroup>
</div> </div>
</template> </template>
<template v-if="employeeFormState.currentTab === 'healthCheck'"> <template v-if="employeeFormState.currentTab === 'healthCheck'">