1、新增结算模块
2、调整业务模块 3、调整客商模块
This commit is contained in:
@@ -0,0 +1,805 @@
|
||||
<template>
|
||||
<basic-container class="pre-settlement-page">
|
||||
<section class="pre-settlement-page__search">
|
||||
<el-form :model="query" label-position="right" label-width="160px" @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-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
|
||||
@click="openAdvanceDialog"
|
||||
>
|
||||
预付申请
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="hasPermission('pre_settlement_formal')"
|
||||
type="primary"
|
||||
plain
|
||||
@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)">
|
||||
{{ 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>{{ displayValue(row[column.prop]) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="320" 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="advanceDialog.visible" title="预付申请" width="520px" append-to-body>
|
||||
<el-form
|
||||
ref="advanceFormRef"
|
||||
:model="advanceForm"
|
||||
:rules="advanceRules"
|
||||
label-position="right"
|
||||
label-width="auto"
|
||||
>
|
||||
<el-form-item label="预结算单号">
|
||||
<span>{{ advanceDialog.row.preSettlementNo || '-' }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="结算金额">
|
||||
<span>
|
||||
{{ formatMoney(advanceDialog.row.settlementAmount, advanceDialog.row.currency) }}
|
||||
</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="已申请预付金额">
|
||||
<span>
|
||||
{{ formatMoney(advanceDialog.row.advanceAppliedAmount, advanceDialog.row.currency) }}
|
||||
</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="申请预付金额" prop="appliedAmount">
|
||||
<el-input-number
|
||||
v-model="advanceForm.appliedAmount"
|
||||
:min="0"
|
||||
:max="advanceAvailableAmount"
|
||||
:precision="2"
|
||||
:controls="false"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="金蝶预付单号">
|
||||
<el-input
|
||||
v-model="advanceForm.kingdeeAdvanceNo"
|
||||
maxlength="100"
|
||||
placeholder="外部系统回写时可填写"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="advanceDialog.visible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="advanceDialog.submitting" @click="submitAdvance">
|
||||
提交
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog v-model="printDialog.visible" title="打印" width="620px" append-to-body>
|
||||
<div class="dialog-section-title">选择打印模板</div>
|
||||
<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>
|
||||
<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 {
|
||||
applyAdvance,
|
||||
approve,
|
||||
exportList,
|
||||
formalSettlement,
|
||||
getDetail,
|
||||
getList,
|
||||
getPrintTemplates,
|
||||
remove,
|
||||
returnBill,
|
||||
voidBill,
|
||||
} from '@/api/settlement/preSettlement';
|
||||
import { preSettlementSearchFields } from '@/option/settlement/preSettlementSearch';
|
||||
import { preSettlementTableColumns } from '@/option/settlement/preSettlementTable';
|
||||
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 },
|
||||
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,
|
||||
},
|
||||
advanceDialog: {
|
||||
visible: false,
|
||||
submitting: false,
|
||||
row: {},
|
||||
},
|
||||
advanceForm: {
|
||||
appliedAmount: null,
|
||||
kingdeeAdvanceNo: '',
|
||||
},
|
||||
advanceRules: {
|
||||
appliedAmount: [
|
||||
{ required: true, message: '请输入申请预付金额', trigger: 'blur' },
|
||||
{
|
||||
validator: (_rule, value, callback) => {
|
||||
if (!value || Number(value) <= 0) {
|
||||
callback(new Error('申请预付金额必须大于0'));
|
||||
return;
|
||||
}
|
||||
if (Number(value) > this.advanceAvailableAmount) {
|
||||
callback(new Error('申请预付金额不能超过剩余可申请金额'));
|
||||
return;
|
||||
}
|
||||
callback();
|
||||
},
|
||||
trigger: ['blur', 'change'],
|
||||
},
|
||||
],
|
||||
},
|
||||
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);
|
||||
},
|
||||
advanceAvailableAmount() {
|
||||
return Math.max(
|
||||
Number(this.advanceDialog.row.settlementAmount || 0) -
|
||||
Number(this.advanceDialog.row.advanceAppliedAmount || 0),
|
||||
0
|
||||
);
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.loadTable();
|
||||
},
|
||||
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 || [];
|
||||
return {
|
||||
...this.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.editor = { visible: true, id: '', readonly: false };
|
||||
},
|
||||
openEdit(row) {
|
||||
this.editor = { visible: true, id: row.id, readonly: false };
|
||||
},
|
||||
openView(row) {
|
||||
this.editor = { visible: true, id: row.id, readonly: true };
|
||||
},
|
||||
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];
|
||||
},
|
||||
openAdvanceDialog() {
|
||||
const row = this.selectedOne('预付申请');
|
||||
if (!row) return;
|
||||
if (
|
||||
row.approvalStatus !== 'approved' ||
|
||||
row.settlementType !== 'payable' ||
|
||||
row.formalSettlementNo
|
||||
) {
|
||||
this.$message.warning('仅审批通过、未转正式结算的应付预结算单可发起预付');
|
||||
return;
|
||||
}
|
||||
this.advanceDialog.row = row;
|
||||
this.advanceDialog.visible = true;
|
||||
this.advanceForm = { appliedAmount: null, kingdeeAdvanceNo: '' };
|
||||
this.$nextTick(() => this.$refs.advanceFormRef?.clearValidate());
|
||||
},
|
||||
async submitAdvance() {
|
||||
await this.$refs.advanceFormRef?.validate();
|
||||
this.advanceDialog.submitting = true;
|
||||
try {
|
||||
await applyAdvance({
|
||||
preSettlementId: this.advanceDialog.row.id,
|
||||
appliedAmount: this.advanceForm.appliedAmount,
|
||||
kingdeeAdvanceNo: this.advanceForm.kingdeeAdvanceNo,
|
||||
});
|
||||
this.$message.success('预付申请提交成功');
|
||||
this.advanceDialog.visible = false;
|
||||
this.loadTable();
|
||||
} finally {
|
||||
this.advanceDialog.submitting = false;
|
||||
}
|
||||
},
|
||||
async handleFormalSettlement() {
|
||||
const row = this.selectedOne('尾款结算');
|
||||
if (!row) return;
|
||||
if (
|
||||
row.approvalStatus !== 'approved' ||
|
||||
row.settlementType !== 'payable' ||
|
||||
row.formalSettlementNo
|
||||
) {
|
||||
this.$message.warning('仅审批通过、未转正式结算的应付预结算单可发起尾款结算');
|
||||
return;
|
||||
}
|
||||
await this.$confirm('转正式结算后无法发起预付，确认继续？', '提示', {
|
||||
type: 'warning',
|
||||
});
|
||||
const { data } = await formalSettlement(row.id);
|
||||
this.$message.success(`正式结算单已生成：${data?.data || ''}`);
|
||||
this.loadTable();
|
||||
},
|
||||
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.06);
|
||||
}
|
||||
|
||||
&__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;
|
||||
}
|
||||
|
||||
&__pagination {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
&__print-form {
|
||||
margin-top: 20px;
|
||||
|
||||
: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;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 22px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
|
||||
&::before {
|
||||
width: 4px;
|
||||
height: 18px;
|
||||
margin-right: 8px;
|
||||
background: #409eff;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
: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>
|
||||
Reference in New Issue
Block a user