宅基地移动端修改有偿退出和无偿退出

src/components/Map/MapGisObtain.vue

@@ -132,6 +132,30 @@ export default {
                 resolution:Math.random() * 0.00000001,
               });
             }
+          } else {  // 加载全部地图，不带宅基地图斑
+            let deptName = this.$store.state.user.loginDeptId + "";
+            getQueryLand(deptName).then((response) => {
+              if (response.code == 200) {
+                let InsertCode = response.data;
+                if (InsertCode != null) {
+                  let lat = InsertCode.lat;
+                  let lng = InsertCode.lng;
+                  let center;
+                  if(lat !=null && lng !=null && lat !="" && lng !=""){
+                    center = [lng,lat];
+                  }else {
+                    center = [115.452752, 31.789033];
+                  }
+                  that.map.getView().animate({
+                    // 只设置需要的属性即可
+                    center: ol.proj.fromLonLat(center), // 中心点
+                    zoom: 17.9, // 缩放级别
+                    rotation: undefined, // 缩放完成view视图旋转弧度
+                    duration: 1000, // 缩放持续时间，默认不需要设置
+                  });
+                }
+              }
+            });
           }
           var geo_zjdzd;
           that.map.on("singleclick", function (evt) {
@@ -175,10 +199,10 @@ export default {
               that.map.addLayer(geo_zjdzd);
               //that.closeMoule = feature.values_.zjddm;
               that.$emit('closeMoule', feature.values_.zjddm);
-              var maxXMap = hc_land.values_.source.featuresRtree_.rbush_.data.maxX;
-              var maxYMap = hc_land.values_.source.featuresRtree_.rbush_.data.maxY;
-              var minXMap = hc_land.values_.source.featuresRtree_.rbush_.data.minX;
-              var minYMap = hc_land.values_.source.featuresRtree_.rbush_.data.minY;
+              var maxXMap = geo_zjdzd.values_.source.featuresRtree_.rbush_.data.maxX;
+              var maxYMap = geo_zjdzd.values_.source.featuresRtree_.rbush_.data.maxY;
+              var minXMap = geo_zjdzd.values_.source.featuresRtree_.rbush_.data.minX;
+              var minYMap = geo_zjdzd.values_.source.featuresRtree_.rbush_.data.minY;
               //定位查询位置
               var center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); //获取边界区域的中心位置
               that.map.getView().animate({

src/views/onlineHome/homestead/freeExit/freeExitAdd.vue

@@ -12,7 +12,13 @@
     </van-nav-bar>
     <van-form ref="_Form">
       <div class="main_box">
-        <van-field v-model="circulation.sqrxm" label="申请人姓名" placeholder="申请人姓名" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
+<!--        <van-field v-model="circulation.sqrxm" label="申请人姓名" placeholder="申请人姓名" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>-->
+        <van-field v-model="circulation.sqrxm" label="申请人姓名" placeholder="申请人姓名" input-align="right" label-width="auto" :rules="[{ required: true }]" required @input="remoteTransfereeMethod" />
+        <div id="dropList" v-show="showDropList"  style="width: 92vw; position: absolute; z-index: 99; left: 50%; margin-left: -46vw; border: 1px solid #E2E0E0;" >
+          <van-cell id="vanCell"  v-for="(item, index) in getObligeeOptions" :key="index" @click="shyqrdmxmChange(item)" style="position: relative; z-index: 999;">
+            {{item}}
+          </van-cell>
+        </div>
         <van-field
           readonly
           clickable
@@ -149,7 +155,7 @@
 </template>
 
 <script>
-  import { zjdzd, getByZjddm, getObligeeList } from "@/api/onlineHome/homestead/circulation";
+  import { zjdzd, getByZjddm, getObligeeList, obligeeList } from "@/api/onlineHome/homestead/circulation";
   import { dyAdd,  } from "@/api/onlineHome/homestead/paidExit";
   import {Notify} from "vant";
   export default {
@@ -162,6 +168,7 @@
         zjlxDictionaries:[],//申请人证件类型
         bcfsDictionaries:[],//补偿方式
         zjdDictionaries:[],//宅基地代码
+        getObligeeOptions:[],//下拉框列表
 
         tcqllx:'',
         tclx:'无偿退出',
@@ -176,6 +183,7 @@
         showzjlx: false,
         showbcfs: false,
         showzjddm: false,
+        showDropList: false,//是否显示下拉框
 
         circulation:{
           // 申请类型  1-宅基地退出
@@ -313,6 +321,41 @@
         } else {
           this.zjdDictionaries = [];
         }
+      },
+      /** 模糊查询人员信息 */
+      remoteTransfereeMethod(query) {
+        if (query !== "") {
+          obligeeList({shyqrdbxm:query,status:1}).then((response) => {
+            if (response.code == 200) {
+              this.getObligeeOptions = response.rows.map(item => item.shyqrdbxm);
+              //设置模糊查询的下拉框和滚动条
+              if (this.getObligeeOptions.length > 0) {
+                this.showDropList = true;   // div显示会阻挡下边的选择框和输入框，showDropList控制下拉框是否显示
+                //设置模糊查询的和滚动条
+                this.$nextTick(() => {
+                  if (this.getObligeeOptions.length > 4) {
+                    let height = document.getElementById("vanCell").offsetHeight * 4;
+                    document.getElementById("dropList").style.height = height + "px";
+                    document.getElementById("dropList").style.overflow = "scroll";
+                  } else {
+                    document.getElementById("dropList").style.height = "";
+                    document.getElementById("dropList").style.overflow = "visible";
+                  }
+                });
+              } else {
+                this.showDropList = false;
+              }
+            }
+          });
+        } else {
+          this.getObligeeOptions = [];
+          this.showDropList = false;
+        }
+      },
+      shyqrdmxmChange(val){
+        this.$set(this.circulation, "sqrxm", val);
+        this.getObligeeOptions=[];
+        this.showDropList = false;
       }
     },
   }
@@ -342,4 +385,21 @@
     background-color: #1D6FE9;
 
   }
+  #dropList::-webkit-scrollbar {
+    /*滚动条整体样式*/
+    width: 5px;     /*高宽分别对应横竖滚动条的尺寸*/
+    height: 1px;
+  }
+  #dropList::-webkit-scrollbar-thumb {
+    /*滚动条里面小方块*/
+    border-radius: 10px;
+    background: #fff;
+    box-shadow: inset 0 0 5px rgb(0, 122, 204);
+  }
+  #dropList::-webkit-scrollbar-track {
+    border-radius: 10px;
+    background: #fff;
+    /*滚动条里面轨道*/
+    box-shadow: inset 0 0 5px rgba( 0, 0, 0, .1);
+  }
 </style>

