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 {
|
||||
listAttachment: async (opts: { parentId: string }) => {
|
||||
const res = await api.get<string[]>(
|
||||
`${base}/${opts.parentId}/attachment`,
|
||||
`/${base}/${opts.parentId}/attachment`,
|
||||
);
|
||||
if (res.status >= 400) return false;
|
||||
return res.data;
|
||||
|
|
@ -249,7 +249,7 @@ export function manageAttachment(api: AxiosInstance, base: string) {
|
|||
name: string;
|
||||
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);
|
||||
if (opts.download) {
|
||||
fetch(res.data)
|
||||
|
|
@ -270,7 +270,7 @@ export function manageAttachment(api: AxiosInstance, base: string) {
|
|||
file: File;
|
||||
}) => {
|
||||
const res = await api.put(
|
||||
`${base}/${opts.parentId}/attachment/${opts.name}`,
|
||||
`/${base}/${opts.parentId}/attachment/${opts.name}`,
|
||||
opts.file,
|
||||
{
|
||||
headers: { 'Content-Type': opts.file.type },
|
||||
|
|
@ -282,7 +282,7 @@ export function manageAttachment(api: AxiosInstance, base: string) {
|
|||
},
|
||||
delAttachment: async (opts: { parentId: string; name: string }) => {
|
||||
const res = await api.delete(
|
||||
`${base}/${opts.parentId}/attachment/${opts.name}`,
|
||||
`/${base}/${opts.parentId}/attachment/${opts.name}`,
|
||||
);
|
||||
if (res.status < 400) return true;
|
||||
return false;
|
||||
|
|
@ -294,7 +294,7 @@ export function manageFile<T extends string>(api: AxiosInstance, base: string) {
|
|||
return {
|
||||
listFile: async (opts: { group: T; parentId: 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;
|
||||
return res.data;
|
||||
|
|
@ -305,7 +305,7 @@ export function manageFile<T extends string>(api: AxiosInstance, base: string) {
|
|||
fileId: string;
|
||||
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);
|
||||
if (opts.download) {
|
||||
fetch(res.data)
|
||||
|
|
@ -327,7 +327,7 @@ export function manageFile<T extends string>(api: AxiosInstance, base: string) {
|
|||
file: File;
|
||||
}) => {
|
||||
const res = await api.put(
|
||||
`${base}/${opts.parentId}/file-${opts.group}/${opts.fileId}`,
|
||||
`/${base}/${opts.parentId}/file-${opts.group}/${opts.fileId}`,
|
||||
opts.file,
|
||||
{
|
||||
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 }) => {
|
||||
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;
|
||||
return false;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue