aiot-app/pages/warehouse/reportLoss/workorderSelected.vue

<template>
	<view class="workorder-selected">
		<uni-nav-bar fixed="true" statusBar="true" left-icon="back" title="选择盘点工单" @clickLeft="back"></uni-nav-bar>
		<view class="search-box">
			<u-input type="text" placeholder="搜索工单号或名称" clearable prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399" v-model="keyWord"></u-input>
		</view>
		<view class="list-wrapper">
			<view class="card" v-for="(item, index) in tableList" :key="index" @click="selected = item" :class="{ selected: selected.id === item.id }">
				<view class="title">{{ item.code }}</view>
				<view>
					<text class="label">计划名称</text>
					{{ item.planName }}
				</view>
				<view>
					<text class="label">产品分类</text>
					{{ item.categoryLevelId }}
				</view>
				<view>
					<text class="label">盘点仓库</text>
					{{ item.warehouseName }}
				</view>
				<view>
					<text class="label">盘点部门</text>
					{{ item.executeGroupName }}
				</view>
				<view>
					<text class="label">盘点人员</text>
					{{ item.executorName }}
				</view>
				<view>
					<text class="label">审核时间</text>
					{{ item.createTime }}
				</view>
				<view class="card-footer">
					<text>盘盈&nbsp;{{ item.surplusQuantity || 0 }}</text>
					<text>盘亏&nbsp;{{ item.wornQuantity || 0 }}</text>
					<text>破损&nbsp;{{ item.loseQuantity || 0 }}</text>
				</view>
			</view>
		</view>
		<u-button class="footer" type="success" @click="confirm">确定选中</u-button>
	</view>
</template>

<script>
	import { getPlanOrderList } from '@/api/warehouseManagement'
	export default {
		data() {
			return {
				keyWord: '',
				tableList: [],
				selected: {}
			}
		},
		onLoad() {
			this._getCheckAbnormalList()
		},
		methods: {
			async _getCheckAbnormalList() {
				uni.showLoading({
					title: '加载中'
				})
				getPlanOrderList({
					pageNum: 1,
					pageSize: 999999,
					keyWord: this.keyWord,
					type: 1
				})
					.then(res => {
						this.tableList = res.list
						console.log(this.tableList)
					})
					.finally(() => {
						uni.hideLoading()
					})
			},
			confirm() {
				if (!this.selected?.id) {
					uni.showToast({
						icon: 'none',
						title: '请选择工单！'
					})
					return
				}
				uni.$emit('getWorkorder', this.selected)
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search-box {
		position: fixed;
		left: 0;
		right: 0;
		padding: 10rpx;
		background-color: #fff;
		.u-input {
			border: 1rpx solid #dadbde;
		}
	}
	.list-wrapper {
		padding: 100rpx 0 80rpx;
		font-size: 28rpx;
		color: #555;
		.card {
			padding: 0 10rpx;
			border-bottom: 8rpx solid #f2f2f2;
			&.selected {
				background-color: rgba(202, 249, 130, 0.380392156862745);
			}
			.title {
				color: #333333;
				font-weight: bold;
				border-bottom: 1rpx solid #f2f2f2;
				font-size: 30rpx;
				padding: 8rpx 0;
			}
			.card-footer {
				border-top: 1rpx solid #f2f2f2;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 15rpx;
			}

			.label {
				color: #aaaaaa;
				margin-right: 20rpx;
			}
		}
	}
	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}
</style>