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

<template>
  <div class="app-container">
    <van-nav-bar
      left-arrow
      fixed
      placeholder
      @click-left="$router.back(-1)"
    >
      <template #title>
        <p style="font-weight: bold;">添加无偿退出</p>
      </template>
    </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 @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
          v-model="circulation.zjddm"
          label="宅基地代码"
          placeholder="请选择"
          @click="remoteProposerMethod"
          input-align="right"
          right-icon="arrow-down" :rules="[{ required: true }]" required
        />
        <van-popup v-model="showzjddm" position="bottom">
          <van-picker
            show-toolbar
            :columns="zjdDictionaries"
            value-key="zjddm"
            @confirm="onConfirmZjddm"
            @cancel="showzjddm = false"
          />
        </van-popup>
        <van-field
          readonly
          clickable
          v-model="zjlx"
          label="申请人证件类型"
          placeholder="请选择"
          @click="showzjlx = true"
          input-align="right"
          right-icon="arrow-down"
          label-width="auto" :rules="[{ required: true }]" required
        />
        <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" :rules="[{ required: true }]" required/>
      </div>

      <p class="main_title">退出信息</p>
      <div class="main_box">
        <van-field
          readonly
          clickable
          v-model="tcqllx"
          label="退出权利类型"
          placeholder="请选择退出权利类型"
          @click="showtcqllx = true"
          input-align="right"
          right-icon="arrow-down"
          label-width="auto" :rules="[{ required: true }]" required
        />
        <van-popup v-model="showtcqllx" position="bottom">
          <van-picker
            show-toolbar
            :columns="tcqllxDictionaries"
            @confirm="onConfirmTcqllx"
            @cancel="showtcqllx = false"
          />
        </van-popup>

        <van-field
          readonly
          v-model="tclx"
          label="退出类型"
          input-align="right"
          label-width="auto"
          required
        />

        <van-field
          readonly
          clickable
          v-model="tcfs"
          label="退出方式"
          placeholder="请选择退出方式"
          @click="showtcfs = true"
          input-align="right"
          right-icon="arrow-down"
          label-width="auto" :rules="[{ required: true }]" required
        />
        <van-popup v-model="showtcfs" position="bottom">
          <van-picker
            show-toolbar
            :columns="tcfsDictionaries"
            @confirm="onConfirmTcfs"
            @cancel="showtcfs = false"
          />
        </van-popup>
        <van-field v-model="circulation.tcmj" label="退出面积(㎡)" placeholder="请输入退出面积㎡" input-align="right" label-width="auto" :rules="[{ required: true }]" required type="number"/>
        <van-field v-model="circulation.tcnx" label="退出年限" placeholder="请输入退出年限" input-align="right" label-width="auto" type="number"/>
      </div>

      <p class="main_title">补偿信息</p>
      <div class="main_box">
        <van-field
          readonly
          clickable
          v-model="bcfs"
          label="补偿方式"
          placeholder="请选择补偿方式"
          @click="showbcfs = true"
          label-width="auto"
          input-align="right"
          right-icon="arrow-down"
        />
        <van-popup v-model="showbcfs" position="bottom">
          <van-picker
            show-toolbar
            :columns="bcfsDictionaries"
            @confirm="onConfirmBcfs"
            @cancel="showbcfs = false"
          />
        </van-popup>
        <van-field v-model="circulation.bcje" label="补偿金额(元)" placeholder="请输入补偿金额 元" input-align="right" label-width="auto" type="number"/>
        <van-field v-model="circulation.zhfwmj" label="置换房屋面积(㎡)" placeholder="请输入房屋面积㎡" input-align="right" label-width="auto" type="number"/>
        <van-field v-model="circulation.zhfwzl" label="置换房屋坐落" placeholder="请输入房屋坐落" input-align="right" label-width="auto"/>
        <van-field v-model="circulation.bz" label="备注" placeholder="请输入内容" input-align="right" label-width="auto"/>

      </div>
    </van-form>

    <div style="padding: 16px 0;">
      <van-row>
        <van-col span="24" 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, getByZjddm, getObligeeList, obligeeList } from "@/api/onlineHome/homestead/circulation";
  import { dyAdd,  } from "@/api/onlineHome/homestead/paidExit";
  import {Notify} from "vant";
  export default {
    name: "freeExitAdd",
    data() {
      return {
        tcqllxDictionaries:[],//退出权利类型
        tclxDictionaries:[],//退出类型
        tcfsDictionaries:[],//退出方式
        zjlxDictionaries:[],//申请人证件类型
        bcfsDictionaries:[],//补偿方式
        zjdDictionaries:[],//宅基地代码
        getObligeeOptions:[],//下拉框列表

        tcqllx:'',
        tclx:'无偿退出',
        tcfs:'',
        zjlx:'',
        bcfs:'',
        zjddm:'',

        showtcqllx: false,
        showtclx: false,
        showtcfs: false,
        showzjlx: false,
        showbcfs: false,
        showzjddm: false,
        showDropList: false,//是否显示下拉框

        circulation:{
          // 申请类型  1-宅基地退出
          sqlx: '1',
          // 退出类型  01-有偿退出   02-无偿退出
          tclx: '02',
        }
      };
    },
    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("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);
          }
          if(this.zjdDictionaries.length > 0)
            this.onConfirmZjddm(this.zjdDictionaries[0]);
        });*/
      },
      /*onConfirmZjddm(data){
        console.log(data)
        this.circulation.zjddm = data;
        this.showzjddm = false;
        getByZjddm({zjddm: data,}).then(qlrRes => {
          let data = qlrRes.data;
          console.log(data)
          this.$set(this.circulation, 'sqrxm', data.shyqrdbxm);
          this.$set(this.circulation, 'sqrzjhm', data.shyqrdbzjhm);
          this.$set(this.circulation, 'sqrzjlx', data.shyqrdbzjlx);
          if(data.shyqrdbzjlx)
          {
            let val = this.zjlxDictionaries.find((x) => x.value == data.shyqrdbzjlx);
            if(val)
              this.zjlx = val.text;
          }
          this.$forceUpdate();
        });
      },*/
      onConfirmZjddm(data){
        console.log(data);
        this.showzjddm = false;
        if (data) {
          this.$set(this.circulation, 'zjddm', data.zjddm);
          this.$set(this.circulation, 'sqrzjhm', data.shyqrdbzjhm);
          this.$set(this.circulation, 'sqrzjlx', data.shyqrdbzjlx);
          if(data.shyqrdbzjlx)
          {
            let val = this.zjlxDictionaries.find((x) => x.value == data.shyqrdbzjlx);
            if(val)
              this.zjlx = val.text;
          }
        }
        // this.$forceUpdate();
      },
      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;
      },
      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;
      },
      goSubmit(){
        console.log(this.circulation);
        this.$refs._Form.validate().then(() => {
          // 无偿退出申请不需要审批，保存成功之后默认就是审批通过状态，5 代表审批通过
          this.$set(this.circulation, "auditStatus", '5');
          dyAdd(this.circulation).then(response => {
            if(response.code = 200){
              this.$toast.success('保存成功');
              this.back();
            }
          })
        }).catch((e) => {
          Notify({ type: 'danger', message: '请填写完整的表单项' });
        });
      },
      back() {
        setTimeout(() => this.$router.back(-1), 1000)
      },
      remoteProposerMethod() {
        this.showzjddm = true;
        this.zjdDictionaries = [];
        if (this.circulation.sqrxm) {
          getObligeeList({shyqrdbxm:this.circulation.sqrxm}).then(response => {
            this.zjdDictionaries = response.data.map(item => {
              return {
                zjddm: item.zjddm,
                shyqrdbxm: item.shyqrdbxm,
                shyqrdbzjlx: item.shyqrdbzjlx,
                shyqrdbzjhm: item.shyqrdbzjhm
              }
            });
          });
        } 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;
      }
    },
  }
</script>

<style scoped lang="scss">
  .app-container {
    padding: 2% 0;
  }
  .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;

  }
  #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>