logpm/pagesTask/pages/storageLocationCheckDetails/storageLocationCheckDetails.vue

<template>
	<BasicContainer :option="option">
		<!-- 主体内容 -->
		<view class="main">
			<!-- 顶部 -->
			<view class="main_top">
				<input type="text" v-model="details.searchText" placeholder="请输入库位码" class="main_top_search" />
				<view class="button" @click="submitSearch">搜索</view>
			</view>

			<!-- 库位信息 -->
			<view class="main_info">
				<view class="main_info_row">
					<view class="main_info_item">
						<text>库位号:</text>
						<text>{{1}}</text>
					</view>
				</view>
				<view class="main_info_row">
					<view class="main_info_item">
						<text>库位总数:</text>
						<text>{{1}}</text>
					</view>
					<view class="main_info_item">
						<text>库位已盘数:</text>
						<text>{{1}}</text>
					</view>
					<view class="main_info_item">
						<text>库位未盘数:</text>
						<text>{{1}}</text>
					</view>
				</view>
			</view>


			<!-- tabBar选项卡 -->
			<view class="tabBar">
				<view :class="{'tabBar-item': true, 'active': tabBarCode === 1}" @click="handleTabBarCode(1)">
					定制品（{{article.total}}）
				</view>
				<view :class="{'tabBar-item': true, 'active': tabBarCode === 2}" @click="handleTabBarCode(2)">
					零担（{{zero.total}}）
				</view>
				<view :class="{'tabBar-item': true, 'active': tabBarCode === 3}" @click="handleTabBarCode(3)">
					库存品（{{stock.total}}）
				</view>
			</view>

			<!-- 控件 -->
			<view class="control">
				<view class="button" @click="showControl = true" v-show="!showControl">批量操作</view>
				<template v-if="showControl">
					<view class="button" @click="handleInvertSelection">反选</view>

					<view class="controlList">
						<view class="button" @click="handleBatchDel">
							批量删除
						</view>
						<view class="button" @click="handleBatchUp">
							批量上架
						</view>
						<view class="button" @click="handleBatchState">
							状态修改
						</view>
					</view>
				</template>
			</view>

			<!-- 列表 -->
			<scroll-view class="scvmabx" @scrolltolower="reachBottomInitPage" scroll-y="true" @touchmove.stop>
				<!-- 按库位盘点 -->
				<template v-if="renderList.length !== 0">
					<view class="list" v-for="(item, index) in renderList" :key="item">
						<!-- 复选框 -->
						<view class="leftIcon">
							<!-- 定制品 -->
							<template v-if="tabBarCode === 1">
								<image class="checkImage" @click="articleCheckList[index] = !articleCheckList[index]"
									:src="articleCheckList[index]?'/pagesHome/static/check.png':'/pagesHome/static/nocheck.png'">
								</image>
							</template>
							<!-- 零担 -->
							<template v-if="tabBarCode === 2">
								<image class="checkImage" @click="zeroCheckList[index] = !zeroCheckList[index]"
									:src="zeroCheckList[index]?'/pagesHome/static/check.png':'/pagesHome/static/nocheck.png'">
								</image>
							</template>
							<!-- 库存品 -->
							<template v-if="tabBarCode === 3">
								<image class="checkImage" @click="stockCheckList[index] = !stockCheckList[index]"
									:src="stockCheckList[index]?'/pagesHome/static/check.png':'/pagesHome/static/nocheck.png'">
								</image>
							</template>
						</view>

						<!-- 定制品 -->
						<template v-if="tabBarCode === 1">
							<view class="rightMsg">
								<view class="tpbx">
									<view style="flex: none;">
										操作:
									</view>
									<view style="display: flex; justify-content: space-between;">
										<text>处理</text>
										<text>上架</text>
									</view>
								</view>
								<view class="tpbx">
									<image src="/pagesHome/static/kuweiicon.png"></image>
									<view>包条码：{{item.serviceNum}}</view>
								</view>
								<view class="tpbx">
									<image src="/pagesHome/static/kuweiicon.png"></image>
									<view>合同号：{{item.orderCode}}</view>
								</view>
								<view class="tpbx">
									<image src="/pagesHome/static/kuweiicon.png"></image>
									<view>库位：{{item.orderCode}}</view>
								</view>
								<view class="tpbx">
									<image src="/pagesHome/static/kuweiicon.png"></image>
									<view>状态：{{item.orderCode}}</view>
								</view>
							</view>
						</template>

						<!-- 零担 -->
						<template v-else-if="tabBarCode === 2">
							<view class="rightMsg">
								<view class="tpbx">
									<view style="flex: none;">
										操作:
									</view>
									<view style="display: flex; justify-content: space-between;">
										<text>处理</text>
										<text>上架</text>
									</view>
								</view>
								<view class="tpbx">
									<image src="/pagesHome/static/kuweiicon.png"></image>
									<view>物料编码：{{item.serviceNum}}</view>
								</view>
								<view class="tpbx">
									<image src="/pagesHome/static/kuweiicon.png"></image>
									<view>物料名称：{{item.orderCode}}</view>
								</view>
								<view class="tpbx">
									<image src="/pagesHome/static/kuweiicon.png"></image>
									<view>数量：{{item.orderCode}}</view>
								</view>
								<view class="tpbx">
									<image src="/pagesHome/static/kuweiicon.png"></image>
									<view>库位：{{item.orderCode}}</view>
								</view>
								<view class="tpbx">
									<image src="/pagesHome/static/kuweiicon.png"></image>
									<view>状态：{{item.orderCode}}</view>
								</view>
							</view>
						</template>

						<!-- 库存品 -->
						<template v-else-if="tabBarCode === 3">
							<view class="rightMsg">
								<view class="tpbx">
									<view style="flex: none;">
										操作:
									</view>
									<view style="display: flex; justify-content: space-between;">
										<text>处理</text>
										<text>上架</text>
									</view>
								</view>
								<view class="tpbx">
									<image src="/pagesHome/static/kuweiicon.png"></image>
									<view>订单号：{{item.serviceNum}}</view>
								</view>
								<view class="tpbx">
									<image src="/pagesHome/static/kuweiicon.png"></image>
									<view>运单号：{{item.orderCode}}</view>
								</view>
								<view class="tpbx">
									<image src="/pagesHome/static/kuweiicon.png"></image>
									<view>数量：{{item.orderCode}}</view>
								</view>
								<view class="tpbx">
									<image src="/pagesHome/static/kuweiicon.png"></image>
									<view>库位：{{item.orderCode}}</view>
								</view>
								<view class="tpbx">
									<image src="/pagesHome/static/kuweiicon.png"></image>
									<view>状态：{{item.orderCode}}</view>
								</view>
							</view>
						</template>
					</view>
				</template>
			</scroll-view>

			<!-- 提交 -->
			<button @click="submitCheck" class="submitButton" type="primary">提交盘点</button>
		</view>
		<saomiao2></saomiao2>
		<tiplist ref="tiplists"></tiplist>
	</BasicContainer>
