Merge branch 'master' of http://139.186.142.91:10010/r/productDev/zbomyoujia

liukangdong

2024-09-29 b2d360d9113b6955287108ca9e90d76a1f3c1419

 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="请输入部门id" 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客组织id" prop="orgOldId">
        <el-input v-model="form.orgOldId" placeholder="请输入部门U客组织id" v-trim/>
      </el-form-item>
      <el-form-item label="上级组织Id" prop="parentId">
        <el-input v-model="form.parentId" placeholder="请输入上级组织Id" 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="请输入组织SF存放码" 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="请输入企业微信组织ID" v-trim/>
      </el-form-item>
      <el-form-item label="钉钉部门ID" prop="dingdingId">
        <el-input v-model="form.dingdingId" placeholder="请输入钉钉部门ID" 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="所属关联F码" prop="fcode">
        <el-input v-model="form.fcode" placeholder="请输入所属关联F码" v-trim/>
      </el-form-item>
      <el-form-item label="所属关联S码" prop="scode">
        <el-input v-model="form.scode" placeholder="请输入所属关联S码" v-trim/>
      </el-form-item>
      <el-form-item label="ZCODE" prop="zcode">
        <el-input v-model="form.zcode" placeholder="请输入ZCODE" v-trim/>
      </el-form-item>
      <el-form-item label="关联S码" prop="glCode">
        <el-input v-model="form.glCode" placeholder="请输入关联S码" v-trim/>
      </el-form-item>
      <el-form-item label="关联S码名称" prop="glName">
        <el-input v-model="form.glName" placeholder="请输入关联S码名称" 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>