添加发票or关联发票

src/components/ConnectInvoice/index.vue

@@ -5,22 +5,56 @@
       <div class="Re-select-header-title">发票关联</div>
       <div class="Re-select-header-confirm" @click="handleConfirm">确认</div>
     </div>
+    <van-tabs v-model="invoiceType" :swipe-threshold="4" @change="vanTabsChange">
+      <van-tab name="01" title="增值税发票" />
+      <van-tab name="02" title="火车票" />
+      <van-tab name="03" title="飞机行程票" />
+      <van-tab name="04" title="网约车行程单" />
+      <van-tab name="05" title="出租车发票" />
+    </van-tabs>
     <div class="box-1">
+      <RMList :moreLoading.sync="moreLoading" :refreshing.sync="refreshing" :finished.sync="finished" @onLoad="handleLoad" @onRefresh="handleRefresh" isMore :tableList="tableList">
       <div class="new-item-box" v-for="(item,index) in tableList" :key="index">
         <div class="new-lf">
           <van-checkbox v-model="item.checked" shape="square"></van-checkbox>
           <!-- <van-image @click="handleShowImg(item)"  width="2.5rem" height="2.5rem" src="https://img01.yzcdn.cn/vant/cat.jpeg" /> -->
         </div>
-        <div class="new-cr" @click="handleSetCheck(index)">
-          <div>发票代码： {{item.invoiceCode}}</div>
-          <div>发票号码： {{item.invoiceNum}}</div>
-          <div>开票日期： {{item.invoiceDate ? dayjs(item.invoiceDate).format('YYYY/MM/DD') : ''}}</div>
-          <div>价税合计： {{item.totalAmount}}</div>
+        <div class="new-cr" @click="handleSetCheck(index,item)" v-if="invoiceType == '01'">
+          <div class="mt5">发票消费类型： {{item.serviceType || '-'}}</div>
+          <div class="mt5">发票代码： {{item.invoiceCode || '-'}}</div>
+          <div class="mt5">发票号码： {{item.invoiceNum || '-'}}</div>
+          <div style="margin-top: 0.3rem;color:#333 ">开票日期： {{item.invoiceDate && dayjs(item.invoiceDate).format('YY/MM/DD HH:ss')}}</div>
+        </div>
+        <div class="new-cr" @click="handleSetCheck(index,item)" v-if="invoiceType == '02'">
+          <div class="mt5">车票号： {{item.ticketNum || '-'}}</div>
+          <div class="mt5">始发站： {{item.startingStation || '-'}}</div>
+          <div class="mt5">到达站： {{item.destinationStation || '-'}}</div>
+          <div style="margin-top: 0.3rem;color:#333 ">出发日期： {{item.startingDate && dayjs(item.startingDate).format('YY/MM/DD HH:ss')}}</div>
+          <div class="mt5">车次号： {{item.trainNum || '-'}}</div>
+        </div>
+        <div class="new-cr" @click="handleSetCheck(index,item)" v-if="invoiceType == '03'">
+          <div class="mt5">姓名： {{item.name || '-'}}</div>
+          <div class="mt5">始发站： {{item.startingStation || '-'}}</div>
+          <div class="mt5">目的站： {{item.destinationStation || '-'}}</div>
+          <div class="mt5">航班号： {{item.flight || '-'}}</div>
+          <div class="mt5">承运人： {{item.carrier || '-'}}</div>
+        </div>
+        <div class="new-cr" @click="handleSetCheck(index,item)" v-if="invoiceType == '04'">
+          <div class="mt5">服务商： {{item.serviceProvider || '-'}}</div>
+          <div class="mt5">行程人手机号： {{item.phone || '-'}}</div>
+          <div style="margin-top: 0.3rem;color:#333 ">上车日期： {{item.items[0].pickupDate && dayjs(item.items[0].pickupDate).format('YY/MM/DD HH:ss')}}</div>
+          <div class="mt5">起点： {{item.items[0].startPlace || '-'}}</div>
+          <div class="mt5">终点： {{item.items[0].destinationPlace || '-'}}</div>
+          <div class="mt5">城市： {{item.items[0].city || '-'}}</div>
+        </div>
+        <div class="new-cr" @click="handleSetCheck(index,item)" v-if="invoiceType == '05'">
+          <div class="mt5">发票代码： {{item.invoiceCode || '-'}}</div>
+          <div class="mt5">发票号码： {{item.invoiceNum || '-'}}</div>
+          <div class="mt5">车牌号： {{item.taxiNum || '-'}}</div>
+          <div style="margin-top: 0.3rem;color:#333 ">日期： {{item.startingDate && dayjs(item.startingDate).format('YY/MM/DD HH:ss')}}</div>
         </div>
