nsgk_mobile/src/views/homesteadSurvey/shyqrAdd.vue

<template>
  <div class="app-container">
    <van-sticky style="position:relative;">
      <div class="bannerBg">
        <van-nav-bar
          style="background:transparent;border-bottom-width:0;margin-bottom:.5rem;"
          @click-left="goBack()"
        >
          <template #left>
            <van-icon name="arrow-left" size="18" color="#fff" />
          </template>
          <template #title>
            <p style="color:#fff">入户调查</p>
          </template>
        </van-nav-bar>
      </div>
      <div style="width:95%;left:2.5%;position:absolute;background:#fff;border-radius:15px;box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.16);padding: .3rem;top:1.2rem">
        <van-row>
          <van-col span="4" :offset="1" style="text-align:center;" @click="$router.push({path:'/homesteadSurvey/add'})">
              <van-icon :name="require('../../assets/images/housesteadSurvey/zjd'+(active==1?'A':'D')+'.png')" size="1rem" style="margin-top:0px;"/>
              <p :style="{color:(active==1?'rgb(34, 183, 242)':'#000')}">宅基地</p>
          </van-col>
          <van-col span="2">
            <div style="border-top: 2px dashed #b5b4b4;margin-top: 20px;"></div>
          </van-col>
          <van-col span="4"  style="text-align:center;" @click="$router.push({path:'/homesteadSurvey/add2'})" >
            <van-icon :name="require('../../assets/images/housesteadSurvey/nhxx'+(active==2?'A':'D')+'.png')" size="1rem" style="margin-top:0px;"/>
            <p :style="{color:(active==2?'rgb(34, 183, 242)':'#000')}">农户</p>
          </van-col>
          <van-col span="2">
            <div style="border-top: 2px dashed #b5b4b4;margin-top: 20px;"></div>
          </van-col>
          <van-col span="4" style="text-align:center;" @click="$router.push({path:'/homesteadSurvey/add3'})" >
            <van-icon :name="require('../../assets/images/housesteadSurvey/fwxx'+(active==3?'A':'D')+'.png')" size="1rem" style="margin-top:0px;"/>
            <p  :style="{color:(active==3?'rgb(34, 183, 242)':'#000')}">房屋</p>
          </van-col>
          <van-col span="2">
            <div style="border-top: 2px dashed #b5b4b4;margin-top: 20px;"></div>
          </van-col>
          <van-col span="4" style="text-align:center;" @click="$router.push({path:'/homesteadSurvey/add4'})">
            <van-icon :name="require('../../assets/images/housesteadSurvey/fsss'+(active==4?'A':'D')+'.png')" size="1rem" style="margin-top:0px;"/>
            <p :style="{color:(active==4?'rgb(34, 183, 242)':'#000')}">附属物</p>
          </van-col>
        </van-row>
      </div>
    </van-sticky>
    <van-form ref = "form" label-width="auto">
      <div style="margin:1.6rem auto;background: #ffffff;width: 95%;box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.16);border-radius:15px;padding-top: 20px;">
        <p class="title" style="position:relative;padding-left:10px;line-height:20px;font-size: 16px;margin-left: 3%;margin-bottom: 5px;">使用权人信息</p>
        <!--<van-field
          v-model="form.deptId"
          name="行政区划名称"
          label="行政区划名称"
          placeholder="行政区划名称"
          :rules="[{ required: true, message: '' }]"
        />-->

        <van-field
          readonly
          clickable
          :rules="[{ required: true }]"
          required
          label="农户代码"
          placeholder="请选择"
          v-model="form.nhdm"
          @click="checkNhdmQx"
          input-align="right"
          right-icon="arrow-down"
        />
        <van-popup v-model="shownhdm" position="bottom">
          <van-search v-model="nhdmSearch"  placeholder="请输入搜索关键词" @input="onSearch"/>
          <van-picker
            show-toolbar
            :columns="newList"
            value-key="nhValue"
            @confirm="shyqrdmxmChange"
            @cancel="shownhdm = false"
          />
        </van-popup>
        <van-field
          v-model="form.zjddm"
          label="宅基地代码"
          placeholder="宅基地代码"
          input-align="right"
          :rules="[{ required: true }]"
          required
        />
        <van-field
          readonly
          clickable
          label="农民房屋代码"
          placeholder="请选择"
          v-model="form.nmfwdm"
          @click="shownmfwdm = true"
          input-align="right"
          right-icon="arrow-down"
        />
        <van-popup v-model="shownmfwdm" position="bottom">
          <van-picker
            show-toolbar
            :columns="nmfwDictionaries"
            value-key="nmfwdm"
            @confirm="onConfirmnmfwdm"
            @cancel="shownmfwdm = false"
          />
        </van-popup>
        <van-field
          autocomplete="off"
          input-align="right"
          v-model="form.bdcdyh"
          name="不动产单元号"
          label="不动产单元号"
          placeholder="不动产单元号"
        />
        <van-field
          autocomplete="off"
          input-align="right"
          v-model="form.bdcqzh"
          name="不动产权证号"
          label="不动产权证号"
          placeholder="不动产权证号"
        />
        <van-field
          autocomplete="off"
          input-align="right"
          v-model="form.qzysxlh"
          name="权证印刷号"
          label="权证印刷号"
          placeholder="权证印刷序列号"
        />
        <van-field
          autocomplete="off"
          input-align="right"
          v-model="form.fzjg"
          name="发证机关"
          label="发证机关"
          placeholder="发证机关"
        />

        <van-field
          input-align="right"
          v-model="form.shyqrdbxm"
          name="代表姓名"
          label="代表姓名"
          placeholder="请输入使用权人代表姓名"
          maxlength="50"
          autocomplete="off"
          :rules="[{ required: true }]"
          required
        />
        <field-select
          v-model="form.shyqrdbzjlx"
          label="证件类型"
          value-key="dictLabel"
          data-key="dictValue"
          placeholder="请输入使用权人证件类型"
          remote-url="/open/zdzh/list/zjlx"
          :on-remote-response="'data'"
          :rules="[{ required: true }]"
          required
        />
        <van-field
          input-align="right"
          v-model="form.shyqrdbzjhm"
          name="证件号码"
          label="证件号码"
          placeholder="请输入使用权人证件号码"
          maxlength="50"
          autocomplete="off"
          :rules="[{ required: true }]"
          readonly
          required
        />
        <field-select
          v-model="form.xb"
          label="性别"
          value-key="dictLabel"
          data-key="dictValue"
          placeholder="选择性别"
          remote-url="/open/zdzh/list/sys_user_sex"
          :on-remote-response="'data'"
          :rules="[{ required: true }]"
          required
        />
        <van-field
          input-align="right"
          v-model="form.dh"
          name="联系电话"
          label="联系电话"
          placeholder="请输入联系电话"
          maxlength="50"
          autocomplete="off"
        />
        <FieldRadio
          v-model="form.sfbncjtjjzzcy"
          label="是否本集体经济组织成员"
          value-key="dictLabel"
          data-key="dictValue"
          remote-url="/open/zdzh/list/house_yes_no"
          :on-remote-response="'data'"
        />
        <field-select
          v-model="form.hklx"
          label="户口类型"
          value-key="dictLabel"
          data-key="dictValue"
          placeholder="选择户口类型"
          remote-url="/open/zdzh/list/account_type"
          :on-remote-response="'data'"
        />
        <van-field
          input-align="right"
          v-model="form.dz"
          name="地址"
          label="地址"
          placeholder="请输入地址"
          maxlength="50"
          autocomplete="off"
        />
        <field-select
          v-model="form.qlrlx"
          label="权利人类型"
          value-key="dictLabel"
          data-key="dictValue"
          placeholder="选择权利人类型"
          remote-url="/open/zdzh/list/obligee_type"
          :on-remote-response="'data'"
          :rules="[{ required: true }]"
          required
        />
        <field-select
          v-model="form.sshy"
          label="所属行业"
          value-key="dictLabel"
          data-key="dictValue"
          placeholder="请选择所属行业"
          remote-url="/open/zdzh/list/gmjjhy"
          :on-remote-response="'data'"
        />
        <FieldRadio
          v-model="form.sfsyqrzjgy"
          label="使用权人之间共有"
          value-key="dictLabel"
          data-key="dictValue"
          label-width="auto"
          remote-url="/open/zdzh/list/house_yes_no"
          @change="onShyqrgyChanged"
          :on-remote-response="'data'"
        />
        <van-field
          v-if="ftzdmjShow"
          input-align="right"
          type="number"
          v-model="form.ftzdmj"
          name="分摊宗地面积(m²)"
          label="分摊宗地面积(m²)"
          placeholder="请输入分摊宗地面积"
          autocomplete="off"
        />
        <field-select
          v-model="form.gyfs"
          label="共有方式"
          value-key="dictLabel"
          data-key="dictValue"
          placeholder="请选择共有方式"
          remote-url="/open/zdzh/list/common_mode"
          :on-remote-response="'data'"
        />

        <FieldRadio
          v-model="form.sfczr"
          label="持证人"
          value-key="dictLabel"
          data-key="dictValue"
          remote-url="/open/zdzh/list/house_yes_no"
          :on-remote-response="'data'"
        />
        <van-field
          input-align="right"
          v-model="form.qlbl"
          name="权利比例(%)"
          label="权利比例(%)"
          placeholder="请输入权利比例(%)"
          maxlength="50"
          autocomplete="off"
        />
        <van-field
          input-align="right"
          v-model="form.bz"
          name="备注"
          label="备注"
          placeholder="请输入备注"
          maxlength="50"
          autocomplete="off"
        />
        <van-dialog v-model="mapShow" show-cancel-button>
          <MapGisObtainTc ref="zjdProductResh" :shqrxm="hzxm" :landStatus="landStatus" :deptId="deptId" @closeMoule="closeMoule"></MapGisObtainTc>
        </van-dialog>
      </div>
      <div style="margin: 16px;display: flex;justify-content: space-around;">
        <van-button v-if="permission == 'true'" round color="#22B7F2" style="width:45%" @click="submitzjd">保存</van-button>
        <van-button plain color="#22B7F2" style="width:45%" round type="info" @click="cancel">取消</van-button>
      </div>
      <div style="height: 50px;"></div>
    </van-form>
  </div>
