nsgk_mobile/src/views/homesteadSurvey/nhcyList.vue

<template>
  <div class="app-container">
    <van-sticky style="position:relative;">
      <div class="bannerBg">
        <van-nav-bar
          style="background:transparent;border-bottom-width:0;margin-bottom:.5rem;"
          @click-left="goBack()"
        >
          <template #left>
            <van-icon name="arrow-left" size="18" color="#fff" />
          </template>
          <!-- <template #right>
          <van-icon name="map-marked" size="18" color="#fff" />
        </template>-->
          <template #title>
            <p style="color:#fff">入户调查</p>
          </template>
        </van-nav-bar>
      </div>
      <div style="width:95%;left:2.5%;position:absolute;background:#fff;border-radius:15px;box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.16);padding: .3rem;top:1.2rem">
        <van-row>
          <van-col span="4" :offset="1" style="text-align:center;" @click="$router.push({path:'/homesteadSurvey/add'})">
            <van-icon :name="require('../../assets/images/housesteadSurvey/zjd'+(active==1?'A':'D')+'.png')" size="1rem" style="margin-top:0px;"/>
            <p :style="{color:(active==1?'rgb(34, 183, 242)':'#000')}">宅基地</p>
          </van-col>
          <van-col span="2">
            <div style="border-top: 2px dashed #b5b4b4;margin-top: 20px;"></div>
          </van-col>
          <van-col span="4"  style="text-align:center;" @click="$router.push({path:'/homesteadSurvey/add2'})" >
            <van-icon :name="require('../../assets/images/housesteadSurvey/nhxx'+(active==2?'A':'D')+'.png')" size="1rem" style="margin-top:0px;"/>
            <p :style="{color:(active==2?'rgb(34, 183, 242)':'#000')}">农户</p>
          </van-col>
          <van-col span="2">
            <div style="border-top: 2px dashed #b5b4b4;margin-top: 20px;"></div>
          </van-col>
          <van-col span="4" style="text-align:center;" @click="$router.push({path:'/homesteadSurvey/add3'})" >
            <van-icon :name="require('../../assets/images/housesteadSurvey/fwxx'+(active==3?'A':'D')+'.png')" size="1rem" style="margin-top:0px;"/>
            <p  :style="{color:(active==3?'rgb(34, 183, 242)':'#000')}">房屋</p>
          </van-col>
          <van-col span="2">
            <div style="border-top: 2px dashed #b5b4b4;margin-top: 20px;"></div>
          </van-col>
          <van-col span="4" style="text-align:center;" @click="$router.push({path:'/homesteadSurvey/add4'})">
            <van-icon :name="require('../../assets/images/housesteadSurvey/fsss'+(active==4?'A':'D')+'.png')" size="1rem" style="margin-top:0px;"/>
            <p :style="{color:(active==4?'rgb(34, 183, 242)':'#000')}">附属物</p>
          </van-col>
        </van-row>
      </div>
    </van-sticky>
    <div style="margin:1.6rem auto 0;width: 95%;">
      <p class="title" style="position:relative;padding-left:10px;line-height:20px;font-size: 16px;margin-bottom: 5px;">户内成员</p>
    </div>
    <van-swipe-cell v-for="(item,index) in hnnylist" :key="'syqr'+index" style="border-radius: 16px;box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.16); width:95%;margin:15px auto 0;background:#fff;">
      <div style="padding:15px;">
        <div style="display: flex;align-items: center;">
          <p style="flex:1;line-height: 1;font-size: 16px;"><img src="../../assets/images/housesteadSurvey/list03.png" alt="" style="margin-right: 5px;">{{item.xm}}</p>
          <p style="flex:1;line-height: 1;font-size: 16px; text-align:right;">{{formatDict(yhzgxList,item.yhzgx)}}</p>
        </div>
        <div style="display:flex;line-height:20px;margin-top: 15px;font-size: 14px;color: #999999;">
          <p style="flex:1;text-align:left;">证件号码:</p>
          <p style="flex:1;text-align:right;">{{item.zjhm}}</p>
        </div>
        <div style="display:flex;line-height:20px;margin-top: 5px;font-size: 14px;color: #999999;">
          <p style="flex:1;text-align:left;">农户代码:</p>
          <p style="flex:1;text-align:right;">{{item.nhdm}}</p>
        </div>
        <div style="text-align:center;overflow:auto;display: flex;justify-content: space-between;margin-top: 10px;">
          <p style="width:25%;display: flex;align-items: center;justify-content:center;border: 1px solid #22B7F2;padding: 3px 0;border-radius: 50px;" @click="showPopuphncy(item)">
            <img src="../../assets/images/housesteadSurvey/add02.png" alt="">
            <span style="font-size: 14px;color: #22B7F2;margin-left: 5px;">详情</span>
          </p>
          <p v-if="item.yhzgx != '02' && permission == 'true'" style="width:25%;display: flex;align-items: center;justify-content:center;border: 1px solid #22B7F2;padding: 3px 0;border-radius: 50px;" @click="handleFenHu(item)">
            <img src="../../assets/images/housesteadSurvey/list09.png" alt="">
            <span style="font-size: 14px;color: #22B7F2;margin-left: 5px;">分户</span>
          </p>
          <p v-if="item.yhzgx != '02' && permission == 'true'" style="width:25%;display: flex;align-items: center;justify-content:center;border: 1px solid #22B7F2;padding: 3px 0;border-radius: 50px;" @click="handleGuohu(item)">
            <img src="../../assets/images/housesteadSurvey/add03.png" alt="">
            <span style="font-size: 14px;color: #22B7F2;margin-left: 5px;">移户</span>
          </p>
          <p v-if="item.yhzgx != '02' && permission == 'true'" style="width:25%;display: flex;align-items: center;justify-content:center;border: 1px solid #22B7F2;padding: 3px 0;border-radius: 50px;" @click="handleToHuzhu(item)">
            <img src="../../assets/images/housesteadSurvey/list03.png" alt="">
            <span style="font-size: 14px;color: #22B7F2;margin-left: 5px;">设为户主</span>
          </p>
        </div>
      </div>
      <template #right>
        <van-button v-if="permission == 'true' && item.yhzgx != '02'"  square text="删除" type="danger" class="delete-button" @click="deletehncy(item.id,index)"><img width="10px" src="../../assets/images/sunVillage_info/list_icon_7.png" alt="">删除</van-button>
      </template>
    </van-swipe-cell>
    <van-dialog v-model="guohuData.visible" title="成员移户" show-cancel-button  confirmButtonText="确认" cancelButtonText="关闭" @confirm="guohu"  @cancel="show=false">
      <van-form ref="guohu_form" style="height: 200px;"  label-width="180px">
        <field-select
          v-model="guohuData.to"
          label="指定新户主"
          value-key="xm"
          data-key="nhdm"
          placeholder="请选择农户代码"
          :columns = "guohuData.huzhuList"
          :on-remote-response="'data'"
          @confirm="onGuohuChanged"
          :rules="[{ required: true }]"
          required
        />
      </van-form>
    </van-dialog>
    <div v-if="permission == 'true'"  style=" width:95%;margin:20px auto;display: flex;justify-content: space-between;">
      <div style="width:100%;text-align:center;overflow:auto;border-radius: 16px;box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.16);padding: 15px 0px;background: #ffffff;color: #22B7F2;">
        <p style="font-size: 16px;" @click="showPopupcy()">+ 添加成员信息</p>
      </div>
    </div>
  </div>
