<template>
|
<el-dialog v-model="visible" :title="type === 'receivable' ? '应收费用详情' : '应付费用详情'" width="1000px" destroy-on-close
|
@closed="handleClosed">
|
<div class="modal-content">
|
<section class="detail-section">
|
<h3 class="section-title">{{ type === 'receivable' ? '应收费用明细' : '应付费用明细' }}</h3>
|
|
<el-descriptions :column="3" border class="margin-top">
|
<el-descriptions-item label="系统编号">{{ detailData.systemNo }}</el-descriptions-item>
|
<el-descriptions-item label="关联账单编号">{{ detailData.relatedBillNo }}</el-descriptions-item>
|
<el-descriptions-item label="来源系统">{{ dictFormat(sys_system, detailData.sourceSystem)
|
}}</el-descriptions-item>
|
|
<el-descriptions-item label="业务板块">{{ dictFormat(sys_business, detailData.businessSector)
|
}}</el-descriptions-item>
|
<el-descriptions-item label="单据类型">{{ dictFormat(sys_receipts, detailData.documentType)
|
}}</el-descriptions-item>
|
<el-descriptions-item label="单据编号">{{ detailData.documentNo }}</el-descriptions-item>
|
|
<el-descriptions-item :label="type === 'receivable' ? '客户名称' : '供应商名称'">
|
{{ type === 'receivable' ? detailData.customerName : detailData.supplierName }}
|
</el-descriptions-item>
|
|
<el-descriptions-item label="项目名称">{{ detailData.projectName }}</el-descriptions-item>
|
<el-descriptions-item label="业务发生时间">{{ detailData.businessTime }}</el-descriptions-item>
|
|
<el-descriptions-item :label="type === 'receivable' ? '应收确认时间' : '应付确认时间'">
|
{{ type === 'receivable' ? detailData.receivableConfirmTime : detailData.payableConfirmTime }}
|
</el-descriptions-item>
|
|
<!-- <el-descriptions-item :label="type === 'receivable' ? '应收金额' : '应付金额'" :span="2">
|
<span class="amount-text">{{ detailData.receivableAmount || detailData.payableAmount }}</span>
|
</el-descriptions-item> -->
|
|
<el-descriptions-item :label="type === 'receivable' ? '应收金额' : '应付金额'" :span="2">
|
<span>{{ type === 'receivable' ? detailData.receivableAmountStr : detailData.payableAmountStr}}</span>
|
</el-descriptions-item>
|
</el-descriptions>
|
</section>
|
|
<section class="table-section">
|
<h3 class="section-title" style="margin-top: 20px;">费用明细</h3>
|
<el-table :data="detailData.feeList || []" border stripe style="width: 100%"
|
:header-cell-style="{ backgroundColor: '#f5f7fa', color: '#606266' }">
|
<el-table-column label="费用类型" align="center">
|
<template #default="scope">
|
{{ dictFormat(fee_type, scope.row.feeType) }}
|
</template>
|
</el-table-column>
|
|
<el-table-column label="费用名称" prop="feeName" align="center" />
|
|
<el-table-column label="计费单位" align="center">
|
<template #default="scope">
|
{{ dictFormat(sys_unit, scope.row.billingUnit) }}
|
</template>
|
</el-table-column>
|
|
<el-table-column label="计费单价" prop="unitPrice" align="center" />
|
<el-table-column label="计费金额" prop="billingAmount" align="center" />
|
|
<el-table-column :label="type === 'receivable' ? '实收金额' : '实付金额'" prop="actualAmount" align="center" />
|
|
<el-table-column label="币制" align="center" prop="currency">
|
<template #default="scope">
|
{{ dictFormat(sys_currency, scope.row.currency) }}
|
</template>
|
</el-table-column>
|
|
<el-table-column label="费用登记时间" prop="createTime" width="160" align="center" />
|
</el-table>
|
</section>
|
</div>
|
|
<template #footer>
|
<el-button @click="visible = false">关 闭</el-button>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script setup lang="ts">
|
import { ref } from 'vue';
|
import useCurrentInstance from "@/utils/useCurrentInstance";
|
|
const { proxy } = useCurrentInstance();
|
|
const {
|
sys_system,
|
sys_business,
|
sys_receipts,
|
sys_currency,
|
fee_type,
|
sys_unit
|
} = proxy.useDict('sys_system', 'sys_business', 'sys_receipts', 'sys_currency', 'fee_type', 'sys_unit');
|
|
const dictFormat = (dict: any, value: any) => {
|
return proxy.selectDictLabel(dict, value);
|
};
|
|
const visible = ref(false);
|
const detailData = ref<any>({});
|
const type = ref<'receivable' | 'payable'>('receivable'); // 标记是应收还是应付
|
|
/**
|
* 暴露给父组件的方法
|
* @param data 数据对象
|
* @param mode 模式：'receivable' (应收) 或 'payable' (应付)
|
*/
|
const open = (data: any, mode: 'receivable' | 'payable' = 'receivable') => {
|
type.value = mode;
|
detailData.value = data || {};
|
|
// 统一明细列表的取值逻辑（根据后端字段名调整）
|
if (data) {
|
detailData.value.feeList = data.receivableFeeDetailList || data.payableFeeDetailList || [];
|
}
|
|
visible.value = true;
|
};
|
|
const handleClosed = () => {
|
detailData.value = {};
|
};
|
|
defineExpose({ open });
|
</script>
|
|
<style scoped>
|
.modal-content {
|
padding: 10px;
|
}
|
|
.section-title {
|
font-size: 16px;
|
font-weight: bold;
|
margin: 10px 0;
|
color: #333;
|
padding-left: 10px;
|
border-left: 4px solid #409eff;
|
}
|
|
.amount-text {
|
color: #f56c6c;
|
font-weight: bold;
|
}
|
|
:deep(.el-descriptions__label) {
|
width: 120px;
|
background-color: #f5f7fa;
|
}
|
|
::v-deep .el-descriptions__body .el-descriptions__table.is-bordered .el-descriptions__cell {
|
border: var(--el-descriptions-table-border);
|
padding: 8px 11px;
|
}
|
|
::v-deep .el-descriptions__body .el-descriptions__table.is-bordered .el-descriptions__cell {
|
border: var(--el-descriptions-table-border);
|
padding: 8px 11px;
|
width: 200px;
|
}
|
</style>
|
