zfire-newmall-admin/src/views/valueAddedService/orderSettleManag/mixins/basicInfo.js

import { lbsAmapRegion } from '@/api/common.js'
import { listPageV2, getDetail } from "@/api/engineeringMaintenance/basicData";
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: { disabled: false, placeholder: '请输入' },
          formItemAttributes: {
            label: '客户名称',
            prop: 'userName',
            rules: [...required]
          },
          events: {
            input: (v) => {
              this.addFormData.linkName = v
            }
          }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: { disabled: false, placeholder: '请输入', maxlength: 11 },
          formItemAttributes: {
            label: '客户电话',
            prop: 'userMobile',
            rules: [...mobileRequired]
          }
        },
        {
          name: 'slot-component',
          md: 12,
          formItemAttributes: {
            'label-width': '0px',
            prop: '',
          },
          render: (h, { props }) => {
            return null
          }
        },
        // {
        //   name: 'el-select',
        //   md: 6,
        //   formItemAttributes: {
        //     label: '客户地址', //省
        //     prop: 'provinceId',
        //     rules: [required],
        //     errLabel: '省'
        //   },
        //   options: this.provinceList.map((v, i) => ({ value: v.id, label: v.name })),
        //   attributes: { disabled: true, clearable: true, filterable: true, placeholder: '请选择' },
        //   events: {
        //     change: () => {
        //       // 获取省名称
        //       this.addFormData.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: [required],
        //     errLabel: '市'
        //   },
        //   options: this.cityList.map((v, i) => ({ value: v.id, label: v.name })),
        //   attributes: { disabled: true, clearable: true, filterable: true, placeholder: '请选择' },
        //   events: {
        //     change: () => {
        //       // 获取市名称
        //       this.addFormData.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: [required],
        //     errLabel: '区'
        //   },
        //   options: this.areaList.map((v, i) => ({ value: v.id, label: v.name })),
        //   attributes: { disabled: true, clearable: true, filterable: true, placeholder: '请选择' },
        //   events: {
        //     change: () => {
        //       // 获取区名称
        //       this.addFormData.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: [required],
        //     errLabel: '街道'
        //   },
        //   options: this.streetList.map((v, i) => ({ value: v.id, label: v.name })),
        //   attributes: { disabled: true, clearable: true, filterable: true, placeholder: '请选择' },
        //   events: {
        //     change: () => {
        //       // 获取街道名称
        //       this.addFormData.street = this.streetList.find(item => item.id === val).name
        //       // 清除详细地址数据
        //       this.delDataK(4)
        //     }
        //   }
        // },
        {
          name: 'el-input',
          md: 21,
          formItemAttributes: { label: '客户地址', prop: 'userAddress', rules: [...required] },
          attributes: { disabled: false, placeholder: '详细地址' }
        },
        {
          name: 'slot-component',
          md: 3,
          formItemAttributes: {
            'label-width': '0px',
            prop: '',
          },
          render: (h, { props }) => {
            return (
              <geographicalPosi
                disabled={false}
                formData={this.addFormData}
                onSelectPosi={data => {
                  // 赋值GPS详细地址
                  this.addFormData.userAddress = data.name
                  // // 获取经纬度
                  // this.addFormData.lng = data.center[0]
                  // this.addFormData.lat = data.center[1]
                  // // 获取定位的省市区街道
                  // var { province, city, district, township } = data.data.addressComponent
                  // // 获取选中省名称id
                  // var { id, name } = this.provinceList.find(item => item.name === province)
                  // this.addFormData.provinceId = id
                  // this.addFormData.province = name
                  // // 请求市选项
                  // lbsAmapRegion({ pid: this.addFormData.provinceId }).then(res => {
                  //   // 赋值市选项
                  //   this.cityList = res.data
                  //   // 获取选中市名称id
                  //   var { id, name } = res.data.find(item => item.name === city)
                  //   this.addFormData.cityId = id
                  //   this.addFormData.city = name
                  //   // 请求区选项
                  //   lbsAmapRegion({ pid: this.addFormData.cityId }).then(res => {
                  //     // 赋值区选项
                  //     this.areaList = res.data
                  //     // 获取选中区名称id
                  //     var { id, name } = res.data.find(item => item.name === district)
                  //     this.addFormData.areaId = id
                  //     this.addFormData.area = name
                  //     // 请求街道选项
                  //     lbsAmapRegion({ pid: this.addFormData.areaId }).then(res => {
                  //       // 赋值街道选项
                  //       this.streetList = res.data
                  //       // 获取选中街道名称id
                  //       var { id, name } = res.data.find(item => item.name === township)
                  //       this.addFormData.streetId = id
                  //       this.addFormData.street = name
                  //       // 赋值GPS详细地址
                  //       this.addFormData.userAddress = data.name
                  //     })
                  //   })
                  // })
                }}
              />
            )
          }
        },
        {
          name: 'el-input',
          md: 24,
          attributes: {
            disabled: false,
            type: 'textarea',
            rows: 3,
            placeholder: '请输入'
          },
          formItemAttributes: {
            label: '备注',
            prop: 'remark',
            rules: []
          }
        }
      ]
    }
  },
  methods: {
    getinitlbslist() {
      // 初始化请求省市区街道下拉选项数据
      lbsAmapRegion({ pid: 0 }).then(res => {
        this.provinceList = res.data
        // 创建工单时获取ip地址定位赋值
        if (!this.addFormData.id && this.$IpAdd.province) {
          var item = this.provinceList.find(item => item.name === this.$IpAdd.province)
          if (item) {
            this.addFormData.provinceId = item.id
            this.addFormData.province = item.name
          }
        }
        if (this.addFormData.provinceId) {
          lbsAmapRegion({ pid: this.addFormData.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.addFormData.cityId = item2.id
                this.addFormData.city = item2.name
              }
            }
            if (this.addFormData.cityId) {
              lbsAmapRegion({ pid: this.addFormData.cityId }).then(res => {
                this.areaList = res.data
              })
            }
            if (this.addFormData.areaId) {
              lbsAmapRegion({ pid: this.addFormData.areaId }).then(res => {
                this.streetList = res.data
              })
            }
          })
        }
      })
    },
    delDataK(num) {
      if (num <= 1) {
        // 删除市
        this.addFormData.cityId = ''
        this.addFormData.city = ''
        // 删除市选项
        this.cityList = []
      }
      if (num <= 2) {
        // 删除区
        this.addFormData.areaId = ''
        this.addFormData.area = ''
        // 删除区选项
        this.areaList = []
      }
      if (num <= 3) {
        // 删除街道
        this.addFormData.streetId = ''
        this.addFormData.street = ''
        // 删除街道选项
        this.streetList = []
      }
      // 删除gps地址
      this.addFormData.userAddress = ''
    }
  }
}