sailun
/
sailun-agent


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283
							<!DOCTYPE html>
<html class="">
<!--STATUS OK-->

<head>
	<meta name="referrer" content="always" />
	<meta charset='utf-8' />
	<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<meta http-equiv="x-dns-prefetch-control" content="on">
	<meta name="description" content="">
	<meta name="format-detection" content="telephone=no" />
	<link rel="stylesheet" type="text/css" href="css/vant-ui.css" />
	<link rel="stylesheet" type="text/css" href="css/iconfont.css">
	<link rel="stylesheet" type="text/css" href="css/main.css" />
	<script src="js/vue.js"></script>
	<script src="js/vant-ui.js"></script>
	<script src="js/main.js"></script>
	<title></title>
</head>
<style>
	.kucunxiangqing,
	#app {
		overflow-y: scroll;
	}

	.kucunxiangqing .kucunList .srcollBox {
		overflow-y: scroll !important;
	}

	.kucunxiangqing .kucunList .title {
		position: static;
	}

	.kucunxiangqing .kucunList {
		position: static;
		padding-top: 0rem;
	}

	.kucunxiangqing {
		background-color: #fff !important;
	}

	.kucunxiangqing .typeFooter,
	.kucunxiangqing .leiji {
		background-color: #00a0ea !important;
	}

	.j-center {
		font-size: 0.3rem;
	}

	.list {
		padding: 0.2rem;
		border-bottom: 1px solid#e2e0e0;
		width: 96%;
		margin-left: 2%;
	}

	.top-center {
		margin: 0.1rem 0;
	}
</style>

<body>
	<div id="app" v-cloak>
		<div class="pageView kucunxiangqing col" id="mescroll">
			<!--				<div class="header flex a-center j-center">
				<i class="iconfont icon-back" onclick="history.go(-1)"></i>
				库存查询
				<div class="toobla flex a-center">
				<div class="icon1"></div>
				<div class="icon2"></div>
				</div>
				</div>-->
			<div class="leiji flex a-center j-center">
				库存总量：
				<h4>{{totalStock}}</h4>
			</div>
			<div class="typeFooter flex a-center j-center">
				<div class="item flex j-center a-center" v-on:click="getStoreByAnnation(0)">
					{{ chooseAndtion[0] || '品牌' }}
				</div><span></span>
				<div class="item flex j-center a-center" v-on:click="getStoreByAnnation(1)">
					{{ chooseAndtion[1] || '规格' }}
				</div><span></span>
				<!-- <div class="item flex j-center a-center" v-on:click="getStoreByAnnation(2)">
						{{ chooseAndtion[2] || '库存' }}
					</div><span></span> -->
				<div class="item flex j-center a-center" v-on:click="getStoreByAnnation(3)">
					{{ chooseAndtion[3] || '花纹' }}
				</div>
			</div>
			<div class="kucunList">
				<div class="title flex a-center j-center">
					<div class="item flex a-center j-center">
						物料描述
					</div>
					<div class="item flex a-center j-center">
						月入库
					</div>
					<div class="item flex a-center j-center">
						月出库
					</div>
					<div class="item flex a-center j-center">
						库存
					</div>
				</div>
				<div class="srcollBox" v-show="list.length > 0" >
					<div class="item flex a-center j-center" v-for="(item,index) in list" :key="index">
						<div class="fx1 flex a-center j-center">
							{{ item.maktx }}
						</div>
						<div class="fx1 flex a-center j-center">
							{{item.innumber}}
						</div>
						<div class="fx1 flex a-center j-center">
							{{item.outnumber}}
						</div>
						<div class="fx1 flex a-center j-center" v-on:click="lookInfo">
							{{ item.stock }}
						</div>
					</div>
				</div>
				<div v-show="list.length == 0" style="text-align:center">
					<img src="./image/nodata.png" style="margin:2rem auto;width:100%;height:100%" />
				</div>
			</div>
		</div>
	</div>
