feat: quotation form
This commit is contained in:
Methapon Metanipat
parent
d826188915
commit
f17bbecf46
3 changed files with 114 additions and 140 deletions
|
|
@ -11,7 +11,7 @@ const dialogState = defineModel('state', { default: true });
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<q-dialog v-model="dialogState">
|
<q-dialog v-model="dialogState" full-width full-height>
|
||||||
<AppBox
|
<AppBox
|
||||||
style="
|
style="
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
@ -19,10 +19,6 @@ const dialogState = defineModel('state', { default: true });
|
||||||
max-height: 100%;
|
max-height: 100%;
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
"
|
"
|
||||||
:style="{
|
|
||||||
width: width ?? '100%',
|
|
||||||
maxWidth: maxWidth ?? '98%',
|
|
||||||
}"
|
|
||||||
class="column"
|
class="column"
|
||||||
>
|
>
|
||||||
<div class="row items-center q-py-sm q-px-md bordered-b">
|
<div class="row items-center q-py-sm q-px-md bordered-b">
|
||||||
|
|
@ -43,9 +39,11 @@ const dialogState = defineModel('state', { default: true });
|
||||||
class="dialog-body"
|
class="dialog-body"
|
||||||
style="
|
style="
|
||||||
flex: 1;
|
flex: 1;
|
||||||
max-height: calc(100vh - 200px);
|
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,9 @@
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref } from 'vue';
|
import { ref } from 'vue';
|
||||||
import QuotationForm from './QuotationForm.vue';
|
import QuotationForm from './QuotationForm.vue';
|
||||||
import SideMenu from 'components/SideMenu.vue';
|
|
||||||
import ImageUploadDialog from 'components/ImageUploadDialog.vue';
|
|
||||||
import { watch } from 'vue';
|
|
||||||
import TreeView from 'src/components/shared/TreeView.vue';
|
import TreeView from 'src/components/shared/TreeView.vue';
|
||||||
|
|
||||||
const isOpen = ref(true);
|
const isOpen = ref(true);
|
||||||
const imageUploadDialog = ref<InstanceType<typeof ImageUploadDialog>>();
|
|
||||||
const file = ref<File | null>(null);
|
|
||||||
|
|
||||||
const nodes = ref([
|
const nodes = ref([
|
||||||
{
|
{
|
||||||
title: 'กลุ่มสินค้าและบริการที่ 1',
|
title: 'กลุ่มสินค้าและบริการที่ 1',
|
||||||
|
|
@ -129,8 +123,8 @@ const nodes = ref([
|
||||||
id="my-anchor"
|
id="my-anchor"
|
||||||
>
|
>
|
||||||
My Menu
|
My Menu
|
||||||
</div>
|
</div> -->
|
||||||
<QuatationForm v-model:dialog-state="isOpen" /> -->
|
<QuotationForm v-model:dialog-state="isOpen" readonly />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped></style>
|
<style scoped></style>
|
||||||
|
|
|
||||||
|
|
@ -1,16 +1,33 @@
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref } from 'vue';
|
import { ref } from 'vue';
|
||||||
import { Icon } from '@iconify/vue';
|
import { QSelect } from 'quasar';
|
||||||
|
|
||||||
|
import AppBox from 'components/app/AppBox.vue';
|
||||||
import MainDialog from 'components/05_quotation/MainDialog.vue';
|
import MainDialog from 'components/05_quotation/MainDialog.vue';
|
||||||
import WorkerItem from 'components/05_quotation/WorkerItem.vue';
|
import WorkerItem from 'components/05_quotation/WorkerItem.vue';
|
||||||
import AppBox from 'components/app/AppBox.vue';
|
import QuotationFormInfo from './QuotationFormInfo.vue';
|
||||||
|
import { AddButton, SaveButton } from 'components/button';
|
||||||
|
|
||||||
|
defineProps<{
|
||||||
|
readonly?: boolean;
|
||||||
|
}>();
|
||||||
|
|
||||||
const dialogState = defineModel<boolean>({ default: true });
|
const dialogState = defineModel<boolean>({ default: true });
|
||||||
|
|
||||||
const selectedBranchIssuer = ref('');
|
const selectedBranchIssuer = ref('');
|
||||||
const selectedCustomer = ref('');
|
const selectedCustomer = ref('');
|
||||||
const toggleWorker = ref(true);
|
const toggleWorker = ref(true);
|
||||||
|
|
||||||
|
const quotationNo = ref('');
|
||||||
|
const actor = ref('');
|
||||||
|
const workName = ref('');
|
||||||
|
const contactor = ref('');
|
||||||
|
const telephone = ref('');
|
||||||
|
const documentReceivePoint = ref('');
|
||||||
|
const dueDate = ref('');
|
||||||
|
const payType = ref('');
|
||||||
|
const paySplitCount = ref('');
|
||||||
|
const payBank = ref('');
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
@ -48,144 +65,81 @@ const toggleWorker = ref(true);
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="surface-2 bordered-t row"
|
class="surface-2 bordered-t row"
|
||||||
style="align-items: stretch; overflow-y: auto"
|
style="flex-grow: 1; overflow-y: hidden"
|
||||||
|
:style="{
|
||||||
|
overflowY: $q.screen.gt.sm ? 'hidden' : 'auto',
|
||||||
|
}"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="col-12 col-sm-9 row items-stretch"
|
class="col-12 col-sm-9 row"
|
||||||
style="padding: var(--size-3)"
|
style="padding: var(--size-3); overflow-y: auto"
|
||||||
|
:style="{
|
||||||
|
paddingRight: $q.screen.gt.sm ? 'var(--size-2)' : 'var(--size-3)',
|
||||||
|
maxHeight: $q.screen.gt.sm ? '100%' : undefined,
|
||||||
|
}"
|
||||||
>
|
>
|
||||||
<AppBox
|
<div class="col">
|
||||||
class="full-width"
|
<AppBox bordered style="padding: var(--size-3)">
|
||||||
bordered
|
<div class="row items-center q-mb-sm">
|
||||||
style="
|
<span style="flex: 1">
|
||||||
padding: var(--size-3);
|
{{ $t('quotation.label.listWorker') }}
|
||||||
max-height: calc(100vh - 300px - var(--size-3) * 2);
|
<q-toggle
|
||||||
overflow-y: auto;
|
v-model="toggleWorker"
|
||||||
"
|
id="toggle-status"
|
||||||
>
|
size="md"
|
||||||
<div class="row items-center q-mb-sm">
|
padding="none"
|
||||||
<span style="flex: 1">
|
class="q-ml-md"
|
||||||
{{ $t('quotation.form.listWorker') }}
|
dense
|
||||||
<q-toggle
|
/>
|
||||||
v-model="toggleWorker"
|
</span>
|
||||||
id="toggle-status"
|
<AddButton icon-only />
|
||||||
size="md"
|
</div>
|
||||||
padding="none"
|
|
||||||
class="q-ml-md"
|
|
||||||
dense
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
<button
|
|
||||||
id="add-btn-plus"
|
|
||||||
class="row items-center"
|
|
||||||
style="border: none; background: transparent"
|
|
||||||
>
|
|
||||||
<Icon
|
|
||||||
height="24"
|
|
||||||
icon="pixelarticons:plus"
|
|
||||||
class="app-text-info cursor-pointer"
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<AppBox class="surface-2 worker-list" bordered>
|
<AppBox class="surface-2 worker-list" v-if="toggleWorker" bordered>
|
||||||
<WorkerItem
|
<WorkerItem
|
||||||
:data="{
|
v-for="_ in Array(20)"
|
||||||
no: 1,
|
:data="{
|
||||||
refNo: 'CC6613334',
|
no: 1,
|
||||||
nationality: 'Thai',
|
refNo: 'CC6613334',
|
||||||
birthDate: '1 May 2001',
|
nationality: 'Thai',
|
||||||
age: '23 Years',
|
birthDate: '1 May 2001',
|
||||||
fullName: 'Methapon Metanipat',
|
age: '23 Years',
|
||||||
docExpireDate: '16 May 2025',
|
fullName: 'Methapon Metanipat',
|
||||||
}"
|
docExpireDate: '16 May 2025',
|
||||||
color="male"
|
}"
|
||||||
/>
|
color="male"
|
||||||
<WorkerItem
|
/>
|
||||||
:data="{
|
</AppBox>
|
||||||
no: 1,
|
|
||||||
refNo: 'CC6613334',
|
|
||||||
nationality: 'Thai',
|
|
||||||
birthDate: '1 May 2001',
|
|
||||||
age: '23 Years',
|
|
||||||
fullName: 'Methapon Metanipat',
|
|
||||||
docExpireDate: '16 May 2025',
|
|
||||||
}"
|
|
||||||
color="male"
|
|
||||||
/>
|
|
||||||
<q-tabs
|
|
||||||
inline-label
|
|
||||||
mobile-arrows
|
|
||||||
dense
|
|
||||||
align="left"
|
|
||||||
class="full-width"
|
|
||||||
active-color="info"
|
|
||||||
>
|
|
||||||
<q-tab name="ALL">
|
|
||||||
<div class="row">{{ $t('all') }}</div>
|
|
||||||
</q-tab>
|
|
||||||
<q-tab name="USER">
|
|
||||||
<div class="row">
|
|
||||||
{{ $t('USER') }}
|
|
||||||
</div>
|
|
||||||
</q-tab>
|
|
||||||
<q-tab name="MESSENGER">
|
|
||||||
<div class="row">
|
|
||||||
{{ $t('MESSENGER') }}
|
|
||||||
</div>
|
|
||||||
</q-tab>
|
|
||||||
<q-tab name="DELEGATE">
|
|
||||||
<div class="row">
|
|
||||||
{{ $t('DELEGATE') }}
|
|
||||||
</div>
|
|
||||||
</q-tab>
|
|
||||||
<q-tab name="AGENCY">
|
|
||||||
<div class="row">
|
|
||||||
{{ $t('AGENCY') }}
|
|
||||||
</div>
|
|
||||||
</q-tab>
|
|
||||||
</q-tabs>
|
|
||||||
</AppBox>
|
</AppBox>
|
||||||
</AppBox>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="col-12 col-sm-3"
|
class="col-12 col-sm-3"
|
||||||
style="
|
style="padding: var(--size-3); overflow-y: auto"
|
||||||
padding: var(--size-3);
|
:style="{
|
||||||
padding-left: 0;
|
paddingLeft: $q.screen.gt.sm ? 'var(--size-1)' : 'var(--size-3)',
|
||||||
overflow-y: auto;
|
maxHeight: $q.screen.gt.sm ? '100%' : undefined,
|
||||||
max-height: calc(100vh - 300px);
|
}"
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<AppBox bordered class="column" style="gap: var(--size-3)">
|
<QuotationFormInfo
|
||||||
<div class="rounded bordered q-px-md q-py-sm row">
|
v-model:quotation-no="quotationNo"
|
||||||
<div class="col-4">{{ $t('quotation.form.labelNo') }}</div>
|
v-model:actor="actor"
|
||||||
</div>
|
v-model:work-name="workName"
|
||||||
|
v-model:contactor="contactor"
|
||||||
<div class="rounded bordered q-px-md q-py-sm row">
|
v-model:telephone="telephone"
|
||||||
<div class="col-4">{{ $t('quotation.form.labelDate') }}</div>
|
v-model:document-receive-point="documentReceivePoint"
|
||||||
</div>
|
v-model:due-date="dueDate"
|
||||||
|
v-model:pay-type="payType"
|
||||||
<div class="rounded bordered q-px-md q-py-sm row">
|
v-model:pay-bank="payBank"
|
||||||
<div class="col-4">{{ $t('quotation.form.labelTime') }}</div>
|
v-model:pay-split-count="paySplitCount"
|
||||||
</div>
|
:readonly
|
||||||
|
/>
|
||||||
<div class="rounded bordered q-px-md q-py-sm row">
|
|
||||||
<div class="col-4">{{ $t('quotation.form.labelProcesser') }}</div>
|
|
||||||
</div>
|
|
||||||
</AppBox>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<template #footer>
|
<template #footer>
|
||||||
<div class="row justify-end full-width">
|
<div class="row justify-end full-width">
|
||||||
<q-btn
|
<SaveButton />
|
||||||
color="primary"
|
|
||||||
dense
|
|
||||||
no-caps
|
|
||||||
:label="$t('quotation.form.buttonSave')"
|
|
||||||
class="q-px-md"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</MainDialog>
|
</MainDialog>
|
||||||
|
|
@ -195,4 +149,32 @@ const toggleWorker = ref(true);
|
||||||
.worker-list > :deep(*:not(:last-child)) {
|
.worker-list > :deep(*:not(:last-child)) {
|
||||||
margin-bottom: var(--size-2);
|
margin-bottom: var(--size-2);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.icon-wrapper {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
aspect-ratio: 1/1;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
padding: var(--size-1);
|
||||||
|
border-radius: var(--radius-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-color-orange {
|
||||||
|
--_color: var(--yellow-7-hsl);
|
||||||
|
color: white;
|
||||||
|
background: hsla(var(--_color));
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .bg-color-orange {
|
||||||
|
--_color: var(--orange-6-hsl);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-color-orange-light {
|
||||||
|
--_color: var(--yellow-7-hsl);
|
||||||
|
background: hsla(var(--_color) / 0.2);
|
||||||
|
}
|
||||||
|
.dark .bg-color-orange {
|
||||||
|
--_color: var(--orange-6-hsl / 0.2);
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue