vue-insagent-app/components/common/commonFormItem/CarInfoForm.vue

<template>
	<u-form :model="carInfo" :rules="carRules" ref="carForm" :errorType="errorType" label-width="200"
		style="padding: 0 15px;">
		<u-form-item label-width="120" label="车牌号:">
			<u-input placeholder="输入车牌号" v-model="carInfo.licenseNo" type="text" :custom-style="{textAlign:'right'}"
				@input="upperCaseType('licenseNo')"></u-input>
		</u-form-item>
		<u-form-item label="品牌型号:" prop="modelcname">
			<u-input placeholder="请输入品牌型号" v-model="carInfo.modelcname" type="text" :custom-style="{textAlign:'right'}"
				@input="upperCaseType('modelcname')"></u-input>
			<view class="search ml-1" @tap="toChooseVehicleType(carInfo.modelcname)">查询</view>
		</u-form-item>
		<u-form-item label="车辆识别码:" prop="frameNo">
			<u-input placeholder="请输入车辆识别码" v-model="carInfo.frameNo" type="text" :custom-style="{textAlign:'right'}"
				@input="upperCaseType('frameNo')"></u-input>
			<view class="search ml-1" @tap="toChooseVin(carInfo.frameNo)">查询</view>
		</u-form-item>
		<u-form-item label="发动机号:" prop="engineNo">
			<u-input placeholder="请输入发动机号" v-model="carInfo.engineNo" type="text" :custom-style="{textAlign:'right'}"
				@input="upperCaseType('engineNo')"></u-input>
		</u-form-item>
		<u-form-item label="注册日期:" prop="registerDate">
			<u-input type="select" :custom-style="{textAlign:'right'}" :select-open="registerDateShow"
				v-model="carInfo.registerDate" placeholder="请选择注册日期" @click="registerDateShow = true"
				placeholder-style="color:#808080"></u-input>
			<u-picker v-model="registerDateShow" mode="time" :params="params" :end-year="endYear" :end-month="endMonth"
				@confirm="e => Dateconfirm(e, 'carInfo', 'registerDate')"></u-picker>
		</u-form-item>
		<u-form-item label="发证日期:" prop="issueDate">
			<u-input type="select" :custom-style="{textAlign:'right'}" :select-open="issueDateShow"
				v-model="carInfo.issueDate" placeholder="请选择发证日期" @click="issueDateShow = true"
				placeholder-style="color:#808080"></u-input>
			<u-picker v-model="issueDateShow" mode="time" :params="params"
				@confirm="e => Dateconfirm(e, 'carInfo', 'issueDate')"></u-picker>
		</u-form-item>
		<u-form-item label="整备质量:" prop="completeKerbMass">
			<u-input placeholder="请输入整备质量" v-model="carInfo.completeKerbMass" type="text"
				:custom-style="{textAlign:'right'}"></u-input>
		</u-form-item>
		<u-form-item label="核定载质量:" prop="limitLoad">
			<u-input placeholder="请输入核定载质量" v-model="carInfo.limitLoad" type="text"
				:custom-style="{textAlign:'right'}"></u-input>
		</u-form-item>
		<u-form-item label="使用性质:" prop="carnature">
			<u-input v-model="carInfos.carnature" type="select" :select-open="carnatureShow"
				@click="carnatureShow = true" :custom-style="{textAlign:'right'}" placeholder-style="color:#808080"
				placeholder="请选择使用性质" />
			<u-select mode="single-column" :list="natureOfVehicleUseoptions" v-model="carnatureShow"
				label-name="dictTag" value-name="dictValue"
				@confirm="dictionaryConfirm($event, 'carnature')"></u-select>
		</u-form-item>
		<u-form-item label="能源种类:" prop="energyType">
			<u-input v-model="carInfos.energyType" type="select" :select-open="energyTypeShow"
				@click="energyTypeShow = true" :custom-style="{textAlign:'right'}" placeholder-style="color:#808080"
				placeholder="请选择能源种类" />
			<u-select mode="single-column" :list="energyTypeoptions" v-model="energyTypeShow" label-name="dictTag"
				value-name="dictValue" @confirm="dictionaryConfirm($event, 'energyType')"></u-select>
		</u-form-item>
		<u-form-item label="车辆用途:" prop="vehicleUse">
			<u-input v-model="carInfos.vehicleUse" type="select" :select-open="vehicleUseShow"
				@click="vehicleUseShow = true" :custom-style="{textAlign:'right'}" placeholder-style="color:#808080"
				placeholder="请选择车辆用途" />
			<u-select v-if="carInfo.carnature === '01'" mode="single-column" :list="businessVehicleUseoptions"
				v-model="vehicleUseShow" label-name="dictTag" value-name="dictValue"
				@confirm="dictionaryConfirm($event, 'vehicleUse')"></u-select>
			<u-select v-else mode="single-column" :list="outOfBusinessVehicleUseoptions" v-model="vehicleUseShow"
				label-name="dictTag" value-name="dictValue"
				@confirm="dictionaryConfirm($event, 'vehicleUse')"></u-select>
		</u-form-item>
		<u-form-item label="车辆类型:" prop="cartype">
			<u-input v-model="carInfos.cartype" type="select" :select-open="cartypeShow" @click="cartypeShow = true"
				:custom-style="{textAlign:'right'}" placeholder-style="color:#808080" placeholder="请选择车辆类型" />
			<u-select mode="single-column" :searchShow="true" :list="trafficManagementVehicleTypeoptions"
				v-model="cartypeShow" label-name="dictTag" value-name="dictValue"
				@confirm="dictionaryConfirm($event, 'cartype')"></u-select>
		</u-form-item>
		<u-form-item label="车辆种类:" prop="cimodelclass">
			<u-input v-model="carInfos.cimodelclass" type="select" :select-open="cimodelclassShow"
				@click="cimodelclassShow = true" :custom-style="{textAlign:'right'}" placeholder-style="color:#808080"
				placeholder="请选择车辆种类" />
			<u-select mode="single-column" :list="vehicleTypeoptions" v-model="cimodelclassShow" label-name="dictTag"
				value-name="dictValue" @confirm="dictionaryConfirm($event, 'cimodelclass')"></u-select>
		</u-form-item>
		<u-form-item label="年款:">
			<u-input type="text" placeholder="请输入年款" v-model="carInfo.caryear"
				:custom-style="{textAlign:'right'}"></u-input>
		</u-form-item>
		<u-form-item label="座位数:">
			<u-input type="text" placeholder="请输入座位数" v-model="carInfo.seatCount"
				:custom-style="{textAlign:'right'}"></u-input>
		</u-form-item>
		<u-form-item label="排量:">
			<u-input type="text" placeholder="请输入排量" v-model="carInfo.enginedesc"
				:custom-style="{textAlign:'right'}"></u-input>
		</u-form-item>
		<u-form-item label="功率:">
			<u-input type="text" placeholder="请输入功率" v-model="carInfo.powerScale"
				:custom-style="{textAlign:'right'}"></u-input>
		</u-form-item>
		<u-form-item label="新车购置价:" prop="purchasePrice">
			<u-input type="text" placeholder="请输入新车购置价" v-model="carInfo.purchasePrice"
				:custom-style="{textAlign:'right'}" @input="upperCaseType('purchasePrice')"></u-input>
		</u-form-item>
	</u-form>
