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">
					<view class="round">{{Number(index)+1}}</view>
					{{ 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 16px 8px 16px;
			border-bottom: 8rpx solid #f2f2f2;

			&.selected {
				background-color: #f5f5f5;
			}

			.title {
				color: #333333;
				font-weight: bold;
				border-bottom: 1rpx solid #f2f2f2;
				font-size: 30rpx;
				padding: 8rpx 0;
				display: flex;
			}

			.round {
				width: 40rpx;
				height: 40rpx;
				line-height: 40rpx;
				border-radius: 50%;
				background: $theme-color;
				color: #fff;
				text-align: center;
				font-size: 20rpx;
				margin-right: 8px;
			}

			.card-footer {
				border-top: 1rpx solid #f2f2f2;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-top: 16rpx;
			}

			.label {
				// color: #aaaaaa;
				margin-right: 20rpx;
				line-height: 24px;
			}
		}
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}
</style>