uniapp-shirt-fabric-scan/pages/direct-transfer/show.vue

<template>
	<view>
		<view v-if="!isCreate">
			<uni-section title="">
				<view class="example">
					<uni-forms ref="form" :modelValue="item" labelWidth="80px" :rules="rules">
						<uni-forms-item label="装箱单号" name="FBillNo">
							<uni-easyinput v-model="item['FENCHASENUM.LT']" disabled>
							</uni-easyinput>
						</uni-forms-item>
						<uni-forms-item label="调拨数量" name="FQty">
							<uni-easyinput v-model="item['FQty']" />
						</uni-forms-item>
					</uni-forms>
					<button type="primary" @click="submit()">确认</button>
				</view>
			</uni-section>
		</view>

		<view class="table-container" v-else>
			<!-- 查询框 -->
			<view class="container">
				<view class="search-container">
					<uni-easyinput prefixIcon="search" v-model="stockLocNum" placeholder="请输入仓位"
						style="margin-right: 5px;">
					</uni-easyinput>
					<button class="search-button" @click="search">查询</button>
				</view>
				<!-- <view style="padding:0 5px 2px 5px;">
						<uni-datetime-picker v-model="range" type="daterange" @maskClick="maskClick" />
					</view> -->
			</view>
			<!-- 表格容器 -->
			<scroll-view class="table-scroll" scroll-y @scroll="onScroll">
				<!-- 表头 -->
				<view class="table-header" ref="tableHeader">
					<view class="table-cell1">仓位编号</view>
				</view>
				<!-- 表格内容 -->
				<view class="table-body">
					<view class="table-row" v-for="(item, index) in stockList" :key="item.FStockLocNum">
						<view class="checkbox-container">
							<checkbox :value="item.FStockLocNum" :checked="item.checked"
								@tap="handleCheckboxClick(item.FStockLocNum)" />
							<view style="display: flex; justify-content: center; align-items: center;">
								{{ item.FStockLocNum}}({{item.FQty}})
							</view>
						</view>
					</view>
				</view>
			</scroll-view>

			<!-- 底部按钮 -->
			<view class="bottom-bar">
				<button class="mini-btn button" type="primary" size="default" @click="stockSubmit">确定</button>
				<button class="mini-btn button" type="warn" size="default" @click="goBack">取消</button>
			</view>

		</view>


	</view>
</template>

<script>
	import {
		getInfoByBarcode,
		getStockInfo,
		Querylocation
	} from '../../api/production_replenishment';
	import modal from '../../plugins/modal';
	import {
		playVoice,
		audioUrls
	} from '@/utils/audio.js'
	// import modal from '../../uni_modules/uview-ui/libs/config/props/modal';
	export default {
		onLoad(option) {
			this.formId = uni.getStorageSync("formId")
			const isCreate = JSON.parse(decodeURIComponent(option.isCreate))
			const item = JSON.parse(decodeURIComponent(option.item))
			const index = JSON.parse(decodeURIComponent(option.index))
			console.log(item)
			console.log(index)
			
			this.isCreate = isCreate
			this.item = item
			this.index = index
		},
		data() {
			return {
				isCreate: false,
				stockList: [],
				selectedItemId: '',
				stockLocNum: '',
				formId: '',
				item: {},
				index: '',
				isReplace: false,
				rules: {
					FQty: {
						rules: [{
								required: true,
								errorMessage: '请输入调拨数量',
							},

						]
					},
				},
			};
		},
		computed: {

		},
		methods: {
			handleError(error) {
				playVoice(audioUrls.failVoiceUrl)
				console.error('操作失败:', error);
				modal.confirm(error).then(res => {
					if (res) {} else {}
				})
			},
			submit() {
				console.log(this.item)
				this.$refs.form.validate().then(res => {

					this.item["index"] = this.index
					let self = this
					uni.navigateBack({
						success: function() {
							// 传递数据给上一页
							uni.$emit('item', self.item);
						}
					});
				}).catch(err => {
					console.log(err);
				})

			},
			async stockSubmit() {
				if (this.selectedItemId == null) {
					modal.msgError("请选择仓位")
					playVoice(audioUrls.failVoiceUrl)
					return
				}
				this.item['FDestStockId.FNumber'] = this.item["FStockId.FNumber"]
				this.item['FDestStockLocId.FF102029.FNumber'] = this.selectedItemId
				let self = this
				console.log(self.item)
				uni.navigateBack({
					success: () => {
						uni.$emit('selectStock', self.item);
					}
				});
			},
			goBack() {
				uni.navigateBack();
			},
			search() {
				modal.loading('获取数据中，请耐心等待...')
				let data = {
					usertoken: "99302b4923aa42298c5922b7b68bcff9",
					stockNum: this.item["FStockId.FNumber"],
					stockLocNum: this.stockLocNum
				}
				Querylocation(data).then(res => {
					console.log(res);
					this.handleResponse(res)
				})
			},
			onScroll(e) {
				const scrollLeft = e.detail.scrollLeft;
				this.headerLeft = -scrollLeft; // 更新表头左侧位置，实现横向滚动时的对齐效果
			},
			checkboxChange: function(e) {
				console.log(e)
				var items = this.BillList,
					values = e.detail.value;
				console.log(values)
				this.selected = values
				console.log(this.selected)
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if (values.includes(item.FID)) {
						this.$set(item, 'checked', true)
					} else {
						this.$set(item, 'checked', false)
					}
				}
				console.log(items)
			},
			handleResponse(res) {
				// 关闭加载提示
				modal.closeLoading();
				// 检查响应是否为空
				if (res.length === 0) {
					modal.msg("请确认输入条件有效！");
					playVoice(audioUrls.failVoiceUrl);
					return;
				}
				// 处理数据去重并更新状态
				this.updateStockList(res);
			},
			updateStockList(data) {
				
				this.stockList = data.results;
				console.log(this.stockList)
			},
			handleCheckboxClick(itemId) {
				console.log(itemId)
				// 取消之前选中的项
				if (this.selectedItemId === itemId) {
					this.selectedItemId = null;
					this.stockList.forEach(item => {
						item.checked = false;
					});
					console.log(this.stockList)
				} else {
					// 更新选中项
					this.selectedItemId = itemId;
					this.stockList.forEach(item => {
						item.checked = (item.FStockLocNum === itemId);
					});
					console.log(this.stockList)
				}
				console.log(this.selectedItemId)
				this.$forceUpdate()
			},

		}
	};
</script>
<style>
	/deep/ .is-disabled {
		background-color: #ffffff !important;
		color: #0d0d0d !important;
	}

	.example {
		padding-left: 10px;
		padding-right: 10px;
		background-color: #fff;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;
	}

	.table-container {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;



	}

	.search-container {
		display: flex;
		/* justify-content: flex-start; */
		flex-direction: row;
		align-items: center;
		padding: 5px;
		/* border-bottom: 1px solid #ccc; */
		flex-wrap: wrap;
	}

	.search-button {
		/* padding: 8px 16px; */
		border: none;
		border-radius: 4px;
		background-color: #007bff;
		color: #fff;
		cursor: pointer;
	}

	.table-scroll {
		/* position: absolute; */
		flex: 1;
		overflow-x: auto;
		overflow-y: hidden;
	}

	.table-header {
		position: sticky;
		top: 0;
		background-color: #f0f0f0;
		font-weight: bold;
		border-bottom: 1px solid #ccc;
		display: flex;
		z-index: 1;
		/* 确保表头在内容之上 */
	}

	.table-cell1 {
		width: 100%;
		padding: 10px;
		text-align: center;
		border-right: 1px solid #ccc;
	}

	.table-cell1-1 {
		min-width: 150px;
		padding: 10px;
		text-align: left;
		border-right: 1px solid #ccc;
	}

	.table-cell {
		min-width: 100px;
		padding: 10px;
		text-align: center;
		border-right: 1px solid #ccc;
	}

	.header-cell {
		border-right: none;
		/* 取消最后一列的右边框 */
	}

	.table-body {
		flex: 1;
		/* width: fit-content; */
		/* 使内容宽度适应内容的宽度 */
	}

	.table-row {
		width: 100%;
		/* display: flex; */
		border-bottom: 1px solid #ccc;
	}

	.checkbox {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.bottom-bar {
		display: flex;
		/* justify-content: center; */
		justify-content: flex-end;
		/* 将按钮靠右对齐 */
		align-items: center;
		/* padding: 10px; */
		padding: 3px;
		background-color: #f0f0f0;
		position: fixed;
		  bottom: 0;
		  left: 0;
		  width: 100%;
		  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); /* 可选：添加阴影效果 */
		  z-index: 1000; /* 确保按钮组在其他内容之上 */
	}

	.button {
		margin: 0 10px;
		/* padding: 10px 20px; */
	}

	.checkbox-container {
		width: 100%;
		padding: 10px;
		/* text-align: center; */
		border-right: 1px solid #ccc;
		display: flex;
		align-items: center;
		/* 	margin-left: 10px;
		margin-right: 10px; */
		/* 可根据需要调整间距 */
	}
</style>