RedDragonfly/pages/inventory/inventory.vue

<template>
	<view class="inventory">
		<view class="top">
			<text class="text" @click="showDrawer()">
				筛选
			</text>
			<uni-drawer ref="showRight" mode="right" :width="340">
				<view class="close">
					<view class="par">
						<text class="tad">
							仓库
						</text>
						<view class="th">
							<view class="td" :class="warehouseIndex == i ? 'active' : ''" v-for="(v,i) in warehouse"
								:key="i" @click="change(v,i,0)">
								{{v.name}}
							</view>
						</view>
					</view>
					<view class="par">
						<text class="tad">
							品牌
						</text>
						<view class="th">
							<view class="td" :class="brandIndex == i ? 'active' : ''" v-for="(v,i) in brand" :key="i"
								@click="change(v,i,1)">
								{{v}}
							</view>
						</view>
					</view>
					<view class="par">
						<text class="tad">
							是否转基因
						</text>
						<view class="th">
							<view class="td" :class="geneIndex == i ? 'active' : ''" v-for="(v,i) in gene" :key="i"
								@click="change(v,i,2)">
								{{v == -1 ? '全部' : v == 0 ? '转基因' : v== 1 ? '非转基因' : '其他'}}
							</view>
						</view>
					</view>
					<view class="par">
						<text class="tad">
							等级
						</text>
						<view class="th">
							<view class="td" :class="levelIndex == i ? 'active' : ''" v-for="(v,i) in level" :key="i"
								@click="change(v,i,3)">
								{{v}}
							</view>
						</view>
					</view>
					<view class="par">
						<text class="tad">
							容量
						</text>
						<view class="th">
							<view class="td" :class="capacityIndex == i ? 'active' : ''" v-for="(v,i) in capacity"
								:key="i" @click="change(v,i,4)">
								{{v}}
							</view>
						</view>
					</view>
					<view class="btn">
						<view class="" @click="reset()">
							重置
						</view>
						<view class="" @click="confirm()">
							确定
						</view>
					</view>
				</view>
			</uni-drawer>
		</view>
		<view class="main">
			<view class="tab" v-for="(v,i) in data" :key="i">
				<view class="name">
					{{v.name}}
				</view>
				<view class="">
					{{v.warehouseStock}}瓶
				</view>
			</view>
		</view>
		<view class="bom">
			合计: {{sum}}瓶
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		stock
	} from '../../api/inventory.js'
	import {
		stockSearch
	} from '../../api/statistics.js'
	export default {
		data() {
			return {
				showRight: false,
				showLeft: false,
				data: '',
				sum: 0,
				brandIndex: 0,
				capacityIndex: 0,
				geneIndex: 0,
				levelIndex: 0,
				warehouseIndex: 0,
				brand: [],
				capacity: [],
				gene: [],
				level: [],
				warehouse: [],
				brandName: '',
				capacityName: '',
				geneName: '',
				levelName: '',
				warehouseName: ''
			};
		},
		computed: {
			...mapState({
				user: store => store.user
			})
		},
		onLoad(options) {
			this.name = options.name
			if (this.name) {
				uni.setNavigationBarTitle({
					title: this.name
				});
			}
		},
		mounted() {
			this.getScreen()
			this.getData()
		},
		methods: {
			async getData() {
				uni.showLoading({
					title: '加载中'
				});
				const res = await stock({
					code: this.warehouseName,
					brand: this.brandName,
					gene: this.geneName,
					level: this.levelName,
					capacity: this.capacityName,
					accessToken:  uni.getStorageSync('tokenInfo'),
					account: uni.getStorageSync('account')
				})
				uni.hideLoading();
				this.data = res.data.list
				let that = this
				res.data.list.forEach(v => {
					that.sum += v.warehouseStock
				})
			},
			async getScreen() {
				const res = await stockSearch({})
				this.warehouse = res.data.data.warehouse
				this.warehouse.unshift({
					name: "全部仓库",
					code: 'ck00'
				})
				this.brand = res.data.data.brand
				this.brand.unshift("全部品牌")
				this.level = res.data.data.level
				this.level.unshift("全部等级")
				this.capacity = res.data.data.capacity
				this.capacity.unshift("全部容量")
				this.gene = res.data.data.gene
				this.gene.unshift(-1)
			},
			// 打开窗口
			showDrawer(e) {
				this.$refs.showRight.open()
			},
			// 关闭窗口
			closeDrawer(e) {
				this.$refs.showRight.close()
			},
			change(v, i, num) {
				if (num === 0) {
					this.warehouseIndex = i
					if (i == 0) {
						this.warehouseName = ''
					} else {
						this.warehouseName = v.code
					}
				} else if (num === 1) {
					this.brandIndex = i
					if (i == 0) {
						this.brandName = ''
					} else {
						this.brandName = v
					}
				} else if (num === 2) {
					this.geneIndex = i
					if (i == 0) {
						this.geneName = ''
					} else {
						this.geneName = v
					}
				} else if (num === 3) {
					this.levelIndex = i
					if (i == 0) {
						this.levelName = ''
					} else {
						this.levelName = v
					}
				} else if (num === 4) {
					this.capacityIndex = i
					if (i == 0) {
						this.capacityName = ''
					} else {
						this.capacityName = v
					}
				}
			},
			// 筛选重置
			reset() {
				this.brandIndex = 0
				this.capacityIndex = 0
				this.geneIndex = 0
				this.levelIndex = 0
				this.warehouseIndex = 0
				this.brandName = ''
				this.capacityName = ''
				this.geneName = ''
				this.levelName = ''
				this.warehouseName = ''
			},
			// 筛选确定
			confirm() {
				this.getData()
				this.closeDrawer()
			},
		}
	}
</script>

<style lang="scss">
	.inventory {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.top {
			height: 100rpx;
			line-height: 100rpx;
			text-align: right;
			background-color: #e40315;

			.text {
				padding: 30rpx;
				color: #fff;
			}

			.close {
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.par {
					text-align: left;
					padding: 20rpx;

					.th {
						display: flex;
						flex-wrap: wrap;

						.td {
							background-color: #eff3f6;
							height: 50rpx;
							line-height: 50rpx;
							padding: 0 20rpx;
							border-radius: 4px;
							margin: 0 10rpx 10rpx 0;
						}

						.active {
							background-color: #e40315;
							color: #fff;
						}
					}
				}

				.btn {
					height: 80rpx;
					padding: 10rpx;
					display: flex;
					margin-bottom: 20rpx;

					view {
						height: 100%;
						flex: 1;
						background-color: #e40315;
						border-right: 2rpx solid #fff;
						text-align: center;
						color: #fff;
						line-height: 80rpx;
					}
				}
			}
		}

		.main {
			flex: 1;
			overflow-y: scroll;
			padding: 0 20rpx;

			.tab {
				padding: 15rpx 0;
				border-bottom: 1rpx solid #e3e3e3;

				.name {
					margin-bottom: 20rpx;
				}
			}
		}

		.bom {
			height: 120rpx;
			border-top: 10rpx solid #f1f1f1;
			text-align: center;
			line-height: 120rpx;
			color: #e40315;
			font-size: 26rpx;
		}
	}
</style>