rd_mes_uniapp/pages/wms/purchase/quickStorage.vue

<template>
	<view id="view">
		<div class="header">
			<table>
				<tr>
					<td>物料代码:</td>
					<td>
						<uni-easyinput placeholder="请输入内容" :focus="PTfocus" v-model="PTCode" primaryColor="red" @confirm="getCode"
							prefixIcon="scan" @iconClick="scanClick('primary')" />
					</td>
				</tr>
			</table>
		</div>
		<div class="body">
			<table>
				<tr>
					<td>收货单号:</td>
					<td>{{form.purchaseReceiveCode}}</td>
				</tr>
				<tr>
					<td>供&numsp;应&numsp;商:</td>
					<td>{{form.supplierCode}}{{form.supplierName}}</td>
				</tr>
				<tr>
					<td>物料编码:</td>
					<td>{{form.materialCode}}</td>
				</tr>
				<tr>
					<td>物料名称:</td>
					<td>{{form.materialName}}</td>
				</tr>
				<tr>
					<td>规格型号:</td>
					<td>{{form.specification}}</td>
				</tr>
				<tr>
					<td>推荐库位:</td>
					<td>
						<uni-easyinput :key="keyBol" class="uni-mt-5" v-model="form.recommend" disabled>
							<template #right>
								<uni-icons custom-prefix="iconfont" type="icon-fuzhi" size="40" @click="iconClick"></uni-icons>
							</template>
						</uni-easyinput>
					</td>
				</tr>
				<tr>
					<td>上架数量:</td>
					<td>
						<u-number-box inputWidth="120" button-size="36" v-model="form.number" min="0"
							:max="form.secondInNumber"></u-number-box>
					</td>
				</tr>
				<tr>
					<td>库&emsp;&emsp;位:</td>
					<td>
						<uni-easyinput :key="keyBol" type="text" prefixIcon="scan" placeholder="扫描"
							v-model="form.storageLocationBarcode" @iconClick="scanClick('storageLocationBarcode')" />
					</td>
				</tr>
			</table>
		</div>
		<div class="footer">
			<button type="primary" @click="submit">
				<span>提交</span>
			</button>
		</div>

		<uni-popup ref="message" type="message">
			<uni-popup-message :type="message.msgType" :message="message.messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
		<uni-popup ref="popup" type="center" background-color="#fff" :is-mask-click="false">
			<!-- 加载动画 -->
			<loding-vue />
		</uni-popup>
	</view>
</template>

