manage_mobile/pages/stock/mana.vue

<style lang="scss">
	.container{
		height:100%;
		background:#F6F6F6;
		.head_btns{
			width:90rpx;
			display:flex;
			image{
				height:32rpx;
			}
		}
		&>.btns{
			flex-shrink: 0;
			margin:0 30rpx 30rpx;
			display:flex;
			border-radius: 30rpx;
			button{
				width:50%;
				color:#999;
				&:first-child{
					border-radius: 30rpx 0 0 30rpx;
				}
				&:nth-child(2){
					border-radius:0 30rpx 30rpx 0;
				}
				&.active{
					background:#10C176;
					color:#fff;
				}
			}
		}
		scroll-view{
			flex-grow: 1;
			height:1rpx;
			.item{
				margin-top:0;
				&>.info{
					display:flex;
					align-items: center;
					margin-bottom:20rpx;
					text{
						&:first-child{
							flex-shrink: 0;
							color:#fff;
							background:#10C176;
							height:40rpx;
							min-width:80rpx;
							text-align: center;
							line-height: 40rpx;
							border-radius: 0 20rpx 0 20rpx;
							margin-right:10rpx;
							padding:0 6rpx;
						}
						&:nth-child(3){
							flex-shrink: 0;
							color:#999;
							font-size:20rpx;
							line-height: 40rpx;
							margin-left:6rpx;
						}
						&:nth-child(4){
							flex-shrink: 0;
							margin-left:auto;
							color:#F34848;
							font-size:24rpx;
						}
					}
				}
				&>.company{
					font-size:24rpx;
					margin-bottom:14rpx;
					display: flex;
					text{
						color:var(--c);
						&:first-child{
							flex-shrink: 0;
						}
					}
				}
				&>.num{
					display:flex;
					align-items: center;
					&>text{
						font-size:24rpx;
						color:#999;
						&.detailType{
							flex-shrink: 0;
							color:#FBA83C;
							margin-right:20rpx;
						}
						&.warehouse{
							color:#999;
						}
					}
					&>.btns{
						flex-shrink: 0;
						margin-left:auto;
						button{
							padding:0;
							height:48rpx;
							width: 96rpx;
							font-size:24rpx;
							&.out{
								color:#10C176;
								background:rgba(16, 193, 119, 0.1);
							}
							&.in{
								margin-left:20rpx;
								color:#fff;
								background:#10C176;
							}
							&.bg-gray{
								color:#999;
							}
						}
					}
				}
			}
		}
		&>button{
			flex-shrink: 0;
			height: 60rpx!important;
			margin:15rpx auto!important;
		}
	}
