添加发票or关联发票

pull/1/head
gongzeliang 9 months ago
parent 851370a156
commit 15e0900fbe

@ -5,22 +5,56 @@
<div class="Re-select-header-title">发票关联</div> <div class="Re-select-header-title">发票关联</div>
<div class="Re-select-header-confirm" @click="handleConfirm"></div> <div class="Re-select-header-confirm" @click="handleConfirm"></div>
</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"> <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-item-box" v-for="(item,index) in tableList" :key="index">
<div class="new-lf"> <div class="new-lf">
<van-checkbox v-model="item.checked" shape="square"></van-checkbox> <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" /> --> <!-- <van-image @click="handleShowImg(item)" width="2.5rem" height="2.5rem" src="https://img01.yzcdn.cn/vant/cat.jpeg" /> -->
</div> </div>
<div class="new-cr" @click="handleSetCheck(index)"> <div class="new-cr" @click="handleSetCheck(index,item)" v-if="invoiceType == '01'">
<div>发票代码 {{item.invoiceCode}}</div> <div class="mt5">发票消费类型 {{item.serviceType || '-'}}</div>
<div>发票号码 {{item.invoiceNum}}</div> <div class="mt5">发票代码 {{item.invoiceCode || '-'}}</div>
<div>开票日期 {{item.invoiceDate ? dayjs(item.invoiceDate).format('YYYY/MM/DD') : ''}}</div> <div class="mt5">发票号码 {{item.invoiceNum || '-'}}</div>
<div>价税合计 {{item.totalAmount}}</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>
<!-- <div class="new-rt" @click="handleNewDel(index)">
<van-icon name="delete-o" size="20" />
</div> -->
</div> </div>
</RMList>
</div> </div>
</van-popup> </van-popup>
@ -29,9 +63,16 @@
<script> <script>
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import { ImagePreview } from 'vant'; import { ImagePreview } from 'vant';
import {
getInvoicePage01,
getInvoicePage02,
getInvoicePage03,
getInvoicePage04,
getInvoicePage05
} from "@/api/bs/invoice";
export default { export default {
props: { props: {
invoiceIds: Array, // id invoiceIds: Object, // id
isOpen: Boolean, isOpen: Boolean,
isExist: Boolean, // isExist: Boolean, //
tripPartners: Array, // tripPartners: Array, //
@ -40,8 +81,8 @@ export default {
}, },
components: { components: {
RePick: () => import('@/components/ReComponents/RePick'), RePick: () => import('@/components/ReComponents/RePick'),
RMList: () => import('@/components/ReComponents/RMList'),
}, },
// //
computed: { computed: {
// tableList() { // tableList() {
@ -66,8 +107,23 @@ export default {
tableList: [], tableList: [],
demo: false, demo: false,
isShow: 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: { watch: {
isOpen: { isOpen: {
handler(val) { handler(val) {
@ -80,26 +136,37 @@ export default {
deep: true, deep: true,
immediate: true immediate: true
}, },
list: { // list: {
handler(val) { // handler(val) {
if (val && val.length) { // if (val && val.length) {
let arr = (this.list || []).map(item => { // let arr = (this.list || []).map(item => {
return { // return {
...item, // ...item,
checked: (this.invoiceIds || []).includes(item.id) // checked: (this.invoiceIds || []).includes(item.id)
} // }
}) // })
this.tableList = JSON.parse(JSON.stringify(arr)) // this.tableList = JSON.parse(JSON.stringify(arr))
} // }
}, // },
deep: true, // deep: true,
immediate: true // immediate: true
} // }
}, },
methods: { methods: {
handleSetCheck(index) { handleSetCheck(index) {
// this.tableList // this.tableList
let _this = this
this.$set(this.tableList[index], 'checked', !this.tableList[index].checked) 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() { handleShowImg() {
ImagePreview(['https://img01.yzcdn.cn/vant/apple-1.jpg']); ImagePreview(['https://img01.yzcdn.cn/vant/apple-1.jpg']);
@ -113,8 +180,8 @@ export default {
}, },
handleConfirm() { handleConfirm() {
let arr = (this.tableList.filter(item => item.checked)).map(item => item.id) || [] // let arr = (this.tableList.filter(item => item.checked)).map(item => item.id) || []
this.$emit('onConfirm', arr) this.$emit('onConfirm', this.invoiceIdsCopy)
}, },
hanleCancel() { hanleCancel() {
@ -123,8 +190,47 @@ export default {
handleDel(index) { handleDel(index) {
this.form.tripPartners.splice(index, 1) 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> </script>
@ -161,7 +267,7 @@ export default {
.box-2 { .box-2 {
margin-top: 1rem; margin-top: 1rem;
box-sizing: border-box; box-sizing: border-box;
padding: 0.5rem 1rem; //padding: 0.5rem 1rem;
padding-top: 0; padding-top: 0;
max-height: 50vh; max-height: 50vh;
overflow: auto; overflow: auto;
@ -185,13 +291,14 @@ export default {
.box-1 { .box-1 {
@extend .box-2; @extend .box-2;
.new-item-box { .new-item-box {
width: 100%; width: calc(100% - 2rem);
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
box-sizing: border-box; box-sizing: border-box;
// padding: 0.5rem; // padding: 0.5rem;
margin: 0.5rem 0; margin: 1rem;
border-radius: 0.5rem; border-radius: 0.5rem;
//border: 1px solid #ccc;
box-shadow: 0 0 0.5rem 0.2rem #ccc; box-shadow: 0 0 0.5rem 0.2rem #ccc;
align-items: center; align-items: center;
padding: 0.5rem; padding: 0.5rem;

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

@ -82,7 +82,7 @@
</template> </template>
</van-field> </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" /> <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="请关联" /> <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> </div>
<!--关联发票 --> <!--关联发票 -->
@ -207,6 +207,9 @@ export default {
}, },
data() { data() {
return { return {
indexOne:1,
indexTwo:1,
claimType:'',
expenseApplyList: [], expenseApplyList: [],
isShow: false, isShow: false,
dialogObj: {}, dialogObj: {},
@ -253,7 +256,7 @@ export default {
show: false, show: false,
invoiceName: '', invoiceName: '',
ieList: this.ieList, ieList: this.ieList,
invoiceIds: [], invoiceIds: {},
feeType: null, feeType: null,
amount: undefined, amount: undefined,
invoiceCount: undefined, invoiceCount: undefined,
@ -268,7 +271,7 @@ export default {
show: false, show: false,
invoiceName: '', invoiceName: '',
ieList: this.ieList, ieList: this.ieList,
invoiceIds: [], invoiceIds: {},
feeType: null, feeType: null,
amount: undefined, amount: undefined,
invoiceCount: undefined, invoiceCount: undefined,
@ -415,6 +418,8 @@ export default {
} }
if (this.$route.query.billType === 'RCBX') { if (this.$route.query.billType === 'RCBX') {
delete newForm.expenseClaimTrips delete newForm.expenseClaimTrips
}else {
delete newForm.expenseClaimDetails
} }
if (ignoreFeeTip) { if (ignoreFeeTip) {
this.$loading(true, 'form') this.$loading(true, 'form')
@ -515,62 +520,79 @@ export default {
handleFilterList(ids, type) { handleFilterList(ids, type) {
return new Promise((resolve) => { return new Promise((resolve) => {
let arr = [] let arr = []
if (!type) { // if (!type) {
this.form.expenseClaimTrips.forEach(item => { // this.form.expenseClaimTrips.forEach(item => {
item.expenseClaimDetails.forEach(n => { // item.expenseClaimDetails.forEach(n => {
n.invoiceIds.forEach(z => { // n.invoiceIds.forEach(z => {
arr.push(z) // arr.push(z)
}) // })
//
}) // })
}) // })
} else { // } else {
this.form.expenseClaimDetails.forEach(n => { // this.form.expenseClaimDetails.forEach(n => {
n.invoiceIds.forEach(z => { // n.invoiceIds.forEach(z => {
arr.push(z) // arr.push(z)
}) // })
//
}) // })
} // }
let beforeIds = this.ieList.filter(item => !arr.includes(item.id)) || [] let beforeIds = this.ieList.filter(item => !arr.includes(item.id)) || []
let noewIds = this.ieList.filter(item => ids.includes(item.id)) || [] let noewIds = this.ieList.filter(item => ids.includes(item.id)) || []
resolve(beforeIds.concat(noewIds)) resolve(beforeIds.concat(noewIds))
}) })
}, },
handleShowIe(index, nIndex) { handleShowIe(type,index, nIndex) {
if (this.disabled) return if (this.disabled) return
let obj = this.form.expenseClaimTrips[index].expenseClaimDetails[nIndex] // this.indexOne = index
this.handleFilterList(obj.invoiceIds || []).then((arr) => { // this.indexTwo = nIndex
this.$set(this.form.expenseClaimTrips[index].expenseClaimDetails[nIndex], 'ieList', arr) // this.claimType = type
this.$set(this.form.expenseClaimTrips[index].expenseClaimDetails[nIndex], 'show', true) // 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) { handleShowIe1(nIndex) {
if (this.disabled) return if (this.disabled) return
let obj = this.form.expenseClaimDetails[nIndex] // 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], 'ieList', arr)
this.$set(this.form.expenseClaimDetails[nIndex], 'show', true) this.$set(this.form.expenseClaimDetails[nIndex], 'show', true)
}) // this.handleFilterList(obj.invoiceIds || {}, 1).then((arr) => {
//
// })
}, },
handleConfirmIe(arr, index, nIndex) { 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], 'invoiceIds', arr)
this.$set(this.form.expenseClaimTrips[index].expenseClaimDetails[nIndex], 'show', false) 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], 'invoiceName', '以关联发票,请点击查看')
this.$set(this.form.expenseClaimTrips[index].expenseClaimDetails[nIndex], 'invoiceCount', arr.length) this.$set(this.form.expenseClaimTrips[index].expenseClaimDetails[nIndex], 'invoiceCount', this.totalCount(arr))
}, },
handleConfirmIe1(arr, nIndex) { 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], 'invoiceIds', arr)
this.$set(this.form.expenseClaimDetails[nIndex], 'show', false) this.$set(this.form.expenseClaimDetails[nIndex], 'show', false)
this.$set(this.form.expenseClaimDetails[nIndex], 'invoiceName', nameArr) this.$set(this.form.expenseClaimDetails[nIndex], 'invoiceName', '以关联发票,请点击查看')
this.$set(this.form.expenseClaimDetails[nIndex], 'invoiceCount', arr.length) 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) { handleAddAccount(pIndex, index) {
this.form.expenseClaimTrips[pIndex].expenseClaimDetails.push({ this.form.expenseClaimTrips[pIndex].expenseClaimDetails.push({
invoiceIds: [], invoiceIds: {},
feeType: null, feeType: null,
amount: undefined, amount: undefined,
invoiceCount: undefined, invoiceCount: undefined,
@ -580,7 +602,7 @@ export default {
handleAddAccount1() { handleAddAccount1() {
this.form.expenseClaimDetails.push({ this.form.expenseClaimDetails.push({
invoiceIds: [], invoiceIds: {},
feeType: null, feeType: null,
amount: undefined, amount: undefined,
invoiceCount: undefined, invoiceCount: undefined,
@ -616,18 +638,18 @@ export default {
} }
}) })
} }
this.form.expenseClaimTrips.forEach(n => { // this.form.expenseClaimTrips.forEach(n => {
n.expenseClaimDetails.forEach(z => { // n.expenseClaimDetails.forEach(z => {
let nameArr = ((this.ieList.filter(item => (z.invoiceIds || []).includes(item.id)) || []).map(item => item.invoiceCode)).join('、') // let nameArr = ((this.ieList.filter(item => (z.invoiceIds || []).includes(item.id)) || []).map(item => item.invoiceCode)).join('')
this.$set(z, 'show', false) // this.$set(z, 'show', false)
this.$set(z, 'invoiceName', nameArr) // this.$set(z, 'invoiceName', nameArr)
}) // })
}) // })
this.form.expenseClaimDetails.forEach(z => { // this.form.expenseClaimDetails.forEach(z => {
let nameArr = ((this.ieList.filter(item => (z.invoiceIds || []).includes(item.id)) || []).map(item => item.invoiceCode)).join('、') // let nameArr = ((this.ieList.filter(item => (z.invoiceIds || []).includes(item.id)) || []).map(item => item.invoiceCode)).join('')
this.$set(z, 'show', false) // this.$set(z, 'show', false)
this.$set(z, 'invoiceName', nameArr) // this.$set(z, 'invoiceName', nameArr)
}) // })
console.log('我看了一下累了..', this.form); console.log('我看了一下累了..', this.form);
this.fileList = res.data.files || [] this.fileList = res.data.files || []
this.isAuthorised = res.data.isAuthorised this.isAuthorised = res.data.isAuthorised
@ -705,7 +727,7 @@ export default {
type: 0, type: 0,
expenseClaimDetails: [ expenseClaimDetails: [
{ {
invoiceIds: [], invoiceIds: {},
feeType: null, feeType: null,
amount: undefined, amount: undefined,
invoiceCount: undefined, invoiceCount: undefined,

@ -138,6 +138,7 @@ export default {
handleListQuery(paramProp) { handleListQuery(paramProp) {
this.listQuery = { this.listQuery = {
...paramProp, ...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')] 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 this.finished = false

Loading…
Cancel
Save