task#13992,维保审批列表

src/api/maintenance.js

@@ -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
+    })
+}

src/api/order.js

@@ -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({

src/styles/mixin.scss

@@ -84,3 +84,7 @@
     @include sizing4Padding($t,$r,$b,$l);
     border-radius: $radius;
 }
+@mixin colHeight($col,$hei){
+    color: $col;
+    line-height: $hei;
+}

src/views/index/toDoList.vue

@@ -1,22 +1,15 @@
 <template>
-<!--  <div class="empty" v-if="show">
+
+  <div class="empty" v-if="show">
     <img src="@/assets/empty.png" >
-  </div>-->
+  </div>
-<!--  v-else-->
+  <div class="wrap"  v-else>
-  <div class="wrap" >
+    <div class="itemWrap" @click="goApprovalList" v-for="(item,index) in todolist" :key="index">
-    <div class="itemWrap" @click="goApprovalList">
       <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 class="time">{{ item.toDoTime }}</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>
   </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({
+      this.$router.push({ name: 'vehicleMaintenanceList',})
-        name: 'vehicleMaintenanceList',
-        params:{
-          id:123
-        }
-      })
     },
     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>

src/views/vehicle-maintenance/maintenance-application.vue

@@ -8,56 +8,178 @@
         :border="false"
         :fixed="true"
         :safe-area-inset-top="true"
-        @click-left="h5GoBack"
+        @click-left="goPrePage"
     />
   </div>
+  <div class="flowWrap">
     <div class="detailInfo">
       <div class="line1">
-        <div class="leftTitle">维保申请:</div>
+        <div class="leftTitle commonTitle">{{ rowInfo.stage }}:</div>
         <div class="right">
-          <img class="commonImg" src="@/assets/waitSubmit.png">
+          <img class="commonImg" :src="getStatus(detailInfo.states)">
-          <div class="yelColor">待审核</div>
+          <div :class="getStatusColor(detailInfo.states)" >{{detailInfo.statesStr}}</div>
         </div>
       </div>
       <div class="line"></div>
-    <div class="carName"><span class="opa">车辆名称:</span><span>小宋车辆</span></div>
+      <div ><span class="opa">车辆名称:</span><span>{{ detailInfo.vehicleName }}</span></div>
-    <div class="carNum"><span class="opa">车牌号:</span><span>沪A123456</span></div>
+      <div><span class="opa">车牌号:</span><span>{{ detailInfo.plateNumber }}</span></div>
-    <div class="shopName"><span class="opa">门店信息:</span><span>浦东新区欧洲维修高科西路店浦东新区欧洲维修高科西路店</span></div>
+<!--      审批中，通过，终止-->
+      <div class="shopName"><span class="opa">门店信息:</span><span>{{detailInfo.address || ''}}</span></div>
       <div class="shopImgList">
-      <img src="@/assets/love.jpg">
+        <img :src="detailInfo.storePhotoUrls">
-      <img src="@/assets/love.jpg">
+      </div>
-      <img src="@/assets/love.jpg">
+<!--      不通过-->
-      <img src="@/assets/love.jpg">
+      <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="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="approvalContent">
+      <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="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
+    this.rowInfo=this.$route.params.info
-    console.log("mounted.",this.id)
+    this.getDetail()
-    // this.getList()
+  },
+  computed: {
+     // 维保申请不通过，维保完成不通过
+     noPassStatus(){
+       return this.detailInfo.states===2 || this.detailInfo.states===5
+     },
   },
   methods: {
-
+    goPrePage(){
-    async getList() {
+      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,27 +192,9 @@ export default {
 .wrap{
   background-color: #F4F5F7;
 }
-.detailInfo{
+.flowWrap{
-  width: 100%;
+  height: calc(100% - 120px);
-  background: #FFFFFF;
+  overflow-y: auto;
-  box-sizing: border-box;
-  padding: 13px 25px 24px 24px;
-  margin-bottom: 10px;
-  .line1{
-    display: flex;
-    justify-content: space-between;
-    line-height: 23px;
-    .leftTitle{
-      font-weight: bold;
-      font-size: 14px;
-      color: #323643;
-      line-height: 20px;
-      opacity: .66;
-    }
-    .right{
-      display: flex;
-      align-items: center;
-    }
 }
 .line{
   margin: 5px 0;
@@ -99,23 +203,44 @@ export default {
   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;
-    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>

src/views/vehicle-maintenance/vehicle-maintenance-list.vue

@@ -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"  v-show="!show">
-  <van-pull-refresh class="refresh" v-model="isLoading"  @refresh="onRefresh">
     <div class="listWrap">
-<!--      v-for="(item,index) in pageList" :key="index" @click="noMultipleClicks(goPageDetail,item.id)"-->
+      <div class="listItem"  @click="noMultipleClicks(goPageDetail,item)" v-for="(item,index) in pageList" :key="index">
-      <div class="listItem"  @click="noMultipleClicks(goPageDetail)">
         <div class="line1">
-          <div class="title">维保申请</div>
+          <div class="title">{{item.stage}}</div>
           <div class="right">
-<!--            <img class="commonImg" :src="getStatus(item.state.code)">
+            <img class="commonImg" :src="getStatus(item.states?.code)">
-            <div :class="getStatusColor(item.state.code)">{{item.state.label}}</div>-->
+            <div :class="getStatusColor(item.states?.code)">{{ item.states?.label }}</div>
-            <img class="commonImg" src="@/assets/waitSubmit.png">
-            <div class="yelColor">待审核</div>
           </div>
         </div>
-        <div class="driverInfo">中道001车辆名称 / A589566</div>
+        <div class="driverInfo">{{ item.vehicleName }} /  {{ item.plateNumber }}</div>
-        <div class="time">2023-05-12 12:30:30</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
+    const urlParams = new URLSearchParams(window.location.search);
-    console.log("this.id",this.id)
+    if(urlParams.get('id')){//后台进入此页面没有返回按钮
-    // this.getList()
+      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){
+    goPageDetail(item){
-      console.log("跳转详情",id)
+      console.log("跳转详情",item)
       this.$router.push({
         name: 'maintenanceApplication',  // 目标路由的名称
         params: {
-          id:123,
+          info:item,
-          // index:this.activeIndex,
+          activeIndex:this.activeIndex,
-          // batchCode:this.id,
-          // getUrlId:this.getUrlId,
-          // type:this.type,
         }
       });