zfire-newmall-admin/src/views/secondHandMall/orderManagement/getLbsAmapRegion.js

import { lbsAmapRegion } from '@/api/common.js'
import geographicalPosi from '@/components/geographicalPosi/index.vue'
export default {
  data() {
    return {
      provinceList: [],
      cityList: [],
      areaList: [],
      streetList: [],
    }
  },
  computed: {
    amapRegion() {
      return [
        {
          name: 'el-select',
          md: 6,
          formItemAttributes: {
            label: '客户地址', //省
            prop: 'provinceId',
            rules: [],
            errLabel: '省'
          },
          options: this.provinceList.map((v, i) => ({ value: v.id, label: v.name })),
          attributes: { disabled: true, clearable: true, filterable: true, placeholder: '请选择' },
          events: {
            change: (val) => {
              // 获取省名称
              this.formData.province = this.provinceList.find(item => item.id === val)?.name || ''
              // 清除市区街道以及详细地址数据
              this.delDataK(1)
              lbsAmapRegion({ pid: val }).then(res => {
                this.cityList = res.data
              })
            }
          }
        },
        {
          name: 'el-select',
          md: 5,
          formItemAttributes: {
            'label-width': '0px',
            label: '', //市
            prop: 'cityId',
            rules: [],
            errLabel: '市'
          },
          options: this.cityList.map((v, i) => ({ value: v.id, label: v.name })),
          attributes: { disabled: true, clearable: true, filterable: true, placeholder: '请选择' },
          events: {
            change: (val) => {
              // 获取市名称
              this.formData.city = this.cityList.find(item => item.id === val).name
              // 清除区街道以及详细地址数据
              this.delDataK(2)
              lbsAmapRegion({ pid: val }).then(res => {
                this.areaList = res.data
              })
            }
          }
        },
        {
          name: 'el-select',
          md: 5,
          formItemAttributes: {
            'label-width': '0px',
            label: '', //区
            prop: 'areaId',
            rules: [],
            errLabel: '区'
          },
          options: this.areaList.map((v, i) => ({ value: v.id, label: v.name })),
          attributes: { disabled: true, clearable: true, filterable: true, placeholder: '请选择' },
          events: {
            change: (val) => {
              // 获取区名称
              this.formData.area = this.areaList.find(item => item.id === val).name
              // 清除街道以及详细地址数据
              this.delDataK(3)
              lbsAmapRegion({ pid: val }).then(res => {
                this.streetList = res.data
              })
            }
          }
        },
        {
          name: 'el-select',
          md: 5,
          formItemAttributes: {
            'label-width': '0px',
            label: '', //街道
            prop: 'streetId',
            rules: [],
            errLabel: '街道'
          },
          options: this.streetList.map((v, i) => ({ value: v.id, label: v.name })),
          attributes: { disabled: true, clearable: true, filterable: true, placeholder: '请选择' },
          events: {
            change: (val) => {
              // 获取街道名称
              this.formData.street = this.streetList.find(item => item.id === val).name
              // 清除详细地址数据
              this.delDataK(4)
            }
          }
        },
        {
          name: 'slot-component',
          md: 2,
          formItemAttributes: {
            'label-width': '0px',
            prop: '',
          },
          render: (h, { props }) => {
            return (
              <geographicalPosi
                disabled={false}
                formData={this.formData}
                onSelectPosi={data => {
                  // 获取经纬度
                  this.formData.lng = data.center[0]
                  this.formData.lat = data.center[1]
                  // 获取定位的省市区街道
                  var { province, city, district, township } = data.data.addressComponent
                  // 获取选中省名称id
                  var { id, name } = this.provinceList.find(item => item.name === province)
                  this.formData.provinceId = id
                  this.formData.province = name
                  // 请求市选项
                  lbsAmapRegion({ pid: this.formData.provinceId }).then(res => {
                    // 赋值市选项
                    this.cityList = res.data
                    // 获取选中市名称id
                    var { id, name } = res.data.find(item => item.name === city)
                    this.formData.cityId = id
                    this.formData.city = name
                    // 请求区选项
                    lbsAmapRegion({ pid: this.formData.cityId }).then(res => {
                      // 赋值区选项
                      this.areaList = res.data
                      // 获取选中区名称id
                      var { id, name } = res.data.find(item => item.name === district)
                      this.formData.areaId = id
                      this.formData.area = name
                      // 请求街道选项
                      lbsAmapRegion({ pid: this.formData.areaId }).then(res => {
                        // 赋值街道选项
                        this.streetList = res.data
                        // 获取选中街道名称id
                        var { id, name } = res.data.find(item => item.name === township)
                        this.formData.streetId = id
                        this.formData.street = name
                        // 赋值GPS详细地址
                        this.formData.gpsAddress = data.name
                        if (!this.formData.address) {
                          this.formData.address = data.name
                        }
                      })
                    })
                  })
                }}
              />
            )
          }
        },
        {
          name: 'el-input',
          md: 24,
          formItemAttributes: { label: '', prop: 'address', rules: [] },
          attributes: { disabled: false, placeholder: '详细地址' }
        },
      ]
    }
  },
  created(){
    this.getinitlbslist()
  },
  methods: {
    getinitlbslist() {
      // 初始化请求省市区街道下拉选项数据
      lbsAmapRegion({ pid: 0 }).then(res => {
        this.provinceList = res.data
        // 创建工单时获取ip地址定位赋值
        if (!this.id && !!~[1, 2, 3].indexOf(this?.workOrderType) && this.$IpAdd.province) {
          var item = this.provinceList.find(item => item.name === this.$IpAdd.province)
          if (item) {
            this.formData.provinceId = item.id
            this.formData.province = item.name
          }
        }
        if (this.formData.provinceId) {
          lbsAmapRegion({ pid: this.formData.provinceId }).then(res => {
            this.cityList = res.data
            // 创建工单时获取ip地址定位赋值
            if (!this.id && this.$IpAdd.city) {
              var item2 = this.cityList.find(item => item.name === this.$IpAdd.city)
              if (item2) {
                this.formData.cityId = item2.id
                this.formData.city = item2.name
              }
            }
            if (this.formData.cityId) {
              lbsAmapRegion({ pid: this.formData.cityId }).then(res => {
                this.areaList = res.data
              })
            }
            if (this.formData.areaId) {
              lbsAmapRegion({ pid: this.formData.areaId }).then(res => {
                this.streetList = res.data
              })
            }
          })
        }
      })
    },
    delDataK(num) {
      if (num <= 1) {
        // 删除市
        this.formData.cityId = ''
        this.formData.city = ''
        // 删除市选项
        this.cityList = []
      }
      if (num <= 2) {
        // 删除区
        this.formData.areaId = ''
        this.formData.area = ''
        // 删除区选项
        this.areaList = []
      }
      if (num <= 3) {
        // 删除街道
        this.formData.streetId = ''
        this.formData.street = ''
        // 删除街道选项
        this.streetList = []
      }
      // 删除gps地址
      this.formData.gpsAddress = ''
    }
  }
}