hbj_app/pages/indexpage/YJgoods/cangKuKuCun/cangKuKuCun.vue

<template>
	<view>
		<u-navbar bgColor="#ffffff" :placeholder="true" :autoBack="true" titleStyle="font-weight:600">
			<view slot="center" style="display: flex;align-items: center;flex-direction: column;">
				<view>
					<span style="font-size: 30rpx; font-weight: 600;color: #333333;margin-right: 10rpx;">{{ changku }}</span>
					<!-- <image style="width: 32rpx; height: 32rpx;" src="../../../static/images/wuzhi/zhuanhuan.png"></image> -->
				</view>
				<span style="font-size: 20rpx; font-weight: 600;color: #b1b1b1;margin-right: 10rpx;">仓库库存</span>
			</view>
			<view slot="right" style="display: flex;align-items: center;flex-direction: column;" @click="popCheBian()">
				<image style="width: 48rpx; height: 48rpx;" src="../../../../static/images/wuzhi/qiehuancangku.png"></image>
				<span style="font-size: 18rpx; font-weight: 600;margin-right: 10rpx;color: #1296db;">切换仓库</span>
			</view>
		</u-navbar>
		<!-- 自定义导航栏 -->
		<!-- <u-navbar bgColor="#ffffff" :placeholder="true" :autoBack="true" titleStyle="font-weight:600">
			<view slot="center" style="display: flex;align-items: center;" @click="popCheBian()">
				<span style="font-size: 32rpx; font-weight: 600;color: #333333;margin-right: 10rpx;">{{ changku }}</span>
				<image style="width: 32rpx; height: 32rpx;" src="../../../../static/images/wuzhi/zhuanhuan.png"></image>
			</view>
		</u-navbar> -->

		<view class="content">
			<scroll-view class="menus" scroll-with-animation scroll-y>
				<view class="wrapper">
					<view class="menu" v-for="(item, index) in kucunLeftMenu" :class="{ current: index == current }" :key="index" @click="menuClick(item, index)">
						<text>{{ item.categoryName }}</text>
					</view>
				</view>
			</scroll-view>
			<!-- goods list begin -->
			<scroll-view class="goods" scroll-with-animation scroll-y :scroll-top="cateScrollTop">
				<view class="wrapper">
					<view class="list">
						<!-- category begin -->
						<view class="category" v-for="item in kucunlist">
							<view style="display: flex;margin-bottom: 10rpx;width: auto; border-bottom: 1rpx solid #EFEFEF;padding-bottom: 15rpx; align-items: center;">
								<!-- <view style="width: 145rpx;height: 145rpx;border: 1px solid #EFEFEF;"> -->
								<u-album
									singleSize="72"
									multipleMode="scaleToFill"
									singleMode="scaleToFill"
									multipleSize="72"
									rowCount="1"
									style="width: 145rpx;height: 145rpx;border: 1px solid #EFEFEF;background-color:#EFEFEF ;"
									:urls="item.showUrls == null ? [] : item.showUrls"
									maxCount="1"
								></u-album>

								<!-- </view> -->
								<view
									@click="wuZhiXiangQing(item)"
									style=" width: 400rpx;display: flex;    flex-direction: column;justify-content: space-between; align-items: flex-start;margin-left: 10rpx;"
								>
									<span style="font-weight: 600;font-size: 24rpx;">
										{{ item.materialName }} ({{ item.materialUnit }})
										<span v-if="item.text3" style="font-weight: 600;font-size: 21rpx;color: #ff4c11;margin-left: 10rpx;">{{ item.text3 }}</span>
									</span>
									<span style="font-weight: 600;font-size: 21rpx;color: #999999;">
										{{ item.materialSpecification == null ? '暂无规格' : item.materialSpecification }}
									</span>
									<span style="font-size: 21rpx;color: #999999;">{{ item.batch }}</span>
									<view style="width: 400rpx;  display: flex;   justify-content: space-between;align-items: center;">
										<view class="count">
											<view class="basicCount" v-if="item.text4">
												<image src="../../../../static/images/zhuye/basic.png" alt=""></image>
												标准数量：{{ item.text4 }}
											</view>
											<view class="currentCount">
												<image src="../../../../static/images/zhuye/current.png" alt=""></image>
												当前数量:{{ item.num }}
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view v-if="kucunlist.length == '0'" style="display: flex;flex-direction: column;align-items: center;justify-content: center;margin-top: 100rpx;">
							<image src="../../../../static/images/none.png" style="width: 316rpx;height: 181rpx;"></image>
							<span style="color: #9f9f9f;margin-top: 30rpx;">无此类型物资</span>
						</view>
						<!-- category end -->
					</view>
				</view>
			</scroll-view>
			<!-- goods list end -->
		</view>

		<!-- 侧边栏弹窗 -->
		<u-popup :show="wuzhiCheBian" mode="left" :customStyle="{ width: '70vw' }" :safeAreaInsetBottom="true" @close="offPop()">
			<view style="height: 50px;margin-bottom: 10rpx;"></view>
			<u-search placeholder="请输入仓库名称搜索" v-model="keyword" :clearabled="false" :showAction="false"></u-search>
			<scroll-view scroll-y="true" style="height: 95vh;" scroll-with-animation="true">
				<view class="status_bar"></view>
				<uni-list>
					<uni-list-item v-for="(item, index) in titlelist" :title="`${index + 1}.${item.name}`" :clickable="true" @click="xuanZheChangKu(item)"></uni-list-item>
				</uni-list>
				<view style="height: 50px;"></view>
			</scroll-view>
		</u-popup>
		<!-- 侧边栏弹窗 -->
		<u-popup :show="wuzhiXiangQing" mode="bottom" :round="15" :customStyle="{ width: '100vw' }" :safeAreaInsetBottom="true" @close="offPopXiangQing()">
			<scroll-view scroll-y="true" style="height: 46vh;display: flex;margin-left: 30rpx;" scroll-with-animation="true">
				<view style="display: flex;margin-bottom: 20rpx;width: 100%; margin-top: 30rpx;padding-bottom: 15rpx; align-items: center; justify-content: space-between;">
					<u-album
						singleSize="72"
						multipleMode="scaleToFill"
						singleMode="scaleToFill"
						multipleSize="72"
						rowCount="1"
						style="width: 145rpx;height: 145rpx;border: 1px solid #EFEFEF;background-color:#EFEFEF ;"
						:urls="kucunSigle.showUrls == null ? [] : kucunSigle.showUrls"
						maxCount="1"
					></u-album>
					<view style=" width: 75%;display: flex;flex-direction: column;justify-content: space-between; align-items: flex-start;">
						<span style="font-weight: 600;font-size: 30rpx;width: 100%;margin-bottom: 10rpx;">{{ kucunSigle.materialName }} ({{ kucunSigle.materialUnit }})</span>
						<span style="font-size: 22rpx;color: #999999;margin-bottom: 5rpx;">{{ kucunSigle.materialCategory }}</span>
						<span style="font-weight: 600;font-size: 22rpx;color: #999999;">
							{{ kucunSigle.materialSpecification == null ? '暂无规格' : kucunSigle.materialSpecification }}
						</span>
						<view style="width: 100%;  display: flex;   justify-content: flex-start;align-items: center;">
							<view class="count">
								<!-- <view class="basicCount" v-if="kucunSigle.text4">
									<image src="../../../../static/images/zhuye/basic.png" alt=""></image>
									标准数量：{{ kucunSigle.text4 }}
								</view> -->
								<view class="currentCount">
									<image src="../../../../static/images/zhuye/current.png" alt=""></image>
									当前数量:{{ kucunSigle.num }}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view style="    display: flex;flex-direction: column;align-items: flex-start;">
					<span style="font-weight: 600;font-size: 31rpx;display: flex;margin-bottom: 20rpx;">
						入库批次:
						<p style="margin-left: 25rpx;color: #7D858E;">{{ kucunSigle.batch }}</p>
					</span>
					<span v-if="kucunSigle.materialSpecification" style="font-weight: 600;font-size: 31rpx;display: flex;margin-bottom: 20rpx;">
						主要规格:
						<p style="margin-left: 25rpx;color: #7D858E;">{{ kucunSigle.materialSpecification }}</p>
					</span>
					<span style="font-weight: 600;font-size: 31rpx;display: flex;margin-bottom: 20rpx;">
						所属部门:
						<p style="margin-left: 25rpx;color: #7D858E;">{{ kucunSigle.unitName }}</p>
					</span>
					<span style="font-weight: 600;font-size: 31rpx;display: flex;margin-bottom: 20rpx;">
						所属库房:
						<p style="margin-left: 25rpx;color: #7D858E;">{{ kucunSigle.houseName }}</p>
					</span>
					<span v-if="kucunSigle.yxTime" style="font-weight: 600;font-size: 31rpx;display: flex;margin-bottom: 20rpx;">
						有效期至:
						<p style="margin-left: 25rpx;color: #7D858E;">{{ kucunSigle.yxTime }}</p>
					</span>
				</view>
			</scroll-view>
		</u-popup>
	</view>
