aiot-app/pages/pcs/components/OrderListDialog.vue

<!-- OrderListDialog.vue - 订单选择弹窗（UniApp版本） -->
<template>
	<u-popup :show="visible" :round="0" :closeOnClickOverlay="false" :zIndex="99999" @close="handleClose"
		class="order-popup">
		<view class="popup-content">
			<view class="popup-header">
				<text class="popup-title">选择订单</text>
				<view class="close-btn" @click="handleClose">×</view>
			</view>

			<!-- 搜索区域 -->
			<view class="search-wrapper">
				<uni-easyinput prefixIcon="search" style="flex: 1" v-model="keyword" placeholder="订单编码/名称/合同名称">
				</uni-easyinput>
				<button class="search_btn" @click="handleSearch">搜索</button>
			</view>

			<!-- 订单列表 -->
			<scroll-view class="popup-body" scroll-y @scrolltolower="loadMore">
				<view v-for="(item, index) in orderList" :key="item.id" style="position: relative">
					<myCard :item="item" :index="index + 1" :columns="cardColumns" :title="item.orderNo"
						:showRadio="true" :radioValue="selectedId" @radioChange="onRadioChange">
					</myCard>
				</view>
				<view style="width: 100%; height: 40rpx"></view>
				<view style="margin-top: 60rpx" v-if="loading && orderList.length === 0">
					<u-empty iconSize="150" textSize="32" text="加载中..."></u-empty>
				</view>
				<view style="margin-top: 60rpx" v-if="!loading && orderList.length === 0">
					<u-empty iconSize="150" textSize="32" text="暂无订单数据"></u-empty>
				</view>
				<view class="loadmore-text" v-if="!isEnd && orderList.length > 0">加载更多...</view>
				<view class="loadmore-text" v-if="isEnd && orderList.length > 0">没有更多了</view>
			</scroll-view>

			<view class="popup-footer">
				<u-button type="default" @click="handleClose">关闭</u-button>
				<u-button type="primary" @click="confirmSelect">选择</u-button>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</u-popup>
</template>

<script>
	import myCard from './myCard.vue';
	import {
		getPurchaseOrderList
	} from '@/api/purchasingManage/index.js'

	export default {
		components: {
			myCard
		},
		props: {
			searchParams: {
				type: Object,
				default: () => ({})
			},
			isOutsourcing: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				visible: false,
				keyword: '',
				orderList: [],
				selectedId: null,
				selectedOrder: null,
				page: 1,
				size: 10,
				isEnd: false,
				loading: false,
				partbId: '',
				sourceType: '',
				// 卡片展示列配置
				cardColumns: [
					[{
						label: "订单编码",
						prop: "orderNo",
						className: "perce100"
					}],
					[{
						label: "订单类型",
						prop: "sourceTypeName",
						className: "perce50"
					}, {
						label: "金额(元)",
						prop: "payAmount",
						className: "perce50"
					}],
					[{
						label: "名称",
						prop: "productNames",
						className: "perce100"
					}],
					[{
						label: "编码",
						prop: "productCodes",
						className: "perce100"
					}],
					[{
						label: "合同名称",
						prop: "contractName",
						className: "perce100"
					}],
					[{
						label: "供应商",
						prop: "partbName",
						className: "perce50"
					}, {
						label: "采购方",
						prop: "partaName",
						className: "perce50"
					}],
					[{
						label: "创建时间",
						prop: "createTime",
						className: "perce100"
					}]
				]
			};
		},
		methods: {
			// 打开弹窗
			open(partbId, sourceType) {
				this.partbId = partbId;
				this.sourceType = sourceType || '';
				this.selectedId = null;
				this.selectedOrder = null;
				this.orderList = [];
				this.page = 1;
				this.isEnd = false;
				this.keyword = '';
				this.visible = true;
				this.loadOrders();
			},
			// 搜索
			handleSearch() {
				this.page = 1;
				this.orderList = [];
				this.isEnd = false;
				this.loadOrders();
			},
			// 加载订单列表
			async loadOrders() {
				if (this.loading || this.isEnd) return;
				this.loading = true;
				try {
					const where = {};
					if (this.keyword) {
						// 支持订单编码、名称模糊查询
						where.orderNo = this.keyword;
						where.productNames = this.keyword;
						where.contractName = this.keyword;
					}
					if (this.sourceType) {
						where.sourceType = this.sourceType;
					}
					const res = await getPurchaseOrderList({
						pageNum: this.page,
						size: this.size,
						...where,
						orderStatus: 2,
						partbId: this.partbId,
						...this.searchParams
					});
					const list = res.list || [];
					if (this.page === 1) {
						this.orderList = list;
					} else {
						this.orderList.push(...list);
					}
					this.isEnd = list.length < this.size || (this.orderList.length >= res.count);
					this.page += 1;
				} catch (error) {
					console.error('获取订单列表失败', error);
					this.$refs.uToast.show({
						type: 'error',
						message: '加载订单失败'
					});
				} finally {
					this.loading = false;
				}
			},
			// 滚动加载更多
			loadMore() {
				if (!this.isEnd && !this.loading) {
					this.loadOrders();
				}
			},
			// 单选变化
			onRadioChange(item) {
				this.selectedId = item.id;
				this.selectedOrder = item;
			},
			// 确认选择
			confirmSelect() {
				if (!this.selectedOrder) {
					this.$refs.uToast.show({
						type: 'warning',
						message: '请至少选择一条数据'
					});
					return;
				}
				this.$emit('changeParent', this.selectedOrder);
				this.handleClose();
			},
			// 关闭弹窗
			handleClose() {
				this.visible = false;
				this.selectedId = null;
				this.selectedOrder = null;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.order-popup {
		.popup-content {
			width: 100vw;
			height: 85vh;
			background: #fff;
			border-radius: 32rpx 32rpx 0 0;
			display: flex;
			flex-direction: column;
			background-color: #f5f7fb;
		}

		.popup-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
			border-bottom: 2rpx solid #eef2f6;
			background: #fff;

			.popup-title {
				font-size: 36rpx;
				font-weight: bold;
				color: #1f2b3c;
			}

			.close-btn {
				width: 60rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 60rpx;
				color: #8e9aae;
				line-height: 1;
			}
		}

		.search-wrapper {
			display: flex;
			align-items: center;
			padding: 20rpx 30rpx;
			background: #fff;
			border-bottom: 2rpx solid #eef2f6;
			gap: 20rpx;

			.search_btn {
				width: 140rpx;
				height: 70rpx;
				line-height: 70rpx;
				padding: 0;
				background: $theme-color;
				font-size: 28rpx;
				color: #fff;
				margin: 0;
				border-radius: 48rpx;
			}
		}

		.popup-body {
			flex: 1;
			overflow-y: auto;
			padding: 20rpx 24rpx;
			box-sizing: border-box;
		}

		.loadmore-text {
			text-align: center;
			font-size: 26rpx;
			color: #aaa;
			padding: 24rpx 0 40rpx;
		}

		.popup-footer {
			display: flex;
			padding: 20rpx 30rpx 30rpx;
			border-top: 2rpx solid #eef2f6;
			gap: 20rpx;
			background: #fff;

			.u-button {
				flex: 1;
				border-radius: 48rpx;
			}
		}
	}
</style>