perf: make use of computed and use same var

This commit is contained in:
Methapon2001 2024-12-18 08:51:46 +07:00
parent ec04c19e31
commit 414b57acbd

View file

@ -11,7 +11,7 @@ import {
import { ProductTree, quotationProductTree } from './utils';
// NOTE: Import stores
import { dateFormat, calculateAge } from 'src/utils/datetime';
import { dateFormat, calculateAge, dateFormatJS } from 'src/utils/datetime';
import { useEmployeeForm } from 'src/pages/03_customer-management/form';
import { useQuotationStore } from 'src/stores/quotations';
import useProductServiceStore from 'stores/product-service';
@ -29,7 +29,6 @@ import { runOcr, parseResultMRZ } from 'src/utils/ocr';
import { View } from './types.ts';
import {
PayCondition,
PaySplit,
ProductServiceList,
QuotationPayload,
} from 'src/stores/quotations/types';
@ -86,7 +85,7 @@ import BadgeComponent from 'src/components/BadgeComponent.vue';
import PaymentForm from './PaymentForm.vue';
import { api } from 'src/boot/axios';
import { RouterLink, useRoute } from 'vue-router';
import { initLang, initTheme } from 'src/utils/ui';
import { initLang, initTheme, Lang } from 'src/utils/ui';
import { convertTemplate } from 'src/utils/string-template';
type Node = {
@ -166,6 +165,30 @@ const selectedWorker = ref<
}[];
})[]
>([]);
const selectedWorkerItem = computed(() =>
selectedWorker.value.map((e) => ({
foreignRefNo: e.employeePassport
? e.employeePassport[0]?.number || '-'
: '-',
employeeName:
locale.value === Lang.English
? `${e.firstNameEN} ${e.lastNameEN}`
: `${e.firstName} ${e.lastName}`,
birthDate: dateFormatJS({ date: e.dateOfBirth }),
gender: e.gender,
age: calculateAge(e.dateOfBirth),
nationality: optionStore.mapOption(e.nationality),
documentExpireDate:
e.employeePassport !== undefined &&
e.employeePassport[0]?.expireDate !== undefined
? dateFormatJS({ date: e.employeePassport[0]?.expireDate })
: '-',
imgUrl: e.selectedImage
? `${API_BASE_URL}/employee/${e.id}/image/${e.selectedImage}`
: '',
status: e.status,
})),
);
const workerList = ref<Employee[]>([]);
const selectedProductGroup = ref('');
@ -460,6 +483,7 @@ async function assignToProductServiceList() {
productServiceList.value = quotationFormData.value.productServiceList.map(
(v) => ({
id: v.id!,
installmentNo: v.installmentNo || 0,
workerIndex: v.workerIndex || [0],
vat: v.vat || 0,
@ -1456,30 +1480,7 @@ async function getWorkerFromCriteria(
"
:readonly="readonly"
fallback-img="/images/employee-avatar.png"
:rows="
selectedWorker.map((e: Employee) => ({
foreignRefNo: e.employeePassport
? e.employeePassport[0]?.number || '-'
: '-',
employeeName:
$i18n.locale === 'eng'
? `${e.firstNameEN} ${e.lastNameEN}`
: `${e.firstName} ${e.lastName}`,
birthDate: dateFormat(e.dateOfBirth),
gender: e.gender,
age: calculateAge(e.dateOfBirth),
nationality: optionStore.mapOption(e.nationality),
documentExpireDate:
e.employeePassport !== undefined &&
e.employeePassport[0]?.expireDate !== undefined
? dateFormat(e.employeePassport[0]?.expireDate)
: '-',
imgUrl: e.selectedImage
? `${API_BASE_URL}/employee/${e.id}/image/${e.selectedImage}`
: '',
status: e.status,
}))
"
:rows="selectedWorkerItem"
@delete="(i) => deleteItem(selectedWorker, i)"
/>
</div>
@ -1521,29 +1522,7 @@ async function getWorkerFromCriteria(
:max-installment="quotationFormData.paySplitCount"
:readonly="readonly"
:agent-price="agentPrice"
:employee-rows="
selectedWorker.map((e: Employee) => ({
foreignRefNo:
e.employeePassport !== undefined
? e.employeePassport[0]?.number || '-'
: '-',
employeeName:
$i18n.locale === 'eng'
? `${e.firstNameEN} ${e.lastNameEN}`
: `${e.firstName} ${e.lastName}`,
birthDate: dateFormat(e.dateOfBirth),
gender: e.gender,
age: calculateAge(e.dateOfBirth),
nationality: optionStore.mapOption(e.nationality),
documentExpireDate:
e.employeePassport !== undefined &&
e.employeePassport[0]?.expireDate !== undefined
? dateFormat(e.employeePassport[0]?.expireDate) || '-'
: '-',
imgUrl: `${API_BASE_URL}/customer/${e.id}/image/${e.selectedImage}`,
status: e.status,
}))
"
:employee-rows="selectedWorkerItem"
@delete="toggleDeleteProduct"
:rows="productService"
@update:rows="