</template>

<script>
import {listShyqr,addShyqr,updateShyqr,delShyqr,setSyqrInfo} from "@/api/homesteadSurvey/shyqr";
import {listZjdzd,getZjdzd,updateZjdzd,addZjdzd,uploadFile,getQueryLand,submitOnly} from "@/api/homesteadSurvey/zjdzd";
import FieldSelect from "@/components/form/FieldSelect";
import FieldRadio from "@/components/form/FieldRadio";
import MapGisObtainTc from "@/components/Map/MapGisObtainTc";
import {listZrz,addZrz,updateZrz,getZrzZjdDmList,delZrz,updateZrzStatus} from "@/api/homesteadSurvey/zrz";
import {listNmfw,addNmfw,updateNmfw,delNmfw} from "@/api/homesteadSurvey/nmfw";
import {listSuyqr,addSuyqr,updateSuyqr} from "@/api/homesteadSurvey/suyqr";
import {listNhhncy,getHomesteadnhhnhzByNhdm,addNhhncy,updateNhhncy,delNhhncy} from "@/api/homesteadSurvey/nhhncy";
import {queryList, delNh, exportNh, getNh, listNh, updateNh,setNhInfo} from "@/api/homesteadSurvey/nh";
import {listFsss,addFsss,updateFsss,delFsss,getFsssZjdDmList,updateFsssStatus} from "@/api/homesteadSurvey/fsss";
import { listTown, getTown } from "@/api/homesteadSurvey/town";
import { listVillage} from "@/api/homesteadSurvey/village";
import { sysConfig} from "@/api/homesteadSurvey/index";
import { Notify, Dialog, Toast } from 'vant';
import axios from "axios";
export default {
  components: {FieldSelect, FieldRadio,MapGisObtainTc},
  name: "shyqrAdd",
  data() {
    return {
      active:2,
      // 使用权人列表
      syqrlist:[
        {
          shyqrdbxm :'测试测试',
          shyqrdbzjhm :'12324648564',
          nhdm :'777888999',
        }
      ],
      permission:false,
      shownhdm:false,
      showDropList:false,
      shownmfwdm:false,
      ftzdmjShow:false,
      nhdmSearch:null,
      hzxm:null,
      landStatus:"1",
      deptId:JSON.parse(localStorage.getItem("surveyItem")).deptId,
      nhdmDictionaries:[],
      newList:[],
      nmfwDictionaries:[],
      mapShow: false,
      form:{}
    };
  },
  created(){
    let data = this.$route.query;
    this.zjdzdxx = JSON.parse(localStorage.getItem("zjdzdxxItem"));
    this.form = data;
    this.permission = localStorage.getItem("executePermission");
    if(this.form.id == null){
      this.$set(this.form, 'shyqrdbzjlx', "01");
      this.$set(this.form, 'xb', "1");
      this.$set(this.form, 'sfbncjtjjzzcy', "1");
      this.$set(this.form, 'hklx', "01");
      this.$set(this.form, 'qlrlx', "10");
      this.$set(this.form, 'sshy', "A");
      this.$set(this.form, 'gj', "1");
      this.$set(this.form, 'hjszss', "110000");
      this.$set(this.form, 'sfsyqrzjgy', "1");
      this.$set(this.form, 'gyfs', "1");
      this.$set(this.form, 'sfczr', "1");

    }else{
      listNmfw({zjddm:this.zjdzdxx.zjddm,nhdm:this.form.nhdm}).then(response => {
        this.nmfwDictionaries = response.rows;
      });
    }
    if(this.form.sfsyqrzjgy === "1"){
      this.ftzdmjShow = true;
    }else{
      this.ftzdmjShow = false;
    }
    this.$set(this.form, 'zjddm', this.zjdzdxx.zjddm);
    listZjdzd({zjddm:this.zjdzdxx.zjddm}).then(response => {
      this.form.bdcdyh = response.rows[0].bdcdyh;
    });
    this.getList();
  },
  mounted(){

  },
  methods: {
    getList(){
      queryList({yhzgx:"02",searchValue:"NHDM,HZXM"}).then(response => {
        this.nhdmDictionaries = response.rows.map(function(item){
          item.nhValue = item.hzxm + item.nhdm;
          return {
            nhValue:item.nhValue,
            hzxm:item.hzxm,
            nhdm:item.nhdm
          };
        });
        this.newList = this.nhdmDictionaries;
      });
    },
    checkNhdmQx(){
      if(this.form.id != null){
        this.shownhdm = false;
      }else{
        this.shownhdm = true;
      }
    },
    /** 模糊查询人员信息 */
    remoteTransfereeMethod(query) {
      if (query !== "") {
        listNhhncy({xm:query,yhzgx:"02"}).then((response) => {
          if (response.code == 200) {
            this.nhdmDictionaries = response.rows.map(function (item) {
              return {
                hzxm:item.xm,
                sqrxb:item.xb,
                hzzjhm:item.zjhm,
                nhdm:item.nhdm,
                hzzjlx:item.zjlx,
                deptId:item.deptId,
                deptName:item.deptName,
              }
            })
            //设置模糊查询的下拉框和滚动条
            if (this.nhdmDictionaries.length > 0) {
              this.showDropList = true;   // div显示会阻挡下边的选择框和输入框，showDropList控制下拉框是否显示
              //设置模糊查询的和滚动条
              this.$nextTick(() => {
                if (this.nhdmDictionaries.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.nhdmDictionaries = [];
        this.showDropList = false;
      }
    },
    shyqrdmxmChange(val){
      getHomesteadnhhnhzByNhdm(val.nhdm).then((resp) => {
        if(resp.data)
        {
          let data = resp.data;
          this.$set(this.form, "shyqrdbzjhm", data.zjhm);
          this.$set(this.form, "shyqrdbxm", data.xm);
          this.$set(this.form, "shyqrdbzjlx",data.zjlx);
          this.$set(this.form, "xb", data.xb);
          this.$set(this.form, "dh", data.lxdh);
          this.$set(this.form, "sfbncjtjjzzcy",data.sfbjtjjzzcy);
          this.$set(this.form, "hklx", data.hklx);
          this.$set(this.form, "dz", data.txdz);
        }
      });
      this.$set(this.form, "nhdm", val.nhdm);
      listNmfw({zjddm:this.zjdzdxx.zjddm}).then(response => {
        this.nmfwDictionaries = response.rows;
      });
      this.shownhdm = false;
    },
    parseIDCard(idcard) {
      if(!idcard)
        return false;
      console.info(idcard)
      let sex = (parseInt(idcard.substr(16, 1)) % 2) ^ 1;
      return sex;
    },
    submitzjd(){
      this.$refs.form.validate().then(() => {
      if(this.form.id == null){
        addShyqr(this.form).then(response => {
          let _this =this
          this.$toast({
            icon: 'success', // 找到自己需要的图标
            message: '保存成功',
            duration:"1000",
            onClose:function(){
              _this.$router.push({path:'/homesteadSurvey/add2',query: {zjddm: _this.form.zjddm}});
            }
          })
        });
      }else{
        updateShyqr(this.form).then(response => {
          let _this =this
          this.$toast({
            icon: 'success', // 找到自己需要的图标
            message: '保存成功',
            duration:"1000",
            onClose:function(){
              _this.$router.push({path:'/homesteadSurvey/add2',query: {zjddm: _this.form.zjddm}});
            }
          })
        });
      }
      }).catch((e) => {
        Dialog({ type: 'danger', message: '请填写完整的表单项' });
      });
    },
    onShyqrgyChanged(val){
      if(val === '1'){
        this.ftzdmjShow = true;
      }else{
        this.ftzdmjShow = false;
      }
    },
    mapLook(){
      this.mapShow = true;
      setTimeout(() => {
        this.$refs.zjdProductResh.drawingLyPaceCountryDarw();
      },1000);
    },
    onSearch(val) {
      console.info(val);
      if(this.nhdmDictionaries.length>0){
         this.newList = []
        for(let j = 0 ;j<this.nhdmDictionaries.length;j++){
          if(this.nhdmDictionaries[j].hzxm.indexOf(val)>-1){
            this.newList.push(this.nhdmDictionaries[j]);
          }
        }
      }
      if(val==""){
        this.getList()
      }
    },
    /** 查找地图中宅基地 */
    closeMoule: function (data) {
      this.form.zjddm = data;
    },
    cancel(){
      this.$router.push({path:'/homesteadSurvey/add2',query: {zjddm: this.form.zjddm}});
    },
    onConfirmnhdm(val){
      this.form.nhdm = val.nhdm;
      this.hzxm = val.hzxm;
      this.shownhdm =false;
    },
    onConfirmnmfwdm(val){
      if(val.sfytrgy === "0" && val.nhdm){
        this.$toast("不能与其他人共有！");
      }else{
        this.form.nmfwdm = val.nmfwdm;
        this.shownmfwdm = false;
      }
    },
    guidProduct(){
      return 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
        var r = Math.random() * 16 | 0,
          v = c == 'x' ? r : (r & 0x3 | 0x8);
        return v.toString(16);
      });
    },
    /** 查找地图中定位点 */
    MapTag: function (data) {
      this.$refs[this.zjdProductResh].drawingPaceCountryDarw();
    },
    goBack(){
      if(this.ztMap && this.enterMap ==1){
        if(this.form.id == null){
          this.backMap.backMapZjdAData.theGeom= "";
        }else{
          this.backMap.backMapZjdAData = this.form;
        }
        this.$cookies.set("search",this.backMap);
      } else {
        this.$cookies.set("search","");
      }
      this.$router.push({name: this.$router.back(-1)});
      // }
    },
  }
}
</script>

<style scoped>
>>> .bannerBg{
  width: 100%;
  color:#fff;
  padding:10px;
  background: linear-gradient(134deg,#7ac943 1%, #22b7f2);
}
>>> .van-hairline--bottom::after {
  border-bottom-width: 0;
}
>>> .title:before
{
  content:"";
  width: 6px;
  height: 20PX;
  background: #7ac943;
  border-radius: 3px;
  position:absolute;
  left:0;
  bottom:0;
}
>>> .delete-button {
  height: 100%;
}
>>> .van-swipe-cell__wrapper{
  margin-right:-3px;
}
>>> .label-class .van-collapse-item__title--expanded{
  font-weight: bold;
}
</style>