123 lines
		
	
	
		
			4.1 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
			
		
		
	
	
			123 lines
		
	
	
		
			4.1 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
<template>
 | 
						|
  <ai-detail class="activitiesAdd">
 | 
						|
    <template slot="title">
 | 
						|
      <ai-title title="居民信息详情" isShowBack isShowBottomBorder @onBackClick="cancel(false)"></ai-title>
 | 
						|
    </template>
 | 
						|
    <template slot="content">
 | 
						|
      <ai-card title="基本信息">
 | 
						|
        <ai-wrapper class="fill" slot="content">
 | 
						|
          <ai-info-item label="姓名" isLine :value="baseInfo.name"/>
 | 
						|
          <ai-info-item label="照片">
 | 
						|
            <ai-avatar v-model="baseInfo.photo" :editable="false"/>
 | 
						|
          </ai-info-item>
 | 
						|
          <ai-info-item label="性别" :value="dict.getLabel('sex', baseInfo.sex)"/>
 | 
						|
          <ai-info-item label="身份证号" :value="baseInfo.idNumber">
 | 
						|
            <!-- <ai-id mode="show" v-model="baseInfo.idNumber" right-btn class="line-center"/> -->
 | 
						|
          </ai-info-item>
 | 
						|
          <ai-info-item label="出生日期" :value="baseInfo.birthday"/>
 | 
						|
          <ai-info-item label="年龄" :value="baseInfo.age"/>
 | 
						|
          <ai-info-item label="籍贯" :value="baseInfo.birthplaceAreaName"/>
 | 
						|
          <ai-info-item label="民族" :value="dict.getLabel('nation', baseInfo.nation)"/>
 | 
						|
          <ai-info-item label="文化程度" :value="dict.getLabel('education', baseInfo.education)"/>
 | 
						|
          <ai-info-item label="婚姻状况" :value="dict.getLabel('maritalStatus', baseInfo.maritalStatus)"/>
 | 
						|
          <ai-info-item label="政治面貌" :value="dict.getLabel('politicsStatus', baseInfo.politicsStatus)"/>
 | 
						|
          <ai-info-item label="兵役状况" :value="dict.getLabel('militaryStatus', baseInfo.militaryStatus)"/>
 | 
						|
          <ai-info-item label="宗教信仰" :value="dict.getLabel('faithType', baseInfo.faithType)"/>
 | 
						|
          <ai-info-item label="职业" :value="dict.getLabel('job', baseInfo.job)"/>
 | 
						|
        </ai-wrapper>
 | 
						|
      </ai-card>
 | 
						|
      <ai-card title="联络信息" type="flex">
 | 
						|
        <ai-wrapper slot="content">
 | 
						|
          <ai-info-item label="联系方式" :value="baseInfo.phone"/>
 | 
						|
          <ai-info-item label="现住址" isLine :value="[baseInfo.currentAreaName, baseInfo.currentAddress].join('')"/>
 | 
						|
          <ai-info-item label="所属网格" :value="baseInfo.girdName"/>
 | 
						|
        </ai-wrapper>
 | 
						|
      </ai-card>
 | 
						|
      <ai-card title="户籍信息">
 | 
						|
        <ai-wrapper slot="content">
 | 
						|
          <ai-info-item label="是否户主" :value="dict.getLabel('householdName', baseInfo.isHousehold)"/>
 | 
						|
          <template v-if="baseInfo.isHousehold == 0">
 | 
						|
            <ai-info-item label="与户主关系" :value="dict.getLabel('householdRelation', baseInfo.householdRelation)"/>
 | 
						|
            <ai-info-item label="户主身份证号" :value="baseInfo.householdIdNumber"/>
 | 
						|
          </template>
 | 
						|
          <ai-info-item label="户籍地" isLine :value="[baseInfo.householdAreaName, baseInfo.householdAddress].join('')"></ai-info-item>
 | 
						|
        </ai-wrapper>
 | 
						|
      </ai-card>
 | 
						|
    </template>
 | 
						|
  </ai-detail>
 | 
						|
</template>
 | 
						|
 | 
						|
<script>
 | 
						|
  import { ID } from 'dui/lib/js/utils'
 | 
						|
  export default {
 | 
						|
    props: {
 | 
						|
      instance: Function,
 | 
						|
      dict: Object,
 | 
						|
      params: Object,
 | 
						|
    },
 | 
						|
 | 
						|
    data () {
 | 
						|
      return {
 | 
						|
        baseInfo: {},
 | 
						|
        id: ''
 | 
						|
      }
 | 
						|
    },
 | 
						|
 | 
						|
    created () {
 | 
						|
      this.id = this.params.id
 | 
						|
 | 
						|
      this.getDetail()
 | 
						|
    },
 | 
						|
 | 
						|
    methods: {
 | 
						|
      cancel (isRefresh) {
 | 
						|
        this.$emit('change', {
 | 
						|
          type: 'List',
 | 
						|
          isRefresh: !!isRefresh
 | 
						|
        })
 | 
						|
      },
 | 
						|
 | 
						|
      IdCard (UUserCard) {
 | 
						|
        if (UUserCard) {
 | 
						|
          const idCard = new ID(UUserCard)
 | 
						|
          this.baseInfo.age = idCard.age
 | 
						|
          this.baseInfo.sex = idCard.sex
 | 
						|
          this.baseInfo.birthday = idCard.birthday
 | 
						|
        }
 | 
						|
      },
 | 
						|
 | 
						|
      getDetail() {
 | 
						|
        this.instance.post(`/app/appresidentapplet/queryDetailById?id=${this.params.id}`).then(res => {
 | 
						|
          if (res.data) {
 | 
						|
            this.baseInfo = {
 | 
						|
              ...res.data
 | 
						|
            }
 | 
						|
            this.IdCard(res.data.idNumber)
 | 
						|
          }
 | 
						|
        })
 | 
						|
      }
 | 
						|
    }
 | 
						|
  }
 | 
						|
</script>
 | 
						|
 | 
						|
<style lang="scss" scope>
 | 
						|
  .activitiesAdd {
 | 
						|
    height: 100%;
 | 
						|
 | 
						|
    :deep( .amap-logo ){
 | 
						|
      display: none!important;
 | 
						|
    }
 | 
						|
    :deep( .amap-copyright ){
 | 
						|
      display: none!important;
 | 
						|
    }
 | 
						|
 | 
						|
    :deep( .el-date-editor .el-input ){
 | 
						|
      width: 100%;
 | 
						|
    }
 | 
						|
 | 
						|
    .amap-container {
 | 
						|
      height: 380px;
 | 
						|
    }
 | 
						|
  }
 | 
						|
</style>
 |