invoice-summary.vue 9.68 KB
<template>
	<div class="container resource close-left-menu">
		<div class="pop-banner clearfix">
			<div class="operate-btns">
				<a @click="listInvorceExport()" class="fbtn fb-upload ml-10">导出</a>
			</div>
			<h3 class="current-module">发票查询</h3>
		</div>
		<div class="pd-form fast-search-form">
			<div class="group-row">
				<div class="form-group">
					<div class="control"><input type="text" v-model="search.Invoiceno" placeholder='发票号' title='发票号' maxlength="26" v-rule></div>
				</div>
				<div class="form-group">
					<div class="control"><input type="text" v-model="search.mvbillno" placeholder='出库单号' title='出库单号' maxlength="26" v-rule></div>
				</div>
			</div>
			<div class="group-row">
				<div class="form-group form-label">

					<div class="control control-date" style="height:34px;overflow: inherit;">
						<div style="width:44%;float:left;">
							<datepicker :target.sync="search.starttime" :readonly="readonlyFlag" placeholder="开始日期" title='开始日期' styleobj="width:100% !important;border-radius:8px 0px 0px 8px !important;"></datepicker>
						</div>
						<div class="text-and"></div>
						<div style="width:48%;float:left;">
							<datepicker :target.sync="search.endtime" :readonly="readonlyFlag" title='结束日期' placeholder="结束日期" styleobj="width:100% !important;border-radius:0px 8px 8px 0px !important;"></datepicker>
						</div>
					</div>
				</div> 
				<div class="form-group">
					<div class="control"><input type="text" v-model="search.goodsname" placeholder='商品名称' title='商品名称' maxlength="50" v-rule></div>
				</div>
			</div> 
			<div class="group-row"> 
				<div class="form-group" style='width:560px;'> 
					<label class="label w80">发票状态</label>
					<div class="control control-filtering control-filtering-green fl w450">
						<a class="option" href="javascript:;" :class="{'all active':search.Invoicestate==''}" v-on:click="search.Invoicestate=''">全部</a>
						<a class="option" href="javascript:;" :class="{'all active':search.Invoicestate=='N'}" v-on:click="search.Invoicestate='N'">未开发票</a>
						<a class="option" href="javascript:;" :class="{'all active':search.Invoicestate=='Y'}" v-on:click="search.Invoicestate='Y'">已开发票</a>
					</div>
				</div>
			</div>

			<div class="group-row t-right">
				<button class="fast-search-form-btn btn-d btn-d-lg btn-d-activate btn-d-circle" @click="getDate(true)">查 询</button>
			</div>
		</div> 

		<div class="ctable ct-parent mt-20">
			<div class="ct-head">
				<span class="ct-col w30">序号</span>
				<span class="ct-col w120">出库单号</span> 
				<span class="ct-col w120">医院</span> 
				<span class="ct-col w60">品规数</span>
				<span class="ct-col w100">发票号</span>
				<span class="ct-col w70">发票状态</span>
				<span class="ct-col w150">发票金额(元)</span>
				<span class="ct-col w150">单据金额(元)</span>
				<span class="ct-col w100">日期</span>
				<span class="ct-col w100">操作</span> 
			</div> 
			<div class="ct-row mt-0" id="warp{{$index}}" v-for="cus in inVoiceList">
				<div class="row-line">
					<span class="ct-col w30 v-top">{{$index+1}}</span>
					<span class="ct-col w120 v-top">{{cus.supplierDOBillno}}</span> 
					<span class="ct-col w120 v-top t-left">{{cus.medName}}</span> 
					<span class="ct-col w60 activate isFocus v-top">
						<a href="javascript:void(0);" @click="slidedown($index,cus.mvbillno,cus.invoiceno,cus.invoicestate,cus.supplierDOBillno)"  class="status-switch text-color-blue">{{cus.pinguishu}}</a>
					</span>

					<span class="ct-col w100  v-top">  
						<!-- <span v-for="inum in cus.invoicenos" v-else>{{inum==mull?'无':inum}} <br /></span> -->
						{{cus.invoiceno}}
					</span>
					<span class="ct-col w70 v-top"> 
						{{cus.invoicestate =='Y'?'已开发票':'未开发票'}}
					</span>
					<span class="ct-col w150 v-top t-right"> {{cus.invoiceamount | numDigit 2 | numFmt }}   </span>
					<span class="ct-col w150 v-top t-right"> {{cus.amountSum | numDigit 2 | numFmt }}   </span>
					<span class="ct-col w100 v-top "> {{cus.rkdate | getYMD}}   </span>
					<span class="ct-col w100 v-top">
					      <a class="btn button-gray" v-if="cus.amountSum < 0">录入发票</a>
				                   <a class="btn button-green" v-else v-link="{ path: '/trsettle/settlementInvoice3/' + cus.supplierDOBillno}">录入发票</a> 
				             </span>
				</div>
				<div class="row-launch" style="display: none;">
					<table class="itable mb-30">
						<thead>
							<tr>
								<th class="w40">序号</th>
								<th class="w150">商品信息</th> 
								<th class="w60">数量</th>
								<th class="w40">单位</th> 
								<th class="w80">价格(元)</th>
								<th class="w80">金额(元)</th>
								<th class="w80">发票号</th>
								<th class="w80">发票金额(元)</th>
								<!-- <th class="w80">业务状态</th> -->
							</tr>
						</thead>
						<tbody>
							<tr v-if="inVoiceList[$index].mxList==null || inVoiceList[$index].mxList==0">
								<td colspan="12">暂无符合条件的记录</td>
							</tr>
							<tr v-for="variation in cus.mxList">
								<td class="">
									{{$index+1}}
								</td>
								<td class="t-left pr10">
								{{variation.goodsCode}}<br>
								{{variation.goodsName}}<br>
								{{variation.goodsSpec}}<br>
								{{variation.producer}}<br>
								{{variation.registKey}} 
								</td> 
								<td class="t-center">{{variation.qty}} </td>
								<td class="t-center">{{variation.unitStyle}} </td> 
								<td class="t-right pr10">{{variation.price | numDigit 2 | numFmt }} </td>
								<td class="t-right pr10">{{variation.amount | numDigit 2 | numFmt }} </td>
								<td class="t-center pr10">{{variation.invoiceNo==mull?'无':variation.invoiceNo}} </td>
								<td class="t-right pr10">{{variation.invoiceAmount | numDigit 2 | numFmt }} </td>
								<!-- <td class="t-center">{{variation.bizstate | bizstate}} </td> -->
							</tr>
						</tbody>
					</table>
					<div class="pagination" style="margin: 20px 0">
						<pagination @page-change="listTRSettleMVByMed($index,cus.mvbillno,cus.invoiceno,cus.invoicestate,cus.supplierDOBillno)" :class="['m-20-0']" :page-no.sync="cus.search.pageNo" :total-pages.sync="cus.search.totalPages"></pagination>
					</div>
					<div class="zip" @click="slideup($index)"></div>
				</div> 
			</div>
			<div class="mt-20" style="text-align: center" v-if="inVoiceList.length==0">
				未查询到相关数据!
			</div>
			<div class="pagination" style="margin: 20px 0">
				<pagination @page-change="getDate(false)" :class="['m-20-0']" :page-no.sync="search.page" :total-pages.sync="search.totalPages"></pagination>
			</div>
		</div>
