ebike-ui/ebike-maintenance/pages/warehouse/wholebind/wholebind.vue

<template>
	<view class="container">
		<view class="form-panel">
			<uni-forms ref="ebikeInfoForm" :modelValue="ebikeInfo" labelWidth="100px">
				<uni-section title="车辆" type="line">
					<uni-forms-item label="车辆编号" required name="bikeCode" :rules="[{ required: true, errorMessage: '请扫描或输入车辆编号' }]">
						<bikeCodeScan @scan-change="bikeCodeScanChange" :codeValue="ebikeInfo.bikeCode" ref="bikeCodeScanRef" />
					</uni-forms-item>
					<uni-forms-item label="车辆型号" required name="bikeModel" :rules="[{ required: true, errorMessage: '请输入车辆型号' }]">
						<uni-easyinput v-model="ebikeInfo.bikeModel" placeholder="请输入车辆型号" />
					</uni-forms-item>
					<uni-forms-item label="车牌号" name="bikeNumber">
						<uni-easyinput v-model="ebikeInfo.bikeNumber" placeholder="请输入车牌号" />
					</uni-forms-item>
				</uni-section>
				<uni-section title="中控" type="line">
					<uni-forms-item label="中控编号" required :name="['ebikeEcuInfo','ecuCode']" :rules="[{ required: true, errorMessage: '请扫描或输入中控编号' }]">
						<ecuCodeScan @scan-change="ecuCodeScanChange" :codeValue="ebikeInfo.ebikeEcuInfo.ecuCode" />
					</uni-forms-item>
					<uni-forms-item label="中控序列号" required :name="['ebikeEcuInfo','ecuSN']" :rules="[{ required: true, errorMessage: '请输入中控序列号' }]">
						<uni-easyinput v-model="ebikeInfo.ebikeEcuInfo.ecuSN" placeholder="请输入中控序列号"/>
					</uni-forms-item>
					<uni-forms-item label="中控品牌" required :name="['ebikeEcuInfo','ecuModel']" :rules="[{ required: true, errorMessage: '请选择中控品牌' }]">
						<uni-data-select
							  v-model="ebikeInfo.ebikeEcuInfo.ecuModel"
							  :localdata="ecuModelRange"
							  @change="ecuModelChange"
							  placeholder="请选择中控品牌"
							></uni-data-select>
					</uni-forms-item>
				</uni-section>
				<uni-section title="电池" type="line">
					<uni-forms-item label="电池编号" required :name="['ebikeBatteryInfo','batteryCode']" :rules="[{ required: true, errorMessage: '请扫描或输入电池编号' }]">
						<bikeCodeScan @scan-change="batteryCodeScanChange" :codeValue="ebikeInfo.ebikeBatteryInfo.batteryCode" />
					</uni-forms-item>
				</uni-section>
				<uni-section title="头盔" type="line">
					<uni-forms-item label="头盔编号" :name="['ebikeHelmetInfo','helmetCode']">
						<bikeCodeScan @scan-change="helmetCodeScanChange" :codeValue="ebikeInfo.ebikeHelmetInfo.helmetCode" />
					</uni-forms-item>
				</uni-section>
			</uni-forms>
		</view>
	</view>
	<view class="nav-panel">
		<c-uni-goods-nav :fill="true" :options="[]" :buttonGroup="navButtonGroup" @buttonClick="navButtonClick" />
	</view>
</template>

<script setup>
	import { ref, reactive } from 'vue';
	import * as api from '@/utils/api.js';
	const ebikeInfoForm = ref(null);
	const bikeCodeScanRef = ref(null);
	
	const ebikeInfo = ref({
		bikeCode: '',
		bikeModel: '',
		bikeNumber:'',
		ebikeEcuInfo: {
			ecuCode: '',
			ecuSN: '',
			ecuModel: ''
		},
		ebikeBatteryInfo: {
			batteryCode: ''
		},
		ebikeHelmetInfo: {
			helmetCode: ''
		}
	});
	
	const ecuModelRange = [
		{ value: "乐摇摇", text: "乐摇摇" },
		{ value: "美团", text: "美团" }
    ]
	
	const navButtonGroup = reactive([{
		text: '入库',
		backgroundColor: '#0078D4',
		color: '#fff',
		disable: false
  }]);
	
	const navButtonClick = (e) =>{
		const index = e.index;
		//navButtonGroup[index].disable = true;
		if(index == 0){
			if (ebikeInfoForm.value) { // 确保表单元素已挂载
				ebikeInfoForm.value.validate().then((res) => {
					handleSubmit();
				}).catch((err) => {
					//console.log('err', err);
				});
			} else {
				//console.error('Form element is not available'); // 调试信息，以防万一
			}
		}
	}
	
	const ecuModelChange = (value) =>{
		ebikeInfo.value.ebikeEcuInfo.ecuModel = value;
	};
	
	const handleSubmit = () => {
	  const params = ebikeInfo.value;
	  api.callEbikeInfo("saveEbikeInfo", params).then((res)=>{
			uni.showToast({
				title: "入库成功",
				icon: 'success',
				duration: 5000,
				success: (res) => {
					setTimeout(function () {
							uni.navigateBack();
					}, 5000);
				}
			});
	  }).catch((err)=>{
	  	uni.showToast({
	  		title: "入库失败",
	  		icon: 'error',
	  		duration: 5000
	  	});
	  });
	};
	
	let timer;
	const bikeCodeScanChange = (data) => {
		clearTimeout(timer);
		ebikeInfo.value.bikeCode = data;
		timer = setTimeout(function () {
			api.callEbikeInfo("getBikeINfoData?bikeCode=" + data).then((res)=>{
				if(res.code == 200 && res.data && res.data.bikeId){
					uni.showToast({
						title: "车辆信息已存在",
						icon: 'error',
						duration: 2000
					});
					setTimeout(function () {
						ebikeInfo.value.bikeCode = "";
					    bikeCodeScanRef.value.onSetValue("");
					}, 2000);
				}
				else
				{
					ebikeInfo.value.bikeCode = data;
				}
			}).catch((err)=>{
				ebikeInfo.value.bikeCode = data;
			});
		}, 5000);
	};
	const ecuCodeScanChange = (data) => {
		ebikeInfo.value.ebikeEcuInfo.ecuCode = data["imei"];
		ebikeInfo.value.ebikeEcuInfo.ecuSN = data["sn"];
	};
	
	const batteryCodeScanChange = (data) => {
		ebikeInfo.value.ebikeBatteryInfo.batteryCode = data;
	};
	
	const helmetCodeScanChange = (data) => {
		ebikeInfo.value.ebikeHelmetInfo.helmetCode = data;
	};
</script>

<style>
	.container {
		padding: 15px;
		background-color: #fff;
	}
	
	/* 全局样式 */
/* 	.uni-forms .uni-forms-item__label {
	  width: 100px !important; 
	} */
	
	.form-panel{
		padding-bottom: 55px;
	}
	.nav-panel{
		position: fixed;
		bottom: 0rpx;
		width: 100%;
		padding-bottom: 10px;
		z-index: 999;
		background-color:#fff;
	}
</style>