429 lines
12 KiB
Vue
429 lines
12 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>
|
||
<!-- 审批中，通过，终止detailInfo.states ==1 || detailInfo.states ==2 ||detailInfo.states ==3-->
|
||
<div class="shopName" v-if="[1,2,3].includes(detailInfo.states)"><span class="opa" >门店信息:</span><span class="textarea">{{detailInfo.repairPoint || ''}}</span></div>
|
||
<div class="shopImgList" v-if="[1,2,3].includes(detailInfo.states)">
|
||
<template v-if="detailInfo.storePhotoUrls && 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>
|
||
<div v-if="!detailInfo.storePhotoUrls"></div>
|
||
<img v-else :src="detailInfo.storePhotoUrls" @click="previewPhoto(detailInfo.storePhotoUrls)">
|
||
</template>
|
||
</div>
|
||
<!-- 不通过-->
|
||
<div v-if="noPassStatus"><span class="opa">车辆里程:</span><span>{{ parseInt(detailInfo.mileage) || '' }}km</span></div>
|
||
<div v-if="noPassStatus"><span class="opa">结算类型:</span><span>{{ detailInfo.paymentType?.label || '' }}</span></div>
|
||
<div v-if="noPassStatus && detailInfo.paymentType?.code !=2"><span class="opa">维修金额:</span><span>{{ detailInfo.amount || ''}}元</span></div>
|
||
<div v-if="noPassStatus && detailInfo.paymentType?.code !=2" class="shopName"><span class="opa">维保项目:</span><span class="project textarea">{{ detailInfo.information ||'' }}</span></div>
|
||
</div>
|
||
<!-- 不通过-->
|
||
<div class="detailInfo" v-if="noPassStatus && detailInfo.paymentType?.code !=2">
|
||
<div class="line1">
|
||
<div class="leftTitle commonTitle">维保项目照片:</div>
|
||
</div>
|
||
<div class="shopImgList">
|
||
<template v-if="detailInfo.maintenancePhotoUrls && 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>
|
||
<div v-if="!detailInfo.maintenancePhotoUrls"></div>
|
||
<img v-else :src="detailInfo.maintenancePhotoUrls" @click="previewPhoto(detailInfo.maintenancePhotoUrls)">
|
||
</template>
|
||
</div>
|
||
</div>
|
||
<div class="detailInfo" v-if="noPassStatus && detailInfo.paymentType?.code !=2">
|
||
<div class="line1">
|
||
<div class="leftTitle commonTitle">维保清单/凭证照片:</div>
|
||
</div>
|
||
<div class="shopImgList">
|
||
<template v-if="detailInfo.voucherPhotoUrls && 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>
|
||
<div v-if="!detailInfo.voucherPhotoUrls"></div>
|
||
<img v-else :src="detailInfo.voucherPhotoUrls" @click="previewPhoto(detailInfo.voucherPhotoUrls)">
|
||
</template>
|
||
</div>
|
||
</div>
|
||
<!-- 维保申请审批中，维保完成审批中, -->
|
||
<div class="approvalContent" v-if="[1,4].includes(detailInfo.states)">
|
||
<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.auditRemark"></div>
|
||
<div class="reason" v-if="detailInfo.auditRemark">{{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>
|
||
<div class="dialogWrap" v-if="show">
|
||
<div class="title">维保终止 </div>
|
||
<div class="textWrap">
|
||
<textarea class="ipt" placeholder="请输入终止原因" v-model="reason"></textarea>
|
||
</div>
|
||
<div class="btnWrap">
|
||
<div class="noPass" @click="cancelHandle">取消</div>
|
||
<div class="pass" @click="handleConfirm">确定</div>
|
||
</div>
|
||
</div>
|
||
</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:'',
|
||
reason:'',
|
||
status:'',
|
||
// activeIndex:'',
|
||
}
|
||
},
|
||
mounted() {
|
||
this.rowInfo=this.$route.params.info
|
||
this.status=this.$route.params.status
|
||
this.getDetail()
|
||
},
|
||
computed: {
|
||
// 维保申请不通过，维保完成不通过
|
||
noPassStatus(){
|
||
return this.detailInfo.states===5 || this.detailInfo.states===4 || this.detailInfo.states===6;
|
||
},
|
||
},
|
||
methods: {
|
||
goPrePage(){
|
||
this.$router.push({
|
||
name: 'vehicleMaintenanceList',
|
||
params: {
|
||
activeIndex:this.$route.params?.activeIndex,
|
||
status:this.status,
|
||
}
|
||
});
|
||
},
|
||
previewPhoto(url) {
|
||
let urls=[]
|
||
// this.auditPhotoList.forEach((item)=>{
|
||
urls.push(url)
|
||
// })
|
||
ImagePreview({
|
||
images: urls,
|
||
startPosition: 0,
|
||
closeable: true,
|
||
});
|
||
|
||
},
|
||
cancelHandle(){
|
||
this.show=false
|
||
console.log('this.show0',this.show)
|
||
},
|
||
async handleConfirm(){
|
||
let res=await vehicleMaintenanceStop({id:this.rowInfo.id, vehicleId:this.rowInfo.vehicleId, auditRemark:this.reason,})
|
||
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 ''
|
||
}
|
||
},
|
||
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 ''
|
||
}
|
||
},
|
||
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";
|
||
.dialogWrap{
|
||
position:absolute ;
|
||
top: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
margin: auto;
|
||
z-index: 111;
|
||
width: 326px;
|
||
box-sizing: border-box;
|
||
height: 180px;
|
||
background: #F1F5F7;
|
||
box-shadow: 0px 6px 21px 0px rgba(0,0,0,0.3);
|
||
border-radius: 6px;
|
||
.title{
|
||
width: 100%;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
text-align: center;
|
||
background: #E3ECF1;
|
||
border-radius: 6px 6px 0px 0px;
|
||
@include fontWeightSize(16px,bold);
|
||
color: #262628;
|
||
}
|
||
.textWrap{
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 15px 25px;
|
||
.ipt{
|
||
width: 100%;
|
||
height: 52px;
|
||
box-sizing: border-box;
|
||
padding-left: 5px;
|
||
background: #ECF4F9;
|
||
border-radius: 3px;
|
||
border: 1px solid #3364B7;
|
||
backdrop-filter: blur(10px);
|
||
}
|
||
}
|
||
.btnWrap div{
|
||
width: 130px;
|
||
@include all-height(40px);
|
||
}
|
||
|
||
}
|
||
::v-deep .van-field__control{
|
||
border: 1px solid #eee8e8 !important;
|
||
}
|
||
.navBar{
|
||
margin-bottom: 46px;
|
||
}
|
||
.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{
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: baseline;
|
||
.textarea{
|
||
width: calc(100% - 60px);
|
||
}
|
||
}
|
||
.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> |