QianNiaoShop/pagesT/stock/flowing.vue

<template>
	<view>
		<u-navbar :border-bottom="false" :is-back="true" title-color="#fff" title=" " :background="nav_background">
			<view class="headline">
				<u-search
					height="72"
					bg-color="#ECF0F7"
					:show-action="false"
					:clearabled="true"
					@search="searchConfirm"
					placeholder="商品名称/单据编号"
					@clear="searchConfirm"
					v-model="search_form.keyword"
				></u-search>
			</view>
		</u-navbar>
		<view class="tabs-view clearfix float_left">
			<view class="search-view clearfix float_left" style="width: 50%;">
				<view class="title ellipsis" style="width: 47.5%;" @click="timeShow('start_show')">{{ $u.timeFormat(search_form.start, 'yyyy-mm-dd') || '开始时间' }}</view>
				<view style="width: 5%;" class="title"><u-icon name="arrow-right"></u-icon></view>
				<view class="title ellipsis" style="width: 47.5%;" @click="timeShow('end_show')">{{ $u.timeFormat(search_form.end, 'yyyy-mm-dd') || '结束时间' }}</view>
			</view>
			<view class="search-view clearfix float_left" style="width: 50%">
				<view class="title ellipsis" style="width: 50%;" @click="goPage('/pagesT/werahouse/selWerahouse')">
					{{ search_form.warehouseName }}
					<u-icon name="arrow-down-fill" class="ico" style="right: 0;"></u-icon>
				</view>
				<view class="title ellipsis" style="width: 30%;" @click="goPage('/pagesT/staff/selStaff')">
					{{ search_form.salesName }}
					<u-icon name="arrow-down-fill" class="ico" style="right: 0;"></u-icon>
				</view>
				<view class="title" style="width: 20%;" @click="clearValue"><u-icon name="reload"></u-icon></view>
			</view>
		</view>
		<view class="rigth-view">
			<scroll-view scroll-y="true" class="rigth-scroll" @scrolltolower="moreGoods" :scroll-top="scrollTop">
				<view class="explain">
					<view class="float_left">合计数据</view>
					<view class="float_right">共{{ total }}条</view>
				</view>
				<view class="goods-li" v-for="(item, index) in customer_list" :key="index">
					<view class="title clearfix">
						<view class="float_left ellipsis" style="margin-left: 40rpx; width: 350rpx;">{{ item.sourceNo }}</view>
						<view class="float_right" style="margin-right: 40rpx;">{{ item.operatorName }}</view>
					</view>
					<view class="goods-main clearfix">
						<image class="goods-img float_left" :src="item.images[0]" mode="aspectFill"></image>
						<view class="goods-info float_left">
							<view class="goods-name ellipsis">{{ item.materielName }}</view>
							<view class="goods-code ellipsis">{{ item.materielCode }}</view>
							<view class="goods-code">{{ item.unitName }};{{ item.skuName }}</view>
							<view class="goods-code">{{ item.skuValue }}</view>
							<view class="goods-code">
								<view class="num-ul">
									<view class="num-li" v-if="item.actionType === 4">
										<view class="label">
											出库
											<text style="color: #FF6D74; margin-left: 20rpx;">-{{ $utils.formatNub(item.inventoryNum) }}</text>
										</view>
									</view>
									<view class="num-li" v-if="item.actionType === 5">
										<view class="label">
											入库
											<text style="color:#00C792; margin-left: 20rpx;">+{{ $utils.formatNub(item.inventoryNum) }}</text>
										</view>
									</view>
									<view class="num-li float_right" style="text-align: center;">
										<view class="label">
											剩余量
											<text style="margin-left: 20rpx;">{{ $utils.formatNub(item.inventoryChangeNum) }}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="title clearfix" style="border-top: 1rpx rgb(238,238,238) solid; border-bottom: none;">
						<view class="float_left ellipsis" style="margin-left: 40rpx; width: 350rpx;">{{ $u.timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss') }}</view>
						<view class="float_right" style="margin-right: 40rpx; color: #2D405E;">{{ item.sourceName }}</view>
					</view>
				</view>
				<u-loadmore v-if="customer_list.length" :status="load_status" />
				<view v-if="!customer_list.length" class="empty-view"><u-empty text="暂无数据" mode="order"></u-empty></view>
			</scroll-view>
		</view>
		<u-picker v-model="start_show" mode="time" :params="time_params" @confirm="startconfirm"></u-picker>
		<u-picker v-model="end_show" mode="time" :params="time_params" @confirm="endconfirm"></u-picker>
	</view>
</template>

<script>
export default {
	data() {
		return {
			load_status: 'nomore',
			nav_background: {
				backgroundColor: '#fff'
			},
			start_show: false,
			end_show: false,
			time_params: {
				year: true,
				month: true,
				day: true,
				hour: false,
				minute: false,
				second: false
			},
			search_form: {
				keyword: '',
				start: new Date(this.$utils.showMonthFirstDay()).getTime() / 1000,
				end: new Date().getTime(),
				warehouseId: '',
				warehouseName: '仓库',
				salesName: '操作人',
				salesManId: ''
			},
			staffData: {},
			werahouseData: {},
			customer_list: [],
			page: 1,
			pageSize: 10,
			total: 0
		};
	},
	onLoad() {
		this.getAllWarehouse();
	},
	onReachBottom() {
		if (this.total / this.pageSize > this.page) {
			this.page += 1;
			this.searchAllInventoryDetails();
		}
	},
	watch: {
		werahouseData(val) {
			if (val) {
				this.search_form.warehouseId = val.id;
				this.search_form.warehouseName = val.warehouseName;
				this.searchAllInventoryDetails();
			}
		},
		staffData(val) {
			if (val) {
				this.search_form.salesManId = val.id;
				this.search_form.salesName = val.staffName;
				this.searchAllInventoryDetails();
			}
		}
	},
	methods: {
		// 滚动到底部，触发上拉加载
		moreGoods() {
			if (this.total / this.pageSize > this.page) {
				this.page += 1;
				this.searchAllInventoryDetails();
			}
		},
		searchConfirm() {
			this.page = 1;
			this.searchAllInventoryDetails();
		},
		startconfirm(val) {
			this.search_form.start = this.$utils.timeByTimestamp(val.year + '-' + val.month + '-' + val.day + ' 00:00:00');
			this.page = 1;
		},
		endconfirm(val) {
			this.search_form.end = this.$utils.timeByTimestamp(val.year + '-' + val.month + '-' + val.day + ' 23:59:59') * 1000;
			this.page = 1;
			this.searchAllInventoryDetails();
		},
		timeShow(params) {
			this[params] = true;
		},
		getAllWarehouse() {
			this.$u.api
				.getAllWarehouse({
					page: 1,
					pageSize: 1
				})
				.then(res => {
					this.search_form.warehouseId = res.data[0].id;
					this.search_form.warehouseName = res.data[0].warehouseName;
					this.searchAllInventoryDetails();
				});
		},
		clearValue() {
			this.search_form = {
				keyword: '',
				start: new Date(this.$utils.showMonthFirstDay()).getTime() / 1000,
				end: new Date().getTime(),
				warehouseId: '',
				warehouseName: '仓库',
				salesName: '操作人',
				salesManId: ''
			};
			this.page = 1;
			this.getAllWarehouse();
		},
		searchAllInventoryDetails() {
			this.load_status = 'loading';
			this.$u.api
				.searchAllInventoryDetails({
					merchantId: '',
					warehouseId: this.search_form.warehouseId,
					skuId: '',
					operatorId: this.search_form.salesManId,
					start: this.search_form.start,
					end: this.search_form.end / 1000,
					search: this.search_form.keyword,
					page: this.page,
					pageSize: this.pageSize
				})
				.then(res => {
					if (this.page === 1) {
						this.customer_list = res.data;
					} else {
						this.customer_list = this.customer_list.concat(res.data);
					}
					this.total = res.pageTotal;
					this.load_status = this.$utils.loadStatus(this.page, this.pageSize, this.total);
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.headline {
	margin-left: 30rpx;
	margin-bottom: 18rpx;
	width: 400rpx;
	/* #ifdef APP-PLUS */
	width: 600rpx;
	/*  #endif */
	/* #ifdef MP */
	width: 400rpx;
	/*  #endif */
	height: 72rpx;
}

.tabs-view {
	width: 100%;

	.search-view {
		width: 100%;
		background-color: #fff;

		.title {
			position: relative;
			width: 50%;
			height: 84rpx;
			float: left;
			text-align: center;
			font-size: 26rpx;
			font-weight: 400;
			line-height: 84rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			color: #62738e;

			.text {
				width: 12rpx;
				height: 10rpx;
				margin-left: 8rpx;
				vertical-align: middle;
			}

			.ico {
				font-size: 12rpx;
				color: #b8c0c8;
				position: absolute;
				top: 38rpx;
			}
		}
	}
}

.rigth-view {
	width: 100%;
	background-color: rgb(247, 248, 250);

	.rigth-scroll {
		width: 100%;
		height: calc(90vh - 100rpx);
		padding-top: calc(var(--status-bar-height));

		.explain {
			width: 100%;
			height: 81rpx;
			line-height: 81rpx;
			z-index: 99;
			color: #879bba;
			font-size: 24rpx;
			padding: 0 28rpx 0 32rpx;
		}

		.goods-li {
			margin: 0 20rpx 24rpx;
			background-color: #ffffff;
			border-radius: 8px;
			position: relative;

			.title {
				line-height: 80rpx;
				border-bottom: 1px solid #eeeeee;
				font-size: 24rpx;
				color: #cad0d7;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				.float_rigth {
					.custom-icon-jinru {
						margin-left: 10rpx;
						font-size: 28rpx;
					}
				}
			}

			.goods-main {
				padding: 20rpx 0 20rpx 40rpx;

				.goods-img {
					border-radius: 10rpx;
					width: 156rpx;
					height: 156rpx;
					margin-right: 20rpx;
				}
				.goods-info {
					width: 490rpx;

					.goods-name {
						-webkit-line-clamp: 1;
					}
					.goods-code {
						width: 100%;
						font-size: 24rpx;
						padding-top: 6rpx;
					}
				}
			}

			.num-ul {
				width: 100%;
				display: flex;
				.num-li {
					font-size: 24rpx;
					line-height: 36rpx;
					font-weight: bold;
					flex: 2;
					.label {
						font-weight: 400;
						color: #999999;
					}
				}
			}

			.more-btn {
				position: absolute;
				right: 20rpx;
				bottom: -120rpx;
				background-color: #ffffff;
				border-radius: 10rpx;
				padding: 0 20rpx;
				z-index: 9;
				box-shadow: 0px 3px 24rpx rgba(0, 0, 0, 0.1);

				.more-btn-li {
					font-size: 24rpx;
					line-height: 60rpx;
					text-align: center;
					border-bottom: 1px solid #f5f5f5;

					&:last-child {
						border: 0 none;
					}
				}
			}
		}
	}
}
</style>