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

refactor: by value form employee and customer

Browse source
This commit is contained in:
Thanaphon Frappet 2024-10-01 14:27:42 +07:00
parent 9aee87776f
commit d44dfa48ab
2 changed files with 703 additions and 377 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,28 +1,33 @@
<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue';
import { storeToRefs } from 'pinia';
import { pageTabs, fieldSelectedOption } from './constants';
import { baseUrl, waitAll } from 'src/stores/utils';
import useOcrStore from 'stores/ocr';
import useEmployeeStore from 'stores/employee';
import {
productTreeDecoration,
pageTabs,
fieldSelectedOption,
} from './constants';
uploadFileListEmployee,
columnsAttachment,
dialogCreateCustomerItem,
} from 'src/pages/03_customer-management/constant';
import SideMenu from 'components/SideMenu.vue';
import useProductServiceStore from 'src/stores/product-service';
import {
ProductGroup,
ProductList,
Service,
} from 'src/stores/product-service/types';
import { EmployeeWorker } from 'src/stores/quotations/types';
import {
EditButton,
DeleteButton,
SaveButton,
UndoButton,
} from 'components/button';
import {
UploadFileGroup,
FormTm6,
noticeJobEmployment,
} from 'components/upload-file';
import { UploadFileGroup, noticeJobEmployment } from 'components/upload-file';
import BasicInformation from 'components/03_customer-management/employee/BasicInformation.vue';
import FormReferDocument from 'src/components/05_quotation/FormReferDocument.vue';
@ -31,20 +36,16 @@ import { DialogContainer, DialogHeader } from 'components/dialog';
import ProfileBanner from 'components/ProfileBanner.vue';
import { AddressForm } from 'components/form';
import {
EmployerFormBasicInfo,
EmployerFormBusiness,
EmployerFormContact,
EmployerFormAbout,
} from 'src/pages/03_customer-management/components';
import ItemCard from 'src/components/ItemCard.vue';
import { CustomerBranchCreate } from 'stores/customer/types';
import DialogForm from 'components/DialogForm.vue';
import useFlowStore from 'src/stores/flow';
import { Employee } from 'src/stores/employee/types';
import QuotationForm from './QuotationForm.vue';
import TreeView from 'src/components/shared/TreeView.vue';
import MainButton from 'src/components/button/MainButton.vue';
import { AddButton } from 'src/components/button';
import StatCardComponent from 'src/components/StatCardComponent.vue';
import CreateButton from 'src/components/AddButton.vue';
@ -93,18 +94,24 @@ const tabFieldRequired = ref<{ [key: string]: (keyof CustomerBranchCreate)[] }>(
},
);
const employeeStore = useEmployeeStore();
const ocrStore = useOcrStore();
const customerFormStore = useCustomerForm();
const employeeFormStore = useEmployeeForm();
const customerStore = useCustomerStore();
const currentCustomerId = ref<string | undefined>();
const { state: customerFormState, currentFormData: customerFormData } =
storeToRefs(customerFormStore);
const { state: employeeFormState, currentFromDataEmployee } =
storeToRefs(employeeFormStore);
const refreshImageState = ref(false);
const onCreateImageList = ref<{
selectedImage: string;
list: { url: string; imgFile: File | null; name: string }[];
}>({ selectedImage: '', list: [] });
const test1 = ref(false);
const test2 = ref(false);
const dialog = ref(true);
const nodes = ref<Node[]>([
{
title: 'กลุ่มสินค้าและบริการที่ 1',
@ -272,6 +279,143 @@ 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>({
customerCode: '',
customerId: '',
legalPersonNo: '',
citizenId: '',
namePrefix: '',
firstName: '',
lastName: '',
firstNameEN: '',
lastNameEN: '',
telephoneNo: '',
gender: '',
birthDate: '',
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 setDefaultCustomerd() {
customerFormData.value.customerBranch = [
{
customerCode: '',
customerId: '',
legalPersonNo: '',
citizenId: '',
namePrefix: '',
firstName: '',
lastName: '',
firstNameEN: '',
lastNameEN: '',
telephoneNo: '',
gender: '',
birthDate: '',
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 triggerCreateEmployee() {
employeeFormStore.resetFormDataEmployee(true);
employeeFormState.value.dialogType = 'create';
employeeFormState.value.dialogModal = true;
employeeFormState.value.isEmployeeEdit = true;
}
function triggerCreateCustomerd(opts: { type: 'CORP' | 'PERS' }) {
setDefaultCustomerd();
customerFormState.value.dialogType = 'create';
customerFormData.value.customerType = opts?.type;
customerFormState.value.dialogModal = true;
}
function triggerSelectTypeCustomerd() {
emptyCreateDialog.value = true;
}
function triggerAddQuotationDialog() {
pageState.addModal = true;
// TODO: form and state controll
@ -840,7 +984,10 @@ watch(() => pageState.currentTab, fetchQuotationList);
id="customer-form-content"
style="height: 100%; max-height: 100%; overflow-y: auto"
>
<FormAbout prefixId="zxc" @add-customer="console.log('asdasd')" />
<FormAbout
prefixId="zxc"
@add-customer="triggerSelectTypeCustomerd()"
/>
</div>
</section>
</DialogForm>
@ -880,7 +1027,17 @@ watch(() => pageState.currentTab, fetchQuotationList);
},
]"
>
<template #top><AddButton icon-only /></template>
<template #top>
<AddButton
icon-only
@click="
() => {
triggerCreateEmployee();
console.log('asdassdasd');
}
"
/>
</template>
<template #data="{ item }">
<PersonCard
noAction
@ -903,9 +1060,48 @@ watch(() => pageState.currentTab, fetchQuotationList);
</section>
</DialogForm>
<DialogContainer v-model="test1" :on-open="() => {}">
<template #header>
<DialogHeader
<!-- add customer -->
<DialogForm
v-model:modal="emptyCreateDialog"
:title="$t('customer.employerType')"
hide-footer
no-app-box
width="40vw"
height="250px"
:close="
() => {
emptyCreateDialog = false;
onCreateImageList = { selectedImage: '', list: [] };
}
"
>
<div class="full-height row q-pa-md">
<ItemCard
class="col q-mx-sm full-height"
v-for="value in dialogCreateCustomerItem"
:key="value.text"
:icon="value.icon"
:text="value.text"
:icon-color="value.iconColor"
:bg-color="value.color"
@trigger="
() => {
triggerCreateCustomerd({
type:
value.text === 'customer.employerLegalEntity' ? 'CORP' : 'PERS',
});
emptyCreateDialog = false;
}
"
/>
</div>
</DialogForm>
<!-- form add นายจ้าง -->
<DialogForm
hide-footer
ref="formDialogRef"
v-model:modal="customerFormState.dialogModal"
:title="
customerFormState.dialogType === 'create'
? $t(`general.add`, {
@ -913,23 +1109,19 @@ watch(() => pageState.currentTab, fetchQuotationList);
})
: `${$t('customer.employer')} `
"
:submit="() => {}"
:close="
() => {
customerFormState.dialogModal = false;
}
"
>
<template #title-after>
<span
:style="`color: hsla(var(--${customerFormData.customerType === 'PERS' ? 'teal-10-hsl' : 'violet-11-hsl'})/1)`"
<div
:class="{
'q-mx-lg q-my-md': $q.screen.gt.sm,
'q-mx-md q-my-sm': !$q.screen.gt.sm,
}"
>
:
{{
customerFormData.customerType === 'CORP'
? $t('customer.employerLegalEntity')
: $t('customer.employerNaturalPerson')
}}
</span>
</template>
</DialogHeader>
</template>
<div class="q-px-lg q-pt-lg surface-2">
<ProfileBanner
v-if="customerFormData.customerBranch !== undefined"
active
@ -949,13 +1141,13 @@ watch(() => pageState.currentTab, fetchQuotationList);
"
:title="
customerFormData.customerType === 'PERS'
? `${customerFormData.customerBranch[0]?.firstName} ${customerFormData.customerBranch[0]?.lastName}`
: customerFormData.customerBranch[0]?.registerName
? `${customerFormData.customerBranch[0]?.firstName || ''} ${customerFormData.customerBranch[0]?.lastName || ''}`
: customerFormData.customerBranch[0]?.registerName || ''
"
:caption="
customerFormData.customerType === 'PERS'
? `${customerFormData.customerBranch[0]?.firstNameEN} ${customerFormData.customerBranch[0]?.lastNameEN}`
: customerFormData.customerBranch[0]?.registerNameEN
? `${customerFormData.customerBranch[0]?.firstNameEN || ''} ${customerFormData.customerBranch[0]?.lastNameEN || ''}`
: customerFormData.customerBranch[0]?.registerNameEN || ''
"
@view="
() => {
@ -968,128 +1160,195 @@ watch(() => pageState.currentTab, fetchQuotationList);
"
/>
</div>
<q-form
style="flex: 1; width: 100%; overflow-y: auto"
class="surface-2 q-pa-lg"
id="customer-form"
greedy
@submit.prevent="
async () => {
console.log('test');
}
"
>
<div class="col surface-1 full-height rounded bordered scroll row">
<div
class="col-12 q-py-md q-pr-md q-pl-sm"
id="customer-form-content"
style="height: 100%; max-height: 100%; overflow-y: auto"
class="col"
:class="{
'q-px-lg q-pb-lg': $q.screen.gt.sm,
'q-px-md q-pb-sm': !$q.screen.gt.sm,
}"
>
<div
class="surface-1 rounded q-pt-sm row"
style="position: absolute; z-index: 999; right: 4%"
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'
customerFormState.dialogType === 'edit' &&
currentCustomerId !== undefined
"
id="btn-info-basic-undo"
icon-only
@click="
() => {
employeeFormStore.resetFormDataEmployee();
employeeFormState.isEmployeeEdit = false;
employeeFormState.dialogType = 'info';
}
"
@click="() => {}"
type="button"
/>
<SaveButton
v-if="employeeFormState.isEmployeeEdit"
v-if="
customerFormState.dialogType === 'edit' ||
customerFormState.dialogType === 'create'
"
id="btn-info-basic-save"
icon-only
type="submit"
/>
<EditButton
v-if="!employeeFormState.isEmployeeEdit"
v-if="
customerFormState.dialogType !== 'edit' &&
currentCustomerId !== undefined
"
id="btn-info-basic-edit"
icon-only
@click="() => {}"
type="button"
/>
<DeleteButton
v-if="
customerFormState.dialogType !== 'edit' &&
currentCustomerId !== undefined
"
id="btn-info-basic-delete"
icon-only
@click="
() => {
employeeFormState.isEmployeeEdit = true;
employeeFormState.dialogType = 'edit';
//triggerDelete
}
"
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="row full-width q-col-gutter-sm"
id="form-branch-customer-branch"
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"
>
<!-- v-if="customerFormData.customerBranch" -->
<!-- v-if="!!customerFormState.editCustomerId" -->
<div class="col-12 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)"
<EmployerFormAbout
id="form-information"
show-title
:index="(0).toString()"
:customerType="customerFormData.customerType"
v-model:citizen-id="formDataCustomerBranch.citizenId"
v-model:prefix-name="formDataCustomerBranch.namePrefix"
v-model:first-name="formDataCustomerBranch.firstName"
v-model:last-name="formDataCustomerBranch.lastName"
v-model:first-name-en="formDataCustomerBranch.firstNameEN"
v-model:last-name-en="formDataCustomerBranch.lastNameEN"
v-model:gender="formDataCustomerBranch.gender"
v-model:birth-date="formDataCustomerBranch.birthDate"
v-model:customer-name="formDataCustomerBranch.customerName"
v-model:legal-person-no="formDataCustomerBranch.legalPersonNo"
v-model:register-name="formDataCustomerBranch.registerName"
v-model:register-name-en="formDataCustomerBranch.registerNameEN"
v-model:register-date="formDataCustomerBranch.registerDate"
v-model:authorized-capital="
formDataCustomerBranch.authorizedCapital
"
/>
<span>{{ $t('customer.form.group.branch') }}</span>
</div>
<EmployerFormAbout :index="(0).toString()" customerType="CORP" />
<div class="col-12 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)"
<EmployerFormBusiness
id="form-business"
show-title
prefixId="dialog"
dense
outlined
v-model:bussiness-type="formDataCustomerBranch.businessType"
v-model:job-position="formDataCustomerBranch.jobPosition"
v-model:job-description="formDataCustomerBranch.jobDescription"
v-model:pay-date="formDataCustomerBranch.payDate"
v-model:pay-date-en="formDataCustomerBranch.payDateEN"
v-model:wage-rate="formDataCustomerBranch.wageRate"
v-model:wage-rate-text="formDataCustomerBranch.wageRateText"
/>
<span>{{ $t('customerBranch.tab.business') }}</span>
</div>
<EmployerFormBusiness prefixId="dialog" dense outlined />
<AddressForm
id="form-address"
prefix-id="employer"
hide-title
dense
outlined
use-employment
:title="$t('form.address')"
:addressTitle="$t('form.address')"
:addressTitleEN="$t('form.address', { suffix: '(EN)' })"
v-model:address="formDataCustomerBranch.address"
v-model:addres-e-n="formDataCustomerBranch.addressEN"
v-model:street="formDataCustomerBranch.street"
v-model:street-e-n="formDataCustomerBranch.streetEN"
v-model:moo="formDataCustomerBranch.moo"
v-model:moo-e-n="formDataCustomerBranch.mooEN"
v-model:soi="formDataCustomerBranch.soi"
v-model:soi-e-nn="formDataCustomerBranch.soiEN"
v-model:province-id="formDataCustomerBranch.provinceId"
v-model:district-id="formDataCustomerBranch.districtId"
v-model:home-code="formDataCustomerBranch.homeCode"
/>
</div>
</div>
</div>
</q-form>
</DialogContainer>
</DialogForm>
<!-- form add employee -->
<DialogForm
hideFooter
hide-footer
ref="formDialogRef"
v-model:modal="employeeFormState.dialogModal"
:title="$t('form.title.create', { name: $t('customer.employee') })"
v-model:modal="test2"
:undo="() => {}"
:submit="async () => {}"
:show="() => {}"
: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,
}"
>
<div class="q-px-lg q-pt-lg surface-2">
<ProfileBanner
active
useToggle
@ -1125,22 +1384,27 @@ watch(() => pageState.currentTab, fetchQuotationList);
"
/>
</div>
<div
style="flex: 1; width: 100%; overflow-y: auto"
class="surface-2 q-pa-lg"
id="drawer-employee-form"
class="col"
: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-12 full-width col-md-10 q-py-md q-pr-md q-pl-sm q-col-gutter-sm"
id="employee-form-content"
style="height: 100%; max-height: 100; overflow-y: auto"
style="overflow-y: auto"
class="row full-width full-height surface-1 rounded bordered relative-position"
>
<template v-if="employeeFormState.currentTab === 'personalInfo'">
<div
class="surface-1 rounded q-pt-sm row"
style="position: absolute; z-index: 999; right: 4%"
: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="
@ -1182,11 +1446,52 @@ watch(() => pageState.currentTab, fetchQuotationList);
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
@ -1199,6 +1504,13 @@ watch(() => pageState.currentTab, fetchQuotationList);
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
@ -1364,7 +1676,6 @@ watch(() => pageState.currentTab, fetchQuotationList);
<noticeJobEmployment v-if="mode === 'noticeJobEmployment'" />
</template>
</UploadFileGroup>
</template>
</div>
</div>
</div>

15
src/stores/quotations/types.ts
View file

@ -300,3 +300,18 @@ export type QuotationPayload = {
actorName: string;
status: Status;
};
export type EmployeeWorker = {
alienReferencNumber: string;
documentExpireDate: Date | undefined;
lastNameEN: string;
lastName: string;
middleNameEN: string;
middleName: string;
firstNameEN: string;
firstName: string;
namePrefix: string;
nationality: string;
gender: string;
dateOfBirth: Date;
};