zhapp/components/commonFormItem/CarInfoForm.vue

<template>
	<view class="">
		<u--form labelPosition="left" :model="carInfo" :rules="carRules" ref="carForm" labelWidth="80"
			errorType="message">
			<template v-if="currentPagePath=='/pages/quote/quoteInfo'">
				<u-form-item label="车牌号" borderBottom>
					<u--input v-model="carInfo.licenseNo" border="none" clearable placeholder="请输入车牌号"
						placeholderStyle="text-align:right;" @input="upperCaseType('licenseNo')"></u--input>
				</u-form-item>
				<u-form-item label="车架号" prop="vinNo" borderBottom>
					<u--input placeholder="请输入车架号" placeholderStyle="text-align:right;" @input="upperCaseType('vinNo')"
						v-model="carInfo.vinNo" border="none" clearable></u--input>
				</u-form-item>
				<u-form-item label="品牌型号" prop="brandName" borderBottom>
					<u--input v-model="carInfo.brandName" border="none" @input="upperCaseType('brandName')" clearable
						placeholder="请输入品牌型号" placeholderStyle="text-align:right;"></u--input>
				</u-form-item>
				<u-form-item label="发动机号" prop="engineNo" borderBottom>
					<u--input v-model="carInfo.engineNo" border="none" clearable placeholder="请输入发动机号"
						placeholderStyle="text-align:right;" @input="upperCaseType('engineNo')"></u--input>
				</u-form-item>
				<u-form-item label="使用性质" prop="carNatureCode" borderBottom @tap="carnatureShow=true">
					<u--input v-model="carInfos.carNatureCode" disabled disabledColor="#ffffff" suffixIcon='arrow-down'
						suffixIconStyle="color:#333;font-size:30rpx" placeholder="请选择使用性质"
						placeholderStyle="text-align:right;" clearable border="none"
						style="pointer-events: none"></u--input>
				</u-form-item>
				<u-form-item label="车辆种类" prop="carKindCode" borderBottom @tap="plateTypeShow=true">
					<u--input v-model="carInfos.carKindCode" disabled disabledColor="#ffffff" suffixIcon='arrow-down'
						suffixIconStyle="color:#333;font-size:30rpx" placeholder="请选择车辆种类"
						placeholderStyle="text-align:right;" clearable border="none"
						style="pointer-events: none"></u--input>
				</u-form-item>

				<u-form-item label="车辆用途" prop="vehicleUseCode" borderBottom @click="vehicleUseShow=true">
					<u--input v-model="carInfos.vehicleUseCode" disabled disabledColor="#ffffff" suffixIcon='arrow-down'
						suffixIconStyle="color:#333;font-size:30rpx" placeholder="请选择车辆用途  "
						placeholderStyle="text-align:right;" clearable border="none"
						style="pointer-events: none"></u--input>
				</u-form-item>
				<u-form-item label="所属性质" prop="property" borderBottom @tap="propertyShow=true">
					<u--input v-model="carInfos.property" disabled disabledColor="#ffffff" suffixIcon='arrow-down'
						suffixIconStyle="color:#333;font-size:30rpx" placeholder="请选择所属性质"
						placeholderStyle="text-align:right;" clearable border="none"
						style="pointer-events: none"></u--input>
				</u-form-item>
				<u-form-item label="注册日期" prop="registerDate" borderBottom @tap="registerDateShow = true; ">
					<u--input v-model="carInfo.registerDate" disabled disabledColor="#ffffff" clearable
						:holdKeyboard="true" suffixIcon='calendar' suffixIconStyle="color:#333;font-size:40rpx"
						placeholder="请选择  " placeholderStyle="text-align:right;" border="none"
						style="pointer-events: none"></u--input>
				</u-form-item>
				<u-form-item label="发证日期" prop="issueDate" borderBottom @click="issueDateShow=true">
					<u--input v-model="carInfo.issueDate" disabled disabledColor="#ffffff" clearable
						suffixIcon='calendar' suffixIconStyle="color:#333;font-size:40rpx" placeholder="请选择  "
						placeholderStyle="text-align:right;" border="none" style="pointer-events: none"></u--input>
				</u-form-item>
				<u-form-item label="整备质量" prop="completeKerbMass" borderBottom>
					<u--input v-model="carInfo.completeKerbMass" border="none" clearable placeholder="请输入整备质量"
						placeholderStyle="text-align:right;"></u--input>
				</u-form-item>
				<u-form-item label="核定载质量" prop="limitLoad" borderBottom>
					<u--input v-model="carInfo.limitLoad" border="none" clearable placeholder="请输入核定载质量"
						placeholderStyle="text-align:right;"></u--input>
				</u-form-item>
			</template>
			<template v-if="currentPagePath=='/pages/quote/selectInsuranceCompany'">
				<u-form-item label="车架号" prop="vinNo" borderBottom>
					<u--input placeholder="请输入车架号" placeholderStyle="text-align:right;" v-model="carInfo.vinNo"
						border="none" clearable></u--input>
					<view class="search ml-1 dis a-c j-c " @tap="toChooseVin(carInfo.vinNo)">查询</view>
				</u-form-item>
				<u-form-item label="品牌型号" prop="brandName" borderBottom>
					<u--input v-model="carInfo.brandName" border="none" clearable placeholder="请输入品牌型号"
						placeholderStyle="text-align:right;"></u--input>
					<view class="search ml-1 dis a-c j-c" @tap="toChooseVehicleType(carInfo.brandName)">查询</view>
				</u-form-item>

				<u-form-item label="能源种类" prop="energyTypeCode" borderBottom @click="energyTypeShow=true">
					<u--input v-model="carInfos.energyTypeCode" disabled disabledColor="#ffffff" suffixIcon='arrow-down'
						suffixIconStyle="color:#333;font-size:30rpx" placeholder="请选择使用性质"
						placeholderStyle="text-align:right;" clearable border="none"
						style="pointer-events: none"></u--input>
				</u-form-item>
				<u-form-item label="车辆用途" prop="vehicleUseCode" borderBottom @click="vehicleUseShow=true">
					<u--input v-model="carInfos.vehicleUseCode" disabled disabledColor="#ffffff" suffixIcon='arrow-down'
						suffixIconStyle="color:#333;font-size:30rpx" placeholder="请选择车辆用途  "
						placeholderStyle="text-align:right;" clearable border="none"
						style="pointer-events: none"></u--input>
				</u-form-item>
				<u-form-item label="车辆种类" prop="carKindCode" borderBottom @click="cimodelclassShow=true">
					<u--input v-model="carInfos.carKindCode" disabled disabledColor="#ffffff" suffixIcon='arrow-down'
						suffixIconStyle="color:#333;font-size:30rpx" placeholder="请选择车辆种类  "
						placeholderStyle="text-align:right;" clearable border="none"
						style="pointer-events: none"></u--input>
				</u-form-item>
				<u-form-item label="车辆类型" prop="carTypeCode" borderBottom @click="cartypeShow=true">
					<u--input v-model="carInfos.carTypeCode" disabled disabledColor="#ffffff" suffixIcon='arrow-down'
						suffixIconStyle="color:#333;font-size:30rpx" placeholder="请选择车辆类型  "
						placeholderStyle="text-align:right;" clearable border="none"
						style="pointer-events: none"></u--input>
				</u-form-item>
				<u-form-item label="座位数" borderBottom>
					<u--input v-model="carInfo.seatCount" border="none" clearable placeholder="请输入座位数"
						placeholderStyle="text-align:right;">
					</u--input>
					<text class="suffixClass">座</text>
				</u-form-item>
				<u-form-item label="年款" borderBottom>
					<u--input v-model="carInfo.carYear" border="none" clearable placeholder="请输入年款"
						placeholderStyle="text-align:right;"></u--input>
				</u-form-item>
				<u-form-item label="排量" borderBottom>
					<u--input v-model="carInfo.displacement" border="none" clearable placeholder="请输入排量"
						placeholderStyle="text-align:right;">
					</u--input>
					<text class="suffixClass">L</text>
				</u-form-item>
				<u-form-item label="功率" borderBottom>
					<u--input v-model="carInfo.powerScale" border="none" clearable placeholder="请输入功率"
						placeholderStyle="text-align:right;">
					</u--input>
					<text class="suffixClass">KW</text>
				</u-form-item>
				<u-form-item label="汽车购置价" prop="purchasePrice" borderBottom>
					<u--input v-model="carInfo.purchasePrice" border="none" clearable placeholder="请输入新车购置价"
						placeholderStyle="text-align:right;">
					</u--input>
					<text class="suffixClass">元</text>
				</u-form-item>
			</template>


		</u--form>
		<!-- 使用性质 -->
		<u-picker :show="carnatureShow" :columns="natureOfVehicleUseoptions" keyName="label"
			@cancel="carnatureShow=false" @confirm="dictionaryConfirm($event, 'carNatureCode','carnatureShow')"
			@close="carnatureShow=false" :closeOnClickOverlay="true"></u-picker>
		<!-- 车辆种类 -->
		<u-picker :show="plateTypeShow" :columns="plateVehicleUseoptions" keyName="label" @cancel="plateTypeShow=false"
			@confirm="dictionaryConfirm($event, 'carKindCode','plateTypeShow')" @close="plateTypeShow=false"
			:closeOnClickOverlay="true"></u-picker>
		<!-- 所属性质 -->
		<u-picker :show="propertyShow" :columns="[filterepropertyOptions]" keyName="label" @cancel="propertyShow=false"
			@confirm="dictionaryConfirm($event, 'property', 'propertyShow')" @close="propertyShow=false"
			:closeOnClickOverlay="true" :defaultIndex="[0]"></u-picker>
		<!-- 能源种类 -->
		<u-picker :show="energyTypeShow" :columns="energyTypeoptions" keyName="label" @cancel="energyTypeShow=false"
			@confirm="dictionaryConfirm($event, 'energyTypeCode','energyTypeShow')" @close="energyTypeShow=false"
			:closeOnClickOverlay="true"></u-picker>
		<!-- 车辆用途 -->
		<u-picker v-if="carInfo.carNatureCode === '01'" :show="vehicleUseShow" :columns="businessVehicleUseoptions"
			keyName="label" @cancel="vehicleUseShow=false"
			@confirm="dictionaryConfirm($event, 'vehicleUseCode','vehicleUseShow')" @close="vehicleUseShow=false"
			:closeOnClickOverlay="true"></u-picker>
		<u-picker v-if="carInfo.carNatureCode === '02'" :show="vehicleUseShow" :columns="outOfBusinessVehicleUseoptions"
			keyName="label" @cancel="vehicleUseShow=false"
			@confirm="dictionaryConfirm($event, 'vehicleUseCode','vehicleUseShow')" @close="vehicleUseShow=false"
			:closeOnClickOverlay="true"></u-picker>
		<!-- 车辆类型 -->
		<u-picker :show="cartypeShow" :columns="trafficManagementVehicleTypeoptions" keyName="label"
			@cancel="cartypeShow=false" @confirm="dictionaryConfirm($event, 'carTypeCode','cartypeShow')"
			@close="cartypeShow=false" :closeOnClickOverlay="true"></u-picker>
		<!-- 车辆种类 -->
		<u-picker :show="cimodelclassShow" :columns="vehicleTypeoptions" keyName="label"
			@cancel="cimodelclassShow=false" @confirm="dictionaryConfirm($event, 'carKindCode','cimodelclassShow')"
			@close="cimodelclassShow=false" :closeOnClickOverlay="true"></u-picker>
		<u-datetime-picker :show="registerDateShow" v-model="registerDatevalue" mode="date" :formatter="formatter"
			@cancel="registerDateShow=false" @close="registerDateShow=false" :closeOnClickOverlay="true"
			@confirm="registerDateconfirm" confirmText="确定"></u-datetime-picker>
		<u-datetime-picker :show="issueDateShow" mode="date" v-model="issueDatevalue" :formatter="formatter"
			@cancel="issueDateShow=false" @confirm="issueDateconfirm" :closeOnClickOverlay="true"
			@close="issueDateShow=false" confirmText="确定"></u-datetime-picker>
	</view>
