144 lines
4.9 KiB
Vue
144 lines
4.9 KiB
Vue
<template>
|
|
<div class="flex flex-col h-full p-2">
|
|
<pageheader></pageheader>
|
|
<el-card class="flex-1 mt-10px" shadow="never">
|
|
<template #header>
|
|
<div class="flex justify-between items-center">
|
|
<el-form class="demo-form-inline" :inline="true">
|
|
<el-form-item label="查询日期">
|
|
<el-date-picker
|
|
clearable
|
|
v-model="SearchTime"
|
|
@change="
|
|
(val) => {
|
|
if (!val) {
|
|
queryParams.startDate = '';
|
|
queryParams.endDate = '';
|
|
return;
|
|
}
|
|
SearchTime = val;
|
|
const days = val;
|
|
const [star, end] = days.map((item) => item.split(' ')[0]);
|
|
queryParams.startDate = star + ' 00:00:00';
|
|
queryParams.endDate = end + ' 23:59:59';
|
|
}
|
|
"
|
|
type="daterange"
|
|
value-format="YYYY-MM-DD HH:mm:ss"
|
|
format="YYYY-MM-DD"
|
|
range-separator="到"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="" v-hasPermi="['water:topupRecord:list']">
|
|
<el-button type="primary" @click="getList">查询</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
<el-button @click="handleExport" v-hasPermi="['water:topupRecord:export']" type="warning">导出统计</el-button>
|
|
</div>
|
|
</template>
|
|
<el-table v-loading="loading" border :data="topupRecordList">
|
|
<el-table-column label="充值时间" align="center" prop="rechargeTime">
|
|
<template #default="scope">
|
|
<span v-if="scope.row.rechargeTime">{{ scope.row.rechargeTime }}</span>
|
|
<span v-else>---</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="小区名称" align="center" prop="villageName">
|
|
<template #default="scope">
|
|
<span v-if="scope.row.villageName">{{ scope.row.villageName }}</span>
|
|
<span v-else>---</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="户主" align="center" prop="residentName">
|
|
<template #default="scope">
|
|
<span v-if="scope.row.residentName">{{ scope.row.residentName }}</span>
|
|
<span v-else>---</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="房号" align="center" prop="houseName">
|
|
<template #default="scope">
|
|
<span v-if="scope.row.houseName">{{ scope.row.houseName }}</span>
|
|
<span v-else>---</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="单价" align="center" prop="fixedPrice">
|
|
<template #default="scope">
|
|
<div v-if="scope.row.fixedPrice && scope.row.unit">
|
|
<span>{{ scope.row.fixedPrice }}</span>
|
|
<span>/</span>
|
|
<span>{{ scope.row.unit }}</span>
|
|
</div>
|
|
<div v-else>
|
|
<span>---</span>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="设备编号" align="center" prop="deviceCode" />
|
|
<el-table-column label="订单号" align="center" prop="orderId" />
|
|
<el-table-column label="充值金额" align="center" prop="rechargeAmount" />
|
|
<el-table-column label="缴费方式" align="center" prop="topUpType" />
|
|
</el-table>
|
|
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
|
|
</el-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { getTopupRecordByDate, type TopupRecordList } from '@/api/system/SdbTopupRecord/index';
|
|
import { checkPermi } from '@/utils/permission';
|
|
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
|
|
|
const topupRecordList = ref<TopupRecordList[]>([]);
|
|
const loading = ref(false);
|
|
const total = ref(0);
|
|
|
|
const data = reactive({
|
|
queryParams: {
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
startDate: '',
|
|
endDate: ''
|
|
}
|
|
});
|
|
const SearchTime = ref([]);
|
|
|
|
const { queryParams } = toRefs(data);
|
|
/** 查询充值记录列表 */
|
|
const getList = async () => {
|
|
if (!checkPermi(['water:topupRecord:list'])) return;
|
|
loading.value = true;
|
|
const res = await getTopupRecordByDate(queryParams.value);
|
|
topupRecordList.value = res.rows;
|
|
total.value = res.total;
|
|
loading.value = false;
|
|
};
|
|
|
|
onMounted(() => {
|
|
getList();
|
|
});
|
|
|
|
/** 导出按钮操作 */
|
|
const handleExport = () => {
|
|
// exportTopupRecordByDate();
|
|
proxy?.download(
|
|
'/topupRecord/water/export',
|
|
{
|
|
...queryParams.value
|
|
},
|
|
`花开物业水费统计表.xlsx`
|
|
);
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.el-table {
|
|
height: calc(100% - 80px);
|
|
}
|
|
|
|
.el-form-item {
|
|
margin-bottom: 0;
|
|
}
|
|
</style>
|