aiot-app/pages/warehouse/workOrder/components/goodsAllocation.vue

<template>
	<!-- 选择货位 -->
	<view class="assign-container">
		<u-popup :show="popShow" @close="close">
			<view class="main">
				<view class="tag-wrap">
					<view class="item" v-for="item in tag" :key="item.name">
						<view class="tag" :class="item.color">
						</view>
						<view class="label">
							{{item.name}}
						</view>
					</view>
				</view>

				<view class="hw-wrap">
					<view class="item" @click="handlCurrent(item)"
						:class="[dict.type[item.allocationStatus],item.goodsAllocationId == current.goodsAllocationId ? 'active' :'']"
						v-for="(item,index) in dataInfo" :key="index">
						{{item.goodsAllocationCode}}
					</view>
				</view>

				<view class="fixed-bottom">
					<view class="item" @click="close">
						取消
					</view>
					<view class="item s1" @click="confirm">
						确定
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		post,
		get,
		postJ
	} from '@/utils/api.js'

	export default {
		props:{
			dataInfo:{
				type:Array,
				default(){
					return []
				}
			}
		},
		data() {
			return {
				popShow: false,
				tag: [{
						name: '空置',
						color: 'kz'
					},
					{
						name: '在用',
						color: 'zy'
					},
					{
						name: '已满',
						color: 'ym'
					},
					{
						name: '失效',
						color: 'sx'
					}
				],
				dataList: [{
						name: 'D002',
						id: 1,
						type: 0
					},
					{
						name: 'D003',
						id: 2,
						type: 1
					},
					{
						name: 'D004',
						id: 3,
						type: 2
					},
					{
						name: 'D001',
						id: 4,
						type: 3
					},
				],
				current: '',
				dict: {
					type: {
						1: 'kz',
						2: 'zy',
						3: 'ym',
						4: 'sx',
					}
				}
			}
		},
		created() {

		},
		methods: {
			open() {
				this.popShow = true
			},
			close() {
				this.popShow = false
				// 重置
				this.current = ''
			},
			handlCurrent(item) {
				if(item.type == 3 || item.type == 4){
					uni.showToast({
						title: '货位已满或失效',
						icon: 'none'
					})
					return
				}
				this.current = item
			},
			confirm() {
				if(!this.current){
					uni.showToast({
						title: '请选择货位',
						icon: 'none'
					})
				}
				this.$emit('succeed',{
					data:this.current
				})
				this.close()
			},
		}
	}
</script>

<style lang="scss" scoped>
	$cols: 5; // 列数
	$marginWidth: 10rpx; // 间隔

	.main {
		padding: 20rpx;
		position: relative;

		.kz {
			background: #caf982;
		}

		.zy {
			background: #81d3f8;
		}

		.ym {
			background: #ff0e0e;
		}

		.sx {
			background: #d7d7d7;
		}

		.tag-wrap {
			display: flex;
			justify-content: center;
			margin-bottom: 20rpx;

			.item {
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 0 10rpx;

				.tag {
					width: 26rpx;
					height: 26rpx;
				}

				.label {
					font-size: 28rpx;
					color: #333;
					margin-left: 10rpx;
				}
			}
		}

		.hw-wrap {
			display: flex;
			flex-wrap: wrap;
			align-content: flex-start;
			min-height: 300rpx;
			max-height: 800rpx;
			overflow-y: auto;

			.item {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 90rpx;
				width: calc((100% - #{($cols - 1) * $marginWidth}) / #{$cols});
				margin-left: $marginWidth;
				margin-bottom: $marginWidth;
				box-sizing: border-box;

				&.active {
					border: 4rpx solid #b8741a;
				}
			}

			.item:nth-of-type(#{$cols}n + 1) {
				margin-left: 0;
			}
		}
	}

	.fixed-bottom {
		margin-top: 20rpx;
		background-color: #fff;
		width: 100%;
		box-sizing: border-box;
		display: flex;
		border: 1px solid #157a2c;

		.item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 80rpx;
			font-size: 28rpx;
			color: #333;

			&.s1 {
				background-color: #157a2c;
				color: #fff;
			}
		}
	}
</style>