</body>
<link rel="stylesheet" href="./mescroll/mescroll.min.css">
<script type="text/javascript" src="./mescroll/mescroll.min.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/httpRequest.js"></script>
<script type="text/javascript" src="../script/vue_plugins.js"></script>
<script type="text/javascript">
	apiready = function() {
		new Vue({
			el: '#app',
			data: {
				UIActionSelector: '',
				kunnr: '',
				list: [], // 查询到的库存
				brand: [], // 品牌
				specification: [], // 规格
				pattern: [], // 花纹
				chooseAndtion: [], // 选中的条件
				totalStock: 0,
				page: 1,
				pagesize: '10',
				frist : 1,
				mescroll : '',
			},
			filters : {
				amountToStr : function(val){
					if(parseInt(val) > 10){
						return '充足'
					}else if(parseInt(val) <= 10 && parseInt(val) > 1){
						return '紧张';
					}else {
						return '缺货';
					}
				}
			},
			methods: {
				init: function() {
					this.UIActionSelector = api.require('UIActionSelector');
					this.kunnr = $api.getStorage('kunnr');
					this.getStore();
				},
				configs: function() {
					var _this = this;
					this.frist = 2;
					this.configDownAndPull("mescroll", function(mescroll) {
						_this.mescroll = mescroll;
						_this.page = 1;
						_this.getStore(mescroll);
					}, function(mescroll) {
						if (_this.page < _this.totalPages) {
							_this.page = _this.page + 1;
							_this.getStore(mescroll, 1);
						} else {
							mescroll.endSuccess(_this.pagesize, false);
						}
					})
				},
				//  获取库存列表
				getStore: function(mescroll) {
					var url = "checkStoreUrl",
						_this = this;
					var params = {
						kunnr: this.kunnr,
						page: this.page,
						pagesize: this.pagesize,
						brand: this.chooseAndtion[0] == '全部' ? '' : this.chooseAndtion[0],
						spec: this.chooseAndtion[1] == '全部' ? '' : this.chooseAndtion[1],
						pattern: this.chooseAndtion[3] == '全部' ? '' : this.chooseAndtion[3],
						type: 'body',
						url: 'json'
					};
					console.log(JSON.stringify(params));
					this.$post(url, params, function(ret) {
						if (ret.code == 0 || ret.code == '0') {
							if (ret.data.data != null) {
								_this.totalPages = ret.data.data.totalPage;
								_this.totalStock = ret.data.data.stock;
								_this.list = _this.page == 1 ? ret.data.data.list : _this.list.concat(ret.data.data.list);
								var brand = [{
									name: '全部'
								}];
								ret.data.data.brandList.map(function(item, index) {
									if (item != null) {
										brand.push({
											name: item
										})
									}
								});
								_this.brand = brand;
								var specification = [{
									name: '全部'
								}];
								ret.data.data.specList.map(function(item, index) {
									if (item != null) {
										specification.push({
											name: item
										})
									}
								})
								_this.specification = specification;
								var pattern = [{
									name: '全部'
								}];
								ret.data.data.patternList.map(function(item, index) {
									if (item != null) {
										pattern.push({
											name: item
										})
									}
								});
								_this.pattern = pattern;
								if (_this.frist == 1) {
									_this.$nextTick(function() {
										_this.configs();
									})
								}
								if (mescroll) {
									mescroll.endSuccess(_this.pagesize, true);
								}
							} else {
								_this.list = [];
								_this.pattern = [];
								_this.specification = [];
								_this.pattern = [];
							}
						}
					})
				},
				//  开始筛选
				getStoreByAnnation: function(index) {
					var list = ["brand", "specification", "", "pattern"],
						_this = this;
					this.page = 1;
					var chooseAn = eval("this." + list[index]);
					this.chooseRegion(this.UIActionSelector, 1, chooseAn, function(ret) {
						if (ret.eventType == 'ok') {
							_this.$set(_this.chooseAndtion, index, ret.level1);
							_this.getStore(_this.mescroll);
						}
					})
				},
				//  查看详情
				lookInfo: function() {
					//  this.goWin('kucunxiangqing_win','kucunxiangqing_win.html','');
				}
			},
			mounted: function() {
				this.init();
			}
		})
	}
</script>

</html>