feat(05): quotation form
This commit is contained in:
puriphatt
parent
d79a28d31c
commit
9bf06ac209
3 changed files with 356 additions and 82 deletions
|
|
@ -2,18 +2,16 @@
|
|||
import { ref } from 'vue';
|
||||
import { QSelect } from 'quasar';
|
||||
|
||||
import AppBox from 'components/app/AppBox.vue';
|
||||
import MainDialog from 'components/05_quotation/MainDialog.vue';
|
||||
import WorkerItem from 'components/05_quotation/WorkerItem.vue';
|
||||
import QuotationFormInfo from './QuotationFormInfo.vue';
|
||||
import { AddButton, SaveButton } from 'components/button';
|
||||
import ToggleButton from 'src/components/button/ToggleButton.vue';
|
||||
import ProductItem from 'src/components/05_quotation/ProductItem.vue';
|
||||
|
||||
defineProps<{
|
||||
readonly?: boolean;
|
||||
}>();
|
||||
|
||||
const dialogState = defineModel<boolean>({ default: true });
|
||||
|
||||
const selectedBranchIssuer = ref('');
|
||||
const selectedCustomer = ref('');
|
||||
const toggleWorker = ref(true);
|
||||
|
|
@ -26,24 +24,32 @@ const telephone = ref('');
|
|||
const documentReceivePoint = ref('');
|
||||
const dueDate = ref('');
|
||||
const payType = ref('');
|
||||
const paySplitCount = ref('');
|
||||
const paySplitCount = ref(1);
|
||||
const payBank = ref('');
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<MainDialog v-model:state="dialogState">
|
||||
<template #title>
|
||||
<span class="text-weight-medium" style="color: var(--brand-1)">
|
||||
{{ $t('quotation.form.createTitle') }}
|
||||
</span>
|
||||
</template>
|
||||
<div class="fullscreen column">
|
||||
<div class="color-bar">
|
||||
<div class="blue-segment"></div>
|
||||
<div class="orange-segment"></div>
|
||||
<div class="gray-segment"></div>
|
||||
</div>
|
||||
|
||||
<div class="row q-pa-md items-center">
|
||||
<div style="flex: 1"><q-img src="/logo.png" width="8rem" /></div>
|
||||
<header class="row q-pa-md items-center">
|
||||
<div style="flex: 1" class="row items-center">
|
||||
<q-img src="/icons/favicon-512x512.png" width="4rem" />
|
||||
<span class="column text-h6 text-bold q-ml-md">
|
||||
{{ $t('quotation.title') }}
|
||||
<span class="text-caption text-regular app-text-muted">
|
||||
{{ $t('quotation.processOn', { msg: '27 มีนาคม 2567 16:00:01' }) }}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<q-select
|
||||
v-model="selectedBranchIssuer"
|
||||
:options="[{ label: 'Issuer 1', value: 'Issuer 1' }]"
|
||||
:label="$t('quotation.form.customerBranchSelect')"
|
||||
:label="$t('quotation.branch')"
|
||||
id="select-branch-issuer"
|
||||
for="select-branch-issuer"
|
||||
style="width: 300px"
|
||||
|
|
@ -54,23 +60,23 @@ const payBank = ref('');
|
|||
<q-select
|
||||
v-model="selectedCustomer"
|
||||
:options="[{ label: 'Customer 1', value: 'Customer 1' }]"
|
||||
:label="$t('quotation.form.customerSelect')"
|
||||
:label="$t('quotation.customer')"
|
||||
id="select-customer"
|
||||
for="select-customer"
|
||||
style="width: 300px"
|
||||
outlined
|
||||
dense
|
||||
/>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div
|
||||
class="surface-2 bordered-t row"
|
||||
<body
|
||||
class="row col"
|
||||
style="flex-grow: 1; overflow-y: hidden"
|
||||
:style="{
|
||||
overflowY: $q.screen.gt.sm ? 'hidden' : 'auto',
|
||||
}"
|
||||
>
|
||||
<div
|
||||
<section
|
||||
class="col-12 col-sm-9 row"
|
||||
style="padding: var(--size-3); overflow-y: auto"
|
||||
:style="{
|
||||
|
|
@ -78,11 +84,138 @@ const payBank = ref('');
|
|||
maxHeight: $q.screen.gt.sm ? '100%' : undefined,
|
||||
}"
|
||||
>
|
||||
<div class="col">
|
||||
<AppBox bordered style="padding: var(--size-3)">
|
||||
<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>
|
||||
<div class="row full-width items-center q-pr-md q-py-sm">
|
||||
<span
|
||||
class="text-weight-medium q-mr-md"
|
||||
style="font-size: 18px"
|
||||
>
|
||||
{{ $t('quotation.employeeList') }}
|
||||
</span>
|
||||
<ToggleButton class="q-mr-sm" v-model="toggleWorker" />
|
||||
{{
|
||||
toggleWorker ? $t('general.specify') : $t('general.noSpecify')
|
||||
}}
|
||||
</div>
|
||||
<AddButton icon-only class="q-ml-auto" @click.stop="" />
|
||||
</template>
|
||||
|
||||
<div class="surface-1 q-pa-md full-width">
|
||||
<WorkerItem
|
||||
:rows="[
|
||||
{
|
||||
foreignRefNo: '123',
|
||||
employeeName: '123',
|
||||
birthDate: '123',
|
||||
gender: '123',
|
||||
age: '123',
|
||||
nationality: '123',
|
||||
documentExpireDate: '123',
|
||||
imgUrl: '/images/employee-avatar.png',
|
||||
status: 'ACTIVE',
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</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>
|
||||
<div class="row full-width items-center q-pr-md q-py-sm">
|
||||
<span class="text-weight-medium" style="font-size: 18px">
|
||||
{{ $t('quotation.productList') }}
|
||||
</span>
|
||||
</div>
|
||||
<AddButton icon-only class="q-ml-auto" @click.stop="" />
|
||||
</template>
|
||||
<div class="surface-1 q-pa-md full-width">
|
||||
<ProductItem
|
||||
:rows="[
|
||||
{
|
||||
code: '123456',
|
||||
list: 'aaa',
|
||||
type: 'product',
|
||||
amount: 0,
|
||||
pricePerUnit: 0,
|
||||
discount: 0,
|
||||
tax: 0,
|
||||
sumPrice: 0,
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</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>
|
||||
<div class="row full-width items-center q-pr-md q-py-sm">
|
||||
<span class="text-weight-medium" style="font-size: 18px">
|
||||
{{ $t('productService.group.title') }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="surface-1 q-pa-md full-width">
|
||||
<q-editor
|
||||
dense
|
||||
:model-value="''"
|
||||
min-height="5rem"
|
||||
class="full-width"
|
||||
toolbar-bg="input-border"
|
||||
style="cursor: auto; color: var(--foreground)"
|
||||
:flat="!readonly"
|
||||
:readonly="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'),
|
||||
},
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</q-expansion-item>
|
||||
<!-- <AppBox bordered style="padding: var(--size-3)">
|
||||
<div class="row items-center q-mb-sm">
|
||||
<span style="flex: 1">
|
||||
{{ $t('quotation.label.listWorker') }}
|
||||
{{ $t('quotation.employeeList') }}
|
||||
<q-toggle
|
||||
v-model="toggleWorker"
|
||||
id="toggle-status"
|
||||
|
|
@ -110,9 +243,10 @@ const payBank = ref('');
|
|||
color="male"
|
||||
/>
|
||||
</AppBox>
|
||||
</AppBox>
|
||||
</AppBox> -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div
|
||||
class="col-12 col-sm-3"
|
||||
style="padding: var(--size-3); overflow-y: auto"
|
||||
|
|
@ -135,14 +269,18 @@ const payBank = ref('');
|
|||
:readonly
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<template #footer>
|
||||
<div class="row justify-end full-width">
|
||||
<SaveButton />
|
||||
<footer class="surface-1 q-pa-md">
|
||||
<div class="row full-width justify-between">
|
||||
<q-btn dense outline color="primary" class="rounded" padding="2px 8px">
|
||||
<q-icon name="mdi-play-box-outline" size="xs" class="q-mr-xs" />
|
||||
{{ $t('general.view', { msg: $t('general.example') }) }}
|
||||
</q-btn>
|
||||
<SaveButton solid />
|
||||
</div>
|
||||
</template>
|
||||
</MainDialog>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
|
@ -177,4 +315,46 @@ const payBank = ref('');
|
|||
.dark .bg-color-orange {
|
||||
--_color: var(--orange-6-hsl / 0.2);
|
||||
}
|
||||
|
||||
.color-bar {
|
||||
width: 100%;
|
||||
height: 1vh;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(245, 159, 0, 1) 0%,
|
||||
rgba(255, 255, 255, 1) 77%,
|
||||
rgba(204, 204, 204, 1) 100%
|
||||
);
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.blue-segment {
|
||||
background-color: var(--yellow-7);
|
||||
flex-grow: 4;
|
||||
}
|
||||
|
||||
.orange-segment {
|
||||
background-color: hsla(var(--yellow-7-hsl) / 0.2);
|
||||
flex-grow: 0.5;
|
||||
}
|
||||
|
||||
.gray-segment {
|
||||
background-color: #ccc;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.blue-segment,
|
||||
.orange-segment,
|
||||
.gray-segment {
|
||||
transform: skewX(-60deg);
|
||||
}
|
||||
|
||||
:deep(i.q-icon.mdi.mdi-chevron-down-circle.q-expansion-item__toggle-icon) {
|
||||
color: var(--brand-1);
|
||||
}
|
||||
|
||||
:deep(.q-editor__toolbar-group):nth-child(2) {
|
||||
margin-left: auto !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue