640 lines
19 KiB
Vue
640 lines
19 KiB
Vue
<template>
|
||
<section class="addAborigines">
|
||
<ai-detail>
|
||
<ai-title slot="title" title="详情" isShowBack @onBackClick="$router.push({query:{}})" isShowBottomBorder></ai-title>
|
||
<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="处理结果">
|
||
<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">
|
||
<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' ? true : false, message: '请输入审核意见' }]">
|
||
<el-input type="textarea" :rows="5" :maxlength="500" 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('审核成功!')
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
|
||
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>
|