nsgk_mobile/src/views/onlineHome/homestead/circulation/circulationAdd.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>
    <p class="main_title">转出方信息</p>
    <div class="main_box">
      <van-field
        readonly
        clickable
        v-model="circulation.zjddm"
        label="宅基地代码"
        placeholder="请选择"
        @click="showZjd = true"
        input-align="right"
        right-icon="arrow-down"
      />
      <van-popup v-model="showZjd" position="bottom">
        <van-picker
          show-toolbar
          :columns="zjdDictionaries"
          @confirm="onConfirmZjd"
          @cancel="showZjd = false"
        />
      </van-popup>

      <van-field
        readonly
        clickable
        v-model="lzfs"
        label="流转方式"
        placeholder="请选择"
        @click="showLzfs = true"
        input-align="right"
        right-icon="arrow-down"
      />
      <van-popup v-model="showLzfs" position="bottom">
        <van-picker
          show-toolbar
          :columns="lzfsDictionaries"
          @confirm="onConfirmLzfs"
          @cancel="showLzfs = false"
        />
      </van-popup>

      <van-field
        v-model="circulation.shyqrdm"
        label="转出方使用权人代码"
        placeholder="请选择"
        label-width="auto"
        input-align="right"
      />
      <!--          @click="showShyqrdm = true"-->
      <!--          right-icon="arrow-down"-->
      <!--          <van-popup v-model="showShyqrdm" position="bottom">-->
      <!--            <van-picker-->
      <!--              show-toolbar-->
      <!--              :columns="shyqrdmDictionaries"-->
      <!--              @confirm="onConfirmShyqrdm"-->
      <!--              @cancel="showShyqrdm = false"-->
      <!--            />-->
      <!--          </van-popup>-->

      <van-cell title="是否本集体经济组织成员">
        <template #right-icon>
          <van-radio-group v-model="circulation.zcfsfbjtjjzzcy" direction="horizontal">
            <van-radio name="Y">是</van-radio>
            <van-radio name="N">否</van-radio>
          </van-radio-group>
        </template>
      </van-cell>
    </div>

    <p class="main_title">流转信息</p>
    <div class="main_box">
      <van-field label="流转面积(㎡)" v-model="circulation.lzmj" placeholder="请输入流转面积(㎡)" input-align="right" label-width="auto"/>
      <van-field label="流转单价(元)" v-model="circulation.lzdj" placeholder="请输入流转单价(元)" input-align="right" label-width="auto"/>
      <van-field label="流转费用(元)" v-model="circulation.lzfy" placeholder="请输入流转费用(元)" input-align="right" label-width="auto"/>
      <van-field
        readonly
        clickable
        v-model="circulation.lzqsrq"
        label="流转起始时间"
        placeholder="请选择起始时间"
        @click="showlzqsrq = true"
        input-align="right"
        right-icon="arrow-down"
      />
      <van-popup v-model="showlzqsrq" position="bottom">
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          title="选择年月日"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="onConfirmLzqsrq"
        />
      </van-popup>

      <van-field
        readonly
        clickable
        v-model="circulation.lzjsrq"
        label="流转结束时间"
        placeholder="请选择结束时间"
        @click="showlzjsrq = true"
        input-align="right"
        right-icon="arrow-down"
      />
      <van-popup v-model="showlzjsrq" position="bottom">
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          title="选择年月日"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="onConfirmLzjsrq"
        />
      </van-popup>

      <van-field
        readonly
        clickable
        v-model="lzqfwyt"
        label="流转前房屋用途"
        placeholder="请选择流转前房屋用途"
        @click="showLzqfwyt = true"
        input-align="right"
        right-icon="arrow-down"
        label-width="auto"
      />
      <van-popup v-model="showLzqfwyt" position="bottom">
        <van-picker
          show-toolbar
          :columns="lzqfwytDictionaries"
          @confirm="onConfirmLzqfwyt"
          @cancel="showLzqfwyt = false"
        />
      </van-popup>

      <van-field
        readonly
        clickable
        v-model="lzhfwyt"
        label="流转后房屋用途"
        placeholder="请选择流转后房屋用途"
        @click="showLzhfwyt = true"
        input-align="right"
        right-icon="arrow-down"
        label-width="auto"
      />
      <van-popup v-model="showLzhfwyt" position="bottom">
        <van-picker
          show-toolbar
          :columns="lzhfwytDictionaries"
          @confirm="onConfirmLzhfwyt"
          @cancel="showLzhfwyt = false"
        />
      </van-popup>
    </div>

    <p class="main_title">转入方信息</p>
    <div class="main_box">
      <van-field
        v-model="circulation.zrfdbmc"
        label="转入方代表名称"
        placeholder="请输入转入方代表名称"
        label-width="auto"
        input-align="right"
      />
      <!--          <van-popup v-model="showZrfdbmc" position="bottom">-->
      <!--            <van-picker-->
      <!--              show-toolbar-->
      <!--              :columns="zrfdbmcDictionaries"-->
      <!--              @confirm="onConfirmZrfdbmc"-->
      <!--              @cancel="showZrfdbmc = false"-->
      <!--            />-->
      <!--          </van-popup>-->

      <van-field
        readonly
        clickable
        v-model="zrfdbzjlx"
        label="转入方代表证件类型"
        placeholder="请选择"
        @click="showZrfdbzjlx = true"
        label-width="auto"
        input-align="right"
        right-icon="arrow-down"
      />
      <van-popup v-model="showZrfdbzjlx" position="bottom">
        <van-picker
          show-toolbar
          :columns="zrfdbzjlxDictionaries"
          @confirm="onConfirmZrfdbzjlx"
          @cancel="showZrfdbzjlx = false"
        />
      </van-popup>

      <van-field label="转入方代表证件号码" v-model="circulation.zrfdbzjhm" placeholder="请输入证件号码" input-align="right" label-width="auto"/>
      <van-cell title="是否本集体经济组织成员">
        <template #right-icon>
          <van-radio-group  v-model="circulation.zrfsfbjtjjzzcy" direction="horizontal">
            <van-radio name="Y">是</van-radio>
            <van-radio name="N">否</van-radio>
          </van-radio-group>
        </template>
      </van-cell>
    </div>

    <p class="main_title">其他</p>
    <div class="main_box">
      <van-field label="所有权人代表姓名" v-model="circulation.suyqrdbxm" placeholder="请输入姓名" input-align="right" label-width="auto"/>
      <van-field label="所有权人意见" v-model="circulation.suyqryj" placeholder="请输入内容" input-align="right" label-width="auto"/>
      <van-field label="备注" v-model="circulation.bz" 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">保<i style="margin-right: 1em;"></i>存</van-button>
        </van-col>
        <van-col span="12" align="center">
          <van-button type="info" native-type="submit" class="submitButton" @click="goSubmit">提<i style="margin-right: 1em;"></i>交</van-button>
        </van-col>
      </van-row>
      <div class="clear"></div>
    </div>
  </div>
