fix(03): profile layout
This commit is contained in:
puriphatt
parent
fb068c005d
commit
f423c305fb
1 changed files with 160 additions and 257 deletions
|
|
@ -1948,7 +1948,12 @@ const emptyCreateDialog = ref(false);
|
|||
</DialogHeader>
|
||||
</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
|
||||
v-if="customerFormData.customerBranch !== undefined"
|
||||
active
|
||||
|
|
@ -1989,8 +1994,11 @@ const emptyCreateDialog = ref(false);
|
|||
</div>
|
||||
<div
|
||||
style="flex: 1; width: 100%; overflow-y: auto"
|
||||
class="surface-2 q-pa-lg"
|
||||
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
|
||||
|
|
@ -2050,7 +2058,11 @@ const emptyCreateDialog = ref(false);
|
|||
</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"
|
||||
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
|
||||
active
|
||||
useToggle
|
||||
|
|
@ -2390,7 +2407,10 @@ const emptyCreateDialog = ref(false);
|
|||
|
||||
<div
|
||||
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"
|
||||
>
|
||||
<div class="col surface-1 full-height rounded bordered scroll row">
|
||||
|
|
@ -2463,58 +2483,68 @@ const emptyCreateDialog = ref(false);
|
|||
</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"
|
||||
style="height: 100%; max-height: 100; overflow-y: auto"
|
||||
>
|
||||
<template v-if="employeeFormState.currentTab === 'personalInfo'">
|
||||
<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%"
|
||||
>
|
||||
<UndoButton
|
||||
v-if="
|
||||
employeeFormState.isEmployeeEdit &&
|
||||
employeeFormState.dialogType !== 'create'
|
||||
"
|
||||
id="btn-info-basic-undo"
|
||||
icon-only
|
||||
@click="
|
||||
() => {
|
||||
employeeFormStore.resetFormDataEmployee();
|
||||
employeeFormState.isEmployeeEdit = false;
|
||||
employeeFormState.dialogType = 'info';
|
||||
}
|
||||
"
|
||||
type="button"
|
||||
/>
|
||||
<SaveButton
|
||||
v-if="employeeFormState.isEmployeeEdit"
|
||||
id="btn-info-basic-save"
|
||||
icon-only
|
||||
type="submit"
|
||||
/>
|
||||
<EditButton
|
||||
v-if="!employeeFormState.isEmployeeEdit"
|
||||
id="btn-info-basic-edit"
|
||||
icon-only
|
||||
@click="
|
||||
() => {
|
||||
employeeFormState.isEmployeeEdit = true;
|
||||
employeeFormState.dialogType = 'edit';
|
||||
}
|
||||
"
|
||||
type="button"
|
||||
/>
|
||||
<DeleteButton
|
||||
v-if="!employeeFormState.isEmployeeEdit"
|
||||
id="btn-info-basic-delete"
|
||||
icon-only
|
||||
@click="
|
||||
() => deleteEmployeeById({ id: currentFromDataEmployee.id })
|
||||
"
|
||||
type="button"
|
||||
/>
|
||||
<div class="surface-1 row rounded">
|
||||
<UndoButton
|
||||
v-if="
|
||||
employeeFormState.isEmployeeEdit &&
|
||||
employeeFormState.dialogType !== 'create'
|
||||
"
|
||||
id="btn-info-basic-undo"
|
||||
icon-only
|
||||
@click="
|
||||
() => {
|
||||
employeeFormStore.resetFormDataEmployee();
|
||||
employeeFormState.isEmployeeEdit = false;
|
||||
employeeFormState.dialogType = 'info';
|
||||
}
|
||||
"
|
||||
type="button"
|
||||
/>
|
||||
<SaveButton
|
||||
v-if="employeeFormState.isEmployeeEdit"
|
||||
id="btn-info-basic-save"
|
||||
icon-only
|
||||
type="submit"
|
||||
/>
|
||||
<EditButton
|
||||
v-if="!employeeFormState.isEmployeeEdit"
|
||||
id="btn-info-basic-edit"
|
||||
icon-only
|
||||
@click="
|
||||
() => {
|
||||
employeeFormState.isEmployeeEdit = true;
|
||||
employeeFormState.dialogType = 'edit';
|
||||
}
|
||||
"
|
||||
type="button"
|
||||
/>
|
||||
<DeleteButton
|
||||
v-if="!employeeFormState.isEmployeeEdit"
|
||||
id="btn-info-basic-delete"
|
||||
icon-only
|
||||
@click="
|
||||
() => deleteEmployeeById({ id: currentFromDataEmployee.id })
|
||||
"
|
||||
type="button"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<BasicInformation
|
||||
|
|
@ -3146,7 +3176,12 @@ const emptyCreateDialog = ref(false);
|
|||
"
|
||||
>
|
||||
<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
|
||||
v-if="customerFormData.customerBranch !== undefined"
|
||||
:active="customerFormData.status !== 'INACTIVE'"
|
||||
|
|
@ -3199,8 +3234,12 @@ const emptyCreateDialog = ref(false);
|
|||
|
||||
<div
|
||||
style="flex: 1; width: 100%; overflow-y: auto"
|
||||
class="surface-2 q-pa-lg column"
|
||||
class="column"
|
||||
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 full-height scroll" v-if="$q.screen.gt.sm">
|
||||
|
|
@ -3258,7 +3297,11 @@ const emptyCreateDialog = ref(false);
|
|||
</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"
|
||||
style="height: 100%; max-height: 100%; overflow-y: auto"
|
||||
>
|
||||
|
|
@ -3541,7 +3584,12 @@ const emptyCreateDialog = ref(false);
|
|||
"
|
||||
>
|
||||
<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
|
||||
hideFade
|
||||
@view="
|
||||
|
|
@ -3606,8 +3654,12 @@ const emptyCreateDialog = ref(false);
|
|||
</div>
|
||||
<div
|
||||
style="flex: 1; width: 100%; overflow-y: auto"
|
||||
class="surface-2 q-pa-lg column"
|
||||
class="column"
|
||||
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 full-height scroll" v-if="$q.screen.gt.sm">
|
||||
|
|
@ -3676,59 +3728,70 @@ const emptyCreateDialog = ref(false);
|
|||
</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"
|
||||
style="height: 100%; overflow-y: auto"
|
||||
>
|
||||
<template v-if="employeeFormState.currentTab === 'personalInfo'">
|
||||
<div
|
||||
class="surface-1 rounded q-pt-sm row"
|
||||
class="rounded row"
|
||||
style="position: absolute; z-index: 999; right: 4%"
|
||||
v-if="
|
||||
currentTab === 'employee' &&
|
||||
currentFromDataEmployee.status !== 'INACTIVE'
|
||||
"
|
||||
:class="{
|
||||
'q-py-md q-px-lg': $q.screen.gt.sm,
|
||||
' q-px-md': !$q.screen.gt.sm,
|
||||
}"
|
||||
>
|
||||
<UndoButton
|
||||
v-if="employeeFormState.isEmployeeEdit"
|
||||
id="btn-info-basic-undo"
|
||||
icon-only
|
||||
@click="
|
||||
() => {
|
||||
employeeFormStore.resetFormDataEmployee();
|
||||
employeeFormState.isEmployeeEdit = false;
|
||||
employeeFormState.dialogType = 'info';
|
||||
}
|
||||
"
|
||||
type="button"
|
||||
/>
|
||||
<SaveButton
|
||||
v-if="employeeFormState.isEmployeeEdit"
|
||||
id="btn-info-basic-save"
|
||||
icon-only
|
||||
type="submit"
|
||||
/>
|
||||
<EditButton
|
||||
v-if="!employeeFormState.isEmployeeEdit"
|
||||
id="btn-info-basic-edit"
|
||||
icon-only
|
||||
@click="
|
||||
() => {
|
||||
employeeFormState.isEmployeeEdit = true;
|
||||
employeeFormState.dialogType = 'edit';
|
||||
}
|
||||
"
|
||||
type="button"
|
||||
/>
|
||||
<DeleteButton
|
||||
v-if="!employeeFormState.isEmployeeEdit"
|
||||
id="btn-info-basic-delete"
|
||||
icon-only
|
||||
@click="
|
||||
() => deleteEmployeeById({ id: currentFromDataEmployee.id })
|
||||
"
|
||||
type="button"
|
||||
/>
|
||||
<div class="surface-1 row rounded">
|
||||
<UndoButton
|
||||
v-if="employeeFormState.isEmployeeEdit"
|
||||
id="btn-info-basic-undo"
|
||||
icon-only
|
||||
@click="
|
||||
() => {
|
||||
employeeFormStore.resetFormDataEmployee();
|
||||
employeeFormState.isEmployeeEdit = false;
|
||||
employeeFormState.dialogType = 'info';
|
||||
}
|
||||
"
|
||||
type="button"
|
||||
/>
|
||||
<SaveButton
|
||||
v-if="employeeFormState.isEmployeeEdit"
|
||||
id="btn-info-basic-save"
|
||||
icon-only
|
||||
type="submit"
|
||||
/>
|
||||
<EditButton
|
||||
v-if="!employeeFormState.isEmployeeEdit"
|
||||
id="btn-info-basic-edit"
|
||||
icon-only
|
||||
@click="
|
||||
() => {
|
||||
employeeFormState.isEmployeeEdit = true;
|
||||
employeeFormState.dialogType = 'edit';
|
||||
}
|
||||
"
|
||||
type="button"
|
||||
/>
|
||||
<DeleteButton
|
||||
v-if="!employeeFormState.isEmployeeEdit"
|
||||
id="btn-info-basic-delete"
|
||||
icon-only
|
||||
@click="
|
||||
() =>
|
||||
deleteEmployeeById({ id: currentFromDataEmployee.id })
|
||||
"
|
||||
type="button"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<BasicInformation
|
||||
no-action
|
||||
|
|
@ -3801,166 +3864,6 @@ const emptyCreateDialog = ref(false);
|
|||
{{ $t(`general.uploadFile`) }}
|
||||
</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>
|
||||
</template>
|
||||
<template v-if="employeeFormState.currentTab === 'healthCheck'">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue