jhlapp/pagesT/stock/stockQuery.vue

<template>
	<view v-if="$accessCheck($Access.queryGetInventoryAll)">
		<view class="keyword-view clearfix">
			<!-- <u-search @clear="searchList" @search="searchList" @custom="searchList" :clearabled="true" placeholder="商品名称" v-model="keyword"></u-search> -->
			<view class="float_left">
				<u-search :show-action="false" @clear="searchList" @search="searchList" :clearabled="true" placeholder="商品名称" v-model="keyword"></u-search>
			</view>
			<view class="float_right" @click="openSel('search_show')"><text class="custom-icon custom-icon-shaixuan"></text></view>
		</view>
		<view class="main-view clearfix">
			<view class="left-view float_left">
				<scroll-view scroll-y="true" class="left-scroll">
					<view class="cate-li" :class="[!category_id ? 'cate-on' : '']" @click="changeCate(0)">全部</view>
					<view
						class="cate-li ellipsis"
						v-for="(item, index) in category_list"
						:key="index"
						@click="changeCate(item.id)"
						:class="[category_id === item.id ? 'cate-on' : '']"
					>
						{{ item.title }}
					</view>
				</scroll-view>
			</view>
			<view class="rigth-view float_left">
				<scroll-view scroll-y="true" class="rigth-scroll" @scrolltolower="moreGoods" :scroll-top="scrollTop">
					<view class="goods-li" v-for="(item, index) in goods_list" :key="index">
						<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">{{ item.materielCode }}</view>
								<view class="goods-code">{{ item.unitName }};{{ item.skuName }}</view>
								<view class="goods-code">{{ item.skuValue }}</view>
								<!-- <view class="goods-tag">
									<u-tag class="tag-li" mode="plain" size="mini" :text="item.categoryName" />
									<u-tag class="tag-li" mode="dark" size="mini" text="库存分步" />
								</view> -->
							</view>
						</view>
						<view class="num-ul">
							<view class="num-li">
								<view class="label">可售</view>
								{{ $utils.formatNub(item.inventoryNum) }}{{ item.unitName }}
							</view>
							<view class="num-li">
								<view class="label">占用</view>
								{{ $utils.formatNub(item.lockInventory) }}{{ item.unitName }}
							</view>
							<view class="num-li">
								<view class="label">换算</view>
								{{ item.skuNum }}
							</view>
						</view>
					</view>
					<u-loadmore v-if="goods_list.length" :status="load_status" />
					<view v-if="!goods_list.length" class="empty-view"><u-empty text="暂无商品" mode="favor"></u-empty></view>
				</scroll-view>
			</view>
		</view>
		<u-popup v-model="search_show" mode="right">
			<view class="search-pop">
				<view class="form-view">
					<u-form label-width="160rpx" label-position="left">
						<u-form-item label="库存状态">
							<view class="clearfix form-val" @click="openFrom">
								<text class="float_left ellipsis">{{ haveInventoryNum ? haveInventoryNum_name : '请选择' }}</text>
								<view class="float_right" @click.stop="clearValue()">
									<u-icon :name="!haveInventoryNum ? 'arrow-right' : 'close-circle-fill'" size="28" color="#999999"></u-icon>
								</view>
							</view>
						</u-form-item>
					</u-form>
				</view>
				<view class="search-btn">
					<view class="btn-li" @click="clearValue()">重置</view>
					<view class="btn-li" @click="searchList">确定</view>
				</view>
			</view>
		</u-popup>
		<u-select @confirm="fromChange" v-model="from_show" :list="order_status"></u-select>
	</view>
</template>

