automatic-plan.vue 7.46 KB
<!--医院对账单 - 列表-->
<template>
	<div class="container resource close-left-menu">
		<div class="pop-banner clearfix">
			<div class="operate-btns">
				<a href="javascript:;" class="fbtn fb-upload ml-10" @click='export'>导出</a>
			</div>
			<h3 class="current-module">结算对账单查询</h3>
		</div>
		<div class="order-orderlist-view clearfix">
			<div class="pd-form form-label4em mb-40 fast-search-form">
				<div class="group-row">
					<div class="form-group form-label">
						<!-- <label for="cn1" class="label">结算单号</label> -->
						<div class="control">
							<input type="text" v-model="search.settlebillno" title='结算单号' placeholder="结算单号" maxlength="26" v-rule></div>
					</div>
					<div class="form-group form-label">
						<!-- <label for="cn1" class="label">医疗机构</label> -->
						<div class="control">
							<input type="text" id="cn1" v-model="search.medname" title='医疗机构' placeholder="医疗机构" maxlength="20" v-rule></div>
					</div>
				</div>
				<div class="group-row">
					<div class="form-group form-label">
						<!-- <label for="cn1" class="label">结算日期</label> -->
						<div class="control control-date" style="height:34px;overflow: inherit;">
							<div style="width:44%;float:left;">
								<datepicker :target.sync="search.startdate" :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.enddate" :readonly="readonlyFlag" title='结算结束日期' placeholder="结算结束日期" styleobj="width:100% !important;border-radius:0px 8px 8px 0px !important;"></datepicker>
							</div>
						</div>
					</div> 
				</div>
				<div class="group-row t-right">
					<button v-on:click="getData()" class="fast-search-form-btn btn-d btn-d-lg btn-d-activate btn-d-circle">查 询</button>
				</div>
			</div>
			<div class="statistics">
				您当前共有 <em>{{search.total}}</em>张结算对账单
			</div>
			<table class="itable itable-td-long-text mb-20 itable-thead-13px">
				<thead>
					<tr>
						<th class="w40" >
						             <div class="checkbox-control">
							             <input type="checkbox"  @click="selectAllsum(selectAllList)" :id="1"  v-model="selectAllList" :value="1">
							             <label class="checkbox" style="line-height: 19px;" :for="1">序号</label>
						             </div>
					             </th>
						<th class="w120">结算单号</th>
						<th class="w120">医疗机构</th>
						<th class="w80">结算日期</th>
						<th class="w160">结算周期</th>
						<th class="w80">结算金额(元)</th>
						<th class="w70">明细数</th> 
						<th class="w160">操作</th>
					</tr>
				</thead>
				<tbody class="txt_v">
					<tr v-if="mxList==null || mxList.length==0">
						<td colspan="10">
							<span v-if="!isLoading">暂无符合条件的记录</span>
							<div v-else class="sk-spinner sk-spinner-wave">
								<div class="sk-rect1"></div>
								<div class="sk-rect2"></div>
								<div class="sk-rect3"></div>
								<div class="sk-rect4"></div>
								<div class="sk-rect5"></div>
							</div>
						</td>
					</tr>
					
					<tr v-else  v-for="mx in mxList" class="txt_v">
						<td class="pb15 pt7">
						<div class="checkbox-control">
					              <input type="checkbox" :id="mx.guid" v-model="checkArr" :value="mx.guid+'/'+mx.begindate+'/'+mx.enddate">
					              <label class="checkbox" :for="mx.guid">{{ $index + 1 }}</label>
					             </div>
					             </td>
						<td class=" pr10 v-top">{{mx.settlebillno}}</td>
						<td class=" pr10 v-top">{{mx.medname}}</td>
						<td class="v-top">{{mx.settledate |getYMD}}</td>
						<td class="v-top">{{mx.begindate|getYMD}} <span>-</span> {{mx.enddate |getYMD}}</td>
						<td class=" v-top">{{mx.amount | numDigit 2 | numFmt}}</td>
						<td class="v-top">{{mx.countsum}}</td> 
						<td >
							<div class="from-button">
								<a class="green-button " v-link="{path:'/automaticPlan/'+mx.guid}">明细<i>|</i></a>
							<a class="green-button" v-link="{path:'/InvoiceEntry/'+mx.guid}">发票录入</a>
							</div>
						</td>
					</tr>
				</tbody>
			</table>
			<pagination @page-change="getData" :page-no.sync="search.page" :total-pages.sync="search.totalPages">
			</pagination>

		</div>
	</div>
</template>
<script>
	module.exports = {
		data: function() {
			return {
				// 查询数据列表
				mxList: [],
				// 查询条件
				search: {
					pageSize: 50,
					page: 1,
					settlebillno: '',
					startdate: this.GetDate().begindate,
					enddate: this.GetDate().enddate,
					medname: '',
					pageNo: '',
					totalPages: '',
					total: '',
					paystate:''
				},
				isLoading:true,
				selectAllList: false,
				checkArr:[],
				checkArrList: '',
				excelList:[], 
			};
		},
		methods: {
			selectAllsum: function(flag) { 
			        var self = this;  
			        self.checkArr = [];
			        if(!flag) {
			          self.mxList.forEach(function(item, i) { 
			            var data = item.guid + '/' + item.begindate + '/' + item.enddate;
			            self.checkArr.push(data); 
			            console.log(self.checkArr);
			          });
			        } else {
			          self.$set('checkArr', []);
			          self.mxList.forEach(function(item, i) { 
			          }); 
			        } 
			      },
			export: function() {
			        var self = this;
			        if(self.checkArrList.length == 0) {
			          self.MessageBox({
			            title: '提示',
			            message: '请勾选要出库的单据!',
			            type: 'alert'
			          }, function(action) {});
			          return;
			        }
			        for (var i = 0; i < self.checkArrList.length; i++) {
			        	 self.checkArrList[i].begindate = self.checkArrList[i].begindate.substr(0, 10);
			        	 self.checkArrList[i].enddate = self.checkArrList[i].enddate.substr(0, 10);
			        }
			        Ajax.post('/trsettle/exportExcel', {
			          'guids': self.checkArrList
			        }).
			        then(function(response) {
			          var data = response.data; 
			              window.open(data);  
			        })
			      },
			getData: function() {
				var self = this;
				self.$set('mxList', '');
				self.isLoading=true;
				self.checkArr = [];
       				self.selectAllList = []; 
				Ajax.post('/trsettle/listTrsettle', self.search)
					.then(function(response) {
						self.isLoading=false;					
						var data = response.data.data;
						if(data.list){							
							self.$set('mxList', data.list);
						}
						self.search.pageno = data.pageno;
						self.search.totalPages = data.totalPages;
						self.search.total = data.total; 
					})
			},
		},
		watch: {
		      'checkArr': function(val) {
		        var self = this;
		        var arr, oList;
		        self.checkArrList = [];
		        for(let i = 0; i < val.length; i++) {
		          arr = val[i].split('/');
		          oList = {
		            'guid': arr[0],
		            'begindate': arr[1],
		            'enddate': arr[2],
		          }
		          self.checkArrList.push(oList); 
		        }  
		        if(self.checkArrList.length == 0){
			          self.selectAllList = false;
		          }
		      },
		      'search.paystate':function(){ 
          			var self = this;
		          self.getData(true);
		       }

		    },
		route: {
			activate: function() {
				this.getData();
			}
		}
	};
</script>