603 lines
		
	
	
		
			25 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
			
		
		
	
	
			603 lines
		
	
	
		
			25 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
<template>
 | 
						|
  <ai-detail class="residentDetail">
 | 
						|
    <ai-title slot="title" :title="pageTitle" isShowBack @onBackClick="back" isShowBottomBorder>
 | 
						|
      <template v-if="params.type === 'Detail'" #rightBtn>
 | 
						|
        <el-button icon="iconfont iconDelete" @click="handleDelete()">
 | 
						|
          删除人员
 | 
						|
        </el-button>
 | 
						|
      </template>
 | 
						|
    </ai-title>
 | 
						|
    <template #content>
 | 
						|
      <el-form class="content-right" :model="baseInfo" ref="ruleForm" :rules="rules" label-width="130px"
 | 
						|
                label-position="right" size="small">
 | 
						|
        <template v-if="params.type === 'Detail'">
 | 
						|
            <ai-edit-card slot="" :title="baseInfo.name||'基本信息'" :show-btn="permissions('app_appresident_edit')"
 | 
						|
                          @save="saveFrom" @cancel="getDetail(baseInfo.id)">
 | 
						|
              <template #edit>
 | 
						|
                <el-row type="flex">
 | 
						|
                  <div class="fill">
 | 
						|
                    <el-form-item label="姓名:" prop="name">
 | 
						|
                      <el-input
 | 
						|
                          v-model="baseInfo.name"
 | 
						|
                          autocomplete="off"
 | 
						|
                          placeholder="请输入姓名"
 | 
						|
                          maxlength="20"
 | 
						|
                          :disabled="isEdit"
 | 
						|
                          show-word-limit/>
 | 
						|
                    </el-form-item>
 | 
						|
                    <el-form-item label="身份证号:" prop="idNumber">
 | 
						|
                      <el-input v-model="baseInfo.idNumber" placeholder="请输入身份证号" :maxlength="18" show-word-limit
 | 
						|
                                @change="idChange" :disabled="isEdit"/>
 | 
						|
                    </el-form-item>
 | 
						|
                    <el-form-item label="性别:" prop="sex">
 | 
						|
                      <ai-select v-model="baseInfo.sex" :selectList="dict.getDict('sex')" :disabled="isEdit"/>
 | 
						|
                    </el-form-item>
 | 
						|
                  </div>
 | 
						|
                  <el-form-item label="个人照片:" prop="photo" class="fill">
 | 
						|
                    <ai-avatar :instance="instance" v-model="baseInfo.photo"/>
 | 
						|
                  </el-form-item>
 | 
						|
                </el-row>
 | 
						|
                <el-row type="flex">
 | 
						|
                  <div class="fill">
 | 
						|
                    <el-form-item label="出生日期:">
 | 
						|
                      <el-date-picker
 | 
						|
                          disabled
 | 
						|
                          :editable="false"
 | 
						|
                          value-format="yyyy-MM-dd HH:mm:ss"
 | 
						|
                          format="yyyy-MM-dd"
 | 
						|
                          v-model="baseInfo.birthday"
 | 
						|
                          type="date"
 | 
						|
                          placeholder="选择日期"
 | 
						|
                      />
 | 
						|
                    </el-form-item>
 | 
						|
                    <el-form-item label="文化程度:" prop="education">
 | 
						|
                      <ai-select v-model="baseInfo.education" :selectList="dict.getDict('education')"/>
 | 
						|
                    </el-form-item>
 | 
						|
                    <el-form-item label="政治面貌:" prop="politicsStatus">
 | 
						|
                      <ai-select v-model="baseInfo.politicsStatus" :selectList="dict.getDict('politicsStatus')"/>
 | 
						|
                    </el-form-item>
 | 
						|
                    <el-form-item label="职业:" prop="job">
 | 
						|
                      <ai-select v-model="baseInfo.job" :selectList="dict.getDict('job')"/>
 | 
						|
                    </el-form-item>
 | 
						|
                    <el-form-item label="宗教信仰:" prop="faithType">
 | 
						|
                      <ai-select v-model="baseInfo.faithType" :selectList="dict.getDict('faithType')"/>
 | 
						|
                    </el-form-item>
 | 
						|
                  </div>
 | 
						|
                  <div class="fill">
 | 
						|
                    <el-form-item label="年龄:" prop="age">
 | 
						|
                      <el-input
 | 
						|
                          disabled
 | 
						|
                          v-model="baseInfo.age"
 | 
						|
                          autocomplete="off"
 | 
						|
                          size="small"
 | 
						|
                          placeholder="请输入年龄"
 | 
						|
                          type="number"
 | 
						|
                          @mousewheel.native.prevent
 | 
						|
                      />
 | 
						|
                      <!-- <p v-else>{{baseInfo.age}}</p> -->
 | 
						|
                    </el-form-item>
 | 
						|
                    <el-form-item label="民族:" prop="nation">
 | 
						|
                      <ai-select v-model="baseInfo.nation" :selectList="dict.getDict('nation')"/>
 | 
						|
                    </el-form-item>
 | 
						|
                    <el-form-item label="婚姻状况:" prop="maritalStatus">
 | 
						|
                      <ai-select v-model="baseInfo.maritalStatus" :selectList="dict.getDict('maritalStatus')"/>
 | 
						|
                    </el-form-item>
 | 
						|
                    <el-form-item label="兵役状况:" prop="militaryStatus">
 | 
						|
                      <ai-select v-model="baseInfo.militaryStatus" :selectList="dict.getDict('militaryStatus')"/>
 | 
						|
                    </el-form-item>
 | 
						|
                  </div>
 | 
						|
                </el-row>
 | 
						|
                <el-form-item label="籍贯:" prop=" birthplaceAreaId">
 | 
						|
                  <ai-area-select
 | 
						|
                      clearable
 | 
						|
                      always-show
 | 
						|
                      :instance="instance"
 | 
						|
                      v-model="baseInfo.birthplaceAreaId"
 | 
						|
                      :areaLevel="3"
 | 
						|
                  />
 | 
						|
                </el-form-item>
 | 
						|
              </template>
 | 
						|
              <template>
 | 
						|
                <ai-card title="基本信息">
 | 
						|
                  <ai-wrapper class="fill" slot="content">
 | 
						|
                    <ai-info-item label="性别" :value="dict.getLabel('sex', baseInfo.sex)"/>
 | 
						|
                    <ai-info-item label="身份证号">
 | 
						|
                      <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-avatar v-model="baseInfo.photo" :editable="false"/>
 | 
						|
                </ai-card>
 | 
						|
              </template>
 | 
						|
            </ai-edit-card>
 | 
						|
            <ai-edit-card title="联络信息"
 | 
						|
                          @save="saveFrom" @cancel="getDetail(baseInfo.id)">
 | 
						|
              <template #edit>
 | 
						|
                <el-form-item label="联系方式:" prop="phone">
 | 
						|
                  <el-input v-model="baseInfo.phone" size="small" placeholder="请输入联系方式" :maxlength="11"
 | 
						|
                            show-word-limit/>
 | 
						|
                </el-form-item>
 | 
						|
                <el-form-item label="现住址:" prop="currentAreaId">
 | 
						|
                  <ai-area-select clearable always-show :instance="instance" :disabled-level="disabledLevel"
 | 
						|
                                  v-model="baseInfo.currentAreaId" :valueLevel="4"/>
 | 
						|
                  <el-form-item>
 | 
						|
                    <el-input v-model="baseInfo.currentAddress" placeholder="详细地址" maxlength="30" show-word-limit
 | 
						|
                              clearable/>
 | 
						|
                  </el-form-item>
 | 
						|
                </el-form-item>
 | 
						|
              </template>
 | 
						|
              <template>
 | 
						|
                <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-wrapper>
 | 
						|
                </ai-card>
 | 
						|
              </template>
 | 
						|
            </ai-edit-card>
 | 
						|
            <ai-edit-card title="户籍信息"
 | 
						|
                          @save="saveFrom" @cancel="getDetail(baseInfo.id)">
 | 
						|
              <template #edit>
 | 
						|
                <el-row type="flex">
 | 
						|
                  <div class="fill">
 | 
						|
                    <el-form-item label="是否户主:" prop="householdName">
 | 
						|
                      <ai-select v-model="baseInfo.householdName" :selectList="dict.getDict('householdName')"
 | 
						|
                                  @change="householdRelationChange"/>
 | 
						|
                    </el-form-item>
 | 
						|
                    <el-form-item label="与户主关系:" prop="householdRelation" v-if="baseInfo.householdName==0">
 | 
						|
                      <ai-select v-model="baseInfo.householdRelation"
 | 
						|
                                  :selectList="dict.getDict('householdRelation')"/>
 | 
						|
                    </el-form-item>
 | 
						|
                  </div>
 | 
						|
                  <div class="fill">
 | 
						|
                    <el-form-item label="户主身份证号:" prop="householdIdNumber" v-if="baseInfo.householdName==0">
 | 
						|
                      <el-input v-model="baseInfo.householdIdNumber" placeholder="请输入户主身份证号" :maxlength="18"
 | 
						|
                                clearable/>
 | 
						|
                    </el-form-item>
 | 
						|
                  </div>
 | 
						|
                </el-row>
 | 
						|
                <el-form-item label="户籍地:" prop="householdAreaId">
 | 
						|
                  <ai-area-select clearable always-show :instance="instance" v-model="baseInfo.householdAreaId"/>
 | 
						|
                  <el-form-item v-if="baseInfo.householdAreaId">
 | 
						|
                    <el-input v-model="baseInfo.householdAddress" placeholder="详细地址" maxlength="30" show-word-limit
 | 
						|
                              clearable/>
 | 
						|
                  </el-form-item>
 | 
						|
                </el-form-item>
 | 
						|
              </template>
 | 
						|
              <template>
 | 
						|
                <ai-card title="户籍信息">
 | 
						|
                  <ai-wrapper slot="content">
 | 
						|
                    <ai-info-item label="是否户主" :value="dict.getLabel('householdName', baseInfo.householdName)"/>
 | 
						|
                    <template v-if="baseInfo.householdName==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('')" isLine/>
 | 
						|
                  </ai-wrapper>
 | 
						|
                </ai-card>
 | 
						|
              </template>
 | 
						|
            </ai-edit-card>
 | 
						|
        </template>
 | 
						|
        <template v-else>
 | 
						|
          <ai-card title="基本信息">
 | 
						|
            <template #content>
 | 
						|
              <el-row type="flex">
 | 
						|
                <div class="fill">
 | 
						|
                  <el-form-item label="姓名:" prop="name">
 | 
						|
                    <el-input
 | 
						|
                        v-model="baseInfo.name"
 | 
						|
                        autocomplete="off"
 | 
						|
                        size="small"
 | 
						|
                        placeholder="请输入姓名"
 | 
						|
                        maxlength="20"
 | 
						|
                        show-word-limit/>
 | 
						|
                  </el-form-item>
 | 
						|
                  <el-form-item label="身份证号:" prop="idNumber">
 | 
						|
                    <el-input v-model="baseInfo.idNumber" placeholder="请输入身份证号" :maxlength="18" show-word-limit
 | 
						|
                              @change="idChange"/>
 | 
						|
                  </el-form-item>
 | 
						|
                  <el-form-item label="性别:" prop="sex">
 | 
						|
                    <ai-select v-model="baseInfo.sex" :selectList="dict.getDict('sex')"/>
 | 
						|
                  </el-form-item>
 | 
						|
                </div>
 | 
						|
                <el-form-item label="个人照片:" prop="photo" class="fill">
 | 
						|
                  <ai-avatar :instance="instance" v-model="baseInfo.photo"/>
 | 
						|
                </el-form-item>
 | 
						|
              </el-row>
 | 
						|
              <el-row type="flex">
 | 
						|
                <div class="fill">
 | 
						|
                  <el-form-item label="出生日期:">
 | 
						|
                    <el-date-picker
 | 
						|
                        disabled
 | 
						|
                        :editable="false"
 | 
						|
                        value-format="yyyy-MM-dd HH:mm:ss"
 | 
						|
                        format="yyyy-MM-dd"
 | 
						|
                        v-model="baseInfo.birthday"
 | 
						|
                        type="date"
 | 
						|
                        placeholder="选择日期"
 | 
						|
                    />
 | 
						|
                  </el-form-item>
 | 
						|
                  <el-form-item label="文化程度:" prop="education">
 | 
						|
                    <ai-select v-model="baseInfo.education" :selectList="dict.getDict('education')"/>
 | 
						|
                  </el-form-item>
 | 
						|
                  <el-form-item label="政治面貌:" prop="politicsStatus">
 | 
						|
                    <ai-select v-model="baseInfo.politicsStatus" :selectList="dict.getDict('politicsStatus')"/>
 | 
						|
                  </el-form-item>
 | 
						|
                  <el-form-item label="职业:" prop="job">
 | 
						|
                    <ai-select v-model="baseInfo.job" :selectList="dict.getDict('job')"/>
 | 
						|
                  </el-form-item>
 | 
						|
                  <el-form-item label="宗教信仰:" prop="faithType">
 | 
						|
                    <ai-select v-model="baseInfo.faithType" :selectList="dict.getDict('faithType')"/>
 | 
						|
                  </el-form-item>
 | 
						|
                </div>
 | 
						|
                <div class="fill">
 | 
						|
                  <el-form-item label="年龄:" prop="age">
 | 
						|
                    <el-input
 | 
						|
                        disabled
 | 
						|
                        v-model="baseInfo.age"
 | 
						|
                        autocomplete="off"
 | 
						|
                        size="small"
 | 
						|
                        placeholder="请输入年龄"
 | 
						|
                        type="number"
 | 
						|
                        @mousewheel.native.prevent
 | 
						|
                    />
 | 
						|
                    <!-- <p v-else>{{baseInfo.age}}</p> -->
 | 
						|
                  </el-form-item>
 | 
						|
                  <el-form-item label="民族:" prop="nation">
 | 
						|
                    <ai-select v-model="baseInfo.nation" :selectList="dict.getDict('nation')"/>
 | 
						|
                  </el-form-item>
 | 
						|
                  <el-form-item label="婚姻状况:" prop="maritalStatus">
 | 
						|
                    <ai-select v-model="baseInfo.maritalStatus" :selectList="dict.getDict('maritalStatus')"/>
 | 
						|
                  </el-form-item>
 | 
						|
                  <el-form-item label="兵役状况:" prop="militaryStatus">
 | 
						|
                    <ai-select v-model="baseInfo.militaryStatus" :selectList="dict.getDict('militaryStatus')"/>
 | 
						|
                  </el-form-item>
 | 
						|
                </div>
 | 
						|
              </el-row>
 | 
						|
              <el-form-item label="籍贯:" prop=" birthplaceAreaId">
 | 
						|
                <ai-area-select
 | 
						|
                    clearable
 | 
						|
                    always-show
 | 
						|
                    :instance="instance"
 | 
						|
                    v-model="baseInfo.birthplaceAreaId"
 | 
						|
                    :areaLevel="3"
 | 
						|
                />
 | 
						|
              </el-form-item>
 | 
						|
            </template>
 | 
						|
          </ai-card>
 | 
						|
          <ai-card title="联络信息">
 | 
						|
            <template #content>
 | 
						|
              <el-form-item label="联系方式:" prop="phone">
 | 
						|
                <el-input v-model="baseInfo.phone" size="small" placeholder="请输入联系方式" :maxlength="11"
 | 
						|
                          show-word-limit/>
 | 
						|
              </el-form-item>
 | 
						|
              <el-form-item label="现住址:" prop="currentAreaId">
 | 
						|
                <ai-area-select clearable always-show :instance="instance" :disabled-level="disabledLevel"
 | 
						|
                                v-model="baseInfo.currentAreaId" :valueLevel="4"/>
 | 
						|
                <el-form-item>
 | 
						|
                  <el-input v-model="baseInfo.currentAddress" placeholder="详细地址" maxlength="30" show-word-limit
 | 
						|
                            clearable/>
 | 
						|
                </el-form-item>
 | 
						|
              </el-form-item>
 | 
						|
            </template>
 | 
						|
          </ai-card>
 | 
						|
          <ai-card title="户籍信息">
 | 
						|
            <template #content>
 | 
						|
              <el-row type="flex">
 | 
						|
                <div class="fill">
 | 
						|
                  <el-form-item label="是否户主:" prop="isHousehold">
 | 
						|
                    <ai-select v-model="baseInfo.isHousehold" :selectList="dict.getDict('householdName')"
 | 
						|
                                @change="householdRelationChange"/>
 | 
						|
                  </el-form-item>
 | 
						|
                  <el-form-item label="与户主关系:" prop="householdRelation" v-if="baseInfo.isHousehold==0">
 | 
						|
                    <ai-select v-model="baseInfo.householdRelation" :selectList="dict.getDict('householdRelation')"/>
 | 
						|
                  </el-form-item>
 | 
						|
                </div>
 | 
						|
                <div class="fill">
 | 
						|
                  <el-form-item label="户主身份证号:" prop="householdIdNumber" v-if="baseInfo.isHousehold==0">
 | 
						|
                    <el-input v-model="baseInfo.householdIdNumber" placeholder="请输入户主身份证号" :maxlength="18"
 | 
						|
                              clearable/>
 | 
						|
                  </el-form-item>
 | 
						|
                </div>
 | 
						|
              </el-row>
 | 
						|
              <el-form-item label="户籍地:" prop="householdAreaId">
 | 
						|
                <ai-area-select clearable always-show :instance="instance" v-model="baseInfo.householdAreaId"/>
 | 
						|
                <el-form-item v-if="baseInfo.householdAreaId">
 | 
						|
                  <el-input v-model="baseInfo.householdAddress" placeholder="详细地址" maxlength="30" show-word-limit
 | 
						|
                            clearable/>
 | 
						|
                </el-form-item>
 | 
						|
              </el-form-item>
 | 
						|
            </template>
 | 
						|
          </ai-card>
 | 
						|
        </template>
 | 
						|
      </el-form>
 | 
						|
    </template>
 | 
						|
    <template v-if="params.type !== 'Detail'" #footer>
 | 
						|
      <el-button @click="back">取消</el-button>
 | 
						|
      <el-button type="primary" @click="saveFrom()">保存</el-button>
 | 
						|
    </template>
 | 
						|
  </ai-detail>
 | 
						|
