From 37571ac2b42614593dbbe5a56378236fa0a8beac Mon Sep 17 00:00:00 2001
From: aaron <>
Date: Wed, 8 Jan 2025 16:49:41 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=20=E5=B0=8F=E5=8C=BA?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E7=9A=84=E9=80=BB=E8=BE=91=EF=BC=8C=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E8=BF=90=E8=90=A5=E7=8A=B6=E6=80=81=E7=9A=84=E5=88=87?=
 =?UTF-8?q?=E6=8D=A2=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/community.js                  |   9 ++
 src/utils/amap.js                     |  42 +++---
 src/views/community/BuildingList.vue  |  58 +++++++
 src/views/community/CommunityList.vue | 208 ++++++++++++++++++++++++--
 4 files changed, 283 insertions(+), 34 deletions(-)

diff --git a/src/api/community.js b/src/api/community.js
index a735afa..7c3899b 100644
--- a/src/api/community.js
+++ b/src/api/community.js
@@ -34,4 +34,13 @@ export function createBuilding(data) {
     method: 'post',
     data
   })
+}
+
+// 更新小区状态
+export function updateCommunityStatus(id, status) {
+  return request({
+    url: `/api/community/${id}`,
+    method: 'put',
+    data: { status }
+  })
 } 
\ No newline at end of file
diff --git a/src/utils/amap.js b/src/utils/amap.js
index 4bd40f2..365a36a 100644
--- a/src/utils/amap.js
+++ b/src/utils/amap.js
@@ -1,37 +1,33 @@
 export function initAMap() {
   return new Promise((resolve, reject) => {
     if (window.AMap) {
-      // 如果已经加载过，直接加载插件
-      window.AMap.plugin(['AMap.PlaceSearch', 'AMap.AutoComplete'], () => {
-        resolve(window.AMap);
-      });
-      return;
+      resolve(window.AMap)
+      return
     }
 
-    // 加载高德地图脚本
-    const script = document.createElement('script');
-    script.type = 'text/javascript';
-    script.async = true;
-    script.src = `https://webapi.amap.com/maps?v=2.0&key=fd47f3d4f54b675693c7d59dcd2a6c5f&plugin=AMap.PlaceSearch,AMap.AutoComplete&callback=initAMapCallback`;
+    const script = document.createElement('script')
+    script.type = 'text/javascript'
+    script.async = true
+    script.src = `https://webapi.amap.com/maps?v=2.0&key=fd47f3d4f54b675693c7d59dcd2a6c5f&plugin=AMap.PlaceSearch,AMap.AutoComplete,AMap.Geocoder&callback=initAMapCallback`
 
-    // 创建回调函数
     window.initAMapCallback = () => {
-      resolve(window.AMap);
-    };
+      resolve(window.AMap)
+    }
 
-    script.onerror = () => {
-      reject(new Error('加载地图失败'));
-    };
-
-    document.head.appendChild(script);
-  });
+    script.onerror = reject
+    document.head.appendChild(script)
+  })
 }
 
-// 添加地图工具函数
+// 创建地图实例
 export function createMap(container, options = {}) {
+  const defaultOptions = {
+    zoom: 15,
+    viewMode: '2D'
+  }
+  
   return new window.AMap.Map(container, {
-    zoom: 13,
-    viewMode: '2D',
+    ...defaultOptions,
     ...options
-  });
+  })
 } 
\ No newline at end of file
diff --git a/src/views/community/BuildingList.vue b/src/views/community/BuildingList.vue
index 6f1d7bd..cdd97f0 100644
--- a/src/views/community/BuildingList.vue
+++ b/src/views/community/BuildingList.vue
@@ -68,6 +68,7 @@
           :rules="rules"
           :label-col="{ span: 6 }"
           :wrapper-col="{ span: 16 }"
+          class="building-form"
         >
           <a-form-item label="所属小区" name="community_id" required>
             <a-select
@@ -337,4 +338,61 @@ export default defineComponent({
     margin-bottom: 0;
   }
 }
