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>
|
||||
|
|
|
|||
|
|
@ -3,8 +3,11 @@ import { Icon } from '@iconify/vue';
|
|||
import { QSelect } from 'quasar';
|
||||
import { selectFilterOptionRefMod } from 'src/stores/utils';
|
||||
import { onMounted, ref, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import AppBox from 'components/app/AppBox.vue';
|
||||
import DatePicker from 'src/components/shared/DatePicker.vue';
|
||||
import SelectInput from 'src/components/shared/SelectInput.vue';
|
||||
|
||||
import useOptionStore from 'src/stores/options';
|
||||
|
||||
|
|
@ -19,6 +22,8 @@ defineProps<{
|
|||
};
|
||||
}>();
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const quotationNo = defineModel<string>('quotationNo', { required: true });
|
||||
const actor = defineModel<string>('actor', { required: true });
|
||||
const workName = defineModel<string>('workName', { required: true });
|
||||
|
|
@ -29,11 +34,37 @@ const documentReceivePoint = defineModel<string>('documentReceivePoint', {
|
|||
});
|
||||
const dueDate = defineModel<string>('dueDate', { required: true });
|
||||
const payType = defineModel<string>('payType', { required: true });
|
||||
const paySplitCount = defineModel<string>('paySplitCount', { required: true });
|
||||
const paySplitCount = defineModel<number>('paySplitCount', {
|
||||
required: true,
|
||||
default: 1,
|
||||
});
|
||||
const payBank = defineModel<string>('payBank', { required: true });
|
||||
|
||||
const optionStore = useOptionStore();
|
||||
|
||||
// fullAmountCash
|
||||
// installmentsCash
|
||||
// fullAmountBill
|
||||
// installmentsBill
|
||||
const payTypeOpion = ref([
|
||||
{
|
||||
value: 'fullAmountCash',
|
||||
label: t('quotation.type.fullAmountCash'),
|
||||
},
|
||||
{
|
||||
value: 'installmentsCash',
|
||||
label: t('quotation.type.installmentsCash'),
|
||||
},
|
||||
{
|
||||
value: 'fullAmountBill',
|
||||
label: t('quotation.type.fullAmountBill'),
|
||||
},
|
||||
{
|
||||
value: 'installmentsBill',
|
||||
label: t('quotation.type.installmentsBill'),
|
||||
},
|
||||
]);
|
||||
|
||||
const bankBookOptions = ref<Record<string, unknown>[]>([]);
|
||||
let bankBoookFilter: (
|
||||
value: string,
|
||||
|
|
@ -71,14 +102,15 @@ watch(
|
|||
<q-icon name="mdi-file-outline" />
|
||||
</div>
|
||||
<span class="text-weight-bold">
|
||||
{{ $t('quotation.label.infoDocument') }}
|
||||
{{ $t('general.information', { msg: $t('general.attachment') }) }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="q-pa-sm">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<q-input
|
||||
:label="$t('quotation.label.quotationNo')"
|
||||
for="input-quotation"
|
||||
:label="$t('general.itemNo', { msg: $t('quotation.title') })"
|
||||
:readonly
|
||||
v-model="quotationNo"
|
||||
class="col-12"
|
||||
|
|
@ -86,7 +118,8 @@ watch(
|
|||
outlined
|
||||
/>
|
||||
<q-input
|
||||
:label="$t('quotation.label.actor')"
|
||||
for="input-actor"
|
||||
:label="$t('quotation.actor')"
|
||||
:readonly
|
||||
v-model="actor"
|
||||
class="col-12"
|
||||
|
|
@ -94,7 +127,8 @@ watch(
|
|||
outlined
|
||||
/>
|
||||
<q-input
|
||||
:label="$t('quotation.label.workName')"
|
||||
for="input-work-name"
|
||||
:label="$t('quotation.workName')"
|
||||
:readonly
|
||||
v-model="workName"
|
||||
class="col-12"
|
||||
|
|
@ -102,7 +136,8 @@ watch(
|
|||
outlined
|
||||
/>
|
||||
<q-input
|
||||
:label="$t('quotation.label.contactor')"
|
||||
for="input-contact-name"
|
||||
:label="$t('quotation.contactName')"
|
||||
:readonly
|
||||
v-model="contactor"
|
||||
class="col-12"
|
||||
|
|
@ -110,7 +145,8 @@ watch(
|
|||
outlined
|
||||
/>
|
||||
<q-input
|
||||
:label="$t('quotation.label.telephone')"
|
||||
for="input-telephone"
|
||||
:label="$t('general.telephone')"
|
||||
:readonly="readonly"
|
||||
v-model="telephone"
|
||||
class="col-12"
|
||||
|
|
@ -118,20 +154,20 @@ watch(
|
|||
outlined
|
||||
/>
|
||||
<q-input
|
||||
:label="$t('quotation.label.documentReceivePoint')"
|
||||
for="input-docs-receive-point"
|
||||
:label="$t('quotation.documentReceivePoint')"
|
||||
:readonly
|
||||
v-model="documentReceivePoint"
|
||||
class="col-12"
|
||||
dense
|
||||
outlined
|
||||
/>
|
||||
<q-input
|
||||
:label="$t('quotation.label.dueDate')"
|
||||
<DatePicker
|
||||
id="select-due-date"
|
||||
:label="$t('quotation.dueDate')"
|
||||
:readonly
|
||||
v-model="dueDate"
|
||||
class="col-12"
|
||||
dense
|
||||
outlined
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -142,51 +178,96 @@ watch(
|
|||
<q-icon name="mdi-bank-outline" />
|
||||
</div>
|
||||
<span class="text-weight-bold">
|
||||
{{ $t('quotation.label.infoPayment') }}
|
||||
{{ $t('quotation.paymentCondition') }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="q-pa-sm">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<q-select
|
||||
outlined
|
||||
clearable
|
||||
use-input
|
||||
emit-value
|
||||
map-options
|
||||
hide-bottom-space
|
||||
input-debounce="0"
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
<SelectInput
|
||||
class="col-12"
|
||||
autocomplete="off"
|
||||
for="select-payType"
|
||||
dense
|
||||
:label="$t('quotation.label.payType')"
|
||||
:options="[]"
|
||||
:label="$t('quotation.payType')"
|
||||
:option="payTypeOpion"
|
||||
:readonly
|
||||
:hide-dropdown-icon="readonly"
|
||||
id="pay-type"
|
||||
v-model="payType"
|
||||
></q-select>
|
||||
<div class="col-8 column">
|
||||
<q-field readonly dense outlined>
|
||||
<template #control>
|
||||
<span>{{ $t('quotation.label.paySplitCount') }}</span>
|
||||
<span class="app-text-muted">
|
||||
({{ $t('quotation.label.payTotal') }})
|
||||
/>
|
||||
|
||||
<q-field
|
||||
dense
|
||||
outlined
|
||||
class="col-12"
|
||||
v-if="
|
||||
payType === 'installmentsCash' || payType === 'installmentsBill'
|
||||
"
|
||||
>
|
||||
<div class="row full-width items-center justify-between q-py-xs">
|
||||
<div class="column">
|
||||
<span style="color: var(--foreground)">
|
||||
{{ $t('quotation.paySplitCount') }}
|
||||
</span>
|
||||
</template>
|
||||
</q-field>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<q-input
|
||||
v-model="paySplitCount"
|
||||
:readonly
|
||||
class="col-6"
|
||||
type="number"
|
||||
dense
|
||||
outlined
|
||||
/>
|
||||
</div>
|
||||
<span class="app-text-muted text-caption">
|
||||
({{ $t('quotation.payTotal', { msg: '10,000' }) }})
|
||||
</span>
|
||||
</div>
|
||||
<q-input
|
||||
v-model="paySplitCount"
|
||||
:readonly
|
||||
class="col-3"
|
||||
type="number"
|
||||
dense
|
||||
outlined
|
||||
min="1"
|
||||
/>
|
||||
</div>
|
||||
</q-field>
|
||||
<section
|
||||
v-if="
|
||||
payType === 'installmentsCash' || payType === 'installmentsBill'
|
||||
"
|
||||
class="col-12 text-caption"
|
||||
style="padding-left: 20px"
|
||||
>
|
||||
<template v-for="n in Number(paySplitCount)" :key="n">
|
||||
<div
|
||||
class="row app-text-muted items-center"
|
||||
:class="{ 'q-mb-sm': n !== Number(paySplitCount) }"
|
||||
>
|
||||
{{ `${$t('quotation.periodNo')} ${n}` }}
|
||||
<q-input
|
||||
class="col q-mx-sm"
|
||||
:label="$t('quotation.amount')"
|
||||
model-value="5,000"
|
||||
dense
|
||||
outlined
|
||||
bg-color="input-border"
|
||||
>
|
||||
<template #prepend>
|
||||
<q-icon name="mdi-cash" color="primary" />
|
||||
</template>
|
||||
</q-input>
|
||||
<DatePicker
|
||||
class="col-5"
|
||||
:label="$t('quotation.payDueDate')"
|
||||
bg-color="input-border"
|
||||
/>
|
||||
<!-- <q-input
|
||||
class="col"
|
||||
:label="$t('quotation.amount')"
|
||||
model-value="5,000"
|
||||
dense
|
||||
outlined
|
||||
bg-color="input-border"
|
||||
/> -->
|
||||
</div>
|
||||
</template>
|
||||
</section>
|
||||
|
||||
<DatePicker
|
||||
v-if="payType === 'fullAmountBill'"
|
||||
class="col-12"
|
||||
:label="$t('quotation.callDueDate')"
|
||||
/>
|
||||
|
||||
<q-select
|
||||
outlined
|
||||
clearable
|
||||
|
|
@ -202,7 +283,7 @@ watch(
|
|||
autocomplete="off"
|
||||
for="select-bankbook"
|
||||
dense
|
||||
:label="$t('quotation.label.bank')"
|
||||
:label="$t('quotation.bank')"
|
||||
:options="bankBookOptions"
|
||||
:readonly
|
||||
:hide-dropdown-icon="readonly"
|
||||
|
|
@ -269,7 +350,7 @@ watch(
|
|||
<Icon icon="iconoir:coins" />
|
||||
</div>
|
||||
<span class="text-weight-bold">
|
||||
{{ $t('quotation.label.infoSummary') }}
|
||||
{{ $t('quotation.summary') }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="q-pa-sm">
|
||||
|
|
@ -290,10 +371,17 @@ watch(
|
|||
<span class="q-ml-auto">{{ data?.totalVatExcluded || 0 }} ฿</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
{{ $t('general.totalVatIncluded') }}
|
||||
{{ $t('general.totalVatIncluded') + ' 7%' }}
|
||||
<span class="q-ml-auto">{{ data?.totalVatIncluded || 0 }} ฿</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="q-pa-sm row surface-2 items-center text-weight-bold">
|
||||
{{ $t('general.totalAmount') }}
|
||||
|
||||
<span class="q-ml-auto" style="color: var(--brand-1)">
|
||||
{{ data?.totalVatIncluded || 0 }} ฿
|
||||
</span>
|
||||
</div>
|
||||
</AppBox>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -87,6 +87,12 @@ const routes: RouteRecordRaw[] = [
|
|||
],
|
||||
},
|
||||
|
||||
{
|
||||
path: '/quotation/add-quotation',
|
||||
name: 'QuotationAdd',
|
||||
component: () => import('pages/05_quotation/QuotationForm.vue'),
|
||||
},
|
||||
|
||||
// Always leave this as last one,
|
||||
// but you can also remove it
|
||||
{
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue