This commit is contained in:
wangxiaoxian 2026-03-07 15:24:34 +08:00
parent de9df89004
commit 0da0b3fab3
3 changed files with 123 additions and 38 deletions

View File

@ -51,7 +51,7 @@
<el-table-column prop="tenantName" label="租客" min-width="100"></el-table-column> <el-table-column prop="tenantName" label="租客" min-width="100"></el-table-column>
<el-table-column prop="startDate" label="开始日期" min-width="100"></el-table-column> <el-table-column prop="startDate" label="开始日期" min-width="100"></el-table-column>
<el-table-column prop="endDate" label="结束日期" min-width="100"></el-table-column> <el-table-column prop="endDate" label="结束日期" min-width="100"></el-table-column>
<el-table-column prop="rent" label="租金(元/月)" min-width="100"></el-table-column> <el-table-column prop="rent" label="租金(元)" min-width="100"></el-table-column>
<el-table-column prop="deposit" label="押金(元)" min-width="90"></el-table-column> <el-table-column prop="deposit" label="押金(元)" min-width="90"></el-table-column>
<el-table-column prop="remark" label="备注" min-width="120"></el-table-column> <el-table-column prop="remark" label="备注" min-width="120"></el-table-column>
<el-table-column prop="status" label="状态" min-width="80"> <el-table-column prop="status" label="状态" min-width="80">
@ -102,8 +102,8 @@
</el-table-column> </el-table-column>
<el-table-column prop="status" label="状态" min-width="80"> <el-table-column prop="status" label="状态" min-width="80">
<template slot-scope="scope"> <template slot-scope="scope">
<el-tag :type="scope.row.status === 'paid' ? 'success' : 'warning'" size="small"> <el-tag :type="getWaterBillStatusType(scope.row.status)" size="small">
{{ scope.row.status === 'paid' ? '已支付' : '未支付' }} {{ getWaterBillStatusText(scope.row.status) }}
</el-tag> </el-tag>
</template> </template>
</el-table-column> </el-table-column>
@ -139,16 +139,17 @@
<el-date-picker v-model="waterBillForm.endDate" type="date" placeholder="选择结束日期" style="width: 100%"></el-date-picker> <el-date-picker v-model="waterBillForm.endDate" type="date" placeholder="选择结束日期" style="width: 100%"></el-date-picker>
</el-form-item> </el-form-item>
<el-form-item label="起始度数" prop="startReading"> <el-form-item label="起始度数" prop="startReading">
<el-input v-model.number="waterBillForm.startReading" placeholder="请输入起始度数"></el-input> <el-input v-model="waterBillForm.startReading" placeholder="请输入起始度数"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="结束度数" prop="endReading"> <el-form-item label="结束度数" prop="endReading">
<el-input v-model.number="waterBillForm.endReading" placeholder="请输入结束度数"></el-input> <el-input v-model="waterBillForm.endReading" placeholder="请输入结束度数"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="单价(元/吨)" prop="unitPrice"> <el-form-item label="单价(元/吨)" prop="unitPrice">
<el-input v-model.number="waterBillForm.unitPrice" placeholder="请输入单价"></el-input> <el-input v-model="waterBillForm.unitPrice" placeholder="请输入单价"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="状态" prop="status"> <el-form-item label="状态" prop="status">
<el-select v-model="waterBillForm.status" placeholder="请选择状态" style="width: 100%"> <el-select v-model="waterBillForm.status" placeholder="请选择状态" style="width: 100%">
<el-option label="未出账" value="unbilled"></el-option>
<el-option label="未支付" value="unpaid"></el-option> <el-option label="未支付" value="unpaid"></el-option>
<el-option label="已支付" value="paid"></el-option> <el-option label="已支付" value="paid"></el-option>
</el-select> </el-select>
@ -226,14 +227,21 @@ export default {
startReading: '', startReading: '',
endReading: '', endReading: '',
unitPrice: '', unitPrice: '',
status: 'unpaid' status: 'unbilled'
}, },
waterBillRules: { waterBillRules: {
startDate: [{ required: true, message: '请选择开始日期', trigger: 'change' }], startDate: [{ required: true, message: '请选择开始日期', trigger: 'change' }],
endDate: [{ required: true, message: '请选择结束日期', trigger: 'change' }], startReading: [
startReading: [{ required: true, message: '请输入起始度数', trigger: 'blur' }], { required: true, message: '请输入起始度数', trigger: 'blur' },
endReading: [{ required: true, message: '请输入结束度数', trigger: 'blur' }], { pattern: /^\d+(\.\d{1,2})?$/, message: '请输入有效的数字,最多保留两位小数', trigger: 'blur' }
unitPrice: [{ required: true, message: '请输入单价', trigger: 'blur' }], ],
endReading: [
{ pattern: /^\d+(\.\d{1,2})?$/, message: '请输入有效的数字,最多保留两位小数', trigger: 'blur' }
],
unitPrice: [
{ required: true, message: '请输入单价', trigger: 'blur' },
{ pattern: /^\d+(\.\d{1,2})?$/, message: '请输入有效的数字,最多保留两位小数', trigger: 'blur' }
],
status: [{ required: true, message: '请选择状态', trigger: 'change' }] status: [{ required: true, message: '请选择状态', trigger: 'change' }]
}, },
rentalDialogVisible: false, rentalDialogVisible: false,
@ -280,6 +288,30 @@ export default {
} }
}, },
methods: { methods: {
formatDate(date) {
if (!date) return null
const d = new Date(date)
const year = d.getFullYear()
const month = String(d.getMonth() + 1).padStart(2, '0')
const day = String(d.getDate()).padStart(2, '0')
return `${year}-${month}-${day}`
},
getWaterBillStatusType(status) {
switch (status) {
case 'paid': return 'success'
case 'unpaid': return 'warning'
case 'unbilled': return 'info'
default: return ''
}
},
getWaterBillStatusText(status) {
switch (status) {
case 'paid': return '已支付'
case 'unpaid': return '未支付'
case 'unbilled': return '未出账'
default: return status
}
},
handleResize() { handleResize() {
this.$forceUpdate() this.$forceUpdate()
}, },
@ -494,12 +526,12 @@ export default {
this.waterBillForm = { this.waterBillForm = {
id: '', id: '',
roomId: this.$route.params.id, roomId: this.$route.params.id,
startDate: '', startDate: new Date(),
endDate: '', endDate: '',
startReading: '', startReading: '',
endReading: '', endReading: '',
unitPrice: '', unitPrice: '',
status: 'unpaid' status: 'unbilled'
} }
this.waterBillDialogVisible = true this.waterBillDialogVisible = true
}, },
@ -514,11 +546,21 @@ export default {
async handleSaveWaterBill() { async handleSaveWaterBill() {
try { try {
const roomId = this.$route.params.id const roomId = this.$route.params.id
const data = {
roomId,
startDate: this.waterBillForm.startDate ? this.formatDate(this.waterBillForm.startDate) : null,
endDate: this.waterBillForm.endDate ? this.formatDate(this.waterBillForm.endDate) : null,
startReading: this.waterBillForm.startReading !== '' ? parseFloat(this.waterBillForm.startReading) : null,
endReading: this.waterBillForm.endReading !== '' ? parseFloat(this.waterBillForm.endReading) : null,
unitPrice: this.waterBillForm.unitPrice !== '' ? parseFloat(this.waterBillForm.unitPrice) : null,
status: this.waterBillForm.status
}
if (this.waterBillForm.id) { if (this.waterBillForm.id) {
await waterBillApi.update(this.waterBillForm.id, this.waterBillForm) await waterBillApi.update(this.waterBillForm.id, data)
this.$message.success('水费记录更新成功') this.$message.success('水费记录更新成功')
} else { } else {
await waterBillApi.create({ ...this.waterBillForm, roomId }) await waterBillApi.create(data)
this.$message.success('水费记录添加成功') this.$message.success('水费记录添加成功')
} }
this.waterBillDialogVisible = false this.waterBillDialogVisible = false

View File

@ -73,7 +73,7 @@
</el-table-column> </el-table-column>
<el-table-column prop="startDate" label="开始日期" min-width="100"></el-table-column> <el-table-column prop="startDate" label="开始日期" min-width="100"></el-table-column>
<el-table-column prop="endDate" label="结束日期" min-width="100"></el-table-column> <el-table-column prop="endDate" label="结束日期" min-width="100"></el-table-column>
<el-table-column prop="rent" label="租金(元/月)" min-width="100"></el-table-column> <el-table-column prop="rent" label="租金(元)" min-width="100"></el-table-column>
<el-table-column prop="deposit" label="押金(元)" min-width="100"></el-table-column> <el-table-column prop="deposit" label="押金(元)" min-width="100"></el-table-column>
<el-table-column prop="remark" label="备注" min-width="120"></el-table-column> <el-table-column prop="remark" label="备注" min-width="120"></el-table-column>
<el-table-column prop="status" label="状态" min-width="80"> <el-table-column prop="status" label="状态" min-width="80">

View File

@ -33,6 +33,7 @@
<el-form-item label="状态"> <el-form-item label="状态">
<el-select v-model="searchForm.status" placeholder="请选择状态"> <el-select v-model="searchForm.status" placeholder="请选择状态">
<el-option label="全部" value=""></el-option> <el-option label="全部" value=""></el-option>
<el-option label="未出账" value="unbilled"></el-option>
<el-option label="未支付" value="unpaid"></el-option> <el-option label="未支付" value="unpaid"></el-option>
<el-option label="已支付" value="paid"></el-option> <el-option label="已支付" value="paid"></el-option>
</el-select> </el-select>
@ -64,8 +65,8 @@
</el-table-column> </el-table-column>
<el-table-column prop="status" label="状态" min-width="80"> <el-table-column prop="status" label="状态" min-width="80">
<template slot-scope="scope"> <template slot-scope="scope">
<el-tag :type="scope.row.status === 'paid' ? 'success' : 'warning'" size="small"> <el-tag :type="getWaterBillStatusType(scope.row.status)" size="small">
{{ scope.row.status === 'paid' ? '已支付' : '未支付' }} {{ getWaterBillStatusText(scope.row.status) }}
</el-tag> </el-tag>
</template> </template>
</el-table-column> </el-table-column>
@ -84,8 +85,8 @@
<div v-for="item in waterBillList" :key="item.id" class="mobile-card"> <div v-for="item in waterBillList" :key="item.id" class="mobile-card">
<div class="mobile-card-header"> <div class="mobile-card-header">
<span class="mobile-card-title">{{ getApartmentName(item.roomId) }} - {{ getRoomNumber(item.roomId) }}</span> <span class="mobile-card-title">{{ getApartmentName(item.roomId) }} - {{ getRoomNumber(item.roomId) }}</span>
<el-tag :type="item.status === 'paid' ? 'success' : 'warning'" size="mini"> <el-tag :type="getWaterBillStatusType(item.status)" size="mini">
{{ item.status === 'paid' ? '已支付' : '未支付' }} {{ getWaterBillStatusText(item.status) }}
</el-tag> </el-tag>
</div> </div>
<div class="mobile-card-body"> <div class="mobile-card-body">
@ -144,16 +145,17 @@
<el-date-picker v-model="waterBillForm.endDate" type="date" placeholder="选择结束日期" style="width: 100%"></el-date-picker> <el-date-picker v-model="waterBillForm.endDate" type="date" placeholder="选择结束日期" style="width: 100%"></el-date-picker>
</el-form-item> </el-form-item>
<el-form-item label="起始度数" prop="startReading"> <el-form-item label="起始度数" prop="startReading">
<el-input v-model.number="waterBillForm.startReading" placeholder="请输入起始度数"></el-input> <el-input v-model="waterBillForm.startReading" placeholder="请输入起始度数"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="结束度数" prop="endReading"> <el-form-item label="结束度数" prop="endReading">
<el-input v-model.number="waterBillForm.endReading" placeholder="请输入结束度数"></el-input> <el-input v-model="waterBillForm.endReading" placeholder="请输入结束度数"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="单价(元/吨)" prop="unitPrice"> <el-form-item label="单价(元/吨)" prop="unitPrice">
<el-input v-model.number="waterBillForm.unitPrice" placeholder="请输入单价"></el-input> <el-input v-model="waterBillForm.unitPrice" placeholder="请输入单价"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="状态" prop="status"> <el-form-item label="状态" prop="status">
<el-select v-model="waterBillForm.status" placeholder="请选择状态" style="width: 100%"> <el-select v-model="waterBillForm.status" placeholder="请选择状态" style="width: 100%">
<el-option label="未出账" value="unbilled"></el-option>
<el-option label="未支付" value="unpaid"></el-option> <el-option label="未支付" value="unpaid"></el-option>
<el-option label="已支付" value="paid"></el-option> <el-option label="已支付" value="paid"></el-option>
</el-select> </el-select>
@ -197,15 +199,22 @@ export default {
startReading: '', startReading: '',
endReading: '', endReading: '',
unitPrice: '', unitPrice: '',
status: 'unpaid' status: 'unbilled'
}, },
waterBillRules: { waterBillRules: {
roomId: [{ required: true, message: '请选择房间', trigger: 'change' }], roomId: [{ required: true, message: '请选择房间', trigger: 'change' }],
startDate: [{ required: true, message: '请选择开始日期', trigger: 'change' }], startDate: [{ required: true, message: '请选择开始日期', trigger: 'change' }],
endDate: [{ required: true, message: '请选择结束日期', trigger: 'change' }], startReading: [
startReading: [{ required: true, message: '请输入起始度数', trigger: 'blur' }], { required: true, message: '请输入起始度数', trigger: 'blur' },
endReading: [{ required: true, message: '请输入结束度数', trigger: 'blur' }], { pattern: /^\d+(\.\d{1,2})?$/, message: '请输入有效的数字,最多保留两位小数', trigger: 'blur' }
unitPrice: [{ required: true, message: '请输入单价', trigger: 'blur' }], ],
endReading: [
{ pattern: /^\d+(\.\d{1,2})?$/, message: '请输入有效的数字,最多保留两位小数', trigger: 'blur' }
],
unitPrice: [
{ required: true, message: '请输入单价', trigger: 'blur' },
{ pattern: /^\d+(\.\d{1,2})?$/, message: '请输入有效的数字,最多保留两位小数', trigger: 'blur' }
],
status: [{ required: true, message: '请选择状态', trigger: 'change' }] status: [{ required: true, message: '请选择状态', trigger: 'change' }]
} }
} }
@ -225,6 +234,30 @@ export default {
window.removeEventListener('resize', this.handleResize) window.removeEventListener('resize', this.handleResize)
}, },
methods: { methods: {
formatDate(date) {
if (!date) return null
const d = new Date(date)
const year = d.getFullYear()
const month = String(d.getMonth() + 1).padStart(2, '0')
const day = String(d.getDate()).padStart(2, '0')
return `${year}-${month}-${day}`
},
getWaterBillStatusType(status) {
switch (status) {
case 'paid': return 'success'
case 'unpaid': return 'warning'
case 'unbilled': return 'info'
default: return ''
}
},
getWaterBillStatusText(status) {
switch (status) {
case 'paid': return '已支付'
case 'unpaid': return '未支付'
case 'unbilled': return '未出账'
default: return status
}
},
handleResize() { handleResize() {
this.$forceUpdate() this.$forceUpdate()
}, },
@ -331,12 +364,12 @@ export default {
this.waterBillForm = { this.waterBillForm = {
id: '', id: '',
roomId: '', roomId: '',
startDate: '', startDate: new Date(),
endDate: '', endDate: '',
startReading: '', startReading: '',
endReading: '', endReading: '',
unitPrice: '', unitPrice: '',
status: 'unpaid' status: 'unbilled'
} }
this.waterBillDialogVisible = true this.waterBillDialogVisible = true
}, },
@ -350,11 +383,21 @@ export default {
}, },
async handleSave() { async handleSave() {
try { try {
const data = {
roomId: this.waterBillForm.roomId,
startDate: this.waterBillForm.startDate ? this.formatDate(this.waterBillForm.startDate) : null,
endDate: this.waterBillForm.endDate ? this.formatDate(this.waterBillForm.endDate) : null,
startReading: this.waterBillForm.startReading !== '' ? parseFloat(this.waterBillForm.startReading) : null,
endReading: this.waterBillForm.endReading !== '' ? parseFloat(this.waterBillForm.endReading) : null,
unitPrice: this.waterBillForm.unitPrice !== '' ? parseFloat(this.waterBillForm.unitPrice) : null,
status: this.waterBillForm.status
}
if (this.waterBillForm.id) { if (this.waterBillForm.id) {
await waterBillApi.update(this.waterBillForm.id, this.waterBillForm) await waterBillApi.update(this.waterBillForm.id, data)
this.$message.success('水费记录更新成功') this.$message.success('水费记录更新成功')
} else { } else {
await waterBillApi.create(this.waterBillForm) await waterBillApi.create(data)
this.$message.success('水费记录添加成功') this.$message.success('水费记录添加成功')
} }
this.waterBillDialogVisible = false this.waterBillDialogVisible = false