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

refactor: save One by one

Browse source
This commit is contained in:
Net 2024-08-01 11:29:58 +07:00
parent d4229cb838
commit feb7fa2575
1 changed files with 291 additions and 272 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -471,6 +471,7 @@ const statsCustomerType = ref<CustomerStats>({
CORP: 0, CORP: 0,
PERS: 0, PERS: 0,
}); });
const hideBranch = ref<boolean>(true);
const currentCustomerId = ref<string>(''); const currentCustomerId = ref<string>('');
const dialogInputCustomerBranchForm = ref<boolean>(false); const dialogInputCustomerBranchForm = ref<boolean>(false);
const currentCustomer = ref<Customer>(); const currentCustomer = ref<Customer>();
@ -580,6 +581,7 @@ const fieldCustomer = ref([
'customerNaturalPerson', 'customerNaturalPerson',
]); ]);
const countStartsOne = ref<number>(1);
const dialogCustomerType = ref<boolean>(false); const dialogCustomerType = ref<boolean>(false);
const dialogInputForm = ref<boolean>(false); const dialogInputForm = ref<boolean>(false);
const dialogEmployee = ref<boolean>(false); const dialogEmployee = ref<boolean>(false);
@ -701,7 +703,10 @@ function onCloseBranch() {
} }
function clearForm() { function clearForm() {
inputFile.value = '';
profileFile.value = undefined; profileFile.value = undefined;
profileUrl.value = null;
hideBranch.value = true;
dialogInputForm.value = false; dialogInputForm.value = false;
formData.value = { formData.value = {
@ -748,6 +753,7 @@ function clearForm() {
} }
function clearFormEmployee() { function clearFormEmployee() {
inputFile.value = '';
profileUrl.value = null; profileUrl.value = null;
profileSubmit.value = false; profileSubmit.value = false;
dialogEmployee.value = false; dialogEmployee.value = false;
@ -912,17 +918,88 @@ async function onSubmit() {
flowStore.rotate(); flowStore.rotate();
} }
async function onSubmitCustomerBranch() { async function onSubmitBasicInformation() {
dialogInputCustomerBranchForm.value = false; if (selectorLabel.value === 'EMPLOYER') {
// await createBranch(); dialog({
color: 'info',
icon: 'mdi-alert',
title: t('saveConfirmTitle'),
actionText: t('ok'),
persistent: true,
message: t('saveConfirmMessage'),
action: async () => {
const res = await create({
...formData.value,
customerBranch: [],
customerType: customerType.value === 'CORP' ? 'CORP' : 'PERS',
image: profileSubmit.value ? profileFile.value ?? null : null,
});
for (const item of formData.value.customerBranch || []) { if (res) {
await createBranch({ currentCustomerId.value = res.id;
...item, hideBranch.value = false;
customerId: currentCustomerId.value, }
const resultList = await fetchList({ includeBranch: true });
if (resultList) listCustomer.value = resultList.result;
},
cancel: () => {},
}); });
} }
clearForm();
// if (selectorLabel.value === 'EMPLOYEE') {
// const isOk = await checkEmployeeForm();
// if (isOk) {
// await employeeStore.create({
// ...formDataEmployee.value,
// image: profileSubmit.value ? profileFile.value ?? null : null,
// });
// const resultList = await employeeStore.fetchList();
// if (resultList) listEmployee.value = resultList.result;
// const resultStatsEmployee = await employeeStore.getStatsEmployee();
// if (resultStatsEmployee) statsEmployee.value = resultStatsEmployee;
// clearFormEmployee();
// }
// }
flowStore.rotate();
}
async function onSubmitCustomerBranch(opt: { isClearForm: boolean }) {
// await createBranch();
// for (const item of formData.value.customerBranch || []) {
// await createBranch({
// ...item,
// customerId: currentCustomerId.value,
// });
// }
dialog({
color: 'info',
icon: 'mdi-alert',
title: t('saveConfirmTitle'),
actionText: t('ok'),
persistent: true,
message: t('saveConfirmMessage'),
action: async () => {
if (
formData.value.customerBranch !== undefined &&
formData.value.customerBranch[indexTab.value] !== undefined
) {
await createBranch({
...formData.value.customerBranch[indexTab.value],
customerId: currentCustomerId.value,
});
}
},
cancel: () => {},
});
if (opt.isClearForm) {
dialogInputCustomerBranchForm.value = false;
clearForm();
}
const result = await fetchListById(currentCustomerId.value); const result = await fetchListById(currentCustomerId.value);
if (result) { if (result) {
currentCustomerName.value = result.customerName; currentCustomerName.value = result.customerName;
@ -1178,6 +1255,7 @@ async function assignFormData(
if (!data) return; if (!data) return;
indexTab.value = tabNo; indexTab.value = tabNo;
countStartsOne.value = 1;
prevCustomer.value = { prevCustomer.value = {
registeredBranchId: data.registeredBranchId, registeredBranchId: data.registeredBranchId,
@ -1225,8 +1303,39 @@ async function assignFormData(
}); });
cloneData(); cloneData();
}
if (formData.value.customerBranch?.length === 0) {
formData.value.customerBranch?.push({
code: '',
branchNo: 1,
address: '',
addressEN: '',
provinceId: '',
districtId: '',
subDistrictId: '',
zipCode: '',
email: '',
telephoneNo: '',
name: '',
status: 'CREATED',
taxNo: '',
nameEN: '',
legalPersonNo: '',
registerName: '',
registerDate: new Date(),
authorizedCapital: '',
employmentOffice: '',
bussinessType: '',
bussinessTypeEN: '',
jobPosition: '',
jobPositionEN: '',
jobDescription: '',
saleEmployee: '',
payDate: new Date(),
wageRate: 0,
});
}
}
function cloneData() { function cloneData() {
formData.value = { formData.value = {
...prevCustomer.value, ...prevCustomer.value,
@ -2972,7 +3081,12 @@ watch(isMainPage, () => {
no-app-box no-app-box
width="60vw" width="60vw"
height="50vh" height="50vh"
:close="() => (dialogCustomerType = false)" :close="
() => {
clearForm();
dialogCustomerType = false;
}
"
> >
<div class="row full-width items-center"> <div class="row full-width items-center">
<ItemCard <ItemCard
@ -2995,15 +3109,29 @@ watch(isMainPage, () => {
v-model:modal="dialogInputForm" v-model:modal="dialogInputForm"
:title="$t('customerEmployerAdd')" :title="$t('customerEmployerAdd')"
:customer-label="customerType" :customer-label="customerType"
:submit=" :hiddenBtnSave="false"
() => { :submit="() => {}"
onSubmit();
}
"
:close=" :close="
() => { () => {
clearForm(); if (hideBranch && countStartsOne === 1) {
dialogInputForm = false; dialog({
color: 'warning',
icon: 'mdi-alert',
title: t('warning'),
actionText: t('ok'),
persistent: true,
message: t('notRecorded'),
action: async () => {
countStartsOne++;
clearForm();
dialogInputForm = false;
},
cancel: () => {},
});
} else {
clearForm();
dialogInputForm = false;
}
} }
" "
> >
@ -3031,131 +3159,148 @@ watch(isMainPage, () => {
v-model:customer-name-en="formData.customerNameEN" v-model:customer-name-en="formData.customerNameEN"
v-model:person-name="formData.personName" v-model:person-name="formData.personName"
v-model:tax-no="formData.taxNo" v-model:tax-no="formData.taxNo"
@save="
async () => {
await onSubmitBasicInformation();
console.log('สร้าง');
}
"
/> />
</template> </template>
<template #address> <template #address>
<!-- <FormCustomerBranch separator dense outlined /> --> <!-- <FormCustomerBranch separator dense outlined /> -->
<div class="col-3 app-text-muted"> <div v-if="!hideBranch">
• {{ $t('formDialogCustomerBranch') }} <div class="col-3 app-text-muted">
</div> • {{ $t('formDialogCustomerBranch') }}
</div>
<div class="col-12 row bordered q-pt-none rounded"> <div class="col-12 row bordered q-pt-none rounded">
<TabComponent <TabComponent
prefix-id="form-dialog" prefix-id="form-dialog"
v-model:branch-no="statBranchNo" v-model:branch-no="statBranchNo"
v-model:stat-branch-no="statBranchNo" v-model:stat-branch-no="statBranchNo"
v-model:customer-branch="formData.customerBranch" v-model:customer-branch="formData.customerBranch"
v-model:tab-index="indexTab" v-model:tab-index="indexTab"
> @save="() => onSubmitCustomerBranch({ isClearForm: false })"
<template #address> >
<FormAddress <template #address>
prefix-id="form-dialog" <FormAddress
:id="indexTab" prefix-id="form-dialog"
v-if=" :id="indexTab"
indexTab !== undefined && formData.customerBranch?.[indexTab] v-if="
" indexTab !== undefined && formData.customerBranch?.[indexTab]
v-model:address="formData.customerBranch[indexTab].address" "
v-model:address-e-n="formData.customerBranch[indexTab].addressEN" v-model:address="formData.customerBranch[indexTab].address"
v-model:province-id="formData.customerBranch[indexTab].provinceId" v-model:address-e-n="
v-model:district-id="formData.customerBranch[indexTab].districtId" formData.customerBranch[indexTab].addressEN
v-model:sub-district-id=" "
formData.customerBranch[indexTab].subDistrictId v-model:province-id="
" formData.customerBranch[indexTab].provinceId
v-model:zip-code="formData.customerBranch[indexTab].zipCode" "
:title="$t('formDialogTitleEmployerAddress')" v-model:district-id="
separator formData.customerBranch[indexTab].districtId
dense "
outlined v-model:sub-district-id="
/> formData.customerBranch[indexTab].subDistrictId
</template> "
v-model:zip-code="formData.customerBranch[indexTab].zipCode"
:title="$t('formDialogTitleEmployerAddress')"
separator
dense
outlined
/>
</template>
<template #businessInformation> <template #businessInformation>
<FormBusiness <FormBusiness
prefix-id="form-dialog" prefix-id="form-dialog"
v-if=" v-if="
indexTab !== undefined && formData.customerBranch?.[indexTab] indexTab !== undefined && formData.customerBranch?.[indexTab]
" "
v-model:employment-office=" v-model:employment-office="
formData.customerBranch[indexTab].employmentOffice formData.customerBranch[indexTab].employmentOffice
" "
v-model:bussiness-type=" v-model:bussiness-type="
formData.customerBranch[indexTab].bussinessType formData.customerBranch[indexTab].bussinessType
" "
v-model:bussiness-type-en=" v-model:bussiness-type-en="
formData.customerBranch[indexTab].bussinessTypeEN formData.customerBranch[indexTab].bussinessTypeEN
" "
v-model:job-position=" v-model:job-position="
formData.customerBranch[indexTab].jobPosition formData.customerBranch[indexTab].jobPosition
" "
v-model:job-position-en=" v-model:job-position-en="
formData.customerBranch[indexTab].jobPositionEN formData.customerBranch[indexTab].jobPositionEN
" "
v-model:job-description=" v-model:job-description="
formData.customerBranch[indexTab].jobDescription formData.customerBranch[indexTab].jobDescription
" "
v-model:sale-employee=" v-model:sale-employee="
formData.customerBranch[indexTab].saleEmployee formData.customerBranch[indexTab].saleEmployee
" "
v-model:pay-date="formData.customerBranch[indexTab].payDate" v-model:pay-date="formData.customerBranch[indexTab].payDate"
v-model:wage-rate="formData.customerBranch[indexTab].wageRate" v-model:wage-rate="formData.customerBranch[indexTab].wageRate"
separator separator
dense dense
outlined outlined
/> />
</template> </template>
<template #about> <template #about>
<AboutComponent <AboutComponent
v-if=" v-if="
indexTab !== undefined && formData.customerBranch?.[indexTab] indexTab !== undefined && formData.customerBranch?.[indexTab]
" "
prefix-id="form-dialog" prefix-id="form-dialog"
:type-customer="customerType" :type-customer="customerType"
v-model:branch-no="formData.customerBranch[indexTab].branchNo" v-model:branch-no="formData.customerBranch[indexTab].branchNo"
v-model:tax-no="formData.customerBranch[indexTab].taxNo" v-model:tax-no="formData.customerBranch[indexTab].taxNo"
v-model:customer-name="formData.customerBranch[indexTab].name" v-model:customer-name="formData.customerBranch[indexTab].name"
v-model:customer-english-name=" v-model:customer-english-name="
formData.customerBranch[indexTab].nameEN formData.customerBranch[indexTab].nameEN
" "
v-model:authorized-capital=" v-model:authorized-capital="
formData.customerBranch[indexTab].authorizedCapital formData.customerBranch[indexTab].authorizedCapital
" "
v-model:register-name=" v-model:register-name="
formData.customerBranch[indexTab].registerName formData.customerBranch[indexTab].registerName
" "
v-model:register-date=" v-model:register-date="
formData.customerBranch[indexTab].registerDate formData.customerBranch[indexTab].registerDate
" "
dense dense
outlined outlined
separator separator
/> />
</template> </template>
<template #contactInformation> <template #contactInformation>
<ContactComponent <ContactComponent
prefix-id="form-dialog" prefix-id="form-dialog"
v-if=" v-if="
indexTab !== undefined && formData.customerBranch?.[indexTab] indexTab !== undefined && formData.customerBranch?.[indexTab]
" "
v-model:mail="formData.customerBranch[indexTab].email" v-model:mail="formData.customerBranch[indexTab].email"
v-model:telephone="formData.customerBranch[indexTab].telephoneNo" v-model:telephone="
dense formData.customerBranch[indexTab].telephoneNo
outlined "
separator dense
/> outlined
</template> separator
<template #otherDocuments> />
<OtherInformation </template>
prefix-id="form-dialog" <template #otherDocuments>
v-if=" <OtherInformation
indexTab !== undefined && formData.customerBranch?.[indexTab] prefix-id="form-dialog"
" v-if="
dense indexTab !== undefined && formData.customerBranch?.[indexTab]
outlined "
/> dense
</template> outlined
</TabComponent> />
</template>
</TabComponent>
</div>
</div> </div>
</template> </template>
</FormDialog> </FormDialog>
@ -3319,144 +3464,7 @@ watch(isMainPage, () => {
<FormDialog <FormDialog
v-model:modal="dialogInputCustomerBranchForm" v-model:modal="dialogInputCustomerBranchForm"
:title="$t('formDialogTitleCreateSubBranch')" :title="$t('formDialogTitleCreateSubBranch')"
:submit=" :submit="() => {}"
() => {
onSubmitCustomerBranch();
}
"
:close="() => {}"
>
<template #address>
<!-- <FormCustomerBranch separator dense outlined /> -->
<div class="col-3 app-text-muted">
• {{ $t('formDialogCustomerBranch') }}
</div>
<div class="col-12 row bordered q-pt-none rounded">
<TabComponent
prefix-id="form-dialog-branch"
v-model:stat-branch-no="statBranchNo"
v-model:customer-branch="formData.customerBranch"
v-model:tab-index="indexTab"
>
<template #address>
<FormAddress
prefix-id="form-dialog-branch"
:id="indexTab"
v-if="
indexTab !== undefined && formData.customerBranch?.[indexTab]
"
v-model:address="formData.customerBranch[indexTab].address"
v-model:address-e-n="formData.customerBranch[indexTab].addressEN"
v-model:province-id="formData.customerBranch[indexTab].provinceId"
v-model:district-id="formData.customerBranch[indexTab].districtId"
v-model:sub-district-id="
formData.customerBranch[indexTab].subDistrictId
"
v-model:zip-code="formData.customerBranch[indexTab].zipCode"
separator
dense
outlined
/>
</template>
<template #businessInformation>
<FormBusiness
prefix-id="form-dialog-branch"
v-if="
indexTab !== undefined && formData.customerBranch?.[indexTab]
"
v-model:employment-office="
formData.customerBranch[indexTab].employmentOffice
"
v-model:bussiness-type="
formData.customerBranch[indexTab].bussinessType
"
v-model:bussiness-type-en="
formData.customerBranch[indexTab].bussinessTypeEN
"
v-model:job-position="
formData.customerBranch[indexTab].jobPosition
"
v-model:job-position-en="
formData.customerBranch[indexTab].jobPositionEN
"
v-model:job-description="
formData.customerBranch[indexTab].jobDescription
"
v-model:sale-employee="
formData.customerBranch[indexTab].saleEmployee
"
v-model:pay-date="formData.customerBranch[indexTab].payDate"
v-model:wage-rate="formData.customerBranch[indexTab].wageRate"
separator
dense
outlined
/>
</template>
<template #about>
<AboutComponent
prefix-id="form-dialog-branch"
v-if="
indexTab !== undefined && formData.customerBranch?.[indexTab]
"
:type-customer="customerType"
v-model:tax-no="formData.customerBranch[indexTab].taxNo"
v-model:customer-name="formData.customerBranch[indexTab].name"
v-model:customer-english-name="
formData.customerBranch[indexTab].nameEN
"
v-model:authorized-capital="
formData.customerBranch[indexTab].authorizedCapital
"
v-model:register-name="
formData.customerBranch[indexTab].registerName
"
v-model:register-date="
formData.customerBranch[indexTab].registerDate
"
dense
outlined
separator
/>
</template>
<template #contactInformation>
<ContactComponent
prefix-id="form-dialog-branch"
v-if="
indexTab !== undefined && formData.customerBranch?.[indexTab]
"
v-model:mail="formData.customerBranch[indexTab].email"
v-model:telephone="formData.customerBranch[indexTab].telephoneNo"
dense
outlined
separator
/>
</template>
<template #otherDocuments>
<OtherInformation
prefix-id="form-dialog-branch"
v-if="
indexTab !== undefined && formData.customerBranch?.[indexTab]
"
dense
outlined
/>
</template>
</TabComponent>
</div>
</template>
</FormDialog>
<FormDialog
v-model:modal="dialogInputCustomerBranchForm"
:title="$t('formDialogTitleCreateSubBranch')"
:submit="
() => {
onSubmitCustomerBranch();
}
"
:close=" :close="
() => { () => {
clearForm(); clearForm();
@ -3477,6 +3485,11 @@ watch(isMainPage, () => {
:stat-branch-no="statBranchNo" :stat-branch-no="statBranchNo"
v-model:customer-branch="formData.customerBranch" v-model:customer-branch="formData.customerBranch"
v-model:tab-index="indexTab" v-model:tab-index="indexTab"
@save="
() => {
onSubmitCustomerBranch({ isClearForm: true });
}
"
> >
<template #address> <template #address>
<FormAddress <FormAddress
@ -3656,6 +3669,11 @@ watch(isMainPage, () => {
v-model:customer-name-en="formData.customerNameEN" v-model:customer-name-en="formData.customerNameEN"
v-model:person-name="formData.personName" v-model:person-name="formData.personName"
v-model:tax-no="formData.taxNo" v-model:tax-no="formData.taxNo"
@save="
() => {
console.log('แก้ไข');
}
"
/> />
</template> </template>
@ -3671,6 +3689,7 @@ watch(isMainPage, () => {
:readonly="!infoDrawerEdit" :readonly="!infoDrawerEdit"
v-model:customer-branch="formData.customerBranch" v-model:customer-branch="formData.customerBranch"
v-model:tab-index="indexTab" v-model:tab-index="indexTab"
@save="() => onSubmitCustomerBranch({ isClearForm: false })"
> >
<template #address> <template #address>
<FormAddress <FormAddress