hht-ximenzi-uni/pages/manage/empty-carrier-warehousing.vue

<template>
	<view class="zd_container">
		<nav-bar :title="title"></nav-bar>
		<view class="zd_content">
			<view class="zd_wrapper">
				<view class="zd-row border-bottom">
					<view class="zd-col-7">
						<span class="filter_label">点位</span>
					</view>
					<view class="zd-col-17">
						<search-box
						v-model="point"
						@handleChange="handlePointChange"
						/>
					</view>
				</view>
				<view class="zd-row border-bottom">
					<view class="zd-col-7">
						<span class="filter_label">载具编码</span>
					</view>
					<view class="zd-col-17">
						<search-box
						v-model="vehicle"
						@handleChange="handleVehicleChange"
						/>
					</view>
				</view>
			</view>
			<view class="zd_wrapper grid-wraper">
				<view class="slide_new">
					<table class="table">
						<thead>
							<tr>
								<th>点位</th>
								<th>载具编码</th>
								<th>删除</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="(e, i) in dataList" :key="i">
								<td>{{e.point_code}}</td>
								<td>{{e.vehicle_code}}</td>
								<td><view class="delete-btn" @tap="deleteItem(i)">删除</view></td>
							</tr>
							<tr v-if="uncompletedItem" class="uncompleted-row">
								<td>{{uncompletedItem.point_code || '待扫描'}}</td>
								<td>{{uncompletedItem.vehicle_code || '待扫描'}}</td>
								<td>
									<view class="clear-btn" @tap="clearUncompleted">清空</view>
								</td>
							</tr>
						</tbody>
					</table>
					<view v-if="dataList.length === 0 && !uncompletedItem" class="tip">请扫描点位和载具编码</view>
				</view>
			</view>
		</view>
		<view class="zd-row submit-bar">
			<button class="zd-col-24 button-primary" :class="{'button-info': !dataList.length}" :disabled="disabled" @tap="_emptyVehicleWarehousing">提交</button>
		</view>
	</view>
</template>

<script>
	import NavBar from '@/components/NavBar.vue'
	import SearchBox from '@/components/SearchBox.vue'
	import {emptyVehicleWarehousing} from '@/utils/getData2.js'
	export default {
		components: {
			NavBar,
			SearchBox
		},
		data() {
			return {
				title: '',
				point: '',
				vehicle: '',
				uncompletedItem: null,
				dataList: [],
				disabled: false
			};
		},
		onLoad (options) {
			this.title = options.title
		},
		methods: {
			handlePointChange(value) {
				if (value) {
					setTimeout(() => { this.point = '' }, 500)
					if (!this.uncompletedItem) {
						this.uncompletedItem = { point_code: value }
					} else {
						this.uncompletedItem.point_code = value
					}
					this.checkAndAddToList()
				}
			},
			handleVehicleChange(value) {
				if (value) {
					setTimeout(() => { this.vehicle = '' }, 500)
					if (!this.uncompletedItem) {
						this.uncompletedItem = { vehicle_code: value }
					} else {
						this.uncompletedItem.vehicle_code = value
					}
					this.checkAndAddToList()
				}
			},
			checkAndAddToList() {
				if (!this.uncompletedItem) return
				const { point_code, vehicle_code } = this.uncompletedItem
				if (point_code && vehicle_code) {
					const exists = this.dataList.some(item => 
						item.point_code === point_code && item.vehicle_code === vehicle_code
					)
					if (!exists) {
						this.dataList.push({
							point_code,
							vehicle_code
						})
						this.uncompletedItem = null
					} else {
						uni.showToast({
							title: '该组合已存在',
							icon: 'none'
						})
						this.uncompletedItem = null
					}
				}
			},
			clearUncompleted() {
				this.uncompletedItem = null
			},
			deleteItem(index) {
				this.dataList.splice(index, 1)
			},
			async _emptyVehicleWarehousing () {
				this.disabled = true
				if (!this.dataList.length) {
						this.disabled = false
						return
					}
				try {
					let res = await emptyVehicleWarehousing(this.dataList)
					this.clearUp()
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				} catch (e) {
					console.log(e)
					this.disabled = false
				}
			},
			clearUp () {
				this.point = ''
				this.vehicle = ''
				this.uncompletedItem = null
				this.disabled = false
				this.dataList = []
			}
		}
	}
</script>

<style lang="stylus" scoped>
@import '../../common/style/mixin.styl';
.table
	width 100%
	border-spacing 0
	.uncompleted-row
		td
			background-color #fffaf0
			color #333
			font-style italic
	td
		line-height 36rpx
		padding 20rpx 10rpx
		white-space pre-wrap
		word-break break-all
.tip
	font-size 32rpx
	text-align: center;
	padding: 40rpx 0;
	color: #ff6a00;
.delete-btn
	_font(34rpx, 50rpx, #4e6ef2,,center)
	padding 10rpx 20rpx
	background-color #fff
	border-radius 8rpx
	display inline-block
	border 1rpx solid #4e6ef2
	&:active
		color #fff
		background-color #4e6ef2

.clear-btn
	_font(34rpx, 50rpx, #ff6a00,,center)
	padding 10rpx 20rpx
	background-color #fff
	border-radius 8rpx
	display inline-block
	border 1rpx solid #ff6a00
	&:active
		color #fff
		background-color #ff6a00
</style>