-        <!-- <div class="new-rt" @click="handleNewDel(index)">
-          <van-icon name="delete-o" size="20" />
-        </div> -->
       </div>
+      </RMList>
     </div>
 
   </van-popup>
@@ -29,9 +63,16 @@
 <script>
 import dayjs from 'dayjs';
 import { ImagePreview } from 'vant';
+import {
+  getInvoicePage01,
+  getInvoicePage02,
+  getInvoicePage03,
+  getInvoicePage04,
+  getInvoicePage05
+} from "@/api/bs/invoice";
 export default {
   props: {
-    invoiceIds: Array, // 选中得发票id
+    invoiceIds: Object, // 选中得发票id
     isOpen: Boolean,
     isExist: Boolean, // 是否存在
     tripPartners: Array, // 选中同行人
@@ -40,8 +81,8 @@ export default {
   },
   components: {
     RePick: () => import('@/components/ReComponents/RePick'),
+    RMList: () => import('@/components/ReComponents/RMList'),
   },
-
   // 计算属性
   computed: {
     // tableList() {
@@ -66,8 +107,23 @@ export default {
       tableList: [],
       demo: false,
       isShow: false,
+      invoiceType:'01',
+      invoiceIdsCopy:{},
+      moreLoading: false,
+      refreshing: false,
+      finished: false,
+      listQuery:{
+        pageNo: 1,
+        pageSize: 10,
+      }
     }
   },
+  created() {
+    this.$nextTick(()=>{
+      this.invoiceIdsCopy = this.invoiceIds
+      this.getList('init')
+    })
+  },
   watch: {
     isOpen: {
       handler(val) {
@@ -80,26 +136,37 @@ export default {
       deep: true,
       immediate: true
     },
-    list: {
-      handler(val) {
-        if (val && val.length) {
-          let arr = (this.list || []).map(item => {
-            return {
-              ...item,
-              checked: (this.invoiceIds || []).includes(item.id)
-            }
-          })
-          this.tableList = JSON.parse(JSON.stringify(arr))
-        }
-      },
-      deep: true,
-      immediate: true
-    }
+    // list: {
+    //   handler(val) {
+    //     if (val && val.length) {
+    //       let arr = (this.list || []).map(item => {
+    //         return {
+    //           ...item,
+    //           checked: (this.invoiceIds || []).includes(item.id)
+    //         }
+    //       })
+    //       this.tableList = JSON.parse(JSON.stringify(arr))
+    //     }
+    //   },
+    //   deep: true,
+    //   immediate: true
+    // }
   },
   methods: {
     handleSetCheck(index) {
       //  this.tableList
+      let _this = this
       this.$set(this.tableList[index], 'checked', !this.tableList[index].checked)
+      if(this.tableList[index].checked){
+        if(!_this.invoiceIdsCopy.hasOwnProperty(_this.invoiceType)){
+          _this.invoiceIdsCopy[_this.invoiceType] = [];
+        }
+        _this.invoiceIdsCopy[_this.invoiceType].push(this.tableList[index].id)
+      }else {
+        _this.invoiceIdsCopy[_this.invoiceType].splice(index,1)
+      }
+      this.$forceUpdate()
+      console.log(_this.invoiceIdsCopy)
     },
     handleShowImg() {
       ImagePreview(['https://img01.yzcdn.cn/vant/apple-1.jpg']);
@@ -113,8 +180,8 @@ export default {
     },
 
     handleConfirm() {
-      let arr = (this.tableList.filter(item => item.checked)).map(item => item.id) || []
-      this.$emit('onConfirm', arr)
+      // let arr = (this.tableList.filter(item => item.checked)).map(item => item.id) || []
+      this.$emit('onConfirm', this.invoiceIdsCopy)
     },
 
     hanleCancel() {
@@ -123,8 +190,47 @@ export default {
     handleDel(index) {
       this.form.tripPartners.splice(index, 1)
     },
-
-
+    handleLoad() {
+      this.listQuery.pageNo += 1
+      this.getList('more')
+    },
+    handleRefresh() {
+      this.listQuery.pageNo = 1
+      this.finished = false
+      this.getList('refresh')
+    },
+    vanTabsChange(){
+      this.listQuery.pageNo = 1
+      this.getList('init')
+    },
+    getList(val){
+      let _this = this
+      this.moreLoading = true
+      this.$loading(true, 'tableLoading')
+      const getInvoicePage = this.invoiceType == '01' ? getInvoicePage01 : this.invoiceType == '02' ? getInvoicePage02 : this.invoiceType == '03' ? getInvoicePage03 : this.invoiceType == '04' ? getInvoicePage04 : getInvoicePage05;
+      getInvoicePage(_this.listQuery).then(res => {
+        let resList = res.data && res.data.list || []
+        if (['init', 'refresh'].includes(val)) {
+          this.tableList = resList
+        } else {
+          this.tableList = this.tableList.concat(resList)
+        }
+        if (resList.length < this.pageSize) {
+          this.finished = true
+        }
+        if(_this.invoiceIdsCopy && _this.invoiceIdsCopy.hasOwnProperty(_this.invoiceType)){
+          _this.tableList.map(item =>{
+            item.checked=(_this.invoiceIdsCopy[_this.invoiceType] || []).includes(item.id)
+          })
+        }
+      }).finally(() => {
+        this.$nextTick(() => {
+          this.moreLoading = false
+          this.refreshing = false
+          this.$loading(false, 'tableLoading')
+        })
+      })
+    }
   },
 }
 </script>
@@ -161,7 +267,7 @@ export default {
 .box-2 {
   margin-top: 1rem;
   box-sizing: border-box;
-  padding: 0.5rem 1rem;
+  //padding: 0.5rem 1rem;
   padding-top: 0;
   max-height: 50vh;
   overflow: auto;
@@ -185,13 +291,14 @@ export default {
 .box-1 {
   @extend .box-2;
   .new-item-box {
-    width: 100%;
+    width: calc(100% - 2rem);
     display: flex;
     justify-content: flex-start;
     box-sizing: border-box;
     // padding: 0.5rem;
-    margin: 0.5rem 0;
+    margin: 1rem;
     border-radius: 0.5rem;
+    //border: 1px solid #ccc;
     box-shadow: 0 0 0.5rem 0.2rem #ccc;
     align-items: center;
     padding: 0.5rem;

src/components/MyInvoiceListCard/index.vue

@@ -97,7 +97,7 @@
 <script>
 import { mapState, mapGetters, mapMutations } from 'vuex'
 import { getDictDataLabel } from "@/utils/dict";
-import { deleteInvoice, } from "@/api/bs/invoice";
+import { deleteInvoice01,deleteInvoice02,deleteInvoice03,deleteInvoice04,deleteInvoice05 } from "@/api/bs/invoice";
 import dayjs from 'dayjs'
 import { Dialog } from 'vant'
 export default {
@@ -152,6 +152,7 @@ export default {
         message: '你确定要删除吗?',
       })
         .then(() => {
+          const deleteInvoice = this.invoiceType == '01' ? deleteInvoice01 : this.invoiceType == '02' ? deleteInvoice02 : this.invoiceType == '03' ? deleteInvoice03 : this.invoiceType == '04' ? deleteInvoice04 : deleteInvoice05;
           deleteInvoice(id).then(() => {
             this.$emit('onAllRefresh')
           })

src/views/company/claim/index.vue

@@ -82,7 +82,7 @@
                       </template>
                     </van-field>
                     <van-field v-model="nitem.remark" :disabled="disabled" name="reason" autosize rows="2" label="备注" clear-trigger="always" input-align="right" placeholder="请输入" type="textarea" />
-                    <div @click="handleShowIe(index,nIndex)">
+                    <div @click="handleShowIe('1',index,nIndex)">
                       <van-field disabled :class="nitem.invoiceName ? 'actived-disabled tag-blue':'tag-blue'" v-model="nitem.invoiceName" name="reason" autosize rows="2" label="关联发票" clear-trigger="always" input-align="right" placeholder="请关联" />
                     </div>
                     <!--关联发票  -->
@@ -207,6 +207,9 @@ export default {
   },
   data() {
     return {
+      indexOne:1,
+      indexTwo:1,
+      claimType:'',
       expenseApplyList: [],
       isShow: false,
       dialogObj: {},
@@ -253,7 +256,7 @@ export default {
                 show: false,
                 invoiceName: '',
                 ieList: this.ieList,
-                invoiceIds: [],
+                invoiceIds: {},
                 feeType: null,
                 amount: undefined,
                 invoiceCount: undefined,
@@ -268,7 +271,7 @@ export default {
             show: false,
             invoiceName: '',
             ieList: this.ieList,
-            invoiceIds: [],
+            invoiceIds: {},
             feeType: null,
             amount: undefined,
             invoiceCount: undefined,
@@ -415,6 +418,8 @@ export default {
           }
           if (this.$route.query.billType === 'RCBX') {
             delete newForm.expenseClaimTrips
+          }else {
+            delete newForm.expenseClaimDetails
           }
           if (ignoreFeeTip) {
             this.$loading(true, 'form')
@@ -515,62 +520,79 @@ export default {
     handleFilterList(ids, type) {
       return new Promise((resolve) => {
         let arr = []
-        if (!type) {
-          this.form.expenseClaimTrips.forEach(item => {
-            item.expenseClaimDetails.forEach(n => {
-              n.invoiceIds.forEach(z => {
-                arr.push(z)
-              })
-
-            })
-          })
-        } else {
-          this.form.expenseClaimDetails.forEach(n => {
-            n.invoiceIds.forEach(z => {
-              arr.push(z)
-            })
-
-          })
-        }
+        // if (!type) {
+        //   this.form.expenseClaimTrips.forEach(item => {
+        //     item.expenseClaimDetails.forEach(n => {
+        //       n.invoiceIds.forEach(z => {
+        //         arr.push(z)
+        //       })
+        //
+        //     })
+        //   })
+        // } else {
+        //   this.form.expenseClaimDetails.forEach(n => {
+        //     n.invoiceIds.forEach(z => {
+        //       arr.push(z)
+        //     })
+        //
+        //   })
+        // }
         let beforeIds = this.ieList.filter(item => !arr.includes(item.id)) || []
         let noewIds = this.ieList.filter(item => ids.includes(item.id)) || []
         resolve(beforeIds.concat(noewIds))
       })
     },
-    handleShowIe(index, nIndex) {
+    handleShowIe(type,index, nIndex) {
       if (this.disabled) return
-      let obj = this.form.expenseClaimTrips[index].expenseClaimDetails[nIndex]
-      this.handleFilterList(obj.invoiceIds || []).then((arr) => {
-        this.$set(this.form.expenseClaimTrips[index].expenseClaimDetails[nIndex], 'ieList', arr)
-        this.$set(this.form.expenseClaimTrips[index].expenseClaimDetails[nIndex], 'show', true)
-      })
+      // this.indexOne = index
+      // this.indexTwo = nIndex
+      // this.claimType = type
+      // let obj = this.form.expenseClaimTrips[index].expenseClaimDetails[nIndex]
+      // this.$set(this.form.expenseClaimTrips[index].expenseClaimDetails[nIndex], 'ieList', arr)
+      this.$set(this.form.expenseClaimTrips[index].expenseClaimDetails[nIndex], 'show', true)
+      // this.handleFilterList(obj.invoiceIds || {}).then((arr) => {
+      //
+      // })
     },
     handleShowIe1(nIndex) {
       if (this.disabled) return
-      let obj = this.form.expenseClaimDetails[nIndex]
-      this.handleFilterList(obj.invoiceIds || [], 1).then((arr) => {
-        this.$set(this.form.expenseClaimDetails[nIndex], 'ieList', arr)
-        this.$set(this.form.expenseClaimDetails[nIndex], 'show', true)
-      })
+      // let obj = this.form.expenseClaimDetails[nIndex]
+
+      // this.$set(this.form.expenseClaimDetails[nIndex], 'ieList', arr)
+      this.$set(this.form.expenseClaimDetails[nIndex], 'show', true)
+      // this.handleFilterList(obj.invoiceIds || {}, 1).then((arr) => {
+      //
+      // })
     },
     handleConfirmIe(arr, index, nIndex) {
-      let nameArr = ((this.ieList.filter(item => arr.includes(item.id)) || []).map(item => item.invoiceCode)).join('、')
+      // let nameArr = ((this.ieList.filter(item => arr.includes(item.id)) || []).map(item => item.invoiceCode)).join('、')
       this.$set(this.form.expenseClaimTrips[index].expenseClaimDetails[nIndex], 'invoiceIds', arr)
       this.$set(this.form.expenseClaimTrips[index].expenseClaimDetails[nIndex], 'show', false)
-      this.$set(this.form.expenseClaimTrips[index].expenseClaimDetails[nIndex], 'invoiceName', nameArr)
-      this.$set(this.form.expenseClaimTrips[index].expenseClaimDetails[nIndex], 'invoiceCount', arr.length)
+      this.$set(this.form.expenseClaimTrips[index].expenseClaimDetails[nIndex], 'invoiceName', '以关联发票，请点击查看')
+      this.$set(this.form.expenseClaimTrips[index].expenseClaimDetails[nIndex], 'invoiceCount', this.totalCount(arr))
     },
     handleConfirmIe1(arr, nIndex) {
-      let nameArr = ((this.ieList.filter(item => arr.includes(item.id)) || []).map(item => item.invoiceCode)).join('、')
+      // let nameArr = ((this.ieList.filter(item => arr.includes(item.id)) || []).map(item => item.invoiceCode)).join('、')
       this.$set(this.form.expenseClaimDetails[nIndex], 'invoiceIds', arr)
       this.$set(this.form.expenseClaimDetails[nIndex], 'show', false)
-      this.$set(this.form.expenseClaimDetails[nIndex], 'invoiceName', nameArr)
-      this.$set(this.form.expenseClaimDetails[nIndex], 'invoiceCount', arr.length)
+      this.$set(this.form.expenseClaimDetails[nIndex], 'invoiceName', '以关联发票，请点击查看')
+      this.$set(this.form.expenseClaimDetails[nIndex], 'invoiceCount', this.totalCount(arr))
+    },
+
+    totalCount(obj) {
+      let count = 0;
+
+      for (let key in obj) {
+        if (Array.isArray(obj[key])) {
+          count += obj[key].length;
+        }
+      }
+      return count;
     },
 
     handleAddAccount(pIndex, index) {
       this.form.expenseClaimTrips[pIndex].expenseClaimDetails.push({
-        invoiceIds: [],
+        invoiceIds: {},
         feeType: null,
         amount: undefined,
         invoiceCount: undefined,
@@ -580,7 +602,7 @@ export default {
 
     handleAddAccount1() {
       this.form.expenseClaimDetails.push({
-        invoiceIds: [],
+        invoiceIds: {},
         feeType: null,
         amount: undefined,
         invoiceCount: undefined,
@@ -616,18 +638,18 @@ export default {
               }
             })
           }
-          this.form.expenseClaimTrips.forEach(n => {
-            n.expenseClaimDetails.forEach(z => {
-              let nameArr = ((this.ieList.filter(item => (z.invoiceIds || []).includes(item.id)) || []).map(item => item.invoiceCode)).join('、')
-              this.$set(z, 'show', false)
-              this.$set(z, 'invoiceName', nameArr)
-            })
-          })
-          this.form.expenseClaimDetails.forEach(z => {
-            let nameArr = ((this.ieList.filter(item => (z.invoiceIds || []).includes(item.id)) || []).map(item => item.invoiceCode)).join('、')
-            this.$set(z, 'show', false)
-            this.$set(z, 'invoiceName', nameArr)
-          })
+          // this.form.expenseClaimTrips.forEach(n => {
+          //   n.expenseClaimDetails.forEach(z => {
+          //     let nameArr = ((this.ieList.filter(item => (z.invoiceIds || []).includes(item.id)) || []).map(item => item.invoiceCode)).join('、')
+          //     this.$set(z, 'show', false)
+          //     this.$set(z, 'invoiceName', nameArr)
+          //   })
+          // })
+          // this.form.expenseClaimDetails.forEach(z => {
+          //   let nameArr = ((this.ieList.filter(item => (z.invoiceIds || []).includes(item.id)) || []).map(item => item.invoiceCode)).join('、')
+          //   this.$set(z, 'show', false)
+          //   this.$set(z, 'invoiceName', nameArr)
+          // })
           console.log('我看了一下累了..', this.form);
           this.fileList = res.data.files || []
           this.isAuthorised = res.data.isAuthorised
@@ -705,7 +727,7 @@ export default {
         type: 0,
         expenseClaimDetails: [
           {
-            invoiceIds: [],
+            invoiceIds: {},
             feeType: null,
             amount: undefined,
             invoiceCount: undefined,

src/views/company/myInvoice/components/UserList.vue

@@ -138,6 +138,7 @@ export default {
     handleListQuery(paramProp) {
       this.listQuery = {
         ...paramProp,
+        pageSize: 10,
         invoiceDate: paramProp.startDate && [dayjs(paramProp.startDate).format('YYYY-MM-DD HH:ss:mm'), dayjs(paramProp.endDate).format('YYYY-MM-DD HH:ss:mm')]
       }
       this.finished = false