refactor(form-quotation): layout
This commit is contained in:
Methapon Metanipat
parent
3b3979e403
commit
bedbcd1a95
4 changed files with 446 additions and 475 deletions
|
|
@ -59,6 +59,7 @@ import {
|
|||
} from 'src/pages/03_customer-management/constant';
|
||||
import { precisionRound } from 'src/utils/arithmetic';
|
||||
import { useConfigStore } from 'src/stores/config';
|
||||
import QuotationFormMetadata from './QuotationFormMetadata.vue';
|
||||
|
||||
// defineProps<{
|
||||
// readonly?: boolean;
|
||||
|
|
@ -570,26 +571,6 @@ onMounted(async () => {
|
|||
sessionData.value = parsed;
|
||||
}
|
||||
|
||||
// get query string
|
||||
// const urlParams = new URLSearchParams(window.location.search);
|
||||
//
|
||||
// const price = urlParams.get('agentPrice');
|
||||
// agentPrice.value = price === 'true' ? true : false;
|
||||
//
|
||||
// date.value = Date.now();
|
||||
//
|
||||
// currentQuotationId.value = urlParams.get('quotationId') || undefined;
|
||||
//
|
||||
// quotationFormData.value.registeredBranchId = urlParams.get('branchId') || '';
|
||||
//
|
||||
// quotationFormData.value.customerBranchId =
|
||||
// urlParams.get('customerBranchId') || '';
|
||||
//
|
||||
// quotationFormState.value.mode = urlParams.get('statusDialog') as
|
||||
// | 'info'
|
||||
// | 'edit'
|
||||
// | 'create';
|
||||
|
||||
// fetch option
|
||||
const resultOption = await fetch('/option/option.json');
|
||||
const rawOption = await resultOption.json();
|
||||
|
|
@ -693,7 +674,7 @@ function storeDataLocal() {
|
|||
<div class="gray-segment"></div>
|
||||
</div>
|
||||
|
||||
<header class="row q-px-md q-py-sm items-center full-width">
|
||||
<header class="row q-px-md q-py-sm items-center full">
|
||||
<div style="flex: 1" class="row items-center">
|
||||
<q-img src="/icons/favicon-512x512.png" width="3rem" />
|
||||
<span class="column text-h6 text-bold q-ml-md">
|
||||
|
|
@ -710,31 +691,124 @@ function storeDataLocal() {
|
|||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<FormAbout
|
||||
class="col-4"
|
||||
input-only
|
||||
v-model:branch-id="quotationFormData.registeredBranchId"
|
||||
v-model:customer-branch-id="quotationFormData.customerBranchId"
|
||||
:readonly="readonly"
|
||||
@add-customer=""
|
||||
/>
|
||||
</header>
|
||||
|
||||
<article
|
||||
class="row col full-width q-pa-md"
|
||||
class="col full-width q-pa-md"
|
||||
style="flex-grow: 1; overflow-y: hidden"
|
||||
:style="{
|
||||
overflowY: $q.screen.gt.xs ? 'hidden' : 'auto',
|
||||
}"
|
||||
>
|
||||
<section
|
||||
class="col-sm col-12 row scroll"
|
||||
class="col-sm col-12 scroll"
|
||||
:class="{
|
||||
'full-height q-mr-md': $q.screen.gt.xs,
|
||||
'q-mb-md': $q.screen.lt.md,
|
||||
}"
|
||||
>
|
||||
<div class="col q-gutter-y-md">
|
||||
<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>
|
||||
|
||||
<span
|
||||
class="text-weight-medium q-mt-md 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>
|
||||
<q-expansion-item
|
||||
for="item-up"
|
||||
id="item-up"
|
||||
|
|
@ -866,7 +940,6 @@ function storeDataLocal() {
|
|||
/>
|
||||
</div>
|
||||
</q-expansion-item>
|
||||
|
||||
<q-expansion-item
|
||||
for="item-up"
|
||||
id="item-up"
|
||||
|
|
@ -879,71 +952,33 @@ function storeDataLocal() {
|
|||
header-class="surface-1"
|
||||
>
|
||||
<template v-slot:header>
|
||||
<div class="row full-width items-center q-pr-md q-py-sm">
|
||||
<span class="text-weight-medium" style="font-size: 18px">
|
||||
{{ $t('general.remark') }}
|
||||
</span>
|
||||
</div>
|
||||
<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">
|
||||
<q-editor
|
||||
dense
|
||||
<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
|
||||
: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;
|
||||
}
|
||||
"
|
||||
v-model:final-discount="quotationFormData.discount"
|
||||
v-model:pay-bill-date="quotationFormData.payBillDate"
|
||||
v-model:summary-price="summaryPrice"
|
||||
/>
|
||||
</div>
|
||||
</q-expansion-item>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div
|
||||
class="col-12 col-md-3 col-sm-4 scroll"
|
||||
:class="{ 'full-height': $q.screen.gt.xs }"
|
||||
>
|
||||
<QuotationFormInfo
|
||||
:quotation-no="(quotationFull && quotationFull.code) || ''"
|
||||
v-model:urgent="quotationFormData.urgent"
|
||||
:actor="quotationFormState.createdBy?.($i18n.locale) || ''"
|
||||
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"
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<footer class="surface-1 q-pa-md full-width">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue