更新 小区页面的逻辑，增加运营状态的切换。
This commit is contained in:
aaron
parent
4064c74f70
commit
37571ac2b4
@ -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 }
|
||||
})
|
||||
}
|
||||
@ -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
|
||||
});
|
||||
})
|
||||
}
|
||||
@ -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>
|
||||
@ -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>
|
||||
Loading…
Reference in New Issue
Block a user