</template>

<script>
//查询仓库列表
import { listWarehouse, listCategory, getCategory } from '@/api/indexpage/yjWz/warehouse.js';
//查询库存物资
import { listStock, getStock } from '@/api/indexpage/yjWz/kuCun.js';
export default {
	data() {
		return {
			//侧边栏
			menuScrollIntoView: '',
			cateScrollTop: 0,
			current: 0,
			//侧边栏
			timer: '', //防抖函数
			keyword: '',
			changku: '仓库名称', // 仓库名称
			changkuId: '', //仓库ID
			wuzhiCheBian: false, //物资侧边栏
			titlelist: [], //场库列表
			leftMenuName: '', // 左边菜单名称
			// 物资列表
			wuzhiXiangQing: false,
			kucunLeftMenu: [],
			kucunlist: [],
			kucunSigle: {},
			listDictionaryParams: {
				pageNum: 1,
				pageSize: 99,
				houseId: '',
				categoryId: ''
			}
		};
	},
	onLoad(options) {
		//获取场库id和名字
		let name = options.ckName;
		let id = options.ckId;
		this.changku = name;
		this.changkuId = id;

		this.getChangKu();
		this.getListCategory();
	},
	watch: {
		keyword(newdata, olddata) {
			let that = this;
			//防抖函数
			clearTimeout(that.timer);
			that.timer = setTimeout(function() {
				if (newdata === '') {
					//发场库请求
					listWarehouse().then(res => {
						that.titlelist = res.rows;
					});
				} else {
					//发场库请求
					listWarehouse({
						name: newdata
					}).then(res => {
						that.titlelist = res.rows;
					});
				}
			}, 600);
		}
	},
	methods: {
		//物资详情
		wuZhiXiangQing(item) {
			//显示弹窗
			this.wuzhiXiangQing = true;
			this.getStockById(item.id);
			//传入弹窗内容
		},
		offPopXiangQing() {
			this.wuzhiXiangQing = false;
		},
		//点击侧边栏
		menuClick(item, index) {
			console.log(item);
			this.listDictionaryParams.categoryId = item.id;
			this.getKuCun();
			//id
			this.current = index;
		},
		getKuCun() {
			//携带场库id
			this.listDictionaryParams.houseId = this.changkuId;
			listStock(this.listDictionaryParams).then(res => {
				this.kucunlist = res.rows;
			});
		},
		getStockById(id) {
			getStock(id).then(res => {
				this.kucunSigle = res.data;
			});
		},

		getChangKu() {
			//发场库请求
			listWarehouse().then(res => {
				this.titlelist = res.rows;
			});
		},
		getListCategory() {
			listCategory()
				.then(res => {
					this.kucunLeftMenu = res.rows;
					//默认第一个
					this.listDictionaryParams.categoryId = res.rows[0].id;
					//获取库存
					this.getKuCun();
				})
				.catch(error => {
					console.error(error);
				});
		},
		// getCategoryById(id) {
		// 	getCategory(id).then(res => {
		// 		this.kucunlist = res.data;
		// 	}).catch(error => {
		// 		console.error(error)
		// 	})
		// },

		//弹出侧边栏
		popCheBian() {
			//弹出侧边栏
			this.wuzhiCheBian = true;
		},
		offPop() {
			//弹出侧边栏
			this.wuzhiCheBian = false;
			//清空搜索
			this.keyword = '';
		},
		xuanZheChangKu(item) {
			//获取仓库名称和ID
			this.changku = item.name;
			this.changkuId = item.id;
			this.getKuCun();
			//弹出侧边栏
			this.wuzhiCheBian = false;
			//清空搜索
			this.keyword = '';
		}
	}
};
</script>

