From a10451b7573850914591ee405e090d041763003a Mon Sep 17 00:00:00 2001
From: aaron <>
Date: Thu, 9 Jan 2025 00:12:26 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E9=A9=BF=E7=AB=99=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/station.js                    |  19 ++
 src/layouts/TabsLayout.vue            |  18 +-
 src/router/index.js                   |   8 +-
 src/views/community/CommunityList.vue |  30 +++
 src/views/station/StationList.vue     | 325 ++++++++++++++++++++++++++
 5 files changed, 396 insertions(+), 4 deletions(-)
 create mode 100644 src/api/station.js
 create mode 100644 src/views/station/StationList.vue

diff --git a/src/api/station.js b/src/api/station.js
new file mode 100644
index 0000000..1f4b8f2
--- /dev/null
+++ b/src/api/station.js
@@ -0,0 +1,19 @@
+import request from '@/utils/request'
+
+// 获取驿站列表
+export function getStationList(params) {
+  return request({
+    url: '/api/station/',
+    method: 'get',
+    params
+  })
+}
+
+// 添加驿站
+export function createStation(data) {
+  return request({
+    url: '/api/station/',
+    method: 'post',
+    data
+  })
+} 
\ No newline at end of file
diff --git a/src/layouts/TabsLayout.vue b/src/layouts/TabsLayout.vue
index 3ad05a4..098d711 100644
--- a/src/layouts/TabsLayout.vue
+++ b/src/layouts/TabsLayout.vue
@@ -50,7 +50,17 @@
               </span>
             </template>
             <a-menu-item key="/community/list">小区列表</a-menu-item>
-            <a-menu-item key="/community/building">楼栋管理</a-menu-item>
+            <a-menu-item key="/community/building">楼栋列表</a-menu-item>
+          </a-sub-menu>
+
+          <a-sub-menu key="station">
+            <template #title>
+              <span>
+                <ShopOutlined />
+                <span>驿站管理</span>
+              </span>
+            </template>
+            <a-menu-item key="/station/list">驿站列表</a-menu-item>
           </a-sub-menu>
         </a-menu>
       </a-layout-sider>
