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';
|
} from 'src/stores/product-service/types';
|
||||||
|
|
||||||
// NOTE: Import Components
|
// NOTE: Import Components
|
||||||
|
import SwitchItem from 'components/shared/SwitchItem.vue';
|
||||||
import FormEmployeePassport from 'components/03_customer-management/FormEmployeePassport.vue';
|
import FormEmployeePassport from 'components/03_customer-management/FormEmployeePassport.vue';
|
||||||
import FormEmployeeVisa from 'components/03_customer-management/FormEmployeeVisa.vue';
|
import FormEmployeeVisa from 'components/03_customer-management/FormEmployeeVisa.vue';
|
||||||
import FormReferDocument from 'src/components/05_quotation/FormReferDocument.vue';
|
import FormReferDocument from 'src/components/05_quotation/FormReferDocument.vue';
|
||||||
|
|
@ -249,6 +250,7 @@ async function assignToProductServiceList() {
|
||||||
|
|
||||||
productServiceList.value = quotationFormData.value.productServiceList.map(
|
productServiceList.value = quotationFormData.value.productServiceList.map(
|
||||||
(v) => ({
|
(v) => ({
|
||||||
|
installmentNo: v.installmentNo || 0,
|
||||||
workerIndex: v.workerIndex || [0],
|
workerIndex: v.workerIndex || [0],
|
||||||
vat: v.vat || 0,
|
vat: v.vat || 0,
|
||||||
pricePerUnit: v.pricePerUnit || 0,
|
pricePerUnit: v.pricePerUnit || 0,
|
||||||
|
|
@ -717,6 +719,17 @@ const statusQuotationForm = ref<
|
||||||
status: 'waiting',
|
status: 'waiting',
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
enum View {
|
||||||
|
Quotation,
|
||||||
|
Accepted,
|
||||||
|
InvoicePre,
|
||||||
|
Invoice,
|
||||||
|
ReceiptPre,
|
||||||
|
Receipt,
|
||||||
|
}
|
||||||
|
|
||||||
|
const view = ref<View>(View.Quotation);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
@ -751,7 +764,7 @@ const statusQuotationForm = ref<
|
||||||
style="gap: 10px"
|
style="gap: 10px"
|
||||||
>
|
>
|
||||||
<div class="row justify-end">
|
<div class="row justify-end">
|
||||||
<BadgeCompoent :title-i18n="$t('general.laborIdentified')" />
|
<BadgeComponent :title-i18n="$t('general.laborIdentified')" />
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="row items-center justify-between surface-1 rounded q-pa-xs"
|
class="row items-center justify-between surface-1 rounded q-pa-xs"
|
||||||
|
|
@ -830,265 +843,293 @@ const statusQuotationForm = ref<
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</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
|
<q-checkbox
|
||||||
for="item-up"
|
v-model="quotationFormData.urgent"
|
||||||
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
|
|
||||||
class="q-ml-auto"
|
class="q-ml-auto"
|
||||||
@click.stop="triggerProductServiceDialog"
|
size="xs"
|
||||||
|
:label="$t('general.urgent')"
|
||||||
|
:disable="readonly"
|
||||||
/>
|
/>
|
||||||
</nav>
|
</section>
|
||||||
</section>
|
</template>
|
||||||
</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">
|
<div class="surface-1 q-pa-md full-width">
|
||||||
<QuotationFormInfo
|
<QuotationFormMetadata
|
||||||
v-model:pay-type="quotationFormData.payCondition"
|
class="q-mb-md"
|
||||||
v-model:pay-bank="payBank"
|
:readonly
|
||||||
v-model:pay-split-count="quotationFormData.paySplitCount"
|
:actor="quotationFormState.createdBy?.($i18n.locale) || ''"
|
||||||
v-model:pay-split="quotationFormData.paySplit"
|
:quotation-no="(quotationFull && quotationFull.code) || ''"
|
||||||
:readonly
|
v-model:urgent="quotationFormData.urgent"
|
||||||
v-model:final-discount="quotationFormData.discount"
|
v-model:work-name="quotationFormData.workName"
|
||||||
v-model:pay-bill-date="quotationFormData.payBillDate"
|
v-model:contactor="quotationFormData.contactName"
|
||||||
v-model:summary-price="summaryPrice"
|
v-model:telephone="quotationFormData.contactTel"
|
||||||
class="q-mb-md"
|
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">
|
<div class="surface-1 q-pa-md full-width">
|
||||||
{{ $t('general.remark') }}
|
<WorkerItem
|
||||||
</span>
|
:employee-amount="selectedWorker.length"
|
||||||
<hr
|
:readonly="readonly"
|
||||||
style="border: 1px solid var(--border-color)"
|
fallback-img="/images/employee-avatar.png"
|
||||||
class="q-mb-md"
|
:rows="
|
||||||
/>
|
selectedWorker.map((e: Employee) => ({
|
||||||
<q-editor
|
foreignRefNo: e.employeePassport
|
||||||
dense
|
? e.employeePassport[0]?.number || '-'
|
||||||
:readonly
|
: '-',
|
||||||
:model-value="quotationFormData.remark || ''"
|
employeeName:
|
||||||
min-height="5rem"
|
$i18n.locale === 'eng'
|
||||||
class="full-width"
|
? `${e.firstNameEN} ${e.lastNameEN}`
|
||||||
toolbar-bg="input-border"
|
: `${e.firstName} ${e.lastName}`,
|
||||||
style="cursor: auto; color: var(--foreground)"
|
birthDate: dateFormat(e.dateOfBirth),
|
||||||
:flat="!readonly"
|
gender: e.gender,
|
||||||
:style="`width: ${$q.screen.gt.xs ? '100%' : '63vw'}`"
|
age: calculateAge(e.dateOfBirth),
|
||||||
:toolbar="[['left', 'center', 'justify'], ['clip']]"
|
nationality: optionStore.mapOption(e.nationality),
|
||||||
:toolbar-toggle-color="readonly ? 'disabled' : 'primary'"
|
documentExpireDate: e.employeePassport
|
||||||
:toolbar-color="
|
? dateFormat(e.employeePassport[0]?.expireDate) || '-'
|
||||||
readonly ? 'disabled' : $q.dark.isActive ? 'white' : ''
|
: '-',
|
||||||
"
|
imgUrl: `${baseUrl}/customer/${e.id}/image/${e.selectedImage}`,
|
||||||
:definitions="{
|
status: e.status,
|
||||||
clip: {
|
}))
|
||||||
icon: 'mdi-paperclip',
|
"
|
||||||
tip: 'Upload',
|
@delete="(i) => deleteItem(selectedWorker, i)"
|
||||||
handler: () => console.log('upload'),
|
/>
|
||||||
},
|
</div>
|
||||||
}"
|
</q-expansion-item>
|
||||||
@update:model-value="
|
|
||||||
(v) => {
|
<q-expansion-item
|
||||||
quotationFormData.remark = v;
|
for="item-up"
|
||||||
}
|
id="item-up"
|
||||||
"
|
dense
|
||||||
/>
|
class="overflow-hidden"
|
||||||
</div>
|
switch-toggle-side
|
||||||
</q-expansion-item>
|
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>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</article>
|
</article>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue