nsgk_mobile/src/views/onlineHome/homestead/reporting/taskCloseCaseAdd.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
          label="是否在建建筑物"
          placeholder="请选择"
          v-model="sfzjjzw"
          @click="showSys = true"
          input-align="right"
          right-icon="arrow-down"
          label-width="auto" :rules="[{ required: true }]" required
        />
        <van-popup v-model="showSys" position="bottom">
          <van-picker
            show-toolbar
            :columns="sysDictionaries"
            @confirm="onConfirmSys"
            @cancel="showSys = false"
          />
        </van-popup>
        <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-field label="宅基地代码" v-model="jgList.zjddm" placeholder="请输入宅基地代码" input-align="right"  :rules="[{ required: true }]" required/>-->
<!--        <van-popup v-model="showZjd" position="bottom">-->
<!--          <van-picker-->
<!--            show-toolbar-->
<!--            @cancel="showZjd = 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"
        />
        <van-popup v-model="showlasj" position="bottom">
          <van-datetime-picker
            :value="new Date"
            type="date"
            title="选择年月日"
            @confirm="onConfirmLasj"
            @cancel="showlasj = false"
          />
        </van-popup>
        <van-field label="巡查人" v-model="jgList.inspector" placeholder="请输入巡查人" input-align="right" label-width="auto"/>
        <van-field
          readonly
          clickable
          label="巡查时间"
          v-model="jgList.inspectorTime"
          placeholder="请选择巡查时间"
          @click="showinspectorTime = true"
          input-align="right"
          right-icon="arrow-down"
        />
        <van-popup v-model="showinspectorTime" position="bottom">
          <van-datetime-picker
            :value="new Date"
            type="date"
            title="选择年月日"
            @confirm="onConfirmInspectorTime"
            @cancel="showinspectorTime = false"
          />
        </van-popup>
      </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" label="违法用地面积" placeholder="请输入面积" input-align="right" label-width="auto" type="number" :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" label="没收面积" placeholder="请输入面积" input-align="right" label-width="auto" type="number" :rules="[{ required: true }]" required/>
        <van-field v-model="jgList.ccmj" label="拆除面积" placeholder="请输入面积" input-align="right" label-width="auto" type="number" :rules="[{ required: true }]" required/>
      </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 {Notify} from "vant";
import { zjdzd , getByZjddm } from "@/api/onlineHome/homestead/circulation";
import FieldSelect from "@/components/form/FieldSelect";
export default {
  name: "taskCloseCaseAdd",
  components: {
    FieldSelect},
  data() {
    return {
      showSys:false,
      showjglx:false,
      showlasj:false,
      showinspectorTime:false,
      showwfydlx:false,
      jgList:{},

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

      wfydlxDictionaries:[],
      jglxDictionaries:[],
      sysDictionaries:[],
      zjdDictionaries: [],
    };
  },
  created() {
    this.getDictionaries();
    this.jgList.taskId = this.$route.query.id;
  },
  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;
    },
    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>