@@ -92,7 +102,8 @@ import {
   QuestionCircleOutlined,
   DownOutlined,
   UserOutlined,
-  HomeOutlined
+  HomeOutlined,
+  ShopOutlined
 } from '@ant-design/icons-vue'
 
 export default defineComponent({
@@ -101,7 +112,8 @@ export default defineComponent({
     QuestionCircleOutlined,
     DownOutlined,
     UserOutlined,
-    HomeOutlined
+    HomeOutlined,
+    ShopOutlined
   },
 
   setup() {
diff --git a/src/router/index.js b/src/router/index.js
index 530fc9d..dc32b70 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -32,7 +32,13 @@ const routes = [
         path: '/community/building',
         name: 'BuildingList',
         component: () => import('../views/community/BuildingList.vue'),
-        meta: { title: '楼栋管理' }
+        meta: { title: '楼栋列表' }
+      },
+      {
+        path: '/station/list',
+        name: 'StationList',
+        component: () => import('../views/station/StationList.vue'),
+        meta: { title: '驿站列表' }
       }
     ]
   },
diff --git a/src/views/community/CommunityList.vue b/src/views/community/CommunityList.vue
index 475efdb..6d4284b 100644
--- a/src/views/community/CommunityList.vue
+++ b/src/views/community/CommunityList.vue
@@ -832,4 +832,34 @@ export default defineComponent({
 :deep(.anticon) {
   font-size: 12px;
 }
+
+/* 调整 Select 组件的样式 */
+:deep(.ant-select-selector) {
+  height: 32px !important;
+  
+  .ant-select-selection-item {
+    line-height: 30px !important;  /* 调整文字行高 */
+    padding-top: 0 !important;     /* 移除顶部内边距 */
+    padding-bottom: 0 !important;  /* 移除底部内边距 */
+  }
+}
+
+/* 调整选项的样式 */
+:deep(.ant-select-dropdown) {
+  .ant-select-item {
+    padding: 5px 12px;  /* 调整选项内边距 */
+    line-height: 22px;  /* 调整选项行高 */
+  }
+}
+
+/* 确保输入框内的文字垂直居中 */
+:deep(.ant-select-selection-search-input) {
+  height: 30px !important;
+  line-height: 30px !important;
+}
+
+/* 确保占位符文字垂直居中 */
+:deep(.ant-select-selection-placeholder) {
+  line-height: 30px !important;
+}
 </style> 
\ No newline at end of file
diff --git a/src/views/station/StationList.vue b/src/views/station/StationList.vue
new file mode 100644
index 0000000..ad49400
--- /dev/null
+++ b/src/views/station/StationList.vue
@@ -0,0 +1,325 @@
+<template>
+  <page-container>
+    <div class="station-list">
+      <div class="table-header">
+        <h1>驿站列表</h1>
+        <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 
+        :columns="columns" 
+        :data-source="tableData" 
+        :pagination="pagination"
+        :loading="loading"
+        @change="handleTableChange"
+        row-key="id"
+      >
+      </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 }"
+          class="station-form"
+        >
+          <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="name" required>
+            <a-input v-model:value="formState.name" placeholder="请输入驿站名称" />
+          </a-form-item>
+        </a-form>
+      </a-modal>
+    </div>
+  </page-container>
+</template>
+
+<script>
+import { defineComponent, ref, onMounted } from 'vue'
+import { message } from 'ant-design-vue'
+import { getStationList, createStation } from '@/api/station'
+import { getCommunityList } from '@/api/community'
+import PageContainer from '@/components/PageContainer.vue'
+
+export default defineComponent({
+  components: {
+    PageContainer
+  },
+  setup() {
+    const loading = ref(false)
+    const tableData = ref([])
+    const communityOptions = ref([])
+    const filterForm = ref({
+      community_id: undefined
+    })
+    
+    const pagination = ref({
+      current: 1,
+      pageSize: 10,
+      total: 0,
+      showSizeChanger: true,
+      showTotal: (total) => `共 ${total} 条记录`
+    })
+
+    const columns = [
+      {
+        title: 'ID',
+        dataIndex: 'id',
+        key: 'id',
+        width: 80,
+        align: 'center'
+      },
+      {
+        title: '驿站名称',
+        dataIndex: 'name',
+        key: 'name',
+        width: 150
+      },
+      {
+        title: '所属小区',
+        dataIndex: 'community_name',
+        key: 'community_name',
+        width: 150
+      }
+    ]
+
+    // 获取驿站列表数据
+    const fetchData = async () => {
+      try {
+        loading.value = true
+        const params = {
+          skip: (pagination.value.current - 1) * pagination.value.pageSize,
+          limit: pagination.value.pageSize,
+          community_id: filterForm.value.community_id
+        }
+        
+        const res = await getStationList(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 fetchCommunityOptions = async () => {
+      try {
+        const res = await getCommunityList({ limit: 1000 })
+        if (res.code === 200) {
+          communityOptions.value = res.data.items
+        }
+      } catch (error) {
+        console.error('获取小区列表失败:', error)
+      }
+    }
+
+    // 表格变化处理
+    const handleTableChange = (pag) => {
+      pagination.value.current = pag.current
+      pagination.value.pageSize = pag.pageSize
+      fetchData()
+    }
+
+    // 处理过滤
+    const handleFilter = () => {
+      pagination.value.current = 1
+      fetchData()
+    }
+
+    // 添加驿站相关的响应式变量
+    const addModalVisible = ref(false)
+    const confirmLoading = ref(false)
+    const formRef = ref(null)
+    
+    const formState = ref({
+      name: '',
+      community_id: undefined
+    })
+
+    const rules = {
+      community_id: [{ required: true, message: '请选择所属小区' }],
+      name: [{ required: true, message: '请输入驿站名称' }]
+    }
+
+    // 显示添加模态框
+    const showAddModal = () => {
+      addModalVisible.value = true
+    }
+
+    // 提交表单
+    const handleAdd = () => {
+      formRef.value.validate().then(async () => {
+        try {
+          confirmLoading.value = true
+          const res = await createStation(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(() => {
+      fetchData()
+      fetchCommunityOptions()
+    })
+
+    return {
+      loading,
+      columns,
+      tableData,
+      pagination,
+      communityOptions,
+      filterForm,
+      handleTableChange,
+      handleFilter,
+      addModalVisible,
+      confirmLoading,
+      formState,
+      formRef,
+      rules,
+      showAddModal,
+      handleAdd,
+      handleCancel
+    }
+  }
+})
+</script>
+
+<style scoped>
+.table-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.table-header h1 {
+  margin: 0;
+}
+
+.table-filter {
+  margin-bottom: 16px;
+  padding: 16px 24px;
+  background: #fff;
+  border-radius: 2px;
+}
+
+/* Select 组件样式调整 */
+:deep(.ant-select-selector) {
+  height: 32px !important;
+  
+  .ant-select-selection-item {
+    line-height: 30px !important;
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+  }
+}
+
+:deep(.ant-select-selection-placeholder) {
+  line-height: 30px !important;
+}
+
+/* 添加表单样式 */
+.station-form {
+  padding: 8px 0;
+}
+
+:deep(.ant-form-item) {
+  margin-bottom: 24px !important;
+}
+
+:deep(.ant-form-item-label) {
+  height: 32px;
+  line-height: 32px;
+  text-align: right;
+  padding-right: 12px;
+  
+  /* 调整必填星号的样式 */
+  > label.ant-form-item-required:not(.ant-form-item-required-mark-optional)::before {
+    color: #ff4d4f;
+    font-size: 14px;
+    margin-right: 4px;
+  }
+}
+
+:deep(.ant-modal-body) {
+  padding: 0 24px;
+}
+
+:deep(.ant-modal-footer) {
+  border-top: 1px solid #f0f0f0;
+  padding: 16px 24px;
+}
+</style> 
\ No newline at end of file