From ebc6e7ee67f13e7aa311e737dfcb4c5caed112ee Mon Sep 17 00:00:00 2001
From: liukangdong <898885815@qq.com>
Date: 星期四, 15 八月 2024 18:23:57 +0800
Subject: [PATCH] ll
---
admin/src/components/business/OperaShopWindow.vue | 358 +++++++++++++++++++++++++++++++++++++++--------------------
1 files changed, 235 insertions(+), 123 deletions(-)
diff --git a/admin/src/components/business/OperaShopWindow.vue b/admin/src/components/business/OperaShopWindow.vue
index 33fe966..b382539 100644
--- a/admin/src/components/business/OperaShopWindow.vue
+++ b/admin/src/components/business/OperaShopWindow.vue
@@ -1,160 +1,103 @@
<template>
<GlobalWindow
:title="title"
+ width="70%"
:visible.sync="visible"
:confirm-working="isWorking"
@confirm="confirm"
>
<el-form :model="form" ref="form" :rules="rules">
- <el-form-item label="鍒涘缓浜虹紪鐮�" prop="creator">
- <el-input v-model="form.creator" placeholder="璇疯緭鍏ュ垱寤轰汉缂栫爜" v-trim/>
+ <div>
+ <el-form-item label="鎵�灞炲尯鍩�" prop="provinceCode" label-width="100px">
+ <div class="address-plus">
+ <el-select v-model="form.provinceCode" placeholder="璇烽�夋嫨鐪佷唤" @change="selectProvince" style="width:150px; margin-right: 25px" >
+ <el-option
+ v-for="item in provinces"
+ :key="item.id"
+ :value="item.id"
+ :label="item.name"
+ ></el-option>
+ </el-select>
+ <el-select v-model="form.cityCode" placeholder="璇烽�夋嫨鍩庡競" @change="selectCity" style="width:150px; margin-right: 25px">
+ <el-option
+ v-for="item in cities"
+ :key="item.id"
+ :value="item.id"
+ :label="item.name"
+ ></el-option>
+ </el-select>
+ <el-select v-model="form.areaCode" placeholder="璇烽�夋嫨鍘垮尯" @change="selectArea" style="width:150px; margin-right: 22px">
+ <el-option
+ v-for="item in areas"
+ :key="item.id"
+ :value="item.id"
+ :label="item.name"
+ ></el-option>
+ </el-select>
+ </div>
+ </el-form-item>
+ </div>
+ <el-form-item label="鑱旂郴浜�" prop="linkerName" label-width="100px">
+ <el-input v-model="form.linkerName" placeholder="璇疯緭鍏ヨ仈绯讳汉" v-trim style="width:500px; "/>
</el-form-item>
- <el-form-item label="鍒涘缓鏃堕棿" prop="createDate">
- <el-date-picker v-model="form.createDate" value-format="yyyy-MM-dd" placeholder="璇疯緭鍏ュ垱寤烘椂闂�"></el-date-picker>
+ <el-form-item label="鑱旂郴鐢佃瘽" prop="linkPhone" label-width="100px">
+ <el-input v-model="form.linkPhone" placeholder="璇疯緭鍏ヨ仈绯荤數璇�" v-trim style="width:500px; "/>
</el-form-item>
- <el-form-item label="鏇存柊浜虹紪鐮�" prop="editor">
- <el-input v-model="form.editor" placeholder="璇疯緭鍏ユ洿鏂颁汉缂栫爜" v-trim/>
+ <el-form-item label="璇︾粏鍦板潃" prop="address" label-width="100px">
+ <el-input v-model="form.address" placeholder="璇疯緭鍏ヨ缁嗗湴鍧�" v-trim style="width:500px; " @blur="changeMapCenter"/>
</el-form-item>
- <el-form-item label="鏇存柊鏃堕棿" prop="editDate">
- <el-date-picker v-model="form.editDate" value-format="yyyy-MM-dd" placeholder="璇疯緭鍏ユ洿鏂版椂闂�"></el-date-picker>
- </el-form-item>
- <el-form-item label="鏄惁鍒犻櫎0鍚� 1鏄�" prop="isdeleted">
- <el-input v-model="form.isdeleted" placeholder="璇疯緭鍏ユ槸鍚﹀垹闄�0鍚� 1鏄�" v-trim/>
- </el-form-item>
- <el-form-item label="澶囨敞" prop="remark">
- <el-input v-model="form.remark" placeholder="璇疯緭鍏ュ娉�" v-trim/>
- </el-form-item>
- <el-form-item label="閮ㄩ棬id" prop="orgId">
- <el-input v-model="form.orgId" placeholder="璇疯緭鍏ラ儴闂╥d" v-trim/>
- </el-form-item>
- <el-form-item label="閮ㄩ棬鍚嶇О" prop="name">
- <el-input v-model="form.name" placeholder="璇疯緭鍏ラ儴闂ㄥ悕绉�" v-trim/>
- </el-form-item>
- <el-form-item label="閮ㄩ棬U瀹㈢粍缁噄d" prop="orgOldId">
- <el-input v-model="form.orgOldId" placeholder="璇疯緭鍏ラ儴闂║瀹㈢粍缁噄d" v-trim/>
- </el-form-item>
- <el-form-item label="涓婄骇缁勭粐Id" prop="parentId">
- <el-input v-model="form.parentId" placeholder="璇疯緭鍏ヤ笂绾х粍缁嘔d" v-trim/>
- </el-form-item>
- <el-form-item label="鐘舵��" prop="status">
- <el-input v-model="form.status" placeholder="璇疯緭鍏ョ姸鎬�" v-trim/>
- </el-form-item>
- <el-form-item label="鎺掑簭鐮�" prop="orderNum">
- <el-input v-model="form.orderNum" placeholder="璇疯緭鍏ユ帓搴忕爜" v-trim/>
- </el-form-item>
- <el-form-item label="缁勭粐SF瀛樻斁鐮�" prop="sourceCode">
- <el-input v-model="form.sourceCode" placeholder="璇疯緭鍏ョ粍缁嘢F瀛樻斁鐮�" v-trim/>
- </el-form-item>
- <el-form-item label="缁勭粐缂栫爜" prop="code">
- <el-input v-model="form.code" placeholder="璇疯緭鍏ョ粍缁囩紪鐮�" v-trim/>
- </el-form-item>
- <el-form-item label="缁勭粐绫诲瀷1:涓�浣撳晢 ,2:鍔犵洘鍟�,3:搴楅潰锛�4:閮ㄩ棬(HR/鍔�)锛�5:铏氭嫙搴楅潰(鍔�/铏�)" prop="type">
- <el-input v-model="form.type" placeholder="璇疯緭鍏ョ粍缁囩被鍨�1:涓�浣撳晢 ,2:鍔犵洘鍟�,3:搴楅潰锛�4:閮ㄩ棬(HR/鍔�)锛�5:铏氭嫙搴楅潰(鍔�/铏�)" v-trim/>
- </el-form-item>
- <el-form-item label="閮ㄩ棬灞炴�э紙1:瀹炰綋搴楅潰銆�2:铏氭嫙搴楅潰銆�3:鐢靛晢閮ㄣ��4:娓犻亾閮ㄣ��5:璐㈠姟閮級" prop="attribute">
- <el-input v-model="form.attribute" placeholder="璇疯緭鍏ラ儴闂ㄥ睘鎬э紙1:瀹炰綋搴楅潰銆�2:铏氭嫙搴楅潰銆�3:鐢靛晢閮ㄣ��4:娓犻亾閮ㄣ��5:璐㈠姟閮級" v-trim/>
- </el-form-item>
- <el-form-item label="浼佷笟寰俊缁勭粐ID" prop="weixinId">
- <el-input v-model="form.weixinId" placeholder="璇疯緭鍏ヤ紒涓氬井淇＄粍缁嘔D" v-trim/>
- </el-form-item>
- <el-form-item label="閽夐拤閮ㄩ棬ID" prop="dingdingId">
- <el-input v-model="form.dingdingId" placeholder="璇疯緭鍏ラ拤閽夐儴闂↖D" v-trim/>
- </el-form-item>
- <el-form-item label="鏈�杩戝悓姝ユ椂闂�" prop="syncDate">
- <el-date-picker v-model="form.syncDate" value-format="yyyy-MM-dd" placeholder="璇疯緭鍏ユ渶杩戝悓姝ユ椂闂�"></el-date-picker>
- </el-form-item>
- <el-form-item label="鏈�杩戝悓姝ュ娉�" prop="syncInfo">
- <el-input v-model="form.syncInfo" placeholder="璇疯緭鍏ユ渶杩戝悓姝ュ娉�" v-trim/>
- </el-form-item>
- <el-form-item label="鎵�灞炲叧鑱擣鐮�" prop="fcode">
- <el-input v-model="form.fcode" placeholder="璇疯緭鍏ユ墍灞炲叧鑱擣鐮�" v-trim/>
- </el-form-item>
- <el-form-item label="鎵�灞炲叧鑱擲鐮�" prop="scode">
- <el-input v-model="form.scode" placeholder="璇疯緭鍏ユ墍灞炲叧鑱擲鐮�" v-trim/>
- </el-form-item>
- <el-form-item label="ZCODE" prop="zcode">
- <el-input v-model="form.zcode" placeholder="璇疯緭鍏CODE" v-trim/>
- </el-form-item>
- <el-form-item label="鍏宠仈S鐮�" prop="glCode">
- <el-input v-model="form.glCode" placeholder="璇疯緭鍏ュ叧鑱擲鐮�" v-trim/>
- </el-form-item>
- <el-form-item label="鍏宠仈S鐮佸悕绉�" prop="glName">
- <el-input v-model="form.glName" placeholder="璇疯緭鍏ュ叧鑱擲鐮佸悕绉�" v-trim/>
- </el-form-item>
- <el-form-item label="鍥藉" prop="country">
- <el-input v-model="form.country" placeholder="璇疯緭鍏ュ浗瀹�" v-trim/>
- </el-form-item>
- <el-form-item label="鐪佷唤缂栫爜" prop="provinceCode">
- <el-input v-model="form.provinceCode" placeholder="璇疯緭鍏ョ渷浠界紪鐮�" v-trim/>
- </el-form-item>
- <el-form-item label="鐪佷唤鍚嶇О" prop="provinceName">
- <el-input v-model="form.provinceName" placeholder="璇疯緭鍏ョ渷浠藉悕绉�" v-trim/>
- </el-form-item>
- <el-form-item label="鍩庡競鐮�" prop="cityCode">
- <el-input v-model="form.cityCode" placeholder="璇疯緭鍏ュ煄甯傜爜" v-trim/>
- </el-form-item>
- <el-form-item label="鍩庡競鍚嶇О" prop="cityName">
- <el-input v-model="form.cityName" placeholder="璇疯緭鍏ュ煄甯傚悕绉�" v-trim/>
- </el-form-item>
- <el-form-item label="鍖哄幙缂栫爜" prop="areaCode">
- <el-input v-model="form.areaCode" placeholder="璇疯緭鍏ュ尯鍘跨紪鐮�" v-trim/>
- </el-form-item>
- <el-form-item label="鍖哄幙鍚嶇О" prop="areaName">
- <el-input v-model="form.areaName" placeholder="璇疯緭鍏ュ尯鍘垮悕绉�" v-trim/>
- </el-form-item>
- <el-form-item label="鍝佺被缂栫爜" prop="unitCode">
- <el-input v-model="form.unitCode" placeholder="璇疯緭鍏ュ搧绫荤紪鐮�" v-trim/>
+ <el-form-item label="缁忕含搴�" prop="posInfo" label-width="100px">
+ <el-input v-model="form.longitude" clearable placeholder="鐐瑰嚮鍦板浘鑾峰彇缁忓害" v-trim style="width:245px; "/>-
+ <el-input v-model="form.latitude" clearable placeholder="鐐瑰嚮鍦板浘鑾峰彇缁村害" v-trim style="width:245px; "/>
</el-form-item>
</el-form>
+ <div class="map-box">
+ <div id="mapContainer" ref="mapContainer" style="width:80%;margin-left:10%;height:400px;overflow: hidden;" ></div>
+ <div class="map-search">
+ <el-input v-model="searchValue" placeholder="璇疯緭鍏ヨ妫�绱㈢殑浣嶇疆淇℃伅" />
+ <el-button @click="searchAddress(searchValue)" type="primary">鎼滅储</el-button>
+ </div>
+ </div>
</GlobalWindow>
</template>
-
<script>
import BaseOpera from '@/components/base/BaseOpera'
import GlobalWindow from '@/components/common/GlobalWindow'
+import { jsonp } from 'vue-jsonp'
+
export default {
name: 'OperaShopWindow',
extends: BaseOpera,
components: { GlobalWindow },
data () {
return {
+ geocoder: null,
+ map: [],
+ searchValue: '',
+ marker: null,
// 琛ㄥ崟鏁版嵁
+ provinces: [],
+ cities: [],
+ areas: [],
form: {
id: null,
- creator: '',
- createDate: '',
- editor: '',
- editDate: '',
- isdeleted: '',
- remark: '',
- orgId: '',
- name: '',
- orgOldId: '',
- parentId: '',
- status: '',
- orderNum: '',
- sourceCode: '',
- code: '',
- type: '',
- attribute: '',
- weixinId: '',
- dingdingId: '',
- syncDate: '',
- syncInfo: '',
- fcode: '',
- scode: '',
- zcode: '',
- glCode: '',
- glName: '',
- country: '',
+ provinceId: '',
provinceCode: '',
provinceName: '',
cityCode: '',
+ cityId: '',
cityName: '',
+ areaId: '',
areaCode: '',
areaName: '',
- unitCode: ''
+ longitude: '',
+ latitude: '',
+ address: '',
+ linkPhone: '',
+ posInfo: '',
+ linkerName: ''
},
+ geolocation: null,
// 楠岃瘉瑙勫垯
rules: {
}
@@ -165,6 +108,175 @@
api: '/business/shop',
'field.id': 'id'
})
+ },
+ methods: {
+ searchAddress () {
+ if ( this.searchValue) {
+ var that = this
+ jsonp('https://apis.map.qq.com/ws/geocoder/v1/', {
+ address: this.searchValue,
+ key: 'HIDBZ-2QXL4-TAWUD-XET6Q-EKTJE-CCBSQ',
+ output: 'jsonp'
+ }).then(result => {
+ console.log(result)
+ if(result.result.location){
+ that.changePostion(result.result.location.lng, result.result.location.lat)
+ }
+ }).catch(error => {
+ // 璇锋眰澶辫触澶勭悊
+ console.log(error)
+ })
+ }
+ },
+ initMap (lat, long) {
+ const that = this
+ var center = new qq.maps.LatLng(lat || 39.916527, long || 116.397128)// 榛樿鍖椾含澶╁畨闂�
+ this.map = new qq.maps.Map(document.getElementById('mapContainer'), {
+ center: center,
+ zoom: 17
+ })
+ this.changePostion(long, lat)
+ qq.maps.event.addListener(this.map, 'click',
+ function (event) {
+ that.changePostion(event.latLng.lng, event.latLng.lat)
+ }
+ )
+ /* this.geocoder = new qq.maps.Geocoder()
+ this.geocoder.setComplete(function (result) {
+ that.changePostion(result.detail.location.lng, result.detail.location.lat)
+ })
+ // 鑻ユ湇鍔¤姹傚け璐ワ紝鍒欒繍琛屼互涓嬪嚱鏁�
+ this.geocoder.setError(function (e) {
+ console.log(that.searchValue + '=====閫嗚В鏋愬け璐�')
+ })*/
+ },
+ open (title, target) {
+ this.title = title
+ this.visible = true
+ this.form.provinceId = ''
+ this.form.cityId = ''
+ this.searchValue = ''
+ if (target == null) {
+ this.$nextTick(() => {
+ this.$refs.form.resetFields()
+ this.form[this.configData['field.id']] = null
+ this.loadProvince(this.form.provinceId, true)
+ })
+ return
+ }
+ this.$nextTick(() => {
+ for (const key in this.form) {
+ this.form[key] = target[key]
+ }
+ this.loadProvince(this.form.provinceId, true)
+ const mapContainer = this.$refs.mapContainer // 鑾峰彇鍦板浘瀹瑰櫒
+ if (mapContainer) {
+ // 鍒濆鍖栧湴鍥句箣鍓嶆鏌ュ鍣ㄦ槸鍚﹀瓨鍦�
+ this.initMap(this.form.latitude, this.form.longitude)
+ // 鍒濆鍖栬吘璁湴鍥�
+ }
+ })
+ },
+ loadProvince () {
+ this.api.areaList({ pid: '1' })
+ .then(res => {
+ this.provinces = res
+ })
+ if (this.form.provinceCode) {
+ this.selectProvince(this.form.provinceCode, true)
+ }
+ },
+ // 閫夋嫨鐪佷唤
+ selectProvince (val, isInit) {
+ this.provinces.forEach(item => {
+ if (item.id == val) {
+ this.form.provinceName = item.name
+ }
+ })
+ this.cities = []
+ this.areas = []
+ if (!isInit) {
+ this.form.cityName = ''
+ this.form.areaCode = ''
+ this.form.cityCode = ''
+ this.form.areaName = ''
+ }
+ if (!val || val == '') {
+ return
+ }
+ this.api.areaList({ pid: val })
+ .then(res => {
+ this.cities = res
+ if (isInit) {
+ this.selectCity(this.form.cityCode, isInit)
+ }
+ })
+ },
+ // 閫夋嫨鍩庡競
+ selectCity (val, isInit) {
+ this.cities.forEach(item => {
+ if (item.id == val) {
+ this.form.cityName = item.name
+ }
+ })
+ this.areas = []
+ if (!isInit) {
+ this.form.areaCode = ''
+ this.form.areaName = ''
+ }
+ if (!val || val == '') {
+ return
+ }
+ this.api.areaList({ pid: val })
+ .then(res => {
+ this.areas = res
+ })
+ },
+ selectArea (val) {
+ this.areas.forEach(item => {
+ if (item.id == val) {
+ this.form.areaName = item.name
+ }
+ })
+ },
+ changeMapCenter () {
+ this.searchValue = (this.form.provinceName || '') + (this.form.cityName || '') + (this.form.areaName || '') + (this.form.address || '')
+ this.searchAddress()
+ },
+ changePostion (lng, lat) {
+ if (lng || lat) {
+ this.form.longitude = lng
+ this.form.latitude = lat
+ if (this.map) {
+ if (this.marker) {
+ this.marker.setMap(null)
+ }
+ var pos = new qq.maps.LatLng(lat, lng)
+ this.map.setCenter(pos)
+ this.marker = new qq.maps.Marker({
+ position: pos,
+ animation: qq.maps.MarkerAnimation.DROP,
+ map: this.map
+ })
+ }
+ }
+ }
}
}
</script>
+<style scoped>
+.map-box {
+ position: relative;
+}
+.map-search {
+ z-index: 1000;
+ display: flex;
+ position: absolute;
+ top: 20px;
+ left: 120px;
+ width: 350px;
+}
+button {
+ border-radius: 0;
+}
+</style>
--
Gitblit v1.9.3