nsgk_mobile/src/views/onlineHome/homestead/homesteadUtilize/homesteadUtilizeAdd.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
          readonly
          clickable
          v-model="zjdlyzk"
          label="宅基地利用情况"
          placeholder="请选择"
          @click="showzjdlyzk = true"
          input-align="right"
          right-icon="arrow-down"
          label-width="auto" :rules="[{ required: true }]" required
        />
        <van-popup v-model="showzjdlyzk" position="bottom">
          <van-picker
            show-toolbar
            :columns="zjdlyzkDictionaries"
            @confirm="onConfirmZjdlyzk"
            @cancel="showzjdlyzk = false"
          />
        </van-popup>
        <van-field v-model="circulation.zjdxzyy" label="宅基地闲置原因" placeholder="闲置原因" input-align="right" label-width="auto"/>
        <van-field
          readonly
          clickable
          v-model="circulation.zjdxzqssj"
          label="宅基地闲置开始时间"
          placeholder="宅基地闲置开始时间"
          @click="showzjdxzqssj = true"
          input-align="right"
          right-icon="arrow-down"
          label-width="auto" :rules="[{ required: true }]" required
        />
        <van-popup v-model="showzjdxzqssj" position="bottom">
          <van-datetime-picker
            :value="new Date"
            type="date"
            title="选择年月日"
            @confirm="onConfirmZjdxzqssj"
            @cancel="showzjdxzqssj = false"
          />
        </van-popup>
        <van-field
          readonly
          clickable
          v-model="circulation.dcsj"
          label="调查时间"
          placeholder="调查时间"
          @click="showdcsj = true"
          input-align="right"
          right-icon="arrow-down"
          label-width="auto" :rules="[{ required: true }]" required
        />
        <van-popup v-model="showdcsj" position="bottom">
          <van-datetime-picker
            :value="new Date"
            type="date"
            title="选择年月日"
            @confirm="onConfirmDcsj"
            @cancel="showdcsj = false"
          />
        </van-popup>
        <van-field v-model="circulation.bz" label="备注" type="textarea" 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" color="#B4B0B0" native-type="submit" class="submitButton" @click="$router.back()">关闭</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 { zjdlyAdd } from "@/api/onlineHome/homestead/homesteadUtilize";
import {Notify} from "vant";
export default {
    name: "homesteadUtilizeAdd",
  data() {
    return {
      zjdlyzk:'',//宅基地利用状况
      zjdlyzkDictionaries:[],//宅基地利用状况 字典
      circulation:{},
      zjdDictionaries:[],
      showzjddm : false ,
      showzjdlyzk : false ,
      showzjdxzqssj : false ,
      showdcsj : false ,
    };
  },
  created() {
    this.houseGetDicts("zjdlyzk").then((res) => {
      for(var i = 0 ; i < res.data.length ; i++){
        this.zjdlyzkDictionaries.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);
      }
    });
  },
  methods: {
    onConfirmZjddm(data){
      console.log(data)
      this.circulation.zjddm = data;
      this.showzjddm = false;
    },
    onConfirmZjdlyzk(data){
      this.zjdlyzk = data.text;
      this.circulation.zjdlyzk = data.value;
      this.showzjdlyzk = false;
    },
    onConfirmZjdxzqssj(data){
      this.circulation.zjdxzqssj = this.getNowFormatDate(data).substr(0,10);
      this.showzjdxzqssj = false;
    },
    onConfirmDcsj(data){
      this.circulation.dcsj = this.getNowFormatDate(data).substr(0,10);
      this.showdcsj = false;
    },
    goSubmit(){
      this.$refs._Form.validate().then(() => {
      zjdlyAdd(this.circulation).then(response => {
        if(response.code = 200){
          this.$toast.success('保存成功');
          window.location.replace("homesteadUtilize")
        }
      });
      }).catch((e) => {
        Notify({ type: 'danger', message: '请填写完整的表单项' });
      });
    }
  },
}
</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>