236 lines
6.2 KiB
Vue
236 lines
6.2 KiB
Vue
<template>
|
||
<div class="wrap">
|
||
<div class="navBar">
|
||
<van-nav-bar
|
||
title="车辆维保"
|
||
:left-arrow="isShowBackBtn ? true : false"
|
||
left-arrow-color="#FFFFFF"
|
||
:border="false"
|
||
:fixed="true"
|
||
:safe-area-inset-top="true"
|
||
@click-left="goPrePage"
|
||
/>
|
||
</div>
|
||
<div class="tab_wrap">
|
||
<div v-for="(item, index) in tabArr" :key="index"
|
||
@click="changeTab(index)">
|
||
<span :class="{'active' : activeIndex == index , 'alpha' :true}"> {{ item.name }}</span>
|
||
<span class="numTip" style="opacity: 1 !important;" v-if="index===0 && item.num">{{item.num}}</span>
|
||
</div>
|
||
</div>
|
||
<van-pull-refresh class="refresh" v-model="isLoading" @refresh="onRefresh" v-show="!show">
|
||
<van-list
|
||
v-model="loading"
|
||
:finished="finished"
|
||
finished-text="没有更多了"
|
||
@load="onLoad"
|
||
>
|
||
<div class="listWrap">
|
||
<div class="listItem" @click="noMultipleClicks(goPageDetail,item)" v-for="(item,index) in pageList" :key="index">
|
||
<div class="line1">
|
||
<div class="title">{{item.stage}}</div>
|
||
<div class="right">
|
||
<img class="commonImg" :src="getStatus(item.states?.code)">
|
||
<div :class="getStatusColor(item.states?.code)">{{ item.states?.label }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="driverInfo">{{ item.vehicleName }} / {{ item.plateNumber }}</div>
|
||
<div class="time">{{ item.createTime }}</div>
|
||
</div>
|
||
</div>
|
||
</van-list>
|
||
</van-pull-refresh>
|
||
<div class="bgEmptyImg" v-show="show" >
|
||
<img src="@/assets/empty.png" />
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {myMixins} from "@/utils/myMixins"
|
||
import {vehicleMaintenanceList,vehicleMaintenanceCount} from "@/api/maintenance"
|
||
export default {
|
||
name: "vehicle-maintenance-list",
|
||
mixins:[myMixins],
|
||
data() {
|
||
return {
|
||
id:'',
|
||
tabArr: [ {name: '待审批', status: 2,num:0 },{name: '已审批', status: 2,num:0 },],
|
||
activeIndex: 0,
|
||
pageList:[],
|
||
pageNum:1,
|
||
pageSize:10,
|
||
total:'',
|
||
noClick:true,
|
||
isShowBackBtn:true,
|
||
inApprovalCount:0,
|
||
status:'',
|
||
isLoading:"",
|
||
loading: false,
|
||
finished: false,
|
||
}
|
||
},
|
||
mounted() {
|
||
const urlParams = new URLSearchParams(window.location.search);
|
||
this.status=urlParams.get('status')
|
||
if(this.status=='crm' || this.$route.params.status == 'crm' ){//后台进入此页面没有返回按钮
|
||
this.isShowBackBtn=false
|
||
}else{
|
||
this.isShowBackBtn=true
|
||
}
|
||
this.activeIndex=this.$route.params?.activeIndex || 0
|
||
this.getList()
|
||
},
|
||
computed:{
|
||
show() {
|
||
return (this.pageList.length < 0 || this.pageList.length == 0); // 判断数组长度是否大于 0
|
||
},
|
||
},
|
||
methods: {
|
||
async onLoad(){
|
||
this.pageNum++;
|
||
await this.getList()
|
||
this.loading = false;
|
||
console.log("this.pageList.length",this.pageList.length)
|
||
console.log("this.total",this.total)
|
||
|
||
if (this.pageList.length >= this.total) {
|
||
this.finished = true;
|
||
}
|
||
},
|
||
goPrePage(){
|
||
this.$router.push({ name: 'toDoList' });
|
||
},
|
||
// 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')
|
||
}
|
||
},
|
||
/* onRefresh() {
|
||
vehicleMaintenanceCount();
|
||
// this.getList()
|
||
setTimeout(() => {
|
||
this.$toast('刷新成功');
|
||
this.isLoading = false;
|
||
}, 1000);
|
||
},*/
|
||
onRefresh() {
|
||
vehicleMaintenanceCount();
|
||
this.pageNum=1
|
||
// this.getList()
|
||
setTimeout(() => {
|
||
this.$toast('刷新成功');
|
||
this.isLoading = false;
|
||
}, 1000);
|
||
},
|
||
async changeTab(index) {
|
||
this.activeIndex = index
|
||
this.pageNum = 1
|
||
this.pageList = [];
|
||
this.total=0
|
||
await this.getList()
|
||
},
|
||
async getList() {
|
||
let result=await vehicleMaintenanceCount();
|
||
if(result.code==200 && result.data){
|
||
this.tabArr[0].num=result.data.inApprovalCount
|
||
}
|
||
let res=await vehicleMaintenanceList ({
|
||
pageNum:this.pageNum,
|
||
pageSize:this.pageSize,
|
||
queryType:this.activeIndex+1,
|
||
})
|
||
this.total=res.total
|
||
if(this.pageNum == 1){// 第一页直接赋值
|
||
this.pageList=res.data
|
||
}else{// 第二页数据拼接
|
||
let preList = this.pageList;
|
||
let arr = res.data;
|
||
this.pageList = preList.concat(arr)
|
||
}
|
||
},
|
||
goPageDetail(item){
|
||
this.$router.push({
|
||
name: 'maintenanceApplication', // 目标路由的名称
|
||
params: {
|
||
info:item,
|
||
activeIndex:this.activeIndex,
|
||
status:this.status,
|
||
}
|
||
});
|
||
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
@import "@/styles/mixin.scss";
|
||
@import "@/styles/common.scss";
|
||
@import "@/styles/approval.scss";
|
||
.wrap{
|
||
@include wh(100%,100%);
|
||
box-sizing: border-box;
|
||
overflow-y: auto;
|
||
}
|
||
.navBar{
|
||
margin-bottom: 46px;
|
||
}
|
||
::v-deep .van-list__finished-text{
|
||
background-color: #F4F5F7 !important;
|
||
padding-bottom: 10px;
|
||
}
|
||
::v-deep .van-pull-refresh{
|
||
height: calc(100% - 86px) ;
|
||
overflow-y: auto;
|
||
background-color: #F4F5F7;
|
||
}
|
||
.listItem{
|
||
padding: 11px 28px 11px 23px;
|
||
div{
|
||
.title{
|
||
@include fontWeightSize(bold,14px);
|
||
line-height: 20px;
|
||
margin-bottom: 8px;
|
||
}
|
||
.right{
|
||
@include flexCenter();
|
||
}
|
||
}
|
||
.driverInfo{
|
||
font-size: 12px;
|
||
line-height: 18px;
|
||
margin-bottom: 5px;
|
||
}
|
||
}
|
||
</style> |