njzscloud-dispose-web/src/pages/fin/bill/BillDetail.vue

67 lines
2.1 KiB
Vue

<template>
<ADetailPanel
ref="detailPanel"
v-bind="detailPanelProps">
<template #default="detailData">
<ElDescriptions border title="对账单">
<ElDescriptionsItem label="客户名称">
{{ detailData.customerId }}
</ElDescriptionsItem>
<ElDescriptionsItem label="企业名称">
{{ detailData.orgId }}
</ElDescriptionsItem>
<ElDescriptionsItem label="账户类型">
{{ detailData.accountType }}
</ElDescriptionsItem>
<ElDescriptionsItem label="账期">
{{ detailData.billPeriod }}
</ElDescriptionsItem>
<ElDescriptionsItem label="账单开始时间">
{{ detailData.startTime }}
</ElDescriptionsItem>
<ElDescriptionsItem label="账单结束时间">
{{ detailData.endTime }}
</ElDescriptionsItem>
<ElDescriptionsItem label="订单数">
{{ detailData.orderCount }}
</ElDescriptionsItem>
<ElDescriptionsItem label="总车数">
{{ detailData.carCount }}
</ElDescriptionsItem>
<ElDescriptionsItem label="总质量">
{{ detailData.totalWeight }}
</ElDescriptionsItem>
<ElDescriptionsItem label="优惠金额">
{{ detailData.discountMoney }}
</ElDescriptionsItem>
<ElDescriptionsItem label="账单金额">
{{ detailData.totalMoney }}
</ElDescriptionsItem>
<ElDescriptionsItem label="备注">
{{ detailData.memo }}
</ElDescriptionsItem>
</ElDescriptions>
</template>
</ADetailPanel>
</template>
<script lang="ts" setup>
import BillApi from '@/pages/fin/bill/bill-api.ts'
import ADetailPanel, {
type ADetailPanelInstance,
buildDetailPanelProps,
} from '@/components/a-detail-panel/ADetailPanel.tsx'
const detailPanelIns = useTemplateRef<ADetailPanelInstance<BillTypes.SearchBillResult>>('detailPanel')
const detailPanelProps = buildDetailPanelProps<BillTypes.SearchBillResult>({
title: '对账单详情',
detailsLoader: BillApi.detail,
})
defineExpose({
open(data: BillTypes.SearchBillResult) {
detailPanelIns.value?.open(data)
},
})
</script>