1124 lines
40 KiB
Vue
1124 lines
40 KiB
Vue
<template>
|
||
<section class="addAborigines">
|
||
<ai-detail>
|
||
<ai-title slot="title" :title="showDetail?'本地居民信息':'添加本地居民'" isShowBack @onBackClick="$router.push({query:{}})"
|
||
isShowBottomBorder>
|
||
<template v-if="showDetail" #rightBtn>
|
||
<el-button @click="beforeWriteOff()" icon="el-icon-switch-button" v-if="baseInfo.fileStatus==0">注销档案
|
||
</el-button>
|
||
<el-button icon="iconfont iconDelete" @click="handleDelete()" v-if="$permissions('app_appresident_del')">
|
||
删除人员
|
||
</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">
|
||
|
||
<ai-card title="基本信息">
|
||
<template v-if="showDetail" #right>
|
||
<template v-if="$permissions('app_appresident_edit')">
|
||
<el-button
|
||
type="text"
|
||
class="iconfont iconEdit"
|
||
@click="editInit(),showEdit1=true;"
|
||
v-if="!showEdit1"
|
||
> 修改
|
||
</el-button>
|
||
</template>
|
||
<el-button
|
||
type="text"
|
||
@click="showEdit1=false,searchDetail(baseInfo.id)"
|
||
v-if="showEdit1"
|
||
>取消
|
||
</el-button>
|
||
<el-button type="text" v-if="showEdit1" @click="saveFrom('ruleForm')">保存</el-button>
|
||
</template>
|
||
<div slot="content" v-if="showEdit1">
|
||
<div class="above">
|
||
<div class="left">
|
||
<el-form-item label="姓名：" prop="name">
|
||
<el-input
|
||
v-model="baseInfo.name"
|
||
autocomplete="off"
|
||
size="small"
|
||
placeholder="请输入姓名"
|
||
v-if="showEdit1"
|
||
:disabled="!!showDetail"
|
||
></el-input>
|
||
<!-- <p v-else>{{baseInfo.name||'-'}}</p> -->
|
||
</el-form-item>
|
||
<el-form-item label="身份证号：" prop="idNumber">
|
||
<el-input
|
||
v-model="baseInfo.idNumber"
|
||
autocomplete="off"
|
||
size="small"
|
||
placeholder="请输入身份证号"
|
||
v-if="showEdit1"
|
||
:maxlength="18"
|
||
@input="idChange"
|
||
:disabled="!!showDetail"
|
||
/>
|
||
<!-- <p v-else>
|
||
<ai-id mode="show" v-model="baseInfo.idNumber" right-btn></ai-id>
|
||
</p>-->
|
||
</el-form-item>
|
||
<el-form-item label="性别：" prop="sex">
|
||
<el-select v-model="baseInfo.sex"
|
||
placeholder="请选择"
|
||
disabled
|
||
clearable>
|
||
<el-option
|
||
v-for="(item,i) in dict.getDict('sex')"
|
||
:label="item.dictName"
|
||
:key="i"
|
||
:value="item.dictValue"
|
||
></el-option>
|
||
</el-select>
|
||
<!-- <p v-else>
|
||
{{dict.getLabel('sex',baseInfo.sex)||'-'}}
|
||
</p>-->
|
||
</el-form-item>
|
||
</div>
|
||
<div class="right">
|
||
<el-form-item label="个人照片：" prop="photo">
|
||
<!-- <div class="pictrue">
|
||
<img :src="imgUrl" alt="" title=""></img>
|
||
<el-upload
|
||
v-if="showEdit1"
|
||
class="upload-demo"
|
||
action
|
||
multiple
|
||
accept=".png,.jpg"
|
||
:http-request="uploadFile"
|
||
:show-file-list="false"
|
||
:on-change="handleChange"
|
||
:file-list="fileList"
|
||
>
|
||
<el-button >上传照片</el-button>
|
||
<div slot="tip" class="el-upload__tip">
|
||
图片大小不能超过2M
|
||
</div>
|
||
</el-upload>
|
||
</div>-->
|
||
<ai-avatar :instance="instance" v-if="showEdit1" v-model="baseInfo.photo"/>
|
||
<ai-avatar v-model="baseInfo.photo" v-else :editable="false"/>
|
||
<!--<ai-avatar :instance="instance" v-model="baseInfo.photo"/>-->
|
||
</el-form-item>
|
||
</div>
|
||
</div>
|
||
<div class="above">
|
||
<div class="left">
|
||
<el-form-item label="出生日期：" prop="birthday">
|
||
<el-date-picker
|
||
v-if="showEdit1"
|
||
disabled
|
||
:editable="false"
|
||
value-format="yyyy-MM-dd HH:mm:ss"
|
||
format="yyyy-MM-dd"
|
||
v-model="birthday"
|
||
type="date"
|
||
|
||
placeholder="选择日期"
|
||
></el-date-picker>
|
||
<!-- <p v-else>{{birthday?birthday.substring(0, 10):"-"}}</p> -->
|
||
</el-form-item>
|
||
<el-form-item label="文化程度：" prop="education">
|
||
<el-select
|
||
v-model="baseInfo.education"
|
||
placeholder="请选择"
|
||
|
||
v-if="showEdit1"
|
||
clearable
|
||
>
|
||
<el-option
|
||
v-for="(item,i) in dict.getDict('education')"
|
||
:label="item.dictName"
|
||
:key="i"
|
||
:value="item.dictValue"
|
||
></el-option>
|
||
</el-select>
|
||
<!-- <p v-else>{{dict.getLabel('education',baseInfo.education)||'-'}}</p> -->
|
||
</el-form-item>
|
||
<el-form-item label="政治面貌：" prop="politicsStatus">
|
||
<el-select
|
||
v-model="baseInfo.politicsStatus"
|
||
placeholder="请选择"
|
||
|
||
v-if="showEdit1"
|
||
clearable
|
||
>
|
||
<el-option
|
||
v-for="(item,i) in dict.getDict('politicsStatus')"
|
||
:label="item.dictName"
|
||
:key="i"
|
||
:value="item.dictValue"
|
||
></el-option>
|
||
</el-select>
|
||
<!-- <p v-else>{{dict.getLabel('politicsStatus',baseInfo.politicsStatus)||'-'}}</p> -->
|
||
</el-form-item>
|
||
<el-form-item label="职业：" prop="job">
|
||
<el-select
|
||
v-model="baseInfo.job"
|
||
placeholder="请选择"
|
||
|
||
v-if="showEdit1"
|
||
clearable
|
||
>
|
||
<el-option
|
||
v-for="(item,i) in dict.getDict('job')"
|
||
:label="item.dictName"
|
||
:key="i"
|
||
:value="item.dictValue"
|
||
></el-option>
|
||
</el-select>
|
||
<!-- <p v-else>{{dict.getLabel('job',baseInfo.job)||'-'}}</p> -->
|
||
</el-form-item>
|
||
<el-form-item label="宗教信仰：" prop="faithType">
|
||
<el-select
|
||
v-model="baseInfo.faithType"
|
||
placeholder="请选择"
|
||
|
||
v-if="showEdit1"
|
||
clearable
|
||
>
|
||
<el-option
|
||
v-for="(item,i) in dict.getDict('faithType')"
|
||
:label="item.dictName"
|
||
:key="i"
|
||
:value="item.dictValue"
|
||
></el-option>
|
||
</el-select>
|
||
<!-- <p v-else>{{dict.getLabel('faithType',baseInfo.faithType)||'-'}}</p> -->
|
||
</el-form-item>
|
||
</div>
|
||
<div class="right">
|
||
<el-form-item label="年龄：" prop="age">
|
||
<el-input
|
||
disabled
|
||
v-model="baseInfo.age"
|
||
autocomplete="off"
|
||
size="small"
|
||
placeholder="请输入年龄"
|
||
v-if="showEdit1"
|
||
type="number"
|
||
@mousewheel.native.prevent
|
||
></el-input>
|
||
<!-- <p v-else>{{baseInfo.age}}</p> -->
|
||
</el-form-item>
|
||
<el-form-item label="民族：" prop="nation">
|
||
<el-select
|
||
v-model="baseInfo.nation"
|
||
placeholder="请选择"
|
||
|
||
v-if="showEdit1"
|
||
clearable
|
||
>
|
||
<el-option
|
||
v-for="(item,i) in dict.getDict('nation')"
|
||
:label="item.dictName"
|
||
:key="i"
|
||
:value="item.dictValue"
|
||
></el-option>
|
||
</el-select>
|
||
<!-- <p v-else>{{dict.getLabel('nation',baseInfo.nation)||'-'}}</p> -->
|
||
</el-form-item>
|
||
<el-form-item label="婚姻状况：" prop="maritalStatus">
|
||
<el-select
|
||
v-model="baseInfo.maritalStatus"
|
||
placeholder="请选择"
|
||
|
||
v-if="showEdit1"
|
||
clearable
|
||
>
|
||
<el-option
|
||
v-for="(item,i) in dict.getDict('maritalStatus')"
|
||
:label="item.dictName"
|
||
:key="i"
|
||
:value="item.dictValue"
|
||
></el-option>
|
||
</el-select>
|
||
<!-- <p v-else>{{dict.getLabel('maritalStatus',baseInfo.maritalStatus)||'-'}}</p> -->
|
||
</el-form-item>
|
||
<el-form-item label="兵役状况：" prop="militaryStatus">
|
||
<el-select
|
||
v-model="baseInfo.militaryStatus"
|
||
placeholder="请选择"
|
||
|
||
v-if="showEdit1"
|
||
clearable
|
||
>
|
||
<el-option
|
||
v-for="(item,i) in dict.getDict('militaryStatus')"
|
||
:label="item.dictName"
|
||
:key="i"
|
||
:value="item.dictValue"
|
||
></el-option>
|
||
</el-select>
|
||
<!-- <p v-else>{{dict.getLabel('militaryStatus',baseInfo.militaryStatus)||'-'}}</p> -->
|
||
</el-form-item>
|
||
</div>
|
||
</div>
|
||
<div class="areaList">
|
||
<el-form-item label="籍贯：" prop=" birthplaceAreaId">
|
||
<ai-area-select
|
||
clearable
|
||
always-show
|
||
:instance="instance"
|
||
v-if="showEdit1"
|
||
v-model="baseInfo.birthplaceAreaId"
|
||
:areaLevel="3"
|
||
></ai-area-select>
|
||
<!-- <p v-if="!showEdit1">{{baseInfo.birthplaceAreaName||'-'}}</p> -->
|
||
</el-form-item>
|
||
</div>
|
||
</div>
|
||
<div slot="content" v-else>
|
||
<el-row type="flex">
|
||
<div class="detail-info fill">
|
||
<h3 class="name">{{ baseInfo.name || '-' }}</h3>
|
||
<div class="detail-left fill">
|
||
<div class="info">
|
||
<span class="label">性别：</span>
|
||
<span class="value">{{ dict.getLabel('sex', baseInfo.sex) || '-' }}</span>
|
||
</div>
|
||
<div class="info">
|
||
<span class="label">出生日期：</span>
|
||
<span class="value">{{ birthday ? birthday.substring(0, 10) : '-' }}</span>
|
||
</div>
|
||
<div class="info">
|
||
<span class="label">籍贯：</span>
|
||
<span class="value">{{ baseInfo.birthplaceAreaName || '-' }}</span>
|
||
</div>
|
||
<div class="info">
|
||
<span class="label">文化程度：</span>
|
||
<span class="value">{{ dict.getLabel('education', baseInfo.education) || '-' }}</span>
|
||
</div>
|
||
<div class="info">
|
||
<span class="label">政治面貌：</span>
|
||
<span
|
||
class="value"
|
||
>{{ dict.getLabel('politicsStatus', baseInfo.politicsStatus) || '-' }}</span>
|
||
</div>
|
||
<div class="info">
|
||
<span class="label">宗教信仰：</span>
|
||
<span class="value">{{ dict.getLabel('faithType', baseInfo.faithType) || '-' }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="detail-right fill">
|
||
<div class="info">
|
||
<span class="label">身份证号：</span>
|
||
<span class="value">
|
||
<ai-id mode="show" v-model="baseInfo.idNumber" right-btn class="line-center"></ai-id>
|
||
</span>
|
||
</div>
|
||
<div class="info">
|
||
<span class="label">年龄：</span>
|
||
<span class="value">{{ baseInfo.age }}</span>
|
||
</div>
|
||
<div class="info">
|
||
<span class="label">民族：</span>
|
||
<span class="value">{{ dict.getLabel('nation', baseInfo.nation) || '-' }}</span>
|
||
</div>
|
||
<div class="info">
|
||
<span class="label">婚姻状况：</span>
|
||
<span
|
||
class="value"
|
||
>{{ dict.getLabel('maritalStatus', baseInfo.maritalStatus) || '-' }}</span>
|
||
</div>
|
||
<div class="info">
|
||
<span class="label">兵役状况：</span>
|
||
<span
|
||
class="value"
|
||
>{{ dict.getLabel('militaryStatus', baseInfo.militaryStatus) || '-' }}</span>
|
||
</div>
|
||
<div class="info">
|
||
<span class="label">职业：</span>
|
||
<span class="value">{{ dict.getLabel('job', baseInfo.job) || '-' }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<ai-avatar v-model="baseInfo.photo" :editable="false"/>
|
||
</el-row>
|
||
</div>
|
||
</ai-card>
|
||
|
||
<ai-card title="联络信息">
|
||
<template v-if="showDetail" #right>
|
||
<template v-if="$permissions('app_appresident_edit')">
|
||
<el-button
|
||
type="text"
|
||
class="iconfont iconEdit"
|
||
@click="editInit(),showEdit2=true;"
|
||
v-if="!showEdit2">
|
||
修改
|
||
</el-button>
|
||
</template>
|
||
<el-button
|
||
type="text"
|
||
@click="showEdit2=false,searchDetail(baseInfo.id)"
|
||
v-if="showEdit2">
|
||
取消
|
||
</el-button>
|
||
<el-button type="text" v-if="showEdit2" @click="saveFrom('ruleForm')">保存</el-button>
|
||
</template>
|
||
<div slot="content" v-if="showEdit2">
|
||
<div class="above">
|
||
<div class="left">
|
||
<el-form-item label="联系方式：" prop="phone">
|
||
<el-input v-model="baseInfo.phone" size="small" placeholder="请输入联系方式" v-if="showEdit2"
|
||
:maxlength="11"/>
|
||
</el-form-item>
|
||
</div>
|
||
</div>
|
||
<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="详细地址" clearable/>
|
||
</el-form-item>
|
||
</el-form-item>
|
||
</div>
|
||
<div slot="content" v-else style="margin-top: 16px;margin-bottom:24px">
|
||
<div class="info" style="margin-bottom:8px">
|
||
<span class="label">联系方式：</span>
|
||
<span class="value">{{ baseInfo.phone || '-' }}</span>
|
||
</div>
|
||
<div class="info">
|
||
<span class="label">现住址：</span>
|
||
<span class="value">{{ baseInfo.currentAreaName + baseInfo.currentAddress || "-" }}</span>
|
||
</div>
|
||
</div>
|
||
</ai-card>
|
||
|
||
<ai-card title="户籍信息">
|
||
<template v-if="showDetail" #right>
|
||
<template v-if="$permissions('app_appresident_edit')">
|
||
<el-button
|
||
type="text"
|
||
class="iconfont iconEdit"
|
||
@click="editInit(),showEdit3=true;"
|
||
v-if="!showEdit3"
|
||
> 修改
|
||
</el-button>
|
||
</template>
|
||
<el-button
|
||
type="text"
|
||
@click="showEdit3=false,searchDetail(baseInfo.id)"
|
||
v-if="showEdit3"
|
||
>取消
|
||
</el-button>
|
||
<el-button type="text" v-if="showEdit3" @click="saveFrom('ruleForm')">保存</el-button>
|
||
</template>
|
||
<div slot="content" v-if="showEdit3">
|
||
<div class="above">
|
||
<div class="left">
|
||
<el-form-item label="是否户主：" prop="householdName">
|
||
<el-select v-model="baseInfo.householdName" placeholder="请选择"
|
||
@change="householdRelationChange" clearable>
|
||
<el-option v-for="(item,i) in dict.getDict('householdName')"
|
||
:label="item.dictName" :key="i" :value="item.dictValue"/>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="与户主关系：" prop="householdRelation" v-if="baseInfo.householdName==0">
|
||
<el-select v-model="baseInfo.householdRelation" placeholder="请选择" v-if="showEdit3" clearable>
|
||
<el-option v-for="(item,i) in dict.getDict('householdRelation')"
|
||
:label="item.dictName" :key="i" :value="item.dictValue"/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</div>
|
||
<div class="right">
|
||
<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>
|
||
</div>
|
||
<el-form-item label="户籍地：" prop="householdAreaId">
|
||
<ai-area-select clearable always-show :instance="instance" v-if="showEdit3"
|
||
v-model="baseInfo.householdAreaId" :disabled-level="disabledLevel" :valueLevel="4"/>
|
||
<el-form-item v-if="baseInfo.householdAreaId">
|
||
<el-input v-model="baseInfo.householdAddress" placeholder="详细地址" clearable/>
|
||
</el-form-item>
|
||
</el-form-item>
|
||
</div>
|
||
<div slot="content" v-else style="margin-top: 16px;margin-bottom:24px">
|
||
<div class="detail-info">
|
||
<div class="detail-left fill">
|
||
<div class="info">
|
||
<span class="label">是否户主：</span>
|
||
<span class="value">{{ dict.getLabel('householdName', baseInfo.householdName) || '-' }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="info fill" v-if="baseInfo.householdName==0">
|
||
<span class="label">与户主关系：</span>
|
||
<span class="value">{{ dict.getLabel('householdRelation', baseInfo.householdRelation) || '-' }}</span>
|
||
</div>
|
||
<div class="info fill" v-if="baseInfo.householdName==0">
|
||
<span class="label">户主身份证号：</span>
|
||
<span class="value">
|
||
<ai-id mode="show" v-model="baseInfo.householdIdNumber" right-btn></ai-id>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="detail-info-p info">
|
||
<span class="label">户籍地：</span>
|
||
<span class="value">
|
||
{{ baseInfo.householdAreaName + (baseInfo.householdAddress ? baseInfo.householdAddress : "") }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</ai-card>
|
||
|
||
<ai-card title="家庭成员" v-if="showDetail">
|
||
<div slot="content" v-if="showDetail">
|
||
<el-table
|
||
border
|
||
ref="multipleTable"
|
||
:data="family"
|
||
style="margin-top:8px;"
|
||
|
||
header-cell-class-name="table-header"
|
||
tooltip-effect="light"
|
||
row-class-name="table-row"
|
||
cell-class-name="table-cell"
|
||
>
|
||
<el-table-column align="center" prop="name" label="与户主关系">
|
||
<template slot-scope="scope">
|
||
<span>{{
|
||
scope.row.householdRelation ? dict.getLabel('householdRelation', scope.row.householdRelation) : "户主"
|
||
}}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="name" label="姓名" align="center" show-overflow-tooltip></el-table-column>
|
||
<el-table-column prop="idNumber" label="性别" align="center" show-overflow-tooltip>
|
||
<template slot-scope="scope">
|
||
<span>{{ parseInt(scope.row.idNumber.substr(16, 1)) % 2 == 1 ? '男' : '女' }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="age" label="年龄" align="center" show-overflow-tooltip></el-table-column>
|
||
<el-table-column
|
||
prop="idNumber"
|
||
label="身份证号"
|
||
align="center"
|
||
width="200"
|
||
show-overflow-tooltip>
|
||
<template slot-scope="{row}">
|
||
<ai-id mode="show" v-model="row.idNumber" :showEyes="false"/>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="address" label="操作" align="center" show-overflow-tooltip>
|
||
<template slot-scope="scope">
|
||
<el-button icon="iconfont iconShow" title="查看详情" class="dict-list-operation"
|
||
@click="showFamily(scope.row)" type="text"/>
|
||
</template>
|
||
</el-table-column>
|
||
<div slot="empty" class="no-data" style="height:160px;"/>
|
||
</el-table>
|
||
</div>
|
||
</ai-card>
|
||
</el-form>
|
||
</template>
|
||
<template v-if="!showDetail" #footer>
|
||
<el-button @click="cancelFn()">取消</el-button>
|
||
<el-button type="primary" @click="saveFrom('ruleForm','goBack')">保存</el-button>
|
||
</template>
|
||
</ai-detail>
|
||
|
||
<el-dialog class="deleteStyle" :visible.sync="familyDialog" width="720px" title="家庭成员信息" top="30vh">
|
||
<el-row type="flex" justify="space-between">
|
||
<ul>
|
||
<li>
|
||
<span>姓名：</span>
|
||
<p>{{ familyInfo.name }}</p>
|
||
</li>
|
||
<li>
|
||
<span>身份证号：</span>
|
||
<p>
|
||
<ai-id mode="show" v-model="familyInfo.idNumber" right-btn class="line-center"></ai-id>
|
||
</p>
|
||
</li>
|
||
<li>
|
||
<span>性别：</span>
|
||
<p>{{ dict.getLabel('sex', familyInfo.sex) }}</p>
|
||
</li>
|
||
<li>
|
||
<span>年龄：</span>
|
||
<p>{{ familyInfo.age }}</p>
|
||
</li>
|
||
<li>
|
||
<span>联系方式：</span>
|
||
<p>{{ familyInfo.phone }}</p>
|
||
</li>
|
||
<li>
|
||
<span>民族：</span>
|
||
<p>{{ dict.getLabel('nation', familyInfo.nation) }}</p>
|
||
</li>
|
||
<li>
|
||
<span>籍贯：</span>
|
||
<p>{{ familyInfo.birthplaceAreaName }}</p>
|
||
</li>
|
||
<li>
|
||
<span>文化程度：</span>
|
||
<p>{{ dict.getLabel('education', familyInfo.education) }}</p>
|
||
</li>
|
||
<li>
|
||
<span>婚姻状况：</span>
|
||
<p>{{ dict.getLabel('maritalStatus', familyInfo.maritalStatus) }}</p>
|
||
</li>
|
||
<li>
|
||
<span>政治面貌：</span>
|
||
<p>{{ dict.getLabel('politicsStatus', familyInfo.politicsStatus) }}</p>
|
||
</li>
|
||
<li>
|
||
<span>兵役状况：</span>
|
||
<p>{{ dict.getLabel('militaryStatus', familyInfo.militaryStatus) }}</p>
|
||
</li>
|
||
<li>
|
||
<span>宗教信仰：</span>
|
||
<p>{{ dict.getLabel('faithType', familyInfo.faithType) }}</p>
|
||
</li>
|
||
<li>
|
||
<span>职业：</span>
|
||
<p>{{ dict.getLabel('job', familyInfo.job) }}</p>
|
||
</li>
|
||
<li style="width:100%;">
|
||
<span>现住址：</span>
|
||
<p>{{ familyInfo.currentAreaName + familyInfo.currentAddress }}</p>
|
||
</li>
|
||
</ul>
|
||
<div class="img_block">
|
||
<ai-avatar v-model="familyInfo.imgUrl" :editable="false"/>
|
||
</div>
|
||
</el-row>
|
||
<div slot="footer" style="text-align: center;">
|
||
<el-button style="width:92px" size="small" @click="familyDialog = false">关闭
|
||
</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
<el-dialog title="档案注销"
|
||
class="deleteStyle"
|
||
:visible.sync="writeoffDialog"
|
||
width="700px" top="25vh"
|
||
@close="familyInit()"
|
||
:close-on-click-modal="false">
|
||
<el-form :model="writeInfo" ref="writeInfo" label-width="100px" size="small">
|
||
<el-form-item label="姓名：">{{ baseInfo.name }}</el-form-item>
|
||
<el-form-item label="身份证号：">
|
||
<ai-id mode="show" v-model="baseInfo.idNumber" right-btn/>
|
||
</el-form-item>
|
||
<el-form-item label="注销原因：" prop="logoutReason" autocomplete="off"
|
||
:rules="{required: true, message: '注销原因不能为空', trigger: 'change'}">
|
||
<el-select v-model="writeInfo.logoutReason" placeholder="请选择">
|
||
<el-option v-for="(item,i) in dict.getDict('logoutReason')"
|
||
:label="item.dictName"
|
||
:key="i" :value="item.dictValue"/>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="操作说明：" prop="logoutDescription" :rules="{ required: true, message: '操作说明不能为空'}">
|
||
<el-input type="textarea" v-model="writeInfo.logoutDescription" :rows="4"/>
|
||
</el-form-item>
|
||
</el-form>
|
||
<div slot="footer" style="text-align: center;">
|
||
<el-button
|
||
style="width:92px"
|
||
size="small"
|
||
class="delete-btn"
|
||
@click="writeoffDialog=false,$refs.writeInfo.resetFields();"
|
||
>取消
|
||
</el-button>
|
||
<el-button
|
||
style="width:92px"
|
||
size="small"
|
||
type="primary"
|
||
@click="submitForm('writeInfo')"
|
||
>确认
|
||
</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
</section>
|
||
</template>
|
||
<script>
|
||
import {mapState} from "vuex";
|
||
|
||
export default {
|
||
name: "addAborigines",
|
||
props: {
|
||
instance: Function,
|
||
dict: Object,
|
||
permissions: Function,
|
||
detail: Object,
|
||
active: String
|
||
},
|
||
data() {
|
||
let IdNumberPass = (rule, value, callback) => {
|
||
if (value) {
|
||
if (this.idCardNoUtil.checkIdCardNo(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: "",
|
||
householdName: "",
|
||
householdRelation: "",
|
||
id: "",
|
||
idNumber: "",
|
||
job: "",
|
||
logoutDescription: "",
|
||
logoutReason: "",
|
||
logoutTime: "",
|
||
logoutUserId: "",
|
||
maritalStatus: "",
|
||
militaryStatus: "",
|
||
name: "",
|
||
nation: "",
|
||
phone: "",
|
||
photo: "",
|
||
politicsStatus: "",
|
||
sex: ""
|
||
},
|
||
family: [],
|
||
familyDialog: false,
|
||
familyInfo: {},
|
||
writeoffDialog: false,
|
||
writeInfo: {
|
||
id: "",
|
||
logoutReason: "",
|
||
logoutDescription: "",
|
||
fileStatus: "1"
|
||
},
|
||
birthday: "",
|
||
rules: {
|
||
name: [{required: true, message: "请输入姓名", trigger: "blur"}],
|
||
idNumber: [
|
||
{required: true, validator: IdNumberPass, trigger: "blur"}
|
||
],
|
||
sex: [{required: true, message: "请选择性别", trigger: "blur"}],
|
||
currentAreaId: [{message: "请选择现住址", required: true, trigger: "blur"},
|
||
{
|
||
validator: (r, v, cb) => {
|
||
if (/.+0{3}$/.test(v)) {
|
||
cb("现住址必须选到村级")
|
||
} else cb()
|
||
}, trigger: "blur"
|
||
}],
|
||
currentAddress: [{message: "请选择现住址详细地址", required: true}],
|
||
householdAreaId: [
|
||
{message: "户籍地必须选到村级", required: true,trigger: "blur"},
|
||
{
|
||
validator: (r, v, cb) => {
|
||
if (/.+0{3}$/.test(v)) {
|
||
cb("户籍地必须选到村级")
|
||
} else cb()
|
||
},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: [],
|
||
showEdit1: false,
|
||
showEdit2: false,
|
||
showEdit3: false,
|
||
showEdit4: false,
|
||
disabledLevel: 0
|
||
};
|
||
},
|
||
computed: {
|
||
...mapState(["user"]),
|
||
showDetail() {
|
||
return !!this.$route.query?.id
|
||
},
|
||
navList() {
|
||
return [
|
||
{name: "本地居民信息", id: "1"},
|
||
{name: "变更记录", id: "2"}
|
||
]
|
||
},
|
||
tipOps() {
|
||
return this.dict.getDict("residentTipType") || []
|
||
}
|
||
},
|
||
methods: {
|
||
uploadFile(file) {
|
||
const isLt2M = file.file.size / 1024 / 1024 < 2;
|
||
if (!isLt2M) {
|
||
this.$message.warning("头像大小不能超过 2MB!");
|
||
return;
|
||
}
|
||
let formData = new FormData();
|
||
formData.append("file", file.file);
|
||
this.instance.post(`/admin/file/add`, formData, {withCredentials: false})
|
||
.then(res => {
|
||
if (res && res.code == 0) {
|
||
let imgInfo = res.data[0].split(";");
|
||
this.imgUrl = imgInfo[0];
|
||
this.baseInfo.photo = res.data[0];
|
||
}
|
||
});
|
||
},
|
||
handleChange(file, fileList) {
|
||
this.fileList = fileList;
|
||
},
|
||
householdRelationChange() {
|
||
this.baseInfo.householdIdNumber = "";
|
||
this.baseInfo.householdRelation = "";
|
||
},
|
||
saveFrom(formName, type) {
|
||
this.$refs[formName].validate(valid => {
|
||
if (valid) {
|
||
this.saveFromFn(type);
|
||
}
|
||
});
|
||
},
|
||
cancelFn() {
|
||
this.$refs.ruleForm?.resetFields()
|
||
this.$router.push({query: {}});
|
||
},
|
||
submitForm(formName) {
|
||
this.writeInfo.id = this.baseInfo.id;
|
||
this.$refs[formName].validate(valid => {
|
||
if (valid) {
|
||
this.instance.post(`/app/appresident/addOrUpdate`, {
|
||
...this.writeInfo
|
||
}).then(res => {
|
||
if (res && res.code == 0) {
|
||
this.$message.success("注销成功");
|
||
this.writeoffDialog = false;
|
||
this.$router.push({query: {}});
|
||
}
|
||
});
|
||
} else {
|
||
return false;
|
||
}
|
||
});
|
||
},
|
||
familyInit() {
|
||
Object.keys(this.writeInfo).forEach(e => {
|
||
this.writeInfo[e] = "";
|
||
});
|
||
this.$refs.writeInfo.resetFields();
|
||
},
|
||
saveFromFn(type) {
|
||
let {currentHouseList, householdHouseList, tips} = this.baseInfo
|
||
this.instance.post(`/app/appresident/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("保存成功");
|
||
if (type) {
|
||
this.$router.push({query: {}})
|
||
} else {
|
||
this.editInit();
|
||
}
|
||
}
|
||
});
|
||
},
|
||
editInit() {
|
||
this.showEdit1 = false;
|
||
this.showEdit2 = false;
|
||
this.showEdit3 = false;
|
||
this.showEdit4 = false;
|
||
this.searchDetail(this.baseInfo.id);
|
||
},
|
||
searchDetail(id, type) {
|
||
this.instance.post(`/app/appresident/detail`, null, {
|
||
params: {id}
|
||
}).then(res => {
|
||
if (res?.data) {
|
||
let {currentHouseList, householdHouseList, tips} = res.data.resident
|
||
this.baseInfo = {
|
||
...res.data.resident,
|
||
currentHouseList: currentHouseList?.split("|"),
|
||
householdHouseList: householdHouseList?.split("|"),
|
||
tips: tips ? tips.split("|") : [],
|
||
};
|
||
this.family = res.data.family;
|
||
this.IdCard(this.baseInfo.idNumber);
|
||
if (type == "family") {
|
||
this.familyDialog = false;
|
||
}
|
||
}
|
||
});
|
||
},
|
||
showFamily(row) {
|
||
this.familyInfo = row;
|
||
if (this.familyInfo.photo) {
|
||
this.familyInfo.imgUrl = this.familyInfo.photo.split(";")[0];
|
||
} else {
|
||
this.familyInfo.imgUrl = "";
|
||
}
|
||
this.familyDialog = true;
|
||
},
|
||
beforeWriteOff() {
|
||
this.writeoffDialog = true;
|
||
},
|
||
handleDelete() {
|
||
this.$confirm("删掉档案后，\n" +
|
||
`<span class="username">${this.baseInfo.name}</span>` +
|
||
" 的历史相关信息可能无法追溯查看，是否确定删除该人员档案？", {
|
||
title: "档案删除"
|
||
}).then(() => {
|
||
this.instance.post(`/app/appresident/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) {
|
||
let arr = [];
|
||
//获取出生日期
|
||
let birth =
|
||
UUserCard.substring(6, 10) +
|
||
"-" +
|
||
UUserCard.substring(10, 12) +
|
||
"-" +
|
||
UUserCard.substring(12, 14) +
|
||
" 00:00:00";
|
||
arr.push(birth);
|
||
|
||
if (parseInt(UUserCard.substr(16, 1)) % 2 == 1) {
|
||
//男
|
||
arr.push("1");
|
||
} else {
|
||
//女
|
||
arr.push("0");
|
||
}
|
||
//获取年龄
|
||
const myDate = new Date();
|
||
const month = myDate.getMonth() + 1;
|
||
const day = myDate.getDate();
|
||
let age = myDate.getFullYear() - UUserCard.substring(6, 10) - 1;
|
||
if (
|
||
UUserCard.substring(10, 12) < month ||
|
||
(UUserCard.substring(10, 12) == month &&
|
||
UUserCard.substring(12, 14) <= day)
|
||
) {
|
||
age++;
|
||
}
|
||
arr.push(age);
|
||
this.baseInfo.sex = arr[1];
|
||
this.baseInfo.age = arr[2];
|
||
this.birthday = arr[0];
|
||
}
|
||
}
|
||
},
|
||
created() {
|
||
this.disabledLevel = this.user.info.areaMap[this.user.info.areaId].length;
|
||
if (!this.showDetail) {
|
||
this.showEdit1 = true;
|
||
this.showEdit2 = true;
|
||
this.showEdit3 = true;
|
||
this.showEdit4 = true;
|
||
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.searchDetail(this.$route.query.id);
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.addAborigines {
|
||
height: 100%;
|
||
font-size: 14px;
|
||
|
||
.el-form-item {
|
||
margin-bottom: 10px;
|
||
|
||
.el-form-item {
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.el-cascader, .el-select, .el-date-editor {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
::v-deep .el-form-item__error {
|
||
position: static;
|
||
}
|
||
|
||
::v-deep .content-right {
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
padding-bottom: 80px;
|
||
|
||
.ailist-title {
|
||
padding: 0;
|
||
}
|
||
|
||
.above {
|
||
width: 100%;
|
||
overflow: hidden;
|
||
|
||
.left {
|
||
width: 380px;
|
||
float: left;
|
||
}
|
||
|
||
.right {
|
||
width: 380px;
|
||
float: left;
|
||
|
||
.pictrue {
|
||
display: flex;
|
||
height: 120px;
|
||
|
||
img {
|
||
width: 104px;
|
||
height: 120px;
|
||
border-radius: 2px;
|
||
border: solid 1px #d0d4dc;
|
||
}
|
||
|
||
.upload-demo {
|
||
padding: 0 15px;
|
||
}
|
||
|
||
.el-button {
|
||
width: 104px;
|
||
height: 32px;
|
||
background-color: #ffffff;
|
||
border-radius: 2px;
|
||
border: solid 1px #8899bb;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
ul {
|
||
flex: 1;
|
||
min-width: 0;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
padding: 0;
|
||
margin: 0;
|
||
|
||
li {
|
||
display: flex;
|
||
align-items: center;
|
||
min-height: 32px;
|
||
width: 50%;
|
||
|
||
span {
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
p {
|
||
margin: 0
|
||
}
|
||
}
|
||
}
|
||
|
||
.img_block {
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.detail-info {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
h3 {
|
||
width: 100%;
|
||
flex-shrink: 0
|
||
}
|
||
|
||
}
|
||
|
||
.info {
|
||
display: flex;
|
||
align-items: center;
|
||
line-height: 1.4;
|
||
margin-bottom: 16px;
|
||
|
||
.label {
|
||
flex-shrink: 0;
|
||
width: 100px;
|
||
margin-right: 40px;
|
||
text-align: right;
|
||
color: #888;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.value {
|
||
color: #222;
|
||
font-size: 14px;
|
||
word-break: break-all;
|
||
}
|
||
}
|
||
|
||
.fill {
|
||
flex: 1;
|
||
min-width: 50%;
|
||
}
|
||
|
||
.el-checkbox-group {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
|
||
.el-checkbox {
|
||
margin: 0 !important;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
::v-deep .el-checkbox__label {
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.tags {
|
||
gap: 10px;
|
||
flex-wrap: wrap;
|
||
}
|
||
}
|
||
</style>
|