feat: new worker select
This commit is contained in:
Thanaphon Frappet
parent
928d07a3ba
commit
cd1848c5fb
2 changed files with 355 additions and 155 deletions
|
|
@ -70,6 +70,7 @@ import {
|
|||
import QuotationFormReceipt from './QuotationFormReceipt.vue';
|
||||
import QuotationFormProductSelect from './QuotationFormProductSelect.vue';
|
||||
import QuotationFormInfo from './QuotationFormInfo.vue';
|
||||
import QuotationFormWorkerSelect from './QuotationFormWorkerSelect.vue';
|
||||
import QuotationFormWorkerAddDialog from './QuotationFormWorkerAddDialog.vue';
|
||||
import ProfileBanner from 'components/ProfileBanner.vue';
|
||||
import DialogForm from 'components/DialogForm.vue';
|
||||
|
|
@ -161,6 +162,7 @@ const readonly = computed(() => {
|
|||
quotationFormState.value.mode === 'edit'
|
||||
);
|
||||
});
|
||||
const test = ref<boolean>(false);
|
||||
|
||||
const selectedWorker = ref<
|
||||
(Employee & {
|
||||
|
|
@ -721,10 +723,6 @@ function triggerCreateEmployee() {
|
|||
async function triggerSelectEmployeeDialog() {
|
||||
pageState.employeeModal = true;
|
||||
await nextTick();
|
||||
refSelectZoneEmployee.value?.assignSelect(
|
||||
preSelectedWorker.value,
|
||||
selectedWorker.value,
|
||||
);
|
||||
}
|
||||
|
||||
function triggerProductServiceDialog() {
|
||||
|
|
@ -926,12 +924,12 @@ function convertToTable(nodes: Node[]) {
|
|||
pageState.productServiceModal = false;
|
||||
}
|
||||
|
||||
function convertEmployeeToTable() {
|
||||
function convertEmployeeToTable(selected: Employee[]) {
|
||||
productServiceList.value.forEach((v) => {
|
||||
if (selectedWorker.value.length === 0 && v.amount === 1) v.amount -= 1;
|
||||
|
||||
v.amount = Math.max(
|
||||
v.amount + preSelectedWorker.value.length - selectedWorker.value.length,
|
||||
v.amount + selected.length - selectedWorker.value.length,
|
||||
1,
|
||||
);
|
||||
|
||||
|
|
@ -941,21 +939,17 @@ function convertEmployeeToTable() {
|
|||
selectedWorker.value.forEach((item, i) => {
|
||||
if (v.workerIndex.includes(i)) oldWorkerId.push(item.id);
|
||||
});
|
||||
preSelectedWorker.value.forEach((item, i) => {
|
||||
selected.forEach((item, i) => {
|
||||
if (selectedWorker.value.find((n) => item.id === n.id)) return;
|
||||
newWorkerIndex.push(i);
|
||||
});
|
||||
|
||||
v.workerIndex = oldWorkerId
|
||||
.map((id) => preSelectedWorker.value.findIndex((item) => item.id === id))
|
||||
.map((id) => selected.findIndex((item) => item.id === id))
|
||||
.filter((idx) => idx !== -1)
|
||||
.concat(newWorkerIndex);
|
||||
});
|
||||
|
||||
refSelectZoneEmployee.value?.assignSelect(
|
||||
selectedWorker.value,
|
||||
preSelectedWorker.value,
|
||||
);
|
||||
pageState.employeeModal = false;
|
||||
quotationFormData.value.workerMax = Math.max(
|
||||
quotationFormData.value.workerMax || 1,
|
||||
|
|
@ -1253,9 +1247,7 @@ async function getWorkerFromCriteria(
|
|||
(a) => !selectedWorker.value.find((b) => a.id === b.id),
|
||||
);
|
||||
|
||||
preSelectedWorker.value = [...deduplicate, ...selectedWorker.value];
|
||||
|
||||
convertEmployeeToTable();
|
||||
convertEmployeeToTable([...deduplicate, ...selectedWorker.value]);
|
||||
|
||||
return true;
|
||||
}
|
||||
|
|
@ -2277,148 +2269,17 @@ watch(
|
|||
|
||||
<!-- SEC: Dialog -->
|
||||
<!-- add employee quotation -->
|
||||
<DialogForm
|
||||
:title="$t('general.select', { msg: $t('quotation.employeeList') })"
|
||||
v-model:modal="pageState.employeeModal"
|
||||
:submit-label="$t('general.select', { msg: $t('quotation.employee') })"
|
||||
submit-icon="mdi-check"
|
||||
height="75vh"
|
||||
:submit="() => convertEmployeeToTable()"
|
||||
:close="
|
||||
() => {
|
||||
(preSelectedWorker = []), (pageState.employeeModal = false);
|
||||
|
||||
<QuotationFormWorkerSelect
|
||||
:preselect-worker="selectedWorker"
|
||||
v-model:open="pageState.employeeModal"
|
||||
@success="
|
||||
(v) => {
|
||||
selectedWorker = v;
|
||||
}
|
||||
"
|
||||
>
|
||||
<template #top-append>
|
||||
<q-btn
|
||||
class="q-mr-sm"
|
||||
flat
|
||||
size="sm"
|
||||
icon="mdi-dots-horizontal"
|
||||
:id="`btn-kebab-action`"
|
||||
@click.stop
|
||||
:title="$t('general.additional')"
|
||||
style="max-width: 20px"
|
||||
>
|
||||
<q-menu class="bordered" ref="refMenu">
|
||||
<q-list>
|
||||
<q-item
|
||||
v-close-popup
|
||||
dense
|
||||
clickable
|
||||
class="row items-center"
|
||||
style="white-space: nowrap"
|
||||
@click.stop="
|
||||
() => {
|
||||
triggerCreateEmployee();
|
||||
}
|
||||
"
|
||||
>
|
||||
<q-icon
|
||||
size="xs"
|
||||
class="q-mr-sm"
|
||||
name="mdi-plus"
|
||||
style="color: hsl(var(--info-bg))"
|
||||
/>
|
||||
<span>
|
||||
{{ $t('quotation.addWorker') }}
|
||||
</span>
|
||||
</q-item>
|
||||
|
||||
<q-item
|
||||
v-close-popup
|
||||
dense
|
||||
clickable
|
||||
style="white-space: nowrap"
|
||||
class="row items-center"
|
||||
@click.stop="() => (pageState.importWorker = true)"
|
||||
>
|
||||
<q-icon
|
||||
size="xs"
|
||||
class="q-mr-sm"
|
||||
name="mdi-import"
|
||||
style="color: hsl(195 90% 50%)"
|
||||
/>
|
||||
<span>{{ $t('quotation.importWorker') }}</span>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
</template>
|
||||
|
||||
<section class="col row scroll">
|
||||
<SelectZone
|
||||
ref="refSelectZoneEmployee"
|
||||
v-model:selected-item="preSelectedWorker"
|
||||
@search="
|
||||
(v) => {
|
||||
searchEmployee(v);
|
||||
}
|
||||
"
|
||||
:items="workerList"
|
||||
:new-items="newWorkerList"
|
||||
>
|
||||
<template #data="{ item }">
|
||||
<PersonCard
|
||||
noAction
|
||||
prefixId="asda"
|
||||
class="full-width"
|
||||
:data="{
|
||||
name:
|
||||
$i18n.locale === 'eng'
|
||||
? `${item.firstNameEN} ${item.lastNameEN}`
|
||||
: `${item.firstName} ${item.lastName}`,
|
||||
code: item.employeePassport?.at(0)?.number,
|
||||
female: item.gender === 'female',
|
||||
male: item.gender === 'male',
|
||||
img: `${API_BASE_URL}/customer/${item.id}/image/${item.selectedImage}`,
|
||||
fallbackImg: '/images/employee-avatar.png',
|
||||
detail: [
|
||||
{
|
||||
icon: 'mdi-passport',
|
||||
value: optionStore.mapOption(item.nationality),
|
||||
},
|
||||
{
|
||||
icon: 'mdi-clock-outline',
|
||||
value: calculateAge(item.dateOfBirth),
|
||||
},
|
||||
],
|
||||
}"
|
||||
></PersonCard>
|
||||
</template>
|
||||
|
||||
<template #newData="{ item }">
|
||||
<PersonCard
|
||||
noAction
|
||||
prefixId="asda"
|
||||
class="full-width"
|
||||
:data="{
|
||||
name:
|
||||
$i18n.locale === 'eng'
|
||||
? `${item.firstNameEN} ${item.lastNameEN}`
|
||||
: `${item.firstName} ${item.lastName}`,
|
||||
code: item.code,
|
||||
female: item.gender === 'female',
|
||||
male: item.gender === 'male',
|
||||
img: `${API_BASE_URL}/customer/${item.id}/image/${item.selectedImage}`,
|
||||
fallbackImg: '/images/employee-avatar.png',
|
||||
detail: [
|
||||
{
|
||||
icon: 'mdi-passport',
|
||||
value: optionStore.mapOption(item.nationality),
|
||||
},
|
||||
{
|
||||
icon: 'mdi-clock-outline',
|
||||
value: calculateAge(item.dateOfBirth),
|
||||
},
|
||||
],
|
||||
}"
|
||||
></PersonCard>
|
||||
</template>
|
||||
</SelectZone>
|
||||
</section>
|
||||
</DialogForm>
|
||||
@trigger-create-employee="() => triggerCreateEmployee()"
|
||||
/>
|
||||
|
||||
<!-- add product service -->
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue