tqApp-webView/pagesBase/vehManage/add.vue

<template>
	<view class="page-container">
		<view class="page-body">
			<u--form label-width="auto" labelAlign="left"
				ref="uForm"
				:model="model"
				:rules="rules"
				:labelStyle="{
					fontSize: '28rpx',
					fontWeight: '500',
				}"
			>
				<u-cell-group :border="false">
					<view class="box">
						
						<template v-if="hasPlat(['sanitation'])">
							<u-cell :border="true" :isLink="true" :clickable="false" class="hidde-cell-title"
								@click="$refs.coverageRef.show()"
							>
								<view slot="value" class="value">
									<u-form-item label="所属行政区" prop="form.areaCode" :required="true">
										<u--input
											:value="model.form.areaName" 
											placeholder="请选择" 
											border="none"
											inputAlign="right"
											:disabled="true"
											disabledColor="none"
											:customStyle="{
												pointerEvents: 'none',
											}"
										>
										</u--input>
									</u-form-item>
								</view>	
							</u-cell>
							
							<tq-area-coverage ref="coverageRef"
								@confirm="(data) => {
									model.form.areaCode = data.code
									model.form.areaName = data.areaName
								}"
							>
							</tq-area-coverage>
						</template>
						
						<template>
							<u-cell :border="true" :isLink="true" :clickable="false" class="hidde-cell-title"
								@click="$refs.deptChooseRef.show()"
							>
								<view slot="value" class="value">
									<u-form-item label="所属单位" prop="form.deptId" :required="true">
										<u--input
											:value="model.form.deptName" 
											placeholder="请选择" 
											border="none"
											inputAlign="right"
											:disabled="true"
											disabledColor="none"
											:customStyle="{
												pointerEvents: 'none',
											}"
										>
										</u--input>
									</u-form-item>
								</view>	
							</u-cell>
							
							<tq-dept ref="deptChooseRef"
								@confirm="(data) => {
									model.form.deptId = data.deptId
									model.form.deptName = data.deptName
								}"
							>
							</tq-dept>
						</template>
						
						<template>
							<u-cell title="" :border="true" :isLink="false" :clickable="false" class="hidde-cell-title">
								<view slot="value" class="value">
									<u-form-item label="车牌号" prop="form.plate" :required="true">
										<u--input
											v-model="model.form.plate" 
											placeholder="请输入" 
											border="none"
											type="text"
											:clearable="true"
											inputAlign="right"
											maxlength="10"
										>
										</u--input>
									</u-form-item>
								</view>	
							</u-cell> 
						</template>
						
						<template>
							<u-cell :border="true" :isLink="true" :clickable="false" class="hidde-cell-title"
								@click="$refs.workTypeRef.show()"
							>
								<view slot="value" class="value">
									<u-form-item label="作业类型" prop="form.workId" :required="true">
										<u--input
											:value="model.form.workName" 
											placeholder="请选择" 
											border="none"
											inputAlign="right"
											:disabled="true"
											disabledColor="none"
											:customStyle="{
												pointerEvents: 'none',
											}"
										>
										</u--input>
									</u-form-item>
								</view>	
							</u-cell>
							
							<tq-work-type ref="workTypeRef"
								@confirm="(data) => {
									model.form.workId = data.id
									model.form.workName = data.name
								}"
							>
							</tq-work-type>
						</template>
						
						<template>
							<u-cell :border="true" :isLink="true" :clickable="false" class="hidde-cell-title"
								@click="$refs.vehTypeRef.show()"
							>
								<view slot="value" class="value">
									<u-form-item label="车辆类型" prop="form.vehType" :required="true">
										<u--input
											:value="model.form.vehTypeName" 
											placeholder="请选择" 
											border="none"
											inputAlign="right"
											:disabled="true"
											disabledColor="none"
											:customStyle="{
												pointerEvents: 'none',
											}"
										>
										</u--input>
									</u-form-item>
								</view>	
							</u-cell>
							
							<tq-select ref="vehTypeRef"
								:workTypeId="model.form.workId"
								api="dropDown"
								@confirm="(data) => {
									model.form.vehType = data.value
									model.form.vehTypeName = data.label
								}"
							>
							</tq-select>
						</template>
						
						<template>
							<u-cell title="" :border="true" :isLink="false" :clickable="false" class="hidde-cell-title">
								<view slot="value" class="value">
									<u-form-item label="车辆载重" prop="form.loadWeight" :required="false">
										<u--input
											v-model="model.form.loadWeight" 
											placeholder="请输入" 
											border="none"
											type="number"
											:clearable="true"
											inputAlign="right"
											maxlength="10"
										>
										</u--input>
									</u-form-item>
								</view>	
							</u-cell> 
						</template>
						
						<template>
							<u-cell title="绑定驾驶员" :border="true" :isLink="true" :clickable="false"
								@click="$refs.userChooseRef.show()"
							>
								<view slot="value">
									<u-form-item label="">
										<u--input
											:value="model.form.driverName" 
											placeholder="请选择" 
											border="none"
											inputAlign="right"
											:disabled="true"
											disabledColor="none"
											:customStyle="{
												pointerEvents: 'none',
											}"
										>
										</u--input>
									</u-form-item>
								</view>	
							</u-cell>
							
							<tq-car-user ref="userChooseRef"
								:isGetIcon="false"
								:queryType="3"
								@confirm="(data) => {
									model.form.driverId = data.id
									model.form.driverName = data.label
								}"
							>
							</tq-car-user>
						</template>
						
	
						<template>
							<u-cell :border="true" :isLink="true" :clickable="true" class="hidde-cell-title"
								@click="$refs.selectRef.show()"
							>
								<view slot="value" class="value">
									<u-form-item label="车辆使用状态" prop="form.useStatus" :required="false">
										<u--input
											:value="model.form.useStatusName" 
											placeholder="请选择" 
											border="none"
											inputAlign="right"
											:disabled="true"
											disabledColor="none"
											:customStyle="{
												pointerEvents: 'none',
											}"
										>
										</u--input>
									</u-form-item>
								</view>	
							</u-cell>
							
							<tq-dict-select ref="selectRef"
								dictType="vehicle_use_sts"
								@confirm="(data) => {
									model.form.useStatus = data.dictValue
									model.form.useStatusName = data.dictLabel
									$refs.uForm.validateField('form.useStatus')
								}"
							>
							</tq-dict-select>
							
						</template>
						

						<template v-if="hasPlat(['enterprises'])">
							<u-cell title="" :border="true" :isLink="false" :clickable="false" class="hidde-cell-title">
								<view slot="value" class="value">
									<u-form-item label="品牌" prop="form.vehBrand" :required="false">
										<u--input
											v-model="model.form.vehBrand" 
											placeholder="请输入" 
											border="none"
											type="text"
											:clearable="true"
											inputAlign="right"
											maxlength="20"
										>
										</u--input>
									</u-form-item>
								</view>	
							</u-cell> 
						</template>
						
						<template v-if="hasPlat(['enterprises'])">
							<u-cell title="" :border="true" :isLink="false" :clickable="false" class="hidde-cell-title">
								<view slot="value" class="value">
									<u-form-item label="车辆颜色" prop="form.vehColor" :required="false">
										<u--input
											v-model="model.form.vehColor" 
											placeholder="请输入" 
											border="none"
											type="text"
											:clearable="true"
											inputAlign="right"
											maxlength="20"
										>
										</u--input>
									</u-form-item>
								</view>	
							</u-cell> 
						</template>
						
						<template v-if="hasPlat(['enterprises'])">
							
							<u-cell title="" :border="true" :isLink="true" class="hidde-cell-title"
								@click="$refs.buyTimeRef.show()"
							>
								<view slot="value" class="value">
									<u-form-item label="购置时间" prop="form.buyTime" :required="false">
										<u--input
											:value="model.form.buyTime" 
											placeholder="请选择" 
											border="none"
											inputAlign="right"
											:disabled="true"
											disabledColor="none"
											:customStyle="{
												pointerEvents: 'none',
											}"
										>
										</u--input>
									</u-form-item>
								</view>	
							</u-cell>
							<tq-date-time ref="buyTimeRef"
								mode="date"
								format="YYYY-MM-DD"
								@confirm="(data) => {
									model.form.buyTime = data
								}"
							>
							</tq-date-time>
							
						</template>
						
						
						
						<u-cell :border="false" :isLink="false" :clickable="false" class="hidde-cell-title">
							<view slot="value" class="value">
								<u-form-item label="备注" labelPosition="top" prop="form.remark" :required="false">
									<u--textarea
										v-model="model.form.remark" 
										placeholder="请输入备注" 
										border="none"
										:count="true"
										maxlength="200"
									>
									</u--textarea>
								</u-form-item>
							</view>	
						</u-cell> 
						
						<u-cell title="" :border="false" :isLink="false" :clickable="false" class="hidde-cell-title">
							<view slot="value" class="value">
								<u-form-item label="上传照片" labelPosition="top" prop="form.imageUrl" :required="true">
									<view slot="label" class="item-label">
										<view class="item-label-left">
											<!-- <text>*</text> -->
											车辆照片
										</view>
										<view  class="item-label-right">{{model.form.imageUrl?model.form.imageUrl.split(',').length:0}}/1</view>
									</view>
									<view style="margin-top: 30rpx;">
										<tq-upload-img
											v-model="model.form.imageUrl"
											:maxCount="1"
											width="80"
											height="80"
											uploadText=""
										>	
										</tq-upload-img>
									</view>
								</u-form-item>
							</view>	
						</u-cell> 
						
					</view>
					
					<view class="box">
						<template>
							<u-cell title="" :border="true" :isLink="false" :clickable="false" class="hidde-cell-title">
								<view slot="value" class="value">
									<u-form-item label="行驶证号" prop="form.drivingPermitCode" :required="false">
										<u--input
											v-model="model.form.drivingPermitCode" 
											placeholder="请输入" 
											border="none"
											type="text"
											:clearable="true"
											inputAlign="right"
											maxlength="20"
										>
										</u--input>
									</u-form-item>
								</view>	
							</u-cell> 
						</template>
						
						<template>
							<u-cell title="" :border="true" :isLink="false" :clickable="false" class="hidde-cell-title">
								<view slot="value" class="value">
									<u-form-item label="道路运输证号" prop="form.transportCode" :required="false">
										<u--input
											v-model="model.form.transportCode" 
											placeholder="请输入" 
											border="none"
											type="text"
											:clearable="true"
											inputAlign="right"
											maxlength="20"
										>
										</u--input>
									</u-form-item>
								</view>	
							</u-cell> 
						</template>
						
						<template>
							<u-cell title="" :border="true" :isLink="false" :clickable="false" class="hidde-cell-title">
								<view slot="value" class="value">
									<u-form-item label="每行走里程保养(km）" prop="form.intervalMile" :required="false">
										<u--input
											v-model="model.form.intervalMile" 
											placeholder="请输入" 
											border="none"
											type="number"
											:clearable="true"
											inputAlign="right"
											maxlength="10"
										>
										</u--input>
									</u-form-item>
								</view>	
							</u-cell> 
						</template>
						
						<template>
							<u-cell title="" :border="true" :isLink="false" :clickable="false" class="hidde-cell-title">
								<view slot="value" class="value">
									<u-form-item label="初始里程(km）" prop="form.startMile" :required="false">
										<u--input
											v-model="model.form.startMile" 
											placeholder="请输入" 
											border="none"
											type="number"
											:clearable="true"
											inputAlign="right"
											maxlength="10"
										>
										</u--input>
									</u-form-item>
								</view>	
							</u-cell> 
						</template>
						
						<template>
							<u-cell title="" :border="true" :isLink="true" class="hidde-cell-title"
								@click="$refs.maintainRef.show()"
							>
								<view slot="value" class="value">
									<u-form-item label="保养到期" prop="form.maintain" :required="false">
										<u--input
											:value="model.form.maintain" 
											placeholder="请选择" 
											border="none"
											inputAlign="right"
											:disabled="true"
											disabledColor="none"
											:customStyle="{
												pointerEvents: 'none',
											}"
										>
										</u--input>
									</u-form-item>
								</view>	
							</u-cell>
							<tq-date-time ref="maintainRef"
							mode="date"
								format="YYYY-MM-DD"
								@confirm="(data) => {
									model.form.maintain = data
								}"
							>
							</tq-date-time>
							
						</template>
						
						<template>
							<u-cell title="" :border="true" :isLink="true" class="hidde-cell-title"
								@click="$refs.bxDateRef.show()"
							>
								<view slot="value" class="value">
									<u-form-item label="保险到期" prop="form.bxDate" :required="false">
										<u--input
											:value="model.form.maintain" 
											placeholder="请选择" 
											border="none"
											inputAlign="right"
											:disabled="true"
											disabledColor="none"
											:customStyle="{
												pointerEvents: 'none',
											}"
										>
										</u--input>
									</u-form-item>
								</view>	
							</u-cell>
							<tq-date-time ref="bxDateRef"
							mode="date"
								format="YYYY-MM-DD"
								@confirm="(data) => {
									model.form.bxDate = data
								}"
							>
							</tq-date-time>
							
						</template>
						
						<template>
							<u-cell title="" :border="true" :isLink="true" class="hidde-cell-title"
								@click="$refs.yearCheckRef.show()"
							>
								<view slot="value" class="value">
									<u-form-item label="年检到期" prop="form.bxDate" :required="false">
										<u--input
											:value="model.form.yearCheck" 
											placeholder="请选择" 
											border="none"
											inputAlign="right"
											:disabled="true"
											disabledColor="none"
											:customStyle="{
												pointerEvents: 'none',
											}"
										>
										</u--input>
									</u-form-item>
								</view>	
							</u-cell>
							<tq-date-time ref="yearCheckRef"
							mode="date"
								format="YYYY-MM-DD"
								@confirm="(data) => {
									model.form.yearCheck = data
								}"
							>
							</tq-date-time>
							
						</template>
						
						<template>
							<u-cell title="" :border="true" :isLink="true" class="hidde-cell-title"
								@click="$refs.serviceDateRef.show()"
							>
								<view slot="value" class="value">
									<u-form-item label="服务到期" prop="form.bxDate" :required="false">
										<u--input
											:value="model.form.serviceDate" 
											placeholder="请选择" 
											border="none"
											inputAlign="right"
											:disabled="true"
											disabledColor="none"
											:customStyle="{
												pointerEvents: 'none',
											}"
										>
										</u--input>
									</u-form-item>
								</view>	
							</u-cell>
							<tq-date-time ref="serviceDateRef"
							mode="date"
								format="YYYY-MM-DD"
								@confirm="(data) => {
									model.form.serviceDate = data
								}"
							>
							</tq-date-time>
							
						</template>
						
						<u-cell title="" :border="false" :isLink="false" :clickable="false" class="hidde-cell-title">
							<view slot="value" class="value">
								<u-form-item label="" labelPosition="top" prop="form.drivingPermitUrl" :required="true">
									<view slot="label" class="item-label">
										<view class="item-label-left">
											<!-- <text>*</text> -->
											行驶证扫描件
										</view>
										<view  class="item-label-right">{{model.form.drivingPermitUrl?model.form.drivingPermitUrl.split(',').length:0}}/1</view>
									</view>
									<view style="margin-top: 30rpx;">
										<tq-upload-img
											v-model="model.form.drivingPermitUrl"
											:maxCount="1"
											width="80"
											height="80"
											uploadText=""
										>	
										</tq-upload-img>
									</view>
								</u-form-item>
							</view>	
						</u-cell> 
						
						<u-cell title="" :border="false" :isLink="false" :clickable="false" class="hidde-cell-title">
							<view slot="value" class="value">
								<u-form-item label="" labelPosition="top" prop="form.transportFileUrl" :required="true">
									<view slot="label" class="item-label">
										<view class="item-label-left">
											<!-- <text>*</text> -->
											道路运输证扫描件
										</view>
										<view  class="item-label-right">{{model.form.transportFileUrl?model.form.transportFileUrl.split(',').length:0}}/1</view>
									</view>
									<view style="margin-top: 30rpx;">
										<tq-upload-img
											v-model="model.form.transportFileUrl"
											:maxCount="1"
											width="80"
											height="80"
											uploadText=""
										>	
										</tq-upload-img>
									</view>
								</u-form-item>
							</view>	
						</u-cell> 
					</view>
						
					
				</u-cell-group>
				
			</u--form>
		</view>
		
		<view class="page-footer">
			<u-row style="margin-top: 40rpx;">
				<u-col :span="6">
		
					<u-button type="info" shape="" :hairline="false" :custom-style="{
							width: '100%',
							borderRadius: '0',
							background: '#FFF',
							height: '100rpx',
							fontSize: '32rpx',
							fontWeight: '500',
						  }" @click="handleClear">返回
					</u-button>
					
				</u-col>	
				<u-col :span="6">
					
					
					<u-button type="primary" shape="" :hairline="false" 
					:custom-style="{
									width: '100%',
									borderRadius: '0',
									height: '100rpx',
									fontSize: '32rpx',
									fontWeight: '500',
					  background:'linear-gradient(to right, #41B5FF, #4573FC)'
						  }" @click="handleSubmit">提交
					</u-button>
				</u-col>
			</u-row>
		</view>
	</view>