</style>
<template>
	<view class="container flex">
		<d-navbar style="--bg:#10C176;--c:#fff;" isBack text="库存管理">
			<view slot="right" class="head_btns">
				<image @click="$u.route({url:'pages/stock/already'})" v-if="!isWareMana" mode="aspectFit" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAAXNSR0IArs4c6QAAAh9JREFUOE+N0++rz2ccx/HH+5z5EZ1QZ+aGJEsStjgKIxrJIkUxRqa1pIlsmrM7ItzbuSN/gJw782Oo5dcN3BFlOYrdIto525EkzhlKjWNvu04fOr7ODe/61Oe6rvf1vN4/Xu/Qj2XmRGzHLNSjB+fQEhF3a69E7UZmrsFufI8/MQ2d+Bh7sDYiLva99xYkM2fgAGZHxD+Z+TnmV6BRWI+zmBcR5YFeewPJzDrcwCpccC3GYAvmqHPQ5O6/DBj+W7W3LiK+7A8yHodxzMvnna4P2qxhwQwxgPoGun/doCln4gT2Y2pEPK2NpBRxB4a5FEsN+aDLyK0MnsTgCdya3aMpi8+Kki6+iYg7tZDp2IcHOpo36Wq556Pm0POIhoW0r/5bU27DuAq0KiI6aiEf4hpWYqe2OKJOq/oR5H88ezzWZ3kaX5WUI2LCOzUpG5n5M27iu/JFRFu2aYzpHlbn6yOiNbM3rUvoxpPaFhdhLcInGIEuHMe/1atFaEPQXvlsKme9kMwsB40oIjqEU9Wlofgag6r13Aq4BPdxBZMiM0stfsdoLIuIM69zzcxPUfTy2n6sOngZV8t/RJwtkNv4CUUnJbwpEfGkinB5DaR043xVjzJHv/R2JzOLQssLpTP38G1fUN8ZycyBld/eiDj6VncqUDMWYzJKSn/0M+Cl8Lsi4mS/A1iBfkBriSYiivjey2pbXIZqI76IiBfvRfjf6RX9Zrpq7UEdfAAAAABJRU5ErkJggg=="/>
				<image @click="$u.route({url:'pages/stock/record'})" v-else mode="aspectFit" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAARCAYAAAACCvahAAAAAXNSR0IArs4c6QAAAYlJREFUOE+Nkz1LnFEQhZ8TjR+gAREbBVFIlUZS5BeEFDZBVmysBAthC0nENBtSSZpIkiIhIkKwsFJLQRtFBBv1L6iNkEKi4lciEU8YuRte1102F25zZ56ZuWdmZLsZ+AL0A01UP+fAIjAq23NAPZCXdFiNtd0GfAOuAr4EOiQdVwOLdtstwEHAlqT/BTMB/A+2XQsMAg/LBFqXtJt9tz2ThWuAYaCxDLxUCofPnbKT8kg6y5RXB8SNcyXpT9GWzfwI2AaugR5J17bfA4WSSsYlfbyXueRPq8AD4EUECpvtBmAT2JM0UFZt23lgAHgu6cb2vqTuFCC02QE+VILDOCZpIwF32mm773aoyvU5DU6rpF8V4HZgqxJ8CnRKOknwD2BCUoxl/L0LWK8Eh1jTkuaT8+NwBl5LWrA9cquH7YuU5Wemt73AV+CZpKMU4AmwBgwB34FcwLNArOUboLgcv4G3SfF3wHJq2ysgsk5K+hxw7PAn4GVazUg0JalgOxeqA0+BmxApgSvh9BeDHNvqf9R6EgAAAABJRU5ErkJggg=="/>
			</view>
		</d-navbar>

		<d-search v-model="searchVal.search" @search="clean();search()"/>

		<view class="btns shadow bg-white">
			<button class="cu-btn bg-white" :class="{active:searchVal.substanceType=='nz'}" @click="trigger('nz')">农资</button>
			<button class="cu-btn bg-white" :class="{active:searchVal.substanceType=='ncp'}" @click="trigger('ncp')">农产品</button>
		</view>

		<scroll-view scroll-y @scrolltolower="search">
			<view class="card item" v-for="(v,k) in list" :key="k">
				<template v-if="searchVal.substanceType=='nz'">
					<view class="info">
						<text>{{v.agriculturalGoods}}</text>
						<text class="over">{{v.substanceName}}</text>
						<text style="margin-right:10rpx;">({{v.specDescribe}})</text>
						<text v-if="v.replenishment">补货量≥{{v.replenishment}}{{v.packgeUnit}}</text>
					</view>
					<view class="company">
						<text style="--c:#FBA83C;margin-right:14rpx;">{{v.detailType}}</text>
						<text style="--c:#999;" class="over">{{v.supplierName}}</text>
					</view>
					<view class="num">
						<text>库存量：{{v.equivalentInventory||0}}{{v.packgeUnit}}</text>
						<view class="btns" v-if="isWareMana">
							<button class="cu-btn" :class="v.equivalentInventory>0?'out':'bg-gray'" @click="v.equivalentInventory>0 && toList('out',v)">出库</button>
							<button class="cu-btn in" @click="toList('in',v)">入库</button>
						</view>
					</view>
				</template>
				<template v-else>
					<view class="info">
						<text>{{v.agriculturalGoods}}</text>
						<text class="over">{{v.substanceName}}</text>
						<text style="flex-shrink: 0;margin-left:auto;color:#333;">{{v.equivalentInventory||0}}{{v.unit}}</text>
					</view>
					<view class="num">
						<text class="detailType">{{v.detailType}}</text>
						<text class="warehouse over">{{v.wareHouseName}}</text>
						<view class="btns" v-if="isWareMana">
							<button class="cu-btn" :class="v.equivalentInventory>0?'out':'bg-gray'" @click="v.equivalentInventory>0 && toList('out',v)">出库</button>
						</view>
					</view>
				</template>
			</view>
			<u-empty v-if="list.length<=0" text="为查询到相关信息" width="70%" icon="/static/noData.png"/>
		</scroll-view>

		<button v-if="searchVal.substanceType=='nz'&& isWareMana" class="cu-btn round bg-green shadow submit" @click="toPage('agrWarehouse')">+农资入库</button>
	</view>
</template>
<script>
import request from '@/common/request.js'
export default {
	data(){
		return{
			searchVal:{
				baseId: this.$store.state.baseInfo.id,
				search:"",
				substanceType:"nz",
				pageNo:1,
				pageSize:6,
				warehouseId:"",
			},
			total:0,
			list:[],
		}
	},
	computed:{
		isWareMana(){
			return this.$store.getters['userInfo'].roleCode=='ware_admin'
		}
	},
	onLoad(options){
		this.searchVal.warehouseId=options.id
		this.searchVal.substanceType=options.goodsType||"nz"
		this.search()
	},
	methods:{
		trigger(e){
			if(this.searchVal.substanceType!=e){
				this.searchVal.substanceType=e;
				this.clean();
				this.search()
			}
		},
		clean(){
			this.list=[]
			this.total=0
			this.searchVal.pageNo=1
		},
		async search(){
			if(this.total==0 || this.list.length<this.total){
				var res=await request("/api/Inventory/queryInventoryList",{
					method:"post",
					body: this.searchVal
				})
				if(res.statu){
					this.list=this.list.concat(res.data.realRecords)
					this.total=res.data.pageRecords.total
					this.searchVal.pageNo++
					if(this.list.length==this.total)uni.showToast({title:"加载完成！",icon:"none"})
				}else{
					uni.showModal({
						title:"提示",
						content:res.msg||"获取库存列表失败！",
						showCancel:false,
					})
				}
			}
		},
		toList(mode,val){
			uni.navigateTo({
				url:`/pages/stock/list?mode=${mode}&type=${this.searchVal.substanceType}&warehouseId=${this.searchVal.warehouseId||''}`,
				events:{update:()=>{
					this.clean()
					this.search()
				}},
				success(res){
					res.eventChannel.emit('detail', {...val})
				}
			})
		},
		toPage(page){
			uni.navigateTo({
				url:`/pages/stock/${page}`,
				events:{update: ()=>{
					this.clean()
					this.search()
				}}
			})
		},
	}
}
</script>