src/views/onlineHome/homestead/paidExit/paidExitAdd.vue

@@ -12,7 +12,13 @@
       </van-nav-bar>
       <van-form ref="_Form">
       <div class="main_box">
-        <van-field v-model="circulation.sqrxm" label="申请人姓名" placeholder="申请人姓名" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
+        <!-- <van-field v-model="circulation.sqrxm" label="申请人姓名" placeholder="申请人姓名" input-align="right" label-width="auto" :rules="[{ required: true }]" required/> -->
+        <van-field v-model="circulation.sqrxm" label="申请人姓名" placeholder="申请人姓名" input-align="right" label-width="auto" :rules="[{ required: true }]" required @input="remoteTransfereeMethod" />
+        <div id="dropList" v-show="showDropList"  style="width: 92vw; position: absolute; z-index: 99; left: 50%; margin-left: -46vw; border: 1px solid #E2E0E0;" >
+          <van-cell id="vanCell"  v-for="(item, index) in getObligeeOptions" :key="index" @click="shyqrdmxmChange(item)" style="position: relative; z-index: 999;">
+            {{item}}
+          </van-cell>
+        </div>
         <van-field
           readonly
           clickable
@@ -172,7 +178,7 @@
 </template>
 
 <script>
-import { zjdzd, getByZjddm, getObligeeList } from "@/api/onlineHome/homestead/circulation";
+import { zjdzd, getByZjddm, getObligeeList, obligeeList } from "@/api/onlineHome/homestead/circulation";
 import { dyAdd, zyyctcApply } from "@/api/onlineHome/homestead/paidExit";
 import {Notify} from "vant";
 export default {
@@ -185,6 +191,7 @@ export default {
       zjlxDictionaries:[],//申请人证件类型
       bcfsDictionaries:[],//补偿方式
       zjdDictionaries:[],//宅基地代码
+      getObligeeOptions:[],//下拉框列表
 
       tcqllx:'',
       tclx:'有偿退出',
@@ -199,6 +206,7 @@ export default {
       showzjlx: false,
       showbcfs: false,
       showzjddm: false,
+      showDropList: false,//是否显示下拉框
 
       circulation:{
         // 申请类型  1-宅基地退出
@@ -356,6 +364,41 @@ export default {
       } else {
         this.zjdDictionaries = [];
       }
+    },
+    /** 模糊查询人员信息 */
+    remoteTransfereeMethod(query) {
+      if (query !== "") {
+        obligeeList({shyqrdbxm:query,status:1}).then((response) => {
+          if (response.code == 200) {
+            this.getObligeeOptions = response.rows.map(item => item.shyqrdbxm);
+            //设置模糊查询的下拉框和滚动条
+            if (this.getObligeeOptions.length > 0) {
+              this.showDropList = true;   // div显示会阻挡下边的选择框和输入框，showDropList控制下拉框是否显示
+              //设置模糊查询的和滚动条
+              this.$nextTick(() => {
+                if (this.getObligeeOptions.length > 4) {
+                  let height = document.getElementById("vanCell").offsetHeight * 4;
+                  document.getElementById("dropList").style.height = height + "px";
+                  document.getElementById("dropList").style.overflow = "scroll";
+                } else {
+                  document.getElementById("dropList").style.height = "";
+                  document.getElementById("dropList").style.overflow = "visible";
+                }
+              });
+            } else {
+              this.showDropList = false;
+            }
+          }
+        });
+      } else {
+        this.getObligeeOptions = [];
+        this.showDropList = false;
+      }
+    },
+    shyqrdmxmChange(val){
+      this.$set(this.circulation, "sqrxm", val);
+      this.getObligeeOptions=[];
+      this.showDropList = false;
     }
   },
 }
@@ -385,4 +428,21 @@ export default {
     background-color: #1D6FE9;
 
   }
+  #dropList::-webkit-scrollbar {
+    /*滚动条整体样式*/
+    width: 5px;     /*高宽分别对应横竖滚动条的尺寸*/
+    height: 1px;
+  }
+  #dropList::-webkit-scrollbar-thumb {
+    /*滚动条里面小方块*/
+    border-radius: 10px;
+    background: #fff;
+    box-shadow: inset 0 0 5px rgb(0, 122, 204);
+  }
+  #dropList::-webkit-scrollbar-track {
+    border-radius: 10px;
+    background: #fff;
+    /*滚动条里面轨道*/
+    box-shadow: inset 0 0 5px rgba( 0, 0, 0, .1);
+  }
 </style>