TuBaoSoft-AP/pages/home/inventoryQuery/index.vue

<template>
	<view>
		<view class="condition">
			<view class="conditionone">
				<view :style="{'border-bottom':(underline =='0'?'3rpx solid #fff':'none')}" @click="screen(0)">全部</view>
				<view :style="{'border-bottom':(underline =='1'?'3rpx solid #fff':'none')}" @click="screen(1)">仓库</view>
				<view :style="{'border-bottom':(underline =='2'?'3rpx solid #fff':'none')}" @click="screen(2)">商品</view>
				<view :style="{'border-bottom':(underline =='3'?'3rpx solid #fff':'none')}" @click="screen(3)">入库日期
				</view>
			</view>
		</view>
		<view class="search">
			<u-search shape="round" placeholder="请输入提单号" @custom="custom" @search="custom" :clearabled="false">
			</u-search>
		</view>
		<view class="ordertop" v-for="(item, index) in lisi" :key="index">
			<view>
				<view class="iconblue"></view>
				<text class="license">提单号：{{item.fMblno}}</text>
				<view class="various" @click="viewDetails(item)">{{item.fOriginalbilldate}}</view>
			</view>
			<view class="line">
				<u-line color="#ccc" border-style='dashed' />
			</view>
			<view class="basic">
				<view>货物属性</view>
				<view>{{item.fBusinessTypes}}</view>
			</view>
			<view class="basic">
				<view>品名</view>
				<view>{{item.fGoodsids}}</view>
			</view>
			<view class="basic">
				<view>仓库</view>
				<view>{{item.fWarehouseids}}</view>
			</view>
			<view class="basic">
				<view>结余件数</view>
				<view>{{item.fQtyblc}}</view>
			</view>
			<view class="basic">
				<view>结余毛重(kg)</view>
				<view>{{item.fGrossweightblc}}</view>
			</view>
			<view class="basic">
				<view>结余净重(kg)</view>
				<view>{{item.fNetweightblc}}</view>
			</view>
			<view class="basic">
				<view>箱号</view>
				<view>{{item.fLocalcntrno}}</view>
			</view>
			<view class="basic">
				<view>入库时间</view>
				<view>{{item.fOriginalbilldate}}</view>
			</view>
			<view class="basic">
				<view>入库数</view>
				<view>{{item.fQtyD}}</view>
			</view>
			<view class="line">
				<u-line color="#ccc" border-style='dashed' />
			</view>
			<view class="view" @click="viewDetails(item)">
				<view>
					<text>查看入出库照片</text>
				</view>
				<view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
		<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />
		<u-picker v-model="show" mode="selector" :range="list" range-key="fName" @confirm="confirm"></u-picker>
		<u-calendar v-model="calendar" mode="range" @change="change"></u-calendar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				underline: '0',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				show: false,
				calendar: false,
				total: 0,
				iconType: 'flower',
				status: 'loadmore',
				form: {
					pageNum: 1,
					pageSize: 10
				},
				lisi: [],
				list: [],
				warehouse: [],
				commodity: []
			}
		},
		created() {
			this.query()
			this.$u.get('/basicdata/warehouse/lists', {
				fStatus: 0,
				delFlag: 0
			}).then(res => {
				console.log(res)
				this.warehouse = res.rows
				// res.rows.forEach((item, index) => {
				// 	this.warehouse.push({
				// 		id: item.fId,
				// 		text: item.fName
				// 	})
				// })
			})
			this.$u.get('/basicdata/goods/list', {
				fStatus: 0,
				delFlag: 0
			}).then(res => {
				console.log(res)
				this.commodity = res.rows
				// res.rows.forEach((item, index) => {
				// 	this.commodity.push({
				// 		id: item.fId,
				// 		text: item.fName
				// 	})
				// })
			})
		},
		onReachBottom() {
			this.status = 'loading'
			if (this.lisi.length < this.total) {
				this.form.pageNum++
				this.query()
			} else {
				this.status = 'nomore'
			}
		},
		methods: {
			//日期区间确定
			change(e) {
				console.log(e)
				this.lisi = []
				this.form = {
					orgStorageDate: e.startDate + ' 00:00:00,' + e.endDate + ' 23:59:59',
					pageNum: 1,
					pageSize: 10
				}
				this.query()
			},
			//确定
			confirm(index) {
				this.lisi = []
				console.log(index)
				if (this.underline == 1) {
					this.form = {
						fWarehouseid: this.warehouse[index].fId,
						pageNum: 1,
						pageSize: 10
					}
				} else if (this.underline == 2) {
					this.form = {
						fGoodsid: this.commodity[index].fId,
						pageNum: 1,
						pageSize: 10
					}
				}
				this.query()
			},
			//全部
			screen(index) {
				this.underline = index
				if (index == 0) {
					this.form = {
						pageNum: 1,
						pageSize: 10
					}
					this.query()
				} else if (index == 1) {
					this.show = true
					this.list = this.warehouse
				} else if (index == 2) {
					this.show = true
					this.list = this.commodity
				} else if (index == 3) {
					this.calendar = !this.calendar
				}
			},
			custom(text) {
				console.log(text)
				this.form = {
					fMblno: text,
					pageNum: 1,
					pageSize: 10
				}
				this.query()
			},
			viewDetails(item) {
				console.log(item)
				uni.navigateTo({
					url: './inventoryDetails?item=' + JSON.stringify(item)
				});
			},
			query() {
				this.$u.get('/warehouseBusiness/whgenleg/appWhGenLegList', this.form).then(res => {
					console.log(res)
					this.lisi = res.rows
					this.total = res.total
					if (this.total < 10) this.status = 'nomore'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.ordertop {
		width: 96%;
		background-color: #fff;
		margin: 20rpx auto;
		border-radius: 20rpx;
		padding-top: 20rpx;
		box-shadow: 0px 0px 8px 0px rgba(165, 189, 251, 0.4);
		padding-bottom: 10rpx;
	}

	.ordertop>view:nth-child(1) {
		width: 98%;
		margin-bottom: 60rpx;
	}

	.iconblue {
		width: 10rpx;
		height: 45rpx;
		float: left;
		background-color: #3a63cf;
		margin-right: 10rpx;
	}

	.license {
		float: left;
		font-size: 32rpx;
	}

	.various {
		float: right;
		width: 230rpx;
		border: 2rpx solid #3a63cf;
		text-align: center;
		border-radius: 100rpx;
		color: #1669e6;
	}

	.view {
		width: 96%;
		margin: 20rpx auto;
		display: flex;
		justify-content: space-between
	}

	.line {
		width: 92%;
		margin: 0 auto;
	}

	.basic {
		width: 94%;
		margin: 10rpx auto;
		display: flex;
		justify-content: space-between;
	}

	.basic>view {
		margin-bottom: 10rpx;
	}

	.basic>view:nth-child(1) {
		color: #797979;
	}

	.search {
		width: 96%;
		margin: 10rpx auto;
	}

	.condition {
		background-color: #1669e6;
		height: 60rpx;
	}

	.conditionone {
		width: 92%;
		height: 44rpx;
		margin: 0rpx auto;
		display: flex;
		justify-content: space-between;
		color: #fff;
	}

	.conditionone>view {
		color: #e6e8e8;
	}
</style>