feat: invoice (#174)
* feat: add 10 invoice * feat: invoicelayout * feat: invoicetable * refactor: uew new table * fix: columns missing * feat: invoicebadgestatus * feat: formatdate #156 * refactor: watch pagesize and page #159 * refector: filter status #160 * feat: invoice stats * fix: typo * chore: cleanup * refactor: add columns action * refactor: add btn view invoice * refactor: add query tab * refactor: change set code invoice to function * chore: change case * refactor: add i18n netvalue * refactor: add record colors of status invoice * feat: add view card invoice * chore: cleanpu * refactor: handle i18n pay condition * refactor: handle value by storage or by api * refactor: add btnn preview * refactor: function view doc example * refactor: bind function view doc example --------- Co-authored-by: Thanaphon Frappet <thanaphon@frappet.com> Co-authored-by: nwpptrs <jay02499@gmail.com> Co-authored-by: Methapon2001 <61303214+Methapon2001@users.noreply.github.com> Co-authored-by: oat_dev <nattapon@frappet.com>
This commit is contained in:
Methapon Metanipat
GitHub
parent
7d1f32a5cb
commit
c5d3897d76
12 changed files with 801 additions and 86 deletions
|
|
@ -192,6 +192,7 @@ export default {
|
|||
sales: {
|
||||
title: 'Sales',
|
||||
quotation: 'Quotation',
|
||||
invoice: 'Invoice',
|
||||
},
|
||||
|
||||
order: {
|
||||
|
|
@ -1114,6 +1115,7 @@ export default {
|
|||
discount: 'Discount',
|
||||
vat: 'VAT',
|
||||
value: 'Value',
|
||||
netValue: 'Net Value',
|
||||
title: {
|
||||
quotation: 'Quotation',
|
||||
invoice: 'Invoice',
|
||||
|
|
@ -1186,4 +1188,15 @@ export default {
|
|||
Success: 'Refund Completed',
|
||||
},
|
||||
},
|
||||
|
||||
invoice: {
|
||||
title: 'Invoice',
|
||||
caption: 'All Invoices',
|
||||
workSheetName: 'Worksheet Name',
|
||||
paymentDueDate: 'Payment Duedate',
|
||||
status: {
|
||||
PaymentSuccess: 'Payment Success',
|
||||
PaymentWait: 'Waiting For Payment',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -194,6 +194,7 @@ export default {
|
|||
sales: {
|
||||
title: 'งานซื้อขาย',
|
||||
quotation: 'ใบเสนอราคา',
|
||||
invoice: 'ใบแจ้งหนี้',
|
||||
},
|
||||
|
||||
order: {
|
||||
|
|
@ -1095,6 +1096,7 @@ export default {
|
|||
discount: 'ส่วนลด',
|
||||
vat: 'ภาษี',
|
||||
value: 'มูลค่า',
|
||||
netValue: 'มูลค่าสุทธิ',
|
||||
title: {
|
||||
quotation: 'ใบเสนอราคา',
|
||||
invoice: 'ใบแจ้งหนี้',
|
||||
|
|
@ -1167,4 +1169,15 @@ export default {
|
|||
Success: 'คืนเงินเสร็จสิ้น',
|
||||
},
|
||||
},
|
||||
|
||||
invoice: {
|
||||
title: 'ใบแจ้งหนี้',
|
||||
caption: 'ใบแจ้งหนี้ทั้งหมด',
|
||||
workSheetName: 'ชื่อใบงาน',
|
||||
paymentDueDate: 'กำหนดชำระ',
|
||||
status: {
|
||||
PaymentSuccess: 'ชำระเงินแล้ว',
|
||||
PaymentWait: 'ยังไม่ชำระ',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -134,7 +134,10 @@ onMounted(async () => {
|
|||
{
|
||||
label: 'menu.sales',
|
||||
icon: 'mdi-store-settings-outline',
|
||||
children: [{ label: 'quotation', route: '/quotation' }],
|
||||
children: [
|
||||
{ label: 'quotation', route: '/quotation' },
|
||||
{ label: 'invoice', route: '/invoice' },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'menu.order',
|
||||
|
|
|
|||
|
|
@ -356,18 +356,8 @@ async function fetchStatus() {
|
|||
code.value = '';
|
||||
selectedInstallmentNo.value = [];
|
||||
selectedInstallment.value = [];
|
||||
view.value =
|
||||
quotationFormData.value.payCondition === 'Full' ||
|
||||
quotationFormData.value.payCondition === 'BillFull'
|
||||
? View.Invoice
|
||||
: View.InvoicePre;
|
||||
|
||||
if (
|
||||
quotationFormData.value.payCondition === 'Full' ||
|
||||
quotationFormData.value.payCondition === 'BillFull'
|
||||
) {
|
||||
getInvoiceCodeFullPay();
|
||||
}
|
||||
getInvoice();
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -1011,35 +1001,7 @@ onMounted(async () => {
|
|||
pageState.isLoaded = true;
|
||||
|
||||
if (route.query['tab'] === 'invoice') {
|
||||
if (route.query['id']) {
|
||||
const queryInvoiceId = route.query['id'] as string;
|
||||
const queryInvoiceAmount = Number(route.query['amount']) || 0;
|
||||
|
||||
await getInvoiceCode(queryInvoiceId);
|
||||
|
||||
selectedInstallmentNo.value =
|
||||
quotationFormState.value.source?.paySplit
|
||||
.filter((v) => v.invoiceId === queryInvoiceId)
|
||||
.map((v) => v.no) || [];
|
||||
|
||||
installmentAmount.value = queryInvoiceAmount;
|
||||
view.value = View.Invoice;
|
||||
return;
|
||||
}
|
||||
selectedInstallmentNo.value = [];
|
||||
selectedInstallment.value = [];
|
||||
view.value =
|
||||
quotationFormData.value.payCondition === 'Full' ||
|
||||
quotationFormData.value.payCondition === 'BillFull'
|
||||
? View.Invoice
|
||||
: View.InvoicePre;
|
||||
|
||||
if (
|
||||
quotationFormData.value.payCondition === 'Full' ||
|
||||
quotationFormData.value.payCondition === 'BillFull'
|
||||
) {
|
||||
getInvoiceCodeFullPay();
|
||||
}
|
||||
getInvoice();
|
||||
}
|
||||
if (route.query['tab'] === 'receipt') {
|
||||
await fetchReceipt();
|
||||
|
|
@ -1241,6 +1203,23 @@ async function exampleReceipt(id: string) {
|
|||
}
|
||||
}
|
||||
|
||||
function getInvoice() {
|
||||
view.value =
|
||||
quotationFormData.value.payCondition === 'Full' ||
|
||||
quotationFormData.value.payCondition === 'BillFull'
|
||||
? View.Invoice
|
||||
: View.InvoicePre;
|
||||
|
||||
if (
|
||||
quotationFormData.value.payCondition === 'Full' ||
|
||||
quotationFormData.value.payCondition === 'BillFull'
|
||||
) {
|
||||
getInvoiceCodeFullPay();
|
||||
} else {
|
||||
code.value = '';
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
[
|
||||
() => quotationFormState.value.statusFilterRequest,
|
||||
|
|
|
|||
|
|
@ -5,9 +5,7 @@ import { precisionRound } from 'src/utils/arithmetic';
|
|||
import ThaiBahtText from 'thai-baht-text';
|
||||
|
||||
// NOTE: Import stores
|
||||
import useOptionStore from 'stores/options';
|
||||
import { formatNumberDecimal } from 'stores/utils';
|
||||
import { useQuotationForm } from 'pages/05_quotation/form';
|
||||
import { useConfigStore } from 'stores/config';
|
||||
import useBranchStore from 'stores/branch';
|
||||
import { baseUrl } from 'stores/utils';
|
||||
|
|
@ -19,8 +17,8 @@ import { CustomerBranch } from 'stores/customer/types';
|
|||
import { BankBook, Branch } from 'stores/branch/types';
|
||||
import {
|
||||
QuotationPayload,
|
||||
CustomerBranchRelation,
|
||||
Details,
|
||||
QuotationFull,
|
||||
} from 'src/stores/quotations/types';
|
||||
|
||||
// NOTE: Import Components
|
||||
|
|
@ -70,9 +68,7 @@ const attachmentList = ref<
|
|||
isPDF?: boolean;
|
||||
}[]
|
||||
>([]);
|
||||
const data = ref<
|
||||
QuotationPayload & { customerBranch: CustomerBranchRelation; id: string }
|
||||
>();
|
||||
const data = ref<QuotationFull & { remark?: string }>();
|
||||
|
||||
const summaryPrice = ref<SummaryPrice>({
|
||||
totalPrice: 0,
|
||||
|
|
@ -82,6 +78,12 @@ const summaryPrice = ref<SummaryPrice>({
|
|||
finalPrice: 0,
|
||||
});
|
||||
|
||||
async function fetchQuotationById(id: string) {
|
||||
const res = await quotationStore.getQuotation(id);
|
||||
|
||||
if (res) data.value = res;
|
||||
}
|
||||
|
||||
async function getAttachment(quotationId: string) {
|
||||
const attachment = await quotationStore.listAttachment({
|
||||
parentId: quotationId,
|
||||
|
|
@ -178,10 +180,13 @@ onMounted(async () => {
|
|||
data.value = 'data' in parsed ? parsed.data : undefined;
|
||||
|
||||
if (data.value) {
|
||||
await getAttachment(data.value.id);
|
||||
if (!!data.value.id) {
|
||||
await getAttachment(data.value.id);
|
||||
await fetchQuotationById(data.value.id);
|
||||
}
|
||||
|
||||
const resCustomerBranch = await customerStore.getBranchById(
|
||||
data.value.customerBranchId,
|
||||
data.value?.customerBranchId,
|
||||
);
|
||||
|
||||
if (resCustomerBranch) {
|
||||
|
|
@ -189,19 +194,27 @@ onMounted(async () => {
|
|||
}
|
||||
|
||||
details.value = {
|
||||
code: parsed.meta.source.code,
|
||||
createdAt: parsed.meta.source.createdAt,
|
||||
createdBy: `${parsed.meta.createdBy} ${!parsed.meta.source.createdBy ? '' : parsed.meta.source.createdBy.telephoneNo}`,
|
||||
payCondition: parsed.meta.source.payCondition,
|
||||
contactName: parsed.meta.source.contactName,
|
||||
contactTel: parsed.meta.source.contactTel,
|
||||
workName: parsed.meta.source.workName,
|
||||
dueDate: parsed.meta.source.dueDate,
|
||||
worker: parsed.meta.selectedWorker,
|
||||
code: parsed?.meta?.source?.code ?? data.value?.code,
|
||||
createdAt:
|
||||
parsed?.meta?.source?.createdAt ??
|
||||
new Date(data.value?.createdAt || ''),
|
||||
createdBy:
|
||||
`${parsed?.meta?.source?.createdBy?.firstName ?? ''} ${parsed?.meta?.source?.createdBy?.telephoneNo ?? ''}`.trim() ||
|
||||
`${data.value?.createdBy?.firstName ?? ''} ${data.value?.createdBy?.telephoneNo ?? ''}`.trim(),
|
||||
payCondition:
|
||||
parsed?.meta?.source?.payCondition ?? data.value?.payCondition,
|
||||
contactName: parsed?.meta?.source?.contactName ?? data.value?.contactName,
|
||||
contactTel: parsed?.meta?.source?.contactTel ?? data.value?.contactTel,
|
||||
workName: parsed?.meta?.source?.workName ?? data.value?.workName,
|
||||
dueDate:
|
||||
parsed?.meta?.source?.dueDate ?? new Date(data.value?.dueDate || ''),
|
||||
worker:
|
||||
parsed?.meta?.selectedWorker ??
|
||||
data.value?.worker.map((v) => v.employee),
|
||||
};
|
||||
|
||||
const resBranch = await branchStore.fetchById(
|
||||
data.value?.registeredBranchId,
|
||||
data.value?.registeredBranchId ?? data.value?.registeredBranchId,
|
||||
);
|
||||
|
||||
if (resBranch) {
|
||||
|
|
@ -214,26 +227,31 @@ onMounted(async () => {
|
|||
}
|
||||
|
||||
productList.value =
|
||||
data.value?.productServiceList.map((v) => ({
|
||||
id: v.product.id,
|
||||
code: v.product.code,
|
||||
detail: v.product.name,
|
||||
amount: v.amount || 0,
|
||||
priceUnit: v.pricePerUnit || 0,
|
||||
discount: v.discount || 0,
|
||||
vat: v.vat || 0,
|
||||
value: precisionRound(
|
||||
(v.pricePerUnit || 0) * v.amount -
|
||||
(v.discount || 0) +
|
||||
(v.product.calcVat
|
||||
? ((v.pricePerUnit || 0) * v.amount - (v.discount || 0)) *
|
||||
(config.value?.vat || 0.07)
|
||||
: 0),
|
||||
),
|
||||
})) || [];
|
||||
(data?.value?.productServiceList ?? data.value?.productServiceList).map(
|
||||
(v) => ({
|
||||
id: v.product.id,
|
||||
code: v.product.code,
|
||||
detail: v.product.name,
|
||||
amount: v.amount || 0,
|
||||
priceUnit: v.pricePerUnit || 0,
|
||||
discount: v.discount || 0,
|
||||
vat: v.vat || 0,
|
||||
value: precisionRound(
|
||||
(v.pricePerUnit || 0) * v.amount -
|
||||
(v.discount || 0) +
|
||||
(v.product.calcVat
|
||||
? ((v.pricePerUnit || 0) * v.amount - (v.discount || 0)) *
|
||||
(config.value?.vat || 0.07)
|
||||
: 0),
|
||||
),
|
||||
}),
|
||||
) || [];
|
||||
}
|
||||
|
||||
summaryPrice.value = (data.value?.productServiceList || []).reduce(
|
||||
summaryPrice.value = (
|
||||
(data?.value?.productServiceList ?? data.value?.productServiceList) ||
|
||||
[]
|
||||
).reduce(
|
||||
(a, c) => {
|
||||
const price = precisionRound((c.pricePerUnit || 0) * c.amount);
|
||||
const vat = precisionRound(
|
||||
|
|
|
|||
|
|
@ -121,14 +121,7 @@ function titleMode(mode: View): string {
|
|||
<div>
|
||||
<div>เงื่อนไขการชำระ</div>
|
||||
<div>
|
||||
{{
|
||||
{
|
||||
Full: $t('quotation.type.fullAmountCash'),
|
||||
Split: $t('quotation.type.installmentsCash'),
|
||||
BillFull: $t('quotation.type.fullAmountBill'),
|
||||
BillSplit: $t('quotation.type.installmentsBill'),
|
||||
}[details.payCondition]
|
||||
}}
|
||||
{{ $t(`quotation.type.${details.payCondition}`) }}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
|
|
|
|||
412
src/pages/10_invoice/MainPage.vue
Normal file
412
src/pages/10_invoice/MainPage.vue
Normal file
|
|
@ -0,0 +1,412 @@
|
|||
<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 TableInvoice from './TableInvoice.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 { useInvoice } from 'src/stores/payment';
|
||||
import { Invoice, PaymentDataStatus } from 'src/stores/payment/types';
|
||||
import { Quotation } from 'src/stores/quotations';
|
||||
|
||||
const navigatorStore = useNavigator();
|
||||
const flowStore = useFlowStore();
|
||||
const invoiceStore = useInvoice();
|
||||
const { data, stats, page, pageMax, pageSize } = storeToRefs(invoiceStore);
|
||||
|
||||
// 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 invoiceStore.getInvoiceList({
|
||||
page: page.value,
|
||||
pageSize: pageSize.value,
|
||||
query: pageState.inputSearch,
|
||||
pay:
|
||||
pageState.statusFilter === PaymentDataStatus.Success
|
||||
? true
|
||||
: pageState.statusFilter === PaymentDataStatus.Wait
|
||||
? false
|
||||
: undefined,
|
||||
});
|
||||
if (ret) {
|
||||
data.value = ret.result;
|
||||
pageState.total = ret.total;
|
||||
pageMax.value = Math.ceil(ret.total / pageSize.value);
|
||||
}
|
||||
|
||||
if (opts?.rotateFlowId) flowStore.rotate();
|
||||
}
|
||||
|
||||
async function fetchStats() {
|
||||
const ret = await invoiceStore.getInvoiceStats();
|
||||
if (ret) stats.value = ret;
|
||||
}
|
||||
|
||||
function triggerView(opts: { quotationId: string }) {
|
||||
const url = new URL(`/quotation/view?tab=invoice`, window.location.origin);
|
||||
|
||||
localStorage.setItem(
|
||||
'new-quotation',
|
||||
JSON.stringify({
|
||||
quotationId: opts.quotationId,
|
||||
statusDialog: 'info',
|
||||
}),
|
||||
);
|
||||
|
||||
window.open(url.toString(), '_blank');
|
||||
}
|
||||
|
||||
function viewDocExample(quotationId: string) {
|
||||
localStorage.setItem(
|
||||
'quotation-preview',
|
||||
JSON.stringify({
|
||||
data: {
|
||||
id: quotationId,
|
||||
},
|
||||
}),
|
||||
);
|
||||
|
||||
const url = new URL('/quotation/document-view', window.location.origin);
|
||||
|
||||
url.searchParams.append('type', 'invoice');
|
||||
|
||||
window.open(url, '_blank');
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
navigatorStore.current.title = 'invoice.title';
|
||||
navigatorStore.current.path = [{ text: 'invoice.caption', i18n: true }];
|
||||
|
||||
await fetchStats();
|
||||
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('general.dataSum') }}
|
||||
<q-badge
|
||||
rounded
|
||||
class="q-ml-sm"
|
||||
style="
|
||||
background-color: hsla(var(--info-bg) / 0.15);
|
||||
color: hsl(var(--info-bg));
|
||||
"
|
||||
>
|
||||
{{ Object.values(stats).reduce((a, c) => a + c, 0) }}
|
||||
</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: 'mdi-timer-sand',
|
||||
count: stats[PaymentDataStatus.Wait],
|
||||
label: 'invoice.status.PaymentWait',
|
||||
color: 'orange',
|
||||
},
|
||||
{
|
||||
icon: 'mdi-check-decagram-outline',
|
||||
count: stats[PaymentDataStatus.Success],
|
||||
label: 'invoice.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',
|
||||
},
|
||||
{
|
||||
label: $t('invoice.status.PaymentWait'),
|
||||
value: PaymentDataStatus.Wait,
|
||||
},
|
||||
{
|
||||
label: $t('invoice.status.PaymentSuccess'),
|
||||
value: PaymentDataStatus.Success,
|
||||
},
|
||||
]"
|
||||
/>
|
||||
<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">
|
||||
<TableInvoice
|
||||
:columns="columns"
|
||||
:rows="data"
|
||||
:grid="pageState.gridView"
|
||||
@view="(quotationId) => triggerView({ quotationId })"
|
||||
@preview="(quotationId) => viewDocExample(quotationId)"
|
||||
>
|
||||
<template #grid="{ item }">
|
||||
<div class="col-md-4 col-sm-6 col-12">
|
||||
<QuotationCard
|
||||
hide-action
|
||||
:code="item.row.code"
|
||||
:title="item.row.quotation.workName"
|
||||
:status="
|
||||
$t(`invoice.status.${item.row.payment.paymentStatus}`)
|
||||
"
|
||||
:badge-color="
|
||||
hslaColors[item.row.payment.paymentStatus] || ''
|
||||
"
|
||||
:custom-data="[
|
||||
{
|
||||
label: $t('general.customer'),
|
||||
value:
|
||||
item.row.quotation.customerBranch.registerName ||
|
||||
`${item.row.quotation.customerBranch?.firstName || '-'} ${item.row.quotation.customerBranch?.lastName || ''}`,
|
||||
},
|
||||
{
|
||||
label: $t('taskOrder.issueDate'),
|
||||
value: new Date(item.row.createdAt).toLocaleString(
|
||||
'th-TH',
|
||||
{
|
||||
hour12: false,
|
||||
},
|
||||
),
|
||||
},
|
||||
{
|
||||
label: $t('invoice.paymentDueDate'),
|
||||
value: new Date(
|
||||
item.row.quotation.dueDate,
|
||||
).toLocaleDateString('th-TH', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: 'numeric',
|
||||
}),
|
||||
},
|
||||
{
|
||||
label: $t('quotation.payType'),
|
||||
value: $t(
|
||||
`quotation.type.${item.row.quotation.payCondition}`,
|
||||
),
|
||||
},
|
||||
{
|
||||
label: $t('preview.netValue'),
|
||||
value: item.row.amount,
|
||||
},
|
||||
]"
|
||||
@view="
|
||||
() => triggerView({ quotationId: item.row.quotation.id })
|
||||
"
|
||||
@preview="
|
||||
() => {
|
||||
viewDocExample(item.row.quotation.id);
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</TableInvoice>
|
||||
</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>
|
||||
146
src/pages/10_invoice/TableInvoice.vue
Normal file
146
src/pages/10_invoice/TableInvoice.vue
Normal file
|
|
@ -0,0 +1,146 @@
|
|||
<script setup lang="ts" generic="T">
|
||||
import { QTableSlots } from 'quasar';
|
||||
import { columns } from './constants';
|
||||
import BadgeComponent from 'src/components/BadgeComponent.vue';
|
||||
|
||||
import { Invoice, PaymentDataStatus } from 'src/stores/payment/types';
|
||||
import { ViewButton } from 'components/button';
|
||||
import { useInvoice } from 'src/stores/payment';
|
||||
|
||||
const invoiceStore = useInvoice();
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
rows: T[];
|
||||
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: 'view', id: string): void;
|
||||
(e: 'preview', id: string): void;
|
||||
(e: 'edit', data: T, index: number): void;
|
||||
(e: 'delete', data: T, index: number): void;
|
||||
(e: 'download', data: T, index: number): void;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-table
|
||||
:rows-per-page-options="[0]"
|
||||
:rows="rows.map((data, i) => ({ ...data, _index: i }))"
|
||||
:columns
|
||||
:grid
|
||||
hide-bottom
|
||||
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: Invoice & { _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 Invoice]
|
||||
: col.field(props.row)
|
||||
}}
|
||||
</span>
|
||||
</template>
|
||||
<template v-if="col.name === '#order'">
|
||||
{{
|
||||
col.field(props.row) +
|
||||
(invoiceStore.page - 1) * invoiceStore.pageSize
|
||||
}}
|
||||
</template>
|
||||
<template v-if="col.name === '#status'">
|
||||
<BadgeComponent
|
||||
:hsla-color="
|
||||
{
|
||||
[PaymentDataStatus.Success]: '--green-8-hsl',
|
||||
[PaymentDataStatus.Wait]: '--orange-5-hsl',
|
||||
}[props.row.payment.paymentStatus]
|
||||
"
|
||||
:title="$t(`invoice.status.${props.row.payment.paymentStatus}`)"
|
||||
/>
|
||||
</template>
|
||||
<template v-if="col.name === '#action'">
|
||||
<q-btn
|
||||
:id="`btn-preview-${props.row.quotation.workName}`"
|
||||
flat
|
||||
dense
|
||||
rounded
|
||||
icon="mdi-play-box-outline"
|
||||
size="12px"
|
||||
:title="$t('preview.doc')"
|
||||
@click.stop="$emit('preview', props.row.quotation.id)"
|
||||
/>
|
||||
|
||||
<q-btn
|
||||
:id="`btn-eye-${props.row.quotation.workName}`"
|
||||
icon="mdi-eye-outline"
|
||||
size="sm"
|
||||
dense
|
||||
round
|
||||
flat
|
||||
@click.stop="$emit('view', props.row.quotation.id)"
|
||||
/>
|
||||
</template>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
|
||||
<template v-slot:item="props: { row: Invoice }">
|
||||
<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>
|
||||
111
src/pages/10_invoice/constants.ts
Normal file
111
src/pages/10_invoice/constants.ts
Normal file
|
|
@ -0,0 +1,111 @@
|
|||
import { QTableProps } from 'quasar';
|
||||
import { Invoice } 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: Invoice & { _index: number }) => v._index + 1,
|
||||
},
|
||||
|
||||
{
|
||||
name: 'invoiceCode',
|
||||
align: 'center',
|
||||
label: 'requestList.invoiceCode',
|
||||
field: 'code',
|
||||
},
|
||||
|
||||
{
|
||||
name: 'workSheetName',
|
||||
align: 'center',
|
||||
label: 'invoice.workSheetName',
|
||||
field: (v: Invoice) => v.quotation.workName,
|
||||
},
|
||||
|
||||
{
|
||||
name: 'customer',
|
||||
align: 'center',
|
||||
label: 'general.customer',
|
||||
field: (v: Invoice) => v.quotation.customerBranch.customerName,
|
||||
},
|
||||
|
||||
{
|
||||
name: 'issueDate',
|
||||
align: 'center',
|
||||
label: 'taskOrder.issueDate',
|
||||
field: (v: Invoice) => dateFormatJS({ date: v.createdAt }),
|
||||
},
|
||||
|
||||
{
|
||||
name: 'paymentDueDate',
|
||||
align: 'center',
|
||||
label: 'invoice.paymentDueDate',
|
||||
field: (v: Invoice) => dateFormatJS({ date: v.quotation.dueDate }),
|
||||
},
|
||||
|
||||
{
|
||||
name: 'value',
|
||||
align: 'center',
|
||||
label: 'preview.value',
|
||||
field: (v: Invoice) => formatNumberDecimal(v.amount, 2),
|
||||
},
|
||||
{
|
||||
name: '#status',
|
||||
align: 'center',
|
||||
label: 'general.status',
|
||||
field: (_) => '#status',
|
||||
},
|
||||
{
|
||||
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',
|
||||
};
|
||||
|
|
@ -110,6 +110,11 @@ const routes: RouteRecordRaw[] = [
|
|||
name: 'CreditNote',
|
||||
component: () => import('pages/11_credit-note/MainPage.vue'),
|
||||
},
|
||||
{
|
||||
path: '/invoice',
|
||||
name: '/Invoice',
|
||||
component: () => import('pages/10_invoice/MainPage.vue'),
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import {
|
|||
Payment,
|
||||
Receipt,
|
||||
PaymentFlowAccount,
|
||||
PaymentDataStatus,
|
||||
} from './types';
|
||||
import { manageAttachment } from '../utils';
|
||||
|
||||
|
|
@ -122,6 +123,19 @@ export const useInvoice = defineStore('invoice-store', () => {
|
|||
const page = ref<number>(1);
|
||||
const pageMax = ref<number>(1);
|
||||
const pageSize = ref<number>(30);
|
||||
const stats = ref<Record<PaymentDataStatus, number>>({
|
||||
[PaymentDataStatus.Success]: 0,
|
||||
[PaymentDataStatus.Wait]: 0,
|
||||
});
|
||||
|
||||
async function getInvoiceStats(params?: { quotationId?: string }) {
|
||||
const res = await api.get<Record<PaymentDataStatus, number>>(
|
||||
'/invoice/stats',
|
||||
{ params },
|
||||
);
|
||||
if (res.status >= 400) return null;
|
||||
return res.data;
|
||||
}
|
||||
|
||||
async function getInvoice(id: string) {
|
||||
const res = await api.get<Invoice>(`/invoice/${id}`);
|
||||
|
|
@ -136,6 +150,7 @@ export const useInvoice = defineStore('invoice-store', () => {
|
|||
pageSize?: number;
|
||||
query?: string;
|
||||
quotationId?: string;
|
||||
pay?: boolean;
|
||||
}) {
|
||||
const res = await api.get<PaginationResult<Invoice>>('/invoice', {
|
||||
params,
|
||||
|
|
@ -171,7 +186,9 @@ export const useInvoice = defineStore('invoice-store', () => {
|
|||
page,
|
||||
pageSize,
|
||||
pageMax,
|
||||
stats,
|
||||
|
||||
getInvoiceStats,
|
||||
getInvoice,
|
||||
getInvoiceList,
|
||||
createInvoice,
|
||||
|
|
|
|||
|
|
@ -16,9 +16,14 @@ export type Invoice = {
|
|||
createdBy: CreatedBy;
|
||||
createdByUserId: string;
|
||||
|
||||
payment?: Payment;
|
||||
payment: Payment;
|
||||
};
|
||||
|
||||
export enum PaymentDataStatus {
|
||||
Success = 'PaymentSuccess',
|
||||
Wait = 'PaymentWait',
|
||||
}
|
||||
|
||||
export type InvoicePayload = {
|
||||
quotationId: string;
|
||||
amount: number;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue