apps/supplier-dispatch-h5
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

task#13992,维保审批列表

Browse Source
This commit is contained in:
zhouxueli
2024-06-17 15:46:04 +08:00
parent 374eb5070b
commit 08120506f6
6 changed files with 382 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/api/maintenance.js Normal file
View File

@ -0,0 +1,46 @@
import request from '@/utils/http'
// 调度APP-维保数量
export function vehicleMaintenanceCount() {
return request({
url: '/supplierAppV2/dispatchApp/maintenance/vehicleMaintenanceCount',
method:'POST',
})
}
//维保列表
export function vehicleMaintenanceList(data) {
return request({
url: '/supplierAppV2/dispatchApp/maintenance/vehicleMaintenanceList',
method:'POST',
contentType: 'application/json',
data
})
}
// 获取维保记录详情
export function getVehicleMaintenanceDetail(data) {
return request({
url: '/supplierAppV2/dispatchApp/maintenance/getVehicleMaintenanceDetail',
method:'POST',
contentType: 'application/json',
data
})
}
// 维保终止
export function vehicleMaintenanceStop(data) {
return request({
url: '/supplierAppV2/dispatchApp/maintenance/vehicleMaintenanceStop',
method:'POST',
contentType: 'application/json',
data
})
}
// 维保审批
export function vehicleMaintenanceApproval(data) {
return request({
url: '/supplierAppV2/dispatchApp/maintenance/vehicleMaintenanceApproval',
method:'POST',
contentType: 'application/json',
data
})
}

7
src/api/order.js
View File

