291 lines
9.7 KiB
Vue
291 lines
9.7 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="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">地下停车场A区</div>
|
||
</div>
|
||
<div class="carinfo_item">
|
||
<div class="label">车位编号：</div>
|
||
<div class="main">地下停车场A区</div>
|
||
</div>
|
||
<div class="carinfo_item">
|
||
<div class="label">车位面积：</div>
|
||
<div class="main">地下停车场A区</div>
|
||
</div>
|
||
<div class="carinfo_item">
|
||
<div class="label">楼层：</div>
|
||
<div class="main">地下停车场A区</div>
|
||
</div>
|
||
<div class="carinfo_item">
|
||
<div class="label">车位类型：</div>
|
||
<div class="main">地下停车场A区</div>
|
||
</div>
|
||
<div class="carinfo_item">
|
||
<div class="label">车位状态：</div>
|
||
<div class="main">地下停车场A区</div>
|
||
</div>
|
||
<div class="carinfo_item">
|
||
<div class="label">持有人：</div>
|
||
<div class="main">地下停车场A区</div>
|
||
</div>
|
||
<div class="carinfo_item">
|
||
<div class="label">添加时间：</div>
|
||
<div class="main">地下停车场A区</div>
|
||
</div>
|
||
<div class="carinfo_item">
|
||
<div class="label">添加人：</div>
|
||
<div class="main">地下停车场A区</div>
|
||
</div>
|
||
<div class="carinfo_item">
|
||
<div class="label">备注：</div>
|
||
<div class="main">地下停车场A区</div>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
</div>
|
||
<!-- 车辆信息 -->
|
||
<div class="mb-10">
|
||
<el-card>
|
||
<template #header>
|
||
<div class="card-header">
|
||
<span>车辆信息</span>
|
||
</div>
|
||
</template>
|
||
<div class="w-full h-full CarinfoBox">
|
||
<el-row>
|
||
<el-col :span="8">
|
||
<div class="carinfo_item">
|
||
<div class="label">车牌号：</div>
|
||
<div class="main">浙B·N6688</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<div class="carinfo_item">
|
||
<div class="label">车辆品牌：</div>
|
||
<div class="main">宝马</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<div class="carinfo_item">
|
||
<div class="label">车辆型号</div>
|
||
<div class="main">X5</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">白色</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<div class="carinfo_item">
|
||
<div class="label">备注：</div>
|
||
<div class="main">无</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
|
||
class="carinfoImage"
|
||
src="https://ts1.tc.mm.bing.net/th?id=ORMS.76ee9c7ea9fe203b608f9048f54b3cbd&pid=Wdp&w=268&h=140&qlt=90&c=1&rs=1&dpr=1&p=0"
|
||
></el-image>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</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 type="textarea" :rows="5"></el-input>
|
||
<div class="actions mt-5">
|
||
<el-button type="primary">审核通过</el-button>
|
||
<el-button type="danger">审核不通过</el-button>
|
||
<el-button @click="handlBacK">返回</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>
|
||
<span v-if="active === 0">未提交信息</span>
|
||
<span v-if="active >= 1">已提交信息</span>
|
||
</template>
|
||
</el-step>
|
||
<el-step :description="reviewInfo.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="reviewInfo.certificationTime">
|
||
<template #title>
|
||
<span v-if="active <= 5">未认证</span>
|
||
<span v-if="active === 6">已认证</span>
|
||
</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';
|
||
/** 住户审核状态 */
|
||
enum reviewStatus {
|
||
/** 未提交 */
|
||
unSubmit = 0,
|
||
/** 已提交 */
|
||
Submited = 1,
|
||
/** 待认证 */
|
||
awaitReview = 2,
|
||
/** 认证不通过 */
|
||
unReviewPass = 3,
|
||
/** 认证通过 */
|
||
ReviewPass = 4,
|
||
/** 未认证 */
|
||
uncertification = 5,
|
||
/** 已认证 */
|
||
Certification = 6
|
||
}
|
||
type activeType = reviewStatus;
|
||
const active = ref<activeType>(6);
|
||
const activeStop = ref(4);
|
||
|
||
function handleActivestaus(rews) {
|
||
if (rews.submitStatus === reviewStatus.unSubmit) {
|
||
activeStop.value = 0;
|
||
active.value = 0;
|
||
} else if (rews.submitStatus === reviewStatus.Submited) {
|
||
active.value = 1;
|
||
activeStop.value = 1;
|
||
// 待认证
|
||
if (rews.propertyStatus === 0) {
|
||
active.value = reviewStatus.awaitReview;
|
||
} else if (rews.propertyStatus === 1) {
|
||
active.value = reviewStatus.unReviewPass;
|
||
} else if (rews.propertyStatus === 2) {
|
||
active.value = reviewStatus.ReviewPass;
|
||
activeStop.value = 2;
|
||
|
||
if (rews.certificationStatus === 0) {
|
||
active.value = reviewStatus.uncertification;
|
||
} else if (rews.certificationStatus === 1) {
|
||
active.value = reviewStatus.Certification;
|
||
activeStop.value = 4;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
const router = useRouter();
|
||
function handlBacK() {
|
||
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(4, 1fr);
|
||
gap: 20px;
|
||
row-gap: 40px;
|
||
}
|
||
.carinfo_item {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 14px;
|
||
.label {
|
||
font-weight: 600;
|
||
width: 80px;
|
||
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>
|