<script>
import {
	getReceiveDetailJoin,
	addPurchase,
	getMaterial_code
} from "@/api/wms/purchase.js";
import {
	getConfigKey,
	getUser
} from "@/api/system/config.js"
import lodingVue from "@/utils/loding/loding.vue";
export default {
	components: {
		lodingVue
	},
	data() {
		return {
			form: {},
			message: {
				msgType: 'warn',
				messageText: '请先查询设备信息'
			},
			locationSize: 0,
			map: null,
			PTfocus: true, //物料编码输入框的是否焦点标记
			PTCode: null, //物料编码框的已输入内容
			keyBol: true,
			user: {},
		}
	},
	async mounted() {
		const _this = this;
		_this.locationSize = await _this.fnApi('getConfigKey', 'wms.location.size', 'msg')
		_this.user = (await _this.fnApi('getUser', { pageNum: 1, pageSize: 1, userName: _this.$store.state.user.name },
			'rows'))[0]
	},
	methods: {
		/**
		 * 所有扫描点击事件
		 * @param {Object} key
		 */
		scanClick(key) {
			const _this = this;
			const obj = {
				primary: 'getCode',
				storageLocationBarcode: 'iconClick'
			}
			uni.scanCode({
				// 是否只能从相机扫码，不允许从相册选择图片
				onlyFromCamera: true,
				// 扫码类型
				scanType: ['barCode', 'qrCode'],
				success: function(res) {
					const value = res.result
					_this[obj[key]](value)
				}
			})
		},
		/**
		 * 图标点击事件
		 */
		iconClick(value) {
			const _self = this;
			// const arr =
			_self.form = Object.assign({}, _self.form, {
				storageLocationBarcode: value || _self.form.recommend
			})
		},
		/**
		 * 扫描收货单明细标签
		 * @param {Object} value id
		 */
		async getCode(value) {
			const _self = this;
			_self.PTfocus = false;
			const obj = JSON.parse(value);
			try {
				const data = (await _self.fnApi('getReceiveDetailJoin', obj.id || value))
				const res = await _self.fnApi('getMaterial_code', data.materialCode, 'data')
				let code = null;
				if (res && res.whCode) {
					code = getCode(_self.locationSize, res).value
				}
				data.number = data.allowedNumber || data.number
				data.recommend = code
				_self.form = data
			} catch (e) {
				//TODO handle the exception
				_self.messageType({
					msgType: 'error',
					messageText: '未查到信息'
				})
			}
			/**
			 * 根据参数显示库位格式
			 * @param {Object} num
			 * @param {Object} i
			 */
			function getCode(num, i) {
				const code = i.whCode + '-' + i.areaCode + '-' + i.shelvesCode + '-' + i.storageLocationCode;
				let value = null;
				switch (num) {
					case '0':
						value = code
						break;
					case '2':
						value = i.areaCode
						break;
					case '4':
						value = i.storageLocationCode
						break;
					case '5':
						value = i.shelvesCode + '-' + i.storageLocationCode
						break;
				}
				return { value }
			}
		},
		/**
		 * 提交事件
		 */
		async submit() {
			const _self = this
			const form = Object.assign({}, _self.form);
			if (!form.number) {
				_self.messageType({
					msgType: 'warn',
					messageText: '上架数量不能为0'
				})
				return
			}
			if (!this.isEmpty(form.storageLocationBarcode)) {
				_self.messageType({
					msgType: 'warn',
					messageText: '库位未填写'
				})
				return
			}
			form.purchaseReceiveDetailId = form.id
			form.id = null
			form.secondNumber = form.number;
			const { purchaseReceiveCode, supplierCode } = _self.form
			const obj = {
				purchaseReceiveCode,
				supplierCode,
				userId: _self.user.userId,
				wmsPurchaseInDetailList: [form]
			}
			const data = await _self.fnApi('addPurchase', obj, 'code')
			if (data === 200) {
				_self.messageType({
					msgType: 'success',
					messageText: '操作成功'
				})
				/* Begins 20250503-0001
				新增：“提交成功”后输入焦点自动回到顶部输入框，并清空物料输入框、推荐库位、库位内容
				修改：关闭提交后2秒延时退出页面功能。
				For Customer:浙江日井泵业股份有限公司
				*/
				_self.PTfocus = true
				_self.PTCode = null
				_self.form = {}
				_self.keyBol = !_self.keyBol;
				/* Ends 20250503-0001
				setTimeout(()=>{
						uni.switchTab({
							url:'/pages/work/index'
						})
					},2000)
				
				*/
			} else {
				/*
				TODO: If Error happens, Should notify the user what happened and how to deal with it.
				*/
				_self.messageType({
					msgType: 'error',
					messageText: '操作失败'
				})
			}
		},
		/**
		 * 接口访问方法
		 * @param {String} api 接口名称
		 * @param {Object} value 带入参数
		 * @param {String} accept 接受的数据，有些的data有些的data看具体数据 ，默认data
		 */
		async fnApi(api, value, accept = 'data') {
			const _self = this;
			const objApi = {
				getReceiveDetailJoin,
				addPurchase,
				getConfigKey,
				getMaterial_code,
				getUser
			}
			try {
				//打开蒙层
				_self.$refs.popup.open()
				//查询接口
				const data = (await objApi[api](value))[accept]
				return data
			} catch (e) {
				_self.messageType({
					msgType: 'error',
					messageText: '接口请求出错'
				})
			} finally {
				//关闭蒙层
				_self.$refs.popup.close()
			}
		},
		/**
		 * 提示信息
		 * @param {Object|undefined} value
		 * {msgType,messageText} 参数里面需要包含这两个键
		 */
		messageType(obj) {
			const _self = this;
			let message = {}
			if (obj === undefined) {
				message = {
					msgType: 'error',
					messageText: '请填写设备代码'
				}
			} else {
				message = {
					msgType: obj.msgType,
					messageText: obj.messageText
				}
			}
			_self.message = Object.assign({}, message)
			return _self.$refs.message.open()
		},
		isEmpty(value) {
			if (value === undefined || value === null || value === '') return false
			return true
		}
	}
}
</script>
<style>
page {
	background-color: #ffffff;
	display: flex;
	justify-content: center;
	font-size: 5vw;
	color: #484744;
}
</style>
<style lang="scss" scoped>
#view {
	width: 97vw;
	height: calc(100vh - 44px);
	display: flex;
	justify-content: center;
	flex-wrap: wrap;

	&>* {
		width: 100%;
		background-color: #ffffff;
	}

	.header,
	.footer {
		height: 8%;
	}

	.footer {
		margin-top: auto;

		&>* {
			margin-top: 3%;
		}

		.icon-saomiao {
			margin-right: 2%;
		}
	}

	.body {
		height: calc(100% - 2 * 8% - 4%);

		table>tr {
			border-bottom: 1px dashed #969696;
			height: 15vw;

			&>td:last-child {
				display: flex;
				justify-content: flex-end
			}
		}
	}

	table {
		width: 100%;

		tr {
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-between;

			td {
				display: flex;
				align-items: center;
				justify-content: center;
				text-overflow: ellipsis;
			}

			&>td:first-child {
				width: 30%;
			}

			&>td:last-child {
				width: 70%;
			}
		}
	}
}
</style>