zfire-newmall-admin/src/views/workOrder/penaltyWorkOrder/mixins/basicInfo.js

import { lbsAmapRegion } from '@/api/common.js'
import geographicalPosi from '@/components/geographicalPosi/index.vue'
import { required, mobileRequired, mobile, httpUrl, email } from '@/components/template/rules_verify.js'
export default {
  data() {
    return {
      provinceList: [],
      cityList: [],
      areaList: [],
      streetList: [],
    }
  },
  computed: {
    // 基本信息数据模型
    basicInfo() {
      return [
        {
          name: 'el-input',
          md: 6,
          attributes: {
            placeholder: '请输入',
            disabled: this.formData.status == "OK"
          },
          formItemAttributes: {
            label: '客户名称',
            prop: 'userName',
            rules: [...required],
          },
          events: {
            input: (v) => {
              this.formData.linkName = v
            }
          }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: {
            placeholder: '请输入',
            disabled: this.formData.status == "OK"
          },
          formItemAttributes: {
            label: '联系人',
            prop: 'linkName',
            rules: [...required],
          }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: {
            placeholder: '请输入',
            disabled: this.formData.status == "OK", maxlength: 11
          },
          formItemAttributes: {
            label: '客户电话',
            prop: 'userMobile',
            rules: [...mobileRequired],
          }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: {
            placeholder: '请输入',
            disabled: this.formData.status == "OK", maxlength: 11
          },
          formItemAttributes: {
            label: '客户电话2',
            prop: 'userMobile2',
          }
        },
        {
          name: 'el-select',
          md: 6,
          formItemAttributes: {
            label: '客户地址', //省
            prop: 'provinceId',
            errLabel: '省',
            rules: [...required],
          },
          options: this.provinceList.map((v, i) => ({ value: v.id, label: v.name })),
          attributes: {
            disabled: this.formData.status == "OK", 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',
            errLabel: '市',
            rules: [...required],
          },
          options: this.cityList.map((v, i) => ({ value: v.id, label: v.name })),
          attributes: {
            disabled: this.formData.status == "OK", 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',
            errLabel: '区',
            rules: [...required],
          },
          options: this.areaList.map((v, i) => ({ value: v.id, label: v.name })),
          attributes: {
            disabled: this.formData.status == "OK", 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',
            errLabel: '街道',
            rules: [...required],
          },
          options: this.streetList.map((v, i) => ({ value: v.id, label: v.name })),
          attributes: {
            disabled: this.formData.status == "OK", 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: 3,
          formItemAttributes: {
            'label-width': '0px',
            prop: '',
          },
          render: (h, { props }) => {
            return (
              <geographicalPosi
                disabled={this.formData.status == "OK"}
                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
                        this.formData.address = data.name
                      })
                    })
                  })
                }}
              />
            )
          }
        }, {
          name: 'el-input',
          md: 24,
          formItemAttributes: { label: '详细地址', prop: 'address', rules: [...required] },
          attributes: {
            placeholder: '详细地址',
            disabled: this.formData.status == "OK"
          }
        },
      ]
    }
  },
  methods: {
    // 获取省市区街道
    getinitlbslist() {
      // 初始化请求省市区街道下拉选项数据
      lbsAmapRegion({ pid: 0 }).then(res => {
        this.provinceList = res.data
        if (this.formData.provinceId) {
          var item = this.provinceList.find(item => item.name === this.formData.provinceId)
          if (item) {
            this.formData.province = item.name
          }
          lbsAmapRegion({ pid: this.formData.provinceId }).then(res => {
            this.cityList = res.data
            if (this.formData.cityId) {
              var item2 = this.cityList.find(item => item.name === this.formData.cityId)
              if (item2) {
                this.formData.city = item2.name
              }
              lbsAmapRegion({ pid: this.formData.cityId }).then(res => {
                this.areaList = res.data
                if (this.formData.areaId) {
                  var item3 = this.areaList.find(item => item.name === this.formData.areaId)
                  if (item3) {
                    this.formData.city = item2.name
                  }
                  lbsAmapRegion({ pid: this.formData.areaId }).then(res => {
                    this.streetList = res.data
                    if (this.formData.streetId) {
                      var item4 = this.streetList.find(item => item.name === this.formData.streetId)
                      if (item4) {
                        this.formData.street = item4.name
                      }
                    }
                  })
                }
              })
            }
          })
        }
      })
    },
    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.address = ''
    },
  }
}