<script>
export default {
	data() {
		return {
			load_status: 'nomore',
			tab_current: 0,
			status_list: [
				{
					label: '启用',
					value: 5
				},
				{
					label: '禁用',
					value: 4
				}
			],
			category_list: [], // 分类列表
			category_id: '', // 分类id
			auditStatus: 2, // 审核状态
			isOption: '', // 是否是自选商品
			page: 1,
			pageSize: 10,
			total: 0,
			goods_list: [],
			brandId: '', //品牌
			brand_name: '',
			keyword: '', //关键词
			enableStatus: '', //上下架
			scrollTop: -1,
			search_show: false,
			haveInventoryNum: '',
			haveInventoryNum_name: '',
			from_show: false,
			order_status: [
				{
					label: '有库存',
					value: 5
				},
				{
					label: '无库存',
					value: 4
				}
			]
		};
	},
	onLoad() {
		this.getAllCategory();
	},
	onShow() {
		this.page = 1;
		this.getInventoryAll();
	},
	methods: {
		// 重置搜索
		clearValue(params) {
			if (params) {
				this.haveInventoryNum = '';
			} else {
				this.haveInventoryNum = '';
				this.searchList();
			}
		},
		fromChange(e) {
			this.haveInventoryNum = e[0].value;
			this.haveInventoryNum_name = e[0].label;
		},
		openFrom() {
			this.from_show = true;
		},
		openSel(key) {
			this[key] = true;
		},
		//  获取所有商品分类
		getAllCategory() {
			this.$u.api
				.getAllCategory({
					enableStatus: 5
				})
				.then(res => {
					this.category_list = res.data;
				});
		},
		// 切换分类
		changeCate(id) {
			this.scrollTop = 0;
			this.$nextTick(function() {
				this.scrollTop = -1;
			});
			this.category_id = id;
			this.searchList();
		},
		// 滚动到底部，触发上拉加载
		moreGoods() {
			if (this.total / this.pageSize > this.page) {
				this.page += 1;
				this.getInventoryAll();
			}
		},
		searchList() {
			this.search_show = false;
			this.page = 1;
			this.getInventoryAll();
		},

		// 获取商品列表
		getInventoryAll() {
			this.load_status = 'loading';
			let params = {
				page: this.page,
				pageSize: this.pageSize,
				categoryId: this.category_id,
				materielName: this.keyword,
				warehouseId: '',
				haveInventoryNum: this.haveInventoryNum
			};
			this.$u.api.getInventoryAll(params).then(res => {
				if (this.page === 1) {
					this.goods_list = res.data;
				} else {
					this.goods_list = this.goods_list.concat(res.data);
				}
				this.total = res.pageTotal;
				this.load_status = this.$utils.loadStatus(this.page, this.pageSize, this.total);
			});
		}
	}
};
</script>

<style scoped lang="scss">
// .keyword-view {
// 	background-color: #ffffff;
// 	padding: 20rpx 24rpx;

// 	.float_left {
// 		width: 640rpx;
// 	}

// 	.float_right {
// 		line-height: 64rpx;
// 		width: 50rpx;
// 		text-align: center;
// 		color: #666666;
// 	}
// }
.keyword-view {
	padding: 20rpx 24rpx 0;
	background-color: #ffffff;
	z-index: 9;
	padding-bottom: 20rpx;

	.float_left {
		width: 640rpx;
	}

	.float_right {
		line-height: 64rpx;
		width: 50rpx;
		text-align: center;
		color: #666666;
	}
}

.main-view {
	.left-view {
		width: 168rpx;
		background-color: #f7f8fa;

		.left-scroll {
			width: 100%;
			height: calc(100vh - 106rpx);

			.cate-li {
				line-height: 90rpx;
				padding-left: 36rpx;
				color: #666666;
				-webkit-line-clamp: 1;
			}

			.cate-on {
				background-color: #ffffff;
				color: #000000;
				position: relative;

				&::before {
					content: '';
					display: block;
					width: 6rpx;
					height: 20rpx;
					background-color: $uni-color-primary;
					position: absolute;
					left: 14rpx;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}
	}

	.rigth-view {
		width: calc(100% - 168rpx);
		background-color: #ffffff;

		.rigth-scroll {
			width: 100%;
			height: calc(100vh - 106rpx);

			.goods-li {
				padding: 20rpx;
				border-bottom: 1px solid #f5f5f5;
				position: relative;

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

					.goods-info {
						width: 366rpx;

						.goods-name {
							-webkit-line-clamp: 1;
						}

						.goods-code {
							font-size: 24rpx;
							padding-top: 6rpx;
						}

						.goods-tag {
							padding: 10rpx 0;

							.tag-li {
								margin-right: 14rpx;
							}
						}

						.goods-num {
							color: #999999;
							font-size: 22rpx;

							text {
								padding-right: 10rpx;
							}
						}
					}
				}

				.num-ul {
					display: flex;
					padding-top: 20rpx;

					.num-li {
						font-size: 24rpx;
						line-height: 36rpx;
						flex: 3;
						text-align: center;
						position: relative;
						font-weight: bold;

						.label {
							font-weight: 400;
							color: #999999;
						}

						&::after {
							display: block;
							content: '';
							position: absolute;
							width: 1px;
							height: 60rpx;
							top: 50%;
							transform: translateY(-50%);
							right: 0;
							background-color: #eeeeee;
						}

						&:last-child {
							&::after {
								display: block;
								content: '';
								position: absolute;
								width: 1px;
								height: 50rpx;
								top: 50%;
								transform: translateY(-50%);
								right: 0;
								background-color: transparent;
							}
						}
					}
				}

				.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>