nsgk_mobile/src/views/sunVillage_info/familyMember/familyMemberDetail.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>

      <div class="main_box">
        <!--        <van-field v-model="circulation.sqrxm" label="申请人姓名" placeholder="申请人姓名" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>-->
        <van-field  readonly v-model="circulation.memberName" label="姓名" placeholder="姓名" input-align="right" label-width="auto" />
        <!--        <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>-->
        <field-select
          readonly
          v-model="circulation.sex"
          label="性別"
          value-key="dictLabel"
          data-key="dictValue"
          placeholder="选择现状"
          remote-url="/system/dict/data/type/sys_user_sex"
          :on-remote-response="'data'"
        />
        <van-field readonly v-model="circulation.age" label="年龄" placeholder="年龄" input-align="right" label-width="auto" />
        <van-field readonly v-model="circulation.idcard" label="证件号码" placeholder="证件号码" input-align="right" label-width="auto" />
        <van-field readonly v-model="circulation.phone" label="联系电话" placeholder="联系电话" input-align="right" label-width="auto"/>
        <van-field readonly v-model="circulation.householdRegister" label="户籍" placeholder="户籍" input-align="right" label-width="auto"/>
        <field-select
          readonly
          v-model="circulation.nationality"
          label="民族"
          value-key="dictLabel"
          data-key="dictValue"
          placeholder="选择现状"
          remote-url="/system/dict/data/type/nationality"
          :on-remote-response="'data'"
        />
        <field-select
          readonly
          v-model="circulation.politicCountenance"
          label="政治面貌"
          value-key="dictLabel"
          data-key="dictValue"
          placeholder="选择政治面貌"
          remote-url="/system/dict/data/type/politic_countenance"
          :on-remote-response="'data'"
        />
        <field-select
          readonly
          v-model="circulation.education"
          label="学历"
          value-key="dictLabel"
          data-key="dictValue"
          placeholder="选择学历"
          remote-url="/system/dict/data/type/education"
          :on-remote-response="'data'"
        />
        <field-select
          readonly
          v-model="circulation.accountType"
          label="户口类型"
          value-key="dictLabel"
          data-key="dictValue"
          placeholder="选择户口类型"
          remote-url="/system/dict/data/type/account_type"
          :on-remote-response="'data'"
        />
        <van-field name="radio" label="是否贫困户" input-align="right" autocomplete="off">
          <template #input>
            <van-radio-group v-model="circulation.sfpkh" direction="horizontal">
              <van-radio name="1">是</van-radio>
              <van-radio name="0">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field name="radio" label="是否五保户" input-align="right" autocomplete="off">
          <template #input>
            <van-radio-group v-model="circulation.sfwbh" direction="horizontal">
              <van-radio name="1">是</van-radio>
              <van-radio name="0">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <field-select
          readonly
          v-model="circulation.isCooperative"
          label="社员"
          value-key="dictLabel"
          data-key="dictValue"
          placeholder="社员"
          remote-url="/system/dict/data/type/sys_yes_no"
          :on-remote-response="'data'"
        />
        <field-select
          readonly
          v-model="circulation.isMember"
          label="股民"
          value-key="dictLabel"
          data-key="dictValue"
          placeholder="股民"
          remote-url="/system/dict/data/type/house_yes_no"
          :on-remote-response="'data'"
        />
      </div>
      <!-- 审批 -->
      <div style="padding: 16px 0;">
        <van-row>
          <van-row>
            <van-col span="24" align="center">
              <van-button type="info" native-type="submit" class="submitButton" @click="goBack">返<i style="margin-right: 1em;"></i>回</van-button>
            </van-col>
          </van-row>
        </van-row>
        <div class="clear"></div>
      </div>
    </div>
</template>

<script>
  import { getFamilyMember} from "@/api/sunVillage_info/homestead/familyMember";
  import FieldSelect from "@/components/form/FieldSelect";
  import FieldDatePicker from "@/components/form/FieldDatePicker";
  import {formatDate} from "element-ui/src/utils/date-util.js";
  import {Notify} from "vant";
