uniapp-shirt-fabric-scan/pages/direct-transfer/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" v-if="formId === 'STK_TransferDirect'">

				<view class="table-cell1">单据编号</view>
				<view class="table-cell"
					style="background-color: #f0f0f0;font-weight: bold;border-bottom: 1px solid #ccc;">单据日期</view>
				<view class="table-cell">仓管员</view>
				<view class="table-cell1">备注</view>
			</view>


			<!-- 表格内容 -->
			<view class="table-body" v-if="formId === 'STK_TransferDirect'">
				<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["FBillNo"]}}
						</view>
						<view class="table-cell">{{ item["FDate"].substring(0, 10) }}</view>
						<view class="table-cell">{{ item["FStockerId.FName"] }}</view>
						<view class="table-cell">{{ item["FNoteEntry"] }}</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/transferparams.js';
	export default {
		data() {
			return {
				formId: '',
				BillNo: '',
				range: [], //正式
				// range: ["2024-07-27",
				// 	"2024-07-27"
				// ], //测试
				selected: [], // 保存每个数据项是否被选中的状态
				// isRangeSelected: true // 标记是否选择了日期范围，默认为 true
				BillList: [],
				BillDetailList: [],
				// filteredData: [] // 过滤后的数据
			};
		},
		computed: {

		},
		created() {
			this.formId = uni.getStorageSync("formId")
			console.log(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.selected.length === 0) {
					modal.msgError("请先选择")
					playVoice(audioUrls.failVoiceUrl)
					return;
				}
				try {
					// let self = this
					// 获取请求条件
					const condition = this.createSubmitCondition();
					const billDetailListParam = getBillDetailListParam(condition)
					const res = await this.fetchBillDetails(billDetailListParam)
					this.BillDetailList = res;
					this.navigateBack();
				} catch (error) {
					playVoice(audioUrls.failVoiceUrl)
					console.error('操作失败:', error);
					modal.confirm(error || '操作失败').then(res => {
						if (res) {

						} else {
							// 用户点击取消，不执行任何操作
						}
					})
				}
			},
			// 返回上一页并传递数据
			navigateBack() {
				uni.navigateBack({
					success: () => {
						uni.$emit('search', this.BillDetailList);
					}
				});
			},
			// 获取请求条件
			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() {
				console.log(this.range)
				// 检查是否选择了日期范围
				if (this.range.length === 0) {
					modal.msgError("请选择日期范围")
					playVoice(audioUrls.failVoiceUrl)
					return;
				}
				const condition = this.createSearchCondition(this.range, this.BillNo);
				console.log(condition)
				const searchParam = getSearchParam(condition)
				modal.loadingMask('获取数据中，请耐心等待...')
				getBillList(JSON.stringify(searchParam)).then(
					res => this.handleResponse(res)
					// 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
					// }
				)
			},
			handleResponse(res) {
				// 关闭加载提示
				modal.closeLoading();
				// 检查响应是否为空
				if (res.length === 0) {
					modal.msg("请确认输入条件有效！");
					playVoice(audioUrls.failVoiceUrl);
					return;
				}
				// 处理数据去重并更新状态
				this.updateBillList(res);
			},
			updateBillList(data) {
				// 使用 Set 和 JSON.stringify 进行去重
				let uniqueArray = Array.from(new Set(data.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>