工单批次列表，工单批次详情

src/views/index/invoicingNotify.vue

@@ -11,41 +11,74 @@
         @click-left="goBack"
     />
   </div>
-  <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
-    <div class="itemWrap" v-for="(item,index) in notifyList" :key="index" >
-      <div class="item line1">
-        <div class="itemTime">
-          <span class="title">开票月份:</span>
-          <span class="content">{{ item.invoiceMonth }}</span>
-        </div>
-        <div class="orderNum">
-          <span class="title">总案件数:</span>
-          <span class="content">{{ item.orderNum }}</span>
-        </div>
-        <div class="checkBtn" @click="goPage('invoicingDetail',{id:item.batchCode,startTime:item.startTime,overTime:item.overTime})">查看 </div>
-      </div>
-      <div class="item">
-        <span class="title">批次号:</span>
-        <span class="content">{{ item.batchCode }}</span>
-      </div>
-      <div class="item">
-        <span class="title">结算总金额:</span>
-        <span class="content">{{ item.totalMoney + '元' }}</span>
-      </div>
-      <div class="item">
-        <span class="title">扣款金额:</span>
-        <span class="content">{{ item.cutMoney + '元'}}</span>
-      </div>
-      <div class="item">
-        <span class="title">扣款原因:</span>
-        <span class="content"  style="color: #FF8F37;">{{ item.remark }}</span>
-      </div>
-      <div class="item">
-        <span class="title">最终开票金额:</span>
-        <span class="content">{{ item.invoiceMoney+ '元' }}</span>
-      </div>
+  <van-tabs v-model="active" sticky @click="changeTabHandler" background="#2C395F" color="#ffffff" title-active-color="#ffffff" title-inactive-color="#BDC1CD">
+    <van-tab title="全部" name="1"></van-tab>
+    <van-tab title="未开票" name="2"></van-tab>
+    <van-tab title="已开票" name="3"></van-tab>
+  </van-tabs>
+  <div class="content_wrap" :class="{ 'pd_cls': active == 2 }">
+    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
+      <van-list
+        v-model="loading"
+        :finished="finished"
+        finished-text="没有更多了"
+        @load="getMore"
+      >
+        <van-search
+          v-model="batchCode"
+          show-action
+          placeholder="请输入批次号或开票编号"
+        >
+          <template #action>
+            <div @click="onSearch">搜索</div>
+          </template>
+        </van-search>
+        <van-checkbox-group v-model="checkList">
+          <div class="itemWrap" v-for="(item,index) in notifyList" :key="index" @click="toggle(index)">
+            <div class="item line1">
+              <div class="itemTime">
+                <span class="title">批次号:</span>
+                <span class="content">{{ item.batchCode }}</span>
+              </div>
+              <div class="orderNum">
+                <span class="title">总案件数:</span>
+                <span class="content">{{ item?.orderNum || '' }}</span>
+              </div>
+              <div class="checkBtn" @click="goPage('invoicingDetail',{id:item.id, batchCode: item.batchCode})">查看</div>
+            </div>
+            <div class="item">
+              <span class="title">开票月份:</span>
+              <span class="content">{{ getMonth(item) }}</span>
+            </div>
+            <div class="item">
+              <span class="title">结算总金额:</span>
+              <span class="content">{{ item?.totalMoney ? item.totalMoney : 0 }}元</span>
+            </div>
+            <div class="item">
+              <span class="title">扣款金额:</span>
+              <span class="content">{{ item?.cutMoney || 0 }}元</span>
+            </div>
+            <div class="item">
+              <span class="title">扣款原因:</span>
+              <span class="content" style="color: #FF8F37;">{{ item.remark }}</span>
+            </div>
+            <div class="item">
+              <span class="title">最终开票金额:</span>
+              <span class="content">{{ item?.invoiceMoney || 0 }}元</span>
+            </div>
+            <van-checkbox class="checkbox_cls" v-if="active == 2" :name="item" ref="checkboxes" />
+          </div>
+        </van-checkbox-group>
+      </van-list>
+    </van-pull-refresh>
+  </div>
+  <div class="invoice_btn_wrap" v-if="active == 2 && totalCount > 0">
+    <div class="invoice_btn_info">
+      <span class="invoice_btn_title">开票总金额</span>
+      <span class="invoice_btn_money">￥{{totalCount}}</span>
     </div>
-  </van-pull-refresh>
+    <div class="btn">去开票</div>
+  </div>
   <div v-show="show" class="bgShow">
     <img src="@/assets/empty.png">
   </div>
@@ -63,14 +96,73 @@ export default {
       notifyList:[],
       pageNum:1,
       pageSize:10,
+      total: 0,
       show:false,
       isLoading: false,
+      loading: false,
+      active: 1,
+      status: '',
+      dispatchAppSearchInvoiced: '',
+      batchCode: '',
+      finished: false,
+      checkList: [],
     }
   },
