nsgk_mobile/src/views/onlineHome/homestead/mortgage/mortgageModify.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
          readonly
          clickable
          name="picker"
          v-model="circulation.zjddm"
          label="宅基地代码"
          placeholder="请选择"
          @click="showzjddm = true"
          input-align="right"
          right-icon="arrow-down" :rules="[{ required: true }]" required
        />
        <van-popup v-model="showzjddm" position="bottom">
          <van-picker
            show-toolbar
            :columns="zjdDictionaries"
            @confirm="onConfirmZjddm"
            @cancel="showzjddm = false"
          />
        </van-popup>
        <van-field v-model="circulation.bdcdyh" label="不动产单元号" placeholder="请输入不动产单元号" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
        <van-field v-model="circulation.bdcqzh" label="不动产权证号" placeholder="请输入不动产权证号" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
        <van-field v-model="circulation.bdcdydjywh" label="不动产抵押登记业务号" placeholder="请输入不动产抵押登记业务号" input-align="right" label-width="auto"/>
        <van-field v-model="circulation.zjjzwzl" label="在建建筑物坐落" placeholder="请输入在建建筑物坐落" input-align="right" label-width="auto"/>
        <van-field v-model="circulation.zjjzwdyfw" label="在建建筑物抵押范围" placeholder="请输入在建建筑物抵押范围" input-align="right" label-width="auto"/>
        <van-field
          readonly
          clickable
          name="picker"
          v-model="qszt"
          label="权属状态"
          placeholder="请选择权属状态"
          @click="showqszt = true"
          input-align="right"
          right-icon="arrow-down" :rules="[{ required: true }]" required
        />
        <van-popup v-model="showqszt" position="bottom">
          <van-picker
            show-toolbar
            :columns="qsztDictionaries"
            @confirm="onConfirmQszt"
            @cancel="showqszt = false"
          />
        </van-popup>
      </div>

      <div class="main_box">
        <van-field
          readonly
          clickable
          name="picker"
          v-model="dybdclx"
          label="抵押不动产类型"
          placeholder="请选择类型"
          @click="showdybdclx = true"
          input-align="right"
          right-icon="arrow-down"
          label-width="auto" :rules="[{ required: true }]" required
        />
        <van-popup v-model="showdybdclx" position="bottom">
          <van-picker
            show-toolbar
            :columns="dybdclxDictionaries"
            @confirm="onConfirmDybdclx"
            @cancel="showdybdclx = false"
          />
        </van-popup>
        <van-field v-model="circulation.dyr" label="抵押人" placeholder="请输入抵押人" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
        <van-field
          readonly
          clickable
          name="picker"
          v-model="dyfs"
          label="抵押方式"
          placeholder="请选择抵押方式"
          @click="showdyfs = true"
          input-align="right"
          right-icon="arrow-down"
          label-width="auto" :rules="[{ required: true }]" required
        />
        <van-popup v-model="showdyfs" position="bottom">
          <van-picker
            show-toolbar
            :columns="dyfsDictionaries"
            @confirm="onConfirmDyfs"
            @cancel="showdyfs = false"
          />
        </van-popup>
      </div>

      <div class="main_box">
        <van-field
          readonly
          clickable
          name="picker"
          v-model="djlx"
          label="登记类型"
          placeholder="请选择登记类型"
          @click="showdjlx = true"
          label-width="auto"
          input-align="right"
          right-icon="arrow-down" :rules="[{ required: true }]" required
        />
        <van-popup v-model="showdjlx" position="bottom">
          <van-picker
            show-toolbar
            :columns="djlxDictionaries"
            @confirm="onConfirmDjlx"
            @cancel="showdjlx = false"
          />
        </van-popup>
        <van-field v-model="circulation.djyy" label="登记原因" placeholder="请输入登记原因" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
        <van-field v-model="circulation.djjg" label="登记机构" placeholder="请输入登记机构" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
        <van-field v-model="circulation.dbr" label="登薄人" placeholder="请输入登薄人" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
        <van-field
          readonly
          clickable
          name="picker"
          v-model="circulation.djsj"
          label="登记时间"
          placeholder="选择登记时间"
          @click="showdjsj = true"
          input-align="right"
          right-icon="arrow-down" :rules="[{ required: true }]" required
        />
        <van-popup v-model="showdjsj" position="bottom">
          <van-datetime-picker
            v-model="currentDate"
            type="date"
            title="选择年月日"
            @confirm="onConfirmDjsj"
          />
        </van-popup>
      </div>

      <div class="main_box">
        <van-field label="附记" v-model="circulation.fj" placeholder="请输入内容" input-align="right" label-width="auto"/>
        <van-field label="备注" v-model="circulation.bz" placeholder="请输入内容" input-align="right" label-width="auto"/>
      </div>
      </van-form>

      <div style="padding: 16px 0;">
        <van-row>
          <van-col span="12" align="center">
            <van-button type="info" 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 { dyApply , getDy , dyEdit } from "@/api/onlineHome/homestead/mortgage";