</template>

<script>
import {listZjdzd,getZjdzd,updateZjdzd,addZjdzd,uploadFile,getQueryLand,submitOnly} from "@/api/homesteadSurvey/zjdzd";
import MapGisDrawing from "@/components/Map/MapGisDrawing";
import {listZrz,addZrz,updateZrz,getZrzZjdDmList,delZrz,updateZrzStatus} from "@/api/homesteadSurvey/zrz";
import {listNmfw,addNmfw,updateNmfw,delNmfw} from "@/api/homesteadSurvey/nmfw";
import {listSuyqr,addSuyqr,updateSuyqr} from "@/api/homesteadSurvey/suyqr";
import {listNhhncy,addNhhncy,updateNhhncy,delNhhncy,toHuzhu,fenhu,guohu} from "@/api/homesteadSurvey/nhhncy";
import {addNh, delNh, exportNh, getNh, listNh, updateNh,setNhInfo} from "@/api/homesteadSurvey/nh";
import {listFsss,addFsss,updateFsss,delFsss,getFsssZjdDmList,updateFsssStatus} from "@/api/homesteadSurvey/fsss";
import { listTown, getTown } from "@/api/homesteadSurvey/town";
import { listVillage} from "@/api/homesteadSurvey/village";
import { sysConfig} from "@/api/homesteadSurvey/index";
import FieldSelect from "@/components/form/FieldSelect";
import { Notify, Dialog, Toast } from 'vant';
import axios from "axios";
export default {
  name: "nhcyList",
  components: { MapGisDrawing,FieldSelect},
  data() {
    return {
      active:2,
      // 使用权人列表
      shyqrData:{},
      hnnylist:[],
      yhzgxList:[],
      permission:false,
      guohuData: {
        visible: false,
        huzhuList: [],
        id: null,
        to: null,
      },
    };
  },
  created(){
    this.houseGetDicts("family_status").then((response) => {
      this.yhzgxList = response.data;
    });
    this.shyqrData = this.$route.query;
    this.permission = localStorage.getItem("executePermission");
    this.getList();
  },
  mounted(){

  },
  methods: {
    getList(){
      listNhhncy({nhdm:this.shyqrData.nhdm }).then(response => {
        this.hnnylist = response.rows;
      });
    },
    goBack(){
      if(this.ztMap && this.enterMap ==1){
        if(this.form.id == null){
          this.backMap.backMapZjdAData.theGeom= "";
        }else{
          this.backMap.backMapZjdAData = this.form;
        }
        this.$cookies.set("search",this.backMap);
      } else {
        this.$cookies.set("search","");
      }
      this.$router.push({name: this.$router.back(-1)});
      // }
    },
    formatDict(dict, value) {
      return this.selectDictLabel(dict, value);
    },
    handleToHuzhu(row) {
      const ids = row.id || this.ids;
      Dialog.confirm({
        title: '系统提示',
        message: '是否确认将此成员设为本户新的户主?',
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(function() {
        return toHuzhu(ids);
      }).then(() => {
        this.$notify({ type: 'success' , message: "设为户主成功" });
        location.reload(true);
      }).catch(() => {});
    },
    handleFenHu(row) {
      const ids = row.id || this.ids;
      Dialog.confirm({
        title: '系统提示',
        message: '是否确认将此成员新立一户并设为户主?',
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(function() {
        return fenhu(ids);
      }).then(() => {
        this.$notify({ type: 'success' , message: "分户成功" });
        location.reload(true);
      }).catch(() => {});
    },
    handleGuohu(row) {
      const id = row.id || this.ids
      listNhhncy({
        deptId: this.$store.state.user.loginDeptId,
        yhzgx: '02',
      }).then(response => {
        this.guohuData.id = id;
        this.guohuData.visible = true;
        this.guohuData.huzhuList = response.rows.filter((x) => x.nhdm != row.nhdm);
        this.guohuData.huzhuList.map(function(item){
          item.xm = item.xm+item.nhdm;
        })
      });
    },
    onGuohuChanged(val){
      this.$set(this.guohuData, 'to',val);
    },
    guohu() {
      this.$refs["guohu_form"].validate(valid => {
        if (valid) {
          guohu(this.guohuData.id, this.guohuData.to).then(response => {
            if(response.code != 200) throw response.msg;
            this.$notify({ type: 'success' , message: "移户成功" });
            this.closeGuohu();
            location.reload(true);
          }).catch(() => {});
        }
      });
    },
    closeGuohu() {
      this.guohuData.visible = false;
      this.guohuData.id = this.guohuData.to = null;
      this.guohuData.huzhuList = [];
    },
    showPopupsyqr(val){
      this.$router.push({name:'shyqrAdd',query:val});
    },
    showPopupcy(){
      this.$router.push({name:'nhcyAdd',query:{nhdm:this.shyqrData.nhdm,suyqrdm:this.shyqrData.suyqrdm,yhzgxOperate:"false"}});
    },
    showPopuphncy(val){
      this.$router.push({name:'nhcyAdd',query:val});
    },
    // 删除户内成员
    deletehncy(id,index){
      Dialog.confirm({
        title: '警告',
        message: '确认删除户内成员么？',
      })
        .then(() => {
          // on confirm
          delNhhncy(id).then(res => {
            if(res.code=="200"){
              this.hnnylist.splice(index,1);
            }
          })
        })
        .catch(() => {
          // on cancel
        });
    },
  }
}
</script>

<style scoped>
>>> .bannerBg{
  width: 100%;
  color:#fff;
  padding:10px;
  background: linear-gradient(134deg,#7ac943 1%, #22b7f2);
}
>>> .van-hairline--bottom::after {
  border-bottom-width: 0;
}
>>> .title:before
{
  content:"";
  width: 6px;
  height: 20PX;
  background: #7ac943;
  border-radius: 3px;
  position:absolute;
  left:0;
  bottom:0;
}
>>> .delete-button {
  height: 100%;
}
>>> .van-swipe-cell__wrapper{
  margin-right:-3px;
}
>>> .label-class .van-collapse-item__title--expanded{
  font-weight: bold;
}
</style>