63 lines
2.5 KiB
Vue
63 lines
2.5 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 { renderDict } from "#/utils/render";
|
|
import { carChargeInfo } from "#/api/property/carCharge";
|
|
import type { CarChargeVO } from "#/api/property/carCharge/model";
|
|
|
|
const [BasicModal, modalApi] = useVbenModal({
|
|
onOpenChange: handleOpenChange,
|
|
onClosed() {
|
|
carChargeDetail.value = null;
|
|
},
|
|
});
|
|
|
|
const carChargeDetail = shallowRef<null | CarChargeVO>(null);
|
|
|
|
async function handleOpenChange(open: boolean) {
|
|
if (!open) return null;
|
|
modalApi.modalLoading(true);
|
|
const { id } = modalApi.getData() as { id: number | string };
|
|
carChargeDetail.value = await carChargeInfo(id);
|
|
modalApi.modalLoading(false);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<BasicModal :footer="false" :fullscreen-button="false" title="车辆收费详情" class="w-[70%]">
|
|
<Descriptions v-if="carChargeDetail" size="small" :column="2" bordered :labelStyle="{width:'100px'}">
|
|
<DescriptionsItem label="车牌号">
|
|
{{ carChargeDetail.carNumber }}
|
|
</DescriptionsItem>
|
|
<DescriptionsItem label="费用类型">
|
|
<component v-if="carChargeDetail" :is="renderDict(2,'pro_expense_type')" />
|
|
</DescriptionsItem>
|
|
<DescriptionsItem label="计费时间">
|
|
{{ carChargeDetail.starTime + ' 至 ' + carChargeDetail.endTime }}
|
|
</DescriptionsItem>
|
|
<DescriptionsItem label="车位">
|
|
{{ carChargeDetail.location }}
|
|
</DescriptionsItem>
|
|
<DescriptionsItem label="应收金额">
|
|
<div v-if="carChargeDetail.amountReceivable">
|
|
<span style="font-size: 16px;font-weight: 600;color: red;margin-right: 10px">
|
|
￥ {{ carChargeDetail.amountReceivable }}
|
|
</span>
|
|
</div>
|
|
</DescriptionsItem>
|
|
<DescriptionsItem label="缴费状态" v-if="carChargeDetail.chargeStatus">
|
|
<component :is="renderDict(carChargeDetail.chargeStatus,'wy_fyshzt')" />
|
|
</DescriptionsItem>
|
|
<DescriptionsItem label="支付方式" v-if="carChargeDetail.payType">
|
|
<component :is="renderDict(carChargeDetail.payType,'wy_zffs')" />
|
|
</DescriptionsItem>
|
|
<DescriptionsItem label="缴费周期" v-if="carChargeDetail.chargeCycle">
|
|
{{ carChargeDetail.chargeCycle }}月
|
|
</DescriptionsItem>
|
|
<DescriptionsItem label="说明" :span="2">
|
|
{{ carChargeDetail.remark }}
|
|
</DescriptionsItem>
|
|
</Descriptions>
|
|
</BasicModal>
|
|
</template> |