</template>

<script>
	module.exports = {
		data: function() {
			return {
				search: {
					mvbillno: '',
					Invoiceno: '',
					goodsname: '',
					suppliername: '',
					starttime: this.GetDate().begindate,
					endtime: this.GetDate().enddate,
					Invoicestate: '',
					pageSize: 50,
					page: 1,
					totalPages: 0,
					total: 0,
					pageNo: 0
				},
				search1: {
					mvbillno: '',
					pageSize: 5,
					page: 1,
					totalPages: 0,
					total: 0,
					pageNo: 0
				},
				inVoiceList: '',
			};
		},
		watch:{
			'search.Invoicestate':function(){
				var self = this;
				self.getDate(true);
			}
		},
		methods: {
			getDate: function(flg) {
				var self = this;
				if(flg){
					self.search.page = 1;
				}
				Ajax.post('/supplierReport/listInvorce', self.search)
				.then(function(response) {
					var data = response.data.data; 
					if(response.data.errorCode == 0) {
						self.$set('inVoiceList', data.list);
						self.search.pageNo = data.pageNo;
						self.search.totalPages = data.totalPages;
						self.search.total = data.total;
					} else {
						self.MessageBox({
							title: '警告',
							message: response.data.message,
							type: 'alert'
						}, function(action) {});
					} 
				})
			},
			// 品规格数目(手风琴效果)
			listTRSettleMVByMed: function(index, billno,invoiceno,invoicestate,ckbillno) {
				var self = this;
				var dpoObj = self.inVoiceList[index];
				if(dpoObj.search == null) {
					// 设置每组的查询条件
					dpoObj.search = {
						pageSize: 5,
						page: 1,
						pageNo: 1,
						totalPages: 0,
						mvbillno: billno,
						invoiceno:invoiceno,
						invoicestate:invoicestate,
						ckbillno:ckbillno
					};
				}
				dpoObj.search.page = dpoObj.search.pageNo;
				// self.search1.mvbillno = billno; 
				Ajax.post('/supplierReport/getTrsettleMvGoods', dpoObj.search)
				.then(function(response) {
					var data = response.data.data;
					self.$set('inVoiceList[' + index + '].mxList', data.list);
					dpoObj.search.pageNo = data.pageNo;
					dpoObj.search.totalPages = data.totalPages;
					dpoObj.search.total = data.total;
					self.$set('inVoiceList[' + index + '].search', dpoObj.search);
				});
			},
			slideup: function(index) {
				$('#warp' + index).find(".row-launch").slideUp(400, function() {
					$('#warp' + index).removeClass('active');
					$('#warp' + index).find(".isFocus").removeClass("focus");
				})
			},
			slidedown: function(index, billno,invoiceno,invoicestate,ckbillno) {
				this.listTRSettleMVByMed(index, billno,invoiceno,invoicestate,ckbillno);
				$('#warp' + index).addClass("active");
				$('#warp' + index).find(".row-launch").slideDown(400, function() {
					$('#warp' + index).find(".isFocus").addClass("focus active");
				})
			},
			//导出 listInvorceExport
			listInvorceExport: function() {
				var self = this; 
				Ajax.post('/supplierReport/listInvorceDetailExport',self.search)
				.then(function(response) {
					var data = response.data;
					window.open(data);
				})
			}, 
		},
		route: {
			activate: function() {
				this.getDate(false);
			}
		}
	};
</script>