import { zjdzd, getByZjddm } from "@/api/onlineHome/homestead/circulation";
import {Notify} from "vant";
export default {
    name: "mortgageModify",
  data() {
    return {
      value: '',
      showdjsj: false,
      showdybdclx: false,
      showdyfs: false,
      showdjlx: false,
      showqszt: false,
      showzjddm: false,
      dybdclx: '',
      dyfs: '',
      djlx: '',
      qszt: '',
      zjddm: '',
      currentDate: new Date(),
      circulation:{},
      dybdclxDictionaries:[],//抵押不动产类型
      dyfsDictionaries:[],//抵押方式
      djlxDictionaries:[],//登记类型
      qsztDictionaries:[],//权属状态
      zjdDictionaries: [],//宅基地列表
    };
  },
  created() {
    this.getDictionaries();
  },
  methods: {
    getDictionaries(){
      getDy(this.$route.query.id).then(response => {
        //抵押不动产类型
        this.houseGetDicts("dybdclx").then((res) => {
          for(var i = 0 ; i < res.data.length ; i++){
            this.dybdclxDictionaries.push({text:res.data[i].dictLabel,value:res.data[i].dictValue});
          }
          this.dybdclx = this.selectDictLabel(res.data, response.data.dybdclx);
        });
        //抵押方式
        this.houseGetDicts("dyfs").then((res) => {
          for(var i = 0 ; i < res.data.length ; i++){
            this.dyfsDictionaries.push({text:res.data[i].dictLabel,value:res.data[i].dictValue});
          }
          this.dyfs = this.selectDictLabel(res.data, response.data.dyfs);
        });
        //登记类型
        this.houseGetDicts("djlx").then((res) => {
          for(var i = 0 ; i < res.data.length ; i++){
            this.djlxDictionaries.push({text:res.data[i].dictLabel,value:res.data[i].dictValue});
          }
          this.djlx = this.selectDictLabel(res.data, response.data.djlx);
        });
        //权属状态
        this.houseGetDicts("qszt").then((res) => {
          for(var i = 0 ; i < res.data.length ; i++){
            this.qsztDictionaries.push({text:res.data[i].dictLabel,value:res.data[i].dictValue});
          }
          this.qszt = this.selectDictLabel(res.data, response.data.qszt);
        });
        //宅基地代码
        zjdzd().then(zjdRes => {
          for( let i = 0 ; i < zjdRes.rows.length ; i++){
            this.zjdDictionaries.push(zjdRes.rows[i].zjddm);
          }
        });
        this.circulation = response.data;
      });
    },
    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, 'bdcdyh', data.bdcdyh);
        this.$set(this.circulation, 'bdcqzh', data.bdcqzh);
        this.$forceUpdate();
      });
    },
    onConfirmQszt(data){
      this.qszt = data.text;
      this.circulation.qszt = data.value;
      this.showqszt = false;
    },
    onConfirmDybdclx(data){
      this.dybdclx = data.text;
      this.circulation.dybdclx = data.value;
      this.showdybdclx = false;
    },
    onConfirmDyfs(data){
      this.dyfs = data.text;
      this.circulation.dyfs = data.value;
      this.showdyfs = false;
    },
    onConfirmDjlx(data){
      this.djlx = data.text;
      this.circulation.djlx = data.value;
      this.showdjlx = false;
    },
    onConfirmDjsj(data){
      this.circulation.djsj = this.getNowFormatDate(data).substr(0,10);
      this.showdjsj = false;
    },
    goEdit(){
      this.$refs._Form.validate().then(() => {
        dyEdit(this.circulation).then(response => {
        if(response.code = 200){
          this.$toast.success('保存成功');
          this.$router.back(-1);
        }
      })
      }).catch((e) => {
        Notify({ type: 'danger', message: '请填写完整的表单项' });
      });
    },
    goSubmit(){
      this.$refs._Form.validate().then(() => {
      dyApply(this.$route.query.id).then(response => {
        if(response.code = 200){
          this.$toast.success('保存成功');
          setTimeout(function(){
            this.$router.back(-1);
          },1000)
        }
      })
      }).catch((e) => {
        Notify({ type: 'danger', message: '请填写完整的表单项' });
      });
    }
  },
}
</script>

<style scoped lang="scss">
  .app-container {
  }
  .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;
    margin-top:2%;
  }
  .submitButton{
    width: 80%;
    margin: 0 auto;
    background-color: #1D6FE9;

  }
</style>