+  computed: {
+    totalCount () {
+      let total = 0;
+      this.checkList.map(item => {
+        total += item.invoiceMoney
+      })
+      return total
+    },
+  },
   mounted() {
-      this.getNotifyList()
+      // this.getNotifyList()
   },
   methods:{
+    async onSearch() {
+      this.pageNum=1
+      await this.getNotifyList()
+    },
+    async getMore(){
+      if ( this.active != 2 ) {
+        await this.getNotifyList()
+        this.pageNum++;
+        // 加载状态结束
+        this.loading = false;
+        // 数据全部加载完成
+        if (this.notifyList.length >= this.total) {
+          this.finished = true;
+        }
+      }
+    },
+    changeTabHandler() {
+      this.pageNum = 1;
+      this.notifyList = [];
+      this.checkList = [];
+      if (this.active == 1) {   // 全部， 需要分页
+        this.status = '';
+        this.dispatchAppSearchInvoiced = '';
+        this.pageSize = 10;
+      } else if(this.active == 2) {   // 未开票, 不需要分页
+        this.status = 2;
+        this.dispatchAppSearchInvoiced = '';
+        this.pageSize = 10000
+      } else if(this.active == 3) {   // 已开票，需要分页
+        this.status = '';
+        this.dispatchAppSearchInvoiced = 1;
+        this.pageSize = 10
+      }
+      this.getNotifyList()
+    },
+    getMonth(item) {
+      let str = '';
+      let startTime = new Date(item.createTime);
+      let endTime = new Date(item.overTime);
+      str = startTime.getFullYear() + '年' + (startTime.getMonth() + 1 ) + '月 - ' + endTime.getFullYear() + '年' + (endTime.getMonth() + 1) + '月'
+      return str
+    },
     onRefresh() {
       this.pageNum=1
       this.getNotifyList()
@@ -81,19 +173,33 @@ export default {
     },
     async getNotifyList(){
       let res =  await notifyInvoiceList({
-          pageNum:this.pageNum,
-          pageSize:this.pageSize
+        pageNum:this.pageNum,
+        pageSize:this.pageSize,
+        status: this.status,
+        dispatchAppSearchInvoiced: this.dispatchAppSearchInvoiced,
+        total: this.total,
+        batchCode: this.batchCode,
+        current: 1,
       })
-      // if(res.code === 0){
-        this.notifyList=res.data;
-        console.log(this.notifyList)
-        if(this.notifyList.length === 0){
-              this.show=true
+      if(res.code == 200){
+        this.total=res.total
+        if(this.pageNum == 1){
+          this.notifyList=res.data;
+        }else{
+          let preList = this.notifyList;
+          let arr = res.data;
+          this.notifyList = preList.concat(arr)
+        }
+        if (this.notifyList.length === 0) {
+          this.show=true
         }else{
           this.show=false
         }
       }
-    // },
+    },
+    toggle(index) {
+      this.$refs.checkboxes[index].toggle();
+    },
   }
 }
 </script>
@@ -101,6 +207,11 @@ export default {
 <style scoped lang="scss">
 @import "@/styles/mixin.scss";
 @import "@/styles/common.scss";
+.van-checkbox {
+  position: absolute;
+  bottom: 20px;
+  right: 15px;
+}
 .wrap{
   @include wh(100%,100%);
   background-color: #F4F5F7;
@@ -113,6 +224,7 @@ export default {
 }
 .itemWrap{
   background: #FFFFFF;
+  position: relative;
   @include wh(100%,194px);
   box-sizing: border-box;
   padding: 14px 25px 18px 29px;
@@ -125,6 +237,7 @@ export default {
     }
     .title{
       opacity: .5;
+      margin-right: 5px;
     }
   }
   .line1{
@@ -141,10 +254,52 @@ export default {
 }
 .bgShow{
   @include flexTwoCenter;
-  height:calc(100% - 46px);
+  /*height:calc(100% - 46px);*/
   background-color: #FAFAFA;
   img{
     width: 100%;
   }
 }
-</style>
+.van-tabs {
+  position: fixed;
+  width: 100%;
+  background-color: #2c395f;
+  z-index: 1000000 !important;
+}
+  .content_wrap {
+    padding-top: 1.17333rem;
+  }
+  .invoice_btn_wrap {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    padding: 20px;
+    box-sizing: border-box;
+    background-color: #fff;
+    .invoice_btn_info {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .invoice_btn_title {
+        font-size: 14px;
+        font-weight: bold;
+      }
+      .invoice_btn_money {
+        font-size: 26px;
+        color: red;
+      }
+    }
+    .btn {
+      width: 100%;
+      background-color: #2C395F;
+      color: #fff;
+      padding: 15px 0;
+      text-align: center;
+      border-radius: 6px;
+    }
+  }
+
+  .pd_cls {
+    padding-bottom: 40px;
+  }
+</style>