|
|
|
@ -14,32 +14,38 @@ |
|
|
|
v-for="(item, index) in dataList" |
|
|
|
:key="index" |
|
|
|
> |
|
|
|
<div |
|
|
|
class="tit el-flex el-flex-y-center model" |
|
|
|
:style="{ backgroundColor: item.bgColor }" |
|
|
|
> |
|
|
|
<el-image |
|
|
|
style="height: 28px; margin-right: 13px" |
|
|
|
:src="item.imageSrc" |
|
|
|
></el-image |
|
|
|
><span>{{ item.title }}</span> |
|
|
|
<div class="checkout-process-container"> |
|
|
|
<div class="el-flex el-flex-y-center" v-if="item.isShow"> |
|
|
|
<div |
|
|
|
class="tit el-flex el-flex-y-center model" |
|
|
|
:style="{ backgroundColor: item.bgColor }" |
|
|
|
> |
|
|
|
<el-image |
|
|
|
style="height: 28px; margin-right: 13px" |
|
|
|
:src="item.imageSrc" |
|
|
|
></el-image |
|
|
|
><span>{{ item.title }}</span> |
|
|
|
<div class="checkout-process-container"> |
|
|
|
<el-image |
|
|
|
class="el-flex el-flex-y-center el-flex-center checkout-process" |
|
|
|
style="height: 26px" |
|
|
|
:src="susIcon" |
|
|
|
v-if="stepCompleted[index]" |
|
|
|
></el-image> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="arrow-container"> |
|
|
|
<el-image |
|
|
|
class="el-flex el-flex-y-center el-flex-center checkout-process" |
|
|
|
style="height: 26px" |
|
|
|
:src="susIcon" |
|
|
|
v-if="stepCompleted[index]" |
|
|
|
class="el-flex el-flex-y-center el-flex-center" |
|
|
|
style="height: 28px; margin-left: 13px" |
|
|
|
:src="stepCompleted[index] ? arrowActive : arrow" |
|
|
|
v-if=" |
|
|
|
index < dataList.length - 1 && |
|
|
|
(index !== dataList.length - 2 || |
|
|
|
dataList[dataList.length - 1].isShow) |
|
|
|
" |
|
|
|
></el-image> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="arrow-container"> |
|
|
|
<el-image |
|
|
|
class="el-flex el-flex-y-center el-flex-center" |
|
|
|
style="height: 28px; margin-left: 13px" |
|
|
|
:src="stepCompleted[index] ? arrowActive : arrow" |
|
|
|
v-if="index < dataList.length - 1" |
|
|
|
></el-image> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 信息确认 --> |
|
|
|
@ -89,9 +95,9 @@ |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
|
|
|
|
<el-form-item> |
|
|
|
<el-form-item v-if="Object.keys(baseInfo).length > 0"> |
|
|
|
<el-row :gutter="30"> |
|
|
|
<el-col :span="6"> 姓名：{{ baseInfo.graduateName }} </el-col> |
|
|
|
<el-col :span="6"> 姓名： {{ baseInfo.graduateName }} </el-col> |
|
|
|
<el-col :span="6"> |
|
|
|
性别：{{ |
|
|
|
baseInfo.gender === 1 |
|
|
|
@ -124,7 +130,7 @@ |
|
|
|
</el-row> |
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
<el-row> |
|
|
|
<el-row v-if="Object.keys(baseInfo).length > 0"> |
|
|
|
<el-col :span="24"> |
|
|
|
<el-form-item class="el-ml-3" label="退房类型"> |
|
|
|
<el-radio-group v-model="queryParams.checkOutType"> |
|
|
|
@ -157,7 +163,7 @@ |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
<el-col :span="24" v-if="queryParams.checkOutType === 1"> |
|
|
|
<el-form-item label="备注"> |
|
|
|
<el-form-item label="备注" prop="forceCheckoutDesc"> |
|
|
|
<el-input |
|
|
|
type="textarea" |
|
|
|
v-model="queryParams.forceCheckoutDesc" |
|
|
|
@ -172,33 +178,53 @@ |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 房间检查 --> |
|
|
|
<el-form size="small" label-width="80px"> |
|
|
|
<div v-if="currentStep === 2 || currentStep === 3 || currentStep === 4"> |
|
|
|
<el-form |
|
|
|
size="small" |
|
|
|
label-width="80px" |
|
|
|
ref="checkForm" |
|
|
|
:model="form" |
|
|
|
:rules="checkrules" |
|
|
|
> |
|
|
|
<div v-if="currentStep != 1"> |
|
|
|
<div class="el-my-3"> |
|
|
|
<CommonTitle>退房信息</CommonTitle> |
|
|
|
</div> |
|
|
|
<el-form-item> |
|
|
|
<el-row :gutter="30"> |
|
|
|
<el-col :span="8"> |
|
|
|
<el-row :gutter="30" style="margin-bottom: 52px"> |
|
|
|
<el-col :span="7"> |
|
|
|
入住房间：{{ |
|
|
|
(baseInfo.apartmentName || "") + |
|
|
|
(baseInfo.buildingName || "") + |
|
|
|
(baseInfo.unit_name || "") + |
|
|
|
(baseInfo.houseName || "") + |
|
|
|
(baseInfo.roomTypeName || "") |
|
|
|
(baseInfo.buildingName || "") + |
|
|
|
(baseInfo.unit_name || "") + |
|
|
|
(baseInfo.houseName || "") + |
|
|
|
(baseInfo.roomTypeName || "") || |
|
|
|
$route.query.userInfo.roomNamePath |
|
|
|
}} |
|
|
|
</el-col> |
|
|
|
<el-col :span="3"> 姓名：{{ baseInfo.graduateName }} </el-col> |
|
|
|
<el-col :span="3"> |
|
|
|
姓名：{{ |
|
|
|
baseInfo.graduateName || $route.query.userInfo.graduateName |
|
|
|
}} |
|
|
|
</el-col> |
|
|
|
<el-col :span="2"> |
|
|
|
性别：{{ |
|
|
|
baseInfo.gender === 1 |
|
|
|
baseInfo.gender === 1 || $route.query.userInfo.gender == 1 |
|
|
|
? "男" |
|
|
|
: baseInfo.gender === 2 |
|
|
|
? "女" |
|
|
|
: "" |
|
|
|
}} |
|
|
|
</el-col> |
|
|
|
<el-col :span="6"> 手机号：{{ baseInfo.telephone }}</el-col> |
|
|
|
<el-col :span="6"> |
|
|
|
手机号：{{ |
|
|
|
baseInfo.telephone || $route.query.userInfo.telephone |
|
|
|
}}</el-col |
|
|
|
> |
|
|
|
<el-col :span="6" |
|
|
|
>身份证号：{{ |
|
|
|
baseInfo.idCard || $route.query.userInfo.idCard |
|
|
|
}}</el-col |
|
|
|
> |
|
|
|
</el-row> |
|
|
|
</el-form-item> |
|
|
|
</div> |
|
|
|
@ -247,6 +273,9 @@ |
|
|
|
:before-remove="beforeRemove" |
|
|
|
> |
|
|
|
<i slot="default" class="el-icon-plus"></i> |
|
|
|
<div slot="tip" class="el-upload__tip"> |
|
|
|
最多上传10个附件，支持上传图片和视频。 |
|
|
|
</div> |
|
|
|
<div slot="file" slot-scope="{ file }"> |
|
|
|
<img |
|
|
|
class="el-upload-list__item-thumbnail" |
|
|
|
@ -337,104 +366,11 @@ |
|
|
|
></video> |
|
|
|
</el-dialog> |
|
|
|
</el-form-item> |
|
|
|
<!-- 上传附件 --> |
|
|
|
<!-- <el-form-item label="上传附件"> |
|
|
|
<el-upload |
|
|
|
:file-list="state.photoList" |
|
|
|
:action="state.uploadUrl" |
|
|
|
accept=".jpg,.png,.jpeg,.mp4,.mov,.avi" |
|
|
|
list-type="picture-card" |
|
|
|
:limit="10" |
|
|
|
:on-success="handleUpload" |
|
|
|
:class="state.photoList.length === 10 ? 'hideUpload' : ''" |
|
|
|
<el-form-item prop="agree"> |
|
|
|
<el-checkbox v-model="form.agree" |
|
|
|
>确认以上信息无误，生成“房屋交割单”，由毕业生在微信小程序端签字确认。</el-checkbox |
|
|
|
> |
|
|
|
<i slot="default" class="el-icon-plus"></i> |
|
|
|
<!~~ <template #file="{ file }"> ~~> |
|
|
|
<div slot="file" slot-scope="{file}"> |
|
|
|
<img |
|
|
|
v-if=" |
|
|
|
file && |
|
|
|
file.name && |
|
|
|
typeof file.name === 'string' && |
|
|
|
(file.name.indexOf('.jpg') > -1 || |
|
|
|
file.name.indexOf('.png') > -1 || |
|
|
|
file.name.indexOf('.jpeg') > -1) |
|
|
|
" |
|
|
|
:src="file.url" |
|
|
|
alt="" |
|
|
|
class="el-upload-list__item-thumbnail" |
|
|
|
/> |
|
|
|
<video |
|
|
|
v-else-if=" |
|
|
|
file && |
|
|
|
file.name && |
|
|
|
typeof file.name === 'string' && |
|
|
|
(file.name.indexOf('.mp4') > -1 || |
|
|
|
file.name.indexOf('.mov') > -1 || |
|
|
|
file.name.indexOf('.avi') > -1) |
|
|
|
" |
|
|
|
class="el-upload-list__item-thumbnail" |
|
|
|
style="width: 100%; height: 100%" |
|
|
|
autoplay |
|
|
|
:src="file.url" |
|
|
|
> |
|
|
|
<source :src="file.url" type="video/mp4" /> |
|
|
|
<source :src="file.url" type="video/mov" /> |
|
|
|
<source :src="file.url" type="video/avi" /> |
|
|
|
</video> |
|
|
|
<span class="el-upload-list__item-actions"> |
|
|
|
<span |
|
|
|
class="el-upload-list__item-preview" |
|
|
|
@click="handlePreview(file)" |
|
|
|
> |
|
|
|
<i class="el-icon-zoom-in"></i> |
|
|
|
</span> |
|
|
|
<span |
|
|
|
v-if="!state.disabledBtn" |
|
|
|
class="el-upload-list__item-delete" |
|
|
|
@click="handleRemove(file)" |
|
|
|
> |
|
|
|
<i class="el-icon-delete"></i> |
|
|
|
</span> |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
<!~~ </template> ~~> |
|
|
|
</el-upload> |
|
|
|
<el-dialog v-model="state.dialogVisible"> |
|
|
|
<img |
|
|
|
w-full |
|
|
|
:src="state.dialogImageFile.url" |
|
|
|
alt="" |
|
|
|
v-if=" |
|
|
|
state.dialogImageFile && |
|
|
|
state.dialogImageFile.name && |
|
|
|
typeof state.dialogImageFile.name === 'string' && |
|
|
|
(state.dialogImageFile.name.indexOf('.jpg') > -1 || |
|
|
|
state.dialogImageFile.name.indexOf('.png') > -1 || |
|
|
|
state.dialogImageFile.name.indexOf('.jpeg') > -1) |
|
|
|
" |
|
|
|
/> |
|
|
|
<video |
|
|
|
v-else-if=" |
|
|
|
state.dialogImageFile && |
|
|
|
state.dialogImageFile.name && |
|
|
|
typeof state.dialogImageFile.name === 'string' && |
|
|
|
(state.dialogImageFile.name.indexOf('.mp4') > -1 || |
|
|
|
state.dialogImageFile.name.indexOf('.mov') > -1 || |
|
|
|
state.dialogImageFile.name.indexOf('.avi') > -1) |
|
|
|
" |
|
|
|
w-full |
|
|
|
style="width: 100%; height: 100%" |
|
|
|
controls |
|
|
|
autoplay |
|
|
|
:src="state.dialogImageFile.url" |
|
|
|
> |
|
|
|
<source :src="state.dialogImageFile.url" type="video/mp4" /> |
|
|
|
<source :src="state.dialogImageFile.url" type="video/mov" /> |
|
|
|
<source :src="state.dialogImageFile.url" type="video/avi" /> |
|
|
|
</video> |
|
|
|
</el-dialog> |
|
|
|
</el-form-item>--> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
</div> |
|
|
|
@ -533,7 +469,12 @@ |
|
|
|
</el-row> |
|
|
|
</el-form> |
|
|
|
<!-- 释放房源 --> |
|
|
|
<!-- <el-form size="small" label-width="120px" v-if="currentStep === 4"> |
|
|
|
<el-form |
|
|
|
size="small" |
|
|
|
label-width="120px" |
|
|
|
ref="relaseForm" |
|
|
|
v-if="currentStep === 5" |
|
|
|
> |
|
|
|
<div class="el-my-3 el-flex"> |
|
|
|
<CommonTitle>释放房源</CommonTitle> |
|
|
|
<span style="color: red; font-size: 14px" |
|
|
|
@ -541,48 +482,85 @@ |
|
|
|
> |
|
|
|
</div> |
|
|
|
<el-row> |
|
|
|
<el-col v-for="(item, index) in checkItems" :key="index" :span="6"> |
|
|
|
<el-form-item :label="item"> |
|
|
|
<el-col |
|
|
|
v-for="(item, index) in relaseForm.facilitiesCheckResults" |
|
|
|
:key="index" |
|
|
|
:span="6" |
|
|
|
> |
|
|
|
<el-form-item :label="item.facilityId"> |
|
|
|
<el-select |
|
|
|
v-model="checkStatus[`${item}Status`]" |
|
|
|
v-model="releaseCheckStatus[index]" |
|
|
|
placeholder="请选择" |
|
|
|
> |
|
|
|
<el-option label="完好" value="intact"></el-option> |
|
|
|
<el-option label="破损" value="damaged"></el-option> |
|
|
|
<el-option label="完好" value="1"></el-option> |
|
|
|
<el-option label="破损" value="2"></el-option> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
<!~~ 其他说明 ~~> |
|
|
|
<!-- 其他说明 --> |
|
|
|
<el-col :span="16"> |
|
|
|
<el-form-item label="其他说明"> |
|
|
|
<el-input |
|
|
|
type="textarea" |
|
|
|
v-model="form.remark" |
|
|
|
v-model="relaseForm.facilitiesCheckDesc" |
|
|
|
placeholder="其他详细说明(不超过500字)" |
|
|
|
clearable |
|
|
|
disabled |
|
|
|
style="width: 240px" |
|
|
|
/> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
<!~~ 查看附件 ~~> |
|
|
|
<el-col :span="24"> |
|
|
|
<!-- 查看附件 --> |
|
|
|
<el-col :span="24"> |
|
|
|
<el-form-item label="查看附件"> |
|
|
|
<el-upload |
|
|
|
action="#" |
|
|
|
class="disable" |
|
|
|
action="uploadUlr" |
|
|
|
list-type="picture-card" |
|
|
|
:auto-upload="false" |
|
|
|
:disabled="true" |
|
|
|
:headers="$getElUploadHeaders()" |
|
|
|
:on-exceed="handleExceed" |
|
|
|
:limit="10" |
|
|
|
:file-list="fileList" |
|
|
|
:file-list="relaseForm.facilitiesCheckImages" |
|
|
|
accept="image/*,video/*" |
|
|
|
> |
|
|
|
<i slot="default" class="el-icon-plus"></i> |
|
|
|
<!-- <i slot="default" class="el-icon-plus"></i> --> |
|
|
|
<template #default></template> |
|
|
|
<div slot="file" slot-scope="{ file }"> |
|
|
|
<img |
|
|
|
class="el-upload-list__item-thumbnail" |
|
|
|
v-if=" |
|
|
|
file && |
|
|
|
file.name && |
|
|
|
typeof file.name === 'string' && |
|
|
|
(file.name.indexOf('.jpg') > -1 || |
|
|
|
file.name.indexOf('.png') > -1 || |
|
|
|
file.name.indexOf('.jpeg') > -1) |
|
|
|
" |
|
|
|
style="width: 100%; height: 100%" |
|
|
|
:src="file.url" |
|
|
|
alt="" |
|
|
|
/> |
|
|
|
<video |
|
|
|
v-else-if=" |
|
|
|
file && |
|
|
|
file.name && |
|
|
|
typeof file.name === 'string' && |
|
|
|
(file.name.indexOf('.mp4') > -1 || |
|
|
|
file.name.indexOf('.mov') > -1 || |
|
|
|
file.name.indexOf('.avi') > -1) |
|
|
|
" |
|
|
|
class="el-upload-list__item-thumbnail" |
|
|
|
style="width: 100%; height: 100%" |
|
|
|
:autoplay="false" |
|
|
|
:src="file.url" |
|
|
|
controls="controls" |
|
|
|
> |
|
|
|
<source :src="file.url" type="video/mp4" /> |
|
|
|
<source :src="file.url" type="video/mov" /> |
|
|
|
<source :src="file.url" type="video/avi" /> |
|
|
|
</video> |
|
|
|
<span class="el-upload-list__item-actions"> |
|
|
|
<span |
|
|
|
class="el-upload-list__item-preview" |
|
|
|
@ -590,52 +568,81 @@ |
|
|
|
> |
|
|
|
<i class="el-icon-zoom-in"></i> |
|
|
|
</span> |
|
|
|
<!~~ <span |
|
|
|
<!-- <span |
|
|
|
v-if="!disabled" |
|
|
|
class="el-upload-list__item-delete" |
|
|
|
@click="handleDownload(file)" |
|
|
|
> |
|
|
|
<i class="el-icon-download"></i> |
|
|
|
</span> ~~> |
|
|
|
<span |
|
|
|
</span> --> |
|
|
|
<!-- <span |
|
|
|
v-if="!disabled" |
|
|
|
class="el-upload-list__item-delete" |
|
|
|
@click="handleRemove(file)" |
|
|
|
@click="handleRemoveA(file)" |
|
|
|
> |
|
|
|
<i class="el-icon-delete"></i> |
|
|
|
</span> |
|
|
|
</span> --> |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
</el-upload> |
|
|
|
<el-dialog :visible.sync="dialogVisible"> |
|
|
|
<img |
|
|
|
v-if=" |
|
|
|
dialogImageUrl && |
|
|
|
dialogImageUrl.name && |
|
|
|
typeof dialogImageUrl.name === 'string' && |
|
|
|
(dialogImageUrl.name.indexOf('.jpg') > -1 || |
|
|
|
dialogImageUrl.name.indexOf('.png') > -1 || |
|
|
|
dialogImageUrl.name.indexOf('.jpeg') > -1) |
|
|
|
" |
|
|
|
width="50%" |
|
|
|
height="50%" |
|
|
|
:src="dialogImageUrl.url" |
|
|
|
alt="" |
|
|
|
/> |
|
|
|
<video |
|
|
|
v-if=" |
|
|
|
dialogImageUrl && |
|
|
|
dialogImageUrl.name && |
|
|
|
typeof dialogImageUrl.name === 'string' && |
|
|
|
(dialogImageUrl.name.indexOf('.mp4') > -1 || |
|
|
|
dialogImageUrl.name.indexOf('.mov') > -1 || |
|
|
|
dialogImageUrl.name.indexOf('.avi') > -1) |
|
|
|
" |
|
|
|
class="el-upload-list__item-thumbnail" |
|
|
|
style="width: 50%; height: 50%" |
|
|
|
autoplay |
|
|
|
:src="dialogImageUrl.url" |
|
|
|
controls="controls" |
|
|
|
></video> |
|
|
|
</el-dialog> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
<!~~ 房间卫生 选择器~~> |
|
|
|
<!-- 房间卫生 选择器--> |
|
|
|
<el-col :span="24"> |
|
|
|
<el-form-item label="房间卫生"> |
|
|
|
<el-select v-model="form.forceClearReason" placeholder="请选择"> |
|
|
|
<el-select v-model="relaseForm.cleaned" placeholder="请选择"> |
|
|
|
<el-option label="已打扫" value="1"></el-option> |
|
|
|
<el-option label="未打扫" value="2"></el-option> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
</el-form>--> |
|
|
|
</el-form> |
|
|
|
</div> |
|
|
|
<!-- 添加按钮 --> |
|
|
|
<div class="button-group el-flex el-flex-end"> |
|
|
|
<el-button @click="currentStep === 1 ? handleCancel() : handlePrevStep()"> |
|
|
|
{{ currentStep === 1 ? "取消" : "上一步" }} |
|
|
|
</el-button> |
|
|
|
{{ currentStep }}--{{ dataList.length }} |
|
|
|
{{ currentStep }}-{{ dataList.length }} |
|
|
|
<el-button |
|
|
|
type="primary" |
|
|
|
@click=" |
|
|
|
currentStep === dataList.length - 1 |
|
|
|
? handleReleaseHouse() |
|
|
|
: handleNextStep() |
|
|
|
currentStep === dataList.length - 2 ? handleSuc() : handleNextStep() |
|
|
|
" |
|
|
|
> |
|
|
|
{{ currentStep === dataList.length - 1 ? "办理完成" : "下一步" }} |
|
|
|
{{ currentStep === dataList.length - 2 ? "办理完成" : "下一步" }} |
|
|
|
</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -647,6 +654,8 @@ import { |
|
|
|
getResidentInfo, |
|
|
|
submitCheckout, |
|
|
|
getRoomFacilities, |
|
|
|
getRoomCheckRecDetail, |
|
|
|
releaseRoom, |
|
|
|
} from "@/api/residence/checkout"; |
|
|
|
|
|
|
|
export default { |
|
|
|
@ -663,38 +672,47 @@ export default { |
|
|
|
title: "信息确认", |
|
|
|
imageSrc: require("@/assets/images/address-card.png"), |
|
|
|
bgColor: "#FBEDC8", |
|
|
|
isShow: true, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "房间检查", |
|
|
|
imageSrc: require("@/assets/images/home-smile.png"), |
|
|
|
bgColor: "#FBD5D5", |
|
|
|
isShow: true, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "房屋交割单", |
|
|
|
imageSrc: require("@/assets/images/md-beenhere.png"), |
|
|
|
bgColor: "#C4DEFB ", |
|
|
|
isShow: true, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "退还保证金", |
|
|
|
imageSrc: require("@/assets/images/pay-circle.png"), |
|
|
|
bgColor: "#8BFDD3 ", |
|
|
|
isShow: true, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "办理完成", |
|
|
|
imageSrc: require("@/assets/images/check_circle.png"), |
|
|
|
bgColor: "#CFCDFB ", |
|
|
|
isShow: true, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "释放房源", |
|
|
|
imageSrc: require("@/assets/images/md-beenhere.png"), |
|
|
|
bgColor: "#C4DEFB ", |
|
|
|
isShow: false, |
|
|
|
}, |
|
|
|
], |
|
|
|
susIcon: require("@/assets/images/check-circle-fas.png"), |
|
|
|
arrow: require("@/assets/images/arrow_forward.png"), |
|
|
|
arrowActive: require("@/assets/images/arrow_forward_a.png"), |
|
|
|
// 基本信息 |
|
|
|
baseInfo: { |
|
|
|
houseId: "", // 房屋ID |
|
|
|
}, |
|
|
|
baseInfo: {}, |
|
|
|
//查询参数 |
|
|
|
queryParams: { |
|
|
|
idCard: "370222199101070707", |
|
|
|
idCard: "", |
|
|
|
telphone: "", |
|
|
|
checkOutType: 0, // 默认选中正常退房 |
|
|
|
}, |
|
|
|
@ -706,21 +724,22 @@ export default { |
|
|
|
}, //表单参数 |
|
|
|
// 表单验证规则 |
|
|
|
rules: { |
|
|
|
forceClearReason: [ |
|
|
|
forceCheckoutReason: [ |
|
|
|
{ required: true, message: "请选择强制清退原因", trigger: "change" }, |
|
|
|
], |
|
|
|
}, |
|
|
|
checkrules: { |
|
|
|
agree: [{ required: true, message: "请确认勾选", trigger: "change" }], |
|
|
|
}, |
|
|
|
// 显示搜索条件 |
|
|
|
showSearch: true, |
|
|
|
// 退房类型: 1-正常退房 2-强制退房 |
|
|
|
checkOutType: [ |
|
|
|
{ label: "正常退房", value:0 }, |
|
|
|
{ label: "正常退房", value: 0 }, |
|
|
|
{ label: "强制退房", value: 1 }, |
|
|
|
], |
|
|
|
// 强制清退原因 |
|
|
|
forceClearReason: [ |
|
|
|
{ label: "违法居住条款，故意破坏房间设施", value: 1 }, |
|
|
|
], |
|
|
|
forceClearReason: [{ label: "违法居住条款，故意破坏房间设施", value: 1 }], |
|
|
|
currentStep: 1, // 当前步骤 |
|
|
|
checkItems: [], |
|
|
|
checkStatus: [ |
|
|
|
@ -747,8 +766,27 @@ export default { |
|
|
|
dialogImageUrl: "", // 图片预览对话框的图片 URL |
|
|
|
disabled: false, // 是否禁用上传附件 |
|
|
|
formDataList: [], // 新增：用于存储每一步的表单数据 |
|
|
|
relaseForm: [], //释放房源表单 |
|
|
|
releaseCheckStatus: [], |
|
|
|
}; |
|
|
|
}, |
|
|
|
created() { |
|
|
|
const { showReleaseStep, roomId, userInfo } = this.$route.query; |
|
|
|
if (showReleaseStep) { |
|
|
|
this.currentStep = this.dataList.length - 1; |
|
|
|
this.dataList[this.dataList.length - 1].isShow = true; |
|
|
|
this.stepCompleted = this.dataList.map( |
|
|
|
(_, index) => index < this.currentStep - 1 |
|
|
|
); |
|
|
|
this.getRoomCheckoutDetail(roomId); |
|
|
|
} |
|
|
|
console.log("userInfo::", userInfo); |
|
|
|
|
|
|
|
if (userInfo) { |
|
|
|
this.queryParams.idCard = userInfo.idCard; |
|
|
|
this.handleQuery(); |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
goBack() { |
|
|
|
this.$router.push({ path: "/" }); |
|
|
|
@ -760,7 +798,7 @@ export default { |
|
|
|
getResidentInfo({ idCard, telphone }).then((res) => { |
|
|
|
if (res.code === 200) { |
|
|
|
this.baseInfo = res.data; |
|
|
|
// this.baseInfo.houseId = res.data.houseId |
|
|
|
this.baseInfo.roomId = res.data.roomId; |
|
|
|
this.ongetRoomFacilities(res.data.houseId); |
|
|
|
} |
|
|
|
console.log("查询结果:", res); |
|
|
|
@ -790,49 +828,68 @@ export default { |
|
|
|
// 下一步操作 |
|
|
|
handleNextStep() { |
|
|
|
if (this.currentStep < this.dataList.length) { |
|
|
|
this.currentStep++; |
|
|
|
|
|
|
|
let currentFormData = {}; |
|
|
|
console.log("当前步骤:", this.currentStep); |
|
|
|
switch (this.currentStep) { |
|
|
|
case 1: |
|
|
|
currentFormData = { ...this.queryParams }; |
|
|
|
break; |
|
|
|
|
|
|
|
case 2: |
|
|
|
const facilitiesCheckResults = this.checkItems.map( |
|
|
|
(item, index) => ({ |
|
|
|
facilityId: item.id, |
|
|
|
checkResult: this.checkStatus[index], |
|
|
|
}) |
|
|
|
); |
|
|
|
currentFormData = { |
|
|
|
...this.form, |
|
|
|
facilitiesCheckResults, |
|
|
|
}; |
|
|
|
|
|
|
|
break; |
|
|
|
case 3: |
|
|
|
currentFormData = { ...this.form }; |
|
|
|
break; |
|
|
|
case 4: |
|
|
|
currentFormData = { |
|
|
|
...this.queryParams, |
|
|
|
...this.form, |
|
|
|
}; |
|
|
|
break; |
|
|
|
if (this.currentStep === 1) { |
|
|
|
if (Object.keys(this.baseInfo).length === 0) { |
|
|
|
this.$message.error("请输入身份证或手机号查询信息"); |
|
|
|
return; |
|
|
|
} |
|
|
|
if (this.queryParams.checkOutType === 1) { |
|
|
|
this.$refs["queryForm"].validate(async (valid) => { |
|
|
|
if (!valid) { |
|
|
|
this.$message.error("请选择强制清退原因"); |
|
|
|
return; |
|
|
|
} else { |
|
|
|
this.currentStep++; |
|
|
|
} |
|
|
|
}); |
|
|
|
} else { |
|
|
|
this.currentStep++; |
|
|
|
} |
|
|
|
currentFormData = { ...this.queryParams }; |
|
|
|
} else if (this.currentStep === 2) { |
|
|
|
this.$refs["checkForm"].validate(async (valid) => { |
|
|
|
console.log("valid::", valid); |
|
|
|
if (!valid) { |
|
|
|
this.$message.error("请勾选同意"); |
|
|
|
return; |
|
|
|
} else { |
|
|
|
const facilitiesCheckResults = this.checkItems.map( |
|
|
|
(item, index) => ({ |
|
|
|
facilityId: item.id, |
|
|
|
checkResult: this.checkStatus[index], |
|
|
|
}) |
|
|
|
); |
|
|
|
currentFormData = { |
|
|
|
...this.queryParams, |
|
|
|
...this.form, |
|
|
|
facilitiesCheckResults, |
|
|
|
}; |
|
|
|
console.log("currentFormData::", currentFormData); |
|
|
|
this.submitCheckoutForm(currentFormData); |
|
|
|
this.currentStep++; |
|
|
|
} |
|
|
|
}); |
|
|
|
} else if (this.currentStep === 3) { |
|
|
|
this.currentStep++; |
|
|
|
} else if (this.currentStep === 4) { |
|
|
|
// this.currentStep++; |
|
|
|
// currentFormData = { |
|
|
|
// ...this.queryParams, |
|
|
|
// ...this.form, |
|
|
|
// }; |
|
|
|
} |
|
|
|
// console.log("currentFormData::", currentFormData); |
|
|
|
|
|
|
|
console.log("currentFormData::", currentFormData); |
|
|
|
|
|
|
|
this.formDataList[this.currentStep] = currentFormData; |
|
|
|
// this.formDataList[this.currentStep] = currentFormData; |
|
|
|
|
|
|
|
console.log("formDataList::", this.formDataList); |
|
|
|
const finalData = Object.assign({}, ...this.formDataList); |
|
|
|
console.log("finalData", finalData); |
|
|
|
// console.log("formDataList::", this.formDataList); |
|
|
|
// const finalData = Object.assign({}, ...this.formDataList); |
|
|
|
// console.log("finalData", finalData); |
|
|
|
if (this.currentStep > 1) { |
|
|
|
this.stepCompleted[this.currentStep - 2] = true; |
|
|
|
// if (this.currentStep === 4) { |
|
|
|
// if (this.currentStep === 5) { |
|
|
|
// this.stepCompleted[this.currentStep - 1] = true; |
|
|
|
// } |
|
|
|
console.log("stepCompleted下::", this.stepCompleted); |
|
|
|
@ -849,32 +906,46 @@ export default { |
|
|
|
console.log("获取房间设施"); |
|
|
|
}, |
|
|
|
// 提交表单 |
|
|
|
submitCheckoutForm() { |
|
|
|
console.log("this.formDataList", this.formDataList); |
|
|
|
const facilitiesCheckResults = this.checkItems.map((item, index) => ({ |
|
|
|
facilityId: item.id, |
|
|
|
checkResult: this.checkStatus[index], |
|
|
|
})); |
|
|
|
const formData = { |
|
|
|
...this.queryParams, |
|
|
|
facilitiesCheckResults, |
|
|
|
...this.form, |
|
|
|
}; |
|
|
|
console.log("formData", formData); |
|
|
|
|
|
|
|
submitCheckoutForm(formData) { |
|
|
|
console.log("formParams", formData); |
|
|
|
let formParams = {}; |
|
|
|
if (!formData) { |
|
|
|
const facilitiesCheckResults = this.checkItems.map((item, index) => ({ |
|
|
|
facilityId: item.id, |
|
|
|
checkResult: this.checkStatus[index], |
|
|
|
})); |
|
|
|
formParams = { |
|
|
|
...this.queryParams, |
|
|
|
facilitiesCheckResults, |
|
|
|
...this.form, |
|
|
|
}; |
|
|
|
} else { |
|
|
|
formParams = formData; |
|
|
|
} |
|
|
|
console.log("formParams：：", formParams); |
|
|
|
// const finalData = Object.assign({}, ...this.formDataList); |
|
|
|
// console.log("finalData", finalData); |
|
|
|
submitCheckout(formData).then((response) => { |
|
|
|
console.log("提交结果:", response); |
|
|
|
if (response.code === 200) { |
|
|
|
this.$message.success("提交成功"); |
|
|
|
this.$router.push({ path: "/" }); |
|
|
|
} |
|
|
|
submitCheckout(formParams).then((response) => { |
|
|
|
console.log("提交结果:", response); |
|
|
|
if (response.code === 200) { |
|
|
|
this.$message.success("提交成功"); |
|
|
|
// 设置办理完成步骤对应的 stepCompleted 为 true |
|
|
|
const lastIndex = this.dataList.length - 1; |
|
|
|
this.stepCompleted[lastIndex] = true; |
|
|
|
this.$router.push({ path: "/" }); |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
// 办理完成 |
|
|
|
handleSuc() { |
|
|
|
this.submitCheckoutForm(); |
|
|
|
}, |
|
|
|
|
|
|
|
// 释放房源操作 |
|
|
|
handleReleaseHouse() { |
|
|
|
this.submitCheckoutForm(); |
|
|
|
console.log(this.relaseForm); |
|
|
|
|
|
|
|
releaseRoom(this.relaseForm).then((res) => {}); |
|
|
|
console.log("释放房源操作"); |
|
|
|
}, |
|
|
|
|
|
|
|
@ -952,6 +1023,24 @@ export default { |
|
|
|
console.log("实际赔付金额变为:", value); |
|
|
|
this.form.marginActualCompensation = value; |
|
|
|
}, |
|
|
|
// 房间检查结果 |
|
|
|
async getRoomCheckoutDetail(roomId) { |
|
|
|
try { |
|
|
|
const res = await getRoomCheckRecDetail({ |
|
|
|
roomId: roomId, |
|
|
|
}); |
|
|
|
if (res.code === 200) { |
|
|
|
this.relaseForm = res.data; |
|
|
|
this.releaseCheckStatus = this.relaseForm.facilitiesCheckResults.map( |
|
|
|
(item) => item.checkResult.toString() |
|
|
|
); |
|
|
|
console.log("房间检查结果:", res); |
|
|
|
console.log("房间检查结果:", res); |
|
|
|
} |
|
|
|
} catch (error) { |
|
|
|
console.log(error); |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
// 这里可以定义计算属性 |
|
|
|
@ -984,7 +1073,7 @@ export default { |
|
|
|
margin-top: 20px; |
|
|
|
|
|
|
|
.tit { |
|
|
|
padding: 15px 24px; |
|
|
|
padding: 15px 22px; |
|
|
|
border-radius: 4px; |
|
|
|
} |
|
|
|
.model { |
|
|
|
@ -1006,7 +1095,7 @@ export default { |
|
|
|
.arrow-container { |
|
|
|
width: 42px; |
|
|
|
height: 28px; |
|
|
|
margin-left: 13px; |
|
|
|
//margin-left: 13px; |
|
|
|
display: inline-flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
@ -1038,7 +1127,10 @@ export default { |
|
|
|
justify-content: center; |
|
|
|
align-content: center; |
|
|
|
} |
|
|
|
:v-deep el-textarea__inner { |
|
|
|
::v-deep el-textarea__inner { |
|
|
|
min-height: 200px !important; |
|
|
|
} |
|
|
|
::v-deep .disable .el-upload--picture-card { |
|
|
|
display: none; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
