SmartStorage/pages/qrcodeBindPage/qrcodeBindPage.vue

<template>
	<view>
		<uni-forms ref="qrForm" :modelValue="qrFormData" label-position="top" :rules="rules" class="qr-stats">
			<uni-forms-item name="typeVal" required label="设备类型">
				<zxz-uni-data-select
					v-model="qrFormData.typeVal"
					:localdata="typeRange"
					@change="typeChange"
					filterable
				>
				</zxz-uni-data-select>
			</uni-forms-item>
			<uni-forms-item name="specVal" required label="规格型号">
				<uni-data-select
				  v-model="qrFormData.specVal"
				  :localdata="specRange"
				  @change="specChange"
				></uni-data-select>
			</uni-forms-item>
			<view class="middle">
				<h4 style="font-weight: normal; margin-bottom: 15rpx;">标签编号：</h4>
				<span >{{ qrcode }}</span>
			</view>
			<uni-forms-item name="deviceCode" required label="设备编号">
				<uni-easyinput v-model="qrFormData.deviceCode"></uni-easyinput>
			</uni-forms-item>
			<view class="bind" @click="toggleBind">绑定</view>
		</uni-forms>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				qrFormData: {
					typeVal: '',
					specVal: '',
					deviceCode: ''
				},
				rules: {
					typeVal: {
						rules: [
							{
								required: true,
								errorMessage: '请输设备类型！'
							}
						]
					},
					specVal: {
						rules: [
							{
								required: true,
								errorMessage: '请输规格型号！'
							}
						]
					},
					deviceCode: {
						rules: [
							{
								required: true,
								errorMessage: '请输设备编号！'
							}
						]
					},
				},
				qrcode: '',
				typeRange: [],
				specRange: [],
				deviceStats: {},
				showBindBtn: false
			}
		},
		methods: {
			typeChange (e) {
				let that = this
				console.log(e);
				// 根据设备类型获取规格类型
				that.$api.qrcodeBinding.fetchDeviceSpec({
					level: '4',
					parentId: String(e.value) 
				}).then(res => {
					console.log(res);
					if (res.data.code == 200) {
						that.specRange = res.data.data.map(item => {
							return {
								text: item['typeName'],
								value: item['typeId'],
								code: item['code'],
								modelCode: item['modelCode']
							}
						})
					}
				}).catch(err => {
					console.log(err);
				})
			},
			specChange (e) {
				let that = this
				console.log(e, that.specRange);
				const confirmedRange = that.specRange.filter(item => {
					return item.value == e
				})
				console.log(confirmedRange);
				that.qrFormData.deviceCode = 'NS' + confirmedRange[0].code + confirmedRange[0].modelCode
			},
			toggleBind () {
				let that = this
				that.$refs.qrForm.validate().then(formData => {
					console.log(formData);
					that.$api.qrcodeBinding.bindQrcode({
						typeId: formData.specVal,
						maCode: formData.deviceCode,
						qrCode: that.qrcode
					}).then(res => {
						console.log(res);
						if (res.data.code == 200) {
							uni.showToast({
								icon: 'none',
								title: res.data.msg,
								success: () => {
									uni.navigateBack()
								}
							})
						} else {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							})
						}
					}).catch(err => {
						console.log(err);
					})
				})
			}
		},
		onLoad(params) {
			let that = this
			const { code } = params
			console.log(code);
			that.qrcode = code
			// 根据扫出的编码查询设备
			/* that.$api.fetchMaterialOutStore.fetchInfoByQrCode({
				qrCode: code
			}).then(res => {
				console.log('fetchInfoByQrCode =================================',res);
				// if (res.data.code == 200) that.deviceStats = res.data.rows[0]
				if (res.data.rows.length == 0) {
					that.showBindBtn = false
					uni.showToast({
						icon: 'none',
						title: '未查询到设备数据！'
					})
				} else {
					that.showBindBtn = true
					that.deviceStats = res.data.rows[0]
				}
			}).catch(err => {
				console.log(err);
			}) */
			// 获取机具设备类型
			that.$api.qrcodeBinding.fetchDeviceType({
				level: '3'
			}).then(res => {
				console.log(res);
				if (res.data.code == 200) {
					that.typeRange = res.data.data.map(item => {
						return {
							text: item['typeName'],
							value: item['typeId']
						}
					})
				}
			}).catch(err => {
				console.log(err);
			})
		}
	}
</script>

<style lang="scss">
	.qr-stats{
		width: 90%;
		margin: 30rpx auto;
			.middle{
				font-weight: normal;
				font-size: 14px;
				margin-bottom: 15rpx;
				margin-top: 15rpx;
			}
	}
	.bind{
		width: 60%;
		margin: 5vh auto;
		box-sizing: border-box;
		padding: 15rpx 0;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 20rpx;
		background-color: #3888FF;
		color: #fff;
		font-size: 16px;
	}
</style>