zhaoyang/estate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

8/12，预收费用余额汇总

Browse Source
This commit is contained in:
Zy
2026-08-12 14:40:52 +08:00
parent 519df168c6
commit ffa0d1067a
13 changed files with 813 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/api/system/report/prepaidBalance/index.ts Normal file
View File

@@ -0,0 +1,10 @@
import request from '@/utils/request';
import { Request, Response } from '@/api/system/report/prepaidBalance/type';
export const getPrepaidBalanceList = (query: Request): Promise<Response> => {
return request({
url: '/prepaidBalance/summary',
method: 'GET',
params: query
});
};

83
src/api/system/report/prepaidBalance/type.ts Normal file
View File

@@ -0,0 +1,83 @@
export type Request = {
/**
* 收费类型ID
*/
chargeTypeId?: string;
/**
* 房屋类型ID
*/
houseUseTypeId?: string;
/**
* 当前页数
*/
pageNum?: number;
/**
* 分页大小
*/
pageSize?: number;
/**
* 小区ID
*/
villageId?: string;
};
export type Response = {
/**
* 动态收费项目列头
*/
chargeItems: ChargeItem[];
code: number;
msg: string;
/**
* 汇总数据行列表
*/
rows: Row[];
/**
* 全部合计行
*/
summary: Summary;
/**
* 总记录数
*/
total: number;
};
export type ChargeItem = {
/**
* 收费项目名称
*/
chargeItemName: string;
/**
* 收费类型ID
*/
chargeTypeId: number;
};
export type Row = {
/**
* 各收费项目预收余额
*/
chargeItemAmounts?: { [key: string]: any };
/**
* 房屋类型名称
*/
houseTypeName?: string;
/**
* 合计金额
*/
totalAmount?: number;
/**
* 小区名称
*/
villageName?: string;
};
/**
* 全部合计行
*/
export type Summary = {
chargeItemAmounts: { [key: string]: string };
houseTypeName: string;
totalAmount: number;
villageName: string;
};

89
src/views/system/report/LeaseManagementDetails.vue
View File

