342 lines
8.7 KiB
Vue
342 lines
8.7 KiB
Vue
<template>
|
|
<el-dialog
|
|
custom-class="center-dialog"
|
|
:title="title"
|
|
top="0vh"
|
|
:visible.sync="dialogFormVisible"
|
|
width="950px"
|
|
@close="close"
|
|
>
|
|
<el-form
|
|
ref="form"
|
|
:inline="true"
|
|
label-width="80px"
|
|
:model="form"
|
|
:rules="rules"
|
|
>
|
|
<el-form-item
|
|
:label="__('选择省市区')"
|
|
label-width="90px"
|
|
prop="store_area"
|
|
>
|
|
<Area v-model="queryArea" width="350" />
|
|
</el-form-item>
|
|
<el-form-item
|
|
:label="__('详细地址')"
|
|
label-width="90px"
|
|
prop="store_address"
|
|
>
|
|
<keyword
|
|
:keyword="form.store_address"
|
|
:location="queryArea.city.name"
|
|
:style="{ width: '350px' }"
|
|
@change="changeAddr"
|
|
@getAddress="getAddress"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item
|
|
:label="__('经度')"
|
|
label-width="90px"
|
|
prop="store_longitude"
|
|
>
|
|
<el-input
|
|
v-model="form.store_longitude"
|
|
:placeholder="__('经度')"
|
|
style="width: 350px"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item
|
|
:label="__('纬度')"
|
|
label-width="90px"
|
|
prop="store_latitude"
|
|
>
|
|
<el-input
|
|
v-model="form.store_latitude"
|
|
:placeholder="__('纬度')"
|
|
style="width: 350px"
|
|
/>
|
|
</el-form-item>
|
|
|
|
<el-form-item
|
|
:label="__('营业时间')"
|
|
label-width="90px"
|
|
prop="store_opening_hours"
|
|
>
|
|
<el-time-picker
|
|
v-model="form.store_opening_hours"
|
|
format="HH:mm"
|
|
:placeholder="__('选择时间')"
|
|
style="width: 350px"
|
|
value-format="HH:mm"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item
|
|
:label="__('打烊时间')"
|
|
label-width="90px"
|
|
prop="store_close_hours"
|
|
>
|
|
<el-time-picker
|
|
v-model="form.store_close_hours"
|
|
format="HH:mm"
|
|
:placeholder="__('选择时间')"
|
|
style="width: 350px"
|
|
value-format="HH:mm"
|
|
/>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<template>
|
|
<baidu-map
|
|
:center="mapCenter"
|
|
class="map"
|
|
:zoom="zoom"
|
|
@click="getClickInfo"
|
|
@moveend="syncCenterAndZoom"
|
|
@moving="syncCenterAndZoom"
|
|
@zoomend="syncCenterAndZoom"
|
|
>
|
|
<bm-marker
|
|
animation="BMAP_ANIMATION_BOUNCE"
|
|
:dragging="false"
|
|
:position="mapCenter"
|
|
>
|
|
<bm-label
|
|
content=""
|
|
:label-style="{ color: 'red', fontSize: '24px' }"
|
|
:offset="{ width: 6, height: 20 }"
|
|
/>
|
|
</bm-marker>
|
|
</baidu-map>
|
|
</template>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button @click="close">{{ __('取消') }}</el-button>
|
|
<el-button type="primary" @click="save">{{ __('确定') }}</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script>
|
|
import { translateTitle as __ } from '@/utils/i18n'
|
|
import Area from '@/components/VabArea/area'
|
|
import keyword from '@/components/baiduMap/keyword'
|
|
import { storeSetUp } from '@/api/store/base'
|
|
|
|
export default {
|
|
name: 'LocationEdit',
|
|
components: { keyword, Area },
|
|
data() {
|
|
return {
|
|
form: {},
|
|
title: '',
|
|
map_show: false,
|
|
zoom: 15,
|
|
mapCenter: { lng: '', lat: '' },
|
|
rules: {
|
|
store_district_id: [{ required: true, message: '省市区' }],
|
|
|
|
store_area: [{ required: true, message: '省市区' }],
|
|
|
|
store_address: [{ required: true, message: '详细地址' }],
|
|
|
|
store_longitude: [{ required: true, message: '经度' }],
|
|
store_latitude: [{ required: true, message: '纬度' }],
|
|
store_opening_hours: [
|
|
{ required: true, message: '请选择营业时间', trigger: 'blur' },
|
|
],
|
|
store_close_hours: [
|
|
{ required: true, message: '请选择关闭时间', trigger: 'blur' },
|
|
],
|
|
},
|
|
dialogFormVisible: false,
|
|
queryArea: {
|
|
province: { code: '', name: '' },
|
|
city: { code: '', name: '' },
|
|
district: { code: '', name: '' },
|
|
},
|
|
}
|
|
},
|
|
created() {},
|
|
mounted() {
|
|
this.$forceUpdate()
|
|
},
|
|
methods: {
|
|
__,
|
|
showEdit(row) {
|
|
if (!row) {
|
|
this.title = this.__('添加')
|
|
} else {
|
|
this.title = this.__('编辑')
|
|
this.form = Object.assign({}, row)
|
|
this.initData(row)
|
|
}
|
|
this.dialogFormVisible = true
|
|
|
|
//不允许同时为0
|
|
if (this.form.store_longitude == 0 && this.form.store_latitude == 0) {
|
|
this.form.store_longitude = ''
|
|
this.form.store_latitude = ''
|
|
}
|
|
|
|
this.$forceUpdate()
|
|
},
|
|
initData(row) {
|
|
if (row.store_area) {
|
|
this.form.store_area = row.store_area.split('/')
|
|
}
|
|
|
|
this.form.store_district_id = row.store_district_id.split('/')
|
|
|
|
if (this.form.store_district_id.length > 0) {
|
|
} else {
|
|
this.form.store_district_id = ''
|
|
}
|
|
|
|
this.initQueryArea(this.form.store_district_id, this.form.store_area)
|
|
|
|
// 地图回显地位
|
|
this.mapCenter.lat = this.form.store_latitude
|
|
this.mapCenter.lng = this.form.store_longitude
|
|
},
|
|
|
|
initQueryArea(store_district_id, store_area) {
|
|
if (!store_district_id && store_area) return
|
|
if (!store_area) return
|
|
if (store_district_id[0]) {
|
|
this.queryArea.province.code = store_district_id[0]
|
|
}
|
|
if (store_district_id[1]) {
|
|
this.queryArea.city.code = store_district_id[1]
|
|
}
|
|
if (store_district_id[2]) {
|
|
this.queryArea.district.code = store_district_id[2]
|
|
}
|
|
if (store_area[0]) {
|
|
this.queryArea.province.name = store_area[0]
|
|
}
|
|
if (store_area[1]) {
|
|
this.queryArea.city.name = store_area[1]
|
|
}
|
|
if (store_area[2]) {
|
|
this.queryArea.district.name = store_area[2]
|
|
}
|
|
},
|
|
|
|
/***
|
|
* 地图点击事件。
|
|
*/
|
|
getClickInfo(e) {
|
|
this.mapCenter.lng = e.point.lng
|
|
this.mapCenter.lat = e.point.lat
|
|
|
|
this.form.store_latitude = this.mapCenter.lat
|
|
this.form.store_longitude = this.mapCenter.lng
|
|
},
|
|
syncCenterAndZoom(e) {
|
|
const { lng, lat } = e.target.getCenter()
|
|
this.mapCenter.lng = lng
|
|
this.mapCenter.lat = lat
|
|
this.zoom = e.target.getZoom()
|
|
|
|
console.info(this.zoom)
|
|
console.info(this.mapCenter)
|
|
|
|
this.form.store_latitude = this.mapCenter.lat
|
|
this.form.store_longitude = this.mapCenter.lng
|
|
},
|
|
getAddress(address) {
|
|
console.info('address')
|
|
console.info(address)
|
|
this.form.store_address = address.value
|
|
this.form.store_longitude = address.lng
|
|
this.form.store_latitude = address.lat
|
|
// 地图回显地位
|
|
|
|
this.mapCenter.lat = this.form.store_latitude
|
|
this.mapCenter.lng = this.form.store_longitude
|
|
},
|
|
changeAddr(addr) {
|
|
this.form.store_address = addr
|
|
},
|
|
close() {
|
|
this.dialogFormVisible = false
|
|
|
|
this.form = {}
|
|
this.queryArea = {
|
|
province: { code: '', name: '' },
|
|
city: { code: '', name: '' },
|
|
district: { code: '', name: '' },
|
|
}
|
|
|
|
this.$forceUpdate()
|
|
},
|
|
save() {
|
|
console.info(this.mapCenter)
|
|
let params = {}
|
|
params = this.form
|
|
|
|
delete params.store_district_id
|
|
|
|
if (this.queryArea.province.name) {
|
|
params.store_area = this.queryArea.province.name
|
|
}
|
|
if (this.queryArea.city.name) {
|
|
params.store_area += '/' + this.queryArea.city.name
|
|
}
|
|
if (this.queryArea.district.name) {
|
|
params.store_area += '/' + this.queryArea.district.name
|
|
}
|
|
|
|
if (this.queryArea.province.code) {
|
|
params.store_district_id = this.queryArea.province.code
|
|
}
|
|
if (this.queryArea.city.code) {
|
|
params.store_district_id += '/' + this.queryArea.city.code
|
|
}
|
|
if (this.queryArea.district.code) {
|
|
params.store_district_id += '/' + this.queryArea.district.code
|
|
}
|
|
|
|
this.$refs['form'].validate(async (valid) => {
|
|
if (valid) {
|
|
// const chain_category_id =
|
|
// params.chain_category_id[
|
|
// params.chain_category_id.length - 1
|
|
// ]
|
|
// params.chain_category_id = chain_category_id
|
|
|
|
const { msg, status } = await storeSetUp(params)
|
|
if (200 == status) {
|
|
this.$baseMessage(msg, 'success')
|
|
} else {
|
|
this.$baseMessage(msg, 'error')
|
|
}
|
|
this.$emit('fetch-data')
|
|
this.close()
|
|
} else {
|
|
return false
|
|
}
|
|
})
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
.map {
|
|
width: 100%;
|
|
height: 300px;
|
|
}
|
|
.admin_info {
|
|
margin-top: 20px;
|
|
font-size: 18px;
|
|
color: #b1eca4;
|
|
}
|
|
.sel_time {
|
|
float: right;
|
|
width: 325px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.el-form-item--small.el-form-item {
|
|
}
|
|
</style>
|