山东移动居民档案合并至通用版应用

This commit is contained in:
aixianling
2022-03-14 16:17:59 +08:00
parent cb2aa2c46a
commit c41730e9a4
9 changed files with 7 additions and 3235 deletions

View File

@@ -6,7 +6,7 @@
<template #tabs>
<el-tabs v-model="activeName">
<el-tab-pane v-for="op in tabs" :key="op.value" :name="op.value" :label="op.label">
<component v-if="op.value==activeName" :is="op.comp" :areaId="areaId" :active="activeName"/>
<component v-if="op.value==activeName" :is="op.comp" :areaId="areaId" :active="activeName" :instance="instance" :dict="dict" />
</el-tab-pane>
</el-tabs>
</template>
@@ -20,7 +20,8 @@ import localResident from "./localResident";
import ListTpl from "./listTpl";
import MobileResident from "./mobileResident";
import ResidentSta from "./residentSta";
import auditList from "./auditList";
import auditDetail from "./audtiDetail";
export default {
name: "AppResident",
label: "居民档案",
@@ -34,7 +35,7 @@ export default {
resident: this
}
},
components: {ResidentSta, MobileResident, ListTpl, localResident},
components: {ResidentSta, MobileResident, ListTpl, localResident, auditList, audtiDetail: auditDetail},
computed: {
...mapState(["user"]),
tabs() {
@@ -50,6 +51,7 @@ export default {
detail: details[e.dictName]
})),
{label: "居民统计", value: "3", comp: ResidentSta},
{label: "居民档案审核", value: "4", comp: auditList, detail: auditDetail}
]
},
hideLevel() {

View File

@@ -0,0 +1,216 @@
<template>
<ai-list isTabs>
<template slot="content">
<ai-search-bar>
<template #left>
<ai-select
v-model="search.auditStatus"
clearable
placeholder="请选择审核状态"
:selectList="dict.getDict('auditStatus')"
@change="search.current = 1, getList()">
</ai-select>
<el-date-picker
value-format="yyyy-MM-dd"
v-model="search.createTimeStart"
type="date"
size="small"
unlink-panels
placeholder="选择开始日期"
@change="search.current = 1, getList()"
/>
<el-date-picker
value-format="yyyy-MM-dd"
v-model="search.createTimeEnd"
type="date"
size="small"
unlink-panels
placeholder="选择结束日期"
@change="search.current = 1, getList()"
/>
</template>
<template #right>
<el-input
v-model="search.con"
size="small"
placeholder="姓名/身份证/联系方式"
clearable
@keyup.enter.native="search.current = 1, getList()"
@clear="search.current = 1, search.con = '', getList()"
suffix-icon="iconfont iconSearch">
</el-input>
</template>
</ai-search-bar>
<ai-table
:tableData="tableData"
:col-configs="colConfigs"
:total="total"
style="margin-top: 6px;"
:current.sync="search.current"
:size.sync="search.size"
@getList="getList">
<el-table-column slot="options" width="120px" fixed="right" label="操作" align="center">
<template slot-scope="{ row }">
<div class="table-options">
<el-button type="text" @click="toAudit(row.id)" :disabled="row.auditStatus !== '0'">审核</el-button>
<el-button type="text" @click="toDetail(row.id)">详情</el-button>
</div>
</template>
</el-table-column>
</ai-table>
<ai-dialog
:visible.sync="isShow"
width="800px"
@close="onClose"
title="居民信息审核"
@onConfirm="onConfirm">
<el-form class="ai-form" label-width="120px" :model="form" ref="form">
<el-form-item label="是否通过审核" prop="pass" style="width: 100%;" :rules="[{ required: true, message: '请选择是否通过审核' }]">
<el-radio-group v-model="form.pass" @change="onStatusChange">
<el-radio label="0"></el-radio>
<el-radio label="1"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="审核意见" prop="opinion" style="width: 100%;" :rules="[{ required: form.pass === '0', message: '请输入审核意见' }]">
<el-input type="textarea" :rows="5" :maxlength="200" v-model="form.opinion" clearable placeholder="请输入审核意见" show-word-limit></el-input>
</el-form-item>
</el-form>
</ai-dialog>
</template>
</ai-list>
</template>
<script>
import { mapState } from 'vuex'
export default {
name: 'auditList',
props: {
instance: Function,
dict: Object,
areaId: String
},
data() {
return {
search: {
current: 1,
size: 10,
auditStatus: '',
con: '',
createTimeEnd: '',
createTimeStart: ''
},
isShow: false,
currIndex: -1,
areaList: [],
total: 10,
form: {
opinion: '',
pass: ''
},
id: '',
colConfigs: [
{ prop: 'name', label: '申请人', align: 'left' },
{ prop: 'createTime', label: '申请时间', align: 'center' },
{ prop: 'sex', label: '性别', align: 'center', formart: v => this.dict.getLabel('sex', v) },
{ prop: 'idNumber', label: '身份证号', align: 'center', formart: v => v.substring(0, 10) + '****' + v.substring(14, 18) },
{ prop: 'age', label: '年龄', align: 'center' },
{ prop: 'auditStatus', label: '审批结果', align: 'center', formart: v => this.dict.getLabel('auditStatus', v) },
{ prop: 'auditUserName', label: '审批人', align: 'center' },
{ prop: 'auditTime', label: '审批时间', align: 'center' }
],
tableData: []
}
},
computed: {
...mapState(['user'])
},
watch: {
areaId () {
this.search.current = 1
this.getList()
}
},
created() {
this.search.areaId = this.user.info.areaId
this.areaName = this.user.info.areaName
this.dict.load('auditStatus').then(() => {
this.getList()
})
},
methods: {
getList() {
this.instance.post(`/app/appresident/list`, null, {
params: {
...this.search,
areaId: this.areaId,
source: 1
}
}).then(res => {
if (res.code == 0) {
this.tableData = res.data.records
this.total = res.data.total
}
})
},
onStatusChange () {
this.$refs.form.clearValidate()
},
toAudit (id) {
this.id = id
this.isShow = true
},
onClose () {
this.form.pass = ''
this.form.opinion = ''
this.id = ''
},
onConfirm () {
this.$refs.form.validate(v => {
if (v) {
this.instance.post('/app/appresident/examine', null, {
params: {
...this.form,
id: this.id
}
}).then(res => {
if (res?.code == 0) {
this.isShow = false
this.getList()
this.$message.success('审核成功!')
}
})
}
})
},
remove(id) {
this.$confirm('确定删除该数据?').then(() => {
this.instance.post(`/app/appresident/delete?ids=${id}`).then(res => {
if (res.code == 0) {
this.$message.success('删除成功!')
this.getList()
}
})
})
},
toDetail (id) {
this.$router.push({query: {type: '4', id: id}})
}
}
}
</script>
<style lang="scss" scoped>
</style>

View File

@@ -0,0 +1,643 @@
<template>
<section class="addAborigines">
<ai-detail>
<ai-title slot="title" title="详情" isShowBack @onBackClick="$router.push({query:{}})" isShowBottomBorder/>
<template #content>
<ai-card title="基本信息">
<div slot="content">
<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="联络信息">
<div slot="content" 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="户籍信息">
<div slot="content" 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="家庭成员">
<div slot="content">
<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 type="text" title="查看详情" class="dict-list-operation" @click="showFamily(scope.row)">详情</el-button>
</template>
</el-table-column>
<div slot="empty" class="no-data" style="height:160px;"/>
</el-table>
</div>
</ai-card>
<ai-card title="处理结果" v-if="baseInfo.auditStatus > '0'">
<div slot="content" 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">{{ baseInfo.auditStatus === '1' ? '通过' : '拒绝' }}</span>
</div>
</div>
</div>
<div class="detail-info">
<div class="info fill">
<span class="label">审核意见</span>
<span class="value">{{ baseInfo.auditOpinion || '-' }}</span>
</div>
</div>
</div>
</ai-card>
<ai-dialog
:visible.sync="isShow"
width="800px"
@close="onClose"
title="事件审核"
@onConfirm="onConfirm">
<el-form class="ai-form" label-width="120px" :model="form" ref="form">
<el-form-item label="是否通过审核" prop="pass" style="width: 100%;" :rules="[{ required: true, message: '请选择是否通过审核' }]">
<el-radio-group v-model="form.pass" @change="onStatusChange">
<el-radio label="0"></el-radio>
<el-radio label="1"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="审核意见" prop="opinion" style="width: 100%;" :rules="[{ required: form.pass === '0', message: '请输入审核意见' }]">
<el-input type="textarea" :rows="5" :maxlength="200" v-model="form.opinion" clearable placeholder="请输入审核意见" show-word-limit></el-input>
</el-form-item>
</el-form>
</ai-dialog>
</template>
<template #footer >
<el-button @click="cancelFn()">取消</el-button>
<el-button type="primary" @click="isShow = true" v-if="baseInfo.auditStatus === '0'">审核</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>
</section>
</template>
<script>
import {mapState} from "vuex";
export default {
name: "audtiDetail",
props: {
instance: Function,
dict: Object,
permissions: Function,
detail: Object,
active: String
},
data() {
return {
buildingCascader: true,
houseCascader: true,
navId: 0,
form: {
opinion: '',
pass: ''
},
isShow: false,
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: "",
imgUrl: "",
fileList: [],
showEdit1: false,
showEdit2: false,
showEdit3: false,
showEdit4: false,
disabledLevel: 0
};
},
computed: {
...mapState(["user"]),
showDetail() {
return !!this.$route.query?.id
},
tipOps() {
return this.dict.getDict("residentTipType") || []
}
},
methods: {
householdRelationChange() {
this.baseInfo.householdIdNumber = "";
this.baseInfo.householdRelation = "";
},
onConfirm () {
this.$refs.form.validate(v => {
if (v) {
this.instance.post('/app/appresident/examine', null, {
params: {
...this.form,
id: this.$route.query.id
}
}).then(res => {
if (res?.code == 0) {
this.isShow = false
this.searchDetail(this.$route.query.id)
this.$message.success('审核成功!')
}
})
}
})
},
onStatusChange () {
this.$refs.form.clearValidate()
},
onClose () {
this.form.pass = ''
this.form.opinion = ''
this.id = ''
},
cancelFn() {
this.$refs.ruleForm?.resetFields()
this.$router.push({query: {}});
},
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;
},
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.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>