</template>

<script setup lang="ts">
	import {
		onShow,
		onLoad,
		onHide,
	} from '@dcloudio/uni-app'
	import { ref, reactive, toRefs, watch } from "vue";

	import {
		getWarehouseTaskAllocationDetailByStrip,
	} from '@/api/user.js';

	const option = reactive({
		// 页面标题
		title: '库位盘点',
		isEnd: false,
		haveData: true,
		async pullDownRefreshInitPage() {
			console.log('下拉刷新')
			// 页面信息清空
			article.articleList = []
			return initPage()
		},
		async reachBottomInitPage() {
			console.log('触底加载')

			return true
		}
	})

	const details = reactive({
		// 选项卡页码
		tabBarCode: 1,
		// 是否显示控件
		showControl: false,
		// 搜索框的值
		searchText: '',
		// 扫描后的值
		scancode: '',
		// 是否为扫描
		isScan: false,
		// 渲染的列表
		renderList: [],
	})

	// 定制品
	const article = reactive({
		// 定制品列表
		articleList: [],
		// 定制品复选框列表
		articleCheckList: [],
		articlePage: {
			current: 1,
			size: 10,
		},
		total: 0
	})

	// 零担
	const zero = reactive({
		// 零担列表
		zeroList: [],
		// 零担复选框列表
		zeroCheckList: [],
		zeroPage: {
			current: 1,
			size: 10,
		},
		// 总数
		total: 0
	})

	// 库存品
	const stock = reactive({
		// 库存品列表
		stockList: [],
		// 库存品复选框列表
		stockCheckList: [],
		stockPage: {
			current: 1,
			size: 10,
		},
		total: 0
	})

	const {
		showControl,
		tabBarCode,
		renderList,
	} = toRefs(details)

	const {
		articleList,
		articleCheckList,
	} = toRefs(article)

	const {
		zeroList,
		zeroCheckList,
	} = toRefs(zero)

	const {
		stockList,
		stockCheckList,
	} = toRefs(stock)

	const tiplists = ref(null)

	// 页面初始化执行回调
	onLoad((_info) => {
	})

	// 开启监听扫描
	onShow(() => {
		uni.$on('scancodedate', function (code) {
			if (code) {
				// console.log(code);
				details.scancode = code
				scandata()
			}
		})
	})

	// 关闭扫描监听
	onHide(() => {
		uni.$off('scancodedate')
	})

	// 添加防抖函数
	let antiShake : any = null
	// 触底加载
	function reachBottomInitPage() {
		// 数据请求完毕, 不再请求
		if (option.isEnd) {
			return uni.showToast({
				icon: 'success',
				title: '数据已加载完毕'
			})
		}
		if (antiShake) {
			uni.hideLoading()
			// 清空定时器
			clearTimeout(antiShake)
			return antiShake = null
		}
		// 显示Loading, 并阻止点击屏幕
		uni.showLoading({
			title: '正在加载',
			mask: true
		})
		antiShake = setTimeout(async () => {
			// 触底请求
			console.log('触底')
			// 定制品
			if (tabBarCode.value === 1) { initPage() }
			// 零担
			if (tabBarCode.value === 2) { initPage() }
			// 库存品
			if (tabBarCode.value === 3) { initPage() }

			// 关闭Loading效果
			uni.hideLoading()
			// 清空定时器
			antiShake = null
		}, 1000)
	}

	// 请求页面数据
	async function initPage() {
		// 请求定制品数据
		if (tabBarCode.value === 1) return initArticle()
		// 请求零担数据
		if (tabBarCode.value === 2) return initZero()
		// 请求库存品数据
		if (tabBarCode.value === 3) return initStock()
	}

	/**
	 * 请求定制品数据
	 */
	async function initArticle() {
		const submitData = {
			code: details.searchText,
			...article.articlePage,
			type: 1
		}

		// 当提交为扫码时
		if (details.isScan) {
			submitData.type = 2
			submitData.code = details.scancode
		}
		try {
			const res = await getWarehouseTaskAllocationDetailByStrip(submitData)
			console.log('res :>> ', res);
			const { code, data } = res
			if (code === 200) {
				article.total = data.total
				article.articleList = [{}, {}]
			}
		} catch (err) {
			console.log('err :>> ', err);
			//TODO handle the exception
		}
	}

	/**
	 * 请求零担数据
	 */
	function initZero() { }

	/**
	 * 请求库存品数据
	 */
	function initStock() { }

	// 扫描后执行的回调
	function scandata() {
		details.isScan = true
		initPage()
	}

	// 改变选项卡激活状态
	function handleTabBarCode(code : number) {
		showControl.value = false
		tabBarCode.value = code
	}

	/**
	 * 提交搜索请求
	 */
	function submitSearch() { }

	/**
	 * 提交盘点
	 */
	function submitCheck() { }

	/**
	 * 复选框反选
	 */
	function handleInvertSelection() {
		if (tabBarCode.value === 1) {
			articleCheckList.value = articleCheckList.value.map(val => !val)
			return
		}

		if (tabBarCode.value === 2) {
			zeroCheckList.value = zeroCheckList.value.map(val => !val)
			return
		}

		if (tabBarCode.value === 3) {
			stockCheckList.value = stockCheckList.value.map(val => !val)
			return
		}
	}

	/**
	 * 批量删除
	 */
	function handleBatchDel() { }

	/**
	 * 批量上架
	 */
	function handleBatchUp() { }

	/**
	 * 批量修改状态
	 */
	function handleBatchState() {
		const list = [{ title: '库内', value: '' }, { title: '库外' }]

		// 零担和库存品
		if (tabBarCode.value !== 1) {
			tiplists.value.setdetails({
				title: '请选择商场',
				isshow: true,
				tipstate: 5,
				list,
				checklist: [],
				inputtext: '',
				confirmTxt: '确认选择',
				isonecheck: true,
				success: (deta) => {
					console.log('deta :>> ', deta);
					if (deta.checklist.length == 0) {
						uni.showToast({
							title: '请选择商场',
							icon: 'none'
						})
						return
					}
					console.log('deta :>> ', deta);
					tiplists.value.setdetails({ isshow: false })
				},
				cancel: () => {
					tiplists.value.setdetails({ isshow: false })
				},
				close: () => {
					tiplists.value.setdetails({ isshow: false })
				}
			})
		} else {
			tiplists.value.setdetails({
				title: '请选择商场',
				isshow: true,
				tipstate: 2,
				list,
				checklist: [],
				inputtext: '',
				confirmTxt: '确认选择',
				isonecheck: true,
				success: (deta) => {
					console.log('deta :>> ', deta);
					if (deta.checklist.length == 0) {
						uni.showToast({
							title: '请选择商场',
							icon: 'none'
						})
						return
					}
					console.log('deta :>> ', deta);
					tiplists.value.setdetails({ isshow: false })
				},
				cancel: () => {
					tiplists.value.setdetails({ isshow: false })
				},
				close: () => {
					tiplists.value.setdetails({ isshow: false })
				}
			})
		}
	}

	watch([articleList, zeroList, stockList, tabBarCode], () => {
		// 定制品
		if (tabBarCode.value === 1) {
			return renderList.value = articleList.value
		}
		// 零担
		if (tabBarCode.value === 2) {
			return renderList.value = zeroList.value
		}
		// // 库存品
		if (tabBarCode.value === 3) {
			return renderList.value = stockList.value
		}
	})
