<template>
|
<el-dialog v-model="visible" :title="type === 'receivable' ? '应收账单费用明细' : '应付账单费用明细'" width="1300px"
|
destroy-on-close>
|
<div class="modal-content">
|
<section class="info-section">
|
<el-descriptions title="账单信息" :column="3" border class="mb-5">
|
<el-descriptions-item label="系统编号">{{ billInfo.systemNo }}</el-descriptions-item>
|
<el-descriptions-item label="账单名称">{{ billInfo.billName }}</el-descriptions-item>
|
<el-descriptions-item v-if="type == 'receivable'" label="客户名称">{{ billInfo.customerName
|
}}</el-descriptions-item>
|
<el-descriptions-item v-if="type == 'payable'" label="供应商名称">{{ billInfo.supplierName
|
}}</el-descriptions-item>
|
<el-descriptions-item label="单据数量">{{ billInfo.documentCount }}</el-descriptions-item>
|
<el-descriptions-item label="应结算金额">
|
<span class="text-bold">{{ billInfo.totalAmount }}</span>
|
</el-descriptions-item>
|
<el-descriptions-item label="币制">{{ billInfo.currency }}</el-descriptions-item>
|
|
<el-descriptions-item label="减免金额">{{ billInfo.discountAmount }}</el-descriptions-item>
|
<el-descriptions-item :label="type == 'receivable' ? '已收金额' : '已付金额'">
|
{{ billInfo.receivedAmount }}
|
</el-descriptions-item>
|
<el-descriptions-item :label="type == 'receivable' ? '待收金额' : '待付金额'">
|
<span class="text-danger">{{ billInfo.pendingAmount }}</span>
|
</el-descriptions-item>
|
|
<el-descriptions-item label="周期类型">{{ billInfo.periodType }}</el-descriptions-item>
|
<el-descriptions-item label="业务期间">
|
<span v-if="billInfo.businessStartDate">{{ billInfo.businessStartDate }}</span>
|
<span v-if="billInfo.businessStartDate && billInfo.businessEndDate"> ~ </span>
|
<span v-if="billInfo.businessEndDate">{{ billInfo.businessEndDate }}</span>
|
</el-descriptions-item>
|
<el-descriptions-item label="账单周期">
|
<span v-if="billInfo.billingStartDate">{{ billInfo.billingStartDate }}</span>
|
<span v-if="billInfo.billingStartDate && billInfo.billingEndDate"> ~ </span>
|
<span v-if="billInfo.billingEndDate">{{ billInfo.billingEndDate }}</span>
|
</el-descriptions-item>
|
|
<el-descriptions-item label="账单生成日期">{{ billInfo.billGenerateDate }}</el-descriptions-item>
|
<el-descriptions-item label="账单发送日期">{{ billInfo.billSendDate }}</el-descriptions-item>
|
<el-descriptions-item label="账单到期日期">{{ billInfo.billDueDate }}</el-descriptions-item>
|
</el-descriptions>
|
</section>
|
|
<section class="table-section">
|
<h3 class="section-title">费用明细</h3>
|
|
<el-table :data="mainTableData" border stripe style="width: 100%" v-loading="loading">
|
<el-table-column prop="systemNo" label="系统编号" width="160" align="center" />
|
<el-table-column prop="sourceSystem" label="来源系统" align="center">
|
<template #default="scope">
|
{{ dictFormat(sys_system, scope.row.sourceSystem) }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="businessSector" label="业务板块" align="center">
|
<template #default="scope">
|
{{ dictFormat(sys_business, scope.row.businessSector) }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="documentType" label="单据类型" align="center">
|
<template #default="scope">
|
{{ dictFormat(sys_business, scope.row.documentType) }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="documentNo" label="单据编号" width="160" align="center" />
|
|
<el-table-column v-if="type == 'receivable'" prop="customerName" label="客户名称" min-width="150"
|
align="center" />
|
<el-table-column v-if="type == 'payable'" prop="supplierName" label="供应商名称" min-width="150"
|
align="center" />
|
<el-table-column prop="projectName" label="项目名称" align="center" />
|
<el-table-column v-if="type == 'receivable'" label="'应收金额" align="center">
|
<template #default="scope">
|
<div v-html="formatAmountStr(scope.row.receivableAmountStr)"></div>
|
</template>
|
</el-table-column>
|
<el-table-column v-if="type == 'payable'" label="应付金额" align="center">
|
<template #default="scope">
|
<div v-html="formatAmountStr(scope.row.payableAmountStr)"></div>
|
</template>
|
</el-table-column>
|
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
<template #default="scope">
|
<el-button type="text" @click="handleExamine(scope.row)">查看
|
</el-button>
|
</template>
|
|
</el-table-column>
|
<!-- <el-table-column prop="currency" label="币制" align="center" /> -->
|
</el-table>
|
|
<pagination v-show="pageF.total > 0" :total="pageF.total" v-model:page="queryParams.pageNum"
|
v-model:limit="queryParams.pageSize" @pagination="getDataList" />
|
</section>
|
</div>
|
|
<template #footer>
|
<el-button @click="visible = false">关 闭</el-button>
|
</template>
|
</el-dialog>
|
<DetailModal ref="detailModalRef" />
|
</template>
|
|
<script setup lang="ts">
|
import { ref, reactive } from 'vue';
|
import { getReceivableBillManagement } from "@/api/cwgl/receivableBillManagement";
|
import { listReceivableFeeManagement, getReceivableFeeManagement } from "@/api/cwgl/receivableFeeManagement";
|
import useCurrentInstance from "@/utils/useCurrentInstance";
|
import DetailModal from '@/components/DetailModal/index.vue';
|
|
import {
|
listPayableFeeManagement, getPayableFeeManagement
|
} from "@/api/cwgl/payableFeeManagement";
|
import { getPayableBillManagement, } from "@/api/cwgl/payableBillManagement";
|
|
const { proxy } = useCurrentInstance()
|
const { sys_system, sys_business, sys_receipts, sys_supplier, sys_whether_type, sys_currency } = proxy.useDict(
|
'sys_system',
|
'sys_business',
|
'sys_receipts',
|
'sys_supplier',
|
'sys_whether_type', 'sys_currency'
|
)
|
const dictFormat = (dict: any, value: any) => {
|
return proxy.selectDictLabel(dict, value);
|
}
|
const props = defineProps<{
|
type: 'receivable' | 'payable'
|
}>();
|
console.log(props.type);
|
|
const visible = ref(false);
|
const loading = ref(false);
|
const billInfo = ref<any>({});
|
const mainTableData = ref([]);
|
|
// 分页总数对象
|
const pageF = reactive({
|
total: 0
|
});
|
|
// 查询参数对象（对应 pagination 组件的绑定）
|
const queryParams = reactive({
|
pageNum: 1,
|
pageSize: 10,
|
relatedBillNo: ''
|
});
|
|
/** 获取表格数据列表 */
|
const getDataList = () => {
|
if (!queryParams.relatedBillNo) return;
|
loading.value = true;
|
if (props.type === 'receivable') {
|
listReceivableFeeManagement(queryParams).then(res => {
|
if (res.code === 200) {
|
mainTableData.value = res.rows || [];
|
pageF.total = res.total || 0;
|
}
|
}).finally(() => {
|
loading.value = false;
|
});
|
} else {
|
listPayableFeeManagement(queryParams).then(res => {
|
if (res.code === 200) {
|
mainTableData.value = res.rows || [];
|
console.log(mainTableData.value);
|
|
pageF.total = res.total || 0;
|
}
|
}).finally(() => {
|
loading.value = false;
|
});
|
}
|
};
|
|
/** 打开弹窗主入口 */
|
const open = (data: any) => {
|
// 重置分页
|
queryParams.pageNum = 1;
|
queryParams.relatedBillNo = '';
|
mainTableData.value = [];
|
pageF.total = 0;
|
// 获取账单详情
|
fetchBillDetail(data.id);
|
};
|
|
/** 获取账单顶部详情信息 */
|
const fetchBillDetail = (id: string | number) => {
|
if (props.type === 'receivable') {
|
|
getReceivableBillManagement(id).then((response) => {
|
if (response.code == 200 && response.data) {
|
billInfo.value = response.data;
|
queryParams.relatedBillNo = response.data.systemNo;
|
visible.value = true;
|
// 详情拿到后，加载表格
|
getDataList();
|
}
|
});
|
} else {
|
getPayableBillManagement(id).then((response) => {
|
if (response.code == 200 && response.data) {
|
billInfo.value = response.data;
|
queryParams.relatedBillNo = response.data.systemNo;
|
visible.value = true;
|
// 详情拿到后，加载表格
|
getDataList();
|
}
|
});
|
}
|
};
|
const detailModalRef = ref(null);
|
const handleExamine = (row) => {
|
if (props.type === 'receivable') {
|
getReceivableFeeManagement(row.id).then((res) => {
|
if (res.code === 200) {
|
detailModalRef.value.open(res.data);
|
}
|
});
|
} else {
|
getPayableFeeManagement(row.id).then((res) => {
|
if (res.code === 200) {
|
detailModalRef.value.open(res.data);
|
}
|
});
|
}
|
|
|
};
|
/**
|
* 将金额字符串中的“币”后面加上换行
|
*
|
*/
|
const formatAmountStr = (str: string) => {
|
if (!str) return '';
|
// 正则解释：找到“港币”或“人民币”，并在其后加上换行符
|
// 如果币种较多，可以统一匹配 "币 "（带空格的币）
|
return str.replace(/(港币|人民币)\s+/g, '$1<br/>');
|
};
|
defineExpose({ open });
|
</script>
|
|
<style scoped>
|
.mb-5 {
|
margin-bottom: 20px;
|
}
|
|
.section-title {
|
font-size: 16px;
|
font-weight: bold;
|
margin: 15px 0;
|
padding-left: 10px;
|
border-left: 4px solid #409eff;
|
}
|
|
.text-bold {
|
font-weight: bold;
|
}
|
|
.text-danger {
|
color: #f56c6c;
|
font-weight: bold;
|
}
|
|
/* 深度适配样式 */
|
:deep(.el-descriptions__label) {
|
width: 140px;
|
background-color: #f5f7fa !important;
|
}
|
|
::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>
|
