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

guoshilong

2023-03-13 9ecc792eb82c7a94f35ea7f2056567202c6efbff

 src/views/fire/fireSupplement.vue

@@ -7,7 +7,7 @@
          <el-button v-if="isDetail" size="small" @click="goToList">返回</el-button>
        </div>
        <el-row>
          <el-col :span="12">
          <el-col :span="11">
            <avue-form ref="form" v-model="form" :option="option">
              <template slot="no">
                <el-autocomplete class="inline-input"
@@ -16,9 +16,13 @@
                  placeholder="请输入火灾编号"
                  :trigger-on-focus="false"
                  @select="handleSelect"
                  @blur="inputBlur"
                ></el-autocomplete>
              </template>
            </avue-form>
          </el-col>
          <el-col :span="1">

          </el-col>
          <el-col :span="12">
            <OpenLayersMap ref="olMap" :mapLocation="mapLocation"></OpenLayersMap>
@@ -65,13 +69,13 @@
import {add} from "@/api/fireSupplement/fireSupplement";
import OpenLayersMap from "@/components/OpenLayersMap/index";
import {getAll} from "@/api/fire/fire";
import {getLazyTree} from "@/api/base/region";

export default {
  name: "fireSupplieMent",
  components: {OpenLayersMap},
  props: ['info'],
  data() {
    let baseUrl = '/api/blade-system/region/lazy-tree?parentCode='
    return {
      form: {},
      option: {
@@ -95,7 +99,8 @@
              label: 'title',
              value: 'key'
            },
            dicUrl: 'api/blade-system/region/lazy-tree',
            // dicUrl: 'api/blade-system/region/lazy-tree',
            dicData:[],
            slot: true
          },
          {
@@ -601,9 +606,19 @@
      mapLocation:{
        isDetail:true
      },
      fireList:[],
    }
  },
  created() {
    //手动加载区域的数据字典，使用dicUrl会使其他数据字典回显更慢
    getLazyTree().then(res=>{
      if (res.data.code == 200){
        let data = res.data.data
        data.shift()
        const column = this.findObject(this.option.column, "location");
        column.dicData = data
      }
    })
    if (this.info) {
      this.initDetail()
    } else {
@@ -760,8 +775,17 @@
          isDetail: true,
          location:[this.form.lon,this.form.lat]
        }
      }else {
        getAll().then(res=>{
          if (res.data.code == 200){
            let data = res.data.data
            data.forEach(e=>{
              e.value = e.no
            })
            this.fireList = data
          }
        })
      }

    },
    //返回列表页
    goToList() {
@@ -770,14 +794,11 @@
    },
    //自动补全
    querySearch(queryString, cb){
      getAll({no:queryString}).then(res=>{
        if (res.data.code == 200){
          let data = res.data.data
          data.forEach(e=>{
            e.value = e.no
          })
          cb(data)
        }
      this.$nextTick(()=>{
        let filterArray = this.fireList.filter(e => {
          return e.no.indexOf(queryString) != -1
        })
        cb(filterArray)
      })
    },
    //选择事件
@@ -788,6 +809,18 @@
        location:[this.form.lon,this.form.lat]
      }
      this.$refs.olMap.addPoint(this.mapLocation.location)
    },
    inputBlur(e){
      let value = e.target.value
      let filterArray = this.fireList.filter(e => {
        return e.no.indexOf(value) != -1
      })
      if (filterArray.length>0){
        this.handleSelect(filterArray[0])
      }else {
        this.$refs.form.resetForm()
        this.$refs.olMap.clearDraw()
      }
    }
  },
  destroyed() {