perf: make use of computed and use same var
This commit is contained in:
parent
ec04c19e31
commit
414b57acbd
1 changed files with 29 additions and 50 deletions
|
|
@ -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="
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue