增加商家和驿站的修改功能。
This commit is contained in:
aaron
parent
202bb70143
commit
ac7764617f
@ -16,4 +16,13 @@ export function createStation(data) {
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
// 修改驿站
|
||||
export function updateStation(id, data) {
|
||||
return request({
|
||||
url: `/api/station/${id}`,
|
||||
method: 'put',
|
||||
data
|
||||
})
|
||||
}
|
||||
@ -22,7 +22,10 @@
|
||||
{{ formatDateTime(record.create_time) }}
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-button type="link" @click="handleManageImages(record)">管理图片</a-button>
|
||||
<a-space>
|
||||
<a-button type="link" @click="handleManageImages(record)">管理图片</a-button>
|
||||
<a-button type="link" @click="handleEdit(record)">修改</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
@ -167,6 +170,98 @@
|
||||
>
|
||||
<img :alt="previewTitle" style="width: 100%" :src="previewImage" />
|
||||
</a-modal>
|
||||
|
||||
<!-- 添加修改商家模态框 -->
|
||||
<a-modal
|
||||
v-model:visible="editModalVisible"
|
||||
title="修改商家"
|
||||
:confirmLoading="editLoading"
|
||||
width="800px"
|
||||
@cancel="handleEditCancel"
|
||||
>
|
||||
<template #footer>
|
||||
<a-space>
|
||||
<a-button @click="handleEditCancel">取消</a-button>
|
||||
<a-button type="primary" :loading="editLoading" @click="handleEditSubmit">
|
||||
保存
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
<a-form
|
||||
ref="editFormRef"
|
||||
:model="editFormState"
|
||||
:rules="rules"
|
||||
:label-col="{ span: 6 }"
|
||||
:wrapper-col="{ span: 16 }"
|
||||
>
|
||||
<a-form-item label="商家分类" name="category_id" required>
|
||||
<a-select
|
||||
v-model:value="editFormState.category_id"
|
||||
placeholder="请选择商家分类"
|
||||
:options="categories.map(item => ({
|
||||
value: item.id,
|
||||
label: item.name
|
||||
}))"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="商家名称" name="name" required>
|
||||
<a-input v-model:value="editFormState.name" placeholder="请输入商家名称" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="营业时间" name="business_hours" required>
|
||||
<a-input v-model:value="editFormState.business_hours" placeholder="例如：10:30~20:30" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="联系电话" name="phone" required>
|
||||
<a-input v-model:value="editFormState.phone" placeholder="请输入联系电话" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="地址搜索">
|
||||
<a-auto-complete
|
||||
v-model:value="editSearchAddress"
|
||||
:options="searchOptions"
|
||||
placeholder="输入地址搜索"
|
||||
@change="handleSearch"
|
||||
@select="handleEditSelect"
|
||||
:loading="searchLoading"
|
||||
allow-clear
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="地图选点" required>
|
||||
<div class="map-container">
|
||||
<div id="edit-map-container" style="height: 300px;"></div>
|
||||
</div>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="详细地址" name="address" required>
|
||||
<a-input v-model:value="editFormState.address" placeholder="请输入详细地址" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="经纬度" required>
|
||||
<a-input-group compact>
|
||||
<a-input-number
|
||||
v-model:value="editFormState.longitude"
|
||||
:min="-180"
|
||||
:max="180"
|
||||
style="width: 50%"
|
||||
placeholder="经度"
|
||||
disabled
|
||||
/>
|
||||
<a-input-number
|
||||
v-model:value="editFormState.latitude"
|
||||
:min="-90"
|
||||
:max="90"
|
||||
style="width: 50%"
|
||||
placeholder="纬度"
|
||||
disabled
|
||||
/>
|
||||
</a-input-group>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</div>
|
||||
</page-container>
|
||||
</template>
|
||||
@ -678,6 +773,150 @@ export default defineComponent({
|
||||
resetImageManager() // 使用重置函数
|
||||
}
|
||||
|
||||
// 修改商家相关
|
||||
const editModalVisible = ref(false)
|
||||
const editLoading = ref(false)
|
||||
const editFormRef = ref(null)
|
||||
const editFormState = ref({
|
||||
name: '',
|
||||
category_id: undefined,
|
||||
business_hours: '',
|
||||
address: '',
|
||||
longitude: null,
|
||||
latitude: null,
|
||||
phone: ''
|
||||
})
|
||||
const editSearchAddress = ref('')
|
||||
const editMap = ref(null)
|
||||
const editMarker = ref(null)
|
||||
const currentEditId = ref(null)
|
||||
|
||||
// 显示修改模态框
|
||||
const handleEdit = async (record) => {
|
||||
currentEditId.value = record.id
|
||||
editFormState.value = {
|
||||
name: record.name,
|
||||
category_id: record.category_id,
|
||||
business_hours: record.business_hours,
|
||||
address: record.address,
|
||||
longitude: record.longitude,
|
||||
latitude: record.latitude,
|
||||
phone: record.phone
|
||||
}
|
||||
|
||||
// 获取分类数据
|
||||
if (categories.value.length === 0) {
|
||||
await fetchCategories()
|
||||
}
|
||||
|
||||
editModalVisible.value = true
|
||||
await nextTick()
|
||||
initEditMap(record.longitude, record.latitude)
|
||||
}
|
||||
|
||||
// 初始化编辑地图
|
||||
const initEditMap = async (lng, lat) => {
|
||||
try {
|
||||
await loadAMap()
|
||||
|
||||
if (!editMap.value) {
|
||||
editMap.value = createMap('edit-map-container', {
|
||||
zoom: 13,
|
||||
viewMode: '2D'
|
||||
})
|
||||
|
||||
editMap.value.on('click', async (e) => {
|
||||
const { lng, lat } = e.lnglat
|
||||
updateEditMarkerPosition(lng, lat)
|
||||
|
||||
const geocoder = createGeocoder()
|
||||
geocoder.getAddress([lng, lat], (status, result) => {
|
||||
if (status === 'complete' && result.info === 'OK') {
|
||||
const address = result.regeocode
|
||||
editFormState.value.address = address.formattedAddress
|
||||
editFormState.value.longitude = lng
|
||||
editFormState.value.latitude = lat
|
||||
} else {
|
||||
message.error('获取地址信息失败')
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// 设置中心点和标记
|
||||
editMap.value.setCenter([lng, lat])
|
||||
updateEditMarkerPosition(lng, lat)
|
||||
} catch (error) {
|
||||
console.error('初始化地图失败:', error)
|
||||
message.error('初始化地图失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 更新编辑标记位置
|
||||
const updateEditMarkerPosition = (lng, lat) => {
|
||||
if (editMarker.value) {
|
||||
editMarker.value.setPosition([lng, lat])
|
||||
} else {
|
||||
editMarker.value = new window.AMap.Marker({
|
||||
position: [lng, lat],
|
||||
map: editMap.value
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 处理地址选择
|
||||
const handleEditSelect = (value, option) => {
|
||||
const selected = searchOptions.value.find(opt => opt.value === value)
|
||||
if (selected && selected.location) {
|
||||
const { lng, lat } = selected.location
|
||||
updateEditMarkerPosition(lng, lat)
|
||||
editMap.value.setCenter([lng, lat])
|
||||
|
||||
const geocoder = createGeocoder()
|
||||
geocoder.getAddress([lng, lat], (status, result) => {
|
||||
if (status === 'complete' && result.info === 'OK') {
|
||||
const address = result.regeocode
|
||||
editFormState.value.address = address.formattedAddress
|
||||
editFormState.value.longitude = lng
|
||||
editFormState.value.latitude = lat
|
||||
} else {
|
||||
editFormState.value.address = value
|
||||
editFormState.value.longitude = lng
|
||||
editFormState.value.latitude = lat
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 提交修改
|
||||
const handleEditSubmit = () => {
|
||||
editFormRef.value.validate().then(async () => {
|
||||
try {
|
||||
editLoading.value = true
|
||||
await request.put(`/api/merchant/${currentEditId.value}`, editFormState.value)
|
||||
message.success('修改成功')
|
||||
editModalVisible.value = false
|
||||
fetchData()
|
||||
} catch (error) {
|
||||
console.error('修改商家失败:', error)
|
||||
message.error('修改失败')
|
||||
} finally {
|
||||
editLoading.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 取消修改
|
||||
const handleEditCancel = () => {
|
||||
editFormRef.value?.resetFields()
|
||||
editSearchAddress.value = ''
|
||||
if (editMarker.value) {
|
||||
editMarker.value.setMap(null)
|
||||
editMarker.value = null
|
||||
}
|
||||
editModalVisible.value = false
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchData()
|
||||
})
|
||||
@ -718,7 +957,16 @@ export default defineComponent({
|
||||
handleRemove,
|
||||
handleSaveImages,
|
||||
handleCancelImages,
|
||||
categories
|
||||
categories,
|
||||
editModalVisible,
|
||||
editLoading,
|
||||
editFormRef,
|
||||
editFormState,
|
||||
editSearchAddress,
|
||||
handleEdit,
|
||||
handleEditSubmit,
|
||||
handleEditCancel,
|
||||
handleEditSelect
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -38,6 +38,13 @@
|
||||
@change="handleTableChange"
|
||||
row-key="id"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<a-button type="link" @click="handleEdit(record)">修改</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
|
||||
<!-- 添加驿站模态框 -->
|
||||
@ -79,6 +86,46 @@
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
|
||||
<!-- 添加修改驿站模态框 -->
|
||||
<a-modal
|
||||
v-model:visible="editModalVisible"
|
||||
title="修改驿站"
|
||||
:confirmLoading="editLoading"
|
||||
width="500px"
|
||||
@cancel="handleEditCancel"
|
||||
>
|
||||
<template #footer>
|
||||
<a-space>
|
||||
<a-button @click="handleEditCancel">取消</a-button>
|
||||
<a-button type="primary" :loading="editLoading" @click="handleEditSubmit">
|
||||
保存
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
<a-form
|
||||
ref="editFormRef"
|
||||
:model="editFormState"
|
||||
: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="editFormState.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="editFormState.name" placeholder="请输入驿站名称" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</div>
|
||||
</page-container>
|
||||
</template>
|
||||
@ -86,7 +133,7 @@
|
||||
<script>
|
||||
import { defineComponent, ref, onMounted } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { getStationList, createStation } from '@/api/station'
|
||||
import { getStationList, createStation, updateStation } from '@/api/station'
|
||||
import { getCommunityList } from '@/api/community'
|
||||
import PageContainer from '@/components/PageContainer.vue'
|
||||
|
||||
@ -129,6 +176,12 @@ export default defineComponent({
|
||||
dataIndex: 'community_name',
|
||||
key: 'community_name',
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 120,
|
||||
align: 'center'
|
||||
}
|
||||
]
|
||||
|
||||
@ -230,6 +283,54 @@ export default defineComponent({
|
||||
addModalVisible.value = false
|
||||
}
|
||||
|
||||
// 修改驿站相关
|
||||
const editModalVisible = ref(false)
|
||||
const editLoading = ref(false)
|
||||
const editFormRef = ref(null)
|
||||
const editFormState = ref({
|
||||
name: '',
|
||||
community_id: undefined
|
||||
})
|
||||
const currentEditId = ref(null)
|
||||
|
||||
// 显示修改模态框
|
||||
const handleEdit = (record) => {
|
||||
currentEditId.value = record.id
|
||||
editFormState.value = {
|
||||
name: record.name,
|
||||
community_id: record.community_id
|
||||
}
|
||||
editModalVisible.value = true
|
||||
}
|
||||
|
||||
// 提交修改
|
||||
const handleEditSubmit = () => {
|
||||
editFormRef.value.validate().then(async () => {
|
||||
try {
|
||||
editLoading.value = true
|
||||
const res = await updateStation(currentEditId.value, editFormState.value)
|
||||
if (res.code === 200) {
|
||||
message.success('修改成功')
|
||||
editModalVisible.value = false
|
||||
fetchData()
|
||||
} else {
|
||||
message.error(res.message || '修改失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('修改驿站失败:', error)
|
||||
message.error('修改失败')
|
||||
} finally {
|
||||
editLoading.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 取消修改
|
||||
const handleEditCancel = () => {
|
||||
editFormRef.value?.resetFields()
|
||||
editModalVisible.value = false
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchData()
|
||||
fetchCommunityOptions()
|
||||
@ -251,7 +352,14 @@ export default defineComponent({
|
||||
rules,
|
||||
showAddModal,
|
||||
handleAdd,
|
||||
handleCancel
|
||||
handleCancel,
|
||||
editModalVisible,
|
||||
editLoading,
|
||||
editFormRef,
|
||||
editFormState,
|
||||
handleEdit,
|
||||
handleEditSubmit,
|
||||
handleEditCancel
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
Loading…
Reference in New Issue
Block a user