718 lines
		
	
	
		
			28 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
			
		
		
	
	
			718 lines
		
	
	
		
			28 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('')"/>
 | |
|                   </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 />
 | |
|                   </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
 | |
|                       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
 | |
|                       v-model="baseInfo.age"
 | |
|                       size="small"
 | |
|                       placeholder="请输入年龄"
 | |
|                       type="number"
 | |
|                     />
 | |
|                     <!-- <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>
 | |
|               <el-form-item label="所属网格" prop="girdName" required>
 | |
|                 <ai-picker
 | |
|                   :instance="instance"
 | |
|                   dialogTitle="选择所属网格"
 | |
|                   :ops="{label: 'girdName', id: 'id'}"
 | |
|                   pageTitle="所属网格"
 | |
|                   :action="'/app/appgirdinfo/girdList'"
 | |
|                   v-model="baseInfo.girdId"
 | |
|                   @pick="onPick">
 | |
|                   <div class="AppAnnounceDetail-select">
 | |
|                     <el-input size="small" class="AppAnnounceDetail-select__input" placeholder="请选择..." disabled v-model="baseInfo.girdName"></el-input>
 | |
|                     <div class="select-left" v-if="girdList.length">
 | |
|                       <span v-for="(item, index) in girdList" :key="index">{{ item.girdName }}</span>
 | |
|                     </div>
 | |
|                     <i v-if="!girdList.length">请选择网格</i>
 | |
|                     <div class="select-right">{{ girdList.length ? '重新选择' : '选择网格' }}</div>
 | |
|                   </div>
 | |
|                 </ai-picker>
 | |
|               </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,
 | |
|       girdList: [],
 | |
|       baseInfo: {
 | |
|         registerStatus: "",
 | |
|         tips: [],
 | |
|         age: "",
 | |
|         girdName: '',
 | |
|         girdId: [],
 | |
|         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, message: "请输入身份证号", 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"}
 | |
|         ],
 | |
|         girdName: [
 | |
|           {required: true, message: "请选择网格", trigger: "change"}
 | |
|         ],
 | |
|         isHousehold: [
 | |
|           {required: true, message: "请选择是否户主", trigger: "change"}
 | |
|         ],
 | |
|         householdRelation: [
 | |
|           {required: true, message: "请选择与户主关系", trigger: "change"}
 | |
|         ],
 | |
|         householdIdNumber: [
 | |
|           {required: true, message: '请输入身份证号', 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'
 | |
|       })
 | |
|     },
 | |
|     onPick (e) {
 | |
|       if (e.length) {
 | |
|         this.baseInfo.girdName = e[0].girdName
 | |
|       } else {
 | |
|         this.baseInfo.girdName = ''
 | |
|         this.baseInfo.girdId = []
 | |
|       }
 | |
| 
 | |
|       this.girdList = e
 | |
|     },
 | |
|     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("|"),
 | |
|         girdId: this.baseInfo.girdId[0]
 | |
|       }).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,
 | |
|             girdId: [res.data.girdId]
 | |
|           };
 | |
|           this.girdList = [{
 | |
|             id: res.data.girdId,
 | |
|             girdName: res.data.girdName
 | |
|           }]
 | |
|         }
 | |
|       });
 | |
|     },
 | |
|     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.$dict.load(['sex', 'education', 'politicsStatus', 'job', 'faithType', 'nation', 'maritalStatus', 'militaryStatus', 'householdName', 'householdRelation', ]).then(()=> {
 | |
|       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 = this.user.info.areaId
 | |
|       } else {
 | |
|         this.getDetail(this.params.id);
 | |
|       }
 | |
|     })
 | |
|   }
 | |
| };
 | |
| </script>
 | |
| <style lang="scss" scoped>
 | |
| .residentDetail {
 | |
|   font-size: 14px;
 | |
|     .AppAnnounceDetail-select {
 | |
|       display: flex;
 | |
|       align-items: center;
 | |
|       min-height: 32px;
 | |
|       line-height: 1;
 | |
|       background: #F5F5F5;
 | |
|       border-radius: 4px;
 | |
|       border: 1px solid #D0D4DC;
 | |
|       cursor: pointer;
 | |
|       overflow: hidden;
 | |
|       transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
 | |
| 
 | |
|       &:hover {
 | |
|         border-color: #26f;
 | |
|       }
 | |
| 
 | |
|       & > i {
 | |
|         flex: 1;
 | |
|         height: 100%;
 | |
|         line-height: 32px;
 | |
|         padding: 0 12px;
 | |
|         color: #888888;
 | |
|         font-size: 14px;
 | |
|         font-style: normal;
 | |
|         border-right: 1px solid #D0D4DC;
 | |
|         background: #fff;
 | |
|       }
 | |
| 
 | |
|       .AppAnnounceDetail-select__input {
 | |
|         position: absolute;
 | |
|         left: 0;
 | |
|         top: 0;
 | |
|         z-index: -1;
 | |
|         opacity: 0;
 | |
|         height: 100%;
 | |
|       }
 | |
| 
 | |
|       .select-right {
 | |
|         height: 100%;
 | |
|         padding: 0 12px;
 | |
|         color: #222222;
 | |
|         font-size: 12px;
 | |
|         cursor: pointer;
 | |
|         transition: all ease 0.3s;
 | |
| 
 | |
|         &:hover {
 | |
|           opacity: 0.5;
 | |
|         }
 | |
|       }
 | |
| 
 | |
|       .select-left {
 | |
|         display: flex;
 | |
|         flex-wrap: wrap;
 | |
|         flex: 1;
 | |
|         padding: 5px 0 0px 12px;
 | |
|         border-right: 1px solid #D0D4DC;
 | |
|         border-radius: 4px 0 0 4px;
 | |
|         background: #fff;
 | |
| 
 | |
|         em {
 | |
|           height: 22px;
 | |
|           line-height: 22px;
 | |
|           margin: 0 4px 5px 0;
 | |
|           color: #222222;
 | |
|           font-size: 12px;
 | |
|           font-style: normal;
 | |
|         }
 | |
| 
 | |
|         span {
 | |
|           height: 22px;
 | |
|           line-height: 22px;
 | |
|           margin: 0 4px 5px 0;
 | |
|           padding: 0 8px;
 | |
|           font-size: 12px;
 | |
|           color: #222222;
 | |
|           background: #F3F4F7;
 | |
|           border-radius: 2px;
 | |
|           border: 1px solid #D0D4DC;
 | |
|         }
 | |
|       }
 | |
|     }
 | |
|   :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>
 |