</template>

<script>
import {userProfile} from '@/api/common/user.js'
import {add,update,getDetail} from '@/api/system/vehicle.js'
import {clearProps,copyProps} from '@/utils/gdtq.js'
import {isEmpty} from 'lodash'

export default {
	components: {
	},
	data() {
		return {
			model: {
				  form: {
					  vehicleId: "",
					areaCode: "",
					areaName: "",		
					deptId: "",
					deptName: "",
					plate: '',
					workId: '',
					workName: '',
					vehType: '',
					vehTypeName: '',
					loadWeight: '',
					driverId: "",
					driverName: "",
					useStatus: "",
					useStatusName: "",
					vehBrand: "",
					vehColor: "",
					buyTime: "",
					remark: "",
					imageUrl: "",
					
					drivingPermitCode: "",
					transportCode: "",
					intervalMile: "",
					startMile: "",
					maintain: "",
					bxDate: "",
					yearCheck: "",
					serviceDate: "",
					serviceDate: "",
					drivingPermitUrl: "",
					transportFileUrl: "",

				  }
			},
			rules: {
				
				'form.areaCode': [
					{
						type: 'string',
						required: true,
						message: '请选择所属行政区',
						trigger: ['blur', 'change']
					},	
				],
				'form.deptId': [
					{
						type: 'string',
						required: true,
						message: '请选择所属单位',
						trigger: ['blur', 'change']
					},	
				],
				'form.plate': [
					{
						type: 'string',
						required: true,
						message: '请输入车牌号',
						trigger: ['blur', 'change']
					},	
				],
				'form.workId': [
					{
						type: 'string',
						required: true,
						message: '请选择作业类型',
						trigger: ['blur', 'change']
					},	
				],
				'form.vehType': [
					{
						type: 'number',
						required: true,
						message: '请选择车辆类型',
						trigger: ['blur', 'change']
					},	
				],
				'form.loadWeight': [
				
					{
	
						pattern: /^\d+(\.\d{1,2})?$/,
						// 正则检验前先将值转为字符串
						transform(value) {
							return value?String(value):0;
						},
						message: '车辆载重需为正数且最多两位小数',
						// 触发器可以同时用blur和change
						trigger: ['change','blur'],
					}
				],
				'form.intervalMile': [
					
					{
		
						pattern: /^\d+(\.\d{1,2})?$/,
						// 正则检验前先将值转为字符串
						transform(value) {
							return value?String(value):0;
						},
						message: '里程需为正数且最多两位小数',
						// 触发器可以同时用blur和change
						trigger: ['change','blur'],
					}
				],
				'form.startMile': [
					
					{
		
						pattern: /^\d+(\.\d{1,2})?$/,
						// 正则检验前先将值转为字符串
						transform(value) {
							return value?String(value):0;
						},
						message: '里程需为正数且最多两位小数',
						// 触发器可以同时用blur和change
						trigger: ['change','blur'],
					}
				],

			},

			
			userInfo: null,
		}
	},
	onLoad({id}) {
		// console.log(id,'id')

		if(id) {
			this.getInfo(id)
		} else {
			// this.getUserInfo()
		}
		
	},
	onShow() {
		
	},
	onHide() {
		
	},
	onReady() {	
		this.resetRules()
	},
	methods: {
		
		resetRules() {
			this.$refs.uForm.setRules(this.rules)		
			
		},
		

		async getInfo(vehicleId) {
			let {code,data} = await getDetail({vehicleId})
			if(code == 0) {
				for (let key in this.model.form) {
					if (key === 'workId') {
						let workIdArr = data[key] ? data[key].split(',') : [];
						this.model.form[key] = workIdArr[workIdArr.length - 1]
					} else {
						this.model.form[key] = this.isNull(data[key]) ? undefined : data[key]
					}
				}
								
				// copyProps(this.model.form,data)
			}
		},
		getUserInfo() {
			userProfile().then((res) => {
				this.userInfo = res.data
				
	
				this.model.form.deptId = res.data.deptId
				this.model.form.deptName = res.data.deptName
			})
		},
		// 提交
		async handleSubmit() {
			
	
			  this.$refs.uForm.validate().then(async res => {
				  
					  
					  let ajaxData = {
						  ...this.model.form,
					  }
					
					  let { data, code,msg } =ajaxData.vehicleId? await update(ajaxData) : await add(ajaxData) 
					  
					  if (code == 0) {
							
							uni.showModal({
								title: '提示',
								content: `提交成功~`,
								showCancel:false,
								confirmText: '好的',
								success: function(res) {
									if (res.confirm) {
										uni.navigateTo({url: `/pagesBase/vehManage/index`})
									}
								}
							})
							
					  }	
				  
			  }).catch(errors => {
				  console.log('校验失败',errors)
			  })
		},
		handleClear() {
			uni.navigateBack()
			// clearProps(this.model.form,['outflowUserId','outflowUser','deptId','deptName'])
		},
		
	}
}
</script>

