tqApp-webView/pagesVehDispatch/oilApply/index.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">
						
						<u-cell title="驾驶员" :border="true" :isLink="false" :clickable="false">
							<view slot="value" class="value">
								<u-form-item label="">
									{{renderItem(model.form,'driverName','--')}}
								</u-form-item>
							</view>	
						</u-cell>
						
						<u-cell title="所属部门" :border="true" :isLink="false" :clickable="false">
							<view slot="value" class="value">
								<u-form-item label="">
									{{renderItem(model.form,'deptName','--')}}
								</u-form-item>
							</view>	
						</u-cell>
						
						<template>
							<u-cell :border="true" :isLink="true" :clickable="true" class="hidde-cell-title"
								@click="$refs.carChooseRef.show()"
							>
								<view slot="value" class="value">
									<u-form-item label="车辆" prop="form.vehicleId" :required="true">
										<u--input
											:value="model.form.plate" 
											placeholder="请选择" 
											border="none"
											inputAlign="right"
											:disabled="true"
											disabledColor="none"
											:customStyle="{
												pointerEvents: 'none',
											}"
										>
										</u--input>
									</u-form-item>
								</view>	
							</u-cell>
							
							<tq-car-user ref="carChooseRef"
								@confirm="(data) => {
									model.form.vehicleId = data.id
									model.form.plate = data.label
									$refs.uForm.validateField('form.vehicleId')
								}"
							>
							</tq-car-user>
						</template>
						
						<template>
							<u-cell title="" :border="true" :isLink="true" :clickable="true" class="hidde-cell-title"
								@click="$refs.oilCityRef.show()"
							>
								<view slot="value" class="value">
									<u-form-item label="所在城市" prop="form.oilCity" :required="true">
										<u--input
											:value="model.form.oilCityName" 
											placeholder="请选择" 
											border="none"
											inputAlign="right"
											:disabled="true"
											disabledColor="none"
											:customStyle="{
												pointerEvents: 'none',
											}"
										>
										</u--input>
									</u-form-item>
								</view>	
							</u-cell>
							
							<tq-dict-select 
								ref="oilCityRef"
								dictType="ry_city"
								@confirm="(data) => {
									model.form.oilCity = data.dictValue
									model.form.oilCityName = data.dictLabel
									$refs.uForm.validateField('form.oilCity')
								}"
							>
							</tq-dict-select>
							
						</template>
						
						<template>
							<u-cell title="" :border="true" :isLink="true" class="hidde-cell-title"
								@click="$refs.oilTimeRef.show()"
							>
								<view slot="value" class="value">
									<u-form-item label="加油时间" prop="form.oilTime" :required="true">
										<u--input
											:value="model.form.oilTime" 
											placeholder="请选择" 
											border="none"
											inputAlign="right"
											:disabled="true"
											disabledColor="none"
											:customStyle="{
												pointerEvents: 'none',
											}"
										>
										</u--input>
									</u-form-item>
								</view>	
							</u-cell>
							<tq-date-time ref="oilTimeRef"
								mode="date"
								format="YYYY-MM-DD"
								@confirm="(data) => {
									model.form.oilTime = data
									$refs.uForm.validateField('form.oilTime')
								}"
							>
							</tq-date-time>
						</template>
									
					</view>
					
					<view class="box">
						<u-cell title="" :border="true" :isLink="false" :clickable="false" class="hidde-cell-title">
						    <view slot="value" class="value">
						        <u-form-item label="车辆里程表读数" prop="form.bordMile" :required="true">
						            <u--input v-model="model.form.bordMile" placeholder="请输入" border="none" type="number"
						                :clearable="true"
						                inputAlign="right" maxlength="20">
						            </u--input>
						        </u-form-item>
						    </view>
						</u-cell>
						
						<template>
							<u-cell title="" :border="true" :isLink="true" :clickable="true" class="hidde-cell-title"
								@click="$refs.oliTypeRef.show()"
							>
								<view slot="value" class="value">
									<u-form-item label="油品/油号" prop="form.oliType" :required="true">
										<u--input
											:value="model.form.oliTypeName" 
											placeholder="请选择" 
											border="none"
											inputAlign="right"
											:disabled="true"
											disabledColor="none"
											:customStyle="{
												pointerEvents: 'none',
											}"
										>
										</u--input>
									</u-form-item>
								</view>	
							</u-cell>
							
							<tq-dict-select 
								ref="oliTypeRef"
								dictType="oil_type"
								@confirm="(data) => {
									model.form.oliType = data.dictValue
									model.form.oliTypeName = data.dictLabel
									$refs.uForm.validateField('form.oliType')
								}"
							>
							</tq-dict-select>
							
						</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.oliPrise" :required="true">
						            <u--input v-model="model.form.oliPrise" placeholder="请输入" border="none" type="number"
						                :clearable="true"
						                inputAlign="right" maxlength="20">
						            </u--input>
						        </u-form-item>
						    </view>
						</u-cell>
						
						<u-cell title="" :border="true" :isLink="false" :clickable="false" class="hidde-cell-title">
						    <view slot="value" class="value">
						        <u-form-item label="加油升数(升)" prop="form.oilVal" :required="true">
						            <u--input v-model="model.form.oilVal" placeholder="请输入" border="none" type="number"
						                :clearable="true"
						                inputAlign="right" maxlength="20">
						            </u--input>
						        </u-form-item>
						    </view>
						</u-cell>
						
						<u-cell title="" :border="true" :isLink="false" :clickable="false" class="hidde-cell-title">
						    <view slot="value" class="value">
						        <u-form-item label="加油金额(元)" prop="form.oilCost" :required="true">
						            <u--input v-model="model.form.oilCost" placeholder="请输入" border="none" type="number"
						                :clearable="true"
						                inputAlign="right" maxlength="20">
						            </u--input>
						        </u-form-item>
						    </view>
						</u-cell>
						
					</view>
					
					<view class="box">
						
						<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.bordMilePic" :required="true">
						            <view slot="label" class="item-label">
						                <view class="item-label-left">
						                    <text>*</text>
						                    上传车辆里程表与加油票据（ {{ model.form.bordMilePic ? model.form.bordMilePic.split(',').length : 0 }}/6）
						                </view>
						                <!-- <view class="item-label-right">
						                   
						                </view> -->
						            </view>
						            <view style="margin-top: 30rpx;">
						                <tq-upload-img v-model="model.form.bordMilePic" :maxCount="6" 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.receipt" :required="true">
						            <view slot="label" class="item-label">
						                <view class="item-label-left">
						                    <text>*</text>
						                    上传加油票据（ {{ model.form.receipt ? model.form.receipt.split(',').length : 0 }}/6）
						                </view>
						    
						            </view>
						            <view style="margin-top: 30rpx;">
						                <tq-upload-img v-model="model.form.receipt" :maxCount="6" 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.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> 
						
						
					</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 {addItem,detail,updateItem} from '@/api/vehDispatch/oilApply.js'
