logpm/pagesTask/pages/storageLocationCheckDetails/storageLocationCheckDetails.vue

<template>
	<BasicContainer :option="option">
		<!-- 主体内容 -->
		<view class="main">
			<!-- 顶部 -->
			<view class="main_top">
				<input type="text" 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)">
					定制品（{{300}}）
				</view>
				<view :class="{'tabBar-item': true, 'active': tabBarCode === 2}" @click="handleTabBarCode(2)">
					零担（{{1000}}）
				</view>
				<view :class="{'tabBar-item': true, 'active': tabBarCode === 3}" @click="handleTabBarCode(3)">
					库存品（{{100}}）
				</view>
			</view>

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

			<!-- 按库位盘点 -->
			<!-- 表格 -->
			<template v-if="renderList.length !== 0">
				<view class="list" v-for="(item, index) in renderList" :key="item">
					<view class="leftIcon">
						<image class="checkImage"
							:src="checkindex.indexOf(index)!=-1?'/pagesHome/static/check.png':'/pagesHome/static/nocheck.png'">
						</image>
					</view>

					<!-- 定制品 -->
					<template v-if="tabBarCode === 1">
						<view class="rightMsg">
							<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">
								<image src="/pagesHome/static/kuweiicon.png"></image>
								<view>运单号：{{item.waybillNo}}</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>仓库地址：{{dtilobj.warehouseName}}</view>
							</view>
							<view class="tpbx">
								<image src="/pagesHome/static/kuweiicon.png"></image>
								<view>库位信息：{{dtilobj.areaTitle + '-' + dtilobj.allocationTitle}}</view>
							</view> -->
						</view>
					</template>

					<!-- 库存品 -->
					<template v-else-if="tabBarCode === 3">
						<view class="rightMsg">
							<view class="tpbx">
								<image src="/pagesHome/static/kuweiicon.png"></image>
								<view>物料编码：{{item.materialCode}}</view>
							</view>
							<view class="tpbx">
								<image src="/pagesHome/static/kuweiicon.png"></image>
								<view>物料名称：{{item.materialName}}</view>
							</view>
							<!-- <view class="tpbx">
								<image src="/pagesHome/static/kuweiicon.png"></image>
								<view>仓库地址：{{dtilobj.warehouseName}}</view>
							</view>
							<view class="tpbx">
								<image src="/pagesHome/static/kuweiicon.png"></image>
								<view>库位信息：{{dtilobj.areaTitle + '-' + dtilobj.allocationTitle}}</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.marketName}}</view>
							</view>
							<view class="tpbx">
								<image src="/pagesHome/static/kuweiicon.png"></image>
								<view>批次号：{{item.incomingBatch}}</view>
							</view>
						</view>
					</template>
				</view>
			</template>

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

</template>

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

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

	const details = reactive({
		// 页面标题
		title: '',
		// 选项卡页码
		tabBarCode: 1,
		// 是否显示控件
		showControl: false,
		// 扫描后的值
		scancode: '',
		// 渲染的列表
		renderList: [],
		// 定制品列表
		articleList: [],
		// 库存品列表
		stockList: [],
		// 零担列表
		zeroList: [],
		// 复选框列表
		checkindex: [],
		// 零担复选框列表
		articleCheckList: [],
		// 库存品复选框列表
		stockCheckList: [],
		// 零担复选框列表
		zeroCheckList: [],
	})

	const {
		showControl,
		tabBarCode,
		renderList,
		articleList,
		stockList,
		zeroList,
		checkindex
	} = toRefs(details)

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

		// 初始化请求页面数据
		initPage()
	})

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

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

	// 请求页面数据
	function initPage() { }

	// 扫描后执行的回调
	function scandata() { }

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

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

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

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

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

	/**
	 * 批量修改状态
	 */
	function handleBatchState() { }

	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;
				}
			}
		}
	}

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