task#13992,代办列表更新，新增维保审批列表

src/router/index.js

@@ -182,7 +182,23 @@ const routes = [
         meta: {
             title:'新人培训'
         }
-    }
+    },
+    {
+        path: '/maintenanceList',
+        name: 'vehicleMaintenanceList',
+        component:()=>import('@/views/vehicle-maintenance/vehicle-maintenance-list.vue'),
+        meta: {
+            title:'车辆维保'
+        }
+    },
+    {
+        path: '/maintenanceApplication',
+        name: 'maintenanceApplication',
+        component:()=>import('@/views/vehicle-maintenance/maintenance-application.vue'),
+        meta: {
+            title:'维保申请'
+        }
+    },
   ]
 
 const router = new VueRouter({

src/styles/approval.scss

@@ -0,0 +1,118 @@
+@import "@/styles/mixin.scss";
+.refresh{
+  min-height: 100%;
+  background-color: #F4F5F7;
+}
+.wrap{
+  @include wh(100%,100%);
+  box-sizing: border-box;
+}
+.navBar{
+  margin-bottom: 46px;
+}
+.tab_wrap {
+  @include fontWeightSize(500, 14px);
+  @include flexColAround();
+  padding: 2px 0 10px 0;
+  background: #2C395F;
+  div {
+    padding-top: 8px;
+    color: #FFFFFF;
+  }
+  .alpha{
+    opacity: 0.5;
+  }
+  .numTip{
+    display: inline-block;
+    @include wh(15px,15px);
+    @include bgcolorOpa(#F95B45,0.9);
+    border-radius: 4px;
+    text-align: center;
+    line-height: 15px;
+    margin-left: 5px;
+    opacity: 1; /* 保持透明度为1 */
+  }
+  .active {
+    position: relative;
+    opacity: 1;
+  }
+  .active:after {
+    content: '';
+    display: block;
+    @include wh(18px,2px);
+    opacity: .8;
+    background: #FFFFFF;
+    position: absolute;
+    border-radius: 2px;
+    margin-top: 3px;
+    left: 50%;
+    opacity: 1;
+    transform: translateX(-50%);
+  }
+}
+::v-deep .van-pull-refresh{
+  height: calc(100% - 86px) ;
+}
+.listWrap{
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  .listItem{
+    width: 100%;
+    box-sizing: border-box;
+    padding: 14px 25px 13px 29px;
+    background-color: #FFFFFF;
+    margin-bottom: 10px;
+    .line1{
+      @include flexColBet();
+      .viewBtn{
+        @include wh(48px,18px);
+        text-align: center;
+        line-height: 18px;
+        background: #354D93;
+        border-radius: 3px;
+        color: #FFFFFF;
+      }
+    }
+
+  }
+}
+.bgEmptyImg{
+  @include flexTwoCenter;
+  height: 90% ;
+  background-color: #FAFAFA;
+  img{
+    width: 100%;
+  }
+}
+.greColor{
+  color:#38AD00 ;
+  font-weight: 500;
+}
+.redColor{
+  color:#FF5D2E ;
+  font-weight: 500;
+}
+.commonImg{
+  @include widHeiMar(13px,13px,4px);
+}
+.rightArrImg{
+  @include wh(6px,9px);
+  margin-left: 6px;
+}
+.yelColor{
+  color: #E69B0B;
+  font-weight: 600;
+}
+.greColor{
+  color: #56B628;
+  font-weight: 600;
+}
+.oraColor{
+  color: #FF5D2E;
+  font-weight: 600;
+}
+.garyColor{
+  color: #9C9C9C;
+  font-weight: 600;
+}

src/styles/mixin.scss

@@ -76,3 +76,11 @@
     padding: $tb $lr;
     border-radius: $rad;
 }
+@mixin sizing4Padding($t,$r,$b,$l){
+    box-sizing: border-box;
+    padding: $t $r $b $l;
+}
+@mixin sizing4Radius($t,$r,$b,$l,$radius){
+    @include sizing4Padding($t,$r,$b,$l);
+    border-radius: $radius;
+}

src/utils/approval.js

@@ -0,0 +1,42 @@
+
+const getStatus=(i)=>{
+  switch (i){
+    case 0://待提交
+    case 1://待审核
+      return require('@/assets/waitSubmit.png')
+    case 2://审核通过
+    case 7://已打款
+      return require('@/assets/dakuan.png')
+    case 3://审核不通过
+      return require('@/assets/unpass.png')
+    case 4://报销失败
+      return require('@/assets/unSubmit.png')
+    case 6://代打款
+      return require('@/assets/waitDakuan.png')
+    default:
+      return require('@/assets/waitSubmit.png')
+  }
+}
+const getStatusColor=(i)=>{
+  switch (i){
+    case 0://待提交
+    case 1://待审核
+      return 'yelColor'
+    case 2://审核通过
+    case 6://代打款
+    case 7://已打款
+      return 'greColor'
+    case 3://审核不通过
+      return 'oraColor'
+    case 4://报销失败
+      return 'garyColor'
+    default:
+      return 'yelColor'
+  }
+}
+
+module.exports = {
+  getStatus,
+  getStatusColor
+}
+

src/views/caseList/caseAuditList.vue

@@ -198,7 +198,22 @@ export default {
 <style scoped lang="scss">
 @import "@/styles/mixin.scss";
 @import "@/styles/common.scss";
-.refresh{
+@import "@/styles/approval.scss";
+.listItem{
+  padding: 14px 25px 13px 29px;
+  div{
+    line-height: 27px;
+    span:first-child{
+      display: inline-block;
+      width: 60px;
+      opacity: 0.5;
+    }
+    .right{
+      @include flexCenter();
+    }
+  }
+}
+/*.refresh{
   min-height: 100%;
   background-color: #F4F5F7;
 }
@@ -209,9 +224,9 @@ export default {
 .navBar{
   margin-bottom: 46px;
 }
-/*::v-deep .van-nav-bar__content{
+!*::v-deep .van-nav-bar__content{
   background-color: #354683 !important;
-}*/
+}*!
 .tab_wrap {
   @include fontWeightSize(500, 14px);
   @include flexColAround();
@@ -232,7 +247,7 @@ export default {
     text-align: center;
     line-height: 15px;
     margin-left: 5px;
-    opacity: 1; /* 保持透明度为1 */
+    opacity: 1; !* 保持透明度为1 *!
   }
   .active {
     position: relative;
@@ -329,5 +344,5 @@ export default {
 .garyColor{
   color: #9C9C9C;
   font-weight: 600;
-}
+}*/
 </style>

src/views/index/toDoList.vue

@@ -1,8 +1,25 @@
 <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 class="left">
+        <div class="title">车辆维保<span class="num">2</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>
   </div>
-  <div class="wrap" v-else>
+<!--  <div class="wrap" v-else>
     <ul id="dataList" class="dataList">
       <li class="item" v-for="(item,i) in todolist" :key="i">
         <div class="left">
@@ -18,7 +35,7 @@
         </div>
       </li>
     </ul>
-  </div>
+  </div>-->
 </template>
 
 <script>
@@ -38,6 +55,14 @@ export default {
     this.getList()
   },
   methods: {
+    goApprovalList(){
+      this.$router.push({
+        name: 'vehicleMaintenanceList',
+        params:{
+          id:123
+        }
+      })
+    },
     async getList() {
       let result = await getToDoList();
       this.todolist = result.data;
@@ -50,7 +75,6 @@ export default {
     async getPermissions(){
       let res = await userOperationPermissions();
       this.permissonList = res.data
-      // console.log("代办事项",this.permissonList.includes('approve'))
     },
     async todoAudit(item,type) {
        await toDoAudit({
@@ -78,9 +102,37 @@ export default {
 }
 .wrap {
   @include wh(100%, 100%);
-  box-sizing: border-box;
+  @include sizing4Padding(13px,13px,0,13px);
-  padding: 13px 13px 0 13px;
   background-color: #F4F5F7;
+  .itemWrap{
+    @include wh(349px, 68px);
+    background: #FFFFFF;
+    box-shadow: 0px 2px 10px 0px rgba(216,216,216,0.5);
+    @include sizing4Radius(11px,12px,16px,15px, 6px);
+    @include flexBetween;
+    margin-bottom: 10px;
+    .left{
+      @include flexColBet;
+    }
+    .ritBtn{
+      @include wh(6px, 9px);
+    }
+    .time{
+      opacity: .6;
+    }
+    .title{
+      @include flexCenter;
+    }
+    .num{
+      display: inline-block;
+      @include whLin(14px, 14px);
+      @include fontWeightSize(10px,bold);
+      @include bgFontColor(#FFFFFF,#F93D3D);
+      border-radius: 2px;
+      text-align: center;
+      margin-left: 8px;
+    }
+  }
 }
 
 .dataList {

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

@@ -0,0 +1,134 @@
+<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="h5GoBack"
+    />
+  </div>
+  <div class="detailInfo">
+    <div class="line1">
+        <div class="leftTitle">维保申请:</div>
+        <div class="right">
+          <img class="commonImg" src="@/assets/waitSubmit.png">
+          <div class="yelColor">待审核</div>
+        </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>
+  </div>
+
+  <div class="approvalContent">
+
+  </div>
+</div>
+</template>
+
+<script>
+import {myMixins} from  "@/utils/myMixins"
+export default {
+  name: "maintenance-application",
+  mixins:[myMixins],
+  data() {
+    return {
+      id:'',
+      noClick:true,
+    }
+  },
+  mounted() {
+    this.id=this.$route.params.id
+    console.log("mounted.",this.id)
+    // this.getList()
+  },
+  methods: {
+
+    async getList() {
+
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import "@/styles/mixin.scss";
+@import "@/styles/common.scss";
+@import "@/styles/approval.scss";
+.wrap{
+  background-color: #F4F5F7;
+}
+.detailInfo{
+  width: 100%;
+  background: #FFFFFF;
+  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;
+    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;
+    font-size: 12px;
+    color: #000000;
+    line-height: 27px;
+    opacity: .5;
+  }
+  .shopName{
+    display: flex;
+    align-items: baseline;
+  }
+  .shopImgList{
+    margin-top: 6px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    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%;
+  height: 200px;
+}
+</style>

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

@@ -0,0 +1,141 @@
+<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="h5GoBack"
+    />
+  </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}}</span>
+    </div>
+  </div>
+<!--   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)">
+        <div class="line1">
+          <div class="title">维保申请</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>
+          </div>
+        </div>
+        <div class="driverInfo">中道001车辆名称 / A589566</div>
+        <div class="time">2023-05-12 12:30:30</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>
+</template>
+
+<script>
+import {myMixins} from  "@/utils/myMixins"
+// import {getStatus,getStatusColor} from "@/utils/approval";
+export default {
+  name: "vehicle-maintenance-list",
+  mixins:[myMixins],
+  data() {
+    return {
+      id:'',
+      tabArr: [ {name: '待审批', status: 2,num:2 },{name: '已审批', status: 2,num:0 },],
+      activeIndex: 0,
+      pageList:[],
+      pageNum:1,
+      pageSize:10,
+      isLoading:"",
+      noClick:true,
+    }
+  },
+  mounted() {
+    this.id=this.$route.params.id
+    console.log("this.id",this.id)
+    // this.getList()
+  },
+  computed:{
+   /* show() {
+      return (this.pageList.length < 0 || this.pageList.length == 0); // 判断数组长度是否大于 0
+    },*/
+  },
+  methods: {
+    onRefresh() {
+      this.getList()
+      setTimeout(() => {
+        this.$toast('刷新成功');
+        this.isLoading = false;
+      }, 1000);
+    },
+    async changeTab(index) {
+      this.activeIndex = index
+      this.pageNum = 1
+      this.pageList = [];
+      await this.getList()
+    },
+    async getList() {
+
+    },
+    goPageDetail(id){
+      console.log("跳转详情",id)
+      this.$router.push({
+        name: 'maintenanceApplication',  // 目标路由的名称
+        params: {
+          id:123,
+          // index:this.activeIndex,
+          // batchCode:this.id,
+          // getUrlId:this.getUrlId,
+          // type:this.type,
+        }
+      });
+
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import "@/styles/mixin.scss";
+@import "@/styles/common.scss";
+@import "@/styles/approval.scss";
+.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>