From 899f292b547f19705162ee5dd874d7deb2560187 Mon Sep 17 00:00:00 2001
From: aaron <>
Date: Wed, 8 Jan 2025 09:51:50 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=B7=BB=E5=8A=A0=E6=A5=BC?=
 =?UTF-8?q?=E6=A0=8B=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/community.js                 |   9 +
 src/router/index.js                  |   4 +-
 src/views/community/BuildingList.vue | 256 +++++++++++++++++++++------
 3 files changed, 212 insertions(+), 57 deletions(-)

diff --git a/src/api/community.js b/src/api/community.js
index 0c21e1a..a735afa 100644
--- a/src/api/community.js
+++ b/src/api/community.js
@@ -25,4 +25,13 @@ export function createCommunity(data) {
     method: 'post',
     data
   })
+}
+
+// 添加楼栋
+export function createBuilding(data) {
+  return request({
+    url: '/api/community/building',
+    method: 'post',
+    data
+  })
 } 
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 0bb2a12..7b2217e 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -24,9 +24,9 @@ const routes = [
       },
       {
         path: '/community/building',
-        name: 'buildingList',
+        name: 'BuildingList',
         component: () => import('../views/community/BuildingList.vue'),
-        meta: { title: '楼栋列表' }
+        meta: { title: '楼栋管理' }
       },
       {
         path: '/community/station',
diff --git a/src/views/community/BuildingList.vue b/src/views/community/BuildingList.vue
index 24ed61e..c181720 100644
--- a/src/views/community/BuildingList.vue
+++ b/src/views/community/BuildingList.vue
@@ -2,20 +2,31 @@
   <div class="building-list">
     <div class="table-header">
       <h1>楼栋列表</h1>
-      <a-select
-        v-model:value="selectedCommunity"
-        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>
+      <a-button type="primary" @click="showAddModal">添加楼栋</a-button>
+    </div>
+    
+    <!-- 添加筛选区域 -->
+    <div class="table-filter">
+      <a-form layout="inline">
+        <a-form-item label="所属小区">
+          <a-select
+            v-model:value="filterForm.community_id"
+            placeholder="请选择小区"
+            style="width: 200px"
+            allowClear
+            @change="handleFilter"
+          >
+            <a-select-option :value="undefined">全部</a-select-option>
+            <a-select-option 
+              v-for="item in communityOptions" 
+              :key="item.id" 
+              :value="item.id"
+            >
+              {{ item.name }}
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+      </a-form>
     </div>
     
     <a-table 
@@ -32,13 +43,56 @@
         </template>
       </template>
     </a-table>
+
+    <!-- 添加楼栋模态框 -->
+    <a-modal
+      v-model:visible="addModalVisible"
+      title="添加楼栋"
+      @cancel="handleCancel"
+      :confirmLoading="confirmLoading"
+      width="500px"
+    >
+      <template #footer>
+        <a-space>
+          <a-button @click="handleCancel">取消</a-button>
+          <a-button type="primary" :loading="confirmLoading" @click="handleAdd">
+            保存
+          </a-button>
+        </a-space>
+      </template>
+
+      <a-form
+        ref="formRef"
+        :model="formState"
+        :rules="rules"
+        :label-col="{ span: 6 }"
+        :wrapper-col="{ span: 16 }"
+      >
+        <a-form-item label="所属小区" name="community_id" required>
+          <a-select
+            v-model:value="formState.community_id"
+            placeholder="请选择小区"
+            :options="communityOptions"
+            :field-names="{ label: 'name', value: 'id' }"
+          />
+        </a-form-item>
+
+        <a-form-item label="楼栋名称" name="building_name" required>
+          <a-input v-model:value="formState.building_name" placeholder="请输入楼栋名称" />
+        </a-form-item>
+
+        <a-form-item label="楼栋编号" name="building_number" required>
+          <a-input v-model:value="formState.building_number" placeholder="请输入楼栋编号" />
+        </a-form-item>
+      </a-form>
+    </a-modal>
   </div>
 </template>
 
 <script>
 import { defineComponent, ref, onMounted } from 'vue'
 import { message } from 'ant-design-vue'
-import { getCommunityList, getBuildingList } from '@/api/community'
+import { getBuildingList, getCommunityList, createBuilding } from '@/api/community'
 import dayjs from 'dayjs'
 
 export default defineComponent({
@@ -46,7 +100,6 @@ export default defineComponent({
     const loading = ref(false)
     const tableData = ref([])
     const communityOptions = ref([])
-    const selectedCommunity = ref(undefined)
     
     const pagination = ref({
       current: 1,
@@ -64,12 +117,24 @@ export default defineComponent({
         width: 80,
         align: 'center',
       },
+      {
+        title: '所属小区',
+        dataIndex: 'community_name',
+        key: 'community_name',
+        width: 150,
+      },
       {
         title: '楼栋名称',
         dataIndex: 'building_name',
         key: 'building_name',
         width: 150,
       },
+      {
+        title: '楼栋编号',
+        dataIndex: 'building_number',
+        key: 'building_number',
+        width: 150,
+      },
       {
         title: '创建时间',
         dataIndex: 'create_time',
@@ -84,43 +149,19 @@ export default defineComponent({
       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 filterForm = ref({
+      community_id: undefined
+    })
 
-    // 获取楼栋列表数据
+    // 修改获取楼栋列表数据的方法，添加筛选参数
     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
+          community_id: filterForm.value.community_id // 添加小区筛选参数
         }
         
         const res = await getBuildingList(params)
@@ -138,6 +179,28 @@ export default defineComponent({
       }
     }
 
+    // 筛选变化处理
+    const handleFilter = () => {
+      pagination.value.current = 1 // 重置页码
+      fetchData()
+    }
+
+    // 获取小区选项
+    const fetchCommunityOptions = async () => {
+      try {
+        const res = await getCommunityList({
+          skip: 0,
+          limit: 1000 // 获取所有小区
+        })
+        if (res.code === 200) {
+          communityOptions.value = res.data.items
+        }
+      } catch (error) {
+        console.error('获取小区列表失败:', error)
+        message.error('获取小区列表失败')
+      }
+    }
+
     // 表格变化处理
     const handleTableChange = (pag) => {
       pagination.value.current = pag.current
@@ -145,14 +208,60 @@ export default defineComponent({
       fetchData()
     }
 
-    // 小区选择变化处理
-    const handleCommunityChange = () => {
-      pagination.value.current = 1  // 重置页码
-      fetchData()
+    // 添加楼栋相关
+    const addModalVisible = ref(false)
+    const confirmLoading = ref(false)
+    const formRef = ref(null)
+    
+    const formState = ref({
+      community_id: undefined,
+      building_name: '',
+      building_number: ''
+    })
+
+    const rules = {
+      community_id: [{ required: true, message: '请选择所属小区' }],
+      building_name: [{ required: true, message: '请输入楼栋名称' }],
+      building_number: [{ required: true, message: '请输入楼栋编号' }]
+    }
+
+    // 显示添加模态框
+    const showAddModal = () => {
+      addModalVisible.value = true
+      fetchCommunityOptions()
+    }
+
+    // 提交表单
+    const handleAdd = () => {
+      formRef.value.validate().then(async () => {
+        try {
+          confirmLoading.value = true
+          const res = await createBuilding(formState.value)
+          if (res.code === 200) {
+            message.success('添加成功')
+            addModalVisible.value = false
+            fetchData() // 刷新列表
+          } else {
+            message.error(res.message || '添加失败')
+          }
+        } catch (error) {
+          console.error('添加楼栋失败:', error)
+          message.error('添加失败')
+        } finally {
+          confirmLoading.value = false
+        }
+      })
+    }
+
+    // 取消添加
+    const handleCancel = () => {
+      formRef.value?.resetFields()
+      addModalVisible.value = false
     }
 
     onMounted(() => {
-      fetchCommunityOptions()
+      fetchData()
+      fetchCommunityOptions() // 页面加载时获取小区选项
     })
 
     return {
@@ -160,11 +269,19 @@ export default defineComponent({
       columns,
       tableData,
       pagination,
-      communityOptions,
-      selectedCommunity,
       handleTableChange,
-      handleCommunityChange,
-      formatDateTime
+      formatDateTime,
+      addModalVisible,
+      confirmLoading,
+      formState,
+      formRef,
+      rules,
+      communityOptions,
+      showAddModal,
+      handleAdd,
+      handleCancel,
+      filterForm,
+      handleFilter
     }
   }
 })
@@ -185,4 +302,33 @@ export default defineComponent({
 :deep(.ant-table-content) {
   overflow-x: auto;
 }
+
+:deep(.ant-modal-body) {
+  padding: 24px;
+}
+
+:deep(.ant-form-item) {
+  margin-bottom: 24px;
+}
+
+:deep(.ant-modal-footer) {
+  text-align: right;
+  padding: 16px 24px;
+  border-top: 1px solid #f0f0f0;
+}
+
+.table-filter {
+  margin-bottom: 16px;
+  padding: 16px 24px;
+  background: #fff;
+  border-radius: 2px;
+}
+
+:deep(.ant-form-item) {
+  margin-bottom: 16px;
+  
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
 </style> 
\ No newline at end of file