automatic-plan2.vue 8.82 KB
<template>
	<div class="container resource close-left-menu">
		<div class="pop-banner clearfix">
			<h3 class="current-module">结算对账单明细</h3>
		</div>
		<div class="purchase-month-plan">
			<div class="fpart pd-form">
				<div class="fheader no-bottom">
					<h4 class="no-l-icon"> <span style='font-size:14px; color:#373737;'>医院名称:</span>{{medDate.medname}}</h4>
				</div>
				<div class="form-group mb-30">
					<div class="control pmp-time-type" style='position:relative;padding: 20px 20px 10px;width:600px; border-radius:0px;'>
						<label for="cn1" class="label" style="height: 34px;line-height: 34px;width: 80px;position: absolute;top: -18px; background-color: #f5f5f5; text-align: center;">结算周期</label>
						<div class="group-row">
							<div class="form-group fl form-label" style="width: 506px;">
								<div class="control control-date" style="height:34px;overflow: inherit;margin-left:0px;">
									<div style="float:left;width:45%;">
										<datepicker :disabled="true" :target.sync="medDate.begindate|getYMD" :readonly="readonlyFlag" :placeholder="'结束日期'" styleobj="width:100% !important;border-radius:8px 0px 0px 8px !important;"></datepicker>
									</div>
									<span class="text-and" style="width: 45px"></span>
									<div style="float:left;width:46%;">
										<datepicker :disabled="true" :target.sync="medDate.enddate|getYMD" :readonly="readonlyFlag" :placeholder="'结束日期'" styleobj="width:100% !important;border-radius:0px 8px 8px 0px !important;"></datepicker>
									</div>
								</div>
							</div>
						</div>
					</div>   
				</div>
				<div class="statistics" style='margin-top: 15px;margin-bottom:10px;'>
<em>{{search.total}}</em>个入库单,  共<em>{{search.total}}</em>条明细,金额合计<em>{{con | numDigit 2 | numFmt}}</em>
				</div>
				<div class="form-label">
					<label for="content" class="label">备注</label>
					<div class="control">
						<textarea rows="2" class="inp2" disabled="disabled" style='box-sizing: border-box;min-height:50px;'>{{medDate.remark}}</textarea>
					</div>
				</div>
			</div>
		</div>

		<div class="tab-section">
			<div class="ctable ct-parent">
				<div class="ct-head">
					<span class="ct-col w40">序号</span>
					<span class="ct-col w100">商品编码</span>
					<span class="ct-col w120">商品名称</span>
					<span class="ct-col w120">规格</span>
					<span class="ct-col w160">生产厂商</span>
					<span class="ct-col w160">注册证号/批准文号</span>
					<span class="ct-col w80">订货数</span>
					<span class="ct-col w100">价格</span>
					<span class="ct-col w100">含税金额(元)</span>
					
				</div>
				<div class="ct-row" id="warp{{$index}}" v-for='dilist in detailList'>
					<div class="row-line" >
						<span class="ct-col w40 cert-select cert-mini">{{$index+1}}</span>
						<span class="ct-col w100 break-it "> {{dilist.supplierGoodsCode}} </span>
						<span class="ct-col w120 break-it "> {{dilist.supplierGoodsName}} </span>
						<span class="ct-col w120 break-it "> {{dilist.supplierGoodsSpec}} </span>
						<span class="ct-col w160 break-it "> {{dilist.manufacturer}} </span> 
						<span class="ct-col w160 break-it "> {{dilist.registryKey}}</span>
						<span class="ct-col w80  break-it "> {{dilist.purchaseSettleQty}}</span>
						<span class="ct-col w100  break-it "> {{dilist.purchaserPrice}}</span>
						<span class="ct-col w100  break-it "> {{dilist.amount}}</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="w100">批号效期</th>
									<th class="w80">数量</th>
                								<th class="w80">单价(元)</th>
									<th class="w80">结算金额(元)</th>
									<th class="w80">发票号</th>
								</tr>
							</thead>
							<tbody>
								<tr v-for="dli in dilist.mxList">
									<td>{{$index+1}}</td>
									<td class="t-left pr10">
										{{dli.supplierGoodscode}} <br> 
										<span class="p-tit-green">{{dli.supplierGoodsname}}</span><br>
										 {{dli.supplierGoodsspec}} 
										<br>{{dli.registkey}}
										<br>{{dli.manufacturer}}
										<br>
									</td>
									<td class=" pr10">
										{{dli.lot}}<br> 
										{{dli.productiondate|getYMD}}<br>
										{{dli.expiredate|getYMD}}
									</td>
									<td class="t-right pr10">{{dli.supplierSettleqty}}{{dli.supplierUnit}}</td>
									<td class="t-right pr10">{{dli.supplierPrice | numDigit 2 | numFmt }}</td>
									<td class="t-right pr10"> 
								   	         {{dli.settleamount | numDigit 2 | numFmt }}
									</td>
									<td>{{dli.invoiceno}}</td>
								</tr>
							</tbody>
						</table>
						<div class="pagination page-line">
							<pagination @page-change="listTRSettleMVByMed($index,dilist.guid)" :page-no.sync="dilist.search.page" :total-pages.sync="dilist.search.totalPages">
							</pagination>
						</div>
						<div class="zip" @click="slideup($index)"></div>
					</div>
				</div>
			</div>
		</div>
		<!--最外层翻页-->
		<div class="pagination m-20-0">
			<pagination @page-change="getDetailList" :page-no.sync="search.page" :total-pages.sync="search.totalPages">
			</pagination>
		</div>
		<!--basic-message end-->
	</div>
