地图选点方式改变，点击按钮后根据所选行政区跳转

guoshilong

2023-03-13 9ecc792eb82c7a94f35ea7f2056567202c6efbff

 src/views/fire/fireAdd.vue

@@ -1,24 +1,34 @@
<template>
  <basic-container>
    <el-row>
      <el-col :span="12">
      <el-col :span="11">
        <avue-form ref="form" v-model="form" :option="option" @submit="submit"></avue-form>
      </el-col>
      <el-col :span="1">

      </el-col>
      <el-col :span="12">
        <OpenLayersMap ref="olMap" @getMapData="getMapData" :map-location="mapLocation"></OpenLayersMap>
      </el-col>
    </el-row>
  </basic-container>
</template>

<script>
import axios from '@/router/axios';
import {add} from "@/api/fire/fire";
import OpenLayersMap from "@/components/OpenLayersMap/index";
import axios from "@/router/axios"
import {getDetail} from "@/api/base/region";
export default {
  name: "fireAdd",
  components: {OpenLayersMap},
  data() {
    let baseUrl = '/api/blade-system/region/lazy-tree?parentCode='
    return {
      form:{},
      mapLocation:{
        isDetail:false
      },
      option: {
        column: [
          {
@@ -36,7 +46,7 @@
              label: 'title',
              value: 'key'
            },
            separator:'',
            separator: '',
            lazy: true,
            lazyLoad(node, resolve) {
              let stop_level = 2;
@@ -56,7 +66,7 @@
                  list = res.data.data;
                  callback()
                })
              }else if (level == 1) {
              } else if (level == 1) {
                axios.get(`${baseUrl}${code}`).then(res => {
                  list = res.data.data;
                  callback()
@@ -66,10 +76,10 @@
                  list = res.data.data;
                  callback()
                })
              }else{
              } else {
                callback()
              }
            }
            },
          },
          {
            label:'具体地址',
@@ -126,7 +136,8 @@
            label:'火灾描述',
            prop:'description',
            span:24,
            type:'textarea'
            type:'textarea',
            minRows:3,
          },
          {
            label: '现场图片',
@@ -146,6 +157,17 @@
  },
  mounted() {
  },
  watch:{
    "form.location":{
      handler(newVal){
        if (newVal){
          if (newVal.length == 3){
            this.getRegionDetail(newVal)
          }
        }
      }
    }
  },
  methods: {
    submit(form,done){
      add(form).then(res=>{
@@ -155,6 +177,7 @@
            message: "操作成功!"
          });
          this.$refs.form.resetForm()
          this.$refs.olMap.clearDraw()
          done();
        }else {
          this.$message({
@@ -163,6 +186,22 @@
          });
          done();
        }
      }),error=>{
        window.console.log(error);
        done();
      }
    },
    //获取地图经纬度
    getMapData(data){
      this.form.lon = data[0]
      this.form.lat = data[1]
    },
    getRegionDetail(regionCode){
      let code = regionCode[2]
      getDetail(code).then(res=>{
        let data = res.data.data
        let regionName = [data.provinceName,data.cityName,data.districtName]
        this.$refs.olMap.getLocation(regionCode,regionName)
      })
    }
  }