import {clearProps,copyProps,minuteToTime} from '@/utils/gdtq.js'

export default {
	components: {
	},
	data() {
		return {
			model: {
				  form: {
					  
					  id: '',
					  driverId: '',
					  driverName: '',
					  deptId: '',
					  deptName: "",
					  vehicleId: "",
					  plate: "",
					  oilCity: "",
					  oilCityName: "",
					  oilTime: "",
					  bordMile: "",
					  oliType: "",
					  oliTypeName: "",
					  oliPrise: "",
					  oilVal: "",
					  oilCost: "",
					  bordMilePic: "",
					  receipt: "",

					  remark: '',
	
				  }
			},
			rules: {
				'form.bordMile': [
					{
						type: 'string' ,
						required: true,
						message: '请输入',
						trigger: ['blur', 'change']
					},	
					{
						
						pattern: /^\d+(\.\d{1,2})?$/,
						// 正则检验前先将值转为字符串
						transform(value) {
							return value?String(value):0;
						},
						message: '需为正数且最多两位小数',
						// 触发器可以同时用blur和change
						trigger: ['change','blur'],
					}
					/* {
						pattern: /^[0-9]\d*$/g,
						// 正则检验前先将值转为字符串
						transform(value) {
							return String(value);
						},
						message: '请输入正整数',
						// 触发器可以同时用blur和change
						trigger: ['change','blur'],
					} */
				],
				'form.oliPrise': [
					{
						type: 'string' ,
						required: true,
						message: '请输入',
						trigger: ['blur', 'change']
					},	
					{
						
						pattern: /^\d+(\.\d{1,2})?$/,
						// 正则检验前先将值转为字符串
						transform(value) {
							return value?String(value):0;
						},
						message: '需为正数且最多两位小数',
						// 触发器可以同时用blur和change
						trigger: ['change','blur'],
					}
				],
				'form.oilVal': [
					{
						type: 'string' ,
						required: true,
						message: '请输入',
						trigger: ['blur', 'change']
					},	
					{
						
						pattern: /^\d+(\.\d{1,2})?$/,
						// 正则检验前先将值转为字符串
						transform(value) {
							return value?String(value):0;
						},
						message: '需为正数且最多两位小数',
						// 触发器可以同时用blur和change
						trigger: ['change','blur'],
					}
				],
				'form.oilCost': [
					{
						type: 'string' ,
						required: true,
						message: '请输入',
						trigger: ['blur', 'change']
					},	
					{
						
						pattern: /^\d+(\.\d{1,2})?$/,
						// 正则检验前先将值转为字符串
						transform(value) {
							return value?String(value):0;
						},
						message: '需为正数且最多两位小数',
						// 触发器可以同时用blur和change
						trigger: ['change','blur'],
					}
				],
				'form.oliType': [
					{
						type: 'string',
						required: true,
						message: '请选择',
						trigger: ['blur', 'change']
					},	
				],
				'form.oilTime': [
					{
						type: 'string',
						required: true,
						message: '请选择',
						trigger: ['blur', 'change']
					},	
				],
				
				'form.vehicleId': [
					{
						type: 'number',
						required: true,
						message: '请选择',
						trigger: ['blur', 'change']
					},	
				],
				'form.oilCity': [
					{
						type: 'number',
						required: true,
						message: '请选择',
						trigger: ['blur', 'change']
					},	
				],
				'form.bordMilePic': [
					{
						type: 'string',
						required: true,
						message: '请选择',
						trigger: ['blur', 'change']
					},	
				],
				'form.receipt': [
					{
						type: 'string',
						required: true,
						message: '请选择',
						trigger: ['blur', 'change']
					},	
				],
				
				
			},
			
			userInfo: null,
			
			editType: 'add', //add-新增  update-编辑
		}
	},
	

	onLoad({id,type}) {
		
		if(type) this.editType = type

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

		async getInfo(id) {
			let {code,data} = await detail({id})
			if(code == 0) {
				copyProps(this.model.form,data)
				
			}
		},
		getUserInfo() {
			userProfile().then((res) => {
				this.userInfo = res.data
				this.model.form.driverId = res.data.userId
				this.model.form.driverName = res.data.nickName
				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 api = {
						'add': addItem,
						'update': updateItem,
					}
					
					
					uni.showModal({
						title: '提示',
						content: `加油登记提交后不可再次修改，请确认是否提交?`,
						showCancel:true,
						confirmText: '确认',
						success:  async (res)  => {
							if (res.confirm) {
								let  { data, code,msg }  = await api[this.editType](ajaxData)

								  if (code == 0) {	
										uni.switchTab({url: '/pages/index/index'})
								  }	
							}
						}
					})
				
				  
			  }).catch(errors => {
				  console.log('校验失败',errors)
			  })
		},
		handleClear() {
			
			// clearProps(this.model.form,[])
			uni.navigateBack()
		},
		
	}
}
</script>

<style lang="scss" scoped>
.page-container {
	
	font-size: 28rpx;
	min-height: 100%;
	position: relative;
	// padding-bottom: 60rpx;
	
	.box {
		margin: 20rpx;
		border-radius: 10rpx;
		background: #fff;
	}
	.page-body {
		padding-bottom: 120rpx;
		
		.box {
			margin: 24rpx 24rpx 0;
			padding: 20rpx;
			border-radius: 20rpx;
			background: #fff;
			border: 1rpx solid #EBEDF0;
			
			.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: 28rpx;
					color: #333333;
					text-align: right;
					width: 100%;
				}
			}
		}
	}
	.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>