</template>

<script>
	var dateTime = new Date();
	let Year = dateTime.getFullYear();
	let Month = Number(dateTime.getMonth() + 1);
	export default {
		props: {
			carInfo: Object,
			upperCaseType: Function,
			toChooseVehicleType: Function,
			toChooseVin: Function,
			dictionaryConfirm: Function,
			Dateconfirm: Function,
			natureOfVehicleUseoptions: Array,
			energyTypeoptions: Array,
			trafficManagementVehicleTypeoptions: Array,
			vehicleTypeoptions: Array,
			businessVehicleUseoptions: Array,
			outOfBusinessVehicleUseoptions: Array,
			carInfos: Object,
			errorType: {
				type: Array,
				default: () => ['border-bottom', 'toast'],
			},
		},
		data() {
			return {
				registerDateShow: false,
				issueDateShow: false,
				carnatureShow: false,
				energyTypeShow: false,
				vehicleUseShow: false,
				cartypeShow: false,
				cimodelclassShow: false,
				params: {
					year: true, //年
					month: true, //月
					day: true, //日
					hour: false, //时
					minute: false, //分
					second: false, //秒
				},
				endYear: Year,
				endMonth: Month,
				carRules: {
					frameNo: [{
							required: true,
							message: '请输入车辆识别码',
							trigger: ['blur', 'change'],
						},
						{
							pattern: /^([0-9A-Z]){17}$/,
							message: '请输入正确的车辆识别码',
						}
					],
					modelcname: [{
						required: true,
						message: '请输入品牌型号',
						trigger: ['blur', 'change'],
					}],
					engineNo: [{
						required: true,
						message: '请输入发动机号',
						trigger: ['blur', 'change'],
					}],
					purchasePrice: [{
							required: true,
							message: '请输入新车购置价',
							trigger: ['blur', 'change'],
						},

					],
					completeKerbMass: [{
						required: true,
						message: '请输入整备质量',
						trigger: ['blur', 'change'],
					}],
					carnature: [{
						required: true,
						message: '使用性质必选',
						trigger: 'change',
					}],
					energyType: [{
						required: true,
						message: '能源种类必选',
						trigger: 'change',
					}],
					vehicleUse: [{
						required: true,
						message: '车辆用途必选',
						trigger: 'change',
					}],
					cartype: [{
						required: true,
						message: '车辆类型必选',
						trigger: 'change',
					}],
					cimodelclass: [{
						required: true,
						message: '车辆种类必选',
						trigger: 'change',
					}],
					registerDate: [{
							required: true,
							message: '请选择注册日期',
							trigger: 'change',
						},
						{
							pattern: /^\d{4}-\d{2}-\d{2}$/,
							message: '注册日期格式错误',
						}
					],
					issueDate: [{
							required: true,
							message: '请选择发证日期',
							trigger: 'change',
						},
						{
							pattern: /^\d{4}-\d{2}-\d{2}$/,
							message: '发证日期日期格式错误',
						}
					],
				},
			}
		},
		methods: {
			validate(callback) {
				this.$refs.carForm.setRules(this.carRules);
				this.$refs.carForm.validate(valid => {
					if (callback) {
						callback(valid);
					}
				});
			},
			setRules(rules) {
				// 更新规则逻辑
				this.carRules = rules; // 或者根据需要
			},
		},
	}
</script>

<style scoped lang="scss">
	/* 添加样式 */
	.search {
		background: linear-gradient(270deg, #FF9A47 0%, #FF5600 100%);
		border-radius: 2px;
		color: #fff;
		font-size: 22rpx;
		padding: 1px 6px;
	}
</style>