</template>
<script>
	module.exports = {
		data: function() {
			return {
				// 结算单汇总表
				medDate: {},
				// 明细数据
				detailList: [],
				// 查询条件
				search: {
					pageSize: 50,
					page: 1,
					totalPages: 0,
					total:0,
					//total: 0,
					guid: '',
					pageNo: ''
				},
				sum:0,
				con:0,
				readonlyFlag: true,
			};
		},
		methods: {
			// 结算单汇总表
			getTrsettleByMed: function() {
				var self = this;
				// 结算单guid
				self.search.guid = self.$route.params.guid;
				Ajax.post('/trsettle/listTrsettle', this.search)
					.then(function(response) {
						var data = response.data.data;
						self.$set('medDate', data.list[0]);
					})
			},
			// 结算单明细表
			getDetailList: function() {
				var self = this;
				self.search.guid = self.$route.params.guid;
				Ajax.post('/trsettle/listSettleDetail', this.search)
					.then(function(response) {
						var data = response.data.data;
						self.$set('detailList', data.list);
						var sum = 0;
						var con = 0;
						for (var i = 0; i < self.detailList.length; i++) {
							 sum += self.detailList[i].countsum
							 con += self.detailList[i].amount
						}
						self.sum = sum;
						self.con =con;
						self.search.pageNo = data.pageno;
						self.search.totalPages = data.totalPages;
						self.search.total = data.total;
					})
			},
			// 选中之后的样式:默认只允许最多打开一个,如果当前的是已经打开的,那么关闭
			// cssActive: function(divIndex) {
			// 	$("#leftCtable .ct-row").each(function() {
			// 		if($(this).attr("id") == ("div" + divIndex)) {
			// 			$("#div" + divIndex).attr("class", "ct-row active");
			// 		} else {
			// 			// $(this).attr("class", "ct-row");            
			// 		}
			// 	});

			// 	this.slidedown(divIndex);

			// },
			// slidedown: function(index) {
			// 	var self = this;
			// 	self.listTRSettleMVByMed(index);
			// 	$(".ct-row:eq(" + index + ")").addClass("active");
			// 	$(".row-launch:eq(" + index + ")").slideDown(400, function() {

			// 	});
			// },
			slidedown: function(index,guid) { 
				this.listTRSettleMVByMed(index,guid);
				$('#warp' + index).addClass("active").siblings().removeClass('active'); 
				$('#warp' + index).find(".row-launch").slideDown(400, function() {
					$('#warp' + index).find(".isFocus").addClass("focus active");
				})
			},
			slideup: function(index) { 
				$('#warp' + index).find(".row-launch").slideUp(400, function() {
					$('#warp' + index).removeClass('active');
					$('#warp' + index).find(".isFocus").removeClass("focus");
				})
			},
			// 结算单出库明细(手风琴效果)
			listTRSettleMVByMed: function(index,guid) {
				var self = this;
                var medObj;
				medObj=self.detailList[index].search;

				// 设置每组的查询条件
				if(medObj==null){
                    medObj = {
                        pageSize: 5,
                        page: 1,
                        totalPages: 0,
                        guid: self.$route.params.guid,
                        wvguid: guid
                    };
				}


				Ajax.post('/trsettle/listTRSettleGoods', medObj)
					.then(function(response) {
						var data = response.data.data;
						self.$set('detailList[' + index + '].mxList', data.list);
						medObj.pageNo = data.pageNo;
						medObj.totalPages = data.totalPages;
						medObj.total = data.total;
						self.$set('detailList[' + index + '].search', medObj);
					});
			},
		},
		route: {
			activate: function() {
				this.getTrsettleByMed();
				this.getDetailList();
			}
		}
	};
</script>