import request from '@/utils/request';
  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: "familyMemberDetail",
  components: {FieldSelect,FieldDatePicker },
  data() {
    return {
      tcqllxDictionaries:[],//退出权利类型
      tclxDictionaries:[],//退出类型
      tcfsDictionaries:[],//退出方式
      xbDictionaries:[],//申请人证件类型
      zjlxDictionaries:[],
      bcfsDictionaries:[],//补偿方式
      zjdDictionaries:[],//宅基地代码
      getObligeeOptions:[],//下拉框列表
      tcqllx:'',
      tclx:'',
      tcfs:'',
      xb:'',
      bcfs:'',
      zjddm:'',
      landStatus:"1",
      nickName:this.$route.query.nickName,
      electronicSignature:this.$route.query.electronicSignature,
      showtcqllx: false,
      showtclx: false,
      showtcfs: false,
      showxb: false,
      showbcfs: false,
      showzjddm: false,
      showZjsp: false,
      showCjt:false,
      cjtspOperation:false,
      showDropList: false,//是否显示下拉框
      mapShow: false,
      attachmentVisible:false,
      // 家庭成员tab
      familyMembersActive: 0,
      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: true,
        full: false,
      },
      approval: {
        taskId: null,
        instanceId: null,
        type: null,
        id: null,
        comment: '',
      },
    };
  },
  created() {
    this.approval.id = this.$route.query.id;
    this.approval.instanceId = this.$route.query.instanceId;
    this.approval.type = this.$route.query.type;
    this.approval.taskId = this.$route.query.taskId;
    this.getDetail();
  },
  methods: {
    // 获取日期, yyyy-MM-dd
    getDate(d) {
      return formatDate(d ? d : new Date(), 'yyyy-MM-dd');
    },
    getDetail(){
      getFamilyMember(this.$route.query.id).then(response => {
        this.circulation = response.data;
        let res = this.parseIDCard( response.data.idcard);
        if(res)
        {
          this.$set(this.circulation, 'age', res[1]);
        }
        //退出权利类型
        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("audit_status").then((res) => {
          this.circulation.auditStatus = this.selectDictLabel(res.data, response.data.auditStatus);
        });
      });
    },
    parseIDCard(idcard) {
      if(!idcard)
        return false;
      if(idcard.length !== 18)
        return false;
      if(!/^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(idcard))
        return false;
      let sex = (parseInt(idcard.substr(16, 1)) % 2) ^ 1;
      let now = new Date().getFullYear();
      let y = parseInt(idcard.substr(6, 4));
      let age = Math.max(now - y, 0);
      return [sex, age];
    },
    updateMemberInfo(index) {
      let res = this.parseIDCard(this.circulation.jtcyqkList[index].sfzh);
      if(res)
      {
        this.$set(this.circulation.jtcyqkList[index], 'nl', res[1]);
      }
    },
    updateMemberInfoGy(index) {
      let res = this.parseIDCard(this.circulation.gyrqkList[index].sfzh);
      if(res)
      {
        this.$set(this.circulation.gyrqkList[index], 'nl', res[1]);
      }
    },
    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 = [];
      }
    },
    /** 模糊查询人员信息 */
    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;
    },
    /** 查找地图中宅基地 */
    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);
    },
    // 打开附件树
    openAttachment() {
      this.attachmentVisible = true;
      if(this.attachmentActive == this.active)
        this.$nextTick(() => {
          this.$refs.attachmentDialog.scrollTo(this.active);
        });
    },
    //返回上一步操作
    goBack(){
      this.$router.push({name: this.$router.back(-1)});
    },
    complete(pass) {
      if(this.circulation.auditStatus === "1" || this.circulation.auditStatus === "2"){
        this.approval.comment = this.circulation.cjzzscyj;
      }else{
        this.approval.comment = this.circulation.xzzfshpzyj;
      }
      if(!this.approval.taskId || !this.approval.instanceId || this.approval.type !== 'todo')
      {
        console.error("无效操作");
        return false;
      }
      if(!this.approval.comment)
      {
        this.notify("请填写审批意见", 'danger');
        return false;
      }
      /*let data = {
        taskId: this.approval.taskId,
        instanceId: this.approval.instanceId,
        variables: JSON.stringify({
          pass: pass ? "true" : "false",
          comment: this.approval.comment ? this.approval.comment : (pass ? '同意' : '驳回'),
        }),
      };
      request({
        url: "/activiti/process/complete",
        method: "post",
        params: data,
      }).then((response) => {
        this.notify("操作成功", 'success');
        this.$router.back();
      }).catch(e => {
        this.notify("操作失败!", 'danger');
      });*/
      if (pass) {
        let data = {
          taskId: this.approval.taskId,
          instanceId: this.approval.instanceId,
          variables: JSON.stringify({
            pass: "true",
            comment: this.approval.comment ? this.approval.comment : "同意",
          }),
        };
        zyyctcEdit(this.circulation).then(response => {
          request({
            url: "/activiti/process/complete",
            method: "post",
            params: data,
          }).then((response) => {
            this.notify("操作成功", 'success');
            this.$router.back();
          }).catch(e => {
            this.notify("操作失败!", 'danger');
          });
        });

      } else {
        let _this = this;
        _this.$dialog.confirm({
          message: '是否确认驳回此条申请',
        }).then(() => {
          let data = {
            taskId: _this.approval.taskId,
            instanceId: _this.approval.instanceId,
            variables: JSON.stringify({
              pass: "false",
              comment: _this.approval.comment ? _this.approval.comment : "驳回",
            }),
          };
          zyyctcEdit(this.circulation).then(response => {
            request({
              url: "/activiti/process/complete",
              method: "post",
              params: data,
            }).then((response) => {
              _this.notify("操作成功", 'success');
              _this.$router.back();
            }).catch(e => {
              _this.notify("操作失败!", 'danger');
            });
          });
        });
      }
      return true;
    },
    notify(message, type) {
      Notify.clear();
      Notify({ type: type || 'primary', message: message });
    },
  },
}
</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;

  }
  .clear{
    height: 80px;
  }
  .examine_box{
    background-color: #1D6FE9!important;
    padding: 0.18rem!important;
    padding-left: 0!important;
    border-radius: 0.15rem!important;
    margin-top: 0.3rem!important;
    .van-col:first-child{
      color: #FFF!important;
      font-size: 0.45rem!important;
      text-align: center!important;
    }
    .van-col:last-child{
      background-color: #FFF!important;
      border-radius: 0.15rem!important;
      overflow: hidden!important;
      .van-radio-group--horizontal{
        padding: 0.2rem 0;
        border-bottom: 1px solid #eee;
      }
    }
  }
</style>