nsgk_mobile/src/views/yinnong/homestead/paidUtilize/paidUtilizeAdd.vue

<template>
  <div class="app-container">
    <div class="header_main">
      有偿使用
      <div class="return_btn" @click="onClickLeft"></div>
    </div>
    <div class="main_box">
      <van-field v-model="circulation.shyqrdbxm" 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.sqrxm}}
        </van-cell>
      </div>
      <van-field
        readonly
        v-model="circulation.zjddm"
        label="宅基地代码"
        input-align="right"
      >
        <template #button>
          <van-button size="small" @click="mapLook" type="primary">查看地图</van-button>
        </template>
      </van-field>
<!--      <van-field v-model="circulation.sqrxm" label="申请人姓名" placeholder="申请人姓名" input-align="right" label-width="auto"/>-->
      <van-field
        readonly
        clickable
        v-model="zjlx"
        label="申请人证件类型"
        placeholder="请选择"
        @click="showzjlx = true"
        input-align="right"
        right-icon="arrow-down"
        label-width="auto"
      />
      <van-popup v-model="showzjlx" position="bottom">
        <van-picker
          show-toolbar
          :columns="zjlxDictionaries"
          @confirm="onConfirmZjlx"
          @cancel="showzjlx = false"
        />
      </van-popup>
      <van-field v-model="circulation.sqrzjhm" label="申请人证件号码" placeholder="申请人证件号码" input-align="right" label-width="auto"/>
      <van-field v-model="circulation.ycsyfs" label="有偿使用方式" placeholder="有偿使用方式" input-align="right" label-width="auto"/>


      <van-cell title="是否一户多宅">
        <template #right-icon>
<!--          @change="designPaperChange"-->
          <van-radio-group v-model="circulation.sfyhdz" direction="horizontal">
            <van-radio name="1">是</van-radio>
            <van-radio name="0">否</van-radio  >
          </van-radio-group>
        </template>
      </van-cell>

      <van-field
        readonly
        clickable
        name="picker"
        v-model="circulation.ycsykssj"
        label="有偿使用开始时间"
        placeholder="选择开始时间"
        @click="showycsykssj = true"
        input-align="right"
        right-icon="arrow-down"
        label-width="auto"
      />
      <van-popup v-model="showycsykssj" position="bottom">
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          title="选择年月日"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="onConfirmYcsykssj"
        />
      </van-popup>

      <van-field
        readonly
        clickable
        name="picker"
        v-model="circulation.ycsydqsj"
        label="有偿使用到期时间"
        placeholder="选择到期时间"
        @click="showycsydqsj = true"
        input-align="right"
        right-icon="arrow-down"
        label-width="auto"
      />
      <van-popup v-model="showycsydqsj" position="bottom">
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          title="选择年月日"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="onConfirmYcsydqsj"
        />
      </van-popup>
      <van-field v-model="circulation.ycsymj" label="有偿使用面积(㎡)" placeholder="请输入有偿使用面积㎡" input-align="right" label-width="auto">
        <template #button>
          <van-button size="small" @click="computeMJ" type="primary">计算</van-button>
        </template>
      </van-field>
      <van-field v-model="circulation.ycsymjdj" label="有偿使用面积单价(元)" placeholder="请输入有偿使用面积单价" @change="changeDJ" input-align="right" label-width="auto"/>
      <van-field v-model="circulation.ycsyfy" label="有偿使用费用(元)" placeholder="请输入有偿使用费用" input-align="right" label-width="auto">
        <template #button>
          <van-button size="small" @click="computeFY" type="primary">计算</van-button>
        </template>
      </van-field>
      <van-field v-model="circulation.fkfs" label="付款方式" placeholder="请输入付款方式" input-align="right" label-width="auto"/>
      <van-field v-model="circulation.bz" label="备注" placeholder="请输入内容" input-align="right" label-width="auto"/>

    </div>
    <van-dialog v-model="mapShow" show-cancel-button>
      <MapGisObtainTc ref="zjdProductResh" :shqrxm="circulation.shyqrdbxm" :landStatus="landStatus" :deptId="circulation.deptId" @closeMoule="closeMoule"></MapGisObtainTc>
    </van-dialog>
    <div style="padding: 16px 0;">
      <van-row>
        <van-col span="12" align="center">
          <van-button type="info" color="#B4B0B0" native-type="submit" class="submitButton" @click="goEdit">取消</van-button>
        </van-col>
        <van-col span="12" align="center">
          <van-button type="info" native-type="submit" class="submitButton" @click="goSubmit">保存</van-button>
        </van-col>
      </van-row>
      <div class="clear"></div>
    </div>
  </div>
</template>

