uniapp-shirt-fabric-scan/pages/production-replenishment/search.vue

<template>
	<view class="table-container">
		<!-- 查询框 -->
		<view class="container">
			<view class="search-container">
				<uni-easyinput prefixIcon="search" v-model="BillNo" 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-x scroll-y @scroll="onScroll">
			<!-- 表头 -->
			<view class="table-header" ref="tableHeader">
				<view class="table-cell1">工作中心</view>
				<view class="table-cell">作业申请人</view>
				<view class="table-cell"
					style="background-color: #f0f0f0;font-weight: bold;border-bottom: 1px solid #ccc;">仓管员</view>
				<view class="table-cell1"
					style="background-color: #f0f0f0;font-weight: bold;border-bottom: 1px solid #ccc;">单据编号</view>
				<view class="table-cell"
					style="background-color: #f0f0f0;font-weight: bold;border-bottom: 1px solid #ccc;">单据日期</view>
				<view class="table-cell"
					style="background-color: #f0f0f0;font-weight: bold;border-bottom: 1px solid #ccc;">备注</view>
			</view>

			<!-- 表格内容 -->
			<view class="table-body">
				<checkbox-group @change="checkboxChange">
					<view class="table-row" v-for="(item, index) in BillList" :key="item.FID">
						<view class="table-cell1-1">
							<checkbox :value="item.FID" :checked="item.checked" />
							{{ item["FWorkCenterId.LT.fname"]}}
						</view>
						<view class="table-cell">{{ item["FApplicantId.fname"] }}</view>
						<view class="table-cell">{{ item["FSTOCKERID.fname"] }}</view>
						<view class="table-cell1-1">{{ item["FBillNo"] }}</view>
						<view class="table-cell">{{ item["FDate"].substring(0, 10) }}</view>
						<view class="table-cell">{{ item["FDescription"] }}</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
	} from '../../api/production_replenishment';
	import modal from '../../plugins/modal';
	import {
		audioUrls,
		playVoice
	} from '../../utils/audio';
	import {
		getBillDetailListParam,
		getBillDetailParam,
		getSearchParam
	} from '../../utils/params';
	export default {
		data() {
			return {
				BillNo: '',
				range: [], //正式
				// range: ["2024-07-27",
				// 	"2024-07-27"
				// ], //测试
				selected: [], // 保存每个数据项是否被选中的状态
				// isRangeSelected: true // 标记是否选择了日期范围，默认为 true
				BillList: [],
				BillDetailList: [],
				// filteredData: [] // 过滤后的数据
			};
		},
		computed: {

		},
		created() {
			this.initializeRange();
		},
		methods: {
			initializeRange() {
				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)
			},
			submit() {
				if (this.selected.length === 0) {
					modal.msgError("请先选择")
					playVoice(audioUrls.failVoiceUrl)
					return;
				}
				let self = this
				const selectedFID = this.selected.join(',')
				const condition = {
					"selectedFID": selectedFID
				}
				const billDetailListParam = getBillDetailListParam(condition)
				getBillDetailList(JSON.stringify(billDetailListParam)).then(
					res => {
						console.log(res)
						this.BillDetailList = res
						uni.navigateBack({
							success: function() {
								// 传递数据给上一页
								uni.$emit('search', self.BillDetailList);
							}
						});

					}
				)

			},
			goBack() {
				uni.navigateBack();
			},
			search() {
				console.log(this.range)
				// 检查是否选择了日期范围
				if (this.range.length === 0) {
					modal.msgError("请选择日期范围")
					playVoice(audioUrls.failVoiceUrl)
					return;
				}
				const condition = {
					"FStockOrgId": uni.getStorageSync('FStockOrgId'),
					"billNo": this.BillNo,
					"range": this.range
				}
				console.log(condition)
				const searchParam = getSearchParam(condition)
				console.log(searchParam)
				modal.loading('获取数据中，请耐心等待...')
				getBillList(JSON.stringify(searchParam)).then(
					res => {
						modal.closeLoading()

						console.log(res)
						if (res.length === 0) {
							console.log("dafafadf")
							modal.msg("请确认输入条件有效！")
							playVoice(audioUrls.failVoiceUrl)
							return
						}
						// 使用 Set 和 JSON.stringify 进行去重,会获取到明细数据
						let uniqueArray = Array.from(new Set(res.map(item => JSON.stringify(item)))).map(item =>
							JSON.parse(item))
						console.log(uniqueArray)
						this.BillList = uniqueArray
					}
				)
			}
		}
	};
</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 {
		min-width: 150px;
		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 {
		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; */
	}
</style>