nsgk_mobile/src/views/onlineHome/homestead/paidExit/paidExitModify.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>
    <div class="main_box">
      <van-field
        readonly
        clickable
        v-model="circulation.zjddm"
        label="宅基地代码"
        placeholder="请选择"
        @click="showzjddm = true"
        input-align="right"
        right-icon="arrow-down"
      />
      <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.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"/>
    </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"
      />
      <van-popup v-model="showtcqllx" position="bottom">
        <van-picker
          show-toolbar
          :columns="tcqllxDictionaries"
          @confirm="onConfirmTcqllx"
          @cancel="showtcqllx = false"
        />
      </van-popup>

      <van-field
        readonly
        clickable
        v-model="tclx"
        label="退出类型"
        placeholder="请选择退出类型"
        @click="showtclx = true"
        input-align="right"
        right-icon="arrow-down"
        label-width="auto"
      />
      <van-popup v-model="showtclx" position="bottom">
        <van-picker
          show-toolbar
          :columns="tclxDictionaries"
          @confirm="onConfirmTclx"
          @cancel="showtclx = false"
        />
      </van-popup>

      <van-field
        readonly
        clickable
        v-model="tcfs"
        label="退出方式"
        placeholder="请选择退出方式"
        @click="showtcfs = true"
        input-align="right"
        right-icon="arrow-down"
        label-width="auto"
      />
      <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"/>
      <van-field v-model="circulation.tcnx" label="退出年限" placeholder="请输入退出年限" input-align="right" label-width="auto"/>
    </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"/>
      <van-field v-model="circulation.zhfwmj" label="置换房屋面积" placeholder="请输入房屋面积㎡" input-align="right" label-width="auto"/>
      <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>

    <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 { zjdzd } from "@/api/onlineHome/homestead/circulation";
  import { zyyctcEdit , getZyyctc , zyyctcApply } from "@/api/onlineHome/homestead/paidExit";
  export default {
    name: "paidExitModify",
    data() {
      return {
        tcqllxDictionaries:[],//退出权利类型
        tclxDictionaries:[],//退出类型
        tcfsDictionaries:[],//退出方式
        zjlxDictionaries:[],//申请人证件类型
        bcfsDictionaries:[],//补偿方式
        zjdDictionaries:[],//宅基地代码

        tcqllx:'',
        tclx:'',
        tcfs:'',
        zjlx:'',
        bcfs:'',
        zjddm:'',

        showtcqllx: false,
        showtclx: false,
        showtcfs: false,
        showzjlx: false,
        showbcfs: false,
        showzjddm: false,

        circulation:{}
      };
    },
    created() {
      this.getDictionaries();
    },
    methods: {
      getDictionaries(){
        getZyyctc(this.$route.query.id).then(response => {
          //退出权利类型
          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.tcqllx = this.selectDictLabel(res.data, response.data.tcqllx);
          });
          //退出类型
          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.tclx = this.selectDictLabel(res.data, response.data.tclx);
          });
          //退出方式
          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.tcfs = this.selectDictLabel(res.data, response.data.tcfs);
          });
          //申请人证件类型
          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.zjlx = this.selectDictLabel(res.data, response.data.sqrzjlx);
          });
          //补偿方式
          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});
            }
            this.bcfs = this.selectDictLabel(res.data, response.data.bcfs);
          });
          //宅基地代码
          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;
      },
      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;
      },
      goEdit(){
        console.log(this.circulation);
        zyyctcEdit(this.circulation).then(response => {
          if(response.code = 200){
            this.$toast.success('保存成功');
          }
        });
      },
      goSubmit(){
        zyyctcApply(this.$route.query.id).then(response => {
          if(response.code = 200){
            this.$toast.success('提交成功');
            setTimeout(function(){
              window.location.replace("paidExit")
            },1000)
          }
        });
      }
    },
  }
</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;

  }
</style>