WZC2/fe/PDA/pages/container/containerCall.vue

<template>
	<view class="">

		<!-- 	<view class="" style="width: 100%;  background-color: #fff;">
			<uni-section title="1.物流类型" subTitle="内物流" subTitleFontSize="32rpx" titleFontSize="40rpx"
				type="line" padding>
			</uni-section>
		</view>
		
		<view class="" style="width: 100%;  background-color: #fff;">
			<uni-section title="2.器具规格"  subTitleFontSize="32rpx" titleFontSize="40rpx"
				type="line" padding>
			</uni-section>
		</view>
		 -->
		 <view class="uni-list">
		 	<view class="uni-list-cell"
		 		style="padding-left: 15rpx; padding-top: 20rpx;padding-bottom:20rpx; padding-right: 15rpx; ; align-items: center; display: flex;">
		 		<view class="" style="color: red; font-size: 40rpx; ">
		 			*
		 		</view>
		 		<view class="uni-list-cell-left"
		 			style="font-size:35rpx; align-items: center;display: flex;  text-align: center;font-weight: bold;">
		 			呼叫库位 :
		 		</view>
		 		<view class="uni-list-cell-db" style="font-size:35rpx" @click="openScanLocation">
		 			<text>{{locationCode}}</text>
		 			<text v-if="locationName!=''">({{locationName}})</text>
		 		</view>
		 	</view>
		 </view>
		<view class="uni-list">
			<view class="uni-list-cell " style="padding:10rpx; ">
				<view class="" style="color: red; font-size: 40rpx; ">
					*
				</view>
				<view class="uni-list-cell-left" style="font-size:35rpx;font-weight: bold;">
					器具类型 :
				</view>
				<view class="uni-list-cell-db" style="font-size: 35rpx;">
					内物流
				</view>
			</view>
		</view>
		<view class="uni-list">
			<view class="uni-flex uni-row" style="padding:10rpx">
				<view class="" style="color: red; font-size: 40rpx; ">
					*
				</view>
				<view class="uni-list-cell-left" style="font-size:35rpx;font-weight: bold;">
					器具规格 :
				</view>
			</view>

			<view class="uni-list-cell-db" style="margin-bottom: 20rpx;">
				<!-- <picker @change="containerModelChange" :value="modelIndex" :range="containerModelList"
					range-key="name">
					<view class="uni-input" style="font-size:35rpx">{{containerModel}}</view>
				</picker> -->

				<view class="uni-flex uni-row" style="flex-wrap: wrap;">
					<view class="uni-flex" style=" width: 33.3%; justify-content: center; margin-top: 20rpx; "
						v-for="(item, index) in containerModelList" :key="index">
						<uni-tag :inverted="!item.checked" :circle="true" :text="item.name" type="primary"
							@click="setContainerModel(item)" />

						<!-- <u-radio   size="45" labelSize="35" iconSize="40"  :name="radio.name" @change="radioChangeType3(item,radio)">
								{{radio.name}}
							</u-radio> -->
					</view>

				</view>
			</view>
		</view>
		
		<view class="new_btn_bot">
			<button class="new_save_btn" @click="submit()">提交</button>
		</view>
		<win-scan-by-code ref="scanLocation" title="库位" @getScanCode='getLocation'></win-scan-by-code>
		<com-message ref="comMessage" @afterCloseScanMessage='closeScanMessage' @afterClose='afterClose'
			@afterCloseCommitMessage='closeCommitMessage'>
		</com-message>
	</view>
</template>

<script>
	import {
		locations,
		getDictByCode,
		containerRequest
	} from '@/api/index.js';
	import {
		goHome,
		getContainerTypeArray,
		getISODateTime,
	} from '@/common/basic.js';
	import comMessage from '@/mycomponents/common/comMessage.vue'
	import winScanByCode from '@/mycomponents/wincom/winScanByCode.vue'
	export default {
		components: {
			comMessage,
			winScanByCode
		},
		data() {
			return {
				containerModelList: [],
				typeIndex: 0,
				modelIndex: 0,
				location: "",
				locationCode: "请扫描库位",
				locationName: "",
				containerType: "内物流",
				containerTypeCode: "InLogistics",
				containerModel: "请选择器具规格",
				containerModelCode: ""
			}
		},
		onShow() {
			this.getContainerModelList();
		},
		//返回首页
		onNavigationBarButtonTap(e) {
			if (e.index === 0) {
				goHome();
			} else if (e.index === 1) {
				window.location.reload();
			}
		},
		methods: {
			setContainerModel(item) {
				this.containerModelList.forEach(res => {
					res.checked = false
				})
				item.checked = true;
				this.containerModelCode =item.code;
			},
			getContainerModelList() {
				getDictByCode("ContainerSpecificationsType").then(res => {
					res.items.forEach(item => {
						item.value = item.code;
						item.checked = false
					})
					this.containerModelList = res.items;
				}).catch(error => {

				})
			},
			openScanLocation() {
				this.$refs.scanLocation.openScanPopup()
			},

			closeScanLocation() {
				this.$refs.scanLocation.closeScanPopup();
			},
			//扫描源库位
			getLocation(code) {
				let that = this;
				if (code == '') return;
				uni.showLoading({
					title: '扫描中...',
					mask: true
				});
				locations(code).then(res => {
					uni.hideLoading();
					if (res) {
						that.locationCode = res.code;
						that.locationName = res.name
						that.closeScanLocation();
					} else {
						that.scanPopupLoseFocus();
						that.showMessage('未查询到库位【' + code + '】');
					}

				}).catch(err => {
					uni.hideLoading();
					that.showMessage(err.message);
				});
			},
			showMessage(message) {
				this.$refs.comMessage.showMessage(message);
			},
			afterClose() {
				this.scanPopupGetFocus();
			},
			scanPopupGetFocus() {
				this.$refs.scanLocation.getfocus();
			},
			scanPopupLoseFocus() {
				this.$refs.scanLocation.losefocus();
			},
			clearData() {
				this.containerModelCode = ""
				this.containerModelList.forEach(res=>{
					res.checked = false
				});

			},

			setParams() {
				var data = {
					worker: localStorage.userName_CN == "" ? localStorage.userName : localStorage.userName_CN,
					activeDate: getISODateTime(),
					containerType: this.containerTypeCode,
					specificationsType: this.containerModelCode,
					requestLocationCode: this.locationCode,

				}
				return data;
			},

			submit() {
				if (this.containerModelCode == "") {
					this.showMessage("请选择器具规格")
					return;
				}

				if (this.locationCode == "请扫描库位") {
					this.showMessage("请扫描库位")
					return;
				}
				uni.showLoading({
					title: '提交中...',
					mask: true
				});
				var params = this.setParams();
				console.log(JSON.stringify(params))
				containerRequest(params).then(res => {
					uni.hideLoading();
					this.showMessage("提交成功");
					this.clearData();
				}).catch(err => {
					uni.hideLoading();
					this.showMessage(err.message);
				})

			}
		}
	}
</script>

<style>
</style>