feat: update QuotationForm and RequestListView to enhance navigation and data handling
This commit is contained in:
parent
7071ecbf5c
commit
cc916b663d
2 changed files with 81 additions and 15 deletions
|
|
@ -331,12 +331,12 @@ async function fetchStatus() {
|
|||
title: 'Issued',
|
||||
status: getStatus(quotationFormData.value.quotationStatus, 0, -1),
|
||||
active: () => view.value === View.Quotation,
|
||||
handler: () => (
|
||||
(view.value = View.Quotation),
|
||||
(code.value = ''),
|
||||
(selectedInstallmentNo.value = []),
|
||||
(selectedInstallment.value = [])
|
||||
),
|
||||
handler: () => {
|
||||
view.value = View.Quotation;
|
||||
code.value = '';
|
||||
selectedInstallmentNo.value = [];
|
||||
selectedInstallment.value = [];
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Accepted',
|
||||
|
|
@ -353,6 +353,7 @@ async function fetchStatus() {
|
|||
active: () =>
|
||||
view.value === View.Invoice || view.value === View.InvoicePre,
|
||||
handler: () => {
|
||||
code.value = '';
|
||||
selectedInstallmentNo.value = [];
|
||||
selectedInstallment.value = [];
|
||||
view.value =
|
||||
|
|
@ -375,6 +376,7 @@ async function fetchStatus() {
|
|||
active: () =>
|
||||
view.value === View.Payment || view.value === View.PaymentPre,
|
||||
handler: () => {
|
||||
code.value = '';
|
||||
view.value =
|
||||
quotationFormData.value.payCondition === 'Full' ||
|
||||
quotationFormData.value.payCondition === 'BillFull'
|
||||
|
|
@ -1009,14 +1011,40 @@ 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();
|
||||
}
|
||||
}
|
||||
if (route.query['tab'] === 'receipt') {
|
||||
await fetchReceipt();
|
||||
view.value = View.Receipt;
|
||||
code.value = '';
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { onMounted, reactive, ref, watch, computed, nextTick } from 'vue';
|
|||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
// NOTE: Components
|
||||
import DataDisplay from 'src/components/08_request-list/DataDisplay.vue';
|
||||
import DataDisplay from 'components/08_request-list/DataDisplay.vue';
|
||||
import DocumentExpansion from './DocumentExpansion.vue';
|
||||
import FormExpansion from './FormExpansion.vue';
|
||||
import PropertiesExpansion from './PropertiesExpansion.vue';
|
||||
|
|
@ -40,6 +40,7 @@ import { Invoice } from 'src/stores/payment/types';
|
|||
|
||||
import { CreatedBy } from 'src/stores/types';
|
||||
import { getUserId } from 'src/services/keycloak';
|
||||
import { QuotationFull } from 'src/stores/quotations/types';
|
||||
|
||||
const { locale } = useI18n();
|
||||
|
||||
|
|
@ -336,8 +337,32 @@ function isInstallmentPaySuccess(installmentNo: number) {
|
|||
return !!(invoice?.payment?.paymentStatus === 'PaymentSuccess');
|
||||
}
|
||||
|
||||
function goToRequestList(id: string) {
|
||||
const url = new URL(`/request-list/${id}`, window.location.origin);
|
||||
function goToQuotation(
|
||||
quotation: QuotationFull,
|
||||
opt?: { tab?: string; id?: string; amount?: number },
|
||||
) {
|
||||
const { tab, id, amount } = opt || {};
|
||||
const url = new URL('/quotation/view', window.location.origin);
|
||||
if (tab) {
|
||||
url.searchParams.append('tab', tab);
|
||||
}
|
||||
if (id) {
|
||||
url.searchParams.append('id', id);
|
||||
}
|
||||
if (amount) {
|
||||
url.searchParams.append('amount', amount.toString());
|
||||
}
|
||||
|
||||
localStorage.setItem(
|
||||
'new-quotation',
|
||||
JSON.stringify({
|
||||
customerBranchId: quotation.customerBranchId,
|
||||
agentPrice: quotation.agentPrice,
|
||||
statusDialog: 'info',
|
||||
quotationId: quotation.id,
|
||||
}),
|
||||
);
|
||||
|
||||
window.open(url.toString(), '_blank');
|
||||
}
|
||||
</script>
|
||||
|
|
@ -515,32 +540,45 @@ function goToRequestList(id: string) {
|
|||
}"
|
||||
>
|
||||
<DataDisplay
|
||||
clickable
|
||||
class="col"
|
||||
icon="mdi-file-document-outline"
|
||||
:label="$t('requestList.quotationCode')"
|
||||
:value="data.quotation.code || '-'"
|
||||
@label-click="goToQuotation(data.quotation)"
|
||||
/>
|
||||
<DataDisplay
|
||||
clickable
|
||||
class="col"
|
||||
icon="mdi-file-document-outline"
|
||||
tooltip
|
||||
:label="$t('requestList.invoiceCode')"
|
||||
:value="
|
||||
data.quotation?.invoice
|
||||
?.map((i: Invoice) => i.code)
|
||||
.join(', ') || '-'
|
||||
data.quotation?.invoice?.map((i: Invoice) => i.code)
|
||||
"
|
||||
@label-click="
|
||||
(_: string, i: number) => {
|
||||
if (!data) return;
|
||||
goToQuotation(data.quotation, {
|
||||
tab: 'invoice',
|
||||
id: data.quotation.invoice?.[i]?.id,
|
||||
amount: data.quotation.invoice?.[i]?.amount,
|
||||
});
|
||||
}
|
||||
"
|
||||
/>
|
||||
<DataDisplay
|
||||
clickable
|
||||
class="col"
|
||||
icon="mdi-file-document-outline"
|
||||
tooltip
|
||||
:label="$t('requestList.receiptCode')"
|
||||
:value="
|
||||
data.quotation?.invoice
|
||||
?.flatMap((i: Invoice) => i.payment?.code || [])
|
||||
.join(', ') || '-'
|
||||
data.quotation?.invoice?.flatMap(
|
||||
(i: Invoice) => i.payment?.code || [],
|
||||
)
|
||||
"
|
||||
@click="goToQuotation(data.quotation, { tab: 'receipt' })"
|
||||
/>
|
||||
<div v-if="$q.screen.gt.sm" class="col"></div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue