nsgk_mobile/src/views/sunVillage_info/paidExit/paidExitModify.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="header_main">
      修改有偿退出
      <div class="return_btn" @click="onClickLeft"></div>
      <!--      <div class="add_btn" @click="goAdd"></div>-->
    </div>

    <van-form ref="_Form">
      <div class="main_box">
        <!--        <van-field v-model="circulation.sqrxm" label="申请人姓名" placeholder="申请人姓名" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>-->
        <van-field v-model="circulation.sqrxm" 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-->
        <!--          readonly-->
        <!--          clickable-->
        <!--          v-model="circulation.zjddm"-->
        <!--          label="宅基地代码"-->
        <!--          placeholder="请选择"-->
        <!--          @click="remoteProposerMethod"-->
        <!--          input-align="right"-->
        <!--          right-icon="arrow-down" :rules="[{ required: true }]" required-->
        <!--        />-->
        <!--        <van-popup v-model="showzjddm" position="bottom">-->
        <!--          <van-picker-->
        <!--            show-toolbar-->
        <!--            :columns="zjdDictionaries"-->
        <!--            value-key="zjddm"-->
        <!--            @confirm="onConfirmZjddm"-->
        <!--            @cancel="showzjddm = false"-->
        <!--          />-->
        <!--        </van-popup>-->
        <van-field
          v-model="circulation.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="circulation.xb"
          label="性別"
          value-key="dictLabel"
          data-key="dictValue"
          placeholder="选择现状"
          :rules="[{ required: true }]"
          required
          remote-url="/open/zdzh/list/sys_user_sex"
          :on-remote-response="'data'"
        />

        <van-field v-model="circulation.sqrzjhm" label="申请人证件号码" placeholder="申请人证件号码" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
        <van-field v-model="circulation.lxdh" label="联系电话" placeholder="联系电话" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
        <field-select
          v-model="circulation.gyqk"
          label="共有情况"
          value-key="dictLabel"
          data-key="dictValue"
          placeholder="选择共有情况"
          :rules="[{ required: true }]"
          required
          remote-url="/open/zdzh/list/house_yes_no"
          :on-remote-response="'data'"
        />
        <van-field v-model="circulation.hkszd" label="户口所在地" placeholder="户口所在地" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
      </div>
      <p class="main_title">拟申请退出宅基地</p>
      <van-field v-model="circulation.tcmj" label="面积(㎡)" placeholder="请输入面积㎡" input-align="right" label-width="auto" :rules="[{ required: true }]" required type="number"/>
      <field-select
        v-model="circulation.xz"
        label="现状"
        value-key="dictLabel"
        data-key="dictValue"
        placeholder="选择现状"
        :rules="[{ required: true }]"
        required
        remote-url="/open/zdzh/list/dsxz"
        :on-remote-response="'data'"
      />
      <van-field v-model="circulation.zjdszd" label="东至" placeholder="东至" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
      <van-field v-model="circulation.zjdszn" label="南至" placeholder="南至" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
      <van-field v-model="circulation.zjdszx" label="西至" placeholder="西至" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
      <van-field v-model="circulation.zjdszb" label="北至" placeholder="北至" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
      <field-select
        v-model="circulation.dldm"
        label="地类"
        value-key="dictLabel"
        data-key="dictValue"
        placeholder="选择现状"
        :rules="[{ required: true }]"
        required
        remote-url="/open/zdzh/list/geographic_type"
        :on-remote-response="'data'"
      />
      <p class="main_title">退出宅基地情况</p>
      <van-field v-model="circulation.tcmj" label="退出面积(㎡)" placeholder="请输入退出面积㎡" input-align="right" label-width="auto" :rules="[{ required: true }]" required type="number"/>
      <van-field v-model="circulation.jzmj" label="建筑面积(㎡)" placeholder="请输入建筑面积㎡" input-align="right" label-width="auto" :rules="[{ required: true }]" required type="number"/>
      <div class="main_box">
        <van-field
          readonly
          clickable
          v-model="tcqllx"
          label="退出权利类型"
          placeholder="请选择退出权利类型"
          @click="showtcqllx = true"
          input-align="right"
          right-icon="arrow-down"
          label-width="auto" :rules="[{ required: true }]" required
        />
        <van-popup v-model="showtcqllx" position="bottom">
          <van-picker
            show-toolbar
            :columns="tcqllxDictionaries"
            @confirm="onConfirmTcqllx"
            @cancel="showtcqllx = false"
          />
        </van-popup>

        <!--<van-field
          readonly
          clickable
          v-model="tclx"
          label="退出类型"
          placeholder="请选择退出类型"
          @click="showtclx = true"
          input-align="right"
          right-icon="arrow-down"
          label-width="auto" :rules="[{ required: true }]" required
        />
        <van-popup v-model="showtclx" position="bottom">
          <van-picker
            show-toolbar
            :columns="tclxDictionaries"
            @confirm="onConfirmTclx"
            @cancel="showtclx = false"
          />
        </van-popup>-->

        <van-field
          readonly
          clickable
          v-model="tcfs"
          label="退出方式"
          placeholder="请选择退出方式"
          @click="showtcfs = true"
          input-align="right"
          right-icon="arrow-down"
          label-width="auto" :rules="[{ required: true }]" required
        />
        <van-popup v-model="showtcfs" position="bottom">
          <van-picker
            show-toolbar
            :columns="tcfsDictionaries"
            @confirm="onConfirmTcfs"
            @cancel="showtcfs = false"
          />
        </van-popup>

        <van-field v-model="circulation.tcqszsh" label="权属证书号" placeholder="请输入权属证书号" input-align="right" label-width="auto" />
      </div>
      <p class="main_title">现居住情况</p>
      <van-field v-model="circulation.xjzmj" label="建筑面积(㎡)" placeholder="请输入建筑面积㎡" input-align="right" label-width="auto" :rules="[{ required: true }]" required type="number"/>
      <van-field v-model="circulation.xqszsh" label="权属证书号" placeholder="请输入权属证书号" input-align="right" label-width="auto" />
      <van-field v-model="circulation.xjzdd" label="居住地点" placeholder="请输入居住地点" input-align="right" label-width="auto" />
      <p class="main_title">补偿信息</p>
      <van-field v-model="circulation.bcje" label="宅基地补偿" placeholder="宅基地补偿" input-align="right" label-width="auto"  type="number"/>
      <van-field v-model="circulation.dmfzwbc" label="地面附着物补偿" placeholder="地面附着物补偿" input-align="right" label-width="auto"  type="number"/>
      <field-select
        v-model="circulation.yctcfs"
        label="退出类型"
        value-key="dictLabel"
        data-key="dictValue"
        placeholder="选择退出类型"
        remote-url="/open/zdzh/list/yctcfs"
        :on-remote-response="'data'"
      />
      <field-select
        v-model="circulation.bcfs"
        label="补偿方式"
        value-key="dictLabel"
        data-key="dictValue"
        placeholder="选择退出类型"
        remote-url="/open/zdzh/list/bcfs"
        :on-remote-response="'data'"
      />
      <field-date-picker
        v-model="circulation.bcsj"
        label="补偿时间"
        placeholder="选择日期"
        formatter="yyyy-MM-dd"
      />
      <p class="main_title">其他</p>

      <van-field v-model="circulation.sqly" label="申请理由" placeholder="请输入申请理由" input-align="right" label-width="auto"/>
      <field-date-picker
        v-model="circulation.sqrq"
        label="申请日期"
        placeholder="选择日期"
        :rules="[{ required: true }]"
        formatter="yyyy-MM-dd"
        required
      />
      <van-field v-model="circulation.jbrxm" label="经办人姓名" placeholder="请输入经办人姓名" input-align="right" label-width="auto"/>
      <field-date-picker
        v-model="circulation.pzrq"
        label="批准日期"
        placeholder="选择日期"
        :rules="[{ required: true }]"
        formatter="yyyy-MM-dd"
        required
      />
      <field-date-picker
        v-model="circulation.barq"
        label="备案日期"
        placeholder="选择日期"
        :rules="[{ required: true }]"
        formatter="yyyy-MM-dd"
        required
      />

      <van-dialog v-model="mapShow" show-cancel-button>
        <MapGisObtainTc ref="zjdProductResh" :shqrxm="circulation.sqrxm" :landStatus="landStatus" :deptId="sysFarmer.deptId" @closeMoule="closeMoule"></MapGisObtainTc>
      </van-dialog>
      <!-- 3组附件 -->
      <van-popup
        v-model="attachmentVisible"
        closeable
        position="top"
        :style="{ height: '61.8%' }"
        :close-on-click-overlay="proposerStatus == 1"
        :lazy-render="false"
      >
        <van-tabs type="card" style="padding-top: 1.35rem;" color="#1D6FE9" :lazy-render="false" v-model="attachmentActive" ref="attachmentDialog">
          <van-tab title="退出附件" key="0">
            <home-apply-upload-comp
              :business-type="houseApplyUploadComp.businessType"
              :house-apply-status="houseApplyUploadComp.homeApplyStatus"
              :process-key="houseApplyUploadComp.processKey"
              :proposer-id="houseApplyUploadComp.proposerId"
              :table-name="houseApplyUploadComp.tableName"
              :readonly="houseApplyUploadComp.readonly"
              :userName="sysFarmer.memberName"
              :full="houseApplyUploadComp.full"
              @uploadFinished="onUploadFinished"
            >
            </home-apply-upload-comp>
          </van-tab>
        </van-tabs>
      </van-popup>
    </van-form>
    <van-goods-action style="z-index: 999;">
      <van-goods-action-icon icon="label-o" text="附件" @click="openAttachment" color="#1D6FE9" />
      <van-goods-action-button type="info" text="保存"  @click="goEdit" />
      <van-goods-action-button type="info" text="提交"  @click="goSubmit"/>
    </van-goods-action>
  </div>
</template>

<script>
  import {  getZyyctc,getShyqrs,zyyctcEdit,zyyctcApply,getByLyZjddm,listHomesteadnmfw} from "@/api/sunVillage_info/homestead/paidExit";
  import HomeApplyUploadComp from "@/components/home/HomeApplyUploadComp";
  import FieldSelect from "@/components/form/FieldSelect";
  import FieldDatePicker from "@/components/form/FieldDatePicker";
  import {formatDate} from "element-ui/src/utils/date-util.js";
  import { } from "@/api/onlineHome/homestead/paidExit";
  import {Notify} from "vant";
  import MapGisObtainTc from "@/components/Map/MapGisObtainTc";
  import Cookies from "js-cookie";
  const PROPOSER_VIEW = 1;
  // 工作流名称
  const PROPOSER_STAGE_BASE_APPLY_ACTIVITY = 'home_usetc';
  // 附件表名
  const PROPOSER_STAGE_BASE_APPLY_TABLE = 't_homeuse_zyyctc';
  // 其他
  const PROPOSER_MODULE = 'home';
  export default {
    name: "paidExitModify",
    components: { MapGisObtainTc,FieldSelect,FieldDatePicker,HomeApplyUploadComp },
    data() {
      return {
        tcqllxDictionaries:[],//退出权利类型
        tclxDictionaries:[],//退出类型
        tcfsDictionaries:[],//退出方式
        xbDictionaries:[],//申请人证件类型
        zjlxDictionaries:[],
        bcfsDictionaries:[],//补偿方式
        zjdDictionaries:[],//宅基地代码
        getObligeeOptions:[],//下拉框列表
        sysFarmer:JSON.parse(Cookies.get('user')),
        tcqllx:'',
        tclx:'',
        tcfs:'',
        xb:'',
        bcfs:'',
        zjddm:'',
        landStatus:"1",
        showtcqllx: false,
        showtclx: false,
        showtcfs: false,
        showxb: false,
        showbcfs: false,
        showzjddm: false,
        showDropList: false,//是否显示下拉框
        mapShow: false,
        attachmentVisible:false,
        active: 0,
        // 表单意图
        proposerStatus: PROPOSER_VIEW,
        circulation:{},
        // 当前附件tab
        attachmentActive: 0,
        // 申请附件树
        houseApplyUploadComp: {
          businessType: PROPOSER_MODULE,
          proposerId: this.$route.query.id,
          homeApplyStatus: "11",
          processKey: PROPOSER_STAGE_BASE_APPLY_ACTIVITY,
          tableName: PROPOSER_STAGE_BASE_APPLY_TABLE,
          attachmentList: [],
          readonly: false,
          full: false,
        },
      };
    },
    created() {
      this.getDictionaries();
    },
    methods: {
      getDictionaries(){
        getZyyctc(this.$route.query.id).then(response => {
          //退出权利类型
          this.houseGetDicts("tcqllx").then((res) => {
            for (var i = 0; i < res.data.length; i++) {
              this.tcqllxDictionaries.push({text: res.data[i].dictLabel, value: res.data[i].dictValue});
            }
            this.tcqllx = this.selectDictLabel(res.data, response.data.tcqllx);
          });
          //退出方式
          this.houseGetDicts("tcfs").then((res) => {
            for (var i = 0; i < res.data.length; i++) {
              this.tcfsDictionaries.push({text: res.data[i].dictLabel, value: res.data[i].dictValue});
            }
            this.tcfs = this.selectDictLabel(res.data, response.data.tcfs);
          });
          //申请人证件类型
          this.houseGetDicts("zjlx").then((res) => {
            for (var i = 0; i < res.data.length; i++) {
              this.zjlxDictionaries.push({text: res.data[i].dictLabel, value: res.data[i].dictValue});
            }
            this.zjlx = this.selectDictLabel(res.data, response.data.sqrzjlx);
          });

          this.circulation = response.data;
          console.info(this.circulation);
        });
      },
      onConfirmZjddm(data){
        console.log(data);
        this.showzjddm = false;
        if (data) {
          this.$set(this.circulation, 'zjddm', data.zjddm);
          this.$set(this.circulation, 'sqrzjhm', data.shyqrdbzjhm);
          this.$set(this.circulation, 'sqrzjlx', data.shyqrdbzjlx);
          if(data.shyqrdbzjlx)
          {
            let val = this.zjlxDictionaries.find((x) => x.value == data.shyqrdbzjlx);
            if(val)
              this.zjlx = val.text;
          }
        }
        // this.$forceUpdate();
      },
      onConfirmXb(data){
        this.xb = data.text;
        this.circulation.xb = data.value;
        this.showxb = false;
      },
      // 初次申请草稿的附件上传
      onUploadFinished(fileIdList) {
        this.$set(this.circulation, "fileList", fileIdList);
      },
      onConfirmTcqllx(data){
        this.tcqllx = data.text;
        this.circulation.tcqllx = data.value;
        this.showtcqllx = false;
      },
      /*onConfirmTclx(data){
        this.tclx = data.text;
        this.circulation.tclx = data.value;
        this.showtclx = false;
      },*/
      onConfirmTcfs(data){
        this.tcfs = data.text;
        this.circulation.tcfs = data.value;
        this.showtcfs = false;
      },
      onConfirmBcfs(data){
        this.bcfs = data.text;
        this.circulation.bcfs = data.value;
        this.showbcfs = false;
      },
      goEdit(){
        console.log(this.circulation);
        this.$refs._Form.validate().then(() => {
        zyyctcEdit(this.circulation).then(response => {
          if(response.code = 200){
            this.$toast.success('保存成功');
            this.$router.back(-1);
          }
        })
        }).catch((e) => {
          Notify({ type: 'danger', message: '请填写完整的表单项' });
        });
      },
      goSubmit(){
        this.$refs._Form.validate().then(() => {
          this.$set(this.circulation, 'updateBy', this.sysFarmer.memberName);
          zyyctcEdit(this.circulation).then(response => {
            zyyctcApply(this.$route.query.id).then(response => {
              if(response.code = 200){
                this.$toast.success('提交成功');
                setTimeout(function(){
                  this.$router.back(-1);
                },1000)
              }
            });
          });
        }).catch((e) => {
          Notify({ type: 'danger', message: '请填写完整的表单项' });
        });
      },
      remoteProposerMethod() {
        this.showzjddm = true;
        this.zjdDictionaries = [];
        if (this.circulation.sqrxm) {
          getShyqrs({shyqrdbxm:this.circulation.sqrxm}).then(response => {
            this.zjdDictionaries = response.data.map(item => {
              return {
                zjddm: item.zjddm,
                shyqrdbxm: item.shyqrdbxm,
                shyqrdbzjlx: item.shyqrdbzjlx,
                shyqrdbzjhm: item.shyqrdbzjhm
              }
            });
          });
        } else {
          this.zjdDictionaries = [];
        }
      },
      // 打开附件树
      openAttachment() {
        this.attachmentVisible = true;
        if(this.attachmentActive == this.active)
          this.$nextTick(() => {
            this.$refs.attachmentDialog.scrollTo(this.active);
          });
      },
      /** 模糊查询人员信息 */
      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,
                  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){
        console.info(val);
        this.$set(this.circulation, "sqrxm", val.sqrxm);
        this.$set(this.circulation, "deptId", val.deptId);
        this.$set(this.circulation, "deptName", val.deptId);
        this.$set(this.circulation, "sqrzjhm", val.sqrzjhm);
        this.$set(this.circulation, "sqrzjlx", val.sqrzjlx);
        this.$set(this.circulation, "gyqk", val.gyfs);
        this.$set(this.circulation, "xb", val.sqrxb);
        this.$set(this.circulation, "lxdh", val.sqrdh);
        this.$set(this.circulation, "hkszd", val.dz);
        this.getObligeeOptions=[];
        this.showDropList = false;
      },
      // 获取日期, yyyy-MM-dd
      getDate(d) {
        return formatDate(d ? d : new Date(), 'yyyy-MM-dd');
      },
      /** 查找地图中宅基地 */
      closeMoule: function (data) {
        this.circulation.zjddm = data;
        let _this = this;
        let handlerTime = this.getDate();
        this.$set(this.circulation, "sqrq", handlerTime);
        this.$set(this.circulation, "pzrq", handlerTime);
        this.$set(this.circulation, "barq", handlerTime);
        getByLyZjddm(data).then((response) => {
          this.$set(this.circulation, "ntcmj", response.data.zdmj);
          this.$set(this.circulation, "tcmj", response.data.zdmj);
          this.$set(this.circulation, "zjdszd", response.data.zdszd);
          this.$set(this.circulation, "zjdszn", response.data.zdszn);
          this.$set(this.circulation, "zjdszx", response.data.zdszx);
          this.$set(this.circulation, "zjdszb", response.data.zdszb);
          this.$set(this.circulation, "theGeomJson", response.data.theGeomJson);
          this.$set(this.circulation, "tcqszsh", response.data.zsh);
          listHomesteadnmfw({zjddm: data}).then((response) => {
            response.rows.map(function(item){
              _this.$set(_this.circulation, "jzmj", Number(_this.circulation.jzmj) + Number(item.jzmj));
              _this.$set(_this.circulation, "xjzmj", Number(_this.circulation.xjzmj) + Number(item.jzmj));
            });
          });
          // const baseImgUrl = this.$store.getters.baseRoutingUrl;
          if(response.rows[0].zdt != null && response.rows[0].zdt !== ""){
            this.$set(this.form, "xzzp", response.rows[0].zdt);
          }
        });
      },
      mapLook(){
        this.mapShow = true;
        setTimeout(() => {
          this.$refs.zjdProductResh.drawingLyPaceCountryDarw();
        },1000);
      },
    },

  }
</script>

<style scoped lang="scss">
  .app-container {
    padding-bottom: 2%;
    .header_main{
      height: 116px;
      background: url('../../../assets/images/sunVillage_info/list_head_green.png') no-repeat;
      background-size: 100% 100%;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      font-size: 36px;
      line-height: 116px;
      text-align: center;
      color: #fff;
      position: relative;
      margin-bottom: 2%;
      .return_btn{
        width: 24px;
        height: 43.2px;
        background: url('../../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat;
        background-size: 20px 36px;
        position: absolute;
        left: 38px;
        top: 36px;
      }
      .add_btn{
        width: 56.4px;
        height: 40.8px;
        background: url('../../../assets/images/sunVillage_info/list_icon_9.png') center center no-repeat;
        background-size: 47px 34px;
        position: absolute;
        right: 38px;
        top: 36px;
      }
    }
  }
  .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>