484 lines
16 KiB
Vue
484 lines
16 KiB
Vue
<template>
|
||
<div class="ResidentMainBox p-2 w-full h-full">
|
||
<PageHeader></PageHeader>
|
||
<div class="ResidentMainBody">
|
||
<el-row :span="24" :gutter="20">
|
||
<el-col :span="16">
|
||
<!-- 车位信息 -->
|
||
<div class="mb-10">
|
||
<el-card>
|
||
<template #header>
|
||
<div class="card-header">
|
||
<span>车位信息</span>
|
||
</div>
|
||
</template>
|
||
<div class="w-full h-full CarInfoBox gridBox">
|
||
<div class="carInfo_item">
|
||
<div class="label">区域：</div>
|
||
<div class="main">{{ parkingReviewInfo.parking.areaName }}</div>
|
||
</div>
|
||
<div class="carInfo_item">
|
||
<div class="label">车位编号：</div>
|
||
<div class="main">{{ parkingReviewInfo.parking.parkingCode }}</div>
|
||
</div>
|
||
<div class="carInfo_item">
|
||
<div class="label">车位面积：</div>
|
||
<div class="main">{{ parkingReviewInfo.parking.parkingArea }} ㎡</div>
|
||
</div>
|
||
<div class="carInfo_item">
|
||
<div class="label">楼层：</div>
|
||
<div class="main">{{ parkingReviewInfo.parking.parkingFloor }} 层</div>
|
||
</div>
|
||
<div class="carInfo_item">
|
||
<div class="label">车位类型：</div>
|
||
<div class="main">
|
||
<dict-tag :options="com_parking_type" :value="parkingReviewInfo.parking.type" />
|
||
</div>
|
||
</div>
|
||
<div class="carInfo_item">
|
||
<div class="label">车位状态：</div>
|
||
<div class="main">
|
||
<DictTag :options="com_parking_status" :value="parkingReviewInfo.parking.parkingStatus"></DictTag>
|
||
</div>
|
||
</div>
|
||
<div class="carInfo_item" v-if="parkingReviewInfo.parking.residentId">
|
||
<div class="label">持有人：</div>
|
||
<div class="main">
|
||
<span>
|
||
{{ parkingReviewInfo.parking.residentName }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="carInfo_item">
|
||
<div class="label">添加时间：</div>
|
||
<div class="main">{{ parkingReviewInfo.parking.createTime }}</div>
|
||
</div>
|
||
<div class="carInfo_item">
|
||
<div class="label">添加人：</div>
|
||
<div class="main">{{ parkingReviewInfo.parking.createName }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="CarInfoBox" style="margin-top: 20px">
|
||
<div class="carInfo_item" v-if="parkingReviewInfo.parking.contactName">
|
||
<div class="label">非业主联系人：</div>
|
||
<div class="main">{{ parkingReviewInfo.parking.contactName }}</div>
|
||
</div>
|
||
<div class="carInfo_item" style="margin-top: 20px" v-if="parkingReviewInfo.parking.contactPhone">
|
||
<div class="label">联系电话：</div>
|
||
<div class="main">{{ parkingReviewInfo.parking.contactPhone }}</div>
|
||
</div>
|
||
<div class="carInfo_item" style="margin-top: 20px">
|
||
<div class="label">备注：</div>
|
||
<div class="main">{{ parkingReviewInfo.parking.remark }}</div>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
</div>
|
||
<!-- 车辆信息 -->
|
||
<div class="mb-10" v-if="!showCar">
|
||
<el-card>
|
||
<template #header>
|
||
<div class="card-header">
|
||
<span>车辆信息</span>
|
||
</div>
|
||
</template>
|
||
<div class="w-full h-full CarInfoBox" v-if="parkingReviewInfo.car">
|
||
<el-row>
|
||
<el-col :span="8">
|
||
<div class="carInfo_item">
|
||
<div class="label">车牌号：</div>
|
||
<div class="main">{{ parkingReviewInfo.car.carNum }}</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<div class="carInfo_item">
|
||
<div class="label">车辆品牌：</div>
|
||
<div class="main">{{ parkingReviewInfo.car.carBrand }}</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<div class="carInfo_item">
|
||
<div class="label">车辆型号</div>
|
||
<div class="main">{{ parkingReviewInfo.car.carModel }}</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row class="mt-30px mb-30px">
|
||
<el-col :span="8">
|
||
<div class="carInfo_item">
|
||
<div class="label">车身颜色：</div>
|
||
<div class="main">{{ parkingReviewInfo.car.carColor }}</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<div class="carInfo_item">
|
||
<div class="label">备注：</div>
|
||
<div class="main">{{ parkingReviewInfo.car.remark }}</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="8"> </el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="24">
|
||
<div class="carInfo_item flex-items-start">
|
||
<div class="label">车辆照片：</div>
|
||
<div class="main">
|
||
<el-image
|
||
v-for="(item, index) in parkingReviewInfo.car.carImageUrlList"
|
||
:key="index"
|
||
class="carInfoImage"
|
||
:src="item"
|
||
:initial-index="index"
|
||
:preview-src-list="parkingReviewInfo.car.carImageUrlList"
|
||
preview-teleported
|
||
></el-image>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
<div class="w-full h-full CarInfoBox flex flex-center min-h-17rem" v-else>
|
||
<span style="color: #999; font-weight: 500; font-size: larger; letter-spacing: 10px">暂无信息</span>
|
||
</div>
|
||
</el-card>
|
||
</div>
|
||
<div class="">
|
||
<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 flex-1 ml-5">
|
||
<el-input maxlength="200" show-word-limit v-model="form.propertyReviewFeedback" type="textarea" :rows="5"></el-input>
|
||
<div class="actions mt-5">
|
||
<el-button :disabled="parkingReviewInfo.parking.checkStatus === '1'" type="primary" @click="handlePreview(1)">审核通过</el-button>
|
||
<el-button :disabled="parkingReviewInfo.parking.checkStatus === '1'" type="danger" @click="handlePreview(2)"
|
||
>审核不通过</el-button
|
||
>
|
||
<el-button @click="handleBack">返回</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="active <= 0 ? '' : parkingReviewInfo.parkingReviewProcess.submitTime">
|
||
<template #title>
|
||
<span v-if="active === 0">未提交信息</span>
|
||
<span v-if="active >= 1">已提交信息</span>
|
||
</template>
|
||
</el-step>
|
||
<el-step :description="active <= 2 ? '' : parkingReviewInfo.parkingReviewProcess.propertyTime">
|
||
<template #title>
|
||
<span v-if="active <= 2">待审核</span>
|
||
<span v-if="active === 3">物业审核不通过</span>
|
||
<span v-if="active >= 4">物业审核通过</span>
|
||
</template>
|
||
</el-step>
|
||
<el-step :description="active <= 5 ? '' : parkingReviewInfo.parkingReviewProcess.certificationTime">
|
||
<template #title>
|
||
<span v-if="active <= 5">未认证</span>
|
||
<span v-if="active === 6">已认证</span>
|
||
</template>
|
||
</el-step>
|
||
<el-step>
|
||
<template #title>
|
||
<span v-if="active <= 5">审核未完成</span>
|
||
<span v-else>审核完成</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 { getParkingReview, getParkingReviewInfo } from '@/api/system/parking';
|
||
import DictTag from '@/components/DictTag/index.vue';
|
||
|
||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||
const { com_parking_status } = toRefs<any>(proxy?.useDict('com_parking_status'));
|
||
const { com_parking_type } = toRefs<any>(proxy?.useDict('com_parking_type'));
|
||
|
||
const showCar = true;
|
||
|
||
/** 住户 提交状态 */
|
||
enum submitStatus {
|
||
/** 未提交 */
|
||
unSubmit = '0',
|
||
/** 已提交 */
|
||
Submitted = '1'
|
||
}
|
||
/** 审核状态 */
|
||
enum ReviewStatus {
|
||
/** 待审核 */
|
||
awaitReview = '0',
|
||
/** 审核不通过 */
|
||
unReviewPass = '2',
|
||
/** 审核通过 */
|
||
ReviewPass = '1'
|
||
}
|
||
/** 认证状态 */
|
||
enum certificationStatus {
|
||
/** 未认证 */
|
||
uncertification = '0',
|
||
/** 认证失败 */
|
||
uncertificationPass = '2',
|
||
/** 已认证 */
|
||
Certification = '1'
|
||
}
|
||
|
||
const active = ref(0);
|
||
const activeStop = ref(0);
|
||
const router = useRouter();
|
||
const route = useRoute();
|
||
const id = ref('');
|
||
|
||
type parkingReviewType = {
|
||
parking: parkingType;
|
||
car: {
|
||
'id': string;
|
||
'areaId': null;
|
||
'villageId': string;
|
||
'parkingId': string;
|
||
'residentId': null;
|
||
'residentName': null;
|
||
'carNum': string;
|
||
'carBrand': string;
|
||
'carModel': string;
|
||
'carColor': string;
|
||
'remark': null;
|
||
'carImageUrl': string;
|
||
'userName': null;
|
||
'userId': string;
|
||
carImageUrlList?: string[];
|
||
};
|
||
parkingReviewProcess: parkingReviewProcess;
|
||
};
|
||
|
||
type parkingType = {
|
||
id: string;
|
||
areaId: string;
|
||
areaName: string;
|
||
contactName: string;
|
||
contactPhone: string;
|
||
villageId: string;
|
||
villageName: string;
|
||
parkingCode: string;
|
||
parkingArea: any;
|
||
parkingStatus: string;
|
||
type: string;
|
||
residentId: string;
|
||
residentName: string;
|
||
parkingFloor: string;
|
||
createName: string;
|
||
checkStatus: string;
|
||
remark: string;
|
||
createTime: string;
|
||
};
|
||
|
||
type parkingReviewProcess = {
|
||
id: string;
|
||
submitStatus: string;
|
||
propertyStatus: string;
|
||
certificationStatus: string;
|
||
submitTime: string;
|
||
propertyTime: string;
|
||
certificationTime: string;
|
||
};
|
||
const parkingReviewInfo = ref<parkingReviewType>({
|
||
parking: {
|
||
'id': '',
|
||
'areaId': '',
|
||
'areaName': '',
|
||
contactPhone: '',
|
||
contactName: '',
|
||
'villageId': '',
|
||
'villageName': '',
|
||
'parkingCode': '',
|
||
'parkingArea': null,
|
||
'parkingStatus': '',
|
||
'type': '',
|
||
'residentId': null,
|
||
'residentName': null,
|
||
'parkingFloor': '',
|
||
'createName': '',
|
||
'checkStatus': '',
|
||
'remark': '',
|
||
'createTime': ''
|
||
},
|
||
car: {
|
||
'id': '',
|
||
'areaId': null,
|
||
'villageId': '',
|
||
'parkingId': '',
|
||
'residentId': null,
|
||
'residentName': null,
|
||
'carNum': '',
|
||
'carBrand': '',
|
||
'carModel': '',
|
||
'carColor': '',
|
||
'remark': null,
|
||
'carImageUrl': '',
|
||
'userName': null,
|
||
'userId': ''
|
||
},
|
||
parkingReviewProcess: {
|
||
id: null,
|
||
submitStatus: null,
|
||
propertyStatus: null,
|
||
certificationStatus: null,
|
||
submitTime: null,
|
||
propertyTime: null,
|
||
certificationTime: null
|
||
}
|
||
});
|
||
|
||
const form = ref({
|
||
propertyReviewFeedback: '',
|
||
propertyStatus: '0'
|
||
});
|
||
|
||
function getInfo() {
|
||
if (route.query.id) {
|
||
id.value = route.query.id as string;
|
||
getParkingReviewInfo(id.value).then((res) => {
|
||
if (res.data.car) {
|
||
res.data.car.carImageUrlList = res.data.car.carImageUrl.split(',').filter(Boolean) ?? [];
|
||
}
|
||
parkingReviewInfo.value = res.data;
|
||
handleActiveStaus(res.data.parkingReviewProcess);
|
||
});
|
||
}
|
||
}
|
||
getInfo();
|
||
|
||
// 处理审核进度
|
||
function handleActiveStaus(rows: parkingReviewProcess) {
|
||
if (!rows) {
|
||
activeStop.value = 0;
|
||
active.value = 0;
|
||
return;
|
||
}
|
||
|
||
// 提交
|
||
if (rows.submitStatus === submitStatus.unSubmit) {
|
||
activeStop.value = 0;
|
||
active.value = 0; // 未提交信息
|
||
} else if (rows.submitStatus === submitStatus.Submitted) {
|
||
active.value = 1; // 提交信息
|
||
activeStop.value = 1;
|
||
|
||
// 审核
|
||
if (rows.propertyStatus === ReviewStatus.awaitReview) {
|
||
active.value = 2; // 待审核
|
||
} else if (rows.propertyStatus === ReviewStatus.unReviewPass) {
|
||
active.value = 3; // 审核不通过
|
||
} else if (rows.propertyStatus === ReviewStatus.ReviewPass) {
|
||
active.value = 4; // 审核通过
|
||
activeStop.value = 2;
|
||
|
||
// 认证
|
||
if (rows.certificationStatus === certificationStatus.uncertification) {
|
||
active.value = 5; // 未认证
|
||
} else if (rows.certificationStatus === certificationStatus.uncertificationPass) {
|
||
active.value = 5; // 未认证
|
||
} else if (rows.certificationStatus === certificationStatus.Certification) {
|
||
active.value = 6; // 已认证
|
||
activeStop.value = 4;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 审核状态
|
||
// 物业审核状态 0 待审核 1审核通过 2审核未通过
|
||
function handlePreview(status: number) {
|
||
getParkingReview({
|
||
...form.value,
|
||
propertyStatus: status,
|
||
id: parkingReviewInfo.value.parkingReviewProcess.id
|
||
}).then(() => {
|
||
ElMessage.success('操作成功');
|
||
handleBack();
|
||
});
|
||
}
|
||
|
||
// 返回
|
||
function handleBack() {
|
||
router.back();
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.ResidentMainBox {
|
||
display: flex;
|
||
flex-direction: column;
|
||
.ResidentMainBody {
|
||
flex: 1;
|
||
margin-top: 20px;
|
||
.CarInfoBox {
|
||
&.gridBox {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
grid-template-rows: repeat(3, 1fr);
|
||
gap: 20px;
|
||
row-gap: 40px;
|
||
}
|
||
.carInfo_item {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 14px;
|
||
.label {
|
||
font-weight: 600;
|
||
width: 120px;
|
||
text-align: right;
|
||
padding-right: 10px;
|
||
}
|
||
.carInfoImage {
|
||
width: 200px;
|
||
height: 100px;
|
||
}
|
||
}
|
||
}
|
||
&: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>
|