refactor: prepare for switch view
This commit is contained in:
Methapon Metanipat
parent
9c8cba0a21
commit
bb87a6b8c6
1 changed files with 296 additions and 255 deletions
|
|
@ -34,6 +34,7 @@ import {
|
|||
} from 'src/stores/product-service/types';
|
||||
|
||||
// NOTE: Import Components
|
||||
import SwitchItem from 'components/shared/SwitchItem.vue';
|
||||
import FormEmployeePassport from 'components/03_customer-management/FormEmployeePassport.vue';
|
||||
import FormEmployeeVisa from 'components/03_customer-management/FormEmployeeVisa.vue';
|
||||
import FormReferDocument from 'src/components/05_quotation/FormReferDocument.vue';
|
||||
|
|
@ -249,6 +250,7 @@ async function assignToProductServiceList() {
|
|||
|
||||
productServiceList.value = quotationFormData.value.productServiceList.map(
|
||||
(v) => ({
|
||||
installmentNo: v.installmentNo || 0,
|
||||
workerIndex: v.workerIndex || [0],
|
||||
vat: v.vat || 0,
|
||||
pricePerUnit: v.pricePerUnit || 0,
|
||||
|
|
@ -717,6 +719,17 @@ const statusQuotationForm = ref<
|
|||
status: 'waiting',
|
||||
},
|
||||
]);
|
||||
|
||||
enum View {
|
||||
Quotation,
|
||||
Accepted,
|
||||
InvoicePre,
|
||||
Invoice,
|
||||
ReceiptPre,
|
||||
Receipt,
|
||||
}
|
||||
|
||||
const view = ref<View>(View.Quotation);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -751,7 +764,7 @@ const statusQuotationForm = ref<
|
|||
style="gap: 10px"
|
||||
>
|
||||
<div class="row justify-end">
|
||||
<BadgeCompoent :title-i18n="$t('general.laborIdentified')" />
|
||||
<BadgeComponent :title-i18n="$t('general.laborIdentified')" />
|
||||
</div>
|
||||
<div
|
||||
class="row items-center justify-between surface-1 rounded q-pa-xs"
|
||||
|
|
@ -830,265 +843,293 @@ const statusQuotationForm = ref<
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="true">
|
||||
<q-expansion-item
|
||||
for="item-up"
|
||||
id="item-up"
|
||||
dense
|
||||
class="overflow-hidden"
|
||||
switch-toggle-side
|
||||
default-opened
|
||||
style="border-radius: var(--radius-2)"
|
||||
expand-icon="mdi-chevron-down-circle"
|
||||
header-class="surface-1"
|
||||
>
|
||||
<template v-slot:header>
|
||||
<section class="row items-center full-width">
|
||||
<div class="row items-center q-pr-md q-py-sm">
|
||||
<span
|
||||
class="text-weight-medium q-mr-md"
|
||||
style="font-size: 18px"
|
||||
>
|
||||
{{ $t('general.document') }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<q-expansion-item
|
||||
for="item-up"
|
||||
id="item-up"
|
||||
dense
|
||||
class="overflow-hidden"
|
||||
switch-toggle-side
|
||||
default-opened
|
||||
style="border-radius: var(--radius-2)"
|
||||
expand-icon="mdi-chevron-down-circle"
|
||||
header-class="surface-1"
|
||||
>
|
||||
<template v-slot:header>
|
||||
<section class="row items-center full-width">
|
||||
<div class="row items-center q-pr-md q-py-sm">
|
||||
<span
|
||||
class="text-weight-medium q-mr-md"
|
||||
style="font-size: 18px"
|
||||
>
|
||||
{{ $t('general.document') }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<q-checkbox
|
||||
v-model="quotationFormData.urgent"
|
||||
class="q-ml-auto"
|
||||
size="xs"
|
||||
:label="$t('general.urgent')"
|
||||
:disable="readonly"
|
||||
/>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<div class="surface-1 q-pa-md full-width">
|
||||
<QuotationFormMetadata
|
||||
class="q-mb-md"
|
||||
:readonly
|
||||
:actor="quotationFormState.createdBy?.($i18n.locale) || ''"
|
||||
:quotation-no="(quotationFull && quotationFull.code) || ''"
|
||||
v-model:urgent="quotationFormData.urgent"
|
||||
v-model:work-name="quotationFormData.workName"
|
||||
v-model:contactor="quotationFormData.contactName"
|
||||
v-model:telephone="quotationFormData.contactTel"
|
||||
v-model:document-receive-point="
|
||||
quotationFormData.documentReceivePoint
|
||||
"
|
||||
v-model:due-date="quotationFormData.dueDate"
|
||||
>
|
||||
<template #issue-info>
|
||||
<FormAbout
|
||||
class="col-12 col-md-8"
|
||||
input-only
|
||||
v-model:branch-id="quotationFormData.registeredBranchId"
|
||||
v-model:customer-branch-id="
|
||||
quotationFormData.customerBranchId
|
||||
"
|
||||
:readonly="readonly"
|
||||
@add-customer=""
|
||||
/>
|
||||
</template>
|
||||
</QuotationFormMetadata>
|
||||
</div>
|
||||
</q-expansion-item>
|
||||
<q-expansion-item
|
||||
for="item-up"
|
||||
id="item-up"
|
||||
dense
|
||||
class="overflow-hidden"
|
||||
switch-toggle-side
|
||||
default-opened
|
||||
style="border-radius: var(--radius-2)"
|
||||
expand-icon="mdi-chevron-down-circle"
|
||||
header-class="surface-1"
|
||||
>
|
||||
<template v-slot:header>
|
||||
<section class="row items-center full-width">
|
||||
<div class="row items-center q-pr-md q-py-sm">
|
||||
<span
|
||||
class="text-weight-medium q-mr-md"
|
||||
style="font-size: 18px"
|
||||
>
|
||||
{{ $t('quotation.employeeList') }}
|
||||
</span>
|
||||
<template v-if="!readonly">
|
||||
<ToggleButton class="q-mr-sm" v-model="toggleWorker" />
|
||||
{{
|
||||
toggleWorker
|
||||
? $t('general.specify')
|
||||
: $t('general.noSpecify')
|
||||
}}
|
||||
</template>
|
||||
</div>
|
||||
<nav class="q-ml-auto">
|
||||
<AddButton
|
||||
v-if="!readonly"
|
||||
icon-only
|
||||
@click.stop="triggerSelectEmployeeDialog"
|
||||
/>
|
||||
</nav>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<div class="surface-1 q-pa-md full-width">
|
||||
<WorkerItem
|
||||
:employee-amount="selectedWorker.length"
|
||||
: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
|
||||
? dateFormat(e.employeePassport[0]?.expireDate) || '-'
|
||||
: '-',
|
||||
imgUrl: `${baseUrl}/customer/${e.id}/image/${e.selectedImage}`,
|
||||
status: e.status,
|
||||
}))
|
||||
"
|
||||
@delete="(i) => deleteItem(selectedWorker, i)"
|
||||
/>
|
||||
</div>
|
||||
</q-expansion-item>
|
||||
|
||||
<q-expansion-item
|
||||
for="item-up"
|
||||
id="item-up"
|
||||
dense
|
||||
class="overflow-hidden"
|
||||
switch-toggle-side
|
||||
default-opened
|
||||
style="border-radius: var(--radius-2)"
|
||||
expand-icon="mdi-chevron-down-circle"
|
||||
header-class="surface-1"
|
||||
>
|
||||
<template v-slot:header>
|
||||
<section class="row items-center full-width">
|
||||
<div class="row items-center q-pr-md q-py-sm">
|
||||
<span class="text-weight-medium" style="font-size: 18px">
|
||||
{{ $t('quotation.productList') }}
|
||||
</span>
|
||||
</div>
|
||||
<nav class="q-ml-auto">
|
||||
<AddButton
|
||||
v-if="!readonly"
|
||||
icon-only
|
||||
<q-checkbox
|
||||
v-model="quotationFormData.urgent"
|
||||
class="q-ml-auto"
|
||||
@click.stop="triggerProductServiceDialog"
|
||||
size="xs"
|
||||
:label="$t('general.urgent')"
|
||||
:disable="readonly"
|
||||
/>
|
||||
</nav>
|
||||
</section>
|
||||
</template>
|
||||
<div class="surface-1 q-pa-md full-width">
|
||||
<ProductItem
|
||||
:readonly="readonly"
|
||||
:agent-price="agentPrice"
|
||||
:employee-rows="
|
||||
selectedWorker.map((e: Employee) => ({
|
||||
foreignRefNo: '123456789',
|
||||
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: '1234',
|
||||
imgUrl: `${baseUrl}/customer/${e.id}/image/${e.selectedImage}`,
|
||||
status: e.status,
|
||||
}))
|
||||
"
|
||||
@delete="toggleDeleteProduct"
|
||||
v-model:rows="productServiceList"
|
||||
/>
|
||||
</div>
|
||||
</q-expansion-item>
|
||||
<q-expansion-item
|
||||
for="item-up"
|
||||
id="item-up"
|
||||
dense
|
||||
class="overflow-hidden"
|
||||
switch-toggle-side
|
||||
default-opened
|
||||
style="border-radius: var(--radius-2)"
|
||||
expand-icon="mdi-chevron-down-circle"
|
||||
header-class="surface-1"
|
||||
>
|
||||
<template v-slot:header>
|
||||
<section class="row items-center full-width">
|
||||
<div class="row items-center q-pr-md q-py-sm">
|
||||
<span
|
||||
class="text-weight-medium q-mr-md"
|
||||
style="font-size: 18px"
|
||||
>
|
||||
{{ $t('general.payment') }}
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<div class="surface-1 q-pa-md full-width">
|
||||
<QuotationFormInfo
|
||||
v-model:pay-type="quotationFormData.payCondition"
|
||||
v-model:pay-bank="payBank"
|
||||
v-model:pay-split-count="quotationFormData.paySplitCount"
|
||||
v-model:pay-split="quotationFormData.paySplit"
|
||||
:readonly
|
||||
v-model:final-discount="quotationFormData.discount"
|
||||
v-model:pay-bill-date="quotationFormData.payBillDate"
|
||||
v-model:summary-price="summaryPrice"
|
||||
class="q-mb-md"
|
||||
/>
|
||||
<div class="surface-1 q-pa-md full-width">
|
||||
<QuotationFormMetadata
|
||||
class="q-mb-md"
|
||||
:readonly
|
||||
:actor="quotationFormState.createdBy?.($i18n.locale) || ''"
|
||||
:quotation-no="(quotationFull && quotationFull.code) || ''"
|
||||
v-model:urgent="quotationFormData.urgent"
|
||||
v-model:work-name="quotationFormData.workName"
|
||||
v-model:contactor="quotationFormData.contactName"
|
||||
v-model:telephone="quotationFormData.contactTel"
|
||||
v-model:document-receive-point="
|
||||
quotationFormData.documentReceivePoint
|
||||
"
|
||||
v-model:due-date="quotationFormData.dueDate"
|
||||
>
|
||||
<template #issue-info>
|
||||
<FormAbout
|
||||
class="col-12 col-md-8"
|
||||
input-only
|
||||
v-model:branch-id="quotationFormData.registeredBranchId"
|
||||
v-model:customer-branch-id="
|
||||
quotationFormData.customerBranchId
|
||||
"
|
||||
:readonly="readonly"
|
||||
@add-customer=""
|
||||
/>
|
||||
</template>
|
||||
</QuotationFormMetadata>
|
||||
</div>
|
||||
</q-expansion-item>
|
||||
<q-expansion-item
|
||||
for="item-up"
|
||||
id="item-up"
|
||||
dense
|
||||
class="overflow-hidden"
|
||||
switch-toggle-side
|
||||
default-opened
|
||||
style="border-radius: var(--radius-2)"
|
||||
expand-icon="mdi-chevron-down-circle"
|
||||
header-class="surface-1"
|
||||
>
|
||||
<template v-slot:header>
|
||||
<section class="row items-center full-width">
|
||||
<div class="row items-center q-pr-md q-py-sm">
|
||||
<span
|
||||
class="text-weight-medium q-mr-md"
|
||||
style="font-size: 18px"
|
||||
>
|
||||
{{ $t('quotation.employeeList') }}
|
||||
</span>
|
||||
<template v-if="!readonly">
|
||||
<ToggleButton class="q-mr-sm" v-model="toggleWorker" />
|
||||
{{
|
||||
toggleWorker
|
||||
? $t('general.specify')
|
||||
: $t('general.noSpecify')
|
||||
}}
|
||||
</template>
|
||||
</div>
|
||||
<nav class="q-ml-auto">
|
||||
<AddButton
|
||||
v-if="!readonly"
|
||||
icon-only
|
||||
@click.stop="triggerSelectEmployeeDialog"
|
||||
/>
|
||||
</nav>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<span class="text-weight-medium q-mr-md" style="font-size: 18px">
|
||||
{{ $t('general.remark') }}
|
||||
</span>
|
||||
<hr
|
||||
style="border: 1px solid var(--border-color)"
|
||||
class="q-mb-md"
|
||||
/>
|
||||
<q-editor
|
||||
dense
|
||||
:readonly
|
||||
:model-value="quotationFormData.remark || ''"
|
||||
min-height="5rem"
|
||||
class="full-width"
|
||||
toolbar-bg="input-border"
|
||||
style="cursor: auto; color: var(--foreground)"
|
||||
:flat="!readonly"
|
||||
:style="`width: ${$q.screen.gt.xs ? '100%' : '63vw'}`"
|
||||
:toolbar="[['left', 'center', 'justify'], ['clip']]"
|
||||
:toolbar-toggle-color="readonly ? 'disabled' : 'primary'"
|
||||
:toolbar-color="
|
||||
readonly ? 'disabled' : $q.dark.isActive ? 'white' : ''
|
||||
"
|
||||
:definitions="{
|
||||
clip: {
|
||||
icon: 'mdi-paperclip',
|
||||
tip: 'Upload',
|
||||
handler: () => console.log('upload'),
|
||||
},
|
||||
}"
|
||||
@update:model-value="
|
||||
(v) => {
|
||||
quotationFormData.remark = v;
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</q-expansion-item>
|
||||
<div class="surface-1 q-pa-md full-width">
|
||||
<WorkerItem
|
||||
:employee-amount="selectedWorker.length"
|
||||
: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
|
||||
? dateFormat(e.employeePassport[0]?.expireDate) || '-'
|
||||
: '-',
|
||||
imgUrl: `${baseUrl}/customer/${e.id}/image/${e.selectedImage}`,
|
||||
status: e.status,
|
||||
}))
|
||||
"
|
||||
@delete="(i) => deleteItem(selectedWorker, i)"
|
||||
/>
|
||||
</div>
|
||||
</q-expansion-item>
|
||||
|
||||
<q-expansion-item
|
||||
for="item-up"
|
||||
id="item-up"
|
||||
dense
|
||||
class="overflow-hidden"
|
||||
switch-toggle-side
|
||||
default-opened
|
||||
style="border-radius: var(--radius-2)"
|
||||
expand-icon="mdi-chevron-down-circle"
|
||||
header-class="surface-1"
|
||||
>
|
||||
<template v-slot:header>
|
||||
<section class="row items-center full-width">
|
||||
<div class="row items-center q-pr-md q-py-sm">
|
||||
<span class="text-weight-medium" style="font-size: 18px">
|
||||
{{ $t('quotation.productList') }}
|
||||
</span>
|
||||
</div>
|
||||
<nav class="q-ml-auto">
|
||||
<AddButton
|
||||
v-if="!readonly"
|
||||
icon-only
|
||||
class="q-ml-auto"
|
||||
@click.stop="triggerProductServiceDialog"
|
||||
/>
|
||||
</nav>
|
||||
</section>
|
||||
</template>
|
||||
<div class="surface-1 q-pa-md full-width">
|
||||
<ProductItem
|
||||
:readonly="readonly"
|
||||
:agent-price="agentPrice"
|
||||
:employee-rows="
|
||||
selectedWorker.map((e: Employee) => ({
|
||||
foreignRefNo: '123456789',
|
||||
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: '1234',
|
||||
imgUrl: `${baseUrl}/customer/${e.id}/image/${e.selectedImage}`,
|
||||
status: e.status,
|
||||
}))
|
||||
"
|
||||
@delete="toggleDeleteProduct"
|
||||
v-model:rows="productServiceList"
|
||||
/>
|
||||
</div>
|
||||
</q-expansion-item>
|
||||
<q-expansion-item
|
||||
for="item-up"
|
||||
id="item-up"
|
||||
dense
|
||||
class="overflow-hidden"
|
||||
switch-toggle-side
|
||||
default-opened
|
||||
style="border-radius: var(--radius-2)"
|
||||
expand-icon="mdi-chevron-down-circle"
|
||||
header-class="surface-1"
|
||||
>
|
||||
<template v-slot:header>
|
||||
<section class="row items-center full-width">
|
||||
<div class="row items-center q-pr-md q-py-sm">
|
||||
<span
|
||||
class="text-weight-medium q-mr-md"
|
||||
style="font-size: 18px"
|
||||
>
|
||||
{{ $t('general.payment') }}
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<div class="surface-1 q-pa-md full-width">
|
||||
<SwitchItem :value="view">
|
||||
<template #[View.Quotation]>
|
||||
<QuotationFormInfo
|
||||
v-model:pay-type="quotationFormData.payCondition"
|
||||
v-model:pay-bank="payBank"
|
||||
v-model:pay-split-count="quotationFormData.paySplitCount"
|
||||
v-model:pay-split="quotationFormData.paySplit"
|
||||
:readonly
|
||||
v-model:final-discount="quotationFormData.discount"
|
||||
v-model:pay-bill-date="quotationFormData.payBillDate"
|
||||
v-model:summary-price="summaryPrice"
|
||||
class="q-mb-md"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #b>
|
||||
<div>bbb</div>
|
||||
</template>
|
||||
</SwitchItem>
|
||||
</div>
|
||||
</q-expansion-item>
|
||||
<q-expansion-item
|
||||
for="item-up"
|
||||
id="item-up"
|
||||
dense
|
||||
class="overflow-hidden"
|
||||
switch-toggle-side
|
||||
default-opened
|
||||
style="border-radius: var(--radius-2)"
|
||||
expand-icon="mdi-chevron-down-circle"
|
||||
header-class="surface-1"
|
||||
>
|
||||
<template v-slot:header>
|
||||
<section class="row items-center full-width">
|
||||
<div class="row items-center q-pr-md q-py-sm">
|
||||
<span
|
||||
class="text-weight-medium q-mr-md"
|
||||
style="font-size: 18px"
|
||||
>
|
||||
{{ $t('general.remark') }}
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<div class="surface-1 q-pa-md full-width">
|
||||
<q-editor
|
||||
dense
|
||||
:readonly
|
||||
:model-value="quotationFormData.remark || ''"
|
||||
min-height="5rem"
|
||||
class="full-width"
|
||||
toolbar-bg="input-border"
|
||||
style="cursor: auto; color: var(--foreground)"
|
||||
:flat="!readonly"
|
||||
:style="`width: ${$q.screen.gt.xs ? '100%' : '63vw'}`"
|
||||
:toolbar="[['left', 'center', 'justify'], ['clip']]"
|
||||
:toolbar-toggle-color="readonly ? 'disabled' : 'primary'"
|
||||
:toolbar-color="
|
||||
readonly ? 'disabled' : $q.dark.isActive ? 'white' : ''
|
||||
"
|
||||
:definitions="{
|
||||
clip: {
|
||||
icon: 'mdi-paperclip',
|
||||
tip: 'Upload',
|
||||
handler: () => console.log('upload'),
|
||||
},
|
||||
}"
|
||||
@update:model-value="
|
||||
(v) => {
|
||||
quotationFormData.remark = v;
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</q-expansion-item>
|
||||
</template>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue