uniapp-shirt-fabric-scan/pages/storage/search.vue

<template>
	<view class="table-container">
		<!-- 查询框 -->
		<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">
				<!-- <checkbox-group @change="checkboxChange"> -->
				<view class="table-row" v-for="(item, index) in stockList" :key="item.FStockLocNum">
					<!-- <view class="table-cell1"> -->
					<!-- <checkbox :value="item.FID" :checked="item.checked" />{{ item.FBillNo}} -->
					<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}}
						</view>
					</view>

					<!-- </view> -->

				</view>
				<!-- </checkbox-group> -->
			</view>
		</scroll-view>

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

	</view>
</template>

<script>
	import {
		getBillList,
		getBillDetailList,
		Querylocation
	} from '../../api/production_replenishment';
	import modal from '../../plugins/modal';
	import {
		audioUrls,
		playVoice
	} from '../../utils/audio';
	import {
		getBillDetailListParam,
		getBillDetailParam,
		getSearchParam
	} from '../../utils/newparams.js';
	export default {
		data() {
			return {
				formId: '',
				stockLocNum: '',
				selectedItemId: null,
				range: [], //正式
				// range: ["2024-07-27",
				// 	"2024-07-27"
				// ], //测试
				selected: [], // 保存每个数据项是否被选中的状态
				// isRangeSelected: true // 标记是否选择了日期范围，默认为 true
				stockList: [],
				BillDetailList: [],
				stockNum: ''
				// filteredData: [] // 过滤后的数据
			};
		},
		onLoad(option) {
			console.log(option)
			this.stockNum = option.stockNum
			// this.stageLists = JSON.parse(decodeURIComponent(option.stageInfo))
			console.log(this.stockNum)
		},
		computed: {

		},
		created() {
			this.formId = uni.getStorageSync("formId")
			this.initialDateRange();
		},
		methods: {
			initialDateRange() {
				let today = new Date();
				let formattedDate = today.toISOString().split('T')[0]; // 格式化为 "YYYY-MM-DD"

				// 设置 range 属性为当天日期的数组
				this.range = [formattedDate, formattedDate];
			},
			maskClick(e) {
				console.log('maskClick事件:', e);
			},
			handleChange(index) {
				console.log(index)
				this.filteredData[index].checked = !this.filteredData[index].checked;
			},
			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)
			},
			async submit() {
				if (this.selectedItemId == null) {
					modal.msgError("请选择仓位")
					playVoice(audioUrls.failVoiceUrl)
					return
				}
				this.navigateBack();
			},
			// 返回上一页并传递数据
			navigateBack() {
				uni.navigateBack({
					success: () => {
						uni.$emit('search', this.selectedItemId);
					}
				});
			},
			// 获取请求条件
			createSubmitCondition() {
				return {
					FormId: uni.getStorageSync('formId'),
					selectedFID: this.selected.join(',')
				};
			},
			// 发起请求并获取数据
			fetchBillDetails(billDetailListParam) {
				return getBillDetailList(JSON.stringify(billDetailListParam));
			},
			goBack() {
				uni.navigateBack();
			},
			// 函数来创建条件
			createSearchCondition(range, billNo) {
				return {
					"FormId": uni.getStorageSync('formId'),
					"FBillType": uni.getStorageSync('fbillType'),
					"FStockOrgId": uni.getStorageSync('FStockOrgId'),
					"billNo": billNo,
					"range": range
				};
			},
			search() {
				modal.loading('获取数据中，请耐心等待...')
				let data = {
					usertoken: "99302b4923aa42298c5922b7b68bcff9",
					stockNum: this.stockNum,
					stockLocNum: this.stockLocNum
				}
				Querylocation(data).then(res => {
					console.log(res);
					this.handleResponse(res)
				})
				// console.log(this.range)
				// const condition = this.createSearchCondition(this.range, this.BillNo);
				// const searchParam = getSearchParam(condition)
				// modal.loading('获取数据中，请耐心等待...')
				// getBillList(JSON.stringify(searchParam)).then(
				// 	res => this.handleResponse(res)
				// )
			},
			handleResponse(res) {
				// 关闭加载提示
				modal.closeLoading();
				// 检查响应是否为空
				if (res.length === 0) {
					modal.msg("请确认输入条件有效！");
					playVoice(audioUrls.failVoiceUrl);
					return;
				}
				// 处理数据去重并更新状态
				this.updateStockList(res);
			},
			updateStockList(data) {
				// 使用 Set 和 JSON.stringify 进行去重
				// let uniqueArray = Array.from(new Set(data.map(item => JSON.stringify(item)))).map(item =>
				// 	JSON.parse(item));
				// console.log(uniqueArray);
				console.log(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>
	.table-container {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.container {
		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;
	}

	.search-button:hover {
		background-color: #0056b3;
	}

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

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