update

src/api/community.js

@@ -1,9 +1,19 @@
 import request from '@/utils/request'
 
+// 获取小区列表
 export function getCommunityList(params) {
   return request({
     url: '/api/community',
     method: 'get',
     params
   })
+}
+
+// 获取楼栋列表
+export function getBuildingList(params) {
+  return request({
+    url: '/api/community/building/list',
+    method: 'get',
+    params
+  })
 } 

src/main.js

@@ -15,7 +15,8 @@ import {
   Popconfirm,
   Divider,
   Tag,
-  Modal
+  Modal,
+  Select
 } from 'ant-design-vue'
 import 'ant-design-vue/dist/antd.css'
 
@@ -37,5 +38,6 @@ app.use(Popconfirm)
 app.use(Divider)
 app.use(Tag)
 app.use(Modal)
+app.use(Select)
 
 app.mount('#app') 

src/views/community/BuildingList.vue

@@ -1,10 +1,34 @@
 <template>
   <div class="building-list">
-    <h1>楼栋列表</h1>
+    <div class="table-header">
-    <a-table :columns="columns" :data-source="data">
+      <h1>楼栋列表</h1>
-      <template #headerCell="{ column }">
+      <a-select
-        <template v-if="column.key === 'name'">
+        v-model:value="selectedCommunity"
-          <span>楼栋名称</span>
+        style="width: 200px"
+        placeholder="请选择小区"
+        @change="handleCommunityChange"
+      >
+        <a-select-option 
+          v-for="item in communityOptions" 
+          :key="item.id" 
+          :value="item.id"
+        >
+          {{ item.name }}
+        </a-select-option>
+      </a-select>
+    </div>
+    
+    <a-table 
+      :columns="columns" 
+      :data-source="tableData" 
+      :pagination="pagination"
+      :loading="loading"
+      @change="handleTableChange"
+      row-key="id"
+    >
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'create_time'">
+          {{ formatDateTime(record.create_time) }}
         </template>
       </template>
     </a-table>
@@ -12,34 +36,153 @@
 </template>
 
 <script>
-import { defineComponent, ref } from 'vue'
+import { defineComponent, ref, onMounted } from 'vue'
+import { message } from 'ant-design-vue'
+import { getCommunityList, getBuildingList } from '@/api/community'
+import dayjs from 'dayjs'
 
 export default defineComponent({
   setup() {
+    const loading = ref(false)
+    const tableData = ref([])
+    const communityOptions = ref([])
+    const selectedCommunity = ref(undefined)
+    
+    const pagination = ref({
+      current: 1,
+      pageSize: 10,
+      total: 0,
+      showSizeChanger: true,
+      showTotal: (total) => `共 ${total} 条记录`
+    })
+
     const columns = [
       {
-        title: '楼栋名称',
+        title: 'ID',
-        dataIndex: 'name',
+        dataIndex: 'id',
-        key: 'name',
+        key: 'id',
+        width: 80,
+        align: 'center',
       },
       {
-        title: '所属小区',
+        title: '楼栋名称',
-        dataIndex: 'community',
+        dataIndex: 'building_name',
-        key: 'community',
+        key: 'building_name',
+        width: 150,
       },
       {
         title: '创建时间',
-        dataIndex: 'createTime',
+        dataIndex: 'create_time',
-        key: 'createTime',
+        key: 'create_time',
-      },
+        width: 180,
+      }
     ]
 
-    const data = ref([])
+    // 格式化日期时间
+    const formatDateTime = (value) => {
+      if (!value) return ''
+      return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
+    }
+
+    // 获取小区列表
+    const fetchCommunityOptions = async () => {
+      try {
+        const res = await getCommunityList({
+          skip: 0,
+          limit: 1000  // 获取所有小区作为选项
+        })
+        if (res.code === 200) {
+          communityOptions.value = res.data.items
+          // 如果有小区数据，自动选择第一个并加载楼栋
+          if (communityOptions.value.length > 0) {
+            selectedCommunity.value = communityOptions.value[0].id
+            fetchData()
+          }
+        } else {
+          message.error(res.message || '获取小区列表失败')
+        }
+      } catch (error) {
+        console.error('获取小区列表失败:', error)
+        message.error('获取小区列表失败')
+      }
+    }
+
+    // 获取楼栋列表数据
+    const fetchData = async () => {
+      if (!selectedCommunity.value) {
+        tableData.value = []
+        pagination.value.total = 0
+        return
+      }
+
+      try {
+        loading.value = true
+        const params = {
+          skip: (pagination.value.current - 1) * pagination.value.pageSize,
+          limit: pagination.value.pageSize,
+          community_id: selectedCommunity.value
+        }
+        
+        const res = await getBuildingList(params)
+        if (res.code === 200) {
+          tableData.value = res.data.items
+          pagination.value.total = res.data.total
+        } else {
+          message.error(res.message || '获取数据失败')
+        }
+      } catch (error) {
+        console.error('获取楼栋列表失败:', error)
+        message.error('获取数据失败')
+      } finally {
+        loading.value = false
+      }
+    }
+
+    // 表格变化处理
+    const handleTableChange = (pag) => {
+      pagination.value.current = pag.current
+      pagination.value.pageSize = pag.pageSize
+      fetchData()
+    }
+
+    // 小区选择变化处理
+    const handleCommunityChange = () => {
+      pagination.value.current = 1  // 重置页码
+      fetchData()
+    }
+
+    onMounted(() => {
+      fetchCommunityOptions()
+    })
 
     return {
-      data,
+      loading,
-      columns
+      columns,
+      tableData,
+      pagination,
+      communityOptions,
+      selectedCommunity,
+      handleTableChange,
+      handleCommunityChange,
+      formatDateTime
     }
   }
 })
-</script> 
+</script>
+
+<style scoped>
+.table-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.table-header h1 {
+  margin: 0;
+}
+
+:deep(.ant-table-content) {
+  overflow-x: auto;
+}
+</style>