423 lines
12 KiB
Vue
423 lines
12 KiB
Vue
<script lang="ts" setup>
|
|
import { onMounted, ref } from 'vue';
|
|
import { QSelect, useQuasar } from 'quasar';
|
|
|
|
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';
|
|
import { setLocale } from 'src/utils/datetime';
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
defineProps<{
|
|
readonly?: boolean;
|
|
}>();
|
|
|
|
const { locale } = useI18n();
|
|
const $q = useQuasar();
|
|
|
|
const selectedBranchIssuer = ref('');
|
|
const selectedCustomer = ref('');
|
|
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(1);
|
|
const payBank = ref('');
|
|
|
|
function changeMode(mode: string) {
|
|
if (mode === 'light') {
|
|
localStorage.setItem('currentTheme', 'light');
|
|
$q.dark.set(false);
|
|
return;
|
|
}
|
|
|
|
if (mode === 'dark') {
|
|
localStorage.setItem('currentTheme', 'dark');
|
|
$q.dark.set(true);
|
|
return;
|
|
}
|
|
|
|
if (mode === 'baseOnDevice') {
|
|
localStorage.setItem('currentTheme', 'baseOnDevice');
|
|
if (
|
|
window.matchMedia &&
|
|
window.matchMedia('(prefers-color-scheme: dark)').matches
|
|
) {
|
|
$q.dark.set(true);
|
|
} else {
|
|
$q.dark.set(false);
|
|
}
|
|
return;
|
|
}
|
|
}
|
|
|
|
onMounted(async () => {
|
|
const getCurLang = localStorage.getItem('currentLanguage');
|
|
if (getCurLang === 'English') {
|
|
locale.value = 'eng';
|
|
setLocale('en-gb');
|
|
}
|
|
if (getCurLang === 'ไทย') {
|
|
locale.value = 'tha';
|
|
setLocale('th');
|
|
}
|
|
|
|
const getCurTheme = localStorage.getItem('currentTheme');
|
|
if (
|
|
getCurTheme === 'light' ||
|
|
getCurTheme === 'dark' ||
|
|
getCurTheme === 'baseOnDevice'
|
|
) {
|
|
changeMode(getCurTheme);
|
|
} else {
|
|
changeMode('light');
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="fullscreen column surface-0">
|
|
<div class="color-bar">
|
|
<div class="blue-segment"></div>
|
|
<div class="orange-segment"></div>
|
|
<div class="gray-segment"></div>
|
|
</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.branch')"
|
|
id="select-branch-issuer"
|
|
for="select-branch-issuer"
|
|
style="width: 300px"
|
|
class="q-mr-md"
|
|
outlined
|
|
dense
|
|
/>
|
|
<q-select
|
|
v-model="selectedCustomer"
|
|
:options="[{ label: 'Customer 1', value: 'Customer 1' }]"
|
|
:label="$t('quotation.customer')"
|
|
id="select-customer"
|
|
for="select-customer"
|
|
style="width: 300px"
|
|
outlined
|
|
dense
|
|
/>
|
|
</header>
|
|
|
|
<article
|
|
class="row col"
|
|
style="flex-grow: 1; overflow-y: hidden"
|
|
:style="{
|
|
overflowY: $q.screen.gt.sm ? 'hidden' : 'auto',
|
|
}"
|
|
>
|
|
<section
|
|
class="col-12 col-sm-9 row"
|
|
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,
|
|
}"
|
|
>
|
|
<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.employeeList') }}
|
|
<q-toggle
|
|
v-model="toggleWorker"
|
|
id="toggle-status"
|
|
size="md"
|
|
padding="none"
|
|
class="q-ml-md"
|
|
dense
|
|
/>
|
|
</span>
|
|
<AddButton icon-only />
|
|
</div>
|
|
|
|
<AppBox class="surface-2 worker-list" v-if="toggleWorker" bordered>
|
|
<WorkerItem
|
|
v-for="_ in Array(20)"
|
|
:data="{
|
|
no: 1,
|
|
refNo: 'CC6613334',
|
|
nationality: 'Thai',
|
|
birthDate: '1 May 2001',
|
|
age: '23 Years',
|
|
fullName: 'Methapon Metanipat',
|
|
docExpireDate: '16 May 2025',
|
|
}"
|
|
color="male"
|
|
/>
|
|
</AppBox>
|
|
</AppBox> -->
|
|
</div>
|
|
</section>
|
|
|
|
<div
|
|
class="col-12 col-sm-3"
|
|
style="padding: var(--size-3); overflow-y: auto"
|
|
:style="{
|
|
paddingLeft: $q.screen.gt.sm ? 'var(--size-1)' : 'var(--size-3)',
|
|
maxHeight: $q.screen.gt.sm ? '100%' : undefined,
|
|
}"
|
|
>
|
|
<QuotationFormInfo
|
|
v-model:quotation-no="quotationNo"
|
|
v-model:actor="actor"
|
|
v-model:work-name="workName"
|
|
v-model:contactor="contactor"
|
|
v-model:telephone="telephone"
|
|
v-model:document-receive-point="documentReceivePoint"
|
|
v-model:due-date="dueDate"
|
|
v-model:pay-type="payType"
|
|
v-model:pay-bank="payBank"
|
|
v-model:pay-split-count="paySplitCount"
|
|
:readonly
|
|
/>
|
|
</div>
|
|
</article>
|
|
|
|
<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>
|
|
</footer>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.worker-list > :deep(*:not(:last-child)) {
|
|
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);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
:deep(.q-editor__toolbar.row.no-wrap.scroll-x) {
|
|
background-color: var(--surface-2) !important;
|
|
}
|
|
|
|
:deep(.q-editor__toolbar) {
|
|
border-color: var(--surface-3) !important;
|
|
}
|
|
</style>
|