refactor:move dialog employee
This commit is contained in:
Thanaphon Frappet
parent
fd51b9abec
commit
77340ede96
2 changed files with 456 additions and 497 deletions
|
|
@ -6,15 +6,18 @@ import { nextTick, onMounted, reactive, ref } from 'vue';
|
|||
|
||||
// NOTE: Import stores
|
||||
import { setLocale, dateFormat, calculateAge } from 'src/utils/datetime';
|
||||
import { useEmployeeForm } from 'src/pages/03_customer-management/form';
|
||||
import useProductServiceStore from 'stores/product-service';
|
||||
import { baseUrl, waitAll } from 'src/stores/utils';
|
||||
import useCustomerStore from 'stores/customer';
|
||||
import useEmployeeStore from 'stores/employee';
|
||||
import useOptionStore from 'stores/options';
|
||||
import { baseUrl } from 'src/stores/utils';
|
||||
import { useQuotationForm } from './form';
|
||||
import useOcrStore from 'stores/ocr';
|
||||
|
||||
// NOTE Import Types
|
||||
import { QuotationPayload } from 'src/stores/quotations/types';
|
||||
import { EmployeeWorker } from 'src/stores/quotations/types';
|
||||
import { Employee } from 'src/stores/employee/types';
|
||||
import {
|
||||
ProductGroup,
|
||||
|
|
@ -23,6 +26,12 @@ import {
|
|||
} from 'src/stores/product-service/types';
|
||||
|
||||
// NOTE: Import Components
|
||||
import FormEmployeePassport from 'components/03_customer-management/FormEmployeePassport.vue';
|
||||
import BasicInformation from 'components/03_customer-management/employee/BasicInformation.vue';
|
||||
import FormEmployeeVisa from 'components/03_customer-management/FormEmployeeVisa.vue';
|
||||
import FormReferDocument from 'src/components/05_quotation/FormReferDocument.vue';
|
||||
import { UploadFileGroup, noticeJobEmployment } from 'components/upload-file';
|
||||
import FormPerson from 'components/02_personnel-management/FormPerson.vue';
|
||||
import ProductItem from 'components/05_quotation/ProductItem.vue';
|
||||
import WorkerItem from 'components/05_quotation/WorkerItem.vue';
|
||||
import ToggleButton from 'components/button/ToggleButton.vue';
|
||||
|
|
@ -30,9 +39,15 @@ import FormAbout from 'components/05_quotation/FormAbout.vue';
|
|||
import SelectZone from 'components/shared/SelectZone.vue';
|
||||
import PersonCard from 'components/shared/PersonCard.vue';
|
||||
import { AddButton, SaveButton } from 'components/button';
|
||||
import DialogForm from 'components/DialogForm.vue';
|
||||
import ProductServiceForm from './ProductServiceForm.vue';
|
||||
import QuotationFormInfo from './QuotationFormInfo.vue';
|
||||
import ProfileBanner from 'components/ProfileBanner.vue';
|
||||
import DialogForm from 'components/DialogForm.vue';
|
||||
import SideMenu from 'components/SideMenu.vue';
|
||||
import {
|
||||
uploadFileListEmployee,
|
||||
columnsAttachment,
|
||||
} from 'src/pages/03_customer-management/constant';
|
||||
|
||||
defineProps<{
|
||||
readonly?: boolean;
|
||||
|
|
@ -52,10 +67,12 @@ type ProductGroupId = string;
|
|||
type Id = string;
|
||||
|
||||
const productServiceStore = useProductServiceStore();
|
||||
const employeeFormStore = useEmployeeForm();
|
||||
const customerStore = useCustomerStore();
|
||||
const quotationForm = useQuotationForm();
|
||||
const employeeStore = useEmployeeStore();
|
||||
const optionStore = useOptionStore();
|
||||
const ocrStore = useOcrStore();
|
||||
const { locale } = useI18n();
|
||||
const $q = useQuasar();
|
||||
|
||||
|
|
@ -107,6 +124,9 @@ const productList = ref<Partial<Record<ProductGroupId, Product[]>>>({});
|
|||
const serviceList = ref<Partial<Record<ProductGroupId, Service[]>>>({});
|
||||
const productGroup = ref<ProductGroup[]>([]);
|
||||
|
||||
const { state: employeeFormState, currentFromDataEmployee } =
|
||||
storeToRefs(employeeFormStore);
|
||||
|
||||
const product = ref<Record<Id, Product>>({});
|
||||
const service = ref<Record<Id, Service>>({});
|
||||
|
||||
|
|
@ -114,6 +134,21 @@ const selectedGroupSub = ref<'product' | 'service' | null>(null);
|
|||
const selectedGroup = ref<ProductGroup | null>(null);
|
||||
const selectedProductServiceId = ref('');
|
||||
|
||||
const formDataEmployee = ref<EmployeeWorker>({
|
||||
alienReferencNumber: '',
|
||||
documentExpireDate: new Date(),
|
||||
lastNameEN: '',
|
||||
lastName: '',
|
||||
middleNameEN: '',
|
||||
middleName: '',
|
||||
firstNameEN: '',
|
||||
firstName: '',
|
||||
namePrefix: '',
|
||||
nationality: '',
|
||||
gender: '',
|
||||
dateOfBirth: new Date(),
|
||||
});
|
||||
|
||||
const productServiceList = ref<
|
||||
Required<QuotationPayload['productServiceList'][number]>[]
|
||||
>([]);
|
||||
|
|
@ -147,6 +182,13 @@ async function getAllService(
|
|||
if (ret) serviceList.value[groupId] = ret.result;
|
||||
}
|
||||
|
||||
function triggerCreateEmployee() {
|
||||
employeeFormStore.resetFormDataEmployee(true);
|
||||
employeeFormState.value.dialogType = 'create';
|
||||
employeeFormState.value.dialogModal = true;
|
||||
employeeFormState.value.isEmployeeEdit = true;
|
||||
}
|
||||
|
||||
async function triggerSelectEmployeeDialog() {
|
||||
pageState.employeeModal = true;
|
||||
await nextTick();
|
||||
|
|
@ -572,6 +614,351 @@ onMounted(async () => {
|
|||
"
|
||||
></ProductServiceForm>
|
||||
</div>
|
||||
|
||||
<!-- NOTE: START - Employee Add Form -->
|
||||
|
||||
<DialogForm
|
||||
hide-footer
|
||||
ref="formDialogRef"
|
||||
v-model:modal="employeeFormState.dialogModal"
|
||||
:title="$t('form.title.create', { name: $t('customer.employee') })"
|
||||
:submit="
|
||||
() => {
|
||||
quotationForm;
|
||||
}
|
||||
"
|
||||
:close="
|
||||
() => {
|
||||
employeeFormState.dialogModal = false;
|
||||
}
|
||||
"
|
||||
>
|
||||
<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
|
||||
color="white"
|
||||
icon="mdi-account-plus-outline"
|
||||
:bg-color="
|
||||
employeeFormState.profileUrl
|
||||
? 'white'
|
||||
: 'linear-gradient(135deg, rgba(43,137,223,1) 0%, rgba(230,51,81,1) 100%)'
|
||||
"
|
||||
v-model:current-tab="employeeFormState.currentTab"
|
||||
v-model:toggle-status="currentFromDataEmployee.status"
|
||||
fallbackCover="/images/employee-banner.png"
|
||||
:img="employeeFormState.profileUrl || `/images/employee-avatar.png`"
|
||||
:toggleTitle="$t('status.title')"
|
||||
hideFade
|
||||
@view="
|
||||
() => {
|
||||
employeeFormState.imageDialog = true;
|
||||
employeeFormState.isImageEdit = false;
|
||||
}
|
||||
"
|
||||
@edit="
|
||||
employeeFormState.imageDialog = employeeFormState.isImageEdit = true
|
||||
"
|
||||
@update:toggle-status="
|
||||
() => {
|
||||
currentFromDataEmployee.status =
|
||||
currentFromDataEmployee.status === 'CREATED'
|
||||
? 'INACTIVE'
|
||||
: 'CREATED';
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="col"
|
||||
:class="{
|
||||
'q-px-lg q-pb-lg': $q.screen.gt.sm,
|
||||
'q-px-md q-pb-sm': !$q.screen.gt.sm,
|
||||
}"
|
||||
>
|
||||
<div
|
||||
style="overflow-y: auto"
|
||||
class="row full-width full-height surface-1 rounded bordered relative-position"
|
||||
>
|
||||
<div
|
||||
:class="{
|
||||
'q-py-md q-px-lg': $q.screen.gt.sm,
|
||||
'q-py-sm q-px-lg': !$q.screen.gt.sm,
|
||||
}"
|
||||
style="position: absolute; z-index: 99999; top: 0; right: 0"
|
||||
>
|
||||
<div
|
||||
v-if="currentFromDataEmployee.status !== 'INACTIVE'"
|
||||
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
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col full-height rounded scroll row q-py-md q-pl-md q-pr-sm"
|
||||
v-if="$q.screen.gt.sm"
|
||||
>
|
||||
<SideMenu
|
||||
:menu="[
|
||||
{
|
||||
name: $t('form.customerInformation'),
|
||||
anchor: 'form-information',
|
||||
},
|
||||
{
|
||||
name: $t('customerBranch.tab.business'),
|
||||
anchor: 'form-business',
|
||||
},
|
||||
{
|
||||
name: $t('form.address'),
|
||||
anchor: 'form-address',
|
||||
},
|
||||
]"
|
||||
background="transparent"
|
||||
:active="{
|
||||
background: 'hsla(var(--blue-6-hsl) / .2)',
|
||||
foreground: 'var(--blue-6)',
|
||||
}"
|
||||
scroll-element="#branch-form"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="col-12 col-md-10 full-height q-col-gutter-sm"
|
||||
:class="{
|
||||
'q-py-md q-pr-md ': $q.screen.gt.sm,
|
||||
'q-py-md q-px-lg': !$q.screen.gt.sm,
|
||||
}"
|
||||
id="branch-form"
|
||||
style="overflow-y: auto"
|
||||
>
|
||||
<FormReferDocument
|
||||
title="form.field.basicInformation"
|
||||
prefixId="dialog"
|
||||
dense
|
||||
v-model:alien-reference-number="
|
||||
formDataEmployee.alienReferencNumber
|
||||
"
|
||||
v-model:document-expire-date="formDataEmployee.documentExpireDate"
|
||||
/>
|
||||
|
||||
<FormPerson
|
||||
id="form-personal"
|
||||
prefix-id="form-employee"
|
||||
dense
|
||||
outlined
|
||||
employee
|
||||
separator
|
||||
hideNameEn
|
||||
title="personnel.form.personalInformation"
|
||||
class="q-mb-xl"
|
||||
v-model:prefix-name="formDataEmployee.namePrefix"
|
||||
v-model:first-name="formDataEmployee.firstName"
|
||||
v-model:mid-name="formDataEmployee.middleName"
|
||||
v-model:last-name="formDataEmployee.lastName"
|
||||
v-model:birth-date="formDataEmployee.dateOfBirth"
|
||||
v-model:gender="formDataEmployee.gender"
|
||||
v-model:nationality="formDataEmployee.nationality"
|
||||
/>
|
||||
|
||||
<UploadFileGroup
|
||||
v-model:current-id="currentFromDataEmployee.id"
|
||||
v-model="currentFromDataEmployee.file"
|
||||
hide-action
|
||||
: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="currentFromDataEmployee.id !== ''"
|
||||
:download="
|
||||
(obj) => {
|
||||
employeeStore.getFile({
|
||||
parentId: currentFromDataEmployee.id || '',
|
||||
group: obj.group,
|
||||
fileId: obj._meta.id,
|
||||
});
|
||||
}
|
||||
"
|
||||
: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) {
|
||||
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"
|
||||
/>
|
||||
|
||||
<noticeJobEmployment v-if="mode === 'noticeJobEmployment'" />
|
||||
</template>
|
||||
</UploadFileGroup>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DialogForm>
|
||||
|
||||
<!-- NOTE: END - Employee Add Form -->
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue