feat: 选票弹窗新增剩余可用金额列并支持游标翻页与上一页缓存回显
- 下一页回传上页nextCursor续扫,新查询/换页容量/重新打开自动重置游标与页缓存 - 上一页直接回显已浏览页缓存,不再发起请求 - 查询表单删除单据使用状态条件(后端固定查未用),新增剩余可用金额展示列
This commit is contained in:
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-dialog v-model="visible" :title="title" width="92%" append-to-body destroy-on-close @open="handleOpen">
|
<el-dialog v-model="visible" :title="title" width="92%" append-to-body destroy-on-close @open="handleOpen">
|
||||||
<el-form :model="query" inline label-width="90px" @submit.prevent>
|
<el-form :model="query" inline label-width="130px" @submit.prevent>
|
||||||
<el-form-item label="发票号码">
|
<el-form-item label="发票号码">
|
||||||
<el-input v-model="query.invoiceNo" clearable @keyup.enter="handleQuery" />
|
<el-input v-model="query.invoiceNo" clearable @keyup.enter="handleQuery" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
@@ -14,7 +14,7 @@
|
|||||||
end-placeholder="结束日期"
|
end-placeholder="结束日期"
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="销方税号">
|
<el-form-item label="销方(开票方税号)">
|
||||||
<el-input
|
<el-input
|
||||||
v-model="query.salerTaxNo"
|
v-model="query.salerTaxNo"
|
||||||
clearable
|
clearable
|
||||||
@@ -22,7 +22,7 @@
|
|||||||
@keyup.enter="handleQuery"
|
@keyup.enter="handleQuery"
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="购方税号">
|
<el-form-item label="购方(收票方税号)">
|
||||||
<el-input
|
<el-input
|
||||||
v-model="query.buyerTaxNo"
|
v-model="query.buyerTaxNo"
|
||||||
clearable
|
clearable
|
||||||
@@ -46,16 +46,6 @@
|
|||||||
/>
|
/>
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="单据使用状态">
|
|
||||||
<el-select v-model="query.expenseStatus" clearable placeholder="不限" style="width: 130px">
|
|
||||||
<el-option
|
|
||||||
v-for="option in expenseStatusOptions"
|
|
||||||
:key="option.value"
|
|
||||||
:label="option.label"
|
|
||||||
:value="option.value"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-button :disabled="loading" @click="resetQuery">重置</el-button>
|
<el-button :disabled="loading" @click="resetQuery">重置</el-button>
|
||||||
<el-button type="primary" :disabled="loading" @click="handleQuery">查询</el-button>
|
<el-button type="primary" :disabled="loading" @click="handleQuery">查询</el-button>
|
||||||
@@ -98,6 +88,9 @@
|
|||||||
<el-table-column label="税额" min-width="120" align="right">
|
<el-table-column label="税额" min-width="120" align="right">
|
||||||
<template #default="{ row }">{{ formatMoney(row.taxAmount) }}</template>
|
<template #default="{ row }">{{ formatMoney(row.taxAmount) }}</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
|
<el-table-column label="剩余可用金额" min-width="130" align="right">
|
||||||
|
<template #default="{ row }">{{ formatMoney(row.availableTaxAmount) }}</template>
|
||||||
|
</el-table-column>
|
||||||
<el-table-column prop="kingdeeBillNo" label="金蝶单据号" min-width="210" show-overflow-tooltip />
|
<el-table-column prop="kingdeeBillNo" label="金蝶单据号" min-width="210" show-overflow-tooltip />
|
||||||
<el-table-column label="认领状态" min-width="100" align="center">
|
<el-table-column label="认领状态" min-width="100" align="center">
|
||||||
<template #default="{ row }">
|
<template #default="{ row }">
|
||||||
@@ -153,16 +146,16 @@ export default {
|
|||||||
{ value: '26', label: '数电发票(普通发票)' },
|
{ value: '26', label: '数电发票(普通发票)' },
|
||||||
{ value: '27', label: '数电发票(增值税专用发票)' },
|
{ value: '27', label: '数电发票(增值税专用发票)' },
|
||||||
],
|
],
|
||||||
expenseStatusOptions: [
|
|
||||||
{ value: '1', label: '未用' },
|
|
||||||
{ value: '30', label: '在用' },
|
|
||||||
{ value: '60', label: '已用' },
|
|
||||||
{ value: '65', label: '已入账' },
|
|
||||||
],
|
|
||||||
rows: [],
|
rows: [],
|
||||||
selected: [],
|
selected: [],
|
||||||
current: null,
|
current: null,
|
||||||
page: { current: 1, size: 10, hasMore: false },
|
page: { current: 1, size: 10, hasMore: false },
|
||||||
|
// 续扫游标(服务端过滤补页后翻页须按游标对齐,防漏行/重行)
|
||||||
|
nextCursor: null,
|
||||||
|
// 下一页请求待回传的游标:nextPage 时暂存,load 成功或失败后清空
|
||||||
|
pendingCursor: null,
|
||||||
|
// 已浏览页缓存:上一页直接回显不再请求(0 远程调用)
|
||||||
|
pageCache: {},
|
||||||
query: this.emptyQuery(),
|
query: this.emptyQuery(),
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
@@ -185,8 +178,6 @@ export default {
|
|||||||
salerTaxNo: '',
|
salerTaxNo: '',
|
||||||
buyerTaxNo: '',
|
buyerTaxNo: '',
|
||||||
invoiceType: '',
|
invoiceType: '',
|
||||||
// 单据使用状态默认"未用"
|
|
||||||
expenseStatus: '1',
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
// 远程实时查询的票未入本地镜像,id 恒空,用发票号码兜底作为行主键
|
// 远程实时查询的票未入本地镜像,id 恒空,用发票号码兜底作为行主键
|
||||||
@@ -200,21 +191,34 @@ export default {
|
|||||||
this.selected = [];
|
this.selected = [];
|
||||||
this.$refs.poolTable?.clearSelection();
|
this.$refs.poolTable?.clearSelection();
|
||||||
this.page.current = 1;
|
this.page.current = 1;
|
||||||
|
this.resetScanState();
|
||||||
this.load();
|
this.load();
|
||||||
},
|
},
|
||||||
handleQuery() {
|
handleQuery() {
|
||||||
this.page.current = 1;
|
this.page.current = 1;
|
||||||
|
this.resetScanState();
|
||||||
this.load();
|
this.load();
|
||||||
},
|
},
|
||||||
handleSizeChange() {
|
handleSizeChange() {
|
||||||
this.page.current = 1;
|
this.page.current = 1;
|
||||||
|
this.resetScanState();
|
||||||
this.load();
|
this.load();
|
||||||
},
|
},
|
||||||
prevPage() {
|
prevPage() {
|
||||||
|
// 已浏览页直接回显缓存,不再请求
|
||||||
|
const cached = this.pageCache[this.page.current - 1];
|
||||||
|
if (cached) {
|
||||||
|
this.page.current -= 1;
|
||||||
|
this.rows = cached.rows;
|
||||||
|
this.page.hasMore = cached.hasMore;
|
||||||
|
this.nextCursor = cached.nextCursor;
|
||||||
|
return;
|
||||||
|
}
|
||||||
this.page.current -= 1;
|
this.page.current -= 1;
|
||||||
this.load();
|
this.load();
|
||||||
},
|
},
|
||||||
nextPage() {
|
nextPage() {
|
||||||
|
this.pendingCursor = this.nextCursor;
|
||||||
this.page.current += 1;
|
this.page.current += 1;
|
||||||
this.load();
|
this.load();
|
||||||
},
|
},
|
||||||
@@ -222,6 +226,12 @@ export default {
|
|||||||
this.query = this.emptyQuery();
|
this.query = this.emptyQuery();
|
||||||
this.handleQuery();
|
this.handleQuery();
|
||||||
},
|
},
|
||||||
|
// 新查询/换页容量/重新打开时清空游标与已浏览页缓存,重新锚定扫描
|
||||||
|
resetScanState() {
|
||||||
|
this.nextCursor = null;
|
||||||
|
this.pendingCursor = null;
|
||||||
|
this.pageCache = {};
|
||||||
|
},
|
||||||
unwrap(response) {
|
unwrap(response) {
|
||||||
const body = response?.data || response || {};
|
const body = response?.data || response || {};
|
||||||
return body?.data || body;
|
return body?.data || body;
|
||||||
@@ -230,23 +240,27 @@ export default {
|
|||||||
this.loading = true;
|
this.loading = true;
|
||||||
// 请求前快照页码:prev/next 会先改写 current,远程失败时回滚避免停留在错页
|
// 请求前快照页码:prev/next 会先改写 current,远程失败时回滚避免停留在错页
|
||||||
const lastRequested = this.page.current;
|
const lastRequested = this.page.current;
|
||||||
|
const cursor = this.pendingCursor;
|
||||||
|
this.pendingCursor = null;
|
||||||
try {
|
try {
|
||||||
const range = this.query.invoiceDateRange || [];
|
const range = this.query.invoiceDateRange || [];
|
||||||
const data = this.unwrap(
|
const data = this.unwrap(
|
||||||
await this.queryApi({
|
await this.queryApi({
|
||||||
current: this.page.current,
|
current: this.page.current,
|
||||||
size: this.page.size,
|
size: this.page.size,
|
||||||
|
cursor: cursor || undefined,
|
||||||
invoiceNo: this.query.invoiceNo || undefined,
|
invoiceNo: this.query.invoiceNo || undefined,
|
||||||
invoiceDateStart: range[0] || undefined,
|
invoiceDateStart: range[0] || undefined,
|
||||||
invoiceDateEnd: range[1] || undefined,
|
invoiceDateEnd: range[1] || undefined,
|
||||||
salerTaxNo: this.query.salerTaxNo || undefined,
|
salerTaxNo: this.query.salerTaxNo || undefined,
|
||||||
buyerTaxNo: this.query.buyerTaxNo || undefined,
|
buyerTaxNo: this.query.buyerTaxNo || undefined,
|
||||||
invoiceType: this.query.invoiceType || undefined,
|
invoiceType: this.query.invoiceType || undefined,
|
||||||
expenseStatus: this.query.expenseStatus || undefined,
|
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
this.rows = data.records || [];
|
this.rows = data.records || [];
|
||||||
this.page.hasMore = !!data.hasMore;
|
this.page.hasMore = !!data.hasMore;
|
||||||
|
this.nextCursor = data.nextCursor || null;
|
||||||
|
this.pageCache[this.page.current] = { rows: this.rows, hasMore: this.page.hasMore, nextCursor: this.nextCursor };
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
if (this.page.current !== lastRequested) {
|
if (this.page.current !== lastRequested) {
|
||||||
this.page.current = lastRequested;
|
this.page.current = lastRequested;
|
||||||
|
|||||||
Reference in New Issue
Block a user