aiot-app/components/WarehouseChoose.vue

<template>
	<view>
		<uni-popup ref="popup" background-color="#fff" :mask-click="false">
			<view class="title">
				选择货位
				<!-- <view class="btn">
					<u-icon name="scan" color="#fff" size="80" @click="handleScan"></u-icon>
				</view> -->
			</view>
			<view class="select-group" :key="forceUpdate">
				<view class="select-col">
					<text class="select-label">仓库</text>
					<picker @change="e => handlePicker(e, warehouseList, 'warehouseName', 'warehouseId')" :disabled="warehouseDisabled" :value="pickerIndex" :range="warehouseList" range-key="name">
						<text class="select-label">{{ formData.warehouseName ? formData.warehouseName : '请选择' }}</text>
						<!-- <u-input :value="formData.warehouseName" disableColor="#ffffff" placeholder="请选择" disabled type="select" /> -->
					</picker>
					<!-- <uni-data-select
            v-model="warehouse"
            v-if="!warehouseDisabled"
            :localdata="warehouseList"
          ></uni-data-select> -->
					<!-- <template v-else> {{ formData.warehouse.name }}</template> -->
				</view>
				<view class="select-col">
					<text class="select-label">库区</text>
					<picker @change="e => handlePicker(e, areaList, 'areaName', 'area')" :value="pickerIndex" :range="areaList" range-key="name" :disabled="!formData.warehouseId">
						<text class="select-label">{{ formData.areaName ? formData.areaName : '请选择' }}</text>
						<!-- <u-input @click.native="areaClick" :value="formData.areaName" disableColor="#ffffff" placeholder="请选择" type="select" /> -->
					</picker>
					<!-- <uni-data-select
            v-model="area"
            :localdata="areaList"
          ></uni-data-select> -->
				</view>
				<view class="select-col">
					<text class="select-label">货架</text>
					<picker @change="e => handlePicker(e, shelvesList, 'shelvesName', 'shelves')" :value="pickerIndex" :range="shelvesList" :disabled="!formData.area" range-key="name">
						<text class="select-label">{{ formData.shelvesName ? formData.shelvesName : '请选择' }}</text>
						<!-- <u-input @click.native="shelvesClick" :value="formData.shelvesName" disableColor="#ffffff" placeholder="请选择" disabled type="select" /> -->
					</picker>
					<!-- <uni-data-select
            v-model="shelves"
            :localdata="shelvesList"
          ></uni-data-select> -->
				</view>
				<view class="select-col">
					<text class="select-label">货位</text>
					<picker @change="e => handlePicker(e, freightList, 'freightName', 'freight')" :value="pickerIndex" :range="freightList" :disabled="!formData.shelves" range-key="name">
						<text class="select-label">{{ formData.freightName ? formData.freightName : '请选择' }}</text>
					</picker>
				</view>
			</view>
			<!-- <scroll-view>
				<view class="content-box" :key="forceUpdate">
					<view
						v-for="p in locationList"
						:key="p.id"
						class="box"
						@click="cur = p"
						:class="{ active: cur.goodsAllocationId == p.goodsAllocationId }"
						:style="{
							'background-color': getStatus(p.allocationStatus).color,
							cursor: [1, 2].includes(p.allocationStatus) ? 'pointer' : 'not-allowed'
						}">
						{{ p.goodsAllocationCode }}
					</view>
					<view class="placeholder-box"></view>
					<view class="placeholder-box"></view>
					<view class="placeholder-box"></view>
					<view class="placeholder-box"></view>
				</view>
			</scroll-view> -->
			<view class="footer">
				<uni-button @tap="cancel">取消</uni-button>
				<uni-button @tap="handleSelect" type="success" class="confim">确认</uni-button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { postJ } from '@/utils/api.js'
	import { getWarehouseList, getWarehouseTrees } from '@/api/warehouseManagement'
	import ScanCode from '@/components/ScanCode.vue'
	const warehouseDefinition_locationStatus = [
		{ id: 1, label: '空置', color: 'rgba(202, 249, 130, 1)' },
		{ id: 2, label: '在用', color: 'rgba(129, 211, 248, 1)' },
		{ id: 3, label: '已满', color: 'rgba(255, 14, 14, 1)' },
		{ id: 4, label: '失效', color: 'rgba(215, 215, 215, 1)' }
	]
	export default {
		components: {
			ScanCode
		},
		props: {
			// 主动关闭
			selfClose: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				treeList: [],
				pickerIndex: 0,
				forceUpdate: false,
				warehouseDisabled: false,
				visible: false,
				value: '',
				row: {},
				cur: {},
				formData: {
					// warehouse: {},
					// area: {},
					// shelves: {},
					warehouseName: '',
					warehouseId: '',
					area: '',
					areaName: '',
					shelves: '',
					shelvesName: '',
					freight: '',
					freightName: ''
				},
				warehouse: '',
				area: '',
				areaName: '',
				shelves: '',
				shelvesName: '',
				warehouseList: [],
				callback: null
			}
		},
		computed: {
			areaList() {
				this.formData.areaName = ''
				this.formData.area = ''
				this.formData.shelvesName = ''
				this.formData.shelves = ''
				console.log('this.treeList-----222----', this.treeList)
				return this.treeList?.length > 0 && this.formData.warehouseId ? this.treeList.filter(item => item.id == this.formData.warehouseId)[0].children : []
				// return (this.warehouseList.find(i => i.id === this.formData.warehouseId)?.wareHouseArea || []).map(i => ({
				// 	name: i.areaName,
				// 	id: i.areaId,
				// 	...i
				// }))
			},
			shelvesList() {
				this.formData.shelvesName = ''
				this.formData.shelves = ''
				console.log('this.formData.area---------', this.formData.area)
				return this.formData.area ? this.areaList.filter(item => item.id == this.formData.area)[0].children : []
				// return (this.areaList.find(i => i.areaId === this.formData.area)?.wareHouseGoodsshelves || []).map(i => ({
				// 	name: i.goodsshelvesCode,
				// 	id: i.goodsshelvesId,
				// 	...i
				// }))
			},
			freightList() {
				this.formData.freightName = ''
				this.formData.freight = ''
				console.log('formData.freight------', this.formData.shelves)
				console.log(this.shelvesList)
				return this.formData.shelves ? this.shelvesList.filter(item => item.id == this.formData.shelves)[0].children : []
			},
			locationList() {
				return (this.shelvesList.find(i => i.goodsshelvesId === this.formData.shelves)?.wareHouseGoodsAllocation || []).map(i => ({
					name: i.goodsAllocationCode,
					id: i.goodsAllocationId,
					...i
				}))
			}
		},

		created() {
			this._getWarehouseChildren()
			this.getTreeData()
		},
		mounted() {},
		methods: {
			async getTreeData() {
				try {
					let res = await getWarehouseTrees({ factoriesId: '1829469035436822529' })
					this.treeList = res
				} catch (error) {
					console.log(error)
				}
			},
			scancodedate(data) {
				this.qrContent = data.code.trim()
				this.getData()
			},
			initScan() {
				this.$store.commit('app/SET_SCANCODEDATE', 'warehouse')
				const _this = this

				uni.$off('warehouse') // 每次进来先 移除全局自定义事件监听器
				uni.$on('warehouse', function (data) {
					_this.qrContent = data.code.trim()
					_this.getData()
				})
			},
			handleScan() {
				const _this = this
				uni.scanCode({
					onlyFromCamera: true,
					success: function (res) {
						console.log('条码类型：' + res.scanType)
						console.log('条码内容：' + res.result)
						_this.isCamera = true
						_this.qrContent = res.result.trim()
						_this.getData()
					}
				})
			},
			open(warehouse, callback) {
				console.log('warehouse--------', warehouse)
				this.cur = {}
				this.formData.areaName = ''
				this.formData.area = ''
				this.formData.shelvesName = ''
				this.formData.shelves = ''
				this.formData.freight = ''
				this.formData.freightName = ''

				if (warehouse) {
					this.formData.type = warehouse.type
					this.formData.warehouseName = warehouse.name
					this.formData.warehouseId = warehouse.id
					this.warehouseDisabled = !!warehouse?.id
				} else {
					this.formData.warehouseName = ''
					this.formData.warehouseId = ''
				}
				this.$refs.popup.open('bottom')
				this.visible = true
				this.initScan()

				this.callback = callback
			},
			openDefault(warehouse, callback) {
				if (warehouse) {
					this.cur = warehouse
					this.cur.goodsAllocationId = warehouse.cargoSpaceId
					this.cur.goodsAllocationCode = warehouse.cargoSpaceCode
					this.formData.warehouseName = warehouse?.warehouseName
					this.formData.warehouseId = warehouse?.warehouseId
					this.$nextTick(() => {
						this.formData.area = warehouse?.areaId || ''
						this.$nextTick(() => {
							this.formData.shelves = warehouse?.shelfId || ''
						})
					})
				}
				this.$refs.popup.open('bottom')
				this.visible = true
				this.initScan()

				this.callback = callback
			},
			shelvesClick() {
				if (!this.formData.area) {
					uni.showToast({
						title: '请先选择库区！',
						icon: 'none'
					})
				}
			},
			areaClick() {
				if (!this.formData.warehouseId) {
					uni.showToast({
						title: '请先选择库区！',
						icon: 'none'
					})
				}
			},
			// 根据条码请求设备数据 @_@
			getData() {
				let par = {
					barType: this.qrContent.split('@_@')[1] || 0,
					qrContent: this.qrContent
				}
				if (!['2', '7'].includes(par.barType)) {
					return uni.showToast({
						title: '请扫描货架或货位码',
						icon: 'none'
					})
				}
				// postJ(this.apiUrl + "/scan/getAssetInfo", par).then((res) => {
				//   let data = res.data;
				//   console.log(data, "qrContent");
				//   this.setWarehosue(data, par.barType);
				// });
			},
			setWarehosue(data, barType) {
				if (this.warehouseDisabled) {
					//  选定仓库
					if (data.warehouseId != this.formData.warehouseId) {
						uni.showToast({
							title: `请扫描${this.formData.warehouseName}下的${barType == 2 ? '货位' : '货架'}`,
							icon: 'none'
						})
						return
					}
				}

				this.cur = {}
				this.formData.area = ''
				this.formData.areaName = ''

				// this.cur.goodsAllocationId = data.cargoSpaceId
				// this.cur.goodsAllocationCode = data.cargoSpaceCode
				this.formData.warehouseName = data?.warehouseName
				this.formData.warehouseId = data?.warehouseId
				this.$nextTick(() => {
					this.formData.area = data?.warehouseAreaId || ''
					this.formData.areaName = data?.warehouseAreaName || ''
					this.$nextTick(() => {
						this.formData.shelves = data?.warehouseAreaGoodsId || data?.id || ''
						this.formData.shelvesName = data?.warehouseAreaGoodsCode || data?.goodsshelvesCode || ''
					})
				})
				if (barType == 2) {
					this.cur = {
						allocationStatus: data.allocationStatus,
						goodsAllocationCode: data.goodsAllocationCode,
						goodsAllocationId: data.id,
						id: data.id
					}
				}
			},
			cancel() {
				this.warehouse = ''
				this.$refs.popup.close()
				this.visible = false
				this.$store.commit('app/RESET_SCANCODEDATE')
			},
			// 抬头下拉信息保存
			handlePicker(e, list, nameKey, idKey) {
				console.log('-------------点击了--')
				if (idKey) {
					this.formData[idKey] = list[e?.detail.value]?.id
				}
				if (nameKey) {
					this.formData[nameKey] = list[e?.detail.value]?.name
				}
			},
			getStatus(id) {
				return warehouseDefinition_locationStatus.find(item => item.id === id) || {}
			},
			handleSelect() {
				const data = {}
				data.warehouseId = this.formData.warehouseId
				data.warehouseName = this.formData.warehouseName

				data.areaId = this.formData.area
				data.areaName = this.formData.areaName

				data.shelfId = this.formData.shelves
				data.shelfCode = this.formData.shelvesName

				data.cargoSpaceId = this.formData.freight
				data.cargoSpaceCode = this.formData.freightName

				this.callback && this.callback(data)
				this.$emit('success', data)
				if (!this.selfClose) {
					this.cancel()
				}
			},
			// handleSelect() {
			// 	if (!this.cur?.id) {
			// 		uni.showToast({
			// 			title: '请选择货位',
			// 			icon: 'none'
			// 		})
			// 		return
			// 	}

			// 	if (this.formData.type == 'out') {
			// 		if (this.cur.allocationStatus === 4) {
			// 			uni.showToast({
			// 				title: '失效的货位无法选择',
			// 				icon: 'none'
			// 			})
			// 			return
			// 		} else if (this.cur.allocationStatus === 1) {
			// 			uni.showToast({
			// 				title: '当前货位无货物!',
			// 				icon: 'none'
			// 			})
			// 			return
			// 		}
			// 	} else if (![1, 2].includes(this.cur.allocationStatus)) {
			// 		uni.showToast({
			// 			title: '已满和失效的货位无法选择',
			// 			icon: 'none'
			// 		})
			// 		return
			// 	}

			// 	const data = {}
			// 	data.warehouseId = this.formData.warehouseId
			// 	data.warehouseName = this.formData.warehouseName

			// 	data.areaId = this.formData.area
			// 	data.areaName = this.formData.areaName

			// 	data.shelfId = this.formData.shelves
			// 	data.shelfCode = this.formData.shelvesName

			// 	data.cargoSpaceId = this.cur.goodsAllocationId
			// 	data.cargoSpaceCode = this.cur.goodsAllocationCode

			// 	this.callback && this.callback(data)
			// 	this.$emit('success', data)
			// 	if (!this.selfClose) {
			// 		this.cancel()
			// 	}
			// },
			async _getWarehouseChildren() {
				let res = await getWarehouseList()
				this.warehouseList = res.data
				// const res = await postJ(this.apiUrl + '/outInWarehouse/select/getWarehouseChildren')
				// if (res?.success) {
				// 	this.warehouseList = res.data.map(i => ({
				// 		name: i.name,
				// 		id: i.id,
				// 		...i
				// 	}))
				// }
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
		line-height: 80rpx;
		background-color: $j-primary-border-green;
		color: #fff;

		.btn {
			position: absolute;
			right: 0rpx;
			top: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 80rpx;

			padding-right: 30rpx;
		}
	}
	.select-group {
		display: flex;
		flex-wrap: wrap;
		.select-col {
			width: 50%;
			display: flex;
			align-items: center;
			padding: 20rpx;
			box-sizing: border-box;
			.select-label {
				width: 5em;
			}
		}
	}

	.content-box {
		display: flex;
		justify-content: space-between;
		align-content: flex-start;
		flex-wrap: wrap;
		max-height: 60vh;
		min-height: 40vh;
		overflow: auto;
		padding: 0 12rpx;
		.box {
			cursor: pointer;
			min-width: 120rpx;
			padding: 0 10rpx;
			height: 80rpx;
			margin-right: 6rpx;
			margin-bottom: 12rpx;
			line-height: 80rpx;
			text-align: center;
			&.active {
				box-shadow: 2px 2px 2px 2px #ccc;
			}
		}
		.placeholder-box {
			width: 120rpx;
		}
	}
	.footer {
		display: flex;
		justify-content: space-between;

		button {
			width: 50%;
			border: none;
			border-radius: 0;
		}

		.confim {
			background-color: $j-primary-green;
			color: #fff;
		}
	}
</style>