feat: receipt (#176)
* feat: receipt #173 * chore: clean up --------- Co-authored-by: nwpptrs <jay02499@gmail.com> Co-authored-by: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
This commit is contained in:
Methapon Metanipat
GitHub
parent
1cdc2bd4cc
commit
2b758e57f8
8 changed files with 638 additions and 3 deletions
|
|
@ -1198,5 +1198,11 @@ export default {
|
||||||
PaymentSuccess: 'Payment Success',
|
PaymentSuccess: 'Payment Success',
|
||||||
PaymentWait: 'Waiting For Payment',
|
PaymentWait: 'Waiting For Payment',
|
||||||
},
|
},
|
||||||
|
receipt: {
|
||||||
|
title: 'Receipt / Tax Invoice',
|
||||||
|
caption: 'All Receipt / Tax Invoice',
|
||||||
|
dataSum: 'Summary of all receipts/tax invoices',
|
||||||
|
workSheetName: 'Worksheet name',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -1179,5 +1179,11 @@ export default {
|
||||||
PaymentSuccess: 'ชำระเงินแล้ว',
|
PaymentSuccess: 'ชำระเงินแล้ว',
|
||||||
PaymentWait: 'ยังไม่ชำระ',
|
PaymentWait: 'ยังไม่ชำระ',
|
||||||
},
|
},
|
||||||
|
receipt: {
|
||||||
|
title: 'ใบเสร็จรับเงิน/กำกับภาษี',
|
||||||
|
caption: 'ใบเสร็จรับเงิน/กำกับภาษีทั้งหมด',
|
||||||
|
dataSum: 'สรุปใบเสร็จรับเงิน/กำกับภาษีทั้งหมด',
|
||||||
|
workSheetName: 'ชื่อใบงาน',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -157,8 +157,7 @@ onMounted(async () => {
|
||||||
icon: 'mdi-bank-outline',
|
icon: 'mdi-bank-outline',
|
||||||
disabled: false,
|
disabled: false,
|
||||||
children: [
|
children: [
|
||||||
{ label: 'uploadSlip', route: '', disabled: true },
|
{ label: 'receipt', route: '/receipt' },
|
||||||
{ label: 'receipt', route: '', disabled: true },
|
|
||||||
{ label: 'creditNote', route: '/credit-note', disabled: true },
|
{ label: 'creditNote', route: '/credit-note', disabled: true },
|
||||||
{ label: 'debitNote', route: '', disabled: true },
|
{ label: 'debitNote', route: '', disabled: true },
|
||||||
],
|
],
|
||||||
|
|
|
||||||
379
src/pages/13_receipt/MainPage.vue
Normal file
379
src/pages/13_receipt/MainPage.vue
Normal file
|
|
@ -0,0 +1,379 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
// NOTE: Library
|
||||||
|
import { computed, onMounted, reactive, watch } from 'vue';
|
||||||
|
import { storeToRefs } from 'pinia';
|
||||||
|
|
||||||
|
// NOTE: Components
|
||||||
|
import StatCardComponent from 'src/components/StatCardComponent.vue';
|
||||||
|
import NoData from 'src/components/NoData.vue';
|
||||||
|
import PaginationComponent from 'src/components/PaginationComponent.vue';
|
||||||
|
import PaginationPageSize from 'src/components/PaginationPageSize.vue';
|
||||||
|
import TableReceipt from './TableReceipt.vue';
|
||||||
|
import QuotationCard from 'src/components/05_quotation/QuotationCard.vue';
|
||||||
|
|
||||||
|
// NOTE: Stores & Type
|
||||||
|
import { useNavigator } from 'src/stores/navigator';
|
||||||
|
import { columns, hslaColors } from './constants';
|
||||||
|
import useFlowStore from 'src/stores/flow';
|
||||||
|
import { useRequestList } from 'src/stores/request-list';
|
||||||
|
import { usePayment, useReceipt } from 'src/stores/payment';
|
||||||
|
import { Receipt, PaymentDataStatus } from 'src/stores/payment/types';
|
||||||
|
import { Quotation } from 'src/stores/quotations';
|
||||||
|
import { useQuasar } from 'quasar';
|
||||||
|
|
||||||
|
const navigatorStore = useNavigator();
|
||||||
|
const flowStore = useFlowStore();
|
||||||
|
const receiptStore = useReceipt();
|
||||||
|
const { data, page, pageMax, pageSize } = storeToRefs(receiptStore);
|
||||||
|
|
||||||
|
// NOTE: Variable
|
||||||
|
const pageState = reactive({
|
||||||
|
hideStat: false,
|
||||||
|
statusFilter: 'None' as 'None' | PaymentDataStatus,
|
||||||
|
inputSearch: '',
|
||||||
|
fieldSelected: [...columns.map((v) => v.name)],
|
||||||
|
gridView: false,
|
||||||
|
total: 0,
|
||||||
|
});
|
||||||
|
|
||||||
|
const fieldSelectedOption = computed(() => {
|
||||||
|
return columns.map((v) => ({
|
||||||
|
label: v.label,
|
||||||
|
value: v.name,
|
||||||
|
}));
|
||||||
|
});
|
||||||
|
|
||||||
|
async function fetchList(opts?: { rotateFlowId?: boolean }) {
|
||||||
|
const ret = await receiptStore.getReceiptList({
|
||||||
|
page: page.value,
|
||||||
|
pageSize: pageSize.value,
|
||||||
|
query: pageState.inputSearch,
|
||||||
|
});
|
||||||
|
if (ret) {
|
||||||
|
data.value = ret.result;
|
||||||
|
pageState.total = ret.total;
|
||||||
|
pageMax.value = Math.ceil(ret.total / pageSize.value);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (opts?.rotateFlowId) flowStore.rotate();
|
||||||
|
}
|
||||||
|
|
||||||
|
function triggerView(opts: { quotationId: string }) {
|
||||||
|
const url = new URL(`/quotation/view?tab=receipt`, window.location.origin);
|
||||||
|
|
||||||
|
localStorage.setItem(
|
||||||
|
'new-quotation',
|
||||||
|
JSON.stringify({
|
||||||
|
quotationId: opts.quotationId,
|
||||||
|
statusDialog: 'info',
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
|
||||||
|
window.open(url.toString(), '_blank');
|
||||||
|
}
|
||||||
|
const paymentStore = usePayment();
|
||||||
|
|
||||||
|
async function viewDocExample(id: string) {
|
||||||
|
const url = await paymentStore.getFlowAccount(id);
|
||||||
|
|
||||||
|
if (url) {
|
||||||
|
window.open(url.data.link, '_blank');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
navigatorStore.current.title = 'receipt.title';
|
||||||
|
navigatorStore.current.path = [{ text: 'receipt.caption', i18n: true }];
|
||||||
|
|
||||||
|
await fetchList({ rotateFlowId: true });
|
||||||
|
});
|
||||||
|
|
||||||
|
watch(
|
||||||
|
[
|
||||||
|
() => pageState.inputSearch,
|
||||||
|
() => pageState.statusFilter,
|
||||||
|
() => pageSize.value,
|
||||||
|
() => page.value,
|
||||||
|
],
|
||||||
|
() => fetchList({ rotateFlowId: true }),
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<div class="column full-height no-wrap">
|
||||||
|
<!-- SEC: stat -->
|
||||||
|
<section class="text-body-2 q-mb-xs flex items-center">
|
||||||
|
{{ $t('receipt.dataSum') }}
|
||||||
|
<q-badge
|
||||||
|
rounded
|
||||||
|
class="q-ml-sm"
|
||||||
|
style="
|
||||||
|
background-color: hsla(var(--info-bg) / 0.15);
|
||||||
|
color: hsl(var(--info-bg));
|
||||||
|
"
|
||||||
|
>
|
||||||
|
{{ pageState.total }}
|
||||||
|
</q-badge>
|
||||||
|
<q-btn
|
||||||
|
class="q-ml-sm"
|
||||||
|
icon="mdi-pin-outline"
|
||||||
|
color="primary"
|
||||||
|
size="sm"
|
||||||
|
flat
|
||||||
|
dense
|
||||||
|
rounded
|
||||||
|
@click="pageState.hideStat = !pageState.hideStat"
|
||||||
|
:style="pageState.hideStat ? 'rotate: 90deg' : ''"
|
||||||
|
style="transition: 0.1s ease-in-out"
|
||||||
|
/>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<transition name="slide">
|
||||||
|
<div v-if="!pageState.hideStat" class="scroll q-mb-md">
|
||||||
|
<div style="display: inline-block">
|
||||||
|
<StatCardComponent
|
||||||
|
labelI18n
|
||||||
|
:branch="[
|
||||||
|
{
|
||||||
|
icon: 'fluent:receipt-money-16-regular',
|
||||||
|
count: pageState.total,
|
||||||
|
label: 'quotation.status.PaymentSuccess',
|
||||||
|
color: 'light-green',
|
||||||
|
},
|
||||||
|
]"
|
||||||
|
:dark="$q.dark.isActive"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
|
|
||||||
|
<section class="col surface-1 rounded bordered overflow-hidden">
|
||||||
|
<div class="column full-height">
|
||||||
|
<!-- SEC: header content -->
|
||||||
|
<header
|
||||||
|
class="row surface-3 justify-between full-width items-center bordered-b"
|
||||||
|
style="z-index: 1"
|
||||||
|
>
|
||||||
|
<div class="row q-py-sm q-px-md justify-between full-width">
|
||||||
|
<q-input
|
||||||
|
for="input-search"
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
:label="$t('general.search')"
|
||||||
|
class="q-mr-md col-12 col-md-3"
|
||||||
|
:bg-color="$q.dark.isActive ? 'dark' : 'white'"
|
||||||
|
v-model="pageState.inputSearch"
|
||||||
|
debounce="200"
|
||||||
|
>
|
||||||
|
<template #prepend>
|
||||||
|
<q-icon name="mdi-magnify" />
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="row col-12 col-md-5 justify-end"
|
||||||
|
:class="{ 'q-pt-xs': $q.screen.lt.md }"
|
||||||
|
style="white-space: nowrap"
|
||||||
|
>
|
||||||
|
<q-select
|
||||||
|
v-model="pageState.statusFilter"
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
option-value="value"
|
||||||
|
option-label="label"
|
||||||
|
class="col"
|
||||||
|
:class="{ 'offset-md-5': pageState.gridView }"
|
||||||
|
map-options
|
||||||
|
emit-value
|
||||||
|
:for="'field-select-status'"
|
||||||
|
:hide-dropdown-icon="$q.screen.lt.sm"
|
||||||
|
:options="[
|
||||||
|
{
|
||||||
|
label: $t('general.all'),
|
||||||
|
value: 'None',
|
||||||
|
},
|
||||||
|
]"
|
||||||
|
/>
|
||||||
|
<q-select
|
||||||
|
v-if="!pageState.gridView"
|
||||||
|
id="select-field"
|
||||||
|
for="select-field"
|
||||||
|
class="col q-ml-sm"
|
||||||
|
:options="
|
||||||
|
fieldSelectedOption.map((v) => ({
|
||||||
|
...v,
|
||||||
|
label: v.label && $t(v.label),
|
||||||
|
}))
|
||||||
|
"
|
||||||
|
:display-value="$t('general.displayField')"
|
||||||
|
:hide-dropdown-icon="$q.screen.lt.sm"
|
||||||
|
v-model="pageState.fieldSelected"
|
||||||
|
option-label="label"
|
||||||
|
option-value="value"
|
||||||
|
map-options
|
||||||
|
emit-value
|
||||||
|
outlined
|
||||||
|
multiple
|
||||||
|
dense
|
||||||
|
/>
|
||||||
|
<q-btn-toggle
|
||||||
|
id="btn-mode"
|
||||||
|
v-model="pageState.gridView"
|
||||||
|
dense
|
||||||
|
class="no-shadow bordered rounded surface-1 q-ml-sm"
|
||||||
|
:toggle-color="$q.dark.isActive ? 'grey-9' : 'grey-2'"
|
||||||
|
size="xs"
|
||||||
|
:options="[
|
||||||
|
{ value: true, slot: 'folder' },
|
||||||
|
{ value: false, slot: 'list' },
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<template v-slot:folder>
|
||||||
|
<q-icon
|
||||||
|
name="mdi-view-grid-outline"
|
||||||
|
size="16px"
|
||||||
|
class="q-px-sm q-py-xs rounded"
|
||||||
|
:style="{
|
||||||
|
color: $q.dark.isActive
|
||||||
|
? pageState.gridView
|
||||||
|
? '#C9D3DB '
|
||||||
|
: '#787B7C'
|
||||||
|
: pageState.gridView
|
||||||
|
? '#787B7C'
|
||||||
|
: '#C9D3DB',
|
||||||
|
}"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
<template v-slot:list>
|
||||||
|
<q-icon
|
||||||
|
name="mdi-format-list-bulleted"
|
||||||
|
class="q-px-sm q-py-xs rounded"
|
||||||
|
size="16px"
|
||||||
|
:style="{
|
||||||
|
color: $q.dark.isActive
|
||||||
|
? pageState.gridView === false
|
||||||
|
? '#C9D3DB'
|
||||||
|
: '#787B7C'
|
||||||
|
: pageState.gridView === false
|
||||||
|
? '#787B7C'
|
||||||
|
: '#C9D3DB',
|
||||||
|
}"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</q-btn-toggle>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- SEC: body content -->
|
||||||
|
<article
|
||||||
|
v-if="data.length === 0"
|
||||||
|
class="col surface-2 flex items-center justify-center"
|
||||||
|
>
|
||||||
|
<NoData :not-found="!!pageState.inputSearch" />
|
||||||
|
</article>
|
||||||
|
<article v-else class="col surface-2 full-width scroll q-pa-md">
|
||||||
|
<TableReceipt
|
||||||
|
:columns="columns"
|
||||||
|
:rows="data"
|
||||||
|
:grid="pageState.gridView"
|
||||||
|
@view="
|
||||||
|
(data) => triggerView({ quotationId: data.invoice.quotation.id })
|
||||||
|
"
|
||||||
|
@preview="(data) => viewDocExample(data.id)"
|
||||||
|
>
|
||||||
|
<template #grid="{ item }">
|
||||||
|
<div class="col-md-4 col-sm-6 col-12">
|
||||||
|
<QuotationCard
|
||||||
|
hide-action
|
||||||
|
:code="item.row.code"
|
||||||
|
:title="item.row.invoice.quotation.workName"
|
||||||
|
:status="$t(`invoice.status.${item.row.paymentStatus}`)"
|
||||||
|
:badge-color="hslaColors[item.row.paymentStatus] || ''"
|
||||||
|
:custom-data="[
|
||||||
|
{
|
||||||
|
label: $t('general.customer'),
|
||||||
|
value:
|
||||||
|
item.row.invoice.quotation.customerBranch
|
||||||
|
.registerName ||
|
||||||
|
`${item.row.invoice.quotation.customerBranch?.firstName || '-'} ${item.row.invoice.quotation.customerBranch?.lastName || ''}`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: $t('taskOrder.issueDate'),
|
||||||
|
value: new Date(
|
||||||
|
item.row.invoice.quotation.createdAt,
|
||||||
|
).toLocaleString('th-TH', {
|
||||||
|
hour12: false,
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: $t('invoice.paymentDueDate'),
|
||||||
|
value: new Date(
|
||||||
|
item.row.invoice.quotation.dueDate,
|
||||||
|
).toLocaleDateString('th-TH', {
|
||||||
|
year: 'numeric',
|
||||||
|
month: '2-digit',
|
||||||
|
day: 'numeric',
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: $t('quotation.payType'),
|
||||||
|
value: $t(
|
||||||
|
`quotation.type.${item.row.invoice.quotation.payCondition}`,
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: $t('preview.netValue'),
|
||||||
|
value: item.row.amount,
|
||||||
|
},
|
||||||
|
]"
|
||||||
|
@view="
|
||||||
|
() =>
|
||||||
|
triggerView({
|
||||||
|
quotationId: item.row.invoice.quotation.id,
|
||||||
|
})
|
||||||
|
"
|
||||||
|
@preview="
|
||||||
|
() => {
|
||||||
|
viewDocExample(item.row.invoice.quotation.id);
|
||||||
|
}
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</TableReceipt>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<!-- SEC: footer content -->
|
||||||
|
<footer
|
||||||
|
class="row justify-between items-center q-px-md q-py-sm surface-2"
|
||||||
|
v-if="pageMax > 0"
|
||||||
|
>
|
||||||
|
<div class="col-4">
|
||||||
|
<div class="row items-center no-wrap">
|
||||||
|
<div class="app-text-muted q-mr-sm" v-if="$q.screen.gt.sm">
|
||||||
|
{{ $t('general.recordPerPage') }}
|
||||||
|
</div>
|
||||||
|
<div><PaginationPageSize v-model="pageSize" /></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-4 row justify-center app-text-muted">
|
||||||
|
{{
|
||||||
|
$t('general.recordsPage', {
|
||||||
|
resultcurrentPage: data.length,
|
||||||
|
total: pageState.inputSearch ? data.length : pageState.total,
|
||||||
|
})
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
<nav class="col-4 row justify-end">
|
||||||
|
<PaginationComponent
|
||||||
|
v-model:current-page="page"
|
||||||
|
v-model:max-page="pageMax"
|
||||||
|
:fetch-data="() => fetchList({ rotateFlowId: true })"
|
||||||
|
/>
|
||||||
|
</nav>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<style scoped></style>
|
||||||
131
src/pages/13_receipt/TableReceipt.vue
Normal file
131
src/pages/13_receipt/TableReceipt.vue
Normal file
|
|
@ -0,0 +1,131 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { QTableSlots } from 'quasar';
|
||||||
|
import { columns } from './constants';
|
||||||
|
|
||||||
|
import { Receipt } from 'src/stores/payment/types';
|
||||||
|
import { useReceipt } from 'src/stores/payment';
|
||||||
|
|
||||||
|
const receiptStore = useReceipt();
|
||||||
|
|
||||||
|
type Data = Receipt;
|
||||||
|
|
||||||
|
withDefaults(
|
||||||
|
defineProps<{
|
||||||
|
rows: Data[];
|
||||||
|
readonly?: boolean;
|
||||||
|
flat?: boolean;
|
||||||
|
bordered?: boolean;
|
||||||
|
grid?: boolean;
|
||||||
|
hideHeader?: boolean;
|
||||||
|
buttonDownload?: boolean;
|
||||||
|
buttonDelete?: boolean;
|
||||||
|
hidePagination?: boolean;
|
||||||
|
inTable?: boolean;
|
||||||
|
hideView?: boolean;
|
||||||
|
btnSelected?: boolean;
|
||||||
|
|
||||||
|
imgColumn?: string;
|
||||||
|
customColumn?: string[];
|
||||||
|
}>(),
|
||||||
|
{
|
||||||
|
row: () => [],
|
||||||
|
flat: false,
|
||||||
|
bordered: false,
|
||||||
|
grid: false,
|
||||||
|
hideHeader: false,
|
||||||
|
buttonDownload: false,
|
||||||
|
imgColumn: '',
|
||||||
|
customColumn: () => [],
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
defineEmits<{
|
||||||
|
(e: 'preview' | 'view', data: Data): void;
|
||||||
|
(e: 'edit' | 'delete' | 'download', data: Data, index: number): void;
|
||||||
|
}>();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<q-table
|
||||||
|
:rows-per-page-options="[0]"
|
||||||
|
:rows="rows.map((data, i) => ({ ...data, _index: i }))"
|
||||||
|
:columns
|
||||||
|
:grid
|
||||||
|
bordered
|
||||||
|
flat
|
||||||
|
hide-pagination
|
||||||
|
selection="multiple"
|
||||||
|
card-container-class="q-col-gutter-sm"
|
||||||
|
class="full-width"
|
||||||
|
>
|
||||||
|
<template v-slot:header="props">
|
||||||
|
<q-tr
|
||||||
|
style="background-color: hsla(var(--info-bg) / 0.07)"
|
||||||
|
:props="props"
|
||||||
|
>
|
||||||
|
<q-th v-for="col in columns" :key="col.name" :props="props">
|
||||||
|
{{ $t(col.label) }}
|
||||||
|
</q-th>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template
|
||||||
|
v-slot:body="props: {
|
||||||
|
row: Receipt & { _index: number };
|
||||||
|
} & Omit<Parameters<QTableSlots['body']>[0], 'row'>"
|
||||||
|
>
|
||||||
|
<q-tr :class="{ dark: $q.dark.isActive }" class="text-center">
|
||||||
|
<q-td v-for="col in columns" :align="col.align">
|
||||||
|
<!-- NOTE: custom column will starts with # -->
|
||||||
|
<template v-if="!col.name.startsWith('#')">
|
||||||
|
<span>
|
||||||
|
{{
|
||||||
|
typeof col.field === 'string'
|
||||||
|
? props.row[col.field as keyof Receipt]
|
||||||
|
: col.field(props.row)
|
||||||
|
}}
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
<template v-if="col.name === '#order'">
|
||||||
|
{{
|
||||||
|
col.field(props.row) +
|
||||||
|
(receiptStore.page - 1) * receiptStore.pageSize
|
||||||
|
}}
|
||||||
|
</template>
|
||||||
|
<template v-if="col.name === '#action'">
|
||||||
|
<q-btn
|
||||||
|
:id="`btn-preview-${props.row.invoice.quotation.workName}`"
|
||||||
|
flat
|
||||||
|
dense
|
||||||
|
rounded
|
||||||
|
icon="mdi-play-box-outline"
|
||||||
|
size="12px"
|
||||||
|
:title="$t('preview.doc')"
|
||||||
|
@click.stop="$emit('preview', props.row)"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<q-btn
|
||||||
|
:id="`btn-eye-${props.row.invoice.quotation.workName}`"
|
||||||
|
icon="mdi-eye-outline"
|
||||||
|
size="sm"
|
||||||
|
dense
|
||||||
|
round
|
||||||
|
flat
|
||||||
|
@click.stop="$emit('view', props.row)"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</q-td>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-slot:item="props: { row: Receipt }">
|
||||||
|
<slot name="grid" :item="props" />
|
||||||
|
</template>
|
||||||
|
</q-table>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
:deep(i.q-icon.mdi.mdi-alert.q-table__bottom-nodata-icon) {
|
||||||
|
color: #ffc224 !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
95
src/pages/13_receipt/constants.ts
Normal file
95
src/pages/13_receipt/constants.ts
Normal file
|
|
@ -0,0 +1,95 @@
|
||||||
|
import { QTableProps } from 'quasar';
|
||||||
|
import { Invoice, Receipt } from 'src/stores/payment/types';
|
||||||
|
import { formatNumberDecimal } from 'src/stores/utils';
|
||||||
|
import { dateFormatJS } from 'src/utils/datetime';
|
||||||
|
|
||||||
|
export const columns = [
|
||||||
|
{
|
||||||
|
name: '#order',
|
||||||
|
align: 'center',
|
||||||
|
label: 'general.order',
|
||||||
|
field: (v: Receipt & { _index: number }) => v._index + 1,
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
name: 'quotation',
|
||||||
|
align: 'center',
|
||||||
|
label: 'requestList.quotationCode',
|
||||||
|
field: 'code',
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
name: 'workSheetName',
|
||||||
|
align: 'center',
|
||||||
|
label: 'receipt.workSheetName',
|
||||||
|
field: (v: Receipt) => v.invoice.quotation.workName,
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
name: 'issueDate',
|
||||||
|
align: 'center',
|
||||||
|
label: 'taskOrder.issueDate',
|
||||||
|
field: (v: Receipt) =>
|
||||||
|
dateFormatJS({
|
||||||
|
date: v.invoice.quotation.createdAt,
|
||||||
|
withTime: true,
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
name: 'value',
|
||||||
|
align: 'center',
|
||||||
|
label: 'preview.value',
|
||||||
|
field: (v: Receipt) => formatNumberDecimal(v.amount, 2),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '#action',
|
||||||
|
align: 'center',
|
||||||
|
label: '',
|
||||||
|
field: (_) => '#action',
|
||||||
|
},
|
||||||
|
] as const satisfies QTableProps['columns'];
|
||||||
|
|
||||||
|
export const docColumn = [
|
||||||
|
{
|
||||||
|
name: 'order',
|
||||||
|
align: 'center',
|
||||||
|
label: 'general.order',
|
||||||
|
field: 'no',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'document',
|
||||||
|
align: 'left',
|
||||||
|
label: 'general.document',
|
||||||
|
field: 'document',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'attachment',
|
||||||
|
align: 'left',
|
||||||
|
label: 'requestList.attachment',
|
||||||
|
field: 'attachment',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'amount',
|
||||||
|
align: 'center',
|
||||||
|
label: 'general.amount',
|
||||||
|
field: 'amount',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'documentInSystem',
|
||||||
|
align: 'center',
|
||||||
|
label: 'requestList.documentInSystem',
|
||||||
|
field: 'documentInSystem',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'status',
|
||||||
|
align: 'center',
|
||||||
|
label: 'general.status',
|
||||||
|
field: 'status',
|
||||||
|
},
|
||||||
|
] as const satisfies QTableProps['columns'];
|
||||||
|
|
||||||
|
export const hslaColors: Record<string, string> = {
|
||||||
|
PaymentWait: '--orange-5-hsl',
|
||||||
|
PaymentSuccess: '--green-8-hsl',
|
||||||
|
};
|
||||||
|
|
@ -115,6 +115,11 @@ const routes: RouteRecordRaw[] = [
|
||||||
name: '/Invoice',
|
name: '/Invoice',
|
||||||
component: () => import('pages/10_invoice/MainPage.vue'),
|
component: () => import('pages/10_invoice/MainPage.vue'),
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/receipt',
|
||||||
|
name: 'receipt',
|
||||||
|
component: () => import('pages/13_receipt/MainPage.vue'),
|
||||||
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -168,6 +173,11 @@ const routes: RouteRecordRaw[] = [
|
||||||
name: 'CreditNoteView',
|
name: 'CreditNoteView',
|
||||||
component: () => import('pages/11_credit-note/FormPage.vue'),
|
component: () => import('pages/11_credit-note/FormPage.vue'),
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/receipt/:id',
|
||||||
|
name: 'receiptform',
|
||||||
|
component: () => import('pages/13_receipt/MainPage.vue'),
|
||||||
|
},
|
||||||
|
|
||||||
// Always leave this as last one,
|
// Always leave this as last one,
|
||||||
// but you can also remove it
|
// but you can also remove it
|
||||||
|
|
|
||||||
|
|
@ -44,7 +44,16 @@ export type Payment = {
|
||||||
paymentStatus: string;
|
paymentStatus: string;
|
||||||
date: Date;
|
date: Date;
|
||||||
amount: number;
|
amount: number;
|
||||||
invoice: { id: string; amount: number; installments: { no: number }[] };
|
invoice: {
|
||||||
|
id: string;
|
||||||
|
amount: number;
|
||||||
|
installments: { no: number }[];
|
||||||
|
quotation: Quotation;
|
||||||
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export enum PaymentDataStatus {
|
||||||
|
Success = 'PaymentSuccess',
|
||||||
|
Wait = 'PaymentWait',
|
||||||
|
}
|
||||||
export type Receipt = Payment;
|
export type Receipt = Payment;
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue