Bläddra i källkod

完成搜索功能

hanyaolong 4 år sedan
förälder
incheckning
07a2abd7f8
1 ändrade filer med 29 tillägg och 5 borttagningar
  1. 29 5
      src/components/floorMap/index.vue

+ 29 - 5
src/components/floorMap/index.vue

@@ -13,12 +13,15 @@
     <el-select
       class="serchShop"
       v-model="serchmsg"
-      multiple
       filterable
       remote
       reserve-keyword
       placeholder="搜索商铺名称或商铺编号"
       :remote-method="serchShop"
+      @change="serchShopChange"
+      :clearable="true"
+      @clear="clearShop"
+      prefix-icon="el-icon-search"
     >
       <el-option
         v-for="item in options"
@@ -309,20 +312,36 @@ export default {
     ...mapGetters(["plazaId", "fmapID", "haveFengMap", "bunkObj"]),
   },
   methods: {
-    // 检索
-    // 搜索商铺
+    // 检索获取对应的商铺信息
     serchShop(query) {
       if (query !== "") {
         setTimeout(() => {
           this.options = this.serchlist.filter((item) => {
             return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
           });
-          console.log("query", this.options);
-        }, 200);
+        });
       } else {
         this.options = [];
       }
     },
+    // 清空商铺
+    clearShop(msg){
+      this.options = [];
+      this.serchmsg = '';
+      this.visible = false;
+      this.clearHightLight();
+    },
+    // 选择商铺发生变化后的回调函数
+    serchShopChange(msg,data){
+      msg.split('—')[0]
+       this.options.forEach((shopItem)=>{
+         if(shopItem.value == msg){
+           shopItem.item;
+          //  高亮商铺
+           this.clickMapPlace(shopItem.item);
+         } 
+       })
+    },
     /**
      * 点击图标事件
      *
@@ -468,6 +487,9 @@ export default {
     },
     handleClickHightLight(pointData) {
       this.clearHightLight();
+      // 清空商铺
+      this.clearShop()
+
       pointData.forEach((point) => {
         let location = point.id ? point.id : "";
         // if (this.wellMap.hasOwnProperty(location)) {
@@ -864,6 +886,8 @@ export default {
         this.visible = false;
       }
       this.clearHightLight();
+      // 清空搜索框
+      this.clearShop()
     },
     // 选中电井关联的商铺高亮
     setHightLight(arr) {