task#10584,司机app月份筛选

src/api/reimbursementBatch.js

@@ -1,5 +1,13 @@
 import request from '@/utils/http'
-
+//司机app待报销月份
+export function waitReimburseMonth(data) {
+    return request({
+        url: '/driverApp/reimburse/waitReimburseMonth',
+        method:'POST',
+        contentType: 'application/json',
+        data
+    })
+}
 //司机app待报销列表
 export function waitReimburseList(data) {
     return request({

src/views/driverCaseList/driverCaseList.vue

@@ -17,59 +17,11 @@
         {{ item.name }}
       </div>
     </div>
+    <div class="monthSearch" v-show="activeIndex == 0">
+      <span v-for="(item,index) in monthList" :class="monthIndex === index ? 'active' : ''" :key="index" @click="clickHandle(index)">{{item}}</span>
+    </div>
 <!--    <van-pull-refresh v-model="isLoading" @refresh="onRefresh" v-show="!show" style="min-height: 80%;position: relative">-->
-        <div class="listWrap">
+        <div class="listWrap" v-show="!show">
-          <div class="itemWrap" v-for="(item,index) in pageList" :key="index">
-            <div class="contentWrap" @click="goDetail">
-              <div class="line1">
-                <div><span>订单编号:</span><span>{{item.userOrderCode}}</span></div>
-                <div class="right">
-                  <img class="commonImg" :src="getStatus(item.state)">
-                  <div :class="getStatusColor(item.state)">{{item.stateStr}}</div>
-                  <img class="rightArrImg"  src="@/assets/list_rightArrow.png">
-                </div>
-              </div>
-              <div><span>报销金额:</span><span>{{item.reimburseAmount}}</span></div>
-              <div v-show="activeIndex == 2"><span>审核备注:</span><span style="color: #FF5D2E">{{item.auditRemark}}</span></div>
-              <div v-show="activeIndex != 0"><span>审核人员:</span><span>{{item.auditUser}}</span></div>
-              <div v-show="activeIndex != 0"><span>审核时间:</span><span>{{item.auditTime}}</span></div>
-            </div>
-            <img v-show="activeIndex == 0" class="checkImg" @click="toggleSelection(item)" :src="item.isSelected ? require('@/assets/baoxiao_check.png') : require('@/assets/baoxiao_uncheck.png')">
-          </div>
-          <div class="itemWrap" v-for="(item,index) in pageList" :key="index">
-            <div class="contentWrap" @click="goDetail">
-              <div class="line1">
-                <div><span>订单编号:</span><span>{{item.userOrderCode}}</span></div>
-                <div class="right">
-                  <img class="commonImg" :src="getStatus(item.state)">
-                  <div :class="getStatusColor(item.state)">{{item.stateStr}}</div>
-                  <img class="rightArrImg"  src="@/assets/list_rightArrow.png">
-                </div>
-              </div>
-              <div><span>报销金额:</span><span>{{item.reimburseAmount}}</span></div>
-              <div v-show="activeIndex == 2"><span>审核备注:</span><span style="color: #FF5D2E">{{item.auditRemark}}</span></div>
-              <div v-show="activeIndex != 0"><span>审核人员:</span><span>{{item.auditUser}}</span></div>
-              <div v-show="activeIndex != 0"><span>审核时间:</span><span>{{item.auditTime}}</span></div>
-            </div>
-            <img v-show="activeIndex == 0" class="checkImg" @click="toggleSelection(item)" :src="item.isSelected ? require('@/assets/baoxiao_check.png') : require('@/assets/baoxiao_uncheck.png')">
-          </div>
-          <div class="itemWrap" v-for="(item,index) in pageList" :key="index">
-            <div class="contentWrap" @click="goDetail">
-              <div class="line1">
-                <div><span>订单编号:</span><span>{{item.userOrderCode}}</span></div>
-                <div class="right">
-                  <img class="commonImg" :src="getStatus(item.state)">
-                  <div :class="getStatusColor(item.state)">{{item.stateStr}}</div>
-                  <img class="rightArrImg"  src="@/assets/list_rightArrow.png">
-                </div>
-              </div>
-              <div><span>报销金额:</span><span>{{item.reimburseAmount}}</span></div>
-              <div v-show="activeIndex == 2"><span>审核备注:</span><span style="color: #FF5D2E">{{item.auditRemark}}</span></div>
-              <div v-show="activeIndex != 0"><span>审核人员:</span><span>{{item.auditUser}}</span></div>
-              <div v-show="activeIndex != 0"><span>审核时间:</span><span>{{item.auditTime}}</span></div>
-            </div>
-            <img v-show="activeIndex == 0" class="checkImg" @click="toggleSelection(item)" :src="item.isSelected ? require('@/assets/baoxiao_check.png') : require('@/assets/baoxiao_uncheck.png')">
-          </div>
           <div class="itemWrap" v-for="(item,index) in pageList" :key="index">
             <div class="contentWrap" @click="goDetail">
               <div class="line1">
@@ -124,17 +76,17 @@
 
         </div>
 <!--    </van-pull-refresh>-->
-<!--    <div v-show="activeIndex == 0"  class="submitBtn" @click="noMultipleClicks(submitHandle)">提交</div>-->
+    <div v-show="activeIndex == 0"  class="submitBtn" @click="noMultipleClicks(submitHandle)">提交</div>
-<!--    <div class="bgEmptyImg" v-show="show" >-->
+    <div class="bgEmptyImg" v-show="show" >
-<!--      <img  src="@/assets/empty.png" />-->
+      <img  src="@/assets/empty.png" />
+    </div>
   </div>
-<!--  </div>-->
 
 </template>
 
 <script>
 import {myMixins} from "@/utils/myMixins";
-import { waitReimburseList ,submitReimburseBatch,reimbursedList} from '@/api/reimbursementBatch'
+import { waitReimburseList ,submitReimburseBatch,reimbursedList,waitReimburseMonth} from '@/api/reimbursementBatch'
 export default {
   name: "driverCaseList",
   mixins: [myMixins],
@@ -153,6 +105,8 @@ export default {
       loading:false,
       isLoading: false,
       finished: false,
+      monthList:[],
+      monthIndex:0
     }
   },
   computed:{
@@ -160,10 +114,15 @@ export default {
       return (this.pageList.length < 0 || this.pageList.length == 0); // 判断数组长度是否大于 0
     },
   },
-  mounted() {
+  async mounted() {
-    this.getList()
+    await this.getMonth();
+    await this.getList()
   },
   methods:{
+    async clickHandle(index){
+      this.monthIndex=index
+      await this.getList()
+    },
     onRefresh() {
       this.pageNum=1;
       // this.getDriverList()
@@ -181,14 +140,14 @@ export default {
           this.submitData.push({...item})
         }
       })
-      // try {
         let res = await submitReimburseBatch({
           driverId: this.driverId,
           orderList: [...this.submitData]
         })
-        console.log("res",res)
+        if(res.code === 200){
+          this.$toast(res.msg)
+        }
         await this.getList()
-      // }
     },
     async changeTab(index) {
       this.activeIndex = index
@@ -207,7 +166,8 @@ export default {
           pageNum:this.pageNum,
           pageSize:this.pageSize,
           driverId:this.driverId,
-          type: this.activeIndex+1
+          type: this.activeIndex+1,
+          periodMonth:this.monthList[this.monthIndex]
         })
       }else{
         res=await reimbursedList({
@@ -224,6 +184,12 @@ export default {
         });
       }
     },
+   async getMonth(){
+      let res = await waitReimburseMonth({
+        driverId:this.driverId,
+      })
+      this.monthList=res.data
+    },
     getStatus(i){
       switch (i){
         case 0://待提交
@@ -301,9 +267,31 @@ export default {
     transform: translateX(-50%);
   }
 }
+.monthSearch{
+  @include wh(100%,45px);
+  background: #F4F5F7 ;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  span{
+    display: inline-block;
+    @include wh(102px,25px);
+    box-shadow: 0px 1px 2px 0px rgba(236,236,236,0.5);
+    border-radius: 14px;
+    margin-right: 8px;
+    line-height: 25px;
+    text-align: center;
+    @include fontWeightSize(14px,600);
+    background: #FFFFFF;
+  }
+  .active{
+    background: #3687FF;
+    color: #FFFFFF;
+  }
+}
 .listWrap{
   width: 100%;
-  height: calc(100% - 86px);
+  height: calc(100% - 250px);
   box-sizing: border-box;
   padding: 10px 7px 10px 8px;
   overflow-y: auto;