+
+/* 调整表单样式 */
+.building-form {
+  padding: 20px 0;
+}
+
+:deep(.ant-form-item) {
+  margin-bottom: 32px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+:deep(.ant-form-item-label) {
+  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-input),
+:deep(.ant-select) {
+  height: 40px;
+}
+
+:deep(.ant-select-selector) {
+  height: 40px !important;
+  padding: 4px 11px !important;
+  
+  .ant-select-selection-search-input {
+    height: 38px !important;
+  }
+  
+  .ant-select-selection-item {
+    line-height: 38px !important;
+  }
+}
+
+:deep(.ant-input::placeholder),
+:deep(.ant-select-selection-placeholder) {
+  color: #bfbfbf;
+}
+
+:deep(.ant-modal-body) {
+  padding: 0;
+}
+
+:deep(.ant-modal-footer) {
+  border-top: 1px solid #f0f0f0;
+  padding: 16px 24px;
+}
 </style> 
\ No newline at end of file
diff --git a/src/views/community/CommunityList.vue b/src/views/community/CommunityList.vue
index a708926..475efdb 100644
--- a/src/views/community/CommunityList.vue
+++ b/src/views/community/CommunityList.vue
@@ -16,9 +16,18 @@
       >
         <template #bodyCell="{ column, record }">
           <template v-if="column.key === 'status'">
-            <a-tag :color="getStatusColor(record.status)">
-              {{ getStatusText(record.status) }}
-            </a-tag>
+            <a-dropdown>
+              <a-tag :color="getStatusColor(record.status)" class="status-tag">
+                {{ getStatusText(record.status) }}
+                <down-outlined />
+              </a-tag>
+              <template #overlay>
+                <a-menu @click="({ key }) => handleStatusChange(record, key)">
+                  <a-menu-item key="OPENING">运营中</a-menu-item>
+                  <a-menu-item key="UNOPEN">未启用</a-menu-item>
+                </a-menu>
+              </template>
+            </a-dropdown>
           </template>
           <template v-if="column.key === 'location'">
             <a @click="showMap(record)">查看位置</a>
@@ -62,6 +71,7 @@
           :rules="rules"
           :label-col="{ span: 6 }"
           :wrapper-col="{ span: 16 }"
+          class="community-form"
         >
           <a-form-item label="地址搜索">
             <a-auto-complete
@@ -124,15 +134,17 @@
 <script>
 import { defineComponent, ref, onMounted, nextTick } from 'vue'
 import { message, Tag } from 'ant-design-vue'
-import { getCommunityList, createCommunity } from '@/api/community'
+import { getCommunityList, createCommunity, updateCommunityStatus } from '@/api/community'
 import { initAMap, createMap } from '@/utils/amap'
 import dayjs from 'dayjs'
 import PageContainer from '@/components/PageContainer.vue'
+import { DownOutlined } from '@ant-design/icons-vue'
 
 export default defineComponent({
   components: {
     PageContainer,
-    [Tag.name]: Tag
+    [Tag.name]: Tag,
+    DownOutlined
   },
   setup() {
     const loading = ref(false)
@@ -341,7 +353,7 @@ export default defineComponent({
     // 地图点击事件处理
     const initAddMap = async () => {
       try {
-        await initAMap();
+        const AMap = await initAMap();
         
         if (!addMap.value) {
           addMap.value = createMap('add-map-container', {
@@ -352,15 +364,42 @@ export default defineComponent({
           addMap.value.on('click', (e) => {
             const { lng, lat } = e.lnglat;
             // 点击地图时，使用逆地理编码获取位置信息
-            const geocoder = new window.AMap.Geocoder();
+            const geocoder = new AMap.Geocoder({
+              radius: 100,  // 搜索半径
+              extensions: 'all'  // 返回完整信息
+            });
+            
             geocoder.getAddress([lng, lat], (status, result) => {
               if (status === 'complete' && result.info === 'OK') {
                 const address = result.regeocode;
                 formState.value.address = address.formattedAddress;
-                // 如果还没有设置小区名称，使用POI信息或地址信息作为默认名称
-                if (!formState.value.name && address.pois && address.pois.length > 0) {
-                  formState.value.name = address.pois[0].name;
+                
+                // 优先使用最近的 POI 名称作为小区名称
+                if (address.pois && address.pois.length > 0) {
+                  // 筛选类型包含"住宅区"、"小区"、"住宅小区"的 POI
+                  const residentialPoi = address.pois.find(poi => 
+                    poi.type.includes('住宅区') || 
+                    poi.type.includes('小区') || 
+                    poi.type.includes('住宅小区')
+                  );
+                  
+                  if (residentialPoi) {
+                    formState.value.name = residentialPoi.name;
+                  } else {
+                    // 如果没有找到住宅类 POI，使用第一个 POI 的名称
+                    formState.value.name = address.pois[0].name;
+                  }
+                } else if (address.aois && address.aois.length > 0) {
+                  // 如果没有合适的 POI，尝试使用 AOI 信息
+                  formState.value.name = address.aois[0].name;
+                } else {
+                  // 如果没有 POI 和 AOI，使用地址信息组合
+                  const township = address.addressComponent.township || '';
+                  const street = address.addressComponent.street || '';
+                  formState.value.name = `${township}${street}`;
                 }
+                
+                // 更新标记位置
                 updateMarkerPosition(lng, lat);
               }
             });
@@ -481,6 +520,26 @@ export default defineComponent({
       }
     }
 
+    // 处理状态变更
+    const handleStatusChange = async (record, status) => {
+      try {
+        const res = await updateCommunityStatus(record.id, status)
+        if (res.code === 200) {
+          message.success('状态更新成功')
+          // 更新本地数据
+          const index = tableData.value.findIndex(item => item.id === record.id)
+          if (index !== -1) {
+            tableData.value[index].status = status
+          }
+        } else {
+          message.error(res.message || '状态更新失败')
+        }
+      } catch (error) {
+        console.error('更新小区状态失败:', error)
+        message.error('状态更新失败')
+      }
+    }
+
     onMounted(() => {
       fetchData()
     })
@@ -509,7 +568,8 @@ export default defineComponent({
       handleCancel,
       handleSearch,
       searchOptions,
-      handleSelect
+      handleSelect,
+      handleStatusChange
     }
   }
 })
@@ -646,4 +706,130 @@ export default defineComponent({
   padding: 16px 24px;
   border-top: 1px solid #f0f0f0;
 }
+
+/* 调整表单样式 */
+.community-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-form-item-control-input) {
+  min-height: 32px;
+}
+
+:deep(.ant-input),
+:deep(.ant-select),
+:deep(.ant-auto-complete),
+:deep(.ant-input-number) {
+  height: 32px;
+}
+
+:deep(.ant-select-selector),
+:deep(.ant-auto-complete .ant-input) {
+  height: 32px !important;
+  line-height: 32px !important;
+  padding: 0 11px !important;
+  
+  .ant-select-selection-search-input {
+    height: 30px !important;
+  }
+  
+  .ant-select-selection-item {
+    line-height: 30px !important;
+  }
+}
+
+:deep(.ant-input-number-input) {
+  height: 30px;
+  line-height: 30px;
+}
+
+:deep(.ant-input::placeholder),
+:deep(.ant-select-selection-placeholder),
+:deep(.ant-input-number-input::placeholder) {
+  color: #bfbfbf;
+}
+
+:deep(.ant-modal-body) {
+  padding: 0;
+}
+
+:deep(.ant-modal-footer) {
+  border-top: 1px solid #f0f0f0;
+  padding: 16px 24px;
+}
+
+.map-container {
+  border: 1px solid #f0f0f0;
+  border-radius: 2px;
+  overflow: hidden;
+  margin-bottom: 24px;
+}
+
+/* 移除重复的样式定义 */
+:deep(.ant-form) {
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+/* 清理和合并重复的样式 */
+:deep(.ant-input-group) {
+  display: flex;
+  
+  .ant-input-number {
+    border-radius: 0;
+    
+    &:first-child {
+      border-top-left-radius: 2px;
+      border-bottom-left-radius: 2px;
+    }
+    
+    &:last-child {
+      border-top-right-radius: 2px;
+      border-bottom-right-radius: 2px;
+    }
+  }
+}
+
+/* 清理重复的样式 */
+:deep(.ant-modal-body),
+:deep(.ant-form),
+:deep(.ant-form-item) {
+  padding-right: 0;
+  padding-left: 0;
+}
+
+:deep(.ant-col) {
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.status-tag {
+  cursor: pointer;
+  user-select: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+:deep(.anticon) {
+  font-size: 12px;
+}
 </style> 
\ No newline at end of file