</script>

<style lang="scss" scoped>
	$buttonColor: #d3832a;

	// 本页按钮样式
	.button {
		font-size: 28upx;
		padding: 10upx 20upx;
		border: 1upx solid $buttonColor;
		background-color: #fff;
		color: #d3832a;
		border-radius: 5upx;
	}

	.main {
		padding: 10upx;
		font-size: 28upx; // 本页字体大小
	}

	.main_top {
		display: flex;
		// align-items: center;
		justify-content: space-between;
		margin-bottom: 10upx;

		// 顶部搜索框
		&_search {
			flex: 1;
			padding-left: 20upx;
			margin-right: 20upx;
			box-sizing: border-box;
			height: 28upx * 2;
			border-radius: 28upx;
			border: 1upx solid #000;
		}

		.button {
			background-color: $buttonColor;
			color: #fff;
			padding: 0 60upx;
			display: inline-flex;
			align-items: center;
		}
	}

	// 顶部信息区
	.main_info {
		margin-bottom: 10upx;
		padding: 10upx;
		background-color: #fff;

		&_row {
			padding: 10upx 0;
			display: flex;
			justify-content: space-between;
			border-bottom: 2upx solid #000;

			&:last-child {
				border-bottom: none;
			}
		}

		&_item {
			flex: 1;
			flex-basis: 0;
			display: inline-flex;

			text:first-child {
				margin-right: 10upx;
			}
		}
	}

	// tabBar选项卡
	.tabBar {
		display: flex;
		justify-content: space-evenly;
		background-color: #fff;
		margin-bottom: 10upx;

		&-item {
			position: relative;
			flex: 1;
			flex-basis: 0;
			padding: 20upx 0;
			text-align: center;

			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 50%;
				display: block;
				width: 0;
				box-sizing: border-box;
				border: 1upx solid $buttonColor;
				transition: all 0.5s;
			}

			&.active {
				color: $buttonColor;

				&::after {
					left: 0;
					width: 100%;
				}
			}
		}
	}

	// 控件区
	.control {
		display: flex;
		justify-content: space-between;

		.controlList {
			display: flex;

			.button {
				margin: 0 5upx;

				&:last-child {
					margin-right: 0;
				}
			}
		}
	}

	// 滚动区
	.scvmabx {
		width: 100%;
		height: 60vh;
	}

	.list {
		display: flex;
		margin: 20upx 0;
		padding: 0 10upx;
		border-radius: 10upx;
		box-shadow: 0 0 20upx #d3832a;

		.leftIcon {
			flex: none;
			margin-right: 30upx;
			// padding-top: 18upx;

			.checkImage {
				width: 48upx;
				height: 48upx;
			}
		}

		.rightMsg {
			flex: 1;
		}
	}

	// 列表
	.tpbx {
		display: flex;
		align-items: center;
		// padding: 18upx 24upx;
		box-sizing: border-box;
		border-bottom: 4upx solid #EEEEEE;

		>image {
			flex: none;
			width: 64upx;
			height: 64upx;
			margin-right: 15upx;
		}

		>view {
			flex: 1;
			font-size: 28upx;
			font-weight: 400;
			color: #020B18;

			.numb {
				font-size: 28upx;
				color: #178AF2;
			}
		}
	}

	.viewnum {
		height: 100upx;
		display: flex;
		align-items: center;
		justify-content: space-around;

		>view {
			font-size: 28upx;
			font-weight: 400;
			color: #020B18;
		}
	}

	// 提交按钮
	.submitButton {
		position: fixed;
		color: #fff;
		background-color: $buttonColor;
		width: 50%;
		bottom: 30upx;
		left: 50%;
		transform: translateX(-50%);
	}
</style>