@@ -22,10 +22,10 @@
</el-select>
</el-form-item>
<el-form-item label="电话" prop="houseNo">
<el-input v-model.trim="queryParams.houseNo" placeholder="请输入房号" />
<el-input v-model.trim="queryParams.houseNo" placeholder="关键字查询" />
</el-form-item>
<el-form-item label="房号" prop="month">
<el-select v-model="queryParams.month" placeholder="请选择">
<el-select v-model="queryParams.month" placeholder="关键字查询">
<el-option v-for="item in MonthList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
@@ -57,7 +57,7 @@
</el-select>
</el-form-item>
<el-form-item label="押金（应收）" prop="month">
<el-select v-model="queryParams.month" placeholder="请选择">
<el-select v-model="queryParams.month" placeholder="区间搜索 1000-10000">
<el-option v-for="item in MonthList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
@@ -67,7 +67,7 @@
</el-select>
</el-form-item>
<el-form-item label="**（应收）" prop="month">
<el-select v-model="queryParams.month" placeholder="请选择">
<el-select v-model="queryParams.month" placeholder="关键字查询">
<el-option v-for="item in MonthList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
@@ -79,7 +79,7 @@
</el-select>
</el-form-item>
<el-form-item label="押金（已收）" prop="month">
<el-select v-model="queryParams.month" placeholder="请选择">
<el-select v-model="queryParams.month" placeholder="区间搜索 1000-10000">
<el-option v-for="item in MonthList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
@@ -89,7 +89,7 @@
</el-select>
</el-form-item>
<el-form-item label="**（已收）" prop="month">
<el-select v-model="queryParams.month" placeholder="请选择">
<el-select v-model="queryParams.month" placeholder="关键字查询">
<el-option v-for="item in MonthList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
@@ -101,7 +101,7 @@
</el-select>
</el-form-item>
<el-form-item label="押金（未收）" prop="month">
<el-select v-model="queryParams.month" placeholder="请选择">
<el-select v-model="queryParams.month" placeholder="区间搜索 1000-10000">
<el-option v-for="item in MonthList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
@@ -111,7 +111,7 @@
</el-select>
</el-form-item>
<el-form-item label="**（未收）" prop="month">
<el-select v-model="queryParams.month" placeholder="请选择">
<el-select v-model="queryParams.month" placeholder="关键字查询">
<el-option v-for="item in MonthList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
@@ -132,7 +132,7 @@
<div v-if="showSearch">
<el-form-item label="">
<el-button type="primary">查询</el-button>
<el-button>重置</el-button>
<el-button @click="resetQuery">重置</el-button>
<div class="arrowBox" style="margin-left: 10px" v-if="showSearch" @click="ChangeShowSearch(false)">
<span>收起</span>
<el-icon style="margin-left: 5px"><ArrowUpBold /></el-icon>
@@ -150,7 +150,7 @@
<div v-if="!showSearch">
<el-form-item label="">
<el-button type="primary">查询</el-button>
<el-button>重置</el-button>
<el-button @click="resetQuery">重置</el-button>
<div class="arrowBox" style="margin-left: 10px" v-if="showSearch" @click="ChangeShowSearch(false)">
<span>收起</span>
<el-icon style="margin-left: 5px"><ArrowUpBold /></el-icon>
@@ -209,16 +209,13 @@
import pagination from '@/components/Pagination/index.vue';
import pageHeader from '@/components/Pageheader/index.vue';
import { getArrearsDetails } from '@/api/system/report/arrears/arrears';
import { listChargeItem } from '@/api/system/SdbChargeItem';
import { getCommunitylistAPI } from '@/api/system/community';
import { OwnerArrearsDetailVo } from '@/api/system/report/arrears/type';
import { getVillageTree } from '@/api/system/house';
import { validator } from '@/utils/Reg';
import { ColumnConfig, exportToExcel } from '@/utils/xlsx';
import { ArrowDownBold, ArrowUpBold } from '@element-plus/icons-vue';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
// ╬╬▐╬╬&╬╬╬╬
const ArrearsDetailList = ref<OwnerArrearsDetailVo[]>([]);
const loading = ref(true);
const showSearch = ref(true);
@@ -380,72 +377,6 @@ const handleExport = () => {
}, 100);
};
const handleExportAll = () => {
loading.value = true;
let reportAllList: OwnerArrearsDetailVo[] = [];
// 移除空字符串字段
getArrearsDetails()
.then((res) => {
reportAllList = res.rows;
total.value = res.total;
reportAllList[reportAllList.length - 1].serialNumber = '合计';
if (reportAllList.length === 0) {
proxy?.$modal.msgWarning('没有可导出的数据');
return;
}
// 显示加载提示
const list = updateDynamicColumns(res.rows);
loading.value = true;
// 使用 setTimeout 让出主线程，避免阻塞UI
setTimeout(() => {
try {
const columns: ColumnConfig[] = [
{ label: '序号', prop: 'serialNumber' },
{ label: '区域', prop: 'area' },
{ label: '房号', prop: 'houseNo' },
{ label: '客户', prop: 'customerName' },
{ label: '联系方式', prop: 'phone' },
{ label: '欠费月数', prop: 'arrearsMonths' },
{ label: '应收账期', prop: 'billPeriod' },
{
label: '欠费项目',
children: [
...list.map((item) => {
return { label: item, prop: `chargeItemAmounts.${item}` };
})
]
}
];
const mergeSpanMethod2 = ({ columnIndex, rowIndex }) => {
if (rowIndex === reportAllList.length - 1) {
const rowspan = 6;
if (columnIndex === 0) {
return { rowspan: 1, colspan: 1 };
}
if (columnIndex === 1) {
return { rowspan: 1, colspan: rowspan };
}
if (columnIndex < rowspan + 1) {
return { rowspan: 0, colspan: 0 };
}
}
// 普通行不合并
return { rowspan: 1, colspan: 1 };
};
exportToExcel(reportAllList, columns, `应收欠费明细表_${new Date().getTime()}`, mergeSpanMethod2);
} catch (error) {
proxy?.$modal.msgError('导出失败，请重试');
console.error('导出错误:', error);
} finally {
loading.value = false;
}
}, 100);
})
.finally(() => {
loading.value = false;
});
};
const mergeSpanMethod = ({ columnIndex, rowIndex }) => {
if (rowIndex === ArrearsDetailList.value.length - 1) {
const rowspan = 6;

2
src/views/system/report/aging.vue
View File

@@ -116,7 +116,7 @@ interface SpanMethodProps {
rowIndex: number;
columnIndex: number;
}
// 表格区域合并
const arraySpanMethod = ({ rowIndex, columnIndex }: SpanMethodProps) => {
if (rowIndex === AgingList.value.length - 1) {
if (columnIndex === 0) {

6
src/views/system/report/agingDetailed.vue
View File

@@ -82,7 +82,7 @@ import { getDetailList } from '@/api/system/report/aging';
import { AgingSummary } from '@/api/system/report/aging/type';
import type { TableColumnCtx } from 'element-plus';
import { exportToExcel } from '@/utils/xlsx';
import { getBuildinglistAPI, getVillageTree } from '@/api/system/house';
import { getBuildinglistAPI } from '@/api/system/house';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { com_report_age_list } = toRefs<any>(proxy?.useDict('com_report_age_list'));
@@ -111,7 +111,7 @@ interface SpanMethodProps {
rowIndex: number;
columnIndex: number;
}
// 月份
const arrearsMonthsList = ref([]);
function getAllArrearsMonths() {
arrearsMonthsList.value = Array.from({ length: 12 }, (_, i) => {
@@ -121,7 +121,7 @@ function getAllArrearsMonths() {
};
});
}
// 表格区域合并
const arraySpanMethod = ({ rowIndex, columnIndex }: SpanMethodProps) => {
if (rowIndex === AgingList.value.length - 1) {
const rowspan = 6;

7
src/views/system/report/arrearsTrend.vue
View File

@@ -65,7 +65,6 @@
</el-card>
</div>
</template>
账龄
<script setup name="Arrears" lang="ts">
import pagination from '@/components/Pagination/index.vue';
import pageHeader from '@/components/Pageheader/index.vue';
@@ -134,7 +133,7 @@ function getChartTypeList() {
});
}
/** 查询电抄记录列表 ╬╬╬╬*/
/** 查询电抄记录列表 */
const getList = async () => {
loading.value = true;
const search = { ...queryParams.value };
@@ -184,7 +183,7 @@ const resetQuery = () => {
queryTime.value = [];
handleQuery();
};
// echarts_options
const chartConfig = shallowRef<EChartsOption>({
grid: {
left: '1%',
@@ -219,7 +218,7 @@ const chartConfig = shallowRef<EChartsOption>({
}
]
});
// 更新echarts
function handleChartsData() {
const data = Object.entries(chargeTrendList.value[0]);
const x = data.map((item) => item[0]);

233
src/views/system/report/balanceSummaryArrears.vue Normal file
View File

@@ -0,0 +1,233 @@
<template>
<div class="p-2 h-full flex flex-col">
<pageHeader></pageHeader>
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
<div v-show="showSearch" class="mb-[10px]">
<el-card shadow="hover">
<el-form ref="queryFormRef" :model="queryParams" @submit.prevent="handleQuery" :inline="true">
<div class="flex justify-between">
<div>
<el-form-item label="项目" prop="chargeItemId">
<el-select v-model="queryParams.villageId" placeholder="请选择">
<el-option v-for="item in villageList" :key="item.villageId" :label="item.villageName" :value="item.villageId" />
</el-select>
</el-form-item>
<el-form-item label="房屋类型" prop="chargeTypeId">
<el-select v-model="queryParams.chargeTypeId" placeholder="请选择">
<el-option v-for="item in chargeTypesList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="收费项目" prop="chargeTypeId">
<el-select v-model="queryParams.chargeTypeId" placeholder="请选择">
<el-option v-for="item in chargeTypesList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
</div>
<div>
<el-button type="primary" @click="handleQuery">查询</el-button>
<el-button @click="resetQuery">重置</el-button>
</div>
</div>
</el-form>
</el-card>
</div>
</transition>
<el-card shadow="never" class="flex-1">
<template #header>
<el-row :gutter="10" class="mb8">
<el-col :span="5">
<span>预收费用余额汇总表 </span>
</el-col>
<el-col :span="18"></el-col>
<el-col :span="1">
<el-button type="primary" @click="handleExport">导出</el-button>
</el-col>
</el-row>
</template>
<el-table v-loading="loading" border :data="ArrearsDetailList">
<el-table-column label="小区名称" align="center" prop="name" />
<el-table-column label="房屋类型" align="center" prop="name" />
<el-table-column label="收费项目" align="center" prop="name">
<template #default>
<template v-for="(item, index) in rowChargeTypesList" :key="index">
<el-table-column :label="item" align="center">
<template #default="scope">
{{ scope.row.amounts[item] }}
</template>
</el-table-column>
</template>
</template>
</el-table-column>
<el-table-column label="合计" align="center" prop="total" />
</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 pagination from '@/components/Pagination/index.vue';
import pageHeader from '@/components/Pageheader/index.vue';
import { getCommunitylistAPI } from '@/api/system/community';
import { validator } from '@/utils/Reg';
import { Detail } from '@/api/system/report/paidInExpensesReceivable/type';
import { listChargeType } from '@/api/system/ChargeType';
import { getPaidInExpensesList } from '@/api/system/report/paidInExpenses';
import { ColumnConfig, exportToExcel } from '@/utils/xlsx';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const ArrearsDetailList = ref<Detail[]>([]);
const loading = ref(true);
const showSearch = ref(true);
const total = ref(0);
const queryFormRef = ref<ElFormInstance>();
const data = reactive({
queryParams: {
pageNum: 1,
pageSize: 10,
villageId: '-1',
startDate: '',
endDate: '',
chargeTypeId: '-1'
},
rule: [
{
validator: (_: any, value: string, callback: (arg0?: Error) => any) => {
if (value === '' || value === undefined || value === null) {
return callback();
}
if (!validator(value, 'fullFilterReg')) {
return callback(new Error('请输入正确的房号'));
}
}
}
]
});
const { queryParams } = toRefs(data);
// 查询小区
const villageList = ref([]);
function getAllVillage() {
getCommunitylistAPI().then((res) => {
villageList.value = [
{
villageId: '-1',
villageName: '全部区域'
},
...res.rows
];
});
}
// 收费类型
const chargeTypesList = ref([]);
function getChargeTypeList() {
listChargeType().then((res) => {
chargeTypesList.value = [
{
name: '全部类型',
id: '-1'
},
...res.rows
];
});
}
const rowChargeTypesList = ref([]);
/** 查询电抄记录列表 */
const getList = async () => {
loading.value = true;
const search = { ...queryParams.value };
// 移除空字符串字段
Object.keys(search).forEach((key) => {
if (search[key] === '-1') {
search[key] = undefined;
}
});
getPaidInExpensesList(search)
.then((res) => {
console.log(res);
ArrearsDetailList.value = [res.data.total, ...res.data.details];
rowChargeTypesList.value = res.data.chargeTypes;
})
.finally(() => {
loading.value = false;
});
};
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.value.pageNum = 1;
getList();
};
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value?.resetFields();
handleQuery();
};
/** 导出Excel */
const handleExport = () => {
if (ArrearsDetailList.value.length === 0) {
proxy?.$modal.msgWarning('没有可导出的数据');
return;
}
// 显示加载提示
loading.value = true;
// 使用 setTimeout 让出主线程，避免阻塞UI
setTimeout(() => {
try {
const columns: ColumnConfig[] = [
{
label: '小区名称',
prop: 'name'
},
{
label: '房屋类型',
prop: 'sequence'
},
{
label: '房屋类型',
prop: 'amounts',
children: rowChargeTypesList.value.map((item) => {
return {
label: item,
prop: `amounts.${item}`
};
})
},
{
label: '合计',
prop: 'total'
}
];
exportToExcel(ArrearsDetailList.value, columns, `预收费用余额汇总表_${new Date().getTime()}`);
} catch (error) {
proxy?.$modal.msgError('导出失败，请重试');
console.error('导出错误:', error);
} finally {
loading.value = false;
}
}, 100);
};
onMounted(() => {
getList();
getChargeTypeList();
getAllVillage();
});
</script>
<style lang="scss" scoped>
.el-table {
height: calc(100% - 80px);
}
</style>

3
src/views/system/report/chargeTrend.vue
View File

@@ -70,9 +70,7 @@
<script setup name="Arrears" lang="ts">
import pagination from '@/components/Pagination/index.vue';
import pageHeader from '@/components/Pageheader/index.vue';
import { getArrearsDetails } from '@/api/system/report/arrears/arrears';
import { getCommunitylistAPI } from '@/api/system/community';
import { OwnerArrearsDetailVo } from '@/api/system/report/arrears/type';
import { getChargeTend } from '@/api/system/report/chargeTrend';
import Echarts from '@/components/Echarts/index.vue';
import type { EChartsOption } from 'echarts';
@@ -155,7 +153,6 @@ const getList = async () => {
obj[key] = item.amount;
});
chargeTrendList.value = [obj];
console.log(chargeTrendList);
total.value = res.total;
handleChartsData();
})

2
src/views/system/report/detailed.vue
View File

@@ -91,10 +91,8 @@
import pagination from '@/components/Pagination/index.vue';
import pageHeader from '@/components/Pageheader/index.vue';
import { getArrearsDetails } from '@/api/system/report/arrears/arrears';
import { listChargeItem } from '@/api/system/SdbChargeItem';
import { getCommunitylistAPI } from '@/api/system/community';
import { OwnerArrearsDetailVo } from '@/api/system/report/arrears/type';
import { getVillageTree } from '@/api/system/house';
import { validator } from '@/utils/Reg';
import { ColumnConfig, exportToExcel } from '@/utils/xlsx';

227
src/views/system/report/detailsSummaryArrears.vue Normal file
View File

@@ -0,0 +1,227 @@
<template>
<div class="p-2 h-full flex flex-col">
<pageHeader></pageHeader>
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
<div v-show="showSearch" class="mb-[10px]">
<el-card shadow="hover">
<el-form ref="queryFormRef" :model="queryParams" @submit.prevent="handleQuery" :inline="true">
<div class="flex justify-between">
<div>
<el-form-item label="区域" prop="chargeItemId">
<el-select v-model="queryParams.villageId" placeholder="请选择">
<el-option v-for="item in villageList" :key="item.villageId" :label="item.villageName" :value="item.villageId" />
</el-select>
</el-form-item>
<el-form-item label="房屋类型" prop="chargeTypeId">
<el-select v-model="queryParams.chargeTypeId" placeholder="请选择">
<el-option v-for="item in chargeTypesList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="客户" prop="villageId">
<el-input placeholder="请输入姓名"></el-input>
</el-form-item>
</div>
<div>
<el-button type="primary" @click="handleQuery">查询</el-button>
<el-button @click="resetQuery">重置</el-button>
</div>
</div>
</el-form>
</el-card>
</div>
</transition>
<el-card shadow="never" class="flex-1">
<template #header>
<el-row :gutter="10" class="mb8">
<el-col :span="5">
<span>预收费用余额明细表 </span>
</el-col>
<el-col :span="18"></el-col>
<el-col :span="1">
<el-button type="primary" @click="handleExport">导出</el-button>
</el-col>
</el-row>
</template>
<el-table v-loading="loading" border :data="ArrearsDetailList">
<el-table-column label="区域" align="center" prop="name" />
<el-table-column label="房屋类型" align="center" prop="name" />
<el-table-column label="户号" align="center" prop="name" />
<el-table-column label="客户" align="center" prop="name" />
<el-table-column label="预收账期" align="center" prop="name" />
<el-table-column label="预收月数" align="center" prop="name" />
<el-table-column label="收费项目" align="center" prop="name">
<template #default>
<template v-for="(item, index) in rowChargeTypesList" :key="index">
<el-table-column :label="item" align="center">
<template #default="scope">
{{ scope.row.amounts[item] }}
</template>
</el-table-column>
</template>
</template>
</el-table-column>
<el-table-column label="合计" align="center" prop="total" />
</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 pagination from '@/components/Pagination/index.vue';
import pageHeader from '@/components/Pageheader/index.vue';
import { getCommunitylistAPI } from '@/api/system/community';
import { validator } from '@/utils/Reg';
import { Detail } from '@/api/system/report/paidInExpensesReceivable/type';
import { listChargeType } from '@/api/system/ChargeType';
import { getPaidInExpensesList } from '@/api/system/report/paidInExpenses';
import { ColumnConfig, exportToExcel } from '@/utils/xlsx';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const ArrearsDetailList = ref<Detail[]>([]);
const loading = ref(true);
const showSearch = ref(true);
const total = ref(0);
const queryFormRef = ref<ElFormInstance>();
const data = reactive({
queryParams: {
pageNum: 1,
pageSize: 10,
villageId: '-1',
chargeTypeId: '-1'
},
rule: [
{
validator: (_: any, value: string, callback: (arg0?: Error) => any) => {
if (value === '' || value === undefined || value === null) {
return callback();
}
if (!validator(value, 'fullFilterReg')) {
return callback(new Error('请输入正确的房号'));
}
}
}
]
});
const { queryParams } = toRefs(data);
// 查询小区
const villageList = ref([]);
function getAllVillage() {
getCommunitylistAPI().then((res) => {
villageList.value = [
{
villageId: '-1',
villageName: '全部区域'
},
...res.rows
];
});
}
// 收费类型
const chargeTypesList = ref([]);
function getChargeTypeList() {
listChargeType().then((res) => {
chargeTypesList.value = [
{
name: '全部类型',
id: '-1'
},
...res.rows
];
});
}
// 自定义 列
const rowChargeTypesList = ref([]);
/** 查询电抄记录列表 */
const getList = async () => {
loading.value = true;
const search = { ...queryParams.value };
// 移除空字符串字段
Object.keys(search).forEach((key) => {
if (search[key] === '-1') {
search[key] = undefined;
}
});
getPaidInExpensesList(search)
.then((res) => {
ArrearsDetailList.value = [res.data.total, ...res.data.details];
rowChargeTypesList.value = res.data.chargeTypes;
})
.finally(() => {
loading.value = false;
});
};
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.value.pageNum = 1;
getList();
};
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value?.resetFields();
handleQuery();
};
/** 导出Excel */
const handleExport = () => {
if (ArrearsDetailList.value.length === 0) {
proxy?.$modal.msgWarning('没有可导出的数据');
return;
}
// 显示加载提示
loading.value = true;
// 使用 setTimeout 让出主线程，避免阻塞UI
setTimeout(() => {
try {
const columns: ColumnConfig[] = [
{ label: '区域', prop: 'name' },
{ label: '房屋类型', prop: 'sequence' },
{ label: '户号', prop: 'sequence' },
{ label: '客户', prop: 'sequence' },
{ label: '预收账期', prop: 'sequence' },
{ label: '预收月数', prop: 'sequence' },
{
label: '收费项目',
prop: 'sequence',
children: rowChargeTypesList.value.map((item) => {
return {
label: item,
prop: `amounts.${item}`
};
})
},
{ label: '合计', prop: 'total' }
];
exportToExcel(ArrearsDetailList.value, columns, `预收费用余额明细_${new Date().getTime()}`);
} catch (error) {
proxy?.$modal.msgError('导出失败，请重试');
console.error('导出错误:', error);
} finally {
loading.value = false;
}
}, 100);
};
onMounted(() => {
getList();
getChargeTypeList();
getAllVillage();
});
</script>
<style lang="scss" scoped>
.el-table {
height: calc(100% - 80px);
}
</style>

9
src/views/system/report/paidInExpenses.vue
View File

@@ -92,16 +92,16 @@ const total = ref(0);
const queryFormRef = ref<ElFormInstance>();
const queryTime = ref([]);
function handleQueryTime(val: string[]) {
queryParams.value.startTime = val[0];
queryParams.value.endTime = val[1];
queryParams.value.startDate = val[0];
queryParams.value.endDate = val[1];
}
const data = reactive({
queryParams: {
pageNum: 1,
pageSize: 10,
villageId: '-1',
startTime: '',
endTime: '',
startDate: '',
endDate: '',
chargeTypeId: '-1'
},
rule: [
@@ -180,6 +180,7 @@ const handleQuery = () => {
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value?.resetFields();
queryTime.value = [];
handleQuery();
};
/** 导出Excel */

236
src/views/system/report/prepaidBalance.vue Normal file
View File

@@ -0,0 +1,236 @@
<template>
<div class="p-2 h-full flex flex-col">
<pageHeader></pageHeader>
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
<div v-show="showSearch" class="mb-[10px]">
<el-card shadow="hover">
<el-form ref="queryFormRef" :model="queryParams" @submit.prevent="handleQuery" :inline="true">
<div class="flex justify-between">
<div>
<el-form-item label="项目" prop="chargeItemId">
<el-select v-model="queryParams.villageId" placeholder="请选择">
<el-option v-for="item in villageList" :key="item.villageId" :label="item.villageName" :value="item.villageId" />
</el-select>
</el-form-item>
<el-form-item label="房屋类型" prop="houseUseTypeId">
<el-select v-model="queryParams.houseUseTypeId" placeholder="请选择">
<el-option v-for="item in houseUseList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="收费项目" prop="chargeTypeId">
<el-select v-model="queryParams.chargeTypeId" placeholder="请选择">
<el-option v-for="item in chargeTypesList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
</div>
<div>
<el-button type="primary" @click="handleQuery">查询</el-button>
<el-button @click="resetQuery">重置</el-button>
</div>
</div>
</el-form>
</el-card>
</div>
</transition>
<el-card shadow="never" class="flex-1">
<template #header>
<el-row :gutter="10" class="mb8">
<el-col :span="5">
<span> 预收费用余额汇总 </span>
</el-col>
<el-col :span="18"></el-col>
<el-col :span="1">
<el-button type="primary" @click="handleExport">导出</el-button>
</el-col>
</el-row>
</template>
<el-table v-loading="loading" border :data="ArrearsDetailList">
<el-table-column label="小区名称" align="center" prop="villageName" />
<el-table-column label="房屋类型" align="center" prop="houseTypeName" />
<el-table-column label="收费项目" align="center" prop="chargeItemAmounts">
<template #default>
<el-table-column :label="item.chargeItemName" align="center" v-for="item in rowChargeTypesList" :key="item">
<template #default="scope">
{{ scope.row.chargeItemAmounts[item.chargeItemName] }}
</template>
</el-table-column>
</template>
</el-table-column>
<el-table-column label="合计" align="center" prop="totalAmount" />
</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 pagination from '@/components/Pagination/index.vue';
import pageHeader from '@/components/Pageheader/index.vue';
import { getCommunitylistAPI } from '@/api/system/community';
import { validator } from '@/utils/Reg';
import { getPaidInExpensesReceivableList } from '@/api/system/report/paidInExpensesReceivable';
import { Detail } from '@/api/system/report/paidInExpensesReceivable/type';
import { listChargeType } from '@/api/system/ChargeType';
import { ColumnConfig, exportToExcel } from '@/utils/xlsx';
import { getPrepaidBalanceList } from '@/api/system/report/prepaidBalance';
import { listHouseUseType } from '@/api/system/houseUse';
import { Row } from '@/api/system/report/prepaidBalance/type';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const ArrearsDetailList = ref<Row[]>([]);
const loading = ref(true);
const showSearch = ref(true);
const total = ref(0);
const queryFormRef = ref<ElFormInstance>();
const data = reactive({
queryParams: {
pageNum: 1,
pageSize: 10,
villageId: '',
houseUseTypeId: '',
chargeTypeId: ''
},
rule: [
{
validator: (_: any, value: string, callback: (arg0?: Error) => any) => {
if (value === '' || value === undefined || value === null) {
return callback();
}
if (!validator(value, 'fullFilterReg')) {
return callback(new Error('请输入正确的房号'));
}
}
}
]
});
const { queryParams } = toRefs(data);
// 查询小区
const villageList = ref([]);
function getAllVillage() {
getCommunitylistAPI().then((res) => {
villageList.value = [...res.rows];
});
}
// 收费类型
const houseUseList = ref([]);
function getHouseUseList() {
listHouseUseType().then((res) => {
houseUseList.value = [...res.rows];
});
}
// 收费类型
const chargeTypesList = ref([]);
function getChargeTypeList() {
listChargeType().then((res) => {
chargeTypesList.value = [...res.rows];
});
}
const rowChargeTypesList = ref([]);
/** 查询电抄记录列表 */
const getList = async () => {
loading.value = true;
const search = { ...queryParams.value };
// 移除空字符串字段
Object.keys(search).forEach((key) => {
if (search[key] === '-1') {
search[key] = undefined;
}
});
getPrepaidBalanceList(search)
.then((res) => {
ArrearsDetailList.value = [...res.rows];
rowChargeTypesList.value = res.chargeItems;
total.value = res.total;
})
.finally(() => {
loading.value = false;
});
};
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.value.pageNum = 1;
getList();
};
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value?.resetFields();
queryParams.value = {
pageNum: 1,
pageSize: 10,
villageId: '-1',
houseUseTypeId: '',
chargeTypeId: '-1'
};
handleQuery();
};
/** 导出Excel */
const handleExport = () => {
if (ArrearsDetailList.value.length === 0) {
proxy?.$modal.msgWarning('没有可导出的数据');
return;
}
// 显示加载提示
loading.value = true;
// 使用 setTimeout 让出主线程，避免阻塞UI
setTimeout(() => {
try {
const columns: ColumnConfig[] = [
{
label: '小区名称',
prop: 'villageName'
},
{
label: '房屋类型',
prop: 'houseTypeName'
},
{
label: '收费项目',
prop: 'chargeItemAmounts',
children: [
...rowChargeTypesList.value.map((item) => {
return {
label: item.chargeItemName,
prop: `chargeItemAmounts.${item.chargeItemName}`
};
})
]
},
{
label: '合计',
prop: 'totalAmount'
}
];
exportToExcel(ArrearsDetailList.value, columns, `应收物业费详情_${new Date().getTime()}`);
} catch (error) {
proxy?.$modal.msgError('导出失败，请重试');
console.error('导出错误:', error);
} finally {
loading.value = false;
}
}, 100);
};
onMounted(() => {
getList();
getChargeTypeList();
getHouseUseList();
getAllVillage();
});
</script>
<style lang="scss" scoped>
.el-table {
height: calc(100% - 80px);
}
</style>