PropertySettledForm.vue

<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-card title="物业集团基本信息">
          <a-row>
            <a-col :span="12">
              <a-form-model-item label="物业集团名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="propertyName">
                <a-input v-model="model.propertyName" placeholder="请输入物业集团名称"  ></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="统一信用代码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="creditCode">
                <a-input v-model="model.creditCode" placeholder="请输入统一信用代码"  ></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="法人姓名" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="legalName">
                <a-input v-model="model.legalName" placeholder="请输入法人姓名"  ></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="注册资本" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="registCapital">
                <a-input-number v-model="model.registCapital" :min="1" placeholder="请输入注册资本" style="width: 100%" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="联系人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="contactName">
                <a-input v-model="model.contactName" placeholder="请输入联系人"  ></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="联系人电话" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="contactPhone">
                <a-input v-model="model.contactPhone" placeholder="请输入联系人电话"  ></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="注册地址" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="registAdress">
                <area-cascader
                  v-model="model.registAdress"
                  :data="pcaa"
                  :level="1"
                  type="all"
                  @change="addressChange"
                  style="width:100%"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="详细地址" :labelCol="{ xs:{ span: 24 }, sm:{ span: 3 } }" :wrapperCol="wrapperCol" prop="addressInfo">
                <a-input v-model="model.addressInfo" placeholder="请输入详细地址" @blur="addressBlur" ></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="" :offset="3" :pull="3" :labelCol="{ xs:{ span: 24 }, sm:{ span: 3 } }">
                <div class="hhh">
                  <div id="container" style="width:100%;height:200px"></div>
                </div>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="集团logo" :labelCol="{ xs:{ span: 24 }, sm:{ span: 3 } }" :wrapperCol="wrapperCol" prop="logoUrl">
                <j-image-upload bizPath="scott/pic" v-model="model.logoUrl"></j-image-upload>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="集团介绍" :labelCol="{ xs:{ span: 24 }, sm:{ span: 3 } }" :wrapperCol="wrapperCol" prop="groupInfo">
                <a-textarea v-model="model.groupInfo" placeholder="请输入集团介绍" :auto-size="{ minRows: 3, maxRows: 5 }" />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-card>
        <a-card title="授权信息">
          <a-row>
            <!-- <a-col :span="12">
              <a-form-model-item label="试用日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="empowerType">
                <a-range-picker v-model="model.empowerDate" placeholder="请选择试用日期" />
              </a-form-model-item>
            </a-col> -->
            <a-col :span="12">
              <a-form-model-item label="授权开始日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="empowerBeginDate">
                <j-date placeholder="请选择授权开始日期" v-model="model.empowerBeginDate"  style="width: 100%" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="授权结束日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="empowerEndDate">
                <j-date placeholder="请选择授权结束日期" v-model="model.empowerEndDate"  style="width: 100%" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="试用小区数量" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="ontrialCommunityNum">
                <a-input-number v-model="model.ontrialCommunityNum" placeholder="请输入试用小区数量" style="width: 100%" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="收费标准" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="chargingStandardId">
                <a-select v-model="model.chargingStandardId" placeholder="请选择收费标准" style="width: 100%">
                  <a-select-option v-for="item in costList" :key="item.id" :value="item.id">{{item.chargingName}}</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="管理员账户" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="adminLoginName">
                <a-input v-model="model.adminLoginName" placeholder="请输入管理员账户"  ></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="管理员密码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="adminPassword">
                <a-input v-model="model.adminPassword" placeholder="请输入管理员密码"  ></a-input>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-card>
        <a-card title="合同附件">
          <a-row>
            <a-col :span="24">
              <a-form-model-item label="合同附件" :labelCol="{ xs:{ span: 24 }, sm:{ span: 3 } }" :wrapperCol="wrapperCol" prop="contractUrl">
                <j-upload v-model="model.contractUrl"></j-upload>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-card>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>
  const mapZoom = [5,8,10,12]
  let timer = null;
  import { getPropertyChargruleListApi } from '@/api/api'
  import { httpAction, getAction } from '@/api/manage'
  import { isMobile } from '@/utils/validate'

  export default {
    name: 'PropertySettledForm',
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      const validateToNextPhone = (rule, value, callback)=> {
        if (value && isMobile(value)) {
          callback();
        } else {
          callback('请输入正确的联系人电话！');
        }
      }
      return {
        pcaa: this.$Jpcaa,
        model:{
          propertyName: '',
          creditCode: '',
          legalName: '',
          registCapital: undefined,
          contactName: '',
          contactPhone: '',
          registAdress: [],
          provinceName: '',
          provinceCode: '',
          cityName: '',
          cityCode: '',
          countyName: '',
          countyCode: '',
          addressInfo: '',
          logoUrl: '',
          groupInfo: '',
          empowerBeginDate: '',
          empowerEndDate: '',
          ontrialCommunityNum: undefined,
          chargingStandardId: '',
          contractUrl: '',
          adminLoginName: '',
          adminPassword: '123456',
          longitude: '',
          latitude: ''
        },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
          propertyName: [{ required: true, message: '请输入物业集团名称', trigger: 'blur' }],
          creditCode: [{ required: true, message: '请输入统一信用代码', trigger: 'blur' }],
          legalName: [{ required: true, message: '请输入法人代表', trigger: 'blur' }],
          registCapital: [{ required: true, message: '请输入注册资本', trigger: 'blur' }],
          contactName: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
          contactPhone: [
            { required: true, message: '请输入联系人电话', trigger: 'blur' },
            { validator: validateToNextPhone }
          ],
          registAdress: [{ required: true, message: '请选择注册地址', trigger: 'change' }],
          addressInfo: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
          logoUrl: [{ required: true, message: '请上传集团LOGO', trigger: 'change' }],
          chargingStandardId: [{ required: true, message: '请选择收费标准', trigger: 'change' }],
          adminLoginName: [{ required: true, message: '请输入管理员账号', trigger: 'blur' }],
          adminPassword: [{ required: true, message: '请输入管理员密码', trigger: 'blur' }],
          contractUrl: [{ required: true, message: '请上传合同附件', trigger: 'change' }]
        },
        url: {
          add: "/property-central/property/propertySettled/add",
          edit: "/property-central/property/propertySettled/edit",
          queryById: "/property-central/property/propertySettled/queryById"
        },
        costList: [],
        mapRef: null,
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    watch: {
      'model.contactPhone': {
        handler(newV, oldV) {
          this.model.adminLoginName = newV
        }
      },
      'model.addressInfo': {
        handler(newV) {
          if(newV) {
            clearTimeout(timer)
            timer = setTimeout(()=> {
              // this.getLongitude(this.model.categoryCodes[0], this.model.categoryCodes.join('') + newV, mapZoom[3])
            }, 1000)
          }
        }
      }
    },
    created () {
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
      this.onLoadCostList()
    },
    mounted() {
      this.mapRef = new BMapGL.Map("container");          // 创建地图实例 
      var point = new BMapGL.Point(108.5525, 34.3237);  // 创建点坐标 
      this.mapRef.centerAndZoom(point, mapZoom[0]);
      // var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
      // this.mapRef.addControl(zoomCtrl);
      this.mapRef.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
      this.mapRef.addEventListener('click',  e=>this.getAddress(e));
    },
    methods: {
      async onLoadCostList() {
        let data = await getPropertyChargruleListApi()
        this.costList = data.result
      },
      add () {
        this.edit(this.modelDefault);
      },
      edit (record) {
        this.model = Object.assign({}, record);
        this.visible = true;
      },
      addressChange(val) {
        const province = Object.keys(val[0])[0]
        const city = Object.keys(val[1])[0]
        const county = Object.keys(val[2])[0]
        this.model.provinceName = val[0][province]
        this.model.provinceCode = province
        this.model.cityName = val[1][city]
        this.model.cityCode = city
        this.model.countyName = val[2][county]
        this.model.countyCode = county
        if(this.model.addressInfo) {
          this.getLongitude(this.model.provinceName, (this.model.provinceName + this.model.cityName + this.model.countyName + this.model.addressInfo), mapZoom[3])
        }
      },
      addressBlur(val) {
        if(this.model.provinceName) {
          this.getLongitude(this.model.provinceName, (this.model.provinceName + this.model.cityName + this.model.countyName + val.target.value), mapZoom[3])
        }
      },
      getAddress(e) {
        let _this = this;
        // 创建地理编码实例      
        var myGeo = new BMapGL.Geocoder();      
        // 根据坐标得到地址描述    
        myGeo.getLocation(new BMapGL.Point(e.latlng.lng, e.latlng.lat), function(result){      
          if(result) {
            _this.mapRef.clearOverlays();
            _this.model.registAdress = [result.addressComponents.province, result.addressComponents.city, result.addressComponents.district]
            _this.model.addressInfo = result.addressComponents.street + result.addressComponents.streetNumber
            _this.model.longitude = result.point.lng
            _this.model.latitude = result.point.lat
            _this.positionMap(e.latlng.lng, e.latlng.lat, mapZoom[3], result.address)
            console.log(result)
          }
        });
      },
      positionMap(mapCenterLng, mapCenterLat, mapzoom, address) {
        var point = new BMapGL.Point(mapCenterLng, mapCenterLat);  // 创建点坐标
        this.mapRef.centerAndZoom(point, mapzoom);
        var marker = new BMapGL.Marker(point, {title: address});        // 创建标注
        this.mapRef.addOverlay(marker);                     // 将标注添加到地图中
        let _this = this;
        // marker.addEventListener("click", function(){ 
          var label = new BMapGL.Label(address, {       // 创建文本标注
              position: point,                          // 设置标注的地理位置
              offset: new BMapGL.Size(0, -55)           // 设置标注的偏移量
          })
          _this.mapRef.addOverlay(label);                        // 将标注添加到地图中
          label.setStyle({                              // 设置label的样式
            color: '#333',
            fontSize: '14px',
            padding: '4px 10px',
            border: '1px solid #1E90FF',
            borderRadius: '4px',
            transform: 'translateX(-40%)'
          })
        // });
      },
      getLongitude(city, address, zoom) {
        let _this = this
        var myGeo = new BMapGL.Geocoder();
        myGeo.getPoint(address, function(point){
          if(point){
              _this.mapRef.clearOverlays();
              _this.model.longitude = point.lng
              _this.model.latitude = point.lat
              _this.positionMap(point.lng, point.lat, zoom, address)
          }else{
            console.log('您选择的地址没有解析到结果！');
          }
        }, city)
      },
      submitForm () {
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
              method = 'put';
            }
            this.model.registAdress = undefined
            httpAction(httpurl,this.model,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }
         
        })
      },
    },
    beforeDestroy() {
      clearTimeout(timer)
      this.mapRef.removeEventListener('click',  e=>this.getAddress(e));
    }
  }
</script>