nsgk_mobile/src/views/homesteadSurvey/nmfwAdd.vue

<template>
  <div class="app-container">
    <van-sticky style="position:relative;">
      <div class="bannerBg">
        <van-nav-bar
          style="background:transparent;border-bottom-width:0;height:2rem;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">
      <div style="margin:30px 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: '' }]"
        />-->
        <p class="title" style="position:relative;padding-left:10px;line-height:20px;font-size: 16px;margin-left: 3%;margin-bottom: 5px;">基本信息</p>
        <van-field
          input-align="right"
          v-model="form.nmfwzh"
          name="房屋幢号"
          label="房屋幢号"
          maxlength="50"
          autocomplete="off"
          :rules="[{ required: true }]"
          required
        />
        <van-field v-model="form.nhdm" 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 nhdmDictionaries" :key="index" @click="shyqrdmxmChange(item)" style="position: relative; z-index: 999;">
            {{item.hzxm}}-{{item.nhdm}}
          </van-cell>
        </div>
        <van-field
          input-align="right"
          v-model="form.sjcs"
          name="实际层数"
          label="实际层数"
          maxlength="50"
          autocomplete="off"
          type="number"
        />
        <van-field
          input-align="right"
          v-model="form.hh"
          name="户号"
          label="户号"
          maxlength="50"
          autocomplete="off"
        />
        <field-select
          v-model="form.hx"
          label="户型"
          value-key="dictLabel"
          data-key="dictValue"
          placeholder="请选择户型"
          remote-url="/system/dict/data/type/nmfwhx"
          :on-remote-response="'data'"
        />
        <field-select
          v-model="form.hxjg"
          label="户型结构"
          value-key="dictLabel"
          data-key="dictValue"
          placeholder="请选择户型结构"
          remote-url="/system/dict/data/type/nmfwhxjg"
          :on-remote-response="'data'"
        />
        <van-field
          v-model="form.nmfwmj"
          label="房屋面积(m²)"
          placeholder="请输入房屋面积"
          input-align="right"
          label-width="auto"
          :rules="[{ required: true }]"
          required
          type="number"/>

        <van-field
          v-model="form.fjzdmj"
          label="房基占地面积(m²)"
          placeholder="请输入房基占地面积"
          input-align="right"
          label-width="auto"
          type="number"/>

        <van-field
          v-model="form.jzmj"
          label="建筑面积(m²)"
          placeholder="请输入建筑面积"
          input-align="right"
          label-width="auto"
          type="number"/>
        <field-select
          v-model="form.fwlx"
          label="房屋类型"
          value-key="dictLabel"
          data-key="dictValue"
          placeholder="请选择房屋类型"
          remote-url="/system/dict/data/type/fwlx"
          :on-remote-response="'data'"
        />
        <field-select
          v-model="form.fwxz"
          label="房屋性质"
          value-key="dictLabel"
          data-key="dictValue"
          placeholder="请选择房屋性质"
          remote-url="/system/dict/data/type/fwxz"
          :on-remote-response="'data'"
        />
        <field-select
          v-model="form.fwjg"
          label="房屋结构"
          value-key="dictLabel"
          data-key="dictValue"
          placeholder="请选择房屋结构"
          remote-url="/system/dict/data/type/housing_structure"
          :on-remote-response="'data'"
        />
        <van-field
          input-align="right"
          v-model="form.zl"
          name="坐落"
          label="坐落"
          maxlength="50"
          autocomplete="off"
          :rules="[{ required: true }]"
          required
        />
        <field-select
          v-model="form.sjly"
          label="数据来源"
          value-key="dictLabel"
          data-key="dictValue"
          placeholder="请选择数据来源"
          remote-url="/system/dict/data/type/sjly"
          :on-remote-response="'data'"
        />
        <van-field
          input-align="right"
          v-model="form.bz"
          name="备注"
          label="备注"
          maxlength="50"
          autocomplete="off"
        />
        <p class="title" style="position:relative;padding-left:10px;line-height:20px;font-size: 16px;margin-left: 3%;margin-bottom: 5px;">不动产信息</p>
        <van-field
          input-align="right"
          v-model="form.bdcdyh"
          name="不动产单元号"
          label="不动产单元号"
          maxlength="50"
          autocomplete="off"
        />
        <van-field
          input-align="right"
          v-model="form.fwbm"
          name="房屋编码"
          label="房屋编码"
          maxlength="50"
          autocomplete="off"
        />
        <van-field
          input-align="right"
          v-model="form.zrzh"
          name="自然幢号"
          label="自然幢号"
          maxlength="50"
          autocomplete="off"
        />
        <van-field
          input-align="right"
          v-model="form.ch"
          name="层号"
          label="层号"
          maxlength="50"
          autocomplete="off"
        />
        <van-field
          input-align="right"
          v-model="form.sjc"
          name="实际层"
          label="实际层"
          maxlength="50"
          autocomplete="off"
          type="number"
        />
        <van-field
          input-align="right"
          v-model="form.myc"
          name="名义层"
          label="名义层"
          maxlength="50"
          autocomplete="off"
          type="number"
        />
        <p class="title" style="position:relative;padding-left:10px;line-height:20px;font-size: 16px;margin-left: 3%;margin-bottom: 5px;">证书信息</p>
        <FieldRadio
          v-model="form.sffz"
          label="是否发证"
          value-key="dictLabel"
          data-key="dictValue"
          remote-url="/system/dict/data/type/house_yes_no"
          :on-remote-response="'data'"
        />
        <FieldRadio
          v-model="form.sfjf"
          label="是否纠纷"
          value-key="dictLabel"
          data-key="dictValue"
          remote-url="/system/dict/data/type/house_yes_no"
          :on-remote-response="'data'"
        />
        <FieldRadio
          v-model="form.sfcf"
          label="是否查封"
          value-key="dictLabel"
          data-key="dictValue"
          remote-url="/system/dict/data/type/house_yes_no"
          :on-remote-response="'data'"
        />
        <p class="title" style="position:relative;padding-left:10px;line-height:20px;font-size: 16px;margin-left: 3%;margin-bottom: 5px;">利用情况</p>
        <field-select
          v-model="form.lyzk"
          label="房屋利用状况"
          value-key="dictLabel"
          data-key="dictValue"
          placeholder="请选择房屋利用状况"
          remote-url="/system/dict/data/type/nmfwlyzk"
          :on-remote-response="'data'"
        />
        <p class="title" style="position:relative;padding-left:10px;line-height:20px;font-size: 16px;margin-left: 3%;margin-bottom: 5px;">抵押情况</p>
        <FieldRadio
          v-model="form.sfdy"
          label="是否抵押"
          value-key="dictLabel"
          data-key="dictValue"
          remote-url="/system/dict/data/type/house_yes_no"
          :on-remote-response="'data'"
        />
        <p class="title" style="position:relative;padding-left:10px;line-height:20px;font-size: 16px;margin-left: 3%;margin-bottom: 5px;">其他信息</p>
        <van-field
          input-align="right"
          v-model="form.jznd"
          name="建筑年代"
          label="建筑年代"
          maxlength="50"
          autocomplete="off"
        />
        <field-select
          v-model="form.fwaqxjddj"
          label="房屋安全性鉴定等级"
          value-key="dictLabel"
          data-key="dictValue"
          placeholder="请选择房屋安全性鉴定等级"
          remote-url="/system/dict/data/type/fwaqxjddj"
          :on-remote-response="'data'"
        />
        <field-select
          v-model="form.fwzt"
          label="房屋状态"
          value-key="dictLabel"
          data-key="dictValue"
          placeholder="请选择房房屋状态"
          remote-url="/system/dict/data/type/fwzt"
          :on-remote-response="'data'"
        />
        <field-select
          v-model="form.fwyt"
          label="房屋用途"
          value-key="dictLabel"
          data-key="dictValue"
          placeholder="请选择房房屋状态"
          remote-url="/system/dict/data/type/fwyt"
          :on-remote-response="'data'"
        />
        <FieldRadio
          v-model="form.sfytrgy"
          label="与其他人共有"
          value-key="dictLabel"
          data-key="dictValue"
          remote-url="/system/dict/data/type/house_yes_no"
          :on-remote-response="'data'"
        />
      </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 {listZjdzd,getZjdzd,updateZjdzd,addZjdzd,uploadFile,getQueryLand,submitOnly} from "@/api/homesteadSurvey/zjdzd";
