account-list.vue 9.52 KB
<template>
	<div class="container resource close-left-menu contaNEW" style="min-height: 809px;">

		<div class="pop-banner clearfix">
			 <div class="operate-btns">
			    <a href="javascript:void(0)" class="fbtn fb-upload" v-link='{path:"/accountImport"}'>导入新对账单</a>
			 </div>
			<h3 class="current-module">对账单管理</h3>
		</div>

		<!--order-orderlist-view start-->
		<div class="order-orderlist-view clearfix">

			<div class="pd-form form-label4em mb-20 fast-search-form">
				<div class="group-row">
					<div class="form-group">
						<!-- <label for="cn1" class="label">计划单号</label> -->
						<div class="control">
							<monthpicker :target.sync="search.zdyf" :readonly="false" id='cnn1' title='账单月份' placeholder='账单月份'></monthpicker>
						</div>
					</div>
					<div class="form-group">
						<!-- <label for="cn1" class="label">制单日期</label> -->
						<div class="control control-date" style="height:34px;overflow: inherit;">
							<div style="width: 42%;float: left">
								<datepicker :target.sync='search.begindate' :readonly="readonlyFlag" title='导入开始日期'
								placeholder='导入开始日期' styleobj="width:100% !important;border-radius:8px 0px 0px 8px !important;"></datepicker>
							</div>
							<span class="text-and" style="width: 45.7px"></span>
							<div style="width: 48%;float: right;">
								<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">
					<div class="form-group">
						<div class="control">
							<input type="text"  v-model="search.memo" title='摘要' placeholder='摘要' maxlength="50">
						</div>
					</div>
					<div class="form-group">
						<div class="control">
							<input type="text"  v-model="search.suppliername" title='供应商' placeholder='供应商' maxlength="20">
						</div>
					</div>

				</div>
				<div class="group-row">
					<div class="form-group">
						<div class="control">
							<input type="text" v-rule v-model="search.goodsname" title='商品' placeholder='商品' maxlength="50">
						</div>
					</div>
					<div class="form-group form_group_state">
			              <label class="label fl">业务状态</label>
			              <div class="control control-filtering control-filtering-green fl ">
			                <a class="option all active" href="javascript:void(0)">未核对</a>
			                <a class="option" href="javascript:void(0)" v-link='{path:"/accountList2"}'>已核对</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="getData(true)">查 询</button>
				</div>
			</div>
			<div class="ctable ct-parent mt-30">
		      <div class="ct-head" id="t_header">
		        <span class="ct-col w50">序号</span>
		        <span class="ct-col w80">月份</span>
		        <span class="ct-col w120">账单日期</span>
		        <span class="ct-col w140">供应商</span>
		        <span class="ct-col w140">摘要</span>
		        <span class="ct-col w120">总金额(元)</span>
		        <span class="ct-col w80">明细数</span>
		        <span class="ct-col w80">导入时间</span>
		        <span class="ct-col w100">状态</span>
		        <span class="ct-col w80">操作</span>
		      </div>
		      <div class="ct-row " v-if="list==null || list.length==0">
		        <div class="row-line t-center" style='height:34px;line-height:34px;'>
		          <span class="ct-col  break-it">
		            暂无符合条件的记录!
		          </span>
		        </div>
		      </div>
		      <div class="ct-row main" v-for='item in list' t id="ct-r{{$index}}">
		        <div class="row-line">
		          <span class="ct-col w50">{{$index+1}}</span>
		          <span class="ct-col w80">{{item.zdyfdate}}</span>
		          <span class="ct-col w120">
		          	{{item.dzbegindate| getYMD}}
							<br>
					{{item.dzenddate| getYMD}}
				 </span>
		          <span class="ct-col w140 t-left">{{item.suppliername}}</span>
		          <span class="ct-col w140 t-center activate">
					{{item.memo}}
		          </span>
		          <span class="ct-col w120 activate">
		           {{item.detailsum | numDigit 2}}
		          </span>
		          <span class="ct-col w80 tel" id="isFocus{{$index}}">
		          	<div>
		          		<a href="javascript:void(0)" class="txt_underline text-color-green" @click="slidedown($index,item.guid)">{{item.countsum}}</a>
		          	</div>
		          </span>
		          <span class="ct-col w80">
		          	{{item.inputdate | getYMD}}
							<br>{{item.inputdate | getHMS}}
				</span>
				 <span class="ct-col w100">
				 	{{item.billstate | checkBilltype}}
				 </span>
		          <span class="ct-col w80 pt9">
		            <a class="btn button-red" @click='del(item)'>删除</a>
		          </span>
		        </div>
		        <div class="row-launch" style="display: none;"  id="row-l{{$index}}">
		          <table class="itable itable-td-long-text">
					<thead>
						<tr>
							<th class="w50">序号</th>
							<th class="w150">商品信息</th>
							<th class="w120">批号</th>
							<th class="w120">入库数量</th>
							<th class="w130">单价(元)</th>
							<th class="w100">金额(元)</th>
							<th class="w80">发票号</th>
						</tr>
					</thead>
					<tbody>
						<tr v-if="item.guidFalg[item.guid]==null || item.guidFalg[item.guid].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-for='item2 in item.guidFalg[item.guid]'>
							<td>{{$index+1}}</td>
							<td class="t-left pr10">
								{{item2.goodscode}} <br>
								<span class="product-tit p-tit-green">{{item2.goodsname}} </span><br>
								{{item2.goodsspec}} <br>
								{{item2.manufacturer}} <br>
								{{item2.registkey}}

							</td>
							<td class=" pr10">
								{{item2.lot}} <br>
								{{item2.productiondate | getYMD}} <br>
								{{item2.expiredate | getYMD}}
							</td>
							<td>
								{{item2.wvqty}} {{item2.unit}}
							</td>
							<td>
								{{item2.price| numDigit 2  }}
							</td>
							<td>
								{{item2.amount| numDigit 2 }}
							</td>
							<td>
								{{item2.invoiceno}}
							</td>
						</tr>
					</tbody>
				</table>
