nsgk_mobile/src/views/onlineHome/homestead/supervision/supervisionAdd.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">
    <p class="main_title">基本信息</p>
    <div class="main_box">
      <van-field
        readonly
        clickable
        label="是否在建建筑物"
        placeholder="请选择"
        v-model="sfzjjzw"
        @click="showSys = true"
        input-align="right"
        right-icon="arrow-down"
        label-width="auto" :rules="[{ required: true }]" required
      />
      <field-select
        v-model="jgList.zjddm"
        label="宅基地代码"
        value-key="zjddm"
        data-key="zjddm"
        placeholder="请选择宅基地代码"
        :rules="[{ required: true }]"
        required
        :readonly="!allowCUD"
        :columns="zjdDictionaries"
        @change="onZjddmChanged"
      />
      <van-field label="户主姓名" v-model="jgList.syrxm" placeholder="请填写户主姓名" input-align="right" label-width="auto" readonly :rules="[{ required: true }]" required/>
      <van-popup v-model="showSys" position="bottom">
        <van-picker
          show-toolbar
          :columns="sysDictionaries"
          @confirm="onConfirmSys"
          @cancel="showSys = false"
        />
      </van-popup>
      <van-field
        readonly
        clickable
        label="监管类型"
        placeholder="请选择"
        v-model="jglx"
        @click="showjglx = true"
        input-align="right"
        right-icon="arrow-down" :rules="[{ required: true }]" required
      />
      <van-popup v-model="showjglx" position="bottom">
        <van-picker
          show-toolbar
          :columns="jglxDictionaries"
          @confirm="onConfirmJglx"
          @cancel="showjglx = false"
        />
      </van-popup>
      <van-field
        readonly
        clickable
        v-model="jgList.lasj"
        label="立案时间"
        placeholder="请选择立案时间"
        @click="showlasj = true"
        input-align="right"
        right-icon="arrow-down" :rules="[{ required: true }]" required
      />
      <van-popup v-model="showlasj" position="bottom">
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          title="选择年月日"
          @confirm="onConfirmLasj"
        />
      </van-popup>
      <van-field label="巡查人" v-model="jgList.inspector" placeholder="请输入巡查人" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
      <van-field
        readonly
        clickable
        label="巡查时间"
        v-model="jgList.inspectorTime"
        placeholder="请选择巡查时间"
        @click="showinspectorTime = true"
        input-align="right"
        right-icon="arrow-down" :rules="[{ required: true }]" required
      />
      <van-popup v-model="showinspectorTime" position="bottom">
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          title="选择年月日"
          @confirm="onConfirmInspectorTime"
        />
      </van-popup>
      <van-field label="备注" v-model="jgList.bz" placeholder="填写备注" input-align="right" label-width="auto"/>
    </div>

    <p class="main_title">违法信息</p>
    <div class="main_box">
      <van-field
        readonly
        clickable
        label="违法用地类型"
        placeholder="请选择"
        v-model="wfydlx"
        @click="showwfydlx = true"
        input-align="right"
        right-icon="arrow-down" :rules="[{ required: true }]" required
      />
      <van-popup v-model="showwfydlx" position="bottom">
        <van-picker
          show-toolbar
          :columns="wfydlxDictionaries"
          @confirm="onConfirmWfydlx"
          @cancel="showwfydlx = false"
        />
      </van-popup>
      <van-field v-model="jgList.wfydmj" type="number" label="违法用地面积" placeholder="请输入面积" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
      <van-field v-model="jgList.fmkje" label="罚没款金额" placeholder="请输入金额" input-align="right" label-width="auto" type="number" :rules="[{ required: true }]" required/>
      <van-field v-model="jgList.msmj" type="number" label="没收面积" placeholder="请输入面积" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
      <van-field v-model="jgList.ccmj" type="number" label="拆除面积" placeholder="请输入面积" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
      <van-field
        readonly
        clickable
        label="整改截止时间"
        placeholder="选择整改截止时间"
        v-model="jgList.reformDeadline"
        @click="showReformDeadline = true"
        input-align="right"
        right-icon="arrow-down" :rules="[{ required: true }]" required
      />
      <van-popup v-model="showReformDeadline" position="bottom">
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          title="选择年月日"
          @confirm="onConfirmReformDeadline"
        />
      </van-popup>
    </div>
    </van-form>
    <div style="padding: 16px 0;" v-if="allowCUD">
      <van-row>
        <van-col span="12" align="center">
          <van-button type="info" color="#B4B0B0" native-type="submit" @click="goBack" class="submitButton">取<i style="margin-right: 1em;"></i>消</van-button>
        </van-col>
        <van-col span="12" align="center">
          <van-button type="info" native-type="submit" @click="goAdd" class="submitButton">保<i style="margin-right: 1em;"></i>存</van-button>
        </van-col>
      </van-row>
      <div class="clear"></div>
    </div>
  </div>
