租房日历模块

src/api/api.js

@@ -47,7 +47,8 @@ export const rentalApi = {
   getById: (id) => get(`/rentals/${id}`),
   create: (data) => post('/rentals', data),
   update: (id, data) => put(`/rentals/${id}`, data),
-  delete: (id) => del(`/rentals/${id}`)
+  delete: (id) => del(`/rentals/${id}`),
+  getCalendar: (params = {}) => get('/rentals/calendar', params)
 };
 
 // 统计分析API

src/router/index.js

@@ -66,6 +66,11 @@ const routes = [
         name: 'RentalList',
         component: () => import('@/views/rental/List.vue')
       },
+      {
+        path: '/rental/calendar',
+        name: 'RentalCalendar',
+        component: () => import('@/views/rental/Calendar.vue')
+      },
       {
         path: '/rental/add',
         name: 'RentalAdd',

src/views/rental/Calendar.vue

@@ -0,0 +1,344 @@
+<template>
+  <div class="rental-calendar">
+    <div class="page-header">
+      <h2>租房日历</h2>
+      <div class="legend">
+        <span class="legend-item"><span class="dot dot-active"></span> 在租</span>
+        <span class="legend-item"><span class="dot dot-soon"></span> 即将到期(≤5天)</span>
+        <span class="legend-item"><span class="dot dot-expired"></span> 已到期</span>
+      </div>
+    </div>
+
+    <el-card class="filter-bar">
+      <el-form :inline="true" size="small">
+        <el-form-item label="公寓">
+          <el-select v-model="filterApartmentId" placeholder="全部公寓" clearable style="width:160px" @change="loadData">
+            <el-option v-for="item in apartments" :key="item.id" :label="item.name" :value="item.id"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="租客">
+          <el-input v-model="filterTenantName" placeholder="租客姓名" clearable style="width:160px" @keyup.enter.native="loadData"></el-input>
+        </el-form-item>
+        <el-form-item label="附属状态">
+          <el-select v-model="filterSubStatus" placeholder="全部" clearable style="width:140px" @change="handleFilterChange">
+            <el-option label="正常" value="normal"></el-option>
+            <el-option label="即将到期" value="soon_expire"></el-option>
+            <el-option label="已到期" value="expired"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="loadData">查询</el-button>
+          <el-button @click="resetFilters">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <el-card v-loading="loading" style="margin-top:20px">
+      <el-calendar v-model="currentDate">
+        <template slot="dateCell" slot-scope="{ date, data }">
+          <div class="calendar-cell" :class="{ 'is-current-month': data.type === 'current-month' }">
+            <div class="cell-day">{{ data.day.split('-').pop() }}</div>
+            <div class="cell-items" v-if="getItemsForDate(data.day).length > 0">
+              <div
+                class="cell-item"
+                v-for="item in getItemsForDate(data.day).slice(0, 3)"
+                :key="item.id"
+                :class="item.statusClass"
+                :title="item.tenantName + '(' + item.apartmentName + '-' + item.roomNumber + ')'"
+                @click="goToDetail(item.roomId)"
+              >
+                {{ item.tenantName }}({{ item.apartmentName }}-{{ item.roomNumber }})
+              </div>
+              <div class="cell-more" v-if="getItemsForDate(data.day).length > 3" @click="showDayDetail(data.day)">
+                +{{ getItemsForDate(data.day).length - 3 }} 更多
+              </div>
+            </div>
+          </div>
+        </template>
+      </el-calendar>
+    </el-card>
+
+    <el-dialog :visible.sync="dayDialogVisible" :title="formatSelectedDate + ' —— 租约到期日（' + selectedDayItems.length + ' 条）'" width="70%" @close="selectedDate = null">
+      <el-table :data="selectedDayItems" stripe style="width: 100%">
+        <el-table-column prop="apartmentName" label="公寓名称" min-width="120"></el-table-column>
+        <el-table-column prop="roomNumber" label="房间号" width="100"></el-table-column>
+        <el-table-column prop="tenantName" label="租客姓名" min-width="120"></el-table-column>
+        <el-table-column prop="rent" label="租金" width="120">
+          <template slot-scope="scope">¥{{ scope.row.rent }}</template>
+        </el-table-column>
+        <el-table-column prop="deposit" label="押金" width="120">
+          <template slot-scope="scope">¥{{ scope.row.deposit }}</template>
+        </el-table-column>
+        <el-table-column label="状态" width="120">
+          <template slot-scope="scope">
+            <el-tag :type="scope.row.subStatus === 'expired' ? 'danger' : scope.row.subStatus === 'soon_expire' ? 'warning' : 'success'" size="small">
+              {{ subStatusLabels[scope.row.subStatus] }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="80">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click="goToDetail(scope.row.roomId)">查看</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { rentalApi, apartmentApi } from '@/api/api'
+
+export default {
+  name: 'RentalCalendar',
+  data() {
+    return {
+      currentDate: new Date(),
+      rentals: [],
+      loading: false,
+      selectedDate: null,
+      dayDialogVisible: false,
+      apartments: [],
+      filterApartmentId: null,
+      filterTenantName: '',
+      filterSubStatus: ''
+    }
+  },
+  computed: {
+    subStatusLabels() {
+      return { normal: '正常', soon_expire: '即将到期', expired: '已到期' }
+    },
+    allRentalMap() {
+      const map = {}
+      this.rentals.forEach(item => {
+        const subStatus = item.subStatus
+        const date = item.endDate
+        if (!map[date]) {
+          map[date] = []
+        }
+        map[date].push({
+          id: item.id,
+          roomId: item.roomId,
+          tenantName: item.tenantName,
+          roomNumber: item.roomNumber,
+          apartmentName: item.apartmentName,
+          endDate: item.endDate,
+          status: item.status,
+          subStatus,
+          rent: item.rent,
+          deposit: item.deposit,
+          statusClass: this.subStatusToClass(subStatus)
+        })
+      })
+      return map
+    },
+    rentalMap() {
+      if (!this.filterSubStatus) return this.allRentalMap
+      const filtered = {}
+      for (const [date, items] of Object.entries(this.allRentalMap)) {
+        const matched = items.filter(i => i.subStatus === this.filterSubStatus)
+        if (matched.length > 0) {
+          filtered[date] = matched
+        }
+      }
+      return filtered
+    },
+    selectedDayItems() {
+      if (!this.selectedDate) return []
+      return this.getItemsForDate(this.selectedDate)
+    },
+    formatSelectedDate() {
+      if (!this.selectedDate) return ''
+      const parts = this.selectedDate.split('-')
+      return `${parts[0]}年${parseInt(parts[1])}月${parseInt(parts[2])}日`
+    }
+  },
+  mounted() {
+    this.loadApartments()
+    this.loadData()
+  },
+  watch: {
+    currentDate(newVal, oldVal) {
+      if (!oldVal || newVal.getMonth() !== oldVal.getMonth() || newVal.getFullYear() !== oldVal.getFullYear()) {
+        this.selectedDate = null
+        this.dayDialogVisible = false
+        this.loadData()
+      }
+    }
+  },
+  methods: {
+    async loadApartments() {
+      try {
+        const res = await apartmentApi.list()
+        this.apartments = res.data || res || []
+      } catch (e) {
+        this.apartments = []
+      }
+    },
+    async loadData() {
+      this.loading = true
+      try {
+        const year = this.currentDate.getFullYear()
+        const month = this.currentDate.getMonth() + 1
+        const params = { year, month }
+        if (this.filterApartmentId) params.apartmentId = this.filterApartmentId
+        if (this.filterTenantName) params.tenantName = this.filterTenantName
+        const response = await rentalApi.getCalendar(params)
+        this.rentals = response.data || response || []
+      } catch (error) {
+        this.$message.error('加载日历数据失败')
+        this.rentals = []
+      } finally {
+        this.loading = false
+      }
+    },
+    handleFilterChange() {
+      this.selectedDate = null
+      this.dayDialogVisible = false
+    },
+    resetFilters() {
+      this.filterApartmentId = null
+      this.filterTenantName = ''
+      this.filterSubStatus = ''
+      this.selectedDate = null
+      this.dayDialogVisible = false
+    },
+    showDayDetail(dateStr) {
+      this.selectedDate = dateStr
+      this.dayDialogVisible = true
+    },
+    getItemsForDate(dateStr) {
+      return this.rentalMap[dateStr] || []
+    },
+    subStatusToClass(subStatus) {
+      const map = { normal: 'status-active', soon_expire: 'status-soon', expired: 'status-expired' }
+      return map[subStatus] || ''
+    },
+    goToDetail(roomId) {
+      this.$router.push(`/rental/detail/${roomId}`)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.rental-calendar {
+  padding: 0;
+}
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.page-header h2 {
+  margin: 0;
+  font-size: 20px;
+  color: #303133;
+}
+
+.legend {
+  display: flex;
+  gap: 16px;
+  font-size: 13px;
+  color: #606266;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+.dot-active {
+  background-color: #67c23a;
+}
+
+.dot-soon {
+  background-color: #e6a23c;
+}
+
+.dot-expired {
+  background-color: #f56c6c;
+}
+
+::v-deep .el-calendar-day {
+  height: auto;
+  min-height: 100px;
+}
+
+.calendar-cell {
+  min-height: 100px;
+  padding: 2px;
+}
+
+.cell-day {
+  font-size: 13px;
+  color: #909399;
+  margin-bottom: 2px;
+}
+
+.is-current-month .cell-day {
+  color: #303133;
+  font-weight: 500;
+}
+
+.cell-items {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.cell-item {
+  font-size: 11px;
+  padding: 1px 4px;
+  border-radius: 3px;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 1.6;
+  transition: opacity 0.2s;
+}
+
+.cell-item:hover {
+  opacity: 0.8;
+}
+
+.cell-item.status-active {
+  background-color: #f0f9eb;
+  color: #67c23a;
+}
+
+.cell-item.status-soon {
+  background-color: #fdf6ec;
+  color: #e6a23c;
+}
+
+.cell-item.status-expired {
+  background-color: #fef0f0;
+  color: #f56c6c;
+}
+
+.cell-more {
+  font-size: 11px;
+  color: #409eff;
+  cursor: pointer;
+  padding: 1px 4px;
+}
+
+.cell-more:hover {
+  text-decoration: underline;
+}
+
+
+</style>

src/views/rental/Detail.vue

@@ -786,7 +786,11 @@ export default {
       }).catch(() => {})
     },
     goBack() {
+      if (this.returnQuery && Object.keys(this.returnQuery).length > 0) {
         this.$router.push({ path: '/rental/list', query: this.returnQuery })
+      } else {
+        this.$router.go(-1)
+      }
     },
     getDefaultTenantName() {
       const userInfo = getUserInfo()