<!--
		          <div class="pagination page-line">
		             <pagination
		               @page-change="listData($index,user.guid,user.searchHospital)"
		               :page-no.sync="searchList.page"
		               :total-pages.sync="searchList.totalPages"></pagination>
		          </div> -->
		          <div class="zip" @click="slideup($index)"></div>
		        </div>
		      </div>
		    </div>

			<div class="pagination m-20-0">
				<pagination @page-change="getData(false)" :class="['m-20-0']" :page-no.sync="search.page" :total-pages.sync="search.totalPages">
				</pagination>
			</div>

		</div>
		<!--order-orderlist-view end-->

	</div>
</template>
<script>
	module.exports = {
		data: function() {
			return {
				state:1,
				list: {},
				search: {
					pageSize: 50,
					page: 1,
					totalPages: 0,
					zdyf:'',
					begindate:'',
					enddate:'',
					memo:'',
					suppliername:'',
					goodsname:'',
					billstate:'01'
				},
			};
		},
		methods: {
			getData: function(falg) {
				var self = this;

				if(falg){
					 self.search.page=1;
				}
				Ajax.post('/billType/gettrmedstatements', self.search)
					.then(function(response) {
						var data = response.data.data;
						if(response.data.errorCode == 0) {
							self.$set('list', data.list);
							self.search.totalPages = data.totalPages;
							self.search.pageNo = data.pageNo;
						} else {
							layer.msg(response.data.message);
						}
					});
			},
			del: function(val) {
				var self = this;

				Ajax.post('/billType/delTrmedstatement', val)
					.then(function(response) {
						var data = response.data.data;
						if(response.data.errorCode == 0) {
							layer.msg('删除成功!');
							self.getData();
						} else {
							layer.msg(response.data.message);
						}
					});

			},
			slideup:function(index){

		        $("#row-l"+index).slideUp(400,function(){
		            $("#ct-r"+index).removeClass('active');
		            $("#isFocus"+index).removeClass("focus");
		            $(".ct-col:eq("+index+")").removeClass('activate');
		        });
		      },
		    slidedown:function(index,guid){
		    	var self = this;
		    	for(var a=0;a<self.list.length;a++){
		    		self.slideup(a);
		    	}

		        self.getList(index,guid);
		        $("#ct-r"+index).addClass("active");
		        $("#isFocus"+index).addClass("focus");

		        $("#row-l"+index).slideDown(400,function(){

		        });
		      },
		      getList:function(index,guid){
		      	var self = this;
				Ajax.post('/billType/getTrmedstatementdetails', {guid:guid})
					.then(function(response) {
						var data = response.data.data;
						if(response.data.errorCode == 0) {
							self.$set('list[' + index + '].guidFalg', data);

						} else {
							layer.msg(response.data.message);
						}
					});

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