OpenDoorManageMini/pages/replenish/invSearch.vue

<template>
	<view class="container">
		<u-navbar leftIconColor="#fff" titleStyle="color:#fff;fontSize:36rpx;" :autoBack="true" bgColor="#2C6FF3"
			:placeholder="true" title="库存管理"></u-navbar>

		<view class="tab-wrap">
			<view class="tab">
				<u-tabs :list="tabList" :activeStyle="{color: '#333',fontWeight: 'bold',fontSize:'36rpx'}"
					:inactiveStyle="{fontSize:'32rpx'}" :scrollable="false" :current="current" @click="tabClick"
					lineColor="#2C6FF3">
				</u-tabs>
			</view>
		</view>

		<view class="flex align-center justify-end screen-container">
			<view style="margin-right: 24rpx;" @click="sortClick">{{sortName}}</view>
			<view class="flex align-center justify-center" @tap="screen">
				<view class="" style="font-size: 28rpx;font-weight: 500;color: #333333;">筛选</view>
				<image src="https://cdn.ossfile.mxrvending.com/assets/xy_merc_mini/images/screen.png"
					style="width: 32rpx;height: 32rpx;margin-left: 12rpx;" mode="widthFix"></image>
			</view>
		</view>



		<scroll-view class="scrollview" :scroll-with-animation="true" scroll-y lower-threshold="100"
			@scrolltolower="scrolltolower" :style="{height:fullHeight}">
			<view v-if="list.length>0">
				<block v-for="(item,index) in list" :key="index">
					<view class="equipment-container" @click="details(item)">
						<view class="flex align-center justify-between">
							<view class="title" v-if="current==1">
								<view v-if="item.deviceName">{{item.deviceName}}<text>({{item.deviceId}})</text></view>
								<view v-else>{{item.deviceId}}</view>
							</view>
							<view class="title" v-else>{{item.goodsName}}</view>
							<view>
								<u-icon name="arrow-right" size="14"></u-icon>
							</view>
						</view>

						<view class="order-detail-item">
							<view>缺货：</view>{{item.lackSum}}
						</view>

						<view class="order-detail-item">
							<view>库存：</view>{{item.stockSum}}
						</view>

						<view class="order-detail-item">
							<view>容量：</view>{{item.capacitySum}}
						</view>

						<view class="order-detail-item percent">
							<view>缺货占比：</view>{{item.percent}}%
						</view>
					</view>
				</block>
			</view>
			<view v-else class='empty'>
				<u-empty mode="data" text="数据为空"></u-empty>
			</view>
		</scroll-view>

		<xpopup :show="screenShow" @close="close" @confirm="sure" :showBtn="true" title="筛选">
			<view class="popup-container">
				<view class="pop-item-name">
					机器名称/机器编号:
				</view>
				<view class='martop'>
					<u-checkbox-group v-model="searchQuery.deviceIdList" placement="row" @change="checkboxChange">
						<u-checkbox :customStyle="{marginBottom: '8px',marginRight: '12px'}"
							v-for="(item, index) in checkboxList" :key="item.id" :label="item.name" :name="item.id">
						</u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="pop-item-name" style="margin-top: 30rpx;">
					商品名称:
				</view>
				<view class='martop'>
					<u--input placeholder="商品名称" v-model="searchQuery.goodsName" border="surround"></u--input>
				</view>
			</view>
		</xpopup>
		<u-action-sheet :show="actionSheetShow" :actions="actions" :title="title" @close="actionSheetShow = false"
			@select="actionsheetSelect($event)"></u-action-sheet>
	</view>
</template>

