nsgk_mobile/src/views/yinnong/homestead/supervision/supervisionModify.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>
    <div class="main_box">
      <van-field v-model="jgList.shyqrdbxm" label="申请人姓名" placeholder="申请人姓名" input-align="right" label-width="auto" :rules="[{ required: true }]" required @input="remoteTransfereeMethod" />
      <div id="dropList" v-show="showDropList"  style="width: 92vw; position: absolute; z-index: 99; left: 50%; margin-left: -46vw; border: 1px solid #E2E0E0;" >
        <van-cell id="vanCell"  v-for="(item, index) in getObligeeOptions" :key="index" @click="shyqrdmxmChange(item)" style="position: relative; z-index: 999;">
          {{item.sqrxm}}
        </van-cell>
      </div>
      <van-field
        v-model="jgList.zjddm"
        label="宅基地代码"
        input-align="right"
      >
        <template #button>
          <van-icon name="../../../static/images/22.png"  color="#539FFD" size="20" @click="mapLook"/>
        </template>
      </van-field>
      <field-select
        v-model="jgList.shyqrzjlx"
        label="证件类型"
        value-key="dictLabel"
        data-key="dictValue"
        placeholder="选择证件类型"
        :rules="[{ required: true }]"
        required
        remote-url="/system/dict/data/type/zjlx"
        :on-remote-response="'data'"
      />
      <van-field v-model="jgList.shyqrzjhm" label="申请人证件号码" placeholder="申请人证件号码" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
      <field-select
        v-model="jgList.shangbaoId"
        label="关联任务"
        value-key="surveyName"
        data-key="id"
        placeholder="选择关联任务"
        :rules="[{ required: true }]"
        :columns="shangbaoList"
        :clearable="true"
      />
    </div>
    <p class="main_title">执法情况</p>
    <field-select
      v-model="jgList.jglx"
      label="监管类型"
      value-key="dictLabel"
      data-key="dictValue"
      placeholder="选择监管类型"
      :rules="[{ required: true }]"
      required
      remote-url="/system/dict/data/type/jglx"
      :on-remote-response="'data'"
    />
    <field-date-picker
      v-model="jgList.lasj"
      label="立案时间"
      placeholder="选择立案时间"
      :rules="[{ required: true }]"
      formatter="yyyy-MM-dd"
      required
    />
    <field-select
      v-model="jgList.wfydlx"
      label="违法用地类型"
      value-key="dictLabel"
      data-key="dictValue"
      placeholder="选择违法用地类型"
      :rules="[{ required: true }]"
      required
      remote-url="/system/dict/data/type/villations_type"
      :on-remote-response="'data'"
    />
    <van-field required v-model="jgList.sjdz" label="事件地址" placeholder="事件地址" input-align="right" :rules="[{ required: true }]"/>
    <van-dialog v-model="mapShow" show-cancel-button>
      <MapGisObtainTc ref="zjdProductResh" :shqrxm="jgList.shyqrdbxm" :landStatus="landStatus" :deptId="deptId" @closeMoule="closeMoule"></MapGisObtainTc>
    </van-dialog>
    <van-field rows="3" :autosize="true" type="textarea" label="备注" label-width="auto"  placeholder="备注" v-model="jgList.bz" input-align="left"></van-field>
    <div v-if="wfxxShow">
      <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"
        />
        <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"/>
        <van-field v-model="jgList.fmkje" label="罚没款金额" placeholder="请输入金额" input-align="right" label-width="auto"/>
        <van-field v-model="jgList.msmj" label="没收面积" placeholder="请输入面积" input-align="right" label-width="auto"/>
        <van-field v-model="jgList.ccmj" label="拆除面积" placeholder="请输入面积" input-align="right" label-width="auto"/>
        <van-field
          readonly
          clickable
          label="整改截止时间"
          placeholder="选择整改截止时间"
          v-model="jgList.reformDeadline"
          @click="showReformDeadline = true"
          input-align="right"
          right-icon="arrow-down"
        />
        <van-popup v-model="showReformDeadline" position="bottom">
          <van-datetime-picker
            v-model="currentDate"
            type="date"
            title="选择年月日"
            :min-date="minDate"
            :max-date="maxDate"
            @confirm="onConfirmReformDeadline"
          />
        </van-popup>
      </div>

    </div>
    <div style="padding: 16px 0;">
      <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, getShyqrs, getJg, jgEdit, listHomeuseshangbao} from "@/api/onlineHome/homestead/reporting";
  import FieldSelect from "@/components/form/FieldSelect";
  import MapGisObtainTc from "@/components/Map/MapGisObtainTc";
  import FieldDatePicker from "@/components/form/FieldDatePicker";
  import {formatDate} from "element-ui/src/utils/date-util.js";
  export default {
    name: "supervisionAdd",
    components: { MapGisObtainTc,FieldSelect,FieldDatePicker },
    data() {
      return {
        showSys:false,
        showjglx:false,
        showlasj:false,
        showinspectorTime:false,
        showwfydlx:false,
        showReformDeadline:false,
        showDropList:false,
        wfxxShow:false,
        mapShow:false,
        landStatus:"1",
        minDate: new Date(),
        maxDate: new Date(2025, 10, 1),
        currentDate: new Date(),
        deptId:this.$store.state.user.loginDeptId,
        jgList:{},
        getObligeeOptions:[],
        sfzjjzw:'',
        jglx:'',
        wfydlx:'',

        wfydlxDictionaries:[],
        jglxDictionaries:[],
        sysDictionaries:[],
        shangbaoList: [],
      };
    },
    created() {
      this.getDictionaries();
      this.getTaskGet();
      this.getShangbaoList();
    },
    methods: {
      getTaskGet(){
        getJg(this.$route.query.id).then(response => {
          this.jgList = response.data;
        });
      },
      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});
          }
        });

      },
      /** 模糊查询人员信息 */
      remoteTransfereeMethod(query) {
        if (query !== "") {
          getShyqrs({shyqrdbxm:query,status:1}).then((response) => {
            if (response.code == 200) {
              this.getObligeeOptions = response.rows.map(function (item) {
                return {
                  sqrxm:item.shyqrdbxm,
                  sqrxb:item.xb,
                  sqrzjhm:item.shyqrdbzjhm,
                  shyqrdm:item.shyqrdm,
                  sqrzjlx:item.shyqrdbzjlx,
                  sqrdh:item.dh,
                  gyfs:item.gyfs,
                  dz:item.dz,
                  deptId:item.deptId,
                  deptName:item.deptName,
                }
              })
              //设置模糊查询的下拉框和滚动条
              if (this.getObligeeOptions.length > 0) {
                this.showDropList = true;   // div显示会阻挡下边的选择框和输入框，showDropList控制下拉框是否显示
                //设置模糊查询的和滚动条
                this.$nextTick(() => {
                  if (this.getObligeeOptions.length > 4) {
                    let height = document.getElementById("vanCell").offsetHeight * 4;
                    document.getElementById("dropList").style.height = height + "px";
                    document.getElementById("dropList").style.overflow = "scroll";
                  } else {
                    document.getElementById("dropList").style.height = "";
                    document.getElementById("dropList").style.overflow = "visible";
                  }
                });
              } else {
                this.showDropList = false;
              }
            }
          });
        } else {
          this.getObligeeOptions = [];
          this.showDropList = false;
        }
      },
      shyqrdmxmChange(val){
        this.$set(this.jgList, "shyqrdbxm", val.sqrxm);
        this.$set(this.jgList, "deptId", val.deptId);
        this.$set(this.jgList, "deptName", val.deptId);
        this.$set(this.jgList, "shyqrzjhm", val.sqrzjhm);
        this.$set(this.jgList, "shyqrzjlx", val.sqrzjlx);
        this.$set(this.jgList, "shyqrdm", val.shyqrdm);
        this.getObligeeOptions=[];
        this.showDropList = false;
      },
      /** 查找地图中宅基地 */
      closeMoule: function (data) {
        this.jgList.zjddm = data;
        let _this = this;
        let handlerTime = this.getDate();
        this.$set(this.jgList, "sqrq", handlerTime);
        this.$set(this.jgList, "pzrq", handlerTime);
        this.$set(this.jgList, "barq", handlerTime);
      },
      // 获取日期, yyyy-MM-dd
      getDate(d) {
        return formatDate(d ? d : new Date(), 'yyyy-MM-dd');
      },
      mapLook(){
        this.mapShow = true;
        setTimeout(() => {
          this.$refs.zjdProductResh.drawingLyPaceCountryDarw();
        },1000);
      },
      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)
        jgEdit(this.jgList).then(response => {
          console.log(response);
          this.$toast.success('保存成功');
          setTimeout(function(){
            history.go(-1)
          },2000)
        });
      },
      goBack(){
        window.history.go(-1)
      },
      getShangbaoList() {
        listHomeuseshangbao({deptId: this.$store.state.user.loginDeptId, surveyStatus: '0'}).then((resp) => {
          this.shangbaoList = resp.rows;
        });
      },
    },
  }
</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>