</template>

<script>
  import { getLz , zjdzd , getByZjddm , edit , goApply,houseAdd } from "@/api/onlineHome/homestead/circulation";

  export default {
    name: "circulationAdd",
    data() {
      return {
        lzfsDictionaries: [],//流转方式
        shyqrdmDictionaries: [],//转出方使用权人代码
        lzqfwytDictionaries: [],//流转前房屋类型
        lzhfwytDictionaries: [],//流转后房屋类型
        zrfdbmcDictionaries: [],//转入方代表名称
        zrfdbzjlxDictionaries: [],//转入方证件类型
        zjdDictionaries: [],//宅基地列表
        lzfs: '',//流转方式
        shyqrdm: '',//转出方使用权人代码
        lzqfwyt: '',//流转前房屋类型
        lzhfwyt: '',//流转后房屋类型
        zrfdbmc: '',//转入方代表名称
        zrfdbzjlx: '',//转入方证件类型
        zjd: [],//宅基地列表
        showLzfs: false,
        showShyqrdm: false,
        showLzqfwyt: false,
        showLzhfwyt: false,
        showZrfdbmc: false,
        showZrfdbzjlx: false,
        showZjd:false,
        showlzqsrq:false,
        showlzjsrq:false,
        minDate: new Date(),
        maxDate: new Date(2025, 10, 1),
        currentDate: new Date(),
        circulation: {}
      };
    },
    created() {
      this.getDetail();
    },
    methods: {
      getDetail(){
          //流转方式
          this.houseGetDicts("lzfs").then((res) => {
            for( let i = 0 ; i < res.data.length ; i++){
              this.lzfsDictionaries.push({text:res.data[i].dictLabel,value:res.data[i].dictValue})
            }
          });
          //转入方证件类型
          this.houseGetDicts("zjlx").then((res) => {
            for( let i = 0 ; i < res.data.length ; i++){
              this.zrfdbzjlxDictionaries.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);
            }
          });
          //流转前房屋用途
          this.houseGetDicts("fwyt").then((res) => {//流转前房屋用途
            console.log(res)
            for( let i = 0 ; i < res.data.length ; i++){
              this.lzqfwytDictionaries.push({text:res.data[i].dictLabel,value:res.data[i].dictValue})
            }
          });
          //流转后房屋用途
          this.houseGetDicts("fwyt").then((res) => {//流转后房屋用途
            for( let i = 0 ; i < res.data.length ; i++){
              this.lzhfwytDictionaries.push({text:res.data[i].dictLabel,value:res.data[i].dictValue})
            }
          });
      },
      onConfirmLzfs(value) {
        this.lzfs = value.text;
        this.circulation.lzfs = value.value;
        this.showLzfs = false;
      }, //流转方式
      onConfirmZjd(value) {
        this.circulation.zjddm = value;
        var form = {};
        form.zjddm = value;
        getByZjddm(form).then(qlrRes => {
          console.log(qlrRes.data.shyqrdm)
          this.circulation.shyqrdm = qlrRes.data.shyqrdm;
          this.$forceUpdate();
        });
        this.showZjd = false;

      }, //宅基地列表
      onConfirmShyqrdm(value) {
        this.showShyqrdm = false;
      }, //转出方使用权人代码
      onConfirmLzqfwyt(value) {
        this.lzqfwyt = value.text;
        this.circulation.lzqfwyt = value.value;
        this.showLzqfwyt = false;
      }, //流转前房屋用途
      onConfirmLzhfwyt(value) {
        this.lzhfwyt = value.text;
        this.circulation.lzhfwyt = value.value;
        this.showLzhfwyt = false;
      }, //流转后房屋用途
      onConfirmZrfdbmc(value) {
        this.value = value;
        this.showZrfdbmc = false;
      }, //转入方代表名称
      onConfirmZrfdbzjlx(value) {
        this.zrfdbzjlx = value.text;
        this.circulation.zrfdbzjlx = value.value;
        this.showZrfdbzjlx = false;
      }, //转入方代表证件类型
      onConfirmLzqsrq(value) {
        this.circulation.lzqsrq = this.getNowFormatDate(value).substr(0,10);
        this.showlzqsrq = false;
      }, //流转起始时间
      onConfirmLzjsrq(value) {
        this.circulation.lzjsrq = this.getNowFormatDate(value).substr(0,10);
        this.showlzjsrq = false;
      }, //流转结束时间
      goEdit(){
        console.log(this.circulation)
        houseAdd(this.circulation).then(response => {
          if(response.code = 200){
            this.$toast.success('保存成功');
          }
        });
        this.$router.push({name: this.$router.back(-1)});
      },
      goSubmit(){
        goApply(this.$route.query.id).then(response => {
          if(response.code = 200){
            this.$toast.success('提交成功');
            setTimeout(function(){
              window.location.replace("circulationList")
            },1000)
          }
        });
      },
    },
  }
</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;
  }
  .submitButton{
    width: 80%;
    margin: 0 auto;
    background-color: #1D6FE9;

  }
</style>