357 lines
10 KiB
Vue
357 lines
10 KiB
Vue
<template>
|
||
<div class="wrap">
|
||
<div class="navBar">
|
||
<van-nav-bar
|
||
title="车辆维保"
|
||
left-arrow
|
||
left-arrow-color="#FFFFFF"
|
||
:border="false"
|
||
:fixed="true"
|
||
:safe-area-inset-top="true"
|
||
@click-left="goPrePage"
|
||
/>
|
||
</div>
|
||
<div class="flowWrap">
|
||
<div class="detailInfo">
|
||
<div class="line1">
|
||
<div class="leftTitle commonTitle">{{ rowInfo.stage }}:</div>
|
||
<div class="right">
|
||
<img class="commonImg" :src="getStatus(detailInfo.states)">
|
||
<div :class="getStatusColor(detailInfo.states)" >{{detailInfo.statesStr}}</div>
|
||
</div>
|
||
</div>
|
||
<div class="line"></div>
|
||
<div ><span class="opa">车辆名称:</span><span>{{ detailInfo.vehicleName }}</span></div>
|
||
<div><span class="opa">车牌号:</span><span>{{ detailInfo.plateNumber }}</span></div>
|
||
<!-- 审批中，通过，终止-->
|
||
<div class="shopName" v-if="[1,2,3].includes(detailInfo.states)"><span class="opa">门店信息:</span><span>{{detailInfo.address || ''}}</span></div>
|
||
<div class="shopImgList">
|
||
<template v-if="detailInfo.storePhotoUrls.indexOf(',') !== -1">
|
||
<div v-for="(item,index) in (detailInfo.storePhotoUrls?.split(','))" :key="index">
|
||
<img :src="item" @click="previewPhoto(item)">
|
||
</div>
|
||
</template>
|
||
<template v-else>
|
||
<img :src="detailInfo.storePhotoUrls" @click="previewPhoto(detailInfo.storePhotoUrls)">
|
||
</template>
|
||
<!-- <img :src="detailInfo.storePhotoUrls" @click="previewPhoto(detailInfo.storePhotoUrls)">-->
|
||
</div>
|
||
<!-- 不通过-->
|
||
<div v-if="noPassStatus"><span class="opa">车辆里程:</span><span>{{ detailInfo.mileage?.toFixed(2) ||'' }}km</span></div>
|
||
<div v-if="noPassStatus"><span class="opa">结算类型:</span><span>月结</span></div>
|
||
<div v-if="noPassStatus"><span class="opa">维修金额:</span><span>{{ detailInfo.amount || ''}}元</span></div>
|
||
<div v-if="noPassStatus" class="shopName"><span class="opa">维保项目:</span><span class="project">{{ detailInfo.information ||'' }}</span></div>
|
||
</div>
|
||
<!-- 不通过-->
|
||
<div class="detailInfo" v-if="noPassStatus">
|
||
<div class="line1">
|
||
<div class="leftTitle commonTitle">维保项目照片:</div>
|
||
</div>
|
||
<div class="shopImgList">
|
||
<template v-if="detailInfo.maintenancePhotoUrls.indexOf(',') !== -1">
|
||
<div v-for="(item,index) in (detailInfo.maintenancePhotoUrls?.split(','))" :key="index">
|
||
<img :src="item" @click="previewPhoto(item)">
|
||
</div>
|
||
</template>
|
||
<template v-else>
|
||
<img :src="detailInfo.maintenancePhotoUrls" @click="previewPhoto(detailInfo.maintenancePhotoUrls)">
|
||
</template>
|
||
<!-- <img :src="detailInfo.maintenancePhotoUrls">-->
|
||
</div>
|
||
</div>
|
||
<div class="detailInfo" v-if="noPassStatus">
|
||
<div class="line1">
|
||
<div class="leftTitle commonTitle">维保清单/凭证照片:</div>
|
||
</div>
|
||
<div class="shopImgList">
|
||
<template v-if="detailInfo.voucherPhotoUrls.indexOf(',') !== -1">
|
||
<div v-for="(item,index) in (detailInfo.voucherPhotoUrls?.split(','))" :key="index">
|
||
<img :src="item" @click="previewPhoto(item)">
|
||
</div>
|
||
</template>
|
||
<template v-else>
|
||
<img :src="detailInfo.voucherPhotoUrls" @click="previewPhoto(detailInfo.voucherPhotoUrls)">
|
||
</template>
|
||
<!-- <img :src="detailInfo.voucherPhotoUrls">-->
|
||
</div>
|
||
</div>
|
||
<!-- 维保申请审批中，维保完成审批中 -->
|
||
<div class="approvalContent" v-if="detailInfo.states == 1 || detailInfo.states == 4">
|
||
<div class="title commonTitle">审批意见：</div>
|
||
<textarea class="multiple" placeholder="输入意见" v-model="auditRemark"></textarea>
|
||
</div>
|
||
<!--审批意见显示： 只要不是审批中状态-->
|
||
<div class="resultWrap" v-if="!(detailInfo.states == 1 || detailInfo.states == 4)">
|
||
<div class="result">
|
||
<div class="title commonTitle">审批意见：</div>
|
||
<div class="right">
|
||
<img class="commonImg" :src="getStatus(detailInfo.states)">
|
||
<div :class="getStatusColor(detailInfo.states)" >{{detailInfo.statesStr}}</div>
|
||
</div>
|
||
</div>
|
||
<div :class="getStatusColor(detailInfo.states)" class="time">{{ detailInfo.createTime }} {{detailInfo.statesStr}}</div>
|
||
<!-- 完成不通过-->
|
||
<div class="line" v-if="detailInfo.states==2 || detailInfo.states==5"></div>
|
||
<div class="reason" v-if="detailInfo.states==2 || detailInfo.states==5">{{detailInfo.auditRemark}}</div>
|
||
</div>
|
||
</div>
|
||
<!-- 维保申请审批中，维保完成审批中-->
|
||
<div class="btnWrap" v-if="detailInfo.states==1 || detailInfo.states==4">
|
||
<div class="noPass" @click="approvalHandle(0)">不通过</div>
|
||
<div class="pass" @click="approvalHandle(1)">通过</div>
|
||
</div>
|
||
<!-- 维保申请通过 -->
|
||
<div class="btnWrap" v-if="detailInfo.states == 3">
|
||
<div class="stoping pass" @click="show=true">维保终止</div>
|
||
</div>
|
||
<van-dialog v-model="show" title="请确认是否终止维保" show-cancel-button @confirm="handleConfirm"></van-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {getVehicleMaintenanceDetail,vehicleMaintenanceStop,vehicleMaintenanceApproval} from "@/api/maintenance"
|
||
import {myMixins} from "@/utils/myMixins"
|
||
import { ImagePreview } from "vant";
|
||
export default {
|
||
name: "maintenance-application",
|
||
mixins:[myMixins],
|
||
data() {
|
||
return {
|
||
rowInfo:'',
|
||
noClick:true,
|
||
detailInfo:'',
|
||
show:false,
|
||
auditRemark:'',
|
||
// activeIndex:'',
|
||
}
|
||
},
|
||
mounted() {
|
||
this.rowInfo=this.$route.params.info
|
||
this.getDetail()
|
||
},
|
||
computed: {
|
||
// 维保申请不通过，维保完成不通过
|
||
noPassStatus(){
|
||
return this.detailInfo.states===5
|
||
},
|
||
},
|
||
methods: {
|
||
goPrePage(){
|
||
this.$router.push({
|
||
name: 'vehicleMaintenanceList',
|
||
params: {
|
||
activeIndex:this.$route.params?.activeIndex,
|
||
}
|
||
});
|
||
},
|
||
previewPhoto(url) {
|
||
let urls=[]
|
||
// this.auditPhotoList.forEach((item)=>{
|
||
urls.push(url)
|
||
// })
|
||
ImagePreview({
|
||
images: url,
|
||
startPosition: 0,
|
||
closeable: true,
|
||
});
|
||
|
||
},
|
||
async handleConfirm(){
|
||
let res=await vehicleMaintenanceStop({id:this.rowInfo.id, vehicleId:this.rowInfo.vehicleId})
|
||
if (res.code==200){
|
||
this.show=false
|
||
await this.getDetail();
|
||
}
|
||
},
|
||
async approvalHandle(approvalType){
|
||
let res=await vehicleMaintenanceApproval({
|
||
id:this.rowInfo.id,
|
||
vehicleId:this.rowInfo.vehicleId,
|
||
auditResult:approvalType,
|
||
auditRemark:this.auditRemark,
|
||
})
|
||
if(res.code==200){
|
||
await this.getDetail();
|
||
}
|
||
},
|
||
// 1申请审批，2申请不通过，3申请通过，4完成审批中，5完成不通过，6完成通过，9维保终止
|
||
getStatusColor(i){
|
||
switch (i){
|
||
case 1://
|
||
case 4://
|
||
return 'yelColor'
|
||
case 2://
|
||
case 5://
|
||
return 'redColor'
|
||
case 3://
|
||
case 6://
|
||
return 'greColor'
|
||
case 9://
|
||
return 'garyColor'
|
||
default:
|
||
return 'yelColor'
|
||
}
|
||
},
|
||
getStatus(i){
|
||
switch (i){
|
||
case 1://
|
||
case 4://
|
||
return require('@/assets/waitSubmit.png')
|
||
case 2://审核通过
|
||
case 5://已打款
|
||
return require('@/assets/unpass.png')
|
||
case 3://
|
||
case 6://
|
||
return require('@/assets/dakuan.png')
|
||
case 9://报销失败
|
||
return require('@/assets/unSubmit.png')
|
||
default:
|
||
return require('@/assets/waitSubmit.png')
|
||
}
|
||
},
|
||
async getDetail() {
|
||
let res=await getVehicleMaintenanceDetail ({
|
||
id:this.rowInfo.id,
|
||
vehicleId:this.rowInfo.vehicleId,
|
||
})
|
||
if(res.code===200 && res.data){
|
||
this.detailInfo=res.data
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
@import "@/styles/mixin.scss";
|
||
@import "@/styles/common.scss";
|
||
@import "@/styles/approval.scss";
|
||
.wrap{
|
||
background-color: #F4F5F7;
|
||
}
|
||
.flowWrap{
|
||
height: calc(100% - 120px);
|
||
overflow-y: auto;
|
||
}
|
||
.line{
|
||
margin: 5px 0;
|
||
width: 325px;
|
||
border-bottom: 2px solid;
|
||
opacity: 0.16;
|
||
border-image: linear-gradient(270deg, rgba(217, 217, 217, 0.6), rgba(178, 178, 178, 1), rgba(178, 178, 178, 1), rgba(217, 217, 217, 0.6)) 1 1;
|
||
}
|
||
.commonTitle{
|
||
@include fontWeightSize(14px,bold);
|
||
@include colHeight( #323643,20px);
|
||
}
|
||
.detailInfo{
|
||
width: 100%;
|
||
background: #FFFFFF;
|
||
@include sizing4Padding(13px,25px,14px,24px);
|
||
margin-bottom: 10px;
|
||
.line1{
|
||
@include flexColBet;
|
||
line-height: 23px;
|
||
.leftTitle{
|
||
opacity: .66;
|
||
}
|
||
.right{
|
||
@include flexCenter;
|
||
}
|
||
}
|
||
.opa{
|
||
display: inline-block;
|
||
width: 60px;
|
||
@include colorOpa(#000000,.5);
|
||
font-size: 12px;
|
||
line-height: 27px;
|
||
}
|
||
.shopName{
|
||
display: flex;
|
||
align-items: baseline;
|
||
}
|
||
.project{
|
||
color: #E8A524;
|
||
width: calc(100% - 60px);
|
||
}
|
||
.shopImgList{
|
||
margin-top: 6px;
|
||
@include flexColBet;
|
||
flex-wrap: wrap;
|
||
img{
|
||
background: #FAFAFA;
|
||
border-radius: 3px;
|
||
border: 1px solid #EAEAEA;
|
||
backdrop-filter: blur(10px);
|
||
@include wh(154px,93px);
|
||
margin-bottom: 10px;
|
||
}
|
||
}
|
||
}
|
||
.approvalContent{
|
||
background-color: #FFFFFF;
|
||
width: 100%;
|
||
@include sizing4Padding(13px,25px,24px,25px);
|
||
.title {
|
||
margin-bottom: 8px;
|
||
}
|
||
.multiple{
|
||
@include wh(100%,125px);
|
||
background: #FAFAFA;
|
||
border: 1px solid #E6E6E6;
|
||
backdrop-filter: blur(10px);
|
||
@include sizingPadRadius(7px,10px,3px);
|
||
}
|
||
}
|
||
.resultWrap{
|
||
width: 100%;
|
||
background: #FFFFFF;
|
||
@include sizing4Padding(12px,23px,16px,24px);
|
||
@include flexBetween;
|
||
.title {
|
||
margin-bottom: 8px;
|
||
}
|
||
.result{
|
||
@include flexColBet;
|
||
}
|
||
.right{
|
||
@include flexCenter;
|
||
}
|
||
.commonImg{
|
||
@include widHeiMar(13px,13px,4px);
|
||
}
|
||
.time{
|
||
text-align: right;
|
||
}
|
||
.reason {
|
||
font-size: 13px;
|
||
color: #FF5D2E;
|
||
line-height: 20px;
|
||
}
|
||
}
|
||
.btnWrap{
|
||
@include wh(100%, 54px);
|
||
@include sizingPadding(0,30px);
|
||
@include flexBetCen;
|
||
position: absolute;
|
||
bottom: 12px;
|
||
background-color: #F4F5F7;
|
||
div{
|
||
@include wh(152px, 48px);
|
||
line-height: 48px;
|
||
text-align: center;
|
||
border-radius: 5px;
|
||
@include fontWeightSize(15px,bold);
|
||
color: #FFFFFF;
|
||
}
|
||
.noPass{
|
||
background: #9EA7C0;
|
||
}
|
||
.pass{
|
||
background: #354D93;
|
||
}
|
||
.stoping{
|
||
width: 100% !important;
|
||
}
|
||
}
|
||
</style> |