nsgk_mobile/src/views/homesteadSurvey/fsssAdd.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: '' }]"
        />-->
        <van-field
          input-align="right"
          v-model="form.zjddm"
          name="宅基地代码"
          label="宅基地代码"
          maxlength="50"
          autocomplete="off"
          :rules="[{ required: true }]"
          required
        />
        <field-select
          v-model="form.fssslx"
          label="附属设施类型"
          value-key="dictLabel"
          data-key="dictValue"
          placeholder="请选择附属设施类型"
          remote-url="/system/dict/data/type/fsss_type"
          :on-remote-response="'data'"
          :rules="[{ required: true }]"
          required
        />
        <van-field
          v-model="form.jzmj"
          label="建筑面积(m²)"
          placeholder="请输入建筑面积"
          input-align="right"
          label-width="auto"
          :rules="[{ required: true }]"
          required
          type="number"/>
        <FieldRadio
          v-model="form.sfzsy"
          label="是否正在使用"
          value-key="dictLabel"
          data-key="dictValue"
          remote-url="/system/dict/data/type/house_yes_no"
          :on-remote-response="'data'"
        />
        <field-select
          v-model="form.jzwqk"
          label="建筑物情况"
          value-key="dictLabel"
          data-key="dictValue"
          placeholder="请选择建筑物情况"
          remote-url="/system/dict/data/type/jzwqk"
          :on-remote-response="'data'"
        />
        <field-select
          v-model="form.jsqtdzk"
          label="建设前土地状况"
          value-key="dictLabel"
          data-key="dictValue"
          placeholder="请选择建设前土地状况"
          remote-url="/system/dict/data/type/land_state"
          :on-remote-response="'data'"
        />
        <van-field
          input-align="right"
          v-model="form.remark"
          name="备注"
          label="备注"
          maxlength="50"
          autocomplete="off"
        />

        <common-map ref="pointDarwMap" style="height:200px;"
                    :allowDraw="true"
                    @drawReseted="onMapDrawReseted"
                    @drawFinished="onMapDrawFinished"
        >
        </common-map>
      </div>
      <div style="margin: 16px;display: flex;justify-content: space-around;">
        <van-button 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 CommonMap from "@/components/house/CommonMap";
import {addNh, delNh, exportNh, getNh, listNh, updateNh,setNhInfo} from "@/api/homesteadSurvey/nh";
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,addNhhncy,updateNhhncy,delNhhncy} from "@/api/homesteadSurvey/nhhncy";

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,CommonMap},
  name: "zrzAdd",
  data() {
    return {
      active:3,
      // 使用权人列表
      syqrlist:[
        {
          shyqrdbxm :'测试测试',
          shyqrdbzjhm :'12324648564',
          nhdm :'777888999',
        }
      ],
      // 地图绘制
      drawInsert: null,
      // 当前位置信息
      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;
    if(this.form.id == null){
      this.$set(this.form, 'fssslx', "11");
      this.$set(this.form, 'sfzsy', "1");
      this.$set(this.form, 'jzwqk', "1");
      this.$set(this.form, 'jsqtdzk', "1");
    }
    this.$nextTick(() => {

      this.pointDarw(null);
      // this.pointDarwNature(null);
      this.$refs.pointDarwMap && this.$refs.pointDarwMap.update();
    })
  },
  mounted(){

  },
  methods: {
    getList(){
      listNh({hzzjhm:this.form.shyqrdbzjhm}).then(response => {
        this.form = response.rows[0];
      });
    },
    submitzjd(){
      this.$refs.form.validate().then(() => {
      if(this.form.id == null){
        addFsss(this.form).then(response => {
          let _this =this
          this.$toast({
            icon: 'success', // 找到自己需要的图标
            message: '保存成功',
            duration:"1000",
            onClose:function(){
              _this.$router.push({path:'/homesteadSurvey/add4',query: {zjddm: _this.form.zjddm}});
            }
          })
        });
      }else{
        updateFsss(this.form).then(response => {
          let _this =this
          this.$toast({
            icon: 'success', // 找到自己需要的图标
            message: '保存成功',
            duration:"1000",
            onClose:function(){
              _this.$router.push({path:'/homesteadSurvey/add4',query: {zjddm: _this.form.zjddm}});
            }
          })
        });
      }
      }).catch((e) => {
        Dialog({ type: 'danger', message: '请填写完整的表单项' });
      });
    },
    // 绘制申请地图
    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/add4',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>