jp-housekeep-hall/pages/invoiceManagement/invoiceManagement.vue

<template>
	<view>
		<u-navbar title="发票管理"  title-color="#101010" >
			<view class="slot" slot="right" @click="gotoUrl('/pages/invoiceManagement/InvoiceTitleManagement')">
				抬头管理
			</view>
		</u-navbar>
		<!-- 标签 -->
		<view class="tabs">
			<u-tabs :list="list" :is-scroll="false" bar-width="100" :current="current" @change="change"></u-tabs>
		</view>
		<!-- 未开发票 -->
		<view class="not-invioced" v-if="current==0">
		<u-checkbox-group @change="selectOne" style="width: 100%;" >

			<view class="invoice-item" v-for="(item,i) in list1" :key="item" >
				<view class="radio">
					<label class="radio">
						<u-checkbox  v-model="item.checked"  :value="item.id" /><text></text>
					</label>
				</view>
				<view class="infos" @click="checkeditem(item)">
					<!-- <view class="title">
						<view class="text">
							{{i}}
						</view>
						<view class="money">
							{{item.totalAmount}}元
						</view>
						
					</view> -->
					<table class="table1" >
						<template >
							<tr :key="i" >
								<td colspan="2" class="tr2 text"  >{{item.name}}</td>
							</tr>
							<tr v-for="(it,j) in item" :key="i+'_'+j" v-if="!(['yearMonth','tenantContractId','name','totalAmount','checked'].indexOf(j)>=0)&&it!=0"  >
								<td class="tr2"  >{{j}}</td>
								<td>{{it}}元</td>
							</tr>
							
							<tr v-for="(it,j) in item" :key="i+'_'+j" v-if="'totalAmount'==j"  >
								<td class="tr2"  >合计</td>
								<td class="money">{{it}}元</td>
							</tr>
							
						</template>
						
					</table>
					
					 
				</view>
			</view>
			</u-checkbox-group>
			<u-divider :isnone="list1.length==0"   nonetext="没有找到相关内容"
				border-color="#CFD2D5">已经到底了</u-divider>
		</view>
		
		<!-- 已开发票 -->
		<view class="invoiced" v-if="current==1">
			<view class="invoice-item" v-for="(item,i) in list2"
			@click="btn1(item,0)"
			 :key="i"  >
				
				<view class="infos">
					<view class="title">
						<view class="text">
							{{item.title}}
						</view>
						<view  :class="{
							state:!item.image,
							state2:item.image,
						}" >
							{{item.image?'已开票':'开票中'}}
						</view>
					</view>
					<view class="item">
						<view class="name">
							发票金额
						</view>
						<view class="value">
							{{item.amount}}元
							
						

						</view>
					</view>
					<view class="item">
						<view class="name">
							抬头类型
						</view>
						<view class="value">
							
							{{item.headerType=='1'?'企业单位':''}}{{item.headerType=='2'?'个人/非企业单位':''}}
						</view>
					</view>
					<view class="item" v-if="item.headerType=='1'" >
						<view class="name">
							发票类型
						</view>
						<view class="value">
							{{item.type=='1'?'增值税专票':''}}{{item.type=='2'?'增值税普票':''}}
							
						</view>
					</view>
					<view class="item">
						<view class="name">
							申请时间
						</view>
						<view class="value">
							{{item.createTime}}		
						</view>
					</view>
					<view class="item"  v-if="!item.image"
					style="    justify-content: space-around;">
						<view class="btn" >
							<u-button @tap.stop="btn1(item,1)" type="primary">查看</u-button>
							</view>
							<view class="btn btn2" >
								<u-button  @tap.stop="btn2(item)" >撤回</u-button>
							</view>
					</view>
					
				</view>
			</view>
			<!-- <view class="invoice-item"  >
				
				<view class="infos">
					<view class="title">
						<view class="text">
							2024年1月扣费发票
						</view>
						<view class="state2">
							已开票
						</view>
					</view>
					<view class="item">
						<view class="name">
							发票金额
						</view>
						<view class="value">
							1000.00元
							
						
			
						</view>
					</view>
					<view class="item">
						<view class="name">
							发票抬头
						</view>
						<view class="value">
							联通公司
							
							
						</view>
					</view>
					<view class="item">
						<view class="name">
							申请时间
						</view>
						<view class="value">
							2024-02-07 16:00:00			
						</view>
					</view>
				</view>
			</view> -->
			<u-divider :isnone="list2.length==0"  v-if="list2.length==recordsTotal2" nonetext="没有找到相关内容"
				border-color="#CFD2D5">已经到底了</u-divider>
		</view>
		<!-- 底部 -->
		<view class="bottom" v-if="current==0">
			<view class="all">
				<label class="radio">
				
					<u-checkbox-group @change="selectAll">

						<u-checkbox  v-model="checkedAll"  value="1" /><text></text>
					</u-checkbox-group>
				</label>
			</view>
			<view class="total">
				<view class="money">
					共{{sumCollectionMoney}}元
				</view>
				<view class="amount">
					{{sumCollection.length}}张发票
				</view>
			</view>
			<view class="btn-box">
				<button class="btn" @click="submit" >去开票</button>
			</view>
		</view>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/invoiceApi.js'
	
	import {
		parseUnixTime
	
	} from '@/apis/utils'
	export default {
		data() {
			return {
				list: [{
					id:0,
					name: '未开发票'
				}, {
					id:1,
					name: '已开发票'
				}],
				current: 0,
				checkedAll:false,
				checkboxList:[],
				list1:[],
				recordsTotal1:0,
				list2:[],
				recordsTotal2:0,
				pageIndex:1,
				
			}
		},
		onLoad() {
			this.getInvoiceList1()
		},
		onReachBottom() {
			if(this.current==1){
				var list=this.list2;
				var recordsTotal=this.recordsTotal2;
				
				if (list.length < recordsTotal) {			
					this.myLoadmore();
				}
			}
			
			
		},
		computed:{
			sumCollectionMoney(){
				var amounts=[];
				let totalAmount =0
				for(var i in this.list1){
					var item =this.list1[i]
					if(item.checked){
						amounts.push(item.totalAmount)
					}
				}
				
				totalAmount = amounts.reduce((accumulator, currentValue) => {
				  return accumulator + currentValue;  
				}, 0); 
				
				
				return   totalAmount.toFixed(2)
				
			},
			sumCollection(){
				var sz=[];
				
				for(var i in this.list1){
					var item =this.list1[i]
					if(item.checked){
						sz.push(item.tenantContractId+"#"+item.yearMonth)
					}
				}
				return sz
			}
		},
		methods: {
			btn1(item,bl){
				if(bl||item.image){
					this.gotoUrl('/pages/invoiceManagement/invoiceDetails?id='+item.id)
					
				}
			},
			btn2(item){
				
				uni.showModal({
					
					confirmText:`撤回`,
				content: `确认是否要撤回当前发票申请`,
					title: "提示",
					success:res=> {
						if(res.confirm){
							this.switchBtnApiMethod(item);
						}
					}
				})
			},
			switchBtnApiMethod(node){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.deleteInvoice({
					id:node.id,
					
				}).then((res) => {
					uni.hideLoading();
					this.init()
					
				}).catch(error => {
					
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			ifOrSelectAll(){
				
				for(var i in this.list1){
					var item =this.list1[i]
					if(!item.checked){
						return false
					}
				}
				return true
			},
			checkeditem(item){
				
				this.$set(item,'checked',!item.checked)
				if(!item.checked&&this.checkedAll){
					this.checkedAll=false
					this.$forceUpdate()
				}
				if(item.checked&&!this.checkedAll){
					this.checkedAll=this.ifOrSelectAll()
					this.$forceUpdate()
				}
			},
			myLoadmore() {
				this.pageIndex+=1;
				
				
				this.getInvoiceList2()
			},
			submit(){
				// var sz=[];
				
				// this.list1.forEach(item=>{
				// 	//item.checked=()
				// 	if(item.checked){
				// 		sz.push(item.id)
				// 	}
				// })
				if(this.sumCollection.length==0){
					uni.showToast({
						icon: "none",
						title: "请勾选所需的开票项目",
						
					})
					return
				}
				uni.navigateTo({
					url:"/pages/invoiceManagement/issueInvoice?ids="+this.sumCollection.join(),
					events: {
						refreshData: () => {
							this.init()
						}
					}
				})
				// uni.showLoading({
				// 	mask:true,title:'加载中...'
				// })
				// API.openInvoiceByRecordIds({
				// 	recordIds:this.sumCollection.join()
				// }).then((response) => {
				// 	uni.hideLoading();
				// 	//this.list=response.data.data;
				// 	this.companyTypes=response.data.companyTypes;
				// 	this.personTypes=response.data.personTypes;
				// }).catch(error => {
				// 	uni.hideLoading();
					
				// })
			},
			selectOne(e){
				console.log(e)
				if(e.length==0&&this.checkedAll){
					this.checkedAll=false
					this.$forceUpdate()
				}
				
				if(e.length>0&&!this.checkedAll){
					this.checkedAll=this.ifOrSelectAll()
					this.$forceUpdate()
				}
				
			},
			selectAll(e){
				
				var sz=e
				
				for(var i in this.list1){
					var item =this.list1[i]
					this.$set(item,'checked',sz.length>0)
					
				}
				
				 
				// this.$forceUpdate()
			},
			thisparseUnixTime(time){
				return parseUnixTime(time,'{y}年{m}月{d}日')
			},
			init(){
				this.pageIndex=1;
				this.current=0;
				this.getInvoiceList1()
				
			},
			change(index) {
				this.current = index;
				if(this.current==0){
					this.getInvoiceList1()
				}else{
					this.getInvoiceList2()
				}
			},
			addInfo(url) {
				var url = url;
				uni.navigateTo({
					url: url,
					events: {
						refreshData: () => {
							this.init()
						}
					}
				})
			},
			getInvoiceList1(){
				uni.showLoading({
					mask:true,title:'加载中...'
				})
				API.invoiceList({
					status:0,
					pageIndex:1,
					pageSize:9999
				}).then((response) => {
					uni.hideLoading();
					this.list1=response.data.recordMap;
					if(JSON.stringify(this.list1)=='{}'){
						this.list1=[]
					}else{
						
					}
				}).catch(error => {
					uni.hideLoading();
					uni.showToast({
						icon: "none",
						title: error
					})
				})
			},
			getInvoiceList2(){
				uni.showLoading({
					mask:true,title:'加载中...'
				})
				API.invoiceList({
					status:1,
					pageIndex: this.pageIndex,
					pageSize: 20,
				}).then((res) => {
					uni.hideLoading();
					
					//this.list2=response.data.data;
					var list=[]
					if (this.pageIndex == 1) {
						list = res.data.data;
					} else {
						list = [
							...this.list2,
							...res.data.data
						];
					}
					this.list2=list;
					
					this.recordsTotal2=res.data.recordsTotal;
				}).catch(error => {
					uni.hideLoading();
					uni.showToast({
						icon: "none",
						title: error
					})
				})
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.table1{
		.text{
			color: rgba(51,51,51,1);
			font-size: 36rpx;
			
		}
		.money{
			color: rgba(255,61,0,1);
			white-space: pre;
			
		}
		margin: 16rpx 0;
		width: 100%;
		   border-collapse: collapse;
		td{
			border: 1px solid #e7e7e7;
			text-align: end;
			padding: 2px 8px;
		}
		.td1{
			text-align: start;
			min-width: 20%;
			max-width: 30%;
		}
		.td3{
			
			white-space: pre;
		}
		tr{
			 background-color:#f5f5f6 
		}
		.tr1{
			text-align: end;
				font-weight: bold;
		}
		.tr2{
			text-align: start;
			
		}
		 tr:nth-child(even) {  
		    background-color: #fff;  
		  }  
	}
	.slot{
		color: rgba(16,16,16,1);
		font-size: 32rpx;
		margin-right: 32rpx;
	}
	// 标签
	.tabs{
		    position: fixed;
		background-color: #fff;
		    width: 100%;
		::v-deep.u-tabs{
			width: 400rpx;
			margin: 0 auto;
		}
	}
	.invoiced,.not-invioced{
		margin-top: 100rpx;
	}
	.not-invioced{
		
		    padding-bottom: 160rpx;
			
	}
	.not-invioced{
		.invoice-item{
			padding: 16rpx;
			width: 100%;
		}
	}
	
	// 发票
	.invoice-item{
		
		margin: 24rpx;
		padding: 32rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		.infos{
			margin-left: 32rpx;
			flex: 1;
			.title{
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 36rpx;
				font-weight: 600;
				.text{
					color: rgba(51,51,51,1);
					
				}
				.money{
					color: rgba(255,61,0,1);
					white-space: pre;
					
				}
				.state{
					color: rgba(255,61,0,1);
					font-size: 36rpx;
					white-space: pre;
				}
				.state2{
					color: rgba(0,185,98,1);
					font-size: 36rpx;
				}
			}
			.item{
				display: flex;
				align-items: center;
				margin-top: 24rpx;
				.name{
					color: rgba(119,119,119,1);
				}
				.value{
					color: rgba(51,51,51,1);
					margin-left: 24rpx;
				}
			}
		}
	}
    // 底部
	.bottom{
		background-color: #fff;
		padding: 28rpx 32rpx;
		display: flex;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		.total{
			margin-left: 110rpx;
			.money{
				color: rgba(22,119,255,1);
				font-size: 36rpx;
			}
			.amount{
				color: #111111;
				text-align: right;
			}
		}
		.btn-box{
			margin-left: auto;
			.btn{
				width: 260rpx;
				border-radius: 50px;
				background: linear-gradient(-88.46deg, rgba(34,109,198,1) 2.59%,rgba(9,158,237,1) 97.02%);
				color: rgba(255,255,255,1);
				font-size: 36rpx;
				line-height: 80rpx;
			}
		}
	}
   
</style>