refactor: always add slash in front
This commit is contained in:
Methapon Metanipat
parent
182ddc2d92
commit
d826188915
2 changed files with 331 additions and 8 deletions
323
src/pages/05_quotation/QuotationFormInfo.vue
Normal file
323
src/pages/05_quotation/QuotationFormInfo.vue
Normal file
|
|
@ -0,0 +1,323 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { Icon } from '@iconify/vue';
|
||||||
|
import { QSelect } from 'quasar';
|
||||||
|
import { selectFilterOptionRefMod } from 'src/stores/utils';
|
||||||
|
import { onMounted, ref, watch } from 'vue';
|
||||||
|
|
||||||
|
import AppBox from 'components/app/AppBox.vue';
|
||||||
|
|
||||||
|
import useOptionStore from 'src/stores/options';
|
||||||
|
|
||||||
|
defineProps<{
|
||||||
|
readonly?: boolean;
|
||||||
|
data?: {
|
||||||
|
total: number;
|
||||||
|
discount: number;
|
||||||
|
totalVatExcluded: number;
|
||||||
|
totalVatIncluded: number;
|
||||||
|
totalAfterDiscount: number;
|
||||||
|
};
|
||||||
|
}>();
|
||||||
|
|
||||||
|
const quotationNo = defineModel<string>('quotationNo', { required: true });
|
||||||
|
const actor = defineModel<string>('actor', { required: true });
|
||||||
|
const workName = defineModel<string>('workName', { required: true });
|
||||||
|
const contactor = defineModel<string>('contactor', { required: true });
|
||||||
|
const telephone = defineModel<string>('telephone', { required: true });
|
||||||
|
const documentReceivePoint = defineModel<string>('documentReceivePoint', {
|
||||||
|
required: true,
|
||||||
|
});
|
||||||
|
const dueDate = defineModel<string>('dueDate', { required: true });
|
||||||
|
const payType = defineModel<string>('payType', { required: true });
|
||||||
|
const paySplitCount = defineModel<string>('paySplitCount', { required: true });
|
||||||
|
const payBank = defineModel<string>('payBank', { required: true });
|
||||||
|
|
||||||
|
const optionStore = useOptionStore();
|
||||||
|
|
||||||
|
const bankBookOptions = ref<Record<string, unknown>[]>([]);
|
||||||
|
let bankBoookFilter: (
|
||||||
|
value: string,
|
||||||
|
update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
|
||||||
|
) => void;
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
if (optionStore.globalOption) {
|
||||||
|
bankBoookFilter = selectFilterOptionRefMod(
|
||||||
|
ref(optionStore.globalOption.bankBook),
|
||||||
|
bankBookOptions,
|
||||||
|
'label',
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => optionStore.globalOption,
|
||||||
|
() => {
|
||||||
|
bankBoookFilter = selectFilterOptionRefMod(
|
||||||
|
ref(optionStore.globalOption.bankBook),
|
||||||
|
bankBookOptions,
|
||||||
|
'label',
|
||||||
|
);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<AppBox no-padding bordered class="column">
|
||||||
|
<div
|
||||||
|
class="bordered-b q-px-md q-py-sm row bg-color-orange-light items-center"
|
||||||
|
>
|
||||||
|
<div class="icon-wrapper bg-color-orange q-mr-sm">
|
||||||
|
<q-icon name="mdi-file-outline" />
|
||||||
|
</div>
|
||||||
|
<span class="text-weight-bold">
|
||||||
|
{{ $t('quotation.label.infoDocument') }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="q-pa-sm">
|
||||||
|
<div class="row q-col-gutter-sm">
|
||||||
|
<q-input
|
||||||
|
:label="$t('quotation.label.quotationNo')"
|
||||||
|
:readonly="readonly"
|
||||||
|
v-model="quotationNo"
|
||||||
|
class="col-6"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
/>
|
||||||
|
<q-input
|
||||||
|
:label="$t('quotation.label.actor')"
|
||||||
|
:readonly="readonly"
|
||||||
|
v-model="actor"
|
||||||
|
class="col-6"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
/>
|
||||||
|
<q-input
|
||||||
|
:label="$t('quotation.label.workName')"
|
||||||
|
:readonly="readonly"
|
||||||
|
v-model="workName"
|
||||||
|
class="col-12"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
/>
|
||||||
|
<q-input
|
||||||
|
:label="$t('quotation.label.contactor')"
|
||||||
|
:readonly="readonly"
|
||||||
|
v-model="contactor"
|
||||||
|
class="col-6"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
/>
|
||||||
|
<q-input
|
||||||
|
:label="$t('quotation.label.telephone')"
|
||||||
|
:readonly="readonly"
|
||||||
|
v-model="telephone"
|
||||||
|
class="col-6"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
/>
|
||||||
|
<q-input
|
||||||
|
:label="$t('quotation.label.documentReceivePoint')"
|
||||||
|
:readonly="readonly"
|
||||||
|
v-model="documentReceivePoint"
|
||||||
|
class="col-6"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
/>
|
||||||
|
<q-input
|
||||||
|
:label="$t('quotation.label.dueDate')"
|
||||||
|
:readonly="readonly"
|
||||||
|
v-model="dueDate"
|
||||||
|
class="col-6"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="bordered-b q-px-md q-py-sm row bg-color-orange-light items-center"
|
||||||
|
>
|
||||||
|
<div class="icon-wrapper bg-color-orange q-mr-sm">
|
||||||
|
<q-icon name="mdi-bank-outline" />
|
||||||
|
</div>
|
||||||
|
<span class="text-weight-bold">
|
||||||
|
{{ $t('quotation.label.infoPayment') }}
|
||||||
|
</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"
|
||||||
|
class="col-6"
|
||||||
|
autocomplete="off"
|
||||||
|
for="select-payType"
|
||||||
|
dense
|
||||||
|
:label="$t('quotation.label.payType')"
|
||||||
|
:options="[]"
|
||||||
|
:readonly="readonly"
|
||||||
|
:hide-dropdown-icon="readonly"
|
||||||
|
v-model="payType"
|
||||||
|
></q-select>
|
||||||
|
<div class="col-4 column">
|
||||||
|
<span>{{ $t('quotation.label.paySplitCount') }}</span>
|
||||||
|
<span class="app-text-muted">
|
||||||
|
({{ $t('quotation.label.payTotal') }})
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="col-2">
|
||||||
|
<q-input
|
||||||
|
v-model="paySplitCount"
|
||||||
|
class="col-6"
|
||||||
|
type="number"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<q-select
|
||||||
|
outlined
|
||||||
|
clearable
|
||||||
|
use-input
|
||||||
|
emit-value
|
||||||
|
fill-input
|
||||||
|
map-options
|
||||||
|
hide-bottom-space
|
||||||
|
option-value="value"
|
||||||
|
input-debounce="0"
|
||||||
|
option-label="label"
|
||||||
|
class="col-12"
|
||||||
|
autocomplete="off"
|
||||||
|
for="select-bankbook"
|
||||||
|
dense
|
||||||
|
:label="$t('quotation.label.bank')"
|
||||||
|
:options="bankBookOptions"
|
||||||
|
:readonly="readonly"
|
||||||
|
:hide-dropdown-icon="readonly"
|
||||||
|
v-model="payBank"
|
||||||
|
@filter="bankBoookFilter"
|
||||||
|
>
|
||||||
|
<template v-slot:option="scope">
|
||||||
|
<q-item
|
||||||
|
v-if="scope.opt"
|
||||||
|
v-bind="scope.itemProps"
|
||||||
|
class="row items-center"
|
||||||
|
>
|
||||||
|
<q-item-section avatar>
|
||||||
|
<q-img
|
||||||
|
:src="`/img/bank/${scope.opt.value}.png`"
|
||||||
|
class="bordered"
|
||||||
|
style="
|
||||||
|
border-radius: 50%;
|
||||||
|
aspect-ratio: 1;
|
||||||
|
height: 2rem;
|
||||||
|
width: 2rem;
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
</q-item-section>
|
||||||
|
<q-item-section>
|
||||||
|
{{ scope.opt.label }}
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-slot:selected-item="scope">
|
||||||
|
<q-item-section
|
||||||
|
v-if="scope.opt && !!payBank"
|
||||||
|
avatar
|
||||||
|
class="q-py-sm row"
|
||||||
|
>
|
||||||
|
<q-img
|
||||||
|
:src="`/img/bank/${scope.opt.value}.png`"
|
||||||
|
class="bordered"
|
||||||
|
style="
|
||||||
|
border-radius: 50%;
|
||||||
|
aspect-ratio: 1;
|
||||||
|
height: 2rem;
|
||||||
|
width: 2rem;
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
</q-item-section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-slot:no-option>
|
||||||
|
<q-item>
|
||||||
|
<q-item-section class="text-grey">
|
||||||
|
{{ $t('general.noData') }}
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</template>
|
||||||
|
</q-select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="bordered-b q-px-md q-py-sm row bg-color-orange-light items-center"
|
||||||
|
>
|
||||||
|
<div class="icon-wrapper bg-color-orange q-mr-sm">
|
||||||
|
<Icon icon="iconoir:coins" />
|
||||||
|
</div>
|
||||||
|
<span class="text-weight-bold">
|
||||||
|
{{ $t('quotation.label.infoSummary') }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="q-pa-sm">
|
||||||
|
<div class="row">
|
||||||
|
{{ $t('general.total') }}
|
||||||
|
<span class="q-ml-auto">{{ data?.total || 0 }} ฿</span>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
{{ $t('general.discount') }}
|
||||||
|
<span class="q-ml-auto">{{ data?.discount || 0 }} ฿</span>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
{{ $t('general.totalAfterDiscount') }}
|
||||||
|
<span class="q-ml-auto">{{ data?.totalAfterDiscount || 0 }} ฿</span>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
{{ $t('general.totalVatExcluded') }}
|
||||||
|
<span class="q-ml-auto">{{ data?.totalVatExcluded || 0 }} ฿</span>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
{{ $t('general.totalVatIncluded') }}
|
||||||
|
<span class="q-ml-auto">{{ data?.totalVatIncluded || 0 }} ฿</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</AppBox>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.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>
|
||||||
|
|
@ -239,7 +239,7 @@ export function manageAttachment(api: AxiosInstance, base: string) {
|
||||||
return {
|
return {
|
||||||
listAttachment: async (opts: { parentId: string }) => {
|
listAttachment: async (opts: { parentId: string }) => {
|
||||||
const res = await api.get<string[]>(
|
const res = await api.get<string[]>(
|
||||||
`${base}/${opts.parentId}/attachment`,
|
`/${base}/${opts.parentId}/attachment`,
|
||||||
);
|
);
|
||||||
if (res.status >= 400) return false;
|
if (res.status >= 400) return false;
|
||||||
return res.data;
|
return res.data;
|
||||||
|
|
@ -249,7 +249,7 @@ export function manageAttachment(api: AxiosInstance, base: string) {
|
||||||
name: string;
|
name: string;
|
||||||
download?: boolean;
|
download?: boolean;
|
||||||
}) => {
|
}) => {
|
||||||
const url = `${base}/${opts.parentId}/attachment/${opts.name}`;
|
const url = `/${base}/${opts.parentId}/attachment/${opts.name}`;
|
||||||
const res = await api.get<string>(url);
|
const res = await api.get<string>(url);
|
||||||
if (opts.download) {
|
if (opts.download) {
|
||||||
fetch(res.data)
|
fetch(res.data)
|
||||||
|
|
@ -270,7 +270,7 @@ export function manageAttachment(api: AxiosInstance, base: string) {
|
||||||
file: File;
|
file: File;
|
||||||
}) => {
|
}) => {
|
||||||
const res = await api.put(
|
const res = await api.put(
|
||||||
`${base}/${opts.parentId}/attachment/${opts.name}`,
|
`/${base}/${opts.parentId}/attachment/${opts.name}`,
|
||||||
opts.file,
|
opts.file,
|
||||||
{
|
{
|
||||||
headers: { 'Content-Type': opts.file.type },
|
headers: { 'Content-Type': opts.file.type },
|
||||||
|
|
@ -282,7 +282,7 @@ export function manageAttachment(api: AxiosInstance, base: string) {
|
||||||
},
|
},
|
||||||
delAttachment: async (opts: { parentId: string; name: string }) => {
|
delAttachment: async (opts: { parentId: string; name: string }) => {
|
||||||
const res = await api.delete(
|
const res = await api.delete(
|
||||||
`${base}/${opts.parentId}/attachment/${opts.name}`,
|
`/${base}/${opts.parentId}/attachment/${opts.name}`,
|
||||||
);
|
);
|
||||||
if (res.status < 400) return true;
|
if (res.status < 400) return true;
|
||||||
return false;
|
return false;
|
||||||
|
|
@ -294,7 +294,7 @@ export function manageFile<T extends string>(api: AxiosInstance, base: string) {
|
||||||
return {
|
return {
|
||||||
listFile: async (opts: { group: T; parentId: string }) => {
|
listFile: async (opts: { group: T; parentId: string }) => {
|
||||||
const res = await api.get<string[]>(
|
const res = await api.get<string[]>(
|
||||||
`${base}/${opts.parentId}/file-${opts.group}`,
|
`/${base}/${opts.parentId}/file-${opts.group}`,
|
||||||
);
|
);
|
||||||
if (res.status >= 400) return false;
|
if (res.status >= 400) return false;
|
||||||
return res.data;
|
return res.data;
|
||||||
|
|
@ -305,7 +305,7 @@ export function manageFile<T extends string>(api: AxiosInstance, base: string) {
|
||||||
fileId: string;
|
fileId: string;
|
||||||
download?: boolean;
|
download?: boolean;
|
||||||
}) => {
|
}) => {
|
||||||
const url = `${base}/${opts.parentId}/file-${opts.group}/${opts.fileId}`;
|
const url = `/${base}/${opts.parentId}/file-${opts.group}/${opts.fileId}`;
|
||||||
const res = await api.get<string>(url);
|
const res = await api.get<string>(url);
|
||||||
if (opts.download) {
|
if (opts.download) {
|
||||||
fetch(res.data)
|
fetch(res.data)
|
||||||
|
|
@ -327,7 +327,7 @@ export function manageFile<T extends string>(api: AxiosInstance, base: string) {
|
||||||
file: File;
|
file: File;
|
||||||
}) => {
|
}) => {
|
||||||
const res = await api.put(
|
const res = await api.put(
|
||||||
`${base}/${opts.parentId}/file-${opts.group}/${opts.fileId}`,
|
`/${base}/${opts.parentId}/file-${opts.group}/${opts.fileId}`,
|
||||||
opts.file,
|
opts.file,
|
||||||
{
|
{
|
||||||
headers: { 'Content-Type': opts.file.type },
|
headers: { 'Content-Type': opts.file.type },
|
||||||
|
|
@ -339,7 +339,7 @@ export function manageFile<T extends string>(api: AxiosInstance, base: string) {
|
||||||
},
|
},
|
||||||
delFile: async (opts: { group: T; parentId: string; fileId: string }) => {
|
delFile: async (opts: { group: T; parentId: string; fileId: string }) => {
|
||||||
const res = await api.delete(
|
const res = await api.delete(
|
||||||
`${base}/${opts.parentId}/file-${opts.group}/${opts.fileId}`,
|
`/${base}/${opts.parentId}/file-${opts.group}/${opts.fileId}`,
|
||||||
);
|
);
|
||||||
if (res.status < 400) return true;
|
if (res.status < 400) return true;
|
||||||
return false;
|
return false;
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue