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

refactor:move dialog employee

Browse source
This commit is contained in:
Thanaphon Frappet 2024-10-04 17:01:24 +07:00
parent fd51b9abec
commit 77340ede96
2 changed files with 456 additions and 497 deletions
Download patch file Download diff file Expand all files Collapse all files

562
src/pages/05_quotation/MainPage.vue
View file

@ -8,26 +8,21 @@ import { storeToRefs } from 'pinia';
// NOTE: Import stores
import useProductServiceStore from 'src/stores/product-service';
import { useQuotationStore } from 'src/stores/quotations';
import { baseUrl, waitAll } from 'src/stores/utils';
import useCustomerStore from 'stores/customer';
import useEmployeeStore from 'stores/employee';
import { isRoleInclude } from 'stores/utils';
import useFlowStore from 'src/stores/flow';
import useOcrStore from 'stores/ocr';
import useMyBranch from 'stores/my-branch';
import { useQuotationForm } from './form';
import useOcrStore from 'stores/ocr';
// NOTE Import Types
import { CustomerBranchCreate } from 'stores/customer/types';
import { Employee } from 'src/stores/employee/types';
// NOTE: Import Components
import BasicInformation from 'components/03_customer-management/employee/BasicInformation.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 QuotationCard from 'src/components/05_quotation/QuotationCard.vue';
import PaginationComponent from 'src/components/PaginationComponent.vue';
import StatCardComponent from 'src/components/StatCardComponent.vue';
import ButtonAddComponent from 'components/ButtonAddCompoent.vue';
import FormAbout from 'src/components/05_quotation/FormAbout.vue';
import SelectZone from 'src/components/shared/SelectZone.vue';
import PersonCard from 'src/components/shared/PersonCard.vue';
@ -37,33 +32,20 @@ import ItemCard from 'src/components/ItemCard.vue';
import DialogForm from 'components/DialogForm.vue';
import { AddButton } from 'src/components/button';
import SideMenu from 'components/SideMenu.vue';
import ButtonAddComponent from 'components/ButtonAddCompoent.vue';
import {
uploadFileListEmployee,
columnsAttachment,
dialogCreateCustomerItem,
} from 'src/pages/03_customer-management/constant';
import { dialogCreateCustomerItem } from 'src/pages/03_customer-management/constant';
import {
ProductGroup,
Product,
Service,
} from 'src/stores/product-service/types';
import { EmployeeWorker } from 'src/stores/quotations/types';
import {
EditButton,
DeleteButton,
SaveButton,
UndoButton,
} from 'components/button';
import { SaveButton } from 'components/button';
import ProfileBanner from 'components/ProfileBanner.vue';
import { AddressForm } from 'components/form';
import {
EmployerFormBusiness,
EmployerFormContact,
EmployerFormAbout,
} from 'src/pages/03_customer-management/components';
@ -76,8 +58,6 @@ import QuotationView from './QuotationView.vue';
const quotationFormStore = useQuotationForm();
const customerFormStore = useCustomerForm();
const employeeFormStore = useEmployeeForm();
const employeeStore = useEmployeeStore();
const customerStore = useCustomerStore();
const flowStore = useFlowStore();
const userBranch = useMyBranch();
const ocrStore = useOcrStore();
@ -85,8 +65,6 @@ const ocrStore = useOcrStore();
const { currentFormData: quotationFormData } = storeToRefs(quotationFormStore);
const { state: customerFormState, currentFormData: customerFormData } =
storeToRefs(customerFormStore);
const { state: employeeFormState, currentFromDataEmployee } =
storeToRefs(employeeFormStore);
const { currentMyBranch } = storeToRefs(userBranch);
const special = ref(false);
@ -194,21 +172,6 @@ const statData = ref<
},
]);
const formDataEmployee = ref<EmployeeWorker>({
alienReferencNumber: '',
documentExpireDate: new Date(),
lastNameEN: '',
lastName: '',
middleNameEN: '',
middleName: '',
firstNameEN: '',
firstName: '',
namePrefix: '',
nationality: '',
gender: '',
dateOfBirth: new Date(),
});
const formDataCustomerBranch = ref<
CustomerBranchCreate & {
id?: string;
@ -266,77 +229,71 @@ const formDataCustomerBranch = ref<
});
function setDefaultCustomerd() {
customerFormData.value.customerBranch = [
{
customerCode: '',
customerId: '',
legalPersonNo: '',
citizenId: '',
namePrefix: '',
firstName: '',
lastName: '',
firstNameEN: '',
lastNameEN: '',
telephoneNo: '',
gender: '',
birthDate: new Date().toString(),
businessType: '',
jobPosition: '',
jobDescription: '',
payDate: '',
payDateEN: '',
wageRate: 0,
wageRateText: '',
homeCode: '',
employmentOffice: '',
employmentOfficeEN: '',
address: '',
addressEN: '',
street: '',
streetEN: '',
moo: '',
mooEN: '',
soi: '',
soiEN: '',
provinceId: '',
districtId: '',
subDistrictId: '',
contactName: '',
email: '',
contactTel: '',
officeTel: '',
agent: '',
status: 'CREATED',
customerName: '',
registerName: '',
registerNameEN: '',
registerDate: new Date(),
authorizedCapital: '',
authorizedName: '',
authorizedNameEN: '',
code: '',
},
];
formDataCustomerBranch.value = {
customerCode: '',
customerId: '',
legalPersonNo: '',
citizenId: '',
namePrefix: '',
firstName: '',
lastName: '',
firstNameEN: '',
lastNameEN: '',
telephoneNo: '',
gender: '',
birthDate: new Date().toString(),
businessType: '',
jobPosition: '',
jobDescription: '',
payDate: '',
payDateEN: '',
wageRate: 0,
wageRateText: '',
homeCode: '',
employmentOffice: '',
employmentOfficeEN: '',
address: '',
addressEN: '',
street: '',
streetEN: '',
moo: '',
mooEN: '',
soi: '',
soiEN: '',
provinceId: '',
districtId: '',
subDistrictId: '',
contactName: '',
email: '',
contactTel: '',
officeTel: '',
agent: '',
status: 'CREATED',
customerName: '',
registerName: '',
registerNameEN: '',
registerDate: new Date(),
authorizedCapital: '',
authorizedName: '',
authorizedNameEN: '',
code: '',
};
}
function submitCustomer() {
async function submitCustomer() {
if (currentMyBranch.value === undefined) return;
const { code, customerCode, birthDate, ...payload } =
formDataCustomerBranch.value;
customerFormData.value.customerBranch = [{ ...payload }];
customerFormData.value.registeredBranchId = currentMyBranch.value.id;
customerFormStore.submitFormCustomer();
customerFormState.value.dialogType = 'info';
customerFormState.value.editCustomerId = '218554';
}
customerFormData.value.registeredBranchId = isRoleInclude(['system'])
? branchId.value
: currentMyBranch.value.id;
await customerFormStore.submitFormCustomer();
function triggerCreateEmployee() {
employeeFormStore.resetFormDataEmployee(true);
employeeFormState.value.dialogType = 'create';
employeeFormState.value.dialogModal = true;
employeeFormState.value.isEmployeeEdit = true;
customerFormState.value.dialogModal = false;
// customerFormState.value.dialogType = 'info';
}
function triggerCreateCustomerd(opts: { type: 'CORP' | 'PERS' }) {
@ -1011,6 +968,8 @@ watch(() => pageState.currentTab, fetchQuotationList);
:close="
() => {
customerFormState.dialogModal = false;
customerFormStore.resetForm(true);
setDefaultCustomerd();
}
"
>
@ -1080,15 +1039,6 @@ watch(() => pageState.currentTab, fetchQuotationList);
v-if="customerFormData.status !== 'INACTIVE'"
class="surface-1 row rounded"
>
<UndoButton
v-if="
customerFormState.dialogType === 'edit' &&
customerFormState.editCustomerId !== undefined
"
icon-only
@click="() => {}"
type="button"
/>
<SaveButton
v-if="
customerFormState.dialogType === 'edit' ||
@ -1098,32 +1048,6 @@ watch(() => pageState.currentTab, fetchQuotationList);
icon-only
type="submit"
/>
<EditButton
v-if="
customerFormState.dialogType !== 'edit' &&
customerFormState.editCustomerId !== undefined
"
id="btn-info-basic-edit"
icon-only
@click="() => {}"
type="button"
/>
<DeleteButton
v-if="
customerFormState.dialogType !== 'edit' &&
customerFormState.editCustomerId !== undefined
"
id="btn-info-basic-delete"
icon-only
@click="
() => {
//triggerDelete
}
"
type="button"
/>
</div>
</div>
<div
@ -1168,6 +1092,7 @@ watch(() => pageState.currentTab, fetchQuotationList);
show-title
:index="(0).toString()"
:customerType="customerFormData.customerType"
:readonly="customerFormState.dialogType === 'info'"
v-model:citizen-id="formDataCustomerBranch.citizenId"
v-model:prefix-name="formDataCustomerBranch.namePrefix"
v-model:first-name="formDataCustomerBranch.firstName"
@ -1193,6 +1118,7 @@ watch(() => pageState.currentTab, fetchQuotationList);
prefixId="dialog"
dense
outlined
:readonly="customerFormState.dialogType === 'info'"
v-model:bussiness-type="formDataCustomerBranch.businessType"
v-model:job-position="formDataCustomerBranch.jobPosition"
v-model:job-description="formDataCustomerBranch.jobDescription"
@ -1210,6 +1136,8 @@ watch(() => pageState.currentTab, fetchQuotationList);
:title="$t('form.address')"
:addressTitle="$t('form.address')"
:addressTitleEN="$t('form.address', { suffix: '(EN)' })"
:readonly="customerFormState.dialogType === 'info'"
v-model:bussiness-type="formDataCustomerBranch.businessType"
v-model:address="formDataCustomerBranch.address"
v-model:address-en="formDataCustomerBranch.addressEN"
v-model:street="formDataCustomerBranch.street"
@ -1228,362 +1156,6 @@ watch(() => pageState.currentTab, fetchQuotationList);
</div>
</DialogForm>
<!-- NOTE: END - Customer / Employer Add Form -->
<!-- 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="() => {}"
:close="
() => {
customerFormState.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="customerFormData.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 }">
<FormCitizen
v-if="mode === 'citizen' && meta"
orc
ra
:readonly="!isEdit"
v-model:citizen-id="meta.citizenId"
v-model:birth-date="meta.birthDate"
v-model:first-name="meta.firstName"
v-model:first-name-en="meta.firstNameEN"
v-model:last-name="meta.lastName"
v-model:last-name-en="meta.lastNameEN"
v-model:address="meta.address"
/>
<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 -->
<ProductServiceForm
v-model="pageState.productServiceModal"
v-model:product-group="productGroup"

391
src/pages/05_quotation/QuotationForm.vue
View file

@ -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>