<script>
	import {
		stockByDevice, //按设备分组
		stockByGoods, // 按商品分组
	} from '@/api/replenishment/replenishment.js'

	export default {
		data() {
			return {
				sortName: '缺货率从多到少',
				searchQuery: {
					deviceIdList: [],
					goodsName: null
				},
				screenShow: false,
				list: [],
				loadmoreStatus: 'loadmore',
				fullHeight: 0,
				tabList: [{
						name: '商品'
					},
					{
						name: '机器'
					}
				],
				current: 0,

				actionSheetShow: false,
				actions: [{
						type: '1',
						name: '缺货率从多到少'
					},
					{
						type: '2',
						name: '缺货率从少到多'
					},
					{
						type: '3',
						name: '缺货数从多到少'
					},
					{
						type: '4',
						name: '缺货数从少到多'
					}
				],

				checkboxList: [],
			}
		},
		onLoad() {
			let _this = this;
			const query = uni.createSelectorQuery().in(this);
			query.select(".scrollview").boundingClientRect((data) => {
				uni.getSystemInfo({
					success(res) {
						// 针对iPhone X等机型底部安全距离做适配
						const model = res.model;
						const modelInclude = [
							"iPhone X",
							'iPhone XR',
							"iPhone XS",
							"iPhone XS MAX",
							"iPhone 12/13 mini",
							"iPhone 12/13 (Pro)",
							"iPhone 12/13 Pro Max",
							"iPhone 14 Pro Max"
						];
						let safeDistance = modelInclude.includes(model)
						//动态设置商品区域高度
						console.log(res.windowHeight, data.top)
						if (safeDistance) {
							_this.fullHeight = res.windowHeight - data.top - 40 + 'px';
						} else {
							_this.fullHeight = res.windowHeight - data.top + 'px';
						}
					},
				});
			}).exec();

			this.search()
			this.getDeviceList()
		},
		methods: {
			search() {
				let params = {
					"deviceIdList": this.searchQuery.deviceIdList,
					"goodsName": this.searchQuery.goodsName,
					"orderBy": '',
					"orderByKey": '',
				}
				switch (this.sortName) {
					case '缺货率从多到少':
						params.orderBy = 'desc';
						params.orderByKey = 'percent'
						break;
					case '缺货率从少到多':
						params.orderBy = 'asc';
						params.orderByKey = 'percent'
						break;
					case '缺货数从多到少':
						params.orderBy = 'desc';
						params.orderByKey = 'lackSum'
						break;
					case '缺货数从少到多':
						params.orderBy = 'asc';
						params.orderByKey = 'lackSum'
						break;
					default:
						break;
				}

				if (this.current == 0) { //商品
					this.getListA(params)
				} else { //机器
					this.getListB(params)
				}
			},
			
			getDeviceList(){
				deviceList().then(res => {
					this.checkboxList=res.data
				})
			},

			//按商品分组
			getListA(params) {
				stockByGoods(params).then(res => {
					if (res.code == 200) {
						if (res.data && res.data.length > 0) {
							this.list = res.data
						} else {
							this.list = []
						}
					} else {
						this.list = []
					}
				})
			},

			//按设备分组 
			getListB(params) {
				stockByDevice(params).then(res => {
					if (res.code == 200) {
						if (res.data && res.data.length > 0) {
							this.list = res.data
						} else {
							this.list = []
						}
					} else {
						this.list = []
					}
				})
			},

			//点击筛选
			screen() {
				this.screenShow = true
			},

			close() {
				this.screenShow = false
			},

			confirm(e) {
				this.show = false
				this.search()
			},

			sortClick() {
				this.actionSheetShow = true;
			},

			actionsheetSelect(e) {
				this.sortName = e.name
			},

			checkboxChange(e) {
				this.searchQuery.deviceIdList = e
			},

			sure() {
				this.close()
				this.search()
			},

			// 时间选择
			timeSubmit(e) {
				this.searchQuery.orderDate = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
				this.timeShow = false
				this.reset()
				this.getpage()
				//改为分页接口获取 this.getCountData()
			},

			tabClick(e) {
				this.current = e.index
				this.search()
			},

			details(item) {
				let id = this.current == 0 ? item.goodsId : item.deviceId;
				let title = this.current == 0 ? item.goodsName : item.deviceName ? item.deviceName : item.deviceId;
				this.$tab.navigateTo(`/pages/replenish/invSearchDetail?type=${this.current}&id=${id}&title=${title}`)
			},
		}
	}
</script>
<style scoped lang="scss">
	.container {
		.empty {
			margin-top: 40%;
		}

		.martop {
			margin-top: 20rpx;
		}

		.search {
			padding: 24rpx 13rpx;
			background-color: #fff;
		}

		.tab-wrap {
			background-color: #fff;

			.tab {
				// width: 40%;
			}
		}

		.marleft {
			margin-left: 10rpx;
		}

		.scrollview {
			overflow: hidden;
		}

		.screen-container {
			background-color: #fff;
			padding: 30rpx 13rpx;

			>view:nth-child(1) {
				font-size: 28rpx;
				font-weight: 500;
			}
		}

		.equipment-container {
			margin: 13rpx 13rpx 0;
			padding: 12rpx 20rpx 24rpx;
			border-radius: 14rpx;
			background-color: #fff;
			box-shadow: 0px 0px 10rpx 0px rgba(174, 201, 255, 0.2);
			position: relative;

			.sb-box {
				padding: 24rpx 18rpx;
				background-color: #f5f8fb;
				border-radius: 8rpx;
				margin-top: 12rpx;
			}

			.title {
				height: 60rpx;
				line-height: 60rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #333;

				>text {
					font-size: 24rpx;
					color: #333;
				}
			}

			.order-detail-item {
				font-size: 28rpx;
				margin-top: 12rpx;
				color: #777;

				>view {
					display: inline-block;
					width: 170rpx;
				}
			}

			.percent {
				position: absolute;
				right: 40rpx;
				bottom: 20rpx;
				line-height: 140rpx;
				color: red;

				>view {
					color: #777;
				}
			}
		}

		.popup-container {
			padding: 20rpx;
		}
	}
</style>