rd_mes_uniapp/pages/les/bindMaterial.vue

<template>
	<view class="page-wrap">
		<uni-forms ref="form" :modelValue="formData" :rules="rules">
			<uni-forms-item label="货位号：" name="locationCode">
				<uni-easyinput suffixIcon="scan" @iconClick="scanLocationCodeUuid" v-model="formData.locationCode" />
			</uni-forms-item>
			<uni-forms-item label="批次号：" name="batchNo">
				<uni-easyinput suffixIcon="scan" @iconClick="scanBatchNoUuid" v-model="formData.batchNo" />
			</uni-forms-item>
		</uni-forms>
		<view class="btns">
			<u-button type="primary" @click="handleBind" class="sub-btn">绑定</u-button>
			<u-button type="warning" @click="handleUnBind" class="pri-btn">解绑</u-button>
		</view>
	</view>
</template>

<script>
import { bind, unBind } from "@/api/les/lesMaterialBind.js";
export default {
	data() {
		return {
			formData: {
				locationCode: null,
				batchNo: null,
			},
			/** 校验规则 */
			rules: {
				locationCode: {
					rules: [{
						required: true,
						errorMessage: '请输入货位号',
					}, ]
				},
				batchNo: {
					rules: [{
						required: true,
						errorMessage: '请选择批次号',
					}, ]
				},
			},
		}
	},
	methods: {
		scanLocationCodeUuid() {
			const _this = this;
			uni.scanCode({
				scanType: ['qrCode', 'barCode'],
				success: function(res) {
					_this.formData.locationCode = res.result;
				}
			});
		},
		scanBatchNoUuid() {
			const _this = this;
			uni.scanCode({
				scanType: ['qrCode', 'barCode'],
				success: function(res) {
					_this.formData.batchNo = res.result;
				}
			});
		},
		handleBind() {
			const _this = this;
			this.$refs.form.validate().then(res => {
				uni.showModal({
					title: '提示',
					content: '您确定绑定该数据吗？',
					success: function(res) {
						if (res.confirm) {
							if (_this.formData.locationCode && _this.formData.batchNo) {
								_this.$modal.loading('绑定中')
								bind(_this.formData).then(res => {
									_this.$modal.closeLoading();
									_this.$modal.msgSuccess("绑定成功！");
									setTimeout(() => {
										this.$tab.switchTab("/pages/work/index");
									}, 500);
								})
							} else {
								_this.$modal.msg("请将信息补充完整")
							}
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			})
		},

		handleUnBind() {
			const _this = this;
			this.$refs.form.validate().then(res => {
				uni.showModal({
					title: '提示',
					content: '您确定解绑该数据吗？',
					success: function(res) {
						if (res.confirm) {
							if (_this.formData.locationCode) {
								_this.$modal.loading('解绑中')
								unBind(_this.formData.locationCode).then(res => {
									_this.$modal.closeLoading();
									_this.$modal.msgSuccess("解绑成功！");
									setTimeout(() => {
										this.$tab.switchTab("/pages/work/index");
									}, 500);
								})
							} else {
								_this.$modal.msg("请将信息补充完整")
							}
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			})
		},
	}
}
</script>

<style scoped lang="scss">
.page-container {
	width: 100%;
	height: 100vh;
	overflow: hidden;
	padding-bottom: 60px;
	/* 给按钮留位置 */
	box-sizing: border-box;
}

.btns {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	justify-content: space-evenly;
	background: #fff;
	padding: 8px 0;
}

::v-deep .uni-easyinput__content-input {
	height: 80rpx;
	line-height: 60rpx;
	display: flex;
	align-items: center;
}

.btns .sub-btn,
.btns .pri-btn {
	width: 47%;
	height: 60rpx;
}
</style>