</template>

<script>
  import { jgAdd } from "@/api/onlineHome/homestead/reporting";
  import { zjdzd , getByZjddm } from "@/api/onlineHome/homestead/circulation";
  import FieldSelect from "@/components/form/FieldSelect";
  import {Notify} from "vant";
  export default {
    name: "supervisionAdd",
    components: {
      FieldSelect},
    data() {
      return {
        showSys:false,
        showjglx:false,
        showlasj:false,
        showinspectorTime:false,
        showwfydlx:false,
        showReformDeadline:false,

        currentDate: new Date(),
        jgList:{},

        sfzjjzw:'',
        jglx:'',
        wfydlx:'',

        wfydlxDictionaries:[],
        jglxDictionaries:[],
        sysDictionaries:[],
        zjdDictionaries: [],
      };
    },
    created() {
      this.getDictionaries();
    },
    computed: {
      allowCUD: function () {
        return this.$store.getters.businessLevel == '2'
      },
    },
    methods: {
      getDictionaries(){
        //违法用地类型
        this.houseGetDicts("villations_type").then((res) => {
          for(var i = 0 ; i < res.data.length ; i++){
            this.wfydlxDictionaries.push({text:res.data[i].dictLabel,value:res.data[i].dictValue});
          }
        });
        //监管类型
        this.houseGetDicts("jglx").then((res) => {
          for(var i = 0 ; i < res.data.length ; i++){
            this.jglxDictionaries.push({text:res.data[i].dictLabel,value:res.data[i].dictValue});
          }
        });
        //是否在建建筑物
        this.houseGetDicts("sys_yes_no").then((res) => {
          for(var i = 0 ; i < res.data.length ; i++){
            this.sysDictionaries.push({text:res.data[i].dictLabel,value:res.data[i].dictValue});
          }
        });
        //宅基地代码
        zjdzd().then(zjdRes => {
          this.zjdDictionaries = zjdRes.rows;
          if(this.zjdDictionaries.length > 0)
            this.jgList.zjddm = this.zjdDictionaries[0].zjddm;
        });
      },
      onConfirmSys(data){
        this.sfzjjzw = data.text;
        this.jgList.sfzjjzw = data.value;
        this.showSys = false;
      },
      onConfirmJglx(data){
        this.jglx = data.text;
        this.jgList.jglx = data.value;
        this.showjglx = false;
      },
      onConfirmWfydlx(data){
        this.wfydlx = data.text;
        this.jgList.wfydlx = data.value;
        this.showwfydlx = false;
      },
      onConfirmLasj(data){
        this.jgList.lasj = this.getNowFormatDate(data).substr(0,10);
        this.showlasj = false;
      },
      onConfirmInspectorTime(data){
        this.jgList.inspectorTime = this.getNowFormatDate(data).substr(0,10);
        this.showinspectorTime = false;
      },
      onConfirmReformDeadline(data){
        this.jgList.reformDeadline = this.getNowFormatDate(data).substr(0,10);
        this.showReformDeadline = false;
      },
      goAdd(){
        console.log(this.jgList)
        this.$refs._Form.validate().then(() => {
          jgAdd(this.jgList).then(response => {
            console.log(response);
            this.$toast.success('保存成功');
            setTimeout(function(){
              history.go(-1)
            },2000)
          });
        }).catch((e) => {
          Notify({ type: 'danger', message: '请填写完整的表单项' });
        });
      },
      goBack(){
        window.history.go(-1)
      },
      onZjddmChanged(data) {
        let zjddm = data.zjddm;
        getByZjddm({zjddm: zjddm,}).then(qlrRes => {
          let data = qlrRes.data;
          console.log(data)
          this.jgList.syrxm = data.shyqrdbxm;
          this.$forceUpdate();
        });
      }
    },
  }
</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>