</template>
 | 
						|
<script>
 | 
						|
import {mapState} from "vuex";
 | 
						|
import {ID} from "dui/lib/js/utils";
 | 
						|
 | 
						|
export default {
 | 
						|
  name: "Add",
 | 
						|
  props: {
 | 
						|
    instance: Function,
 | 
						|
    dict: Object,
 | 
						|
    permissions: Function,
 | 
						|
    params: Object,
 | 
						|
    name: {default: ""}
 | 
						|
  },
 | 
						|
  data() {
 | 
						|
    let IdNumberPass = (rule, value, callback) => {
 | 
						|
      if (value) {
 | 
						|
        if (ID.check(value)) {
 | 
						|
          callback();
 | 
						|
        } else {
 | 
						|
          callback(new Error("身份证号格式错误"));
 | 
						|
        }
 | 
						|
      } else {
 | 
						|
        callback(new Error("请输入身份证号"));
 | 
						|
      }
 | 
						|
    };
 | 
						|
    return {
 | 
						|
      buildingCascader: true,
 | 
						|
      houseCascader: true,
 | 
						|
      navId: 0,
 | 
						|
      baseInfo: {
 | 
						|
        registerStatus: "",
 | 
						|
        tips: [],
 | 
						|
        age: "",
 | 
						|
        birthplaceAreaId: "",
 | 
						|
        currentAddress: "",
 | 
						|
        currentAreaId: "",
 | 
						|
        education: "",
 | 
						|
        faithType: "",
 | 
						|
        fileStatus: "",
 | 
						|
        householdAddress: "",
 | 
						|
        householdAreaId: "",
 | 
						|
        householdIdNumber: "",
 | 
						|
        isHousehold: "",
 | 
						|
        householdRelation: "",
 | 
						|
        id: "",
 | 
						|
        idNumber: "",
 | 
						|
        job: "",
 | 
						|
        logoutDescription: "",
 | 
						|
        logoutReason: "",
 | 
						|
        logoutTime: "",
 | 
						|
        logoutUserId: "",
 | 
						|
        maritalStatus: "",
 | 
						|
        militaryStatus: "",
 | 
						|
        name: "",
 | 
						|
        nation: "",
 | 
						|
        phone: "",
 | 
						|
        photo: "",
 | 
						|
        politicsStatus: "",
 | 
						|
        sex: "",
 | 
						|
        tsrqInfos: []
 | 
						|
      },
 | 
						|
      family: [],
 | 
						|
      familyInfo: {},
 | 
						|
      writeInfo: {
 | 
						|
        id: "",
 | 
						|
        logoutReason: "",
 | 
						|
        logoutDescription: "",
 | 
						|
        fileStatus: "1"
 | 
						|
      },
 | 
						|
      rules: {
 | 
						|
        name: [{required: true, message: "请输入姓名", trigger: "blur"}],
 | 
						|
        idNumber: [
 | 
						|
          {required: true, validator: IdNumberPass, trigger: "blur"}
 | 
						|
        ],
 | 
						|
        sex: [{required: true, message: "请选择性别", trigger: "change"}],
 | 
						|
        currentAreaId: [{message: "请选择现住址", required: true, trigger: "change"},
 | 
						|
          {
 | 
						|
            validator: (r, v, cb) => {
 | 
						|
              if (/.+0{3}$/.test(v)) {
 | 
						|
                cb("现住址必须选到村级")
 | 
						|
              } else cb()
 | 
						|
            }, trigger: "blur"
 | 
						|
          }],
 | 
						|
        currentAddress: [{message: "请选择现住址详细地址", required: true}],
 | 
						|
        householdAreaId: [
 | 
						|
          {
 | 
						|
            validator: (r, v, cb) => {
 | 
						|
              if (/.+0{3}$/.test(v) && v) {
 | 
						|
                cb("户籍地必须选到村级")
 | 
						|
              } else cb()
 | 
						|
            }, trigger: "blur"
 | 
						|
          }
 | 
						|
        ],
 | 
						|
        phone: [
 | 
						|
          {required: true, message: "请输入联系方式", trigger: "blur"}
 | 
						|
        ],
 | 
						|
        householdName: [
 | 
						|
          {required: true, message: "请选择是否户主", trigger: "change"}
 | 
						|
        ],
 | 
						|
        householdRelation: [
 | 
						|
          {required: true, message: "请选择与户主关系", trigger: "change"}
 | 
						|
        ],
 | 
						|
        householdIdNumber: [
 | 
						|
          {required: true, validator: IdNumberPass, trigger: "blur"}
 | 
						|
        ],
 | 
						|
        householdAddress: [
 | 
						|
          {required: true, message: "请选择户籍地详细地址", trigger: "blur"}
 | 
						|
        ]
 | 
						|
      },
 | 
						|
      imgUrl: "",
 | 
						|
      fileList: [],
 | 
						|
      disabledLevel: 0,
 | 
						|
      currentTab: "0"
 | 
						|
    };
 | 
						|
  },
 | 
						|
  computed: {
 | 
						|
    ...mapState(["user"]),
 | 
						|
    isEdit() {
 | 
						|
      return this.params.type === 'Edit'
 | 
						|
    },
 | 
						|
    pageTitle() {
 | 
						|
      return {
 | 
						|
        Edit: '编辑居民信息',
 | 
						|
        Add: '添加居民信息',
 | 
						|
        Detail: '居民信息详情'
 | 
						|
      }[this.params.type]
 | 
						|
    },
 | 
						|
    hasSpecial() {
 | 
						|
      //是否有特殊人员信息
 | 
						|
      return this.baseInfo.tsrqInfos?.length > 0
 | 
						|
    },
 | 
						|
    colConfigs() {
 | 
						|
      return [
 | 
						|
        {
 | 
						|
          label: "与户主关系", align: 'center',
 | 
						|
          render: (h, {row}) => h('p', this.dict.getLabel('householdRelation', row.householdRelation))
 | 
						|
        },
 | 
						|
        {label: "姓名", prop: "name"},
 | 
						|
        {label: "性别", prop: "sex", dict: "sex", align: 'center'},
 | 
						|
        {label: "年龄", prop: "age", align: 'center'},
 | 
						|
        {label: "身份证号", render: (h, {row}) => h('p', ID.hideId(row.idNumber))},
 | 
						|
        {slot: "options"}
 | 
						|
      ]
 | 
						|
    }
 | 
						|
  },
 | 
						|
  methods: {
 | 
						|
    back() {
 | 
						|
      this.$emit('change', {
 | 
						|
        type: 'List'
 | 
						|
      })
 | 
						|
    },
 | 
						|
    householdRelationChange() {
 | 
						|
      this.baseInfo.householdIdNumber = "";
 | 
						|
      this.baseInfo.householdRelation = "";
 | 
						|
    },
 | 
						|
    saveFrom(cb) {
 | 
						|
      this.$refs.ruleForm.validate(v => {
 | 
						|
        if (v) {
 | 
						|
          this.saveFromFn().then(() => {
 | 
						|
            if (cb) {
 | 
						|
              cb()
 | 
						|
              this.getDetail()
 | 
						|
            } else {
 | 
						|
              this.back()
 | 
						|
            }
 | 
						|
          });
 | 
						|
        }
 | 
						|
      });
 | 
						|
    },
 | 
						|
 | 
						|
    familyInit() {
 | 
						|
      Object.keys(this.writeInfo).forEach(e => {
 | 
						|
        this.writeInfo[e] = "";
 | 
						|
      });
 | 
						|
      this.$refs.writeInfo.resetFields();
 | 
						|
    },
 | 
						|
    saveFromFn() {
 | 
						|
      let {currentHouseList, householdHouseList, tips} = this.baseInfo
 | 
						|
      return this.instance.post(`/app/appresidentapplet/addOrUpdate`, {
 | 
						|
        residentType: this.$route.query.type,
 | 
						|
        ...this.baseInfo,
 | 
						|
        currentHouseList: currentHouseList?.join("|"),
 | 
						|
        householdHouseList: householdHouseList?.join("|"),
 | 
						|
        tips: tips?.join("|")
 | 
						|
      }).then(res => {
 | 
						|
        if (res?.code == 0) {
 | 
						|
          this.$message.success("保存成功");
 | 
						|
        }
 | 
						|
      })
 | 
						|
    },
 | 
						|
    getDetail() {
 | 
						|
      this.instance.post(`/app/appresidentapplet/queryDetailById?id=${this.params.id}`).then(res => {
 | 
						|
        if (res?.data) {
 | 
						|
          this.baseInfo = {
 | 
						|
            ...res.data
 | 
						|
          };
 | 
						|
          // this.family = res.data.family;
 | 
						|
          this.IdCard(res.data.idNumber);
 | 
						|
        }
 | 
						|
      });
 | 
						|
    },
 | 
						|
    handleDelete() {
 | 
						|
      this.$confirm("删掉档案后,\n" +
 | 
						|
          `<span class="username">${this.baseInfo.name}</span>` +
 | 
						|
          "        的历史相关信息可能无法追溯查看,是否确定删除该人员档案?", {
 | 
						|
        title: "档案删除"
 | 
						|
      }).then(() => {
 | 
						|
        this.instance.post(`/app/appresidentapplet/delete?ids=${this.baseInfo.id}`).then(res => {
 | 
						|
          if (res && res.code == 0) {
 | 
						|
            this.$message.success("删除成功");
 | 
						|
            this.$router.push({query: {}});
 | 
						|
          }
 | 
						|
        });
 | 
						|
      }).catch(() => 0)
 | 
						|
    },
 | 
						|
    idChange(val) {
 | 
						|
      if (val.length == 18) {
 | 
						|
        this.IdCard(val);
 | 
						|
      }
 | 
						|
    },
 | 
						|
    IdCard(UUserCard) {
 | 
						|
      if (UUserCard) {
 | 
						|
        const idCard = new ID(UUserCard)
 | 
						|
        this.baseInfo.age = idCard.age
 | 
						|
        this.baseInfo.sex = idCard.sex
 | 
						|
        this.baseInfo.birthday = idCard.birthday
 | 
						|
      }
 | 
						|
    }
 | 
						|
  },
 | 
						|
  created() {
 | 
						|
    this.disabledLevel = this.user.info.areaMap[this.user.info.areaId].length;
 | 
						|
    if (!this.params.id) {
 | 
						|
      // this.baseInfo.householdAreaId = JSON.parse(JSON.stringify(this.user.info.areaId))
 | 
						|
      this.baseInfo.currentAreaId = JSON.parse(JSON.stringify(this.user.info.areaId))
 | 
						|
      this.$nextTick(() => this.$refs.ruleForm?.resetFields())
 | 
						|
    } else {
 | 
						|
      this.getDetail(this.params.id);
 | 
						|
    }
 | 
						|
  }
 | 
						|
};
 | 
						|
</script>
 | 
						|
<style lang="scss" scoped>
 | 
						|
.residentDetail {
 | 
						|
  font-size: 14px;
 | 
						|
  :deep( .AiID ){
 | 
						|
    line-height: unset;
 | 
						|
 | 
						|
    .el-button--text {
 | 
						|
      padding: 0 8px;
 | 
						|
      height: fit-content;
 | 
						|
    }
 | 
						|
  }
 | 
						|
 | 
						|
  :deep( .el-form-item ){
 | 
						|
    margin-bottom: 10px;
 | 
						|
 | 
						|
    .el-form-item {
 | 
						|
      margin-top: 10px;
 | 
						|
    }
 | 
						|
 | 
						|
    .el-cascader, .el-select, .el-date-editor {
 | 
						|
      width: 100%;
 | 
						|
    }
 | 
						|
  }
 | 
						|
 | 
						|
  :deep( .el-form-item__error ){
 | 
						|
    position: static;
 | 
						|
  }
 | 
						|
}
 | 
						|
</style>
 |