manage_mobile/pages/stock/record.vue

<style lang="scss">
	.container{
		height: 100%;
		background:#f6f6f6;
		
		&>.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;

			.card{
				margin-top:0;
				&>.head{
					display:flex;
					align-items: center;
					border-bottom: 2rpx solid #D8D8D8;
					padding-bottom:20rpx;
					margin-bottom:20rpx;
					text{
						&:first-child{
							flex-shrink: 0;
							color:#10C176;
							margin-right:20rpx;
						}
						&:nth-child(2){
							flex-grow: 1;
							color:#10C176;
						}
						&:nth-child(3){
							flex-shrink: 0;
							color:#FBB65C;
							margin-left:10rpx;
						}
					}
				}
				&>.plant-youbian{
					display:flex;
					flex-direction: row-reverse;
					align-items: center;
					justify-content: flex-end;
					text{
						flex-grow: 1;
						font-weight: bold;
						display:flex;
						align-items: center;
						&.nz{
							&:after{
								content:"("attr(data-unit)")";
								font-size:20rpx;
								color:#999;
								margin-left:6rpx;
							}
						}
					}
				}
				&>.company{
					margin-top:12rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					text{
						&:first-child{
							font-size:24rpx;
							color:#999;
						}
						&:nth-child(2){
							color:#10C176;
						}
					}
				}
				&>.info{
					display:flex;
					align-items: center;
					text{
						&:first-child{
							min-width:80rpx;
							height:40rpx;
							line-height: 40rpx;
							text-align: center;
							background: #10C176;
							border-radius: 0 20rpx 0 20rpx;
							color:#fff;
							margin-right:10rpx;
						}
						&:nth-child(3){
							margin-left:10rpx;
							color:#FBB65C;
							font-size:24rpx;
						}
						&:nth-child(4){
							color:#10C176;
							margin-left:auto;
						}
					}
				}
				&>.date,&>.warehouse{
					font-size:24rpx;
					color:#333;
					margin-top:10rpx;
				}
			}
		}
	}
</style>
<template>
	<view class="container flex">
		
		<d-search v-model="searchVal.search" @search="clean();search()"/>

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

		<scroll-view scroll-y >
			<view class="card" v-for="(v,k) in list" :key="k" @click="toDetail(v)">
				<template v-if="searchVal.type=='1'">
					<view class="head">
						<text class="plant-rili"/> <text class="over">批次号：{{v.inOutBatchNo}}</text> <text>{{v.inOutType}}</text>
					</view>
					<view class="plant-youbian"> <text class="nz" :data-unit="v.specDescribe">{{v.substanceName}}</text> </view>
					<view class="company">
						<text>{{v.supplier}}</text> <text>{{v.number}}{{v.packgeUnit}}(共{{v.equivalentAmount}}{{v.unit}})</text>
					</view>
					<view class="date"> 操作时间：{{v.createTime}} </view>
				</template>
				<template v-else>
					<view class="head">
						<text class="plant-rili"/> <text>批次号：{{v.inOutBatchNo}}</text> <text>{{v.inOutType}}</text>
					</view>
					<view class="info">
						<text>{{v.goodsType}}</text>
						<text>{{v.substanceName}}</text><text>({{v.goodsDetailType}})</text>
						<text>{{v.number}}{{v.unit}}</text>
					</view>
					<view class="warehouse"> 所在仓库：{{v.warehouseName}} </view>
					<view class="date"> 操作时间：{{v.createTime}} </view>
				</template>
			</view>
			<u-empty v-if="list.length<=0" text="为查询到相关信息" width="70%" icon="/static/noData.png"/>
		</scroll-view>
	</view>
</template>
<script>
import request from '@/common/request.js'
export default {
	data(){
		return{
			searchVal:{
				baseId: this.$store.state.plantBaseInfoId,
				pageNo:1,
				pageSize:6,
				type:"1"//1 农资，2 农产品
			},
			list:[],
			total:0,
		}
	},
	onLoad(options){
		this.search()
	},
	methods:{
		trigger(e){
			if(this.searchVal.type!=e){
				this.searchVal.type=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/queryOutInRecord",{
					method:"post",
					body: this.searchVal
				})
				if(res.statu){
					this.list=this.list.concat(res.data.records)
					this.total=res.data.total
					this.searchVal.pageNo++
					if(this.list.length==this.total)uni.showToast({title:"加载完成！",icon:"none"})
				}else{
					uni.showModal({
						title:"提示",
						content:res.msg||"获取出入库记录失败！",
						showCancel:false,
					})
				}
			}
		},
		toDetail(e){
			uni.navigateTo({
				url:"/pages/stock/goods_detail",
				success(res){
					res.eventChannel.emit("detail",e)
				}
			})
		},
	},
	onReachBottom(){
		this.search()
	},
}
</script>