b2894lxlx
6f2383a7e5
付款申请汇票筛选与提示去重、结算菜单拆分与金蝶同步弹框、应收应付详情高度、合同计费与半月结调整，以及导入运单批量删除校验。 Co-authored-by: Cursor <cursoragent@cursor.com>
851 lines
28 KiB
Vue
851 lines
28 KiB
Vue
<template>
|
|
<basic-container class="pre-settlement-page">
|
|
<section v-show="searchVisible" class="pre-settlement-page__search">
|
|
<el-form :model="query" label-position="right" label-width="88px" @submit.prevent>
|
|
<div class="pre-settlement-page__search-grid">
|
|
<template v-for="field in visibleSearchFields" :key="field.prop">
|
|
<el-form-item :label="field.label">
|
|
<el-date-picker
|
|
v-if="field.type === 'daterange'"
|
|
v-model="query[field.prop]"
|
|
type="daterange"
|
|
value-format="YYYY-MM-DD"
|
|
format="YYYY-MM-DD"
|
|
range-separator="~"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
/>
|
|
<el-select
|
|
v-else-if="field.type === 'select'"
|
|
v-model="query[field.prop]"
|
|
clearable
|
|
filterable
|
|
placeholder="请选择"
|
|
>
|
|
<el-option
|
|
v-for="item in field.options"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
<el-cascader
|
|
v-else-if="field.type === 'cascader'"
|
|
v-model="query[field.prop]"
|
|
:options="organizationTreeOptions"
|
|
:props="organizationCascaderProps"
|
|
clearable
|
|
filterable
|
|
style="width: 100%"
|
|
placeholder="请选择"
|
|
/>
|
|
<el-input v-else v-model="query[field.prop]" clearable placeholder="请输入" />
|
|
</el-form-item>
|
|
</template>
|
|
<div class="pre-settlement-page__search-actions">
|
|
<el-button type="primary" @click="handleSearch">查询</el-button>
|
|
<el-button @click="resetSearch">重置</el-button>
|
|
<el-button text :icon="searchExpanded ? ArrowUp : ArrowDown" @click="toggleSearch">
|
|
{{ searchExpanded ? '收起' : '展开' }}
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
</el-form>
|
|
</section>
|
|
|
|
<section class="pre-settlement-page__table-panel">
|
|
<div class="pre-settlement-page__toolbar">
|
|
<div class="pre-settlement-page__toolbar-left">
|
|
<el-button v-if="hasPermission('pre_settlement_add')" type="primary" @click="openCreate">
|
|
新增
|
|
</el-button>
|
|
<el-button
|
|
v-if="hasPermission('pre_settlement_advance')"
|
|
type="primary"
|
|
plain
|
|
:disabled="!selection.length"
|
|
@click="handleAdvanceApplication"
|
|
>
|
|
预付申请
|
|
</el-button>
|
|
<el-button
|
|
v-if="hasPermission('pre_settlement_formal')"
|
|
type="primary"
|
|
plain
|
|
:disabled="!selection.length"
|
|
@click="handleFormalSettlement"
|
|
>
|
|
尾款结算
|
|
</el-button>
|
|
<el-button
|
|
v-if="hasPermission('pre_settlement_print')"
|
|
type="primary"
|
|
plain
|
|
@click="openPrintDialog"
|
|
>
|
|
打印结算单
|
|
</el-button>
|
|
<el-button
|
|
v-if="hasPermission('pre_settlement_export')"
|
|
type="primary"
|
|
plain
|
|
@click="handleExport"
|
|
>
|
|
导出
|
|
</el-button>
|
|
</div>
|
|
<settlement-table-tools
|
|
:columns="columnSettingOptions"
|
|
v-model:visible-column-keys="visibleColumnKeys"
|
|
v-model:table-size="tableSize"
|
|
v-model:search-visible="searchVisible"
|
|
@refresh="loadTable"
|
|
/>
|
|
</div>
|
|
|
|
<el-table
|
|
v-loading="loading"
|
|
:data="rows"
|
|
:size="tableSize"
|
|
border
|
|
class="pre-settlement-page__table"
|
|
@selection-change="handleSelectionChange"
|
|
>
|
|
<el-table-column type="selection" width="52" fixed="left" align="center" />
|
|
<el-table-column type="index" label="序号" width="64" fixed="left" align="center" />
|
|
<el-table-column
|
|
v-for="column in visibleTableColumns"
|
|
:key="column.prop"
|
|
:prop="column.prop"
|
|
:label="column.label"
|
|
:min-width="column.minWidth"
|
|
:fixed="column.fixed"
|
|
align="center"
|
|
show-overflow-tooltip
|
|
>
|
|
<template #default="{ row }">
|
|
<el-link
|
|
v-if="column.link && row[column.prop] && hasPermission('pre_settlement_view')"
|
|
type="primary"
|
|
@click="openView(row)"
|
|
>
|
|
{{ row[column.prop] }}
|
|
</el-link>
|
|
<el-tag
|
|
v-else-if="column.status"
|
|
:type="statusTagType(row.approvalStatus)"
|
|
class="status-text"
|
|
>
|
|
{{ row[column.prop] || '-' }}
|
|
</el-tag>
|
|
<span v-else-if="column.money">
|
|
{{ formatMoney(row[column.prop], moneyCurrency(row, column.prop)) }}
|
|
</span>
|
|
<span v-else-if="column.precision !== undefined">
|
|
{{ formatNumber(row[column.prop], column.precision) }}
|
|
</span>
|
|
<span v-else-if="column.prop === 'sourceType'">
|
|
{{ row[column.prop] === '应收应付' ? '应付' : displayValue(row[column.prop]) }}
|
|
</span>
|
|
<span v-else>{{ displayValue(row[column.prop]) }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" width="180" fixed="right" align="center">
|
|
<template #default="{ row }">
|
|
<div class="pre-settlement-page__links">
|
|
<el-link
|
|
v-if="hasPermission('pre_settlement_view')"
|
|
type="primary"
|
|
@click="openView(row)"
|
|
>
|
|
查看
|
|
</el-link>
|
|
<el-link
|
|
v-if="hasPermission('pre_settlement_edit') && isEditable(row)"
|
|
type="primary"
|
|
@click="openEdit(row)"
|
|
>
|
|
编辑
|
|
</el-link>
|
|
<el-link
|
|
v-if="hasPermission('pre_settlement_delete') && row.approvalStatus === 'draft'"
|
|
type="danger"
|
|
@click="handleDelete(row)"
|
|
>
|
|
删除
|
|
</el-link>
|
|
<el-link
|
|
v-if="
|
|
hasPermission('pre_settlement_submit') &&
|
|
['draft', 'returned'].includes(row.approvalStatus)
|
|
"
|
|
type="primary"
|
|
@click="handleSubmit(row)"
|
|
>
|
|
提交
|
|
</el-link>
|
|
<el-link
|
|
v-if="
|
|
mkEnabled &&
|
|
hasPermission('pre_settlement_approve') &&
|
|
['reviewing', 'approved'].includes(row.approvalStatus)
|
|
"
|
|
type="primary"
|
|
@click="handleMkAudit(row)"
|
|
>
|
|
流程
|
|
</el-link>
|
|
<el-link
|
|
v-if="
|
|
!mkEnabled &&
|
|
hasPermission('pre_settlement_approve') &&
|
|
row.approvalStatus === 'reviewing'
|
|
"
|
|
type="primary"
|
|
@click="handleApprove(row)"
|
|
>
|
|
通过
|
|
</el-link>
|
|
<el-link
|
|
v-if="
|
|
!mkEnabled &&
|
|
hasPermission('pre_settlement_approve') &&
|
|
row.approvalStatus === 'reviewing'
|
|
"
|
|
type="danger"
|
|
@click="handleReturn(row)"
|
|
>
|
|
驳回
|
|
</el-link>
|
|
<el-link
|
|
v-if="
|
|
hasPermission('pre_settlement_void') &&
|
|
row.approvalStatus === 'approved' &&
|
|
!row.formalSettlementNo
|
|
"
|
|
type="danger"
|
|
@click="handleVoid(row)"
|
|
>
|
|
作废
|
|
</el-link>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<div class="pre-settlement-page__pagination">
|
|
<el-pagination
|
|
v-model:current-page="page.current"
|
|
v-model:page-size="page.size"
|
|
:total="page.total"
|
|
:page-sizes="[10, 20, 50, 100]"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
@current-change="loadTable"
|
|
@size-change="handleSizeChange"
|
|
/>
|
|
</div>
|
|
</section>
|
|
|
|
<pre-settlement-editor
|
|
v-model="editor.visible"
|
|
:record-id="editor.id"
|
|
:readonly="editor.readonly"
|
|
@success="loadTable"
|
|
/>
|
|
|
|
<el-dialog
|
|
v-model="printDialog.visible"
|
|
title="打印"
|
|
width="620px"
|
|
append-to-body
|
|
class="pre-settlement-print-dialog"
|
|
>
|
|
<section-card title="选择打印模板">
|
|
<el-form label-position="right" label-width="auto" class="pre-settlement-page__print-form">
|
|
<el-form-item label="项目">
|
|
<span>{{ printDialog.row.projectName || '-' }}</span>
|
|
</el-form-item>
|
|
<el-form-item label="模板名称">
|
|
<el-select v-model="printDialog.template" placeholder="请选择">
|
|
<el-option
|
|
v-for="item in printDialog.templates"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-form>
|
|
</section-card>
|
|
<template #footer>
|
|
<el-button @click="printDialog.visible = false">取消</el-button>
|
|
<el-button type="primary" :loading="printDialog.loading" @click="handlePrintPreview">
|
|
打印预览
|
|
</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
</basic-container>
|
|
</template>
|
|
|
|
<script>
|
|
import { ArrowDown, ArrowUp } from '@element-plus/icons-vue';
|
|
import { mapGetters } from 'vuex';
|
|
import {
|
|
approve,
|
|
exportList,
|
|
getDetail,
|
|
getList,
|
|
getPrintTemplates,
|
|
remove,
|
|
returnBill,
|
|
submit,
|
|
voidBill,
|
|
} from '@/api/settlement/preSettlement';
|
|
import { preSettlementSearchFields } from '@/option/settlement/preSettlementSearch';
|
|
import organizationSearch from '@/mixins/organization-search';
|
|
import { preSettlementTableColumns } from '@/option/settlement/preSettlementTable';
|
|
import { createSettlementTransfer } from '@/utils/settlement-transfer';
|
|
import { downloadFile } from '@/utils/util';
|
|
import { getMKApprovalUrl } from '@/api/system/business-process';
|
|
import { loadMkEnabled, submitMkApprovalFlow } from '@/utils/mk-approval';
|
|
import PreSettlementEditor from './components/pre-settlement-editor.vue';
|
|
import SettlementTableTools from './components/settlement-table-tools.vue';
|
|
import { isAdministrator } from '@/utils/auth';
|
|
|
|
const emptyQuery = () => ({
|
|
preSettlementNo: '',
|
|
advanceNo: '',
|
|
projectName: '',
|
|
deptName: [],
|
|
contractName: '',
|
|
contractNo: '',
|
|
payeeName: '',
|
|
payerName: '',
|
|
createDateRange: [],
|
|
approvalStatus: '',
|
|
});
|
|
|
|
export default {
|
|
name: 'PreSettlement',
|
|
components: { PreSettlementEditor, SettlementTableTools },
|
|
mixins: [organizationSearch],
|
|
data() {
|
|
return {
|
|
ArrowDown,
|
|
ArrowUp,
|
|
loading: false,
|
|
query: emptyQuery(),
|
|
searchFields: preSettlementSearchFields,
|
|
searchExpanded: false,
|
|
searchVisible: true,
|
|
tableSize: 'default',
|
|
tableColumns: preSettlementTableColumns,
|
|
visibleColumnKeys: preSettlementTableColumns.map(column => column.prop),
|
|
rows: [],
|
|
selection: [],
|
|
page: {
|
|
current: 1,
|
|
size: 10,
|
|
total: 0,
|
|
},
|
|
editor: {
|
|
visible: false,
|
|
id: '',
|
|
readonly: false,
|
|
},
|
|
printDialog: {
|
|
visible: false,
|
|
loading: false,
|
|
row: {},
|
|
templates: [],
|
|
template: '',
|
|
},
|
|
mkEnabled: false,
|
|
};
|
|
},
|
|
computed: {
|
|
...mapGetters(['permission', 'userInfo']),
|
|
isAdmin() {
|
|
return isAdministrator(this.userInfo);
|
|
},
|
|
visibleSearchFields() {
|
|
return this.searchExpanded ? this.searchFields : this.searchFields.slice(0, 4);
|
|
},
|
|
columnSettingOptions() {
|
|
return this.tableColumns.map(column => ({
|
|
prop: column.prop,
|
|
label: column.label,
|
|
}));
|
|
},
|
|
visibleTableColumns() {
|
|
return this.tableColumns.filter(column => this.visibleColumnKeys.includes(column.prop));
|
|
},
|
|
},
|
|
watch: {
|
|
'$route.query.detailNo'(detailNo) {
|
|
if (detailNo) this.openRouteDetail(detailNo);
|
|
},
|
|
},
|
|
created() {
|
|
this.loadOrganizationOptions();
|
|
this.loadTable();
|
|
this.openRouteDetail();
|
|
loadMkEnabled()
|
|
.then(enabled => {
|
|
this.mkEnabled = !!enabled;
|
|
})
|
|
.catch(() => {
|
|
this.mkEnabled = false;
|
|
});
|
|
},
|
|
methods: {
|
|
hasPermission(code) {
|
|
return this.isAdmin || this.validData(this.permission?.[code], false);
|
|
},
|
|
async loadTable() {
|
|
this.loading = true;
|
|
try {
|
|
const { data } = await getList(this.page.current, this.page.size, this.buildQuery());
|
|
const result = data?.data || {};
|
|
this.rows = result.records || [];
|
|
this.page.total = Number(result.total || 0);
|
|
} finally {
|
|
this.loading = false;
|
|
}
|
|
},
|
|
buildQuery() {
|
|
const range = this.query.createDateRange || [];
|
|
// 所属组织级联返回 id 路径，转成组织名称传给后端（用副本，避免污染搜索框回显）
|
|
const query = this.normalizeOrganizationSearch({ ...this.query }, 'deptName');
|
|
return {
|
|
...query,
|
|
createDateRange: undefined,
|
|
createStartDate: range[0],
|
|
createEndDate: range[1],
|
|
};
|
|
},
|
|
handleSearch() {
|
|
this.page.current = 1;
|
|
this.loadTable();
|
|
},
|
|
resetSearch() {
|
|
this.query = emptyQuery();
|
|
this.page.current = 1;
|
|
this.loadTable();
|
|
},
|
|
toggleSearch() {
|
|
this.searchExpanded = !this.searchExpanded;
|
|
},
|
|
handleSizeChange() {
|
|
this.page.current = 1;
|
|
this.loadTable();
|
|
},
|
|
handleSelectionChange(rows) {
|
|
this.selection = rows;
|
|
},
|
|
openCreate() {
|
|
this.$router.push({
|
|
path: '/settlement/pre-settlement/form',
|
|
query: { mode: 'add', name: '新增预付结算单' },
|
|
});
|
|
},
|
|
openEdit(row) {
|
|
this.$router.push({
|
|
path: '/settlement/pre-settlement/form',
|
|
query: { mode: 'edit', id: row.id, name: '编辑预付结算单' },
|
|
});
|
|
},
|
|
openView(row) {
|
|
this.editor = { visible: true, id: row.id, readonly: true };
|
|
},
|
|
async openRouteDetail(detailNo = this.$route.query.detailNo) {
|
|
const preSettlementNo = String(detailNo || '').trim();
|
|
if (!preSettlementNo) return;
|
|
const { data } = await getList(1, 10, { preSettlementNo });
|
|
const records = data?.data?.records || [];
|
|
const row = records.find(item => item.preSettlementNo === preSettlementNo);
|
|
if (!row) {
|
|
this.$message.warning('未找到对应的预付结算单');
|
|
return;
|
|
}
|
|
this.openView(row);
|
|
},
|
|
isEditable(row) {
|
|
return ['draft', 'returned'].includes(row.approvalStatus);
|
|
},
|
|
async handleDelete(row) {
|
|
await this.$confirm('确认删除该预付结算单草稿？', '提示', { type: 'warning' });
|
|
await remove(row.id);
|
|
this.$message.success('删除成功');
|
|
this.loadTable();
|
|
},
|
|
selectedOne(operationName) {
|
|
if (this.selection.length !== 1) {
|
|
this.$message.warning(`${operationName}需选择一条预付结算单`);
|
|
return null;
|
|
}
|
|
return this.selection[0];
|
|
},
|
|
handleAdvanceApplication() {
|
|
if (!this.selection.length) {
|
|
this.$message.warning('请选择需要发起预付申请的预付结算单');
|
|
return;
|
|
}
|
|
if (this.selection.some(row => !row.contractId)) {
|
|
this.$message.warning('所选预付结算单缺少合同ID，无法发起预付申请');
|
|
return;
|
|
}
|
|
const contractIds = new Set(this.selection.map(row => String(row.contractId)));
|
|
if (contractIds.size > 1) {
|
|
this.$message.warning('预付申请只能选择同一合同下的预付结算单');
|
|
return;
|
|
}
|
|
if (
|
|
this.selection.some(
|
|
row =>
|
|
row.approvalStatus !== 'approved' ||
|
|
row.settlementType !== 'payable' ||
|
|
row.formalSettlementNo
|
|
)
|
|
) {
|
|
this.$message.warning('仅审批通过、未转付款结算的应付预付结算单可发起预付');
|
|
return;
|
|
}
|
|
const sourcePreSettlements = this.selection.map(row => ({
|
|
...row,
|
|
preSettlementId: row.preSettlementId || row.id,
|
|
}));
|
|
const transferToken = createSettlementTransfer({
|
|
sourcePreSettlements,
|
|
});
|
|
this.$router.push({
|
|
path: '/payment/payment-application/form',
|
|
query: {
|
|
mode: 'add',
|
|
paymentType: 'progress_advance',
|
|
transferToken,
|
|
preSettlementIds: sourcePreSettlements
|
|
.map(row => row.preSettlementId)
|
|
.filter(Boolean)
|
|
.join(','),
|
|
},
|
|
});
|
|
},
|
|
handleFormalSettlement() {
|
|
if (!this.selection.length) {
|
|
this.$message.warning('请选择需要转付款结算的预付结算单');
|
|
return;
|
|
}
|
|
if (this.selection.some(row => row.approvalStatus !== 'approved')) {
|
|
this.$message.warning('仅审核通过的预付结算单可转付款结算');
|
|
return;
|
|
}
|
|
const hasCompleteProjectIds = this.selection.every(
|
|
row => row.projectId !== undefined && row.projectId !== null && row.projectId !== ''
|
|
);
|
|
const projectKeys = new Set(
|
|
this.selection.map(row =>
|
|
hasCompleteProjectIds ? String(row.projectId) : String(row.projectName || '')
|
|
)
|
|
);
|
|
if (projectKeys.size > 1) {
|
|
this.$message.warning('尾款结算只能选择同一项目下的预付结算单');
|
|
return;
|
|
}
|
|
const transferToken = createSettlementTransfer({
|
|
sourcePreSettlements: this.selection.map(row => ({
|
|
...row,
|
|
preSettlementId: row.preSettlementId || row.id,
|
|
})),
|
|
});
|
|
this.$router.push({
|
|
path: '/settlement/formal-settlement/form',
|
|
query: {
|
|
mode: 'add',
|
|
name: '新增付款结算单',
|
|
settlementType: 'payable',
|
|
listPath: '/settlement/payment-settlement',
|
|
transferToken,
|
|
},
|
|
});
|
|
},
|
|
async openPrintDialog() {
|
|
const row = this.selectedOne('打印结算单');
|
|
if (!row) return;
|
|
if (row.approvalStatus === 'voided') {
|
|
this.$message.warning('已作废的预付结算单不能打印');
|
|
return;
|
|
}
|
|
this.printDialog.row = row;
|
|
this.printDialog.visible = true;
|
|
this.printDialog.loading = true;
|
|
try {
|
|
const { data } = await getPrintTemplates(row.id);
|
|
this.printDialog.templates = data?.data || [];
|
|
this.printDialog.template = this.printDialog.templates[0]?.value || '';
|
|
} finally {
|
|
this.printDialog.loading = false;
|
|
}
|
|
},
|
|
async handlePrintPreview() {
|
|
if (!this.printDialog.template) {
|
|
this.$message.warning('请选择打印模板');
|
|
return;
|
|
}
|
|
const previewWindow = window.open('', '_blank');
|
|
if (!previewWindow) {
|
|
this.$message.warning('浏览器阻止了打印预览窗口，请允许弹出窗口后重试');
|
|
return;
|
|
}
|
|
this.printDialog.loading = true;
|
|
try {
|
|
const { data } = await getDetail(this.printDialog.row.id);
|
|
const detail = data?.data || {};
|
|
previewWindow.document.open();
|
|
previewWindow.document.write(this.buildPrintHtml(detail));
|
|
previewWindow.document.close();
|
|
this.printDialog.visible = false;
|
|
} catch (error) {
|
|
previewWindow.close();
|
|
throw error;
|
|
} finally {
|
|
this.printDialog.loading = false;
|
|
}
|
|
},
|
|
buildPrintHtml(detail) {
|
|
const summaryRows = (detail.summaryFees || [])
|
|
.map(
|
|
(row, index) =>
|
|
`<tr><td>${index + 1}</td><td>${this.escapeHtml(row.feeType)}</td><td>${this.escapeHtml(
|
|
row.feeItem
|
|
)}</td><td>${this.escapeHtml(
|
|
this.formatMoney(row.originalAmount, detail.currency)
|
|
)}</td><td>${this.escapeHtml(
|
|
this.formatMoney(row.adjustAmount, detail.currency)
|
|
)}</td><td>${this.escapeHtml(
|
|
this.formatMoney(row.settlementAmount, detail.currency)
|
|
)}</td></tr>`
|
|
)
|
|
.join('');
|
|
return `<!doctype html><html><head><meta charset="utf-8"><title>${this.escapeHtml(
|
|
detail.preSettlementNo || '预付结算单'
|
|
)}</title><style>body{font-family:Arial,"Microsoft YaHei",sans-serif;color:#222;padding:28px}h1{text-align:center;font-size:24px}.meta{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 24px;margin:24px 0}.meta div{border-bottom:1px solid #ddd;padding:7px 0}table{width:100%;border-collapse:collapse;margin-top:16px}th,td{border:1px solid #bbb;padding:9px;text-align:center;font-size:13px}th{background:#f5f5f5}.actions{text-align:center;margin-top:24px}@media print{.actions{display:none}}</style></head><body><h1>预付结算单</h1><div class="meta"><div>预付结算单号：${this.escapeHtml(
|
|
detail.preSettlementNo
|
|
)}</div><div>项目名称：${this.escapeHtml(
|
|
detail.projectName
|
|
)}</div><div>合同编号：${this.escapeHtml(
|
|
detail.contractNo
|
|
)}</div><div>合同名称：${this.escapeHtml(
|
|
detail.contractName
|
|
)}</div><div>收款方：${this.escapeHtml(detail.payeeName)}</div><div>付款方：${this.escapeHtml(
|
|
detail.payerName
|
|
)}</div><div>结算类型：${
|
|
detail.settlementType === 'receivable' ? '应收' : '应付'
|
|
}</div><div>结算金额：${this.escapeHtml(
|
|
this.formatMoney(detail.settlementAmount, detail.currency)
|
|
)}</div><div>本位币合计：${this.escapeHtml(
|
|
this.formatMoney(detail.localSettlementAmount, detail.localCurrency)
|
|
)}</div><div>汇率日期：${this.escapeHtml(
|
|
detail.exchangeRateDate
|
|
)}</div><div>结算汇率：${this.escapeHtml(
|
|
detail.exchangeRate
|
|
)}</div><div>创建人：${this.escapeHtml(
|
|
detail.createUserName
|
|
)}</div></div><h2>结算合计</h2><table><thead><tr><th>序号</th><th>费用类型</th><th>费用项</th><th>原金额</th><th>调整金额</th><th>结算金额</th></tr></thead><tbody>${summaryRows}</tbody></table><div class="actions"><button onclick="window.print()">打印 / 另存为 PDF</button></div></body></html>`;
|
|
},
|
|
async handleExport() {
|
|
const params = this.buildQuery();
|
|
if (this.selection.length) params.ids = this.selection.map(item => item.id).join(',');
|
|
const { data } = await exportList(params);
|
|
downloadFile(data, `预付结算单${this.$dayjs().format('YYYY-MM-DD HH-mm-ss')}.xlsx`);
|
|
},
|
|
async handleSubmit(row) {
|
|
const previousApprovalStatus = row.approvalStatus || '';
|
|
await submit({ id: row.id });
|
|
await submitMkApprovalFlow({
|
|
bizType: 'pre-settlement',
|
|
bizId: row.id,
|
|
subjectName: row.preSettlementNo || '',
|
|
approvalStatus: previousApprovalStatus,
|
|
mkEnabled: this.mkEnabled,
|
|
});
|
|
this.$message.success('提交成功');
|
|
this.loadTable();
|
|
},
|
|
handleMkAudit(row) {
|
|
if (!row?.id) {
|
|
this.$message.warning('预付结算单ID为空，无法打开审核页');
|
|
return;
|
|
}
|
|
getMKApprovalUrl({ bizId: String(row.id) })
|
|
.then(res => {
|
|
const url = res?.data?.data;
|
|
if (!url) {
|
|
this.$message.error('获取审核跳转地址失败');
|
|
return;
|
|
}
|
|
window.open(url, '_blank');
|
|
})
|
|
.catch(() => {
|
|
this.$message.error('获取审核跳转地址失败');
|
|
});
|
|
},
|
|
async handleApprove(row) {
|
|
await this.$confirm('确认审批通过该预付结算单？', '提示', { type: 'warning' });
|
|
await approve({ id: row.id });
|
|
this.$message.success('审批通过');
|
|
this.loadTable();
|
|
},
|
|
async handleReturn(row) {
|
|
const { value } = await this.$prompt('请输入驳回原因', '审批驳回', {
|
|
inputType: 'textarea',
|
|
inputValidator: value => Boolean(value?.trim()) || '请输入驳回原因',
|
|
});
|
|
await returnBill({ id: row.id, reason: value });
|
|
this.$message.success('已驳回');
|
|
this.loadTable();
|
|
},
|
|
async handleVoid(row) {
|
|
const { value } = await this.$prompt('请输入作废原因', '作废预付结算单', {
|
|
inputType: 'textarea',
|
|
inputValidator: value => Boolean(value?.trim()) || '请输入作废原因',
|
|
});
|
|
await voidBill({ id: row.id, reason: value });
|
|
this.$message.success('作废成功');
|
|
this.loadTable();
|
|
},
|
|
formatMoney(value, currency = 'RMB') {
|
|
if (value === undefined || value === null || value === '') return '-';
|
|
const amount = Number(value);
|
|
if (!Number.isFinite(amount)) return '-';
|
|
return `${amount.toFixed(2)} ${currency || 'RMB'}`;
|
|
},
|
|
formatNumber(value, precision = 2) {
|
|
if (value === undefined || value === null || value === '') return '-';
|
|
const number = Number(value);
|
|
return Number.isFinite(number) ? number.toFixed(precision) : '-';
|
|
},
|
|
moneyCurrency(row, prop) {
|
|
return prop === 'localSettlementAmount' ? row.localCurrency : row.currency;
|
|
},
|
|
displayValue(value) {
|
|
return value === undefined || value === null || value === '' ? '-' : value;
|
|
},
|
|
statusTagType(status) {
|
|
return {
|
|
draft: 'info',
|
|
reviewing: 'warning',
|
|
approved: 'success',
|
|
returned: 'danger',
|
|
voided: 'info',
|
|
}[status];
|
|
},
|
|
escapeHtml(value) {
|
|
return String(value ?? '-')
|
|
.replace(/&/g, '&')
|
|
.replace(/</g, '<')
|
|
.replace(/>/g, '>')
|
|
.replace(/"/g, '"')
|
|
.replace(/'/g, ''');
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.pre-settlement-page {
|
|
&__search {
|
|
padding: 12px 12px 4px;
|
|
background: #fff;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
&__search-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: 8px 24px;
|
|
align-items: start;
|
|
|
|
:deep(.el-form-item) {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
:deep(.el-input),
|
|
:deep(.el-select),
|
|
:deep(.el-date-editor) {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
&__search-actions {
|
|
grid-column: 1 / -1;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
&__table-panel {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
&__toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
min-height: 56px;
|
|
//padding: 12px;
|
|
}
|
|
|
|
&__toolbar-left,
|
|
&__links {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
&__links {
|
|
justify-content: center;
|
|
}
|
|
|
|
&__pagination {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
padding: 12px;
|
|
}
|
|
|
|
&__print-form {
|
|
:deep(.el-select) {
|
|
width: 320px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 1200px) {
|
|
.pre-settlement-page__search-grid {
|
|
grid-template-columns: repeat(2, minmax(220px, 1fr));
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 760px) {
|
|
.pre-settlement-page__search-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
:deep(.pre-settlement-page .el-table) {
|
|
--el-table-border-color: #eff1f7;
|
|
background: #fff;
|
|
}
|
|
|
|
:deep(.pre-settlement-page .el-table__body tr:nth-child(even) > td.el-table__cell),
|
|
:deep(.pre-settlement-page .el-table__body tr:nth-child(even) > td.el-table-fixed-column--left),
|
|
:deep(.pre-settlement-page .el-table__body tr:nth-child(even) > td.el-table-fixed-column--right) {
|
|
background: #fafafa;
|
|
}
|
|
|
|
:deep(.pre-settlement-page.basic-container .basic-container__card > .el-card__body) {
|
|
padding: 0;
|
|
}
|
|
</style>
|