</template>

<script>
	var dateTime = new Date();
	let Year = dateTime.getFullYear();
	let Month = Number(dateTime.getMonth() + 1);
	export default {
		props: {
			carInfo: Object,
			currentPagePath: String,
			carInfos: Object,
			natureOfVehicleUseoptions: Array,
			plateVehicleUseoptions: Array,
			energyTypeoptions: Array,
			trafficManagementVehicleTypeoptions: Array,
			vehicleTypeoptions: Array,
			businessVehicleUseoptions: Array,
			outOfBusinessVehicleUseoptions: Array,
		},
		data() {
			return {
				registerDatevalue: Number(new Date()), //注册日期
				issueDatevalue: Number(new Date()), //发证日期
				registerDateShow: false, //注册日期
				issueDateShow: false, //发证日期
				carnatureShow: false, //使用性质
				propertyShow: false, //所属性质
				plateTypeShow: false, //车辆种类
				energyTypeShow: false,
				vehicleUseShow: false,
				cartypeShow: false,
				cimodelclassShow: false,
				carRules: {
					vinNo: [{
							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'],
					}],
					carNatureCode: [{
						required: true,
						message: '使用性质必选',
						trigger: 'change',
					}],
					energyTypeCode: [{
						required: true,
						message: '能源种类必选',
						trigger: 'change',
					}],
					vehicleUseCode: [{
						required: true,
						message: '车辆用途必选',
						trigger: 'change',
					}],
					carTypeCode: [{
						required: true,
						message: '车辆类型必选',
						trigger: 'change',
					}],
					carKindCode: [{
						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: '发证日期日期格式错误',
						}
					],
				},
				propertyoptions: [ //所属性质
					{
						value: "1",
						label: "个人",
					},
					{
						value: "2",
						label: "企业",
					}
				],
			}
		},
		computed: {
			filterepropertyOptions() {
				// 假设 isEnterpriseAllowed 是控制企业是否可选的字段
				return this.propertyoptions.filter(item => {
					if (item.label === "企业" && this.carInfo.vehicleUseCode == "05") {
						return false; // 企业不可选时移除
					} else {
						return true; // 企业不可选时移除
					}
					return true;
				});
			}
		},
		watch: {
			'carInfo.vehicleUseCode': {
				handler(val) {
					switch (val) {
						case '05':
							this.carInfo.property = '1';
							this.carInfos.property = '个人';
							break;

					}
				},
				deep: true
			},
		},
		mounted() {

		},
		methods: {
			toChooseVin(name) {
				this.$emit('toChooseVin', name)
			},
			toChooseVehicleType(name) {
				this.$emit('toChooseVehicleType', name)
			},
			upperCaseType(type) {
				this.carInfo[type] = this.carInfo[type].toUpperCase();

			},
			close() {
				this.registerDateShow = false;
			},
			registerDateconfirm(e) {
				this.carInfo.registerDate = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
				this.registerDateShow = false;
			},
			issueDateconfirm(e) {
				this.carInfo.issueDate = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
				this.issueDateShow = false;
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			// handlePropertyConfirm(e) {
			// 	const selected = this.propertyoptions.find(item => item.value === e.value[0].value);
			// 	if (selected?.disabled) {
			// 		uni.showToast({
			// 			title: '该选项不可选',
			// 			icon: 'none'
			// 		});
			// 		return;
			// 	}
			// 	this.dictionaryConfirm(e, 'property', 'propertyShow');
			// },
			//字典信息回显处理
			dictionaryConfirm(value, name, showName) {
				this.carInfo[name] = value.value[0].value;
				this.carInfos[name] = value.value[0].label;
				this[showName] = false;

			},
			validate(callback) {
				this.$refs.carForm.setRules(this.carRules)
				this.$refs.carForm.validate().then(res => {
					callback(res)
				}).catch(errors => {
					callback(errors)
				})
			}
		},
	}
</script>

<style scoped lang="scss">
	/* 添加样式 */
	.search {
		width: 112rpx;
		height: 60rpx;
		background: #FDE935;
		border-radius: 100rpx 100rpx 100rpx 100rpx;
	}

	.disabled {
		color: #ccc;
		pointer-events: none;
	}

	.suffixClass {
		margin-left: 10rpx;
		font-size: 30rpx;
	}
</style>