This commit is contained in:
parent
058aa4333d
commit
fcf97c48bd
10
src/App.vue
10
src/App.vue
|
|
@ -35,6 +35,14 @@
|
|||
<i class="el-icon-key"></i>
|
||||
<span>租房管理</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="rental-archive">
|
||||
<i class="el-icon-document"></i>
|
||||
<span>租赁档案</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="water-archive">
|
||||
<i class="el-icon-document"></i>
|
||||
<span>水费档案</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="rent-statistics">
|
||||
<i class="el-icon-data-analysis"></i>
|
||||
<span>租金统计</span>
|
||||
|
|
@ -75,6 +83,8 @@ export default {
|
|||
'room-add': '/room/add',
|
||||
'rental-list': '/rental/list',
|
||||
'rental-add': '/rental/add',
|
||||
'rental-archive': '/rental/archive',
|
||||
'water-archive': '/water/archive',
|
||||
'rent-statistics': '/statistics/rent',
|
||||
'room-statistics': '/statistics/room'
|
||||
}
|
||||
|
|
|
|||
|
|
@ -78,6 +78,16 @@ const routes = [
|
|||
name: 'RentalDetail',
|
||||
component: () => import('../views/rental/Detail.vue')
|
||||
},
|
||||
{
|
||||
path: '/rental/archive',
|
||||
name: 'RentalArchive',
|
||||
component: () => import('../views/rental/RentalArchive.vue')
|
||||
},
|
||||
{
|
||||
path: '/water/archive',
|
||||
name: 'WaterArchive',
|
||||
component: () => import('../views/rental/WaterArchive.vue')
|
||||
},
|
||||
// 统计分析
|
||||
{
|
||||
path: '/statistics/rent',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,374 @@
|
|||
<template>
|
||||
<div class="rental-archive">
|
||||
<el-card>
|
||||
<template slot="header">
|
||||
<div class="card-header">
|
||||
<span>租赁档案</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form :inline="true" :model="searchForm" class="search-form">
|
||||
<el-form-item label="公寓">
|
||||
<el-select v-model="searchForm.apartmentId" placeholder="请选择公寓" @change="handleApartmentChange">
|
||||
<el-option label="全部" value=""></el-option>
|
||||
<el-option v-for="apartment in apartments" :key="apartment.id" :label="apartment.name" :value="apartment.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="房间">
|
||||
<el-select v-model="searchForm.roomId" placeholder="请选择房间" :disabled="!searchForm.apartmentId">
|
||||
<el-option label="全部" value=""></el-option>
|
||||
<el-option v-for="room in rooms" :key="room.id" :label="room.roomNumber" :value="room.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="开始日期">
|
||||
<el-date-picker
|
||||
v-model="searchForm.startDate"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
value-format="yyyy-MM-dd">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="结束日期">
|
||||
<el-date-picker
|
||||
v-model="searchForm.endDate"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
value-format="yyyy-MM-dd">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态">
|
||||
<el-select v-model="searchForm.status" placeholder="请选择状态">
|
||||
<el-option label="全部" value=""></el-option>
|
||||
<el-option label="在租" value="active"></el-option>
|
||||
<el-option label="已到期" value="expired"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleSearch">搜索</el-button>
|
||||
<el-button @click="resetSearch">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table :data="rentalList" style="width: 100%" v-loading="isLoading">
|
||||
<el-table-column prop="tenantName" label="租客" width="120"></el-table-column>
|
||||
<el-table-column label="房间" width="150">
|
||||
<template slot-scope="scope">
|
||||
{{ getApartmentName(scope.row.roomId) }} - {{ getRoomNumber(scope.row.roomId) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="startDate" label="开始日期" width="120"></el-table-column>
|
||||
<el-table-column prop="endDate" label="结束日期" width="120"></el-table-column>
|
||||
<el-table-column prop="rent" label="租金(元/月)" width="120"></el-table-column>
|
||||
<el-table-column prop="deposit" label="押金(元)" width="120"></el-table-column>
|
||||
<el-table-column prop="remark" label="备注" min-width="150"></el-table-column>
|
||||
<el-table-column prop="status" label="状态" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="scope.row.status === 'active' ? 'success' : 'danger'">
|
||||
{{ scope.row.status === 'active' ? '在租' : '已到期' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
|
||||
<el-table-column label="操作" width="220">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
|
||||
<el-button type="success" size="small" @click="handleRenew(scope.row)">续租</el-button>
|
||||
<el-button type="danger" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="pagination">
|
||||
<el-pagination
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="currentPage"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-dialog :title="rentalForm.id ? '编辑租赁记录' : '新增租赁记录'" :visible.sync="rentalDialogVisible" width="500px">
|
||||
<el-form :model="rentalForm" :rules="rentalRules" ref="rentalForm">
|
||||
<el-form-item label="租客姓名" prop="tenantName">
|
||||
<el-input v-model="rentalForm.tenantName" placeholder="请输入租客姓名"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="房间" prop="roomId">
|
||||
<el-select v-model="rentalForm.roomId" placeholder="请选择房间" style="width: 100%">
|
||||
<el-option v-for="room in allRooms" :key="room.id" :label="`${getApartmentName(room.id)} - ${room.roomNumber}`" :value="room.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="开始日期" prop="startDate">
|
||||
<el-date-picker v-model="rentalForm.startDate" type="date" placeholder="选择开始日期" style="width: 100%"></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="结束日期" prop="endDate">
|
||||
<el-date-picker v-model="rentalForm.endDate" type="date" placeholder="选择结束日期" style="width: 100%"></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="租金(元)" prop="rent">
|
||||
<el-input v-model.number="rentalForm.rent" placeholder="请输入租金"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="押金(元)" prop="deposit">
|
||||
<el-input v-model.number="rentalForm.deposit" placeholder="请输入押金"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="rentalForm.status" placeholder="请选择状态" style="width: 100%">
|
||||
<el-option label="有效" value="active"></el-option>
|
||||
<el-option label="到期" value="expired"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="rentalForm.remark" type="textarea" rows="3" placeholder="请输入备注信息"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="rentalDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleSave">保存</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { rentalApi, apartmentApi, roomApi } from '../../api/api'
|
||||
|
||||
export default {
|
||||
name: 'RentalArchive',
|
||||
data() {
|
||||
return {
|
||||
rentalList: [],
|
||||
apartments: [],
|
||||
rooms: [],
|
||||
allRooms: [],
|
||||
isLoading: false,
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
searchForm: {
|
||||
apartmentId: '',
|
||||
roomId: '',
|
||||
startDate: '',
|
||||
endDate: '',
|
||||
status: ''
|
||||
},
|
||||
rentalDialogVisible: false,
|
||||
rentalForm: {
|
||||
id: '',
|
||||
roomId: '',
|
||||
tenantName: '',
|
||||
startDate: '',
|
||||
endDate: '',
|
||||
rent: '',
|
||||
deposit: '',
|
||||
status: 'active',
|
||||
remark: ''
|
||||
},
|
||||
rentalRules: {
|
||||
tenantName: [{ required: true, message: '请输入租客姓名', trigger: 'blur' }],
|
||||
roomId: [{ required: true, message: '请选择房间', trigger: 'change' }],
|
||||
startDate: [{ required: true, message: '请选择开始日期', trigger: 'blur' }],
|
||||
endDate: [{ required: true, message: '请选择结束日期', trigger: 'blur' }],
|
||||
rent: [{ required: true, message: '请输入租金', trigger: 'blur' }],
|
||||
status: [{ required: true, message: '请选择状态', trigger: 'blur' }]
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.loadApartments()
|
||||
this.loadAllRooms()
|
||||
this.loadData()
|
||||
},
|
||||
methods: {
|
||||
async loadApartments() {
|
||||
try {
|
||||
const response = await apartmentApi.getAll()
|
||||
this.apartments = response.data || response
|
||||
} catch (error) {
|
||||
this.$message.error('加载公寓数据失败')
|
||||
}
|
||||
},
|
||||
async loadAllRooms() {
|
||||
try {
|
||||
const response = await roomApi.getAll()
|
||||
this.allRooms = response.data || response
|
||||
} catch (error) {
|
||||
this.$message.error('加载房间数据失败')
|
||||
}
|
||||
},
|
||||
async loadRooms() {
|
||||
if (!this.searchForm.apartmentId) {
|
||||
this.rooms = []
|
||||
return
|
||||
}
|
||||
try {
|
||||
const response = await roomApi.getAll({ apartmentId: this.searchForm.apartmentId })
|
||||
this.rooms = response.data || response
|
||||
} catch (error) {
|
||||
this.$message.error('加载房间数据失败')
|
||||
}
|
||||
},
|
||||
handleApartmentChange() {
|
||||
this.searchForm.roomId = ''
|
||||
this.loadRooms()
|
||||
},
|
||||
async loadData() {
|
||||
this.isLoading = true
|
||||
try {
|
||||
const params = {
|
||||
page: this.currentPage,
|
||||
pageSize: this.pageSize
|
||||
}
|
||||
|
||||
if (this.searchForm.apartmentId) {
|
||||
params.apartmentId = this.searchForm.apartmentId
|
||||
}
|
||||
if (this.searchForm.roomId) {
|
||||
params.roomId = this.searchForm.roomId
|
||||
}
|
||||
if (this.searchForm.status) {
|
||||
params.status = this.searchForm.status
|
||||
}
|
||||
if (this.searchForm.startDate && Array.isArray(this.searchForm.startDate) && this.searchForm.startDate.length === 2) {
|
||||
params.startDateFrom = this.searchForm.startDate[0]
|
||||
params.startDateTo = this.searchForm.startDate[1]
|
||||
}
|
||||
if (this.searchForm.endDate && Array.isArray(this.searchForm.endDate) && this.searchForm.endDate.length === 2) {
|
||||
params.endDateFrom = this.searchForm.endDate[0]
|
||||
params.endDateTo = this.searchForm.endDate[1]
|
||||
}
|
||||
|
||||
const response = await rentalApi.getAll(params)
|
||||
this.rentalList = response.data || response
|
||||
this.total = response.total || 0
|
||||
} catch (error) {
|
||||
this.$message.error('加载数据失败')
|
||||
} finally {
|
||||
this.isLoading = false
|
||||
}
|
||||
},
|
||||
handleSearch() {
|
||||
this.currentPage = 1
|
||||
this.loadData()
|
||||
},
|
||||
resetSearch() {
|
||||
this.searchForm = {
|
||||
apartmentId: '',
|
||||
roomId: '',
|
||||
startDate: '',
|
||||
endDate: '',
|
||||
status: ''
|
||||
}
|
||||
this.rooms = []
|
||||
this.currentPage = 1
|
||||
this.loadData()
|
||||
},
|
||||
handleSizeChange(size) {
|
||||
this.pageSize = size
|
||||
this.currentPage = 1
|
||||
this.loadData()
|
||||
},
|
||||
handleCurrentChange(current) {
|
||||
this.currentPage = current
|
||||
this.loadData()
|
||||
},
|
||||
getApartmentName(roomId) {
|
||||
const room = this.allRooms.find(r => r.id == roomId)
|
||||
if (room) {
|
||||
const apartment = this.apartments.find(a => a.id == room.apartmentId)
|
||||
return apartment ? apartment.name : ''
|
||||
}
|
||||
return ''
|
||||
},
|
||||
getRoomNumber(roomId) {
|
||||
const room = this.allRooms.find(r => r.id == roomId)
|
||||
return room ? room.roomNumber : ''
|
||||
},
|
||||
handleEdit(rental) {
|
||||
this.rentalForm = {
|
||||
...rental,
|
||||
startDate: rental.startDate ? new Date(rental.startDate) : '',
|
||||
endDate: rental.endDate ? new Date(rental.endDate) : ''
|
||||
}
|
||||
this.rentalDialogVisible = true
|
||||
},
|
||||
handleRenew(rental) {
|
||||
const oldEndDate = new Date(rental.endDate)
|
||||
const newStartDate = new Date(oldEndDate)
|
||||
|
||||
const oldStartDate = new Date(rental.startDate)
|
||||
const monthsDiff = (oldEndDate.getFullYear() - oldStartDate.getFullYear()) * 12 + (oldEndDate.getMonth() - oldStartDate.getMonth())
|
||||
|
||||
const newEndDate = new Date(newStartDate)
|
||||
newEndDate.setMonth(newEndDate.getMonth() + monthsDiff)
|
||||
|
||||
this.rentalForm = {
|
||||
id: '',
|
||||
roomId: rental.roomId,
|
||||
tenantName: rental.tenantName,
|
||||
startDate: newStartDate,
|
||||
endDate: newEndDate,
|
||||
rent: rental.rent,
|
||||
deposit: rental.deposit,
|
||||
status: 'active',
|
||||
remark: '续租'
|
||||
}
|
||||
this.rentalDialogVisible = true
|
||||
},
|
||||
async handleSave() {
|
||||
try {
|
||||
if (this.rentalForm.id) {
|
||||
await rentalApi.update(this.rentalForm.id, this.rentalForm)
|
||||
this.$message.success('租赁记录更新成功')
|
||||
} else {
|
||||
await rentalApi.create(this.rentalForm)
|
||||
this.$message.success('租赁记录添加成功')
|
||||
}
|
||||
this.rentalDialogVisible = false
|
||||
this.loadData()
|
||||
} catch (error) {
|
||||
this.$message.error('操作失败')
|
||||
}
|
||||
},
|
||||
async handleDelete(id) {
|
||||
this.$confirm('确定要删除这条租赁记录吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'danger'
|
||||
}).then(async () => {
|
||||
try {
|
||||
await rentalApi.delete(id)
|
||||
this.$message.success('租赁记录删除成功')
|
||||
this.loadData()
|
||||
} catch (error) {
|
||||
this.$message.error('删除失败')
|
||||
}
|
||||
}).catch(() => {})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.rental-archive {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,346 @@
|
|||
<template>
|
||||
<div class="water-archive">
|
||||
<el-card>
|
||||
<template slot="header">
|
||||
<div class="card-header">
|
||||
<span>水费档案</span>
|
||||
<el-button type="primary" size="small" @click="handleAdd">添加水费</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<el-form :inline="true" :model="searchForm" class="search-form">
|
||||
<el-form-item label="公寓">
|
||||
<el-select v-model="searchForm.apartmentId" placeholder="请选择公寓" @change="handleApartmentChange">
|
||||
<el-option label="全部" value=""></el-option>
|
||||
<el-option v-for="apartment in apartments" :key="apartment.id" :label="apartment.name" :value="apartment.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="房间">
|
||||
<el-select v-model="searchForm.roomId" placeholder="请选择房间" :disabled="!searchForm.apartmentId">
|
||||
<el-option label="全部" value=""></el-option>
|
||||
<el-option v-for="room in rooms" :key="room.id" :label="room.roomNumber" :value="room.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="计费周期">
|
||||
<el-date-picker
|
||||
v-model="searchForm.billingPeriod"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
value-format="yyyy-MM-dd">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态">
|
||||
<el-select v-model="searchForm.status" placeholder="请选择状态">
|
||||
<el-option label="全部" value=""></el-option>
|
||||
<el-option label="未支付" value="unpaid"></el-option>
|
||||
<el-option label="已支付" value="paid"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleSearch">搜索</el-button>
|
||||
<el-button @click="resetSearch">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table :data="waterBillList" style="width: 100%" v-loading="isLoading">
|
||||
<el-table-column label="房间" width="150">
|
||||
<template slot-scope="scope">
|
||||
{{ getApartmentName(scope.row.roomId) }} - {{ getRoomNumber(scope.row.roomId) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="startDate" label="开始日期" width="120"></el-table-column>
|
||||
<el-table-column prop="endDate" label="结束日期" width="120"></el-table-column>
|
||||
<el-table-column prop="startReading" label="起始度数" width="120"></el-table-column>
|
||||
<el-table-column prop="endReading" label="结束度数" width="120"></el-table-column>
|
||||
<el-table-column prop="usage" label="用水量(吨)" width="120"></el-table-column>
|
||||
<el-table-column prop="unitPrice" label="单价(元/吨)" width="120"></el-table-column>
|
||||
<el-table-column prop="amount" label="费用(元)" width="100"></el-table-column>
|
||||
<el-table-column prop="status" label="状态" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="scope.row.status === 'paid' ? 'success' : 'warning'">
|
||||
{{ scope.row.status === 'paid' ? '已支付' : '未支付' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
|
||||
<el-table-column label="操作" width="150">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
|
||||
<el-button type="danger" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="pagination">
|
||||
<el-pagination
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="currentPage"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-dialog :title="waterBillForm.id ? '编辑水费' : '添加水费'" :visible.sync="waterBillDialogVisible" width="500px">
|
||||
<el-form :model="waterBillForm" :rules="waterBillRules" ref="waterBillForm">
|
||||
<el-form-item label="房间" prop="roomId">
|
||||
<el-select v-model="waterBillForm.roomId" placeholder="请选择房间" style="width: 100%">
|
||||
<el-option v-for="room in allRooms" :key="room.id" :label="`${getApartmentName(room.id)} - ${room.roomNumber}`" :value="room.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="开始日期" prop="startDate">
|
||||
<el-date-picker v-model="waterBillForm.startDate" type="date" placeholder="选择开始日期" style="width: 100%"></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="结束日期" prop="endDate">
|
||||
<el-date-picker v-model="waterBillForm.endDate" type="date" placeholder="选择结束日期" style="width: 100%"></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="起始度数" prop="startReading">
|
||||
<el-input v-model.number="waterBillForm.startReading" placeholder="请输入起始度数"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="结束度数" prop="endReading">
|
||||
<el-input v-model.number="waterBillForm.endReading" placeholder="请输入结束度数"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="单价(元/吨)" prop="unitPrice">
|
||||
<el-input v-model.number="waterBillForm.unitPrice" placeholder="请输入单价"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="waterBillForm.status" placeholder="请选择状态" style="width: 100%">
|
||||
<el-option label="未支付" value="unpaid"></el-option>
|
||||
<el-option label="已支付" value="paid"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="waterBillDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleSave">保存</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { waterBillApi, apartmentApi, roomApi } from '../../api/api'
|
||||
|
||||
export default {
|
||||
name: 'WaterArchive',
|
||||
data() {
|
||||
return {
|
||||
waterBillList: [],
|
||||
apartments: [],
|
||||
rooms: [],
|
||||
allRooms: [],
|
||||
isLoading: false,
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
searchForm: {
|
||||
apartmentId: '',
|
||||
roomId: '',
|
||||
billingPeriod: '',
|
||||
status: ''
|
||||
},
|
||||
waterBillDialogVisible: false,
|
||||
waterBillForm: {
|
||||
id: '',
|
||||
roomId: '',
|
||||
startDate: '',
|
||||
endDate: '',
|
||||
startReading: '',
|
||||
endReading: '',
|
||||
unitPrice: '',
|
||||
status: 'unpaid'
|
||||
},
|
||||
waterBillRules: {
|
||||
roomId: [{ required: true, message: '请选择房间', trigger: 'change' }],
|
||||
startDate: [{ required: true, message: '请选择开始日期', trigger: 'change' }],
|
||||
endDate: [{ required: true, message: '请选择结束日期', trigger: 'change' }],
|
||||
startReading: [{ required: true, message: '请输入起始度数', trigger: 'blur' }],
|
||||
endReading: [{ required: true, message: '请输入结束度数', trigger: 'blur' }],
|
||||
unitPrice: [{ required: true, message: '请输入单价', trigger: 'blur' }],
|
||||
status: [{ required: true, message: '请选择状态', trigger: 'change' }]
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.loadApartments()
|
||||
this.loadAllRooms()
|
||||
this.loadData()
|
||||
},
|
||||
methods: {
|
||||
async loadApartments() {
|
||||
try {
|
||||
const response = await apartmentApi.getAll()
|
||||
this.apartments = response.data || response
|
||||
} catch (error) {
|
||||
this.$message.error('加载公寓数据失败')
|
||||
}
|
||||
},
|
||||
async loadAllRooms() {
|
||||
try {
|
||||
const response = await roomApi.getAll()
|
||||
this.allRooms = response.data || response
|
||||
} catch (error) {
|
||||
this.$message.error('加载房间数据失败')
|
||||
}
|
||||
},
|
||||
async loadRooms() {
|
||||
if (!this.searchForm.apartmentId) {
|
||||
this.rooms = []
|
||||
return
|
||||
}
|
||||
try {
|
||||
const response = await roomApi.getAll({ apartmentId: this.searchForm.apartmentId })
|
||||
this.rooms = response.data || response
|
||||
} catch (error) {
|
||||
this.$message.error('加载房间数据失败')
|
||||
}
|
||||
},
|
||||
handleApartmentChange() {
|
||||
this.searchForm.roomId = ''
|
||||
this.loadRooms()
|
||||
},
|
||||
async loadData() {
|
||||
this.isLoading = true
|
||||
try {
|
||||
const params = {
|
||||
page: this.currentPage,
|
||||
pageSize: this.pageSize
|
||||
}
|
||||
|
||||
if (this.searchForm.apartmentId) {
|
||||
params.apartmentId = this.searchForm.apartmentId
|
||||
}
|
||||
if (this.searchForm.roomId) {
|
||||
params.roomId = this.searchForm.roomId
|
||||
}
|
||||
if (this.searchForm.status) {
|
||||
params.status = this.searchForm.status
|
||||
}
|
||||
if (this.searchForm.billingPeriod && Array.isArray(this.searchForm.billingPeriod) && this.searchForm.billingPeriod.length === 2) {
|
||||
params.startDateFrom = this.searchForm.billingPeriod[0]
|
||||
params.endDateTo = this.searchForm.billingPeriod[1]
|
||||
}
|
||||
|
||||
const response = await waterBillApi.getAll(params)
|
||||
this.waterBillList = response.data || response
|
||||
this.total = response.total || 0
|
||||
} catch (error) {
|
||||
this.$message.error('加载数据失败')
|
||||
} finally {
|
||||
this.isLoading = false
|
||||
}
|
||||
},
|
||||
handleSearch() {
|
||||
this.currentPage = 1
|
||||
this.loadData()
|
||||
},
|
||||
resetSearch() {
|
||||
this.searchForm = {
|
||||
apartmentId: '',
|
||||
roomId: '',
|
||||
billingPeriod: '',
|
||||
status: ''
|
||||
}
|
||||
this.rooms = []
|
||||
this.currentPage = 1
|
||||
this.loadData()
|
||||
},
|
||||
handleSizeChange(size) {
|
||||
this.pageSize = size
|
||||
this.currentPage = 1
|
||||
this.loadData()
|
||||
},
|
||||
handleCurrentChange(current) {
|
||||
this.currentPage = current
|
||||
this.loadData()
|
||||
},
|
||||
getApartmentName(roomId) {
|
||||
const room = this.allRooms.find(r => r.id == roomId)
|
||||
if (room) {
|
||||
const apartment = this.apartments.find(a => a.id == room.apartmentId)
|
||||
return apartment ? apartment.name : ''
|
||||
}
|
||||
return ''
|
||||
},
|
||||
getRoomNumber(roomId) {
|
||||
const room = this.allRooms.find(r => r.id == roomId)
|
||||
return room ? room.roomNumber : ''
|
||||
},
|
||||
handleAdd() {
|
||||
this.waterBillForm = {
|
||||
id: '',
|
||||
roomId: '',
|
||||
startDate: '',
|
||||
endDate: '',
|
||||
startReading: '',
|
||||
endReading: '',
|
||||
unitPrice: '',
|
||||
status: 'unpaid'
|
||||
}
|
||||
this.waterBillDialogVisible = true
|
||||
},
|
||||
handleEdit(waterBill) {
|
||||
this.waterBillForm = {
|
||||
...waterBill,
|
||||
startDate: waterBill.startDate ? new Date(waterBill.startDate) : '',
|
||||
endDate: waterBill.endDate ? new Date(waterBill.endDate) : ''
|
||||
}
|
||||
this.waterBillDialogVisible = true
|
||||
},
|
||||
async handleSave() {
|
||||
try {
|
||||
if (this.waterBillForm.id) {
|
||||
await waterBillApi.update(this.waterBillForm.id, this.waterBillForm)
|
||||
this.$message.success('水费记录更新成功')
|
||||
} else {
|
||||
await waterBillApi.create(this.waterBillForm)
|
||||
this.$message.success('水费记录添加成功')
|
||||
}
|
||||
this.waterBillDialogVisible = false
|
||||
this.loadData()
|
||||
} catch (error) {
|
||||
this.$message.error('操作失败')
|
||||
}
|
||||
},
|
||||
async handleDelete(id) {
|
||||
this.$confirm('确定要删除这条水费记录吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'danger'
|
||||
}).then(async () => {
|
||||
try {
|
||||
await waterBillApi.delete(id)
|
||||
this.$message.success('水费记录删除成功')
|
||||
this.loadData()
|
||||
} catch (error) {
|
||||
this.$message.error('删除失败')
|
||||
}
|
||||
}).catch(() => {})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.water-archive {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -33,7 +33,10 @@ export default {
|
|||
},
|
||||
computed: {
|
||||
totalCount() {
|
||||
return this.roomStatusData.reduce((sum, item) => sum + item.count, 0)
|
||||
// 只计算在租和空房的数量
|
||||
return this.roomStatusData
|
||||
.filter(item => item.status === '在租' || item.status === '空房')
|
||||
.reduce((sum, item) => sum + item.count, 0)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -44,10 +47,13 @@ export default {
|
|||
try {
|
||||
const response = await statisticsApi.getRoomStatus()
|
||||
const data = response
|
||||
const total = data.reduce((sum, item) => sum + item.count, 0)
|
||||
// 只计算在租和空房的数量作为总数
|
||||
const total = data
|
||||
.filter(item => item.status === '在租' || item.status === '空房')
|
||||
.reduce((sum, item) => sum + item.count, 0)
|
||||
this.roomStatusData = data.map(item => ({
|
||||
...item,
|
||||
percentage: `${((item.count / total) * 100).toFixed(2)}%`
|
||||
percentage: total > 0 ? `${((item.count / total) * 100).toFixed(2)}%` : '0.00%'
|
||||
}))
|
||||
} catch (error) {
|
||||
this.$message.error('加载房间状态统计数据失败')
|
||||
|
|
|
|||
Loading…
Reference in New Issue