<style lang="scss" scoped>
.count {
	display: flex;
	font-size: 26rpx;
	font-family: Noto Sans S Chinese;
	font-weight: normal;
	color: #999999;
}

.basicCount {
	font-size: 21rpx;
	font-family: Noto Sans S Chinese;
	font-weight: normal;
	color: #0098df;
	// width: 200rpx;
	// height: 40rpx;
	background: #e8f8ff;
	border: 1px solid #0098df;
	border-radius: 4rpx;
	margin-right: 10rpx;
	padding: 6rpx 10rpx;
	display: flex;
	align-items: center;

	image {
		height: 22rpx;
		width: 20rpx;
	}
}

.currentCount {
	font-size: 21rpx;
	font-family: Noto Sans S Chinese;
	font-weight: normal;
	color: #ffa132;
	// width: 200rpx;
	// height: 40rpx;
	background: #fff9f1;
	border: 1px solid #ffa132;
	border-radius: 4rpx;
	padding: 6rpx 10rpx;
	display: flex;
	align-items: center;

	image {
		height: 22rpx;
		width: 20rpx;
	}
}

.content {
	// flex: 1;
	// overflow: hidden;
	// width: 100%;

	display: flex;

	.menus {
		width: 190rpx;
		// height: 100vh;
		// overflow: hidden;
		background-color: #f7f7f7;

		.wrapper {
			width: 100%;
			height: 100%;

			.menu {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				padding: 30rpx 20rpx;
				font-size: 26rpx;
				color: black;
				position: relative;

				&:nth-last-child(1) {
					margin-bottom: 130rpx;
				}

				&.current {
					border-left: 3px solid #52a3ff;
					background-color: #ffffff;
					color: #52a3ff;
					font-weight: 600;
					width: 195rpx;
				}
			}
		}
	}
}

.goods {
	flex: 1;
	height: calc(100vh - 50px);
	overflow: hidden;
	background-color: #ffffff;

	.wrapper {
		width: 100%;
		height: 100%;
		padding: 10rpx 10rpx;

		.ads {
			height: calc(300 / 550 * 510rpx);

			image {
				width: 100%;
				height: 100%;
				border-radius: 8rpx;
			}
		}

		.list {
			width: 100%;

			padding-bottom: 130rpx;
		}
	}
}
</style>