import FieldSelect from "@/components/form/FieldSelect";
import FieldRadio from "@/components/form/FieldRadio";
import CommonMap from "@/components/house/CommonMap";
import {addNh, delNh, exportNh, getNh, listNh, updateNh,setNhInfo} from "@/api/homesteadSurvey/nh";
import {listNmfw,addNmfw,updateNmfw,delNmfw} from "@/api/homesteadSurvey/nmfw";

import { Notify, Dialog, Toast } from 'vant';
import axios from "axios";
export default {
  components: {FieldSelect, FieldRadio,CommonMap},
  name: "zrzAdd",
  data() {
    return {
      active:3,
      // 使用权人列表
      permission:false,
      syqrlist:[
        {
          shyqrdbxm :'测试测试',
          shyqrdbzjhm :'12324648564',
          nhdm :'777888999',
        }
      ],
      // 地图绘制
      drawInsert: null,
      showDropList:false,
      nhdmDictionaries:[],
      // 当前位置信息
      tGeoOrganizationLat: null,
      tGeoOrganizationLng: null,
      minDate: new Date(),
      maxDate: new Date(2025, 10, 1),
      showZgqrzrq:false,
      form:{}
    };
  },
  created(){
    let data = this.$route.query;
    this.form = data;
    this.permission = localStorage.getItem("executePermission");
    if(this.form.id == null){
      this.$set(this.form, 'hx', "01");
      this.$set(this.form, 'hxjg', "01");
      this.$set(this.form, 'fwlx', "01");
      this.$set(this.form, 'fwxz', "6");
      this.$set(this.form, 'fwjg', "01");
      this.$set(this.form, 'sjly', "01");
      this.$set(this.form, 'sffz', "1");
      this.$set(this.form, 'sfjf', "0");
      this.$set(this.form, 'sfcf', "0");
      this.$set(this.form, 'lyzk', "11");
      this.$set(this.form, 'sfdy', "0");
      this.$set(this.form, 'fwaqxjddj', "01");
      this.$set(this.form, 'fwzt', "01");
      this.$set(this.form, 'fwyt', "10");
      this.$set(this.form, 'sfytrgy', "0");
    }
  },
  mounted(){

  },
  methods: {
    submitzjd(){
      this.$refs.form.validate().then(() => {
      if(this.form.id == null){
        addNmfw(this.form).then(response => {
          let _this =this
          this.$toast({
            icon: 'success', // 找到自己需要的图标
            message: '保存成功',
            duration:"1000",
            onClose:function(){
              _this.$router.push({path:'/homesteadSurvey/add3',query: {zjddm: _this.form.zjddm}});
            }
          })
        });
      }else{
        updateNmfw(this.form).then(response => {
          let _this =this
          this.$toast({
            icon: 'success', // 找到自己需要的图标
            message: '保存成功',
            duration:"1000",
            onClose:function(){
              _this.$router.push({path:'/homesteadSurvey/add3',query: {zjddm: _this.form.zjddm}});
            }
          })
        });
      }
      }).catch((e) => {
        Dialog({ type: 'danger', message: '请填写完整的表单项' });
      });
    },
    /** 模糊查询人员信息 */
    remoteTransfereeMethod(query) {
      if (query !== "") {
        listNh({hzxm:query}).then((response) => {
          if (response.code == 200) {
            this.nhdmDictionaries = response.rows.map(function (item) {
              return {
                hzxm:item.hzxm,
                sqrxb:item.xb,
                hzzjhm:item.hzzjhm,
                nhdm:item.nhdm,
                hzzjlx:item.hzzjlx,
                lxdh:item.lxdh,
                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){
      this.$set(this.form, "nhdm", val.nhdm);
      this.showDropList = false;
    },
    // 绘制申请地图
    pointDarw(data) {
      this.$nextTick(() => {
        let map = this.$refs.pointDarwMap;
        if(data === null)
            data = this.form.theGeomJson;
            this.setMapData(map, data);

      });
    },
    // 通用设置地图数据函数
    setMapData(map, data) {
      //console.log(map, data ? true : false);
      if(!map) return;
      if(data)
      {
        map.setLayer('pointDarwLayer', data);
      }
      else {
        this.getLandCoord((lng, lat) => {
          map.setCoord(this.tGeoOrganizationLng, this.tGeoOrganizationLat);
        });
      }
    },
    // 当地图绘制完成时
    onMapDrawFinished(data) {
      console.info(data);
     this.drawInsert = data;
      this.form.theGeomJson = JSON.stringify(this.drawInsert);
    },
    // 当申请地图被重置时
    onMapDrawReseted() {
      this.drawInsert = null;
      if(this.form.theGeomJson)
      {
        let lastData = JSON.parse(this.form.theGeomJson);
        if(lastData.hasOwnProperty('coordinates')) // 从后台获取的
          this.drawInsert = lastData.coordinates;
      }
    },
    cancel(){
      this.$router.push({path:'/homesteadSurvey/nmfwList',query: {zjddm: this.form.zjddm}});
    },
    // 获取登录人位置坐标
    getLandCoord(func) {
      if (func
        && this.tGeoOrganizationLng !== null && this.tGeoOrganizationLng !== ''
        && this.tGeoOrganizationLat !== null && this.tGeoOrganizationLat !== '') {
        this.$nextTick(() => {
          func(this.tGeoOrganizationLng, this.tGeoOrganizationLat);
        })
      }
      else {
        console.info(this.deptId);
        getQueryLand(this.deptId).then((response) => {
          if (response.code == 200) {
            let InsertCode = response.data;
            this.form.orgCode = InsertCode.orgCode;
            this.tGeoOrganizationLat = InsertCode.lat;
            this.tGeoOrganizationLng = InsertCode.lng;
            if(func)
            {
              func(this.tGeoOrganizationLng, this.tGeoOrganizationLat);
            }
          }
        });
      }
    },
    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();
    },
    onConfirmZgqrzrq(data){
      this.form.jgrq = this.getNowFormatDate(data).substr(0,10);
      this.showZgqrzrq = false;
    },
    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>