791 lines
26 KiB
Vue
791 lines
26 KiB
Vue
<template>
|
|
<basic-container class="pre-settlement-page">
|
|
<section 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>
|
|
<div class="pre-settlement-page__toolbar-right">
|
|
<el-tooltip content="刷新" placement="top">
|
|
<el-button :icon="Refresh" text @click="loadTable" />
|
|
</el-tooltip>
|
|
</div>
|
|
</div>
|
|
|
|
<el-table
|
|
v-loading="loading"
|
|
:data="rows"
|
|
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 tableColumns"
|
|
: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_view') && row.approvalStatus !== 'draft'"
|
|
type="primary"
|
|
@click="openFlow(row)"
|
|
>
|
|
流程
|
|
</el-link>
|
|
<el-link
|
|
v-if="hasPermission('pre_settlement_approve') && row.approvalStatus === 'reviewing'"
|
|
type="primary"
|
|
@click="handleApprove(row)"
|
|
>
|
|
通过
|
|
</el-link>
|
|
<el-link
|
|
v-if="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>
|
|
|
|
<el-dialog v-model="flowDialog.visible" title="审批流程" width="620px" append-to-body>
|
|
<el-descriptions :column="1" border>
|
|
<el-descriptions-item label="预结算单号">
|
|
{{ flowDialog.row.preSettlementNo || '-' }}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="审核状态">
|
|
{{ flowDialog.row.approvalStatusName || '-' }}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="当前节点">
|
|
{{ flowDialog.row.currentNode || '-' }}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="当前处理人">
|
|
{{ flowDialog.row.currentProcessor || '-' }}
|
|
</el-descriptions-item>
|
|
</el-descriptions>
|
|
</el-dialog>
|
|
</basic-container>
|
|
</template>
|
|
|
|
<script>
|
|
import { ArrowDown, ArrowUp, Refresh } from '@element-plus/icons-vue';
|
|
import { mapGetters } from 'vuex';
|
|
import {
|
|
approve,
|
|
exportList,
|
|
getDetail,
|
|
getList,
|
|
getPrintTemplates,
|
|
remove,
|
|
returnBill,
|
|
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 PreSettlementEditor from './components/pre-settlement-editor.vue';
|
|
|
|
const emptyQuery = () => ({
|
|
preSettlementNo: '',
|
|
advanceNo: '',
|
|
projectName: '',
|
|
deptName: [],
|
|
contractName: '',
|
|
contractNo: '',
|
|
payeeName: '',
|
|
payerName: '',
|
|
createDateRange: [],
|
|
approvalStatus: '',
|
|
});
|
|
|
|
export default {
|
|
name: 'PreSettlement',
|
|
components: { PreSettlementEditor },
|
|
mixins: [organizationSearch],
|
|
data() {
|
|
return {
|
|
ArrowDown,
|
|
ArrowUp,
|
|
Refresh,
|
|
loading: false,
|
|
query: emptyQuery(),
|
|
searchFields: preSettlementSearchFields,
|
|
searchExpanded: false,
|
|
tableColumns: preSettlementTableColumns,
|
|
rows: [],
|
|
selection: [],
|
|
page: {
|
|
current: 1,
|
|
size: 10,
|
|
total: 0,
|
|
},
|
|
editor: {
|
|
visible: false,
|
|
id: '',
|
|
readonly: false,
|
|
},
|
|
printDialog: {
|
|
visible: false,
|
|
loading: false,
|
|
row: {},
|
|
templates: [],
|
|
template: '',
|
|
},
|
|
flowDialog: {
|
|
visible: false,
|
|
row: {},
|
|
},
|
|
};
|
|
},
|
|
computed: {
|
|
...mapGetters(['permission', 'userInfo']),
|
|
isAdmin() {
|
|
const authority = this.userInfo?.authority;
|
|
return Array.isArray(authority)
|
|
? authority.includes('admin')
|
|
: String(authority || '').includes('admin');
|
|
},
|
|
visibleSearchFields() {
|
|
return this.searchExpanded ? this.searchFields : this.searchFields.slice(0, 4);
|
|
},
|
|
},
|
|
watch: {
|
|
'$route.query.detailNo'(detailNo) {
|
|
if (detailNo) this.openRouteDetail(detailNo);
|
|
},
|
|
},
|
|
created() {
|
|
this.loadOrganizationOptions();
|
|
this.loadTable();
|
|
this.openRouteDetail();
|
|
},
|
|
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',
|
|
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: '新增正式结算', 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 { data } = await exportList(this.buildQuery());
|
|
downloadFile(data, `预结算单${this.$dayjs().format('YYYY-MM-DD HH-mm-ss')}.xlsx`);
|
|
},
|
|
openFlow(row) {
|
|
this.flowDialog.row = row;
|
|
this.flowDialog.visible = true;
|
|
},
|
|
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,
|
|
&__toolbar-right,
|
|
&__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>
|