<template>
|
<el-dialog
|
v-model="visible"
|
title="费用详情"
|
width="1000px"
|
destroy-on-close
|
@closed="handleClosed"
|
>
|
<div class="modal-content">
|
<section class="detail-section">
|
<h3 class="section-title">应收费用明细</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="来源系统">{{ detailData.sourceSystem }}</el-descriptions-item>
|
|
<el-descriptions-item label="业务板块">{{ detailData.businessSector }}</el-descriptions-item>
|
<el-descriptions-item label="单据类型">{{ detailData.documentType }}</el-descriptions-item>
|
<el-descriptions-item label="单据编号">{{ detailData.documentNo }}</el-descriptions-item>
|
|
<el-descriptions-item label="客户名称">{{ detailData.customerName }}</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="应收确认时间">{{ detailData.receivableConfirmTime }}</el-descriptions-item>
|
<el-descriptions-item label="应收金额" :span="2">
|
<span class="amount-text">{{ detailData.receivableAmount }}</span>
|
</el-descriptions-item>
|
</el-descriptions>
|
</section>
|
|
<section class="table-section">
|
<h3 class="section-title" style="margin-top: 10px;" >费用明细</h3>
|
<avue-crud
|
:option="tableOption"
|
:data="detailData.feeList || []"
|
>
|
</avue-crud>
|
</section>
|
</div>
|
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="visible = false">关 闭</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script setup lang="ts">
|
import { ref, reactive } from 'vue';
|
|
const visible = ref(false);
|
const detailData = ref<any>({});
|
|
// 表格配置
|
const tableOption = {
|
tip: false,
|
header: false, // 隐藏头部按钮
|
addBtn: false,
|
editBtn: false,
|
delBtn: false,
|
menu: false, // 隐藏操作栏
|
column: [
|
{ label: '费用类型', prop: 'feeType' },
|
{ label: '费用名称', prop: 'feeName' },
|
{ label: '计费单位', prop: 'unit' },
|
{ label: '计费单价', prop: 'price' },
|
{ label: '计费金额', prop: 'totalAmount' },
|
{ label: '实收金额', prop: 'actualAmount' },
|
{ label: '币制', prop: 'currency' },
|
{ label: '费用登记时间', prop: 'createTime', width: 160 },
|
]
|
};
|
|
// 暴露给父组件的方法
|
const open = (data: any) => {
|
detailData.value = data || {};
|
visible.value = true;
|
};
|
|
const handleClosed = () => {
|
detailData.value = {};
|
};
|
|
const handleConfirm = () => {
|
visible.value = false;
|
};
|
|
defineExpose({ open });
|
</script>
|
|
<style scoped>
|
.modal-content {
|
padding: 10px;
|
}
|
.section-title {
|
font-size: 16px;
|
font-weight: bold;
|
margin: 20px 0 10px 0;
|
color: #333;
|
}
|
.section-title:first-child {
|
margin-top: 0;
|
}
|
.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;
|
width: 100px;
|
}
|
</style>
|
