refactor: add btn form
This commit is contained in:
Thanaphon Frappet
parent
dd2563123e
commit
42d4063e69
1 changed files with 130 additions and 64 deletions
|
|
@ -42,6 +42,7 @@ import {
|
|||
} from 'src/stores/product-service/types';
|
||||
|
||||
// NOTE: Import Components
|
||||
import SelectInput from 'components/shared/SelectInput.vue';
|
||||
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';
|
||||
|
|
@ -121,6 +122,9 @@ const { data: config } = storeToRefs(configStore);
|
|||
|
||||
const receiptList = ref<Receipt[]>([]);
|
||||
|
||||
const templateForm = ref<string>('');
|
||||
const templateFormOption = ref<{ label: string; value: string }[]>([]);
|
||||
|
||||
const refSelectZoneEmployee = ref<InstanceType<typeof SelectZone>>();
|
||||
const mrz = ref<Awaited<ReturnType<typeof parseResultMRZ>>>();
|
||||
const toggleWorker = ref(true);
|
||||
|
|
@ -1122,6 +1126,70 @@ const view = ref<View>(View.Quotation);
|
|||
<div class="col text-left">{{ value.title }}</div>
|
||||
</button>
|
||||
</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
|
||||
hide-add
|
||||
class="col-12 col-md-8"
|
||||
input-only
|
||||
v-model:branch-id="quotationFormData.registeredBranchId"
|
||||
v-model:customer-branch-id="
|
||||
quotationFormData.customerBranchId
|
||||
"
|
||||
:readonly="readonly"
|
||||
/>
|
||||
</template>
|
||||
</QuotationFormMetadata>
|
||||
</div>
|
||||
</q-expansion-item>
|
||||
|
||||
<template
|
||||
v-if="
|
||||
view === View.Quotation ||
|
||||
|
|
@ -1129,69 +1197,6 @@ const view = ref<View>(View.Quotation);
|
|||
view === View.Invoice
|
||||
"
|
||||
>
|
||||
<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
|
||||
hide-add
|
||||
class="col-12 col-md-8"
|
||||
input-only
|
||||
v-model:branch-id="quotationFormData.registeredBranchId"
|
||||
v-model:customer-branch-id="
|
||||
quotationFormData.customerBranchId
|
||||
"
|
||||
:readonly="readonly"
|
||||
/>
|
||||
</template>
|
||||
</QuotationFormMetadata>
|
||||
</div>
|
||||
</q-expansion-item>
|
||||
|
||||
<q-expansion-item
|
||||
for="item-up"
|
||||
id="item-up"
|
||||
|
|
@ -1430,7 +1435,7 @@ const view = ref<View>(View.Quotation);
|
|||
header-class="surface-1"
|
||||
>
|
||||
<template v-slot:header>
|
||||
<section class="row items-center full-width">
|
||||
<section class="row items-ceenhancement nter full-width">
|
||||
<div class="row items-center q-pr-md q-py-sm">
|
||||
<span
|
||||
class="text-weight-medium q-mr-md"
|
||||
|
|
@ -1474,6 +1479,7 @@ const view = ref<View>(View.Quotation);
|
|||
</div>
|
||||
</q-expansion-item>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<PaymentForm
|
||||
v-if="
|
||||
|
|
@ -1597,6 +1603,66 @@ const view = ref<View>(View.Quotation);
|
|||
</div>
|
||||
</q-expansion-item>
|
||||
</template>
|
||||
|
||||
<template v-if="view === View.Quotation || view === View.Payment">
|
||||
<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.form') }}
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<div class="surface-1 q-pa-md flex" style="gap: var(--size-2)">
|
||||
<SelectInput
|
||||
style="max-width: 250px"
|
||||
class="q-mr-xl"
|
||||
incremental
|
||||
v-model="templateForm"
|
||||
id="quotation-branch"
|
||||
:option="templateFormOption"
|
||||
:label="$t('quotation.templateForm')"
|
||||
:option-label="locale === 'eng' ? 'labelEN' : 'label'"
|
||||
@filter="
|
||||
(val: string, update) => filter(val, update, 'branch')
|
||||
"
|
||||
/>
|
||||
<MainButton
|
||||
outlined
|
||||
icon="mdi-play-box-outline"
|
||||
color="207 96% 32%"
|
||||
@click="storeDataLocal"
|
||||
>
|
||||
{{ $t('general.view', { msg: $t('general.example') }) }}
|
||||
</MainButton>
|
||||
<MainButton
|
||||
solid
|
||||
icon="mdi-pencil-outline"
|
||||
color="207 96% 32%"
|
||||
@click="storeDataLocal"
|
||||
>
|
||||
{{ $t('general.designForm') }}
|
||||
</MainButton>
|
||||
</div>
|
||||
</q-expansion-item>
|
||||
</template>
|
||||
|
||||
<QuotationFormReceipt
|
||||
v-if="view === View.Receipt"
|
||||
v-for="(v, i) in receiptList"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue