380 lines
12 KiB
Vue
380 lines
12 KiB
Vue
<template>
|
||
<div class="ResidentMainBox p-2 w-full h-full">
|
||
<PageHeader title="住户详情"></PageHeader>
|
||
<div class="ResidentMainBody">
|
||
<el-row :span="24" :gutter="20">
|
||
<el-col :span="16">
|
||
<div class="userInfobox">
|
||
<el-card>
|
||
<template #header>
|
||
<div class="card-header">
|
||
<span>基础资料</span>
|
||
</div>
|
||
</template>
|
||
<div class="w-full h-full">
|
||
<el-row :gutter="20">
|
||
<el-col :span="12">
|
||
<div class="userinfo_item">
|
||
<div class="title_item">住户姓名：</div>
|
||
<span> {{ userInfo.name }} </span>
|
||
</div>
|
||
<div class="userinfo_item">
|
||
<div class="title_item">手机号码：</div>
|
||
<span> {{ userInfo.phone }} </span>
|
||
</div>
|
||
<div class="userinfo_item">
|
||
<div class="title_item">证件类型：</div>
|
||
<span> 身份证 </span>
|
||
</div>
|
||
<div class="userinfo_item">
|
||
<div class="title_item">住户类型：</div>
|
||
<DictTag :options="com_resident_relationship" :value="userInfo.type"></DictTag>
|
||
</div>
|
||
<div class="userinfo_item">
|
||
<div class="title_item">住户来源：</div>
|
||
<span> {{ userInfo.name }} </span>
|
||
</div>
|
||
<div class="userinfo_item">
|
||
<div class="title_item">注册时间：</div>
|
||
<span> {{ userInfo.name }} </span>
|
||
</div>
|
||
<div class="userinfo_item img">
|
||
<div class="title_item">身份证正面：</div>
|
||
<div class="userinfo_itme_img">
|
||
<el-image class="w-full h-full" fit="fill" :src="splitImages(userInfo.cardImageFront)"></el-image>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div class="userinfo_item">
|
||
<div class="title_item">住户编号：</div>
|
||
<span> {{ userInfo.id }} </span>
|
||
</div>
|
||
<div class="userinfo_item">
|
||
<div class="title_item">住户性别：</div>
|
||
<span> {{ userInfo.gender === 1 ? '男' : '女' }} </span>
|
||
</div>
|
||
<div class="userinfo_item">
|
||
<div class="title_item">证件号码：</div>
|
||
<span> {{ userInfo.idCard }} </span>
|
||
</div>
|
||
<div class="userinfo_item">
|
||
<div class="title_item">备注：</div>
|
||
<span> {{ userInfo.remark ?? '无' }} </span>
|
||
</div>
|
||
<div class="userinfo_item">
|
||
<div class="title_item">提交审核时间：</div>
|
||
<span> 去丽丽 </span>
|
||
</div>
|
||
<div class="userinfo_item img">
|
||
<div class="title_item">身份证背面：</div>
|
||
<div class="userinfo_itme_img">
|
||
<el-image class="w-full h-full" fit="fill" :src="`/${userInfo.cardImageFront}`"></el-image>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</el-card>
|
||
</div>
|
||
<div class="previewbox">
|
||
<el-card>
|
||
<template #header>
|
||
<div class="card-header">
|
||
<span>审核</span>
|
||
</div>
|
||
</template>
|
||
<div class="w-full h-full flex mt-2">
|
||
<div class="title">审批意见</div>
|
||
<div class="preivewBodybox">
|
||
<el-input v-model="reviewInfo.propertyReviewFeedback" placeholder="请输入" type="textarea" :rows="5"></el-input>
|
||
<div class="actions">
|
||
<el-button type="primary" @click="updatePass('1')">审核通过</el-button>
|
||
<el-button type="danger" @click="updatePass('2')">审核不通过</el-button>
|
||
<el-button @click="backRoute">返回</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-card style="position: relative" class="h-full">
|
||
<template #header>
|
||
<div class="asideCardHeader w-full h-full">
|
||
<div class="cardSubtitle">
|
||
<div class="line"></div>
|
||
<div class="subtitle">审批流程</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<div class="w-full h-50%">
|
||
<el-steps space="200px" direction="vertical" :active="activeStop">
|
||
<el-step :description="reviewInfo.submitTime">
|
||
<template #title>
|
||
<DictTag :options="com_sub_status" :value="reviewInfo.submitStatus || '0'"></DictTag>
|
||
</template>
|
||
</el-step>
|
||
<el-step :description="reviewInfo.propertyTime">
|
||
<template #title>
|
||
<DictTag :options="com_review" :value="reviewInfo.propertyStatus || '0'"></DictTag>
|
||
</template>
|
||
</el-step>
|
||
<el-step :description="reviewInfo.certificationTime">
|
||
<template #title>
|
||
<DictTag :options="com_certification_status" :value="reviewInfo.certificationStatus || '0'"></DictTag>
|
||
</template>
|
||
</el-step>
|
||
<el-step>
|
||
<template #title>
|
||
<span>审核完成</span>
|
||
</template>
|
||
</el-step>
|
||
</el-steps>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script setup lang="ts">
|
||
import { ref } from 'vue';
|
||
import PageHeader from '@/components/Pageheader/index.vue';
|
||
import { getResident, getresidentReviewlistAPI, UpdateResidentReviewAPI } from '@/api/system/resident';
|
||
import { ResidentVO } from '@/api/system/resident/type';
|
||
import { splitImages } from '@/utils';
|
||
|
||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||
const { com_review } = toRefs<any>(proxy?.useDict('com_review'));
|
||
const { com_sub_status } = toRefs<any>(proxy?.useDict('com_sub_status'));
|
||
const { com_resident_relationship } = toRefs<any>(proxy?.useDict('com_resident_relationship'));
|
||
const { com_certification_status } = toRefs<any>(proxy?.useDict('com_certification_status'));
|
||
|
||
const userInfo = ref<ResidentVO>({
|
||
code: null,
|
||
villageId: '',
|
||
buildingId: '',
|
||
'id': null,
|
||
'name': '',
|
||
'type': null,
|
||
'gender': null,
|
||
'status': null,
|
||
'idCard': '',
|
||
'phone': null,
|
||
'houseId': null,
|
||
'remark': null,
|
||
'cardImageFront': '',
|
||
'cardImageBack': ''
|
||
});
|
||
|
||
const reviewInfo = ref({
|
||
'id': null,
|
||
'residentId': null,
|
||
'submitTime': '',
|
||
'submitStatus': '1',
|
||
'propertyTime': '',
|
||
'propertyStatus': '0',
|
||
'propertyReviewFeedback': '', // 审核意见
|
||
'certificationTime': '',
|
||
'certificationStatus': '0'
|
||
});
|
||
|
||
const active = ref(0);
|
||
const userid = ref(null);
|
||
const route = useRoute();
|
||
|
||
if (route.query.id) {
|
||
userid.value = route.query.id;
|
||
// 获取住户信息
|
||
getResident(userid.value).then((res) => {
|
||
userInfo.value = res.data;
|
||
// 获取 审核流程
|
||
getresidentReviewlistAPI(userid.value).then((res) => {
|
||
console.log(res);
|
||
if (res.rows[0]) {
|
||
reviewInfo.value = res.rows[0];
|
||
console.log(reviewInfo.value);
|
||
handleActivestaus(reviewInfo.value);
|
||
}
|
||
});
|
||
});
|
||
}
|
||
|
||
function handleActivestaus(rews) {
|
||
// 提交状态 0未提交 1已提交
|
||
if (rews.submitStatus === '0') {
|
||
active.value = 0;
|
||
} else if (rews.submitStatus === '1') {
|
||
active.value = 1;
|
||
// 物业审核状态 0 待审核 1审核通过 2审核未通过
|
||
// 待认证
|
||
if (rews.propertyStatus === '0') {
|
||
active.value = 2;
|
||
} else if (rews.propertyStatus === '2') {
|
||
active.value = 3;
|
||
} else if (rews.propertyStatus === '1') {
|
||
active.value = 4;
|
||
// 认证状态 0未认证 1已认证
|
||
if (rews.certificationStatus === '0') {
|
||
active.value = 5;
|
||
} else if (rews.certificationStatus === '1') {
|
||
active.value = 6;
|
||
} else if (rews.certificationStatus === '2') {
|
||
active.value = 5;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
// TODO 住户审核
|
||
const activeStop = computed(() => {
|
||
let status = 0;
|
||
switch (active.value) {
|
||
case 0:
|
||
break;
|
||
case 1:
|
||
case 2:
|
||
case 3:
|
||
status = 1;
|
||
break;
|
||
case 4:
|
||
case 5:
|
||
status = 2;
|
||
break;
|
||
case 6:
|
||
status = 4;
|
||
break;
|
||
}
|
||
return status;
|
||
});
|
||
|
||
// 审核通过
|
||
function updatePass(val: '0' | '1' | '2') {
|
||
reviewInfo.value = {
|
||
...reviewInfo.value,
|
||
// 审核时间
|
||
'propertyTime': new Date().toLocaleString().replaceAll('/', '-'),
|
||
// 审核状态
|
||
'propertyStatus': val,
|
||
'residentId': userid.value
|
||
};
|
||
console.log(reviewInfo.value);
|
||
update();
|
||
}
|
||
|
||
function update() {
|
||
UpdateResidentReviewAPI(reviewInfo.value).then((res) => {
|
||
backRoute();
|
||
});
|
||
}
|
||
const router = useRouter();
|
||
function backRoute() {
|
||
router.push({
|
||
path: '/house/resident'
|
||
});
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.ResidentMainBox {
|
||
display: flex;
|
||
flex-direction: column;
|
||
.ResidentMainBody {
|
||
flex: 1;
|
||
margin-top: 20px;
|
||
.userInfobox {
|
||
.card-header {
|
||
font-size: 18px;
|
||
height: 60px;
|
||
line-height: 60px;
|
||
}
|
||
.userinfo_item {
|
||
margin-bottom: 20px;
|
||
min-height: 40px;
|
||
line-height: 40px;
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 14px;
|
||
.title_item {
|
||
margin-right: 10px;
|
||
width: 100px;
|
||
text-align: right;
|
||
font-weight: bold;
|
||
}
|
||
&.img {
|
||
align-items: flex-start;
|
||
height: 200px;
|
||
.userinfo_itme_img {
|
||
width: 300px;
|
||
height: 200px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.previewbox {
|
||
margin-top: 20px;
|
||
.card-header {
|
||
font-size: 18px;
|
||
height: 60px;
|
||
line-height: 60px;
|
||
}
|
||
.title {
|
||
width: 120px;
|
||
padding-right: 20px;
|
||
text-align: right;
|
||
}
|
||
.preivewBodybox {
|
||
flex: 1;
|
||
height: 200px;
|
||
.actions {
|
||
margin-top: 20px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.cardSubtitle {
|
||
position: absolute;
|
||
left: 0px;
|
||
top: 28px;
|
||
width: 100px;
|
||
background: #fff;
|
||
color: #000;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
.line {
|
||
width: 5px;
|
||
height: 19px;
|
||
margin-right: 5px;
|
||
border-radius: 5px;
|
||
background-color: rgba(26, 117, 255, 1);
|
||
}
|
||
.subtitle {
|
||
height: 23px;
|
||
line-height: 23px;
|
||
color: rgba(51, 51, 51, 1);
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
|
||
&:deep(div.el-step__head.is-process) {
|
||
& > div.el-step__line {
|
||
width: 0;
|
||
border: 1px dashed gray;
|
||
background: transparent;
|
||
}
|
||
}
|
||
&:deep(.el-step.is-vertical .el-step__line) {
|
||
top: 20px;
|
||
}
|
||
&:deep(div.el-step__head.is-finish) {
|
||
& > div.el-step__line {
|
||
width: 0;
|
||
border: 1px solid var(--el-color-primary);
|
||
background: transparent;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|