<style lang="scss" scoped>
	.disflex-center {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.disflex-right {
		display: flex;
		justify-content: right;
		align-items: center;
	}
.page-container {
	
	font-size: 28rpx;
	min-height: 100%;
	position: relative;
	// padding-bottom: 60rpx;
	
	.box {
		margin: 20rpx;
		border-radius: 10rpx;
		background: #fff;
		
		.item-label {
			display: flex;
			justify-content: space-between;
			align-items: center;
			&-left {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				position: relative;
				text {
					color: #f56c6c;
					font-size: 40rpx;
					position: absolute;
					left: -18rpx;
				}
			}
			&-right {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 20rpx;
				color: #999999;
			}
		}
	}
	.page-body {
		padding-bottom: 120rpx;
	}
	.page-footer {
		padding: 0rpx 0;
		position: fixed;
		width: 100%;
		left: 0;
		bottom: 0;
	}
}	


::v-deep {
	.u-cell-group {
		.u-cell__title-text {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
		}
		
		.u-form-item__body__right__content__slot {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			
			.u-input__content__field-wrapper__field {
				font-family: PingFangSC, PingFang SC !important;
				font-weight: 400 !important;
				font-size: 28rpx !important;
				color: #333333 !important;
			}
		}
	}
	
	.u-form-item__body {
		padding: 0;
	}
	.hidde-cell-title {
		
		.u-cell__body__content {
			width: auto;
			flex: none;
			
		}
		.u-cell__body {
			.value {
				flex: 1;
			}
		}
		
	}
	
}
</style>