rentease-web/src/views/house/List.vue

<template>
  <div class="house-list">
    <el-card>
      <template slot="header">
        <div class="card-header">
          <span>房源管理</span>
          <el-button type="primary" @click="handleAdd">添加房源</el-button>
        </div>
      </template>
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="区域">
          <el-select v-model="searchForm.regionId" placeholder="请选择区域">
            <el-option label="全部" value=""></el-option>
            <el-option v-for="region in regions" :key="region.id" :label="region.name" :value="region.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="searchForm.status" placeholder="请选择状态">
            <el-option label="全部" value=""></el-option>
            <el-option label="可租" value="available"></el-option>
            <el-option label="已租" value="rented"></el-option>
            <el-option label="维护中" value="maintenance"></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="filteredHouses" style="width: 100%">
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column prop="regionName" label="区域"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
        <el-table-column prop="area" label="面积(㎡)" width="100"></el-table-column>
        <el-table-column prop="price" label="租金(元/月)" width="120"></el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template slot-scope="scope">
            <el-tag :type="getStatusType(scope.row.status)">{{ getStatusText(scope.row.status) }}</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 size="small" type="primary" @click="handleEdit(scope.row.id)">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination" style="margin-top: 20px;">
        <el-pagination
          layout="prev, pager, next"
          :total="filteredHouses.length"
          :page-size="10"
          :current-page="currentPage"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { regionApi, houseApi } from '../../api/api'

export default {
  name: 'HouseList',
  data() {
    return {
      regions: [],
      houses: [],
      searchForm: {
        regionId: '',
        status: ''
      },
      currentPage: 1
    }
  },
  computed: {
    filteredHouses() {
      return this.houses.filter(house => {
        const regionMatch = !this.searchForm.regionId || house.regionId == this.searchForm.regionId
        const statusMatch = !this.searchForm.status || house.status == this.searchForm.status
        return regionMatch && statusMatch
      })
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    async loadData() {
      try {
        // 加载区域数据
        const regionsResponse = await regionApi.getAll()
        this.regions = regionsResponse
        
        // 加载房源数据
        const housesResponse = await houseApi.getAll()
        this.houses = housesResponse.map(house => {
          const region = regionsResponse.find(r => r.id == house.regionId)
          return {
            ...house,
            regionName: region ? region.name : ''
          }
        })
      } catch (error) {
        this.$message.error('加载数据失败')
      }
    },
    getStatusType(status) {
      switch (status) {
        case 'available': return 'success'
        case 'rented': return 'warning'
        case 'maintenance': return 'danger'
        default: return ''
      }
    },
    getStatusText(status) {
      switch (status) {
        case 'available': return '可租'
        case 'rented': return '已租'
        case 'maintenance': return '维护中'
        default: return status
      }
    },
    handleAdd() {
      this.$router.push('/house/add')
    },
    handleEdit(id) {
      this.$router.push(`/house/edit/${id}`)
    },
    async handleDelete(id) {
      this.$confirm('确定要删除这个房源吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await houseApi.delete(id)
          this.$message.success('删除成功')
          this.loadData()
        } catch (error) {
          this.$message.error('删除失败')
        }
      }).catch(() => {
        // 取消删除
      })
    },
    handleSearch() {
      // 搜索逻辑
    },
    resetSearch() {
      this.searchForm = {
        regionId: '',
        status: ''
      }
    },
    handleCurrentChange(val) {
      this.currentPage = val
    }
  }
}
</script>

<style scoped>
.house-list {
  padding: 20px 0;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-form {
  margin-bottom: 20px;
}

.pagination {
  display: flex;
  justify-content: flex-end;
}
</style>