471 lines
17 KiB
Vue
471 lines
17 KiB
Vue
<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>
|
|
|
|
<!-- PC端表格 -->
|
|
<div class="table-wrapper hidden-xs-only">
|
|
<el-table :data="rentalList" style="width: 100%" v-loading="isLoading">
|
|
<el-table-column prop="tenantName" label="租客" min-width="100"></el-table-column>
|
|
<el-table-column label="区域" min-width="150">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.Room.Apartment.Region.name }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="公寓" min-width="150">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.Room.Apartment.name }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="房间" min-width="150">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.Room.roomNumber}}
|
|
</template>
|
|
</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="rent" 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="status" label="状态" min-width="80">
|
|
<template slot-scope="scope">
|
|
<el-tag :type="scope.row.status === 'active' ? 'success' : 'danger'" size="small">
|
|
{{ scope.row.status === 'active' ? '在租' : '已到期' }}
|
|
</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="createTime" label="创建时间" min-width="150"></el-table-column>
|
|
<el-table-column label="操作" min-width="200" fixed="right">
|
|
<template slot-scope="scope">
|
|
<el-button type="primary" size="mini" @click="handleEdit(scope.row)">编辑</el-button>
|
|
<el-button type="success" size="mini" @click="handleRenew(scope.row)">续租</el-button>
|
|
<el-button type="danger" size="mini" @click="handleDelete(scope.row.id)">删除</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
|
|
<!-- 移动端卡片列表 -->
|
|
<div class="mobile-list hidden-sm-and-up">
|
|
<div v-for="item in rentalList" :key="item.id" class="mobile-card">
|
|
<div class="mobile-card-header">
|
|
<span class="mobile-card-title">{{ item.tenantName }}</span>
|
|
<el-tag :type="item.status === 'active' ? 'success' : 'danger'" size="mini">
|
|
{{ item.status === 'active' ? '在租' : '已到期' }}
|
|
</el-tag>
|
|
</div>
|
|
<div class="mobile-card-body">
|
|
<div class="mobile-card-item">
|
|
<span class="mobile-card-label">区域：</span>
|
|
<span class="mobile-card-value">{{ item.Room.Apartment.Region.name }}</span>
|
|
</div>
|
|
<div class="mobile-card-item">
|
|
<span class="mobile-card-label">公寓：</span>
|
|
<span class="mobile-card-value">{{ item.Room.Apartment.name }}</span>
|
|
</div>
|
|
<div class="mobile-card-item">
|
|
<span class="mobile-card-label">房间：</span>
|
|
<span class="mobile-card-value">{{ item.Room.roomNumber }}</span>
|
|
</div>
|
|
<div class="mobile-card-item">
|
|
<span class="mobile-card-label">租期：</span>
|
|
<span class="mobile-card-value">{{ item.startDate }} 至 {{ item.endDate }}</span>
|
|
</div>
|
|
<div class="mobile-card-item">
|
|
<span class="mobile-card-label">租金：</span>
|
|
<span class="mobile-card-value">¥{{ item.rent }}/月</span>
|
|
</div>
|
|
<div class="mobile-card-item">
|
|
<span class="mobile-card-label">押金：</span>
|
|
<span class="mobile-card-value">¥{{ item.deposit }}</span>
|
|
</div>
|
|
<div class="mobile-card-item" v-if="item.remark">
|
|
<span class="mobile-card-label">备注：</span>
|
|
<span class="mobile-card-value">{{ item.remark }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="mobile-card-footer">
|
|
<el-button type="primary" size="mini" @click="handleEdit(item)">编辑</el-button>
|
|
<el-button type="success" size="mini" @click="handleRenew(item)">续租</el-button>
|
|
<el-button type="danger" size="mini" @click="handleDelete(item.id)">删除</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pagination-wrapper">
|
|
<el-pagination
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
:current-page="currentPage"
|
|
:page-sizes="[10, 20, 50, 100]"
|
|
:page-size="pageSize"
|
|
:layout="isMobile ? 'prev, pager, next' : '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" label-width="80px">
|
|
<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="`${room.Apartment.name} - ${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' }]
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
isMobile() {
|
|
return window.innerWidth <= 768
|
|
}
|
|
},
|
|
mounted() {
|
|
this.loadApartments()
|
|
this.loadAllRooms()
|
|
this.loadData()
|
|
window.addEventListener('resize', this.handleResize)
|
|
},
|
|
beforeDestroy() {
|
|
window.removeEventListener('resize', this.handleResize)
|
|
},
|
|
methods: {
|
|
handleResize() {
|
|
this.$forceUpdate()
|
|
},
|
|
async loadApartments() {
|
|
try {
|
|
const response = await apartmentApi.list()
|
|
this.apartments = response.data || response
|
|
} catch (error) {
|
|
this.$message.error('加载公寓数据失败')
|
|
}
|
|
},
|
|
async loadAllRooms() {
|
|
try {
|
|
const response = await roomApi.list()
|
|
this.allRooms = response.data || response
|
|
} catch (error) {
|
|
this.$message.error('加载房间数据失败')
|
|
}
|
|
},
|
|
async loadRooms() {
|
|
if (!this.searchForm.apartmentId) {
|
|
this.rooms = []
|
|
return
|
|
}
|
|
try {
|
|
const response = await roomApi.list({ 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: 0;
|
|
}
|
|
|
|
.card-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.search-form {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.pagination-wrapper {
|
|
margin-top: 20px;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
/* 移动端适配 */
|
|
@media screen and (max-width: 768px) {
|
|
.search-form .el-form-item {
|
|
display: block;
|
|
margin-right: 0;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.search-form .el-form-item__content {
|
|
width: 100%;
|
|
}
|
|
|
|
.search-form .el-select,
|
|
.search-form .el-date-picker {
|
|
width: 100%;
|
|
}
|
|
|
|
.pagination-wrapper {
|
|
justify-content: center;
|
|
}
|
|
}
|
|
</style>
|