<script>
  import { zjdzd,selectHomesteadObligeeMapList} from "@/api/onlineHome/homestead/circulation";
  import { ycsyAdd  } from "@/api/onlineHome/homestead/paidUtilize";
  import {  getShyqrs,getByLyZjddm} from "@/api/sunVillage_info/homestead/paidExit";
  import { listYcsyjfbz} from "@/api/onlineHome/homestead/homeuseycsyjfbz";
  import MapGisObtainTc from "@/components/Map/MapGisObtainTc";
  import {listProgramme} from "@/api/onlineHome/homestead/programme";
  export default {
    name: "paidUtilizeAdd",
    components: {MapGisObtainTc},
    data() {
      return {
        tcqllxDictionaries:[],//退出权利类型
        tclxDictionaries:[],//退出类型
        tcfsDictionaries:[],//退出方式
        zjlxDictionaries:[],//申请人证件类型
        bcfsDictionaries:[],//补偿方式
        zjdDictionaries:[],//宅基地代码
        shyqrdmDictionaries:[],//使用权人
        getObligeeOptions:[],//下拉框列表
        //计算有偿使用面积
        jsmjData:{
          zdmjSum:0.00,
          hzdmj:0.00,
        },
        landStatus:"1",
        tcqllx:'',
        tclx:'',
        tcfs:'',
        zjlx:'身份证',
        bcfs:'',
        zjddm:'',
        sysFarmer:{deptId:this.$store.state.user.loginDeptId,memberName:""},
        showtcqllx: false,
        showtclx: false,
        showtcfs: false,
        showzjlx: false,
        showbcfs: false,
        showzjddm: false,
        showshyqrdm: false,
        showycsykssj: false,
        showycsydqsj: false,
        showDropList: false,//是否显示下拉框
        mapShow: false,
        circulation:{ ycsymj:0.00, ycsyfy:0.00, ycsymjdj:0.00,sfyhdz:"0"},
        minDate: new Date(),
        maxDate: new Date(2025, 10, 1),
        currentDate: new Date(),
      };
    },
    created() {
      this.getDictionaries();
    },
    methods: {
      getDictionaries(){
          //退出权利类型
          this.houseGetDicts("tcqllx").then((res) => {
            for (var i = 0; i < res.data.length; i++) {
              this.tcqllxDictionaries.push({text: res.data[i].dictLabel, value: res.data[i].dictValue});
            }
          });
          //退出类型
          this.houseGetDicts("tclx").then((res) => {
            for (var i = 0; i < res.data.length; i++) {
              this.tclxDictionaries.push({text: res.data[i].dictLabel, value: res.data[i].dictValue});
            }
          });
          //退出方式
          this.houseGetDicts("tcfs").then((res) => {
            for (var i = 0; i < res.data.length; i++) {
              this.tcfsDictionaries.push({text: res.data[i].dictLabel, value: res.data[i].dictValue});
            }
          });
          //申请人证件类型
          this.houseGetDicts("zjlx").then((res) => {
            for (var i = 0; i < res.data.length; i++) {
              this.zjlxDictionaries.push({text: res.data[i].dictLabel, value: res.data[i].dictValue});
            }
          });
          //补偿方式
          this.houseGetDicts("bcfs").then((res) => {
            for (var i = 0; i < res.data.length; i++) {
              this.bcfsDictionaries.push({text: res.data[i].dictLabel, value: res.data[i].dictValue});
            }
          });
          //宅基地代码
          zjdzd().then(zjdRes => {
            for (let i = 0; i < zjdRes.rows.length; i++) {
              this.zjdDictionaries.push(zjdRes.rows[i].zjddm);
            }
          });
          // //使用权人代码
          // listByDeptId().then(zjdRes => {
          //   for (let i = 0; i < zjdRes.rows.length; i++) {
          //     this.shyqrdmDictionaries.push(zjdRes.rows[i].shyqrdm);
          //   }
          // });
      },
      shyqrdmxmChange(val){
        this.$set(this.circulation, "shyqrdbxm", val.sqrxm);
        this.$set(this.circulation, "deptId", val.deptId);
        this.$set(this.circulation, "deptName", val.deptName);
        this.$set(this.circulation, "sqrzjhm", val.sqrzjhm);
        this.$set(this.circulation, "sqrzjlx", val.sqrzjlx);
        this.getObligeeOptions=[];
        this.showDropList = false;
      },
      /** 查找地图中宅基地 */
      closeMoule: function (data) {
        getByLyZjddm(data).then((response) => {
          this.$set(this.circulation, "sfyhdz", response.data.isMore);
          // const baseImgUrl = this.$store.getters.baseRoutingUrl;
        });
      },
      /** 模糊查询人员信息 */
      remoteTransfereeMethod(query) {
        if (query !== "") {
          getShyqrs({shyqrdbxm:query,status:1,deptId:this.sysFarmer.deptId}).then((response) => {
            if (response.code == 200) {
              this.getObligeeOptions = response.rows.map(function (item) {
                return {
                  sqrxm:item.shyqrdbxm,
                  sqrxb:item.xb,
                  sqrzjhm:item.shyqrdbzjhm,
                  sqrnhdm:item.nhdm,
                  sqrzjlx:item.shyqrdbzjlx,
                  sqrdh:item.dh,
                  gyfs:item.gyfs,
                  dz:item.dz,
                  deptId:item.deptId,
                  deptName:item.deptName,
                  zjddm:item.zjddm,
                }
              })
              //设置模糊查询的下拉框和滚动条
              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;
        }
      },
      onConfirmZjddm(data){
        console.log(data)
        this.circulation.zjddm = data;
        this.showzjddm = false;
      },
      onConfirmZjlx(data){
        this.zjlx = data.text;
        this.circulation.sqrzjlx = data.value;
        this.showzjlx = false;
      },
      onConfirmTcqllx(data){
        this.tcqllx = data.text;
        this.circulation.tcqllx = data.value;
        this.showtcqllx = false;
      },
      onConfirmTclx(data){
        this.tclx = data.text;
        this.circulation.tclx = data.value;
        this.showtclx = false;
      },
      onConfirmTcfs(data){
        this.tcfs = data.text;
        this.circulation.tcfs = data.value;
        this.showtcfs = false;
      },
      onConfirmBcfs(data){
        this.bcfs = data.text;
        this.circulation.bcfs = data.value;
        this.showbcfs = false;
      },
      onConfirmShyqrdm(data){
        this.circulation.shyqrdm = data;
        this.showshyqrdm = false;
      },
      onConfirmYcsykssj(data){
        this.circulation.ycsykssj = this.getNowFormatDate(data).substr(0,10);
        this.showycsykssj = false;
      },
      onConfirmYcsydqsj(data){
        this.circulation.ycsydqsj = this.getNowFormatDate(data).substr(0,10);
        this.showycsydqsj = false;
      },
      goEdit(){
        window.location.replace("paidUtilizeList")
      },
      mapLook(){
        this.mapShow = true;
        setTimeout(() => {
          this.$refs.zjdProductResh.drawingLyPaceCountryDarw();
        },1000);
      },
      /** 有偿使用面积计算 */
      computeMJ(){
        if(this.circulation.shyqrdbxm == null || this.circulation.shyqrdbxm === ""){
          return  this.$toast("请先选择使用权人");
        }
        let _this = this;
        _this.$set( _this.circulation, "ycsymj",  0.00);
        _this.$set( _this.jsmjData, "hzdmj",  0.00);
        _this.$set( _this.jsmjData, "zdmjSum",  0.00);
        listProgramme({}).then((res) => {
          if(res.rows.length > 0){
            _this.$set( _this.jsmjData, "hzdmj", res.rows[0].maxArea);
          }
          selectHomesteadObligeeMapList({shyqrdbxm:_this.circulation.shyqrdbxm,landStatus:_this.landStatus}).then((response) => {
            if (response.code == 200) {
              response.data.map(function(item){
                _this.$set( _this.jsmjData, "zdmjSum", _this.jsmjData.zdmjSum + item.zjdzdxx.zdmj);
                if(_this.jsmjData.zdmjSum - _this.jsmjData.hzdmj > 0){
                  _this.$set( _this.circulation, "ycsymj",  (_this.jsmjData.zdmjSum - _this.jsmjData.hzdmj).toFixed(2));
                }else{
                  _this.$set( _this.circulation, "ycsymj", 0.00);
                }

              });
            }
          });
        })

      },
      /**使用费用计算 */
      computeFY(){
        let _this = this;
        _this.$set( _this.circulation, "ycsymjdj",  0.00);
        _this.$set( _this.circulation, "ycsyfy",  0.00);
        listYcsyjfbz({}).then(response => {
          response.rows.map(function(item){
            if(_this.circulation.ycsymj >= item.startArea && _this.circulation.ycsymj <= item.endArea){
              _this.$set( _this.circulation, "ycsyfy",  (_this.circulation.ycsymj * item.feeAmount).toFixed(2));
            }
          });
        });
      },
      changeDJ() {
        if (this.circulation.ycsymj != null) {
          this.circulation.ycsyfy = ((this.circulation.ycsymj * this.circulation.ycsymjdj)).toFixed(2);
        }
      },
      goSubmit(){
        ycsyAdd(this.circulation).then(response => {
          if(response.code = 200){
            this.$toast.success('新增成功');
            setTimeout(function(){
              window.location.replace("paidUtilizeList")
            },1000)
          }
        });
      }
    },
  }
</script>

<style scoped lang="scss">
  .app-container {
  .header_main{
    height: 116px;
    background: url('../../../../assets/images/sunVillage_info/list_head.png') no-repeat;
    background-size: 100% 100%;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    font-size: 36px;
    line-height: 116px;
    text-align: center;
    color: #fff;
    position: relative;
  .return_btn{
    width: 24px;
    height: 43.2px;
    background: url('../../../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat;
    background-size: 20px 36px;
    position: absolute;
    left: 38px;
    top: 36px;
  }
  .add_btn{
    width: 56.4px;
    height: 40.8px;
    background: url('../../../../assets/images/sunVillage_info/list_icon_9.png') center center no-repeat;
    background-size: 47px 34px;
    position: absolute;
    right: 38px;
    top: 36px;
  }
  }
  }
  .main_title{
    font-size: 0.4rem;
    color: #1D6FE9;
    margin: 0.2rem 6%;
    position: relative;
  }
  .main_box{
    width: 96%;
    margin: 0 auto;
    border-radius: 6px;
    box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
    overflow: hidden;
    background-color: #FFF;
  }
  .submitButton{
    width: 80%;
    margin: 0 auto;
    background-color: #1D6FE9;

  }
</style>