nsgk_mobile/src/views/onlineHome/homestead/paidExit/paidExitAdd.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
          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.sqrxm" label="申请人姓名" placeholder="申请人姓名" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
        <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
          clickable
          v-model="tclx"
          label="退出类型"
          placeholder="请选择退出类型"
          @click="showtclx = true"
          input-align="right"
          right-icon="arrow-down"
          label-width="auto" :rules="[{ required: true }]" required
        />
        <van-popup v-model="showtclx" position="bottom">
          <van-picker
            show-toolbar
            :columns="tclxDictionaries"
            @confirm="onConfirmTclx"
            @cancel="showtclx = 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="12" align="center">
            <van-button type="info" native-type="submit" class="submitButton" @click="goSubmit(false)">保存</van-button>
          </van-col>
          <van-col span="12" align="center">
            <van-button type="info" native-type="submit" class="submitButton" @click="goSubmit(true)">提交</van-button>
          </van-col>
        </van-row>
        <div class="clear"></div>
      </div>
    </div>
</template>

<script>
import { zjdzd, getByZjddm } from "@/api/onlineHome/homestead/circulation";
import { dyAdd, zyyctcApply } from "@/api/onlineHome/homestead/paidExit";
import {Notify} from "vant";
export default {
  name: "paidExitAdd",
  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:{
        // 申请类型  1-宅基地退出
        sqlx: '1',
        // 退出类型  01-有偿退出   02-无偿退出
        tclx: '01',
      }
    };
  },
  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);
        }
        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();
      });
    },
    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;
    },
    goSubmit(submit){
      console.log(this.circulation);
      this.$refs._Form.validate().then(() => {
        // 设置初始状态为草稿，0 代表草稿
        this.$set(this.circulation, "auditStatus", '0');
      dyAdd(this.circulation).then(response => {
        if(response.code = 200){
          if(submit)
          {
            zyyctcApply(response.data).then((resp) => {
              this.$toast.success('提交成功');
              this.back();
            });
          }
          else {
            this.$toast.success('保存成功');
            this.back();
          }
        }
      })
      }).catch((e) => {
        Notify({ type: 'danger', message: '请填写完整的表单项' });
      });
    },
    back() {
      setTimeout(() => this.$router.back(-1), 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>