803 lines
26 KiB
Vue
803 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="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
|
|
disabled
|
|
@click="openAdvanceDialog"
|
|
>
|
|
预付申请
|
|
</el-button>
|
|
<el-button
|
|
v-if="hasPermission('pre_settlement_formal')"
|
|
type="primary"
|
|
plain
|
|
disabled
|
|
@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="130" 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
|
|
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 {
|
|
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.$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 };
|
|
},
|
|
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.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;
|
|
}
|
|
|
|
&__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>
|