@ -7,6 +7,13 @@ export function getToDoList() {
method:'POST',
})
}
// 调度APP待办事项列表New
export function toDoListNew() {
return request({
url: '/supplierAppV2/dispatchApp/toDoMessage/toDoListNew',
method:'POST',
})
}
// 代办事项审核
export function toDoAudit(data){
return request({

4
src/styles/mixin.scss
View File

@ -83,4 +83,8 @@
@mixin sizing4Radius($t,$r,$b,$l,$radius){
@include sizing4Padding($t,$r,$b,$l);
border-radius: $radius;
}
@mixin colHeight($col,$hei){
color: $col;
line-height: $hei;
}

39
src/views/index/toDoList.vue
View File

@ -1,22 +1,15 @@
<template>
<!-- <div class="empty" v-if="show">
<div class="empty" v-if="show">
<img src="@/assets/empty.png" >
</div>-->
<!-- v-else-->
<div class="wrap" >
<div class="itemWrap" @click="goApprovalList">
</div>
<div class="wrap" v-else>
<div class="itemWrap" @click="goApprovalList" v-for="(item,index) in todolist" :key="index">
<div class="left">
<div class="title">车辆维保<span class="num">2</span></div>
<div class="title">{{ item.toDoName }}<span class="num">{{item.toDoCount}}</span></div>
<img class="ritBtn" src="@/assets/todoRight.png">
</div>
<div class="time">2024-12-12 23:00:00</div>
</div>
<div class="itemWrap">
<div class="left">
<div class="title">其他<span class="num">0</span></div>
<img class="ritBtn" src="@/assets/todoRight.png">
</div>
<div class="time">2024-12-12 23:00:00</div>
<div class="time">{{ item.toDoTime }}</div>
</div>
</div>
<!-- <div class="wrap" v-else>
@ -39,7 +32,8 @@
</template>
<script>
import {getToDoList, toDoAudit} from "@/api/order"
//getToDoList,toDoAudit
import {toDoListNew} from "@/api/order"
import {userOperationPermissions} from "@/api/mine"
export default {
name: "toDoList",
@ -56,16 +50,13 @@ export default {
},
methods: {
goApprovalList(){
this.$router.push({
name: 'vehicleMaintenanceList',
params:{
id:123
}
})
this.$router.push({ name: 'vehicleMaintenanceList',})
},
async getList() {
let result = await getToDoList();
// let result = await getToDoList();
let result=await toDoListNew();
this.todolist = result.data;
console.log("this.todolist",this.todolist)
if (this.todolist?.length === 0) {
this.show = true
} else {
@ -76,7 +67,7 @@ export default {
let res = await userOperationPermissions();
this.permissonList = res.data
},
async todoAudit(item,type) {
/* async todoAudit(item,type) {
await toDoAudit({
toDoId: item.toDoId,
toDoType: item.toDoType.code,
@ -84,7 +75,7 @@ export default {
})
this.todolist=[]
await this.getList();
},
},*/
}
}
</script>

282
src/views/vehicle-maintenance/maintenance-application.vue
View File

@ -8,56 +8,178 @@
:border="false"
:fixed="true"
:safe-area-inset-top="true"
@click-left="h5GoBack"
@click-left="goPrePage"
/>
</div>
<div class="detailInfo">
<div class="line1">
<div class="leftTitle">维保申请:</div>
<div class="flowWrap">
<div class="detailInfo">
<div class="line1">
<div class="leftTitle commonTitle">{{ rowInfo.stage }}:</div>
<div class="right">
<img class="commonImg" src="@/assets/waitSubmit.png">
<div class="yelColor">待审核</div>
<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"><span class="opa">门店信息:</span><span>{{detailInfo.address || ''}}</span></div>
<div class="shopImgList">
<img :src="detailInfo.storePhotoUrls">
</div>
<!-- 不通过-->
<div v-if="noPassStatus"><span class="opa">车辆里程:</span><span>{{ detailInfo.mileage ||'' }}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="line"></div>
<div class="carName"><span class="opa">车辆名称:</span><span>小宋车辆</span></div>
<div class="carNum"><span class="opa">车牌号:</span><span>沪A123456</span></div>
<div class="shopName"><span class="opa">门店信息:</span><span>浦东新区欧洲维修高科西路店浦东新区欧洲维修高科西路店</span></div>
<div class="shopImgList">
<img src="@/assets/love.jpg">
<img src="@/assets/love.jpg">
<img src="@/assets/love.jpg">
<img src="@/assets/love.jpg">
<!-- 不通过-->
<div class="detailInfo" v-if="noPassStatus">
<div class="line1">
<div class="leftTitle commonTitle">维保项目照片:</div>
</div>
<div class="shopImgList">
<img :src="detailInfo.maintenancePhotoUrls">
</div>
</div>
<div class="detailInfo" v-if="noPassStatus">
<div class="line1">
<div class="leftTitle commonTitle">维保清单/凭证照片:</div>
</div>
<div class="shopImgList">
<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">
<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="noPassStatus"></div>
<div class="reason" v-if="noPassStatus">{{detailInfo.auditRemark}}</div>
</div>
</div>
<div class="approvalContent">
<!-- 审批中，不通过-->
<div class="btnWrap" v-if="detailInfo.states==1 ||detailInfo.states==2">
<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"
export default {
name: "maintenance-application",
mixins:[myMixins],
data() {
return {
id:'',
rowInfo:'',
noClick:true,
detailInfo:'',
show:false,
auditRemark:'',
// activeIndex:'',
}
},
mounted() {
this.id=this.$route.params.id
console.log("mounted.",this.id)
// this.getList()
this.rowInfo=this.$route.params.info
this.getDetail()
},
computed: {
// 维保申请不通过，维保完成不通过
noPassStatus(){
return this.detailInfo.states===2 || this.detailInfo.states===5
},
},
methods: {
async getList() {
goPrePage(){
this.$router.push({
name: 'vehicleMaintenanceList',
params: {
activeIndex:this.$route.params?.activeIndex,
}
});
},
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
}
},
}
}
@ -70,52 +192,55 @@ export default {
.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;
box-sizing: border-box;
padding: 13px 25px 24px 24px;
@include sizing4Padding(13px,25px,14px,24px);
margin-bottom: 10px;
.line1{
display: flex;
justify-content: space-between;
@include flexColBet;
line-height: 23px;
.leftTitle{
font-weight: bold;
font-size: 14px;
color: #323643;
line-height: 20px;
opacity: .66;
}
.right{
display: flex;
align-items: center;
@include flexCenter;
}
}
.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;
}
.opa{
display: inline-block;
width: 60px;
@include colorOpa(#000000,.5);
font-size: 12px;
color: #000000;
line-height: 27px;
opacity: .5;
}
.shopName{
display: flex;
align-items: baseline;
}
.project{
color: #E8A524;
width: calc(100% - 60px);
}
.shopImgList{
margin-top: 6px;
display: flex;
@include flexColBet;
flex-wrap: wrap;
justify-content: space-between;
img{
background: #FAFAFA;
border-radius: 3px;
@ -129,6 +254,67 @@ export default {
.approvalContent{
background-color: #FFFFFF;
width: 100%;
height: 200px;
@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>

115
src/views/vehicle-maintenance/vehicle-maintenance-list.vue
View File

@ -3,7 +3,7 @@
<div class="navBar">
<van-nav-bar
title="车辆维保"
left-arrow
:left-arrow="isShowBackBtn ? true : false"
left-arrow-color="#FFFFFF"
:border="false"
:fixed="true"
@ -18,71 +18,101 @@
<span class="numTip" style="opacity: 1 !important;" v-if="index===0">{{item.num}}</span>
</div>
</div>
<!-- v-show="!show"-->
<van-pull-refresh class="refresh" v-model="isLoading" @refresh="onRefresh">
<van-pull-refresh class="refresh" v-model="isLoading" @refresh="onRefresh" v-show="!show">
<div class="listWrap">
<!-- v-for="(item,index) in pageList" :key="index" @click="noMultipleClicks(goPageDetail,item.id)"-->
<div class="listItem" @click="noMultipleClicks(goPageDetail)">
<div class="listItem" @click="noMultipleClicks(goPageDetail,item)" v-for="(item,index) in pageList" :key="index">
<div class="line1">
<div class="title">维保申请</div>
<div class="title">{{item.stage}}</div>
<div class="right">
<!-- <img class="commonImg" :src="getStatus(item.state.code)">
<div :class="getStatusColor(item.state.code)">{{item.state.label}}</div>-->
<img class="commonImg" src="@/assets/waitSubmit.png">
<div class="yelColor">待审核</div>
<img class="commonImg" :src="getStatus(item.states?.code)">
<div :class="getStatusColor(item.states?.code)">{{ item.states?.label }}</div>
</div>
</div>
<div class="driverInfo">中道001车辆名称 / A589566</div>
<div class="time">2023-05-12 12:30:30</div>
<div class="driverInfo">{{ item.vehicleName }} / {{ item.plateNumber }}</div>
<div class="time">{{ item.createTime }}</div>
<!-- <div v-show="activeIndex == 2"><span>审核备注:</span><span style="color: #FF5D2E">{{ item.auditRemark }}</span></div>-->
</div>
<div class="listItem" >
<div class="line1">
<div class="title">维保申请</div>
<div class="right">
<img class="commonImg" src="@/assets/waitSubmit.png">
<div class="yelColor">待审核</div>
</div>
</div>
<div class="driverInfo">中道001车辆名称 / A589566</div>
<div class="time">2023-05-12 12:30:30</div>
</div>
</div>
</van-pull-refresh>
<div class="bgEmptyImg" v-show="show" >
<img src="@/assets/empty.png" />
</div>
</div>
</template>
<script>
import {myMixins} from "@/utils/myMixins"
// import {getStatus,getStatusColor} from "@/utils/approval";
import {vehicleMaintenanceList,vehicleMaintenanceCount} from "@/api/maintenance"
export default {
name: "vehicle-maintenance-list",
mixins:[myMixins],
data() {
return {
id:'',
tabArr: [ {name: '待审批', status: 2,num:2 },{name: '已审批', status: 2,num:0 },],
tabArr: [ {name: '待审批', status: 2,num:0 },{name: '已审批', status: 2,num:0 },],
activeIndex: 0,
pageList:[],
pageNum:1,
pageSize:10,
isLoading:"",
noClick:true,
isShowBackBtn:true,
inApprovalCount:0
}
},
mounted() {
this.id=this.$route.params.id
console.log("this.id",this.id)
// this.getList()
const urlParams = new URLSearchParams(window.location.search);
if(urlParams.get('id')){//后台进入此页面没有返回按钮
this.isShowBackBtn=false
}else{
this.isShowBackBtn=true
}
this.activeIndex=this.$route.params?.activeIndex || 0
this.getList()
},
computed:{
/* show() {
show() {
return (this.pageList.length < 0 || this.pageList.length == 0); // 判断数组长度是否大于 0
},*/
},
},
methods: {
// 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('刷新成功');
@ -96,18 +126,25 @@ export default {
await this.getList()
},
async getList() {
let result=await vehicleMaintenanceCount();
if(result.code==200 && result.data){
this.tabArr[0].num=result.data.inApprovalCount
// console.log("this.tabArr[0].num",this.tabArr[0].num)
}
let res=await vehicleMaintenanceList ({
pageNum:this.pageNum,
pageSize:this.pageSize,
queryType:this.activeIndex+1
})
this.pageList=res.data
},
goPageDetail(id){
console.log("跳转详情",id)
goPageDetail(item){
console.log("跳转详情",item)
this.$router.push({
name: 'maintenanceApplication', // 目标路由的名称
params: {
id:123,
// index:this.activeIndex,
// batchCode:this.id,
// getUrlId:this.getUrlId,
// type:this.type,
info:item,
activeIndex:this.activeIndex,
}
});