92 lines
3.3 KiB
Vue
92 lines
3.3 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import {ref, shallowRef} from 'vue';
|
||
|
|
import {useVbenModal} from '@vben/common-ui';
|
||
|
|
import {Descriptions, DescriptionsItem} from 'ant-design-vue';
|
||
|
|
import dayjs from 'dayjs';
|
||
|
|
import duration from 'dayjs/plugin/duration';
|
||
|
|
import relativeTime from 'dayjs/plugin/relativeTime';
|
||
|
|
import {renderDict} from "#/utils/render";
|
||
|
|
|
||
|
|
dayjs.extend(duration);
|
||
|
|
dayjs.extend(relativeTime);
|
||
|
|
import {houseChargeInfo} from "#/api/property/costManagement/houseCharge";
|
||
|
|
import type {HouseChargeVO} from "#/api/property/costManagement/houseCharge/model";
|
||
|
|
import type {RoomVO} from "#/api/property/room/model";
|
||
|
|
import type {CostItemSettingVO} from "#/api/property/costManagement/costItemSetting/model";
|
||
|
|
|
||
|
|
|
||
|
|
const [BasicModal, modalApi] = useVbenModal({
|
||
|
|
onOpenChange: handleOpenChange,
|
||
|
|
onClosed() {
|
||
|
|
houseChargeDetail.value = null;
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
const houseChargeDetail = shallowRef<null | HouseChargeVO>(null);
|
||
|
|
const room=ref<RoomVO>();
|
||
|
|
const costItem=ref<CostItemSettingVO>();
|
||
|
|
async function handleOpenChange(open: boolean) {
|
||
|
|
if (!open) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
modalApi.modalLoading(true);
|
||
|
|
const {id} = modalApi.getData() as { id: number | string };
|
||
|
|
houseChargeDetail.value = await houseChargeInfo(id);
|
||
|
|
if(houseChargeDetail.value){
|
||
|
|
room.value=houseChargeDetail.value.roomVo
|
||
|
|
costItem.value=houseChargeDetail.value.costItemsVo
|
||
|
|
}
|
||
|
|
modalApi.modalLoading(false);
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<BasicModal :footer="false" :fullscreen-button="false" title="房屋收费详情" class="w-[70%]">
|
||
|
|
<Descriptions v-if="houseChargeDetail" size="small" :column="2" bordered
|
||
|
|
:labelStyle="{width:'100px'}">
|
||
|
|
<DescriptionsItem label="费用编号">
|
||
|
|
{{ costItem.id }}
|
||
|
|
</DescriptionsItem>
|
||
|
|
<DescriptionsItem label="费用项目">
|
||
|
|
{{ costItem.chargeItem }}
|
||
|
|
</DescriptionsItem>
|
||
|
|
<DescriptionsItem label="费用类型">
|
||
|
|
<component
|
||
|
|
:is="renderDict(costItem.costType,'pro_expense_type')"
|
||
|
|
/>
|
||
|
|
</DescriptionsItem>
|
||
|
|
<DescriptionsItem label="计费时间">
|
||
|
|
{{ houseChargeDetail.startTime+' 至 '+houseChargeDetail.endTime }}
|
||
|
|
</DescriptionsItem>
|
||
|
|
<DescriptionsItem label="房间">
|
||
|
|
{{room.roomNumber}}
|
||
|
|
</DescriptionsItem>
|
||
|
|
<DescriptionsItem label="房间面积">
|
||
|
|
{{`建筑面积：${room.area} 套内面积：${room.insideInArea}`}}
|
||
|
|
</DescriptionsItem>
|
||
|
|
<DescriptionsItem label="单价">
|
||
|
|
{{ costItem.unitPrice }}
|
||
|
|
</DescriptionsItem>
|
||
|
|
<DescriptionsItem label="附加费">
|
||
|
|
{{costItem.surcharge}}
|
||
|
|
</DescriptionsItem>
|
||
|
|
<DescriptionsItem label="应收金额">
|
||
|
|
<span style="font-size: 16px;font-weight: 600;color: red" v-if="houseChargeDetail.amountReceivable">
|
||
|
|
￥ {{houseChargeDetail.amountReceivable}}
|
||
|
|
</span>
|
||
|
|
</DescriptionsItem>
|
||
|
|
<DescriptionsItem label="支付方式" v-if="houseChargeDetail.payType">
|
||
|
|
<component
|
||
|
|
:is="renderDict(houseChargeDetail.payType,'wy_zffs')"
|
||
|
|
/>
|
||
|
|
</DescriptionsItem>
|
||
|
|
<DescriptionsItem label="缴费周期" v-if="houseChargeDetail.chargeCycle">
|
||
|
|
{{houseChargeDetail.chargeCycle}}月
|
||
|
|
</DescriptionsItem>
|
||
|
|
<DescriptionsItem label="说明" :span="2">
|
||
|
|
{{houseChargeDetail.remark}}
|
||
|
|
</DescriptionsItem>
|
||
|
|
</Descriptions>
|
||
|
|
</BasicModal>
|
||
|
|
</template>
|