tqApp-webView/pagesMine/driverTask/module/operForm.vue

<template>
    <u-popup :show="isShow" @close="close" mode="bottom" :closeOnClickOverlay="true">
		<view class="page-container">
			<view class="page-head">
				<text>是否确认{{model.form.exType==1?`开始`:`结束`}}任务？</text>
			</view>
			<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">
						
						<template>
							<u-cell title="" :border="false" :isLink="false" class="hidde-cell-title"
								@click="$refs.realTimeRef.show()"
							>
								<view slot="value" class="value">
									<u-form-item :label="`${model.form.exType==1?`实际出发时间`:`实际结束时间`}`" labelPosition="top" prop="form.realTime" :required="true">
										<u--input
											:value="model.form.realTime" 
											placeholder="请选择" 
											border="surround"
											inputAlign="center"
											:disabled="true"
											disabledColor="none"
											:customStyle="{
												pointerEvents: 'none',
												'marginTop': '20rpx',
											}"
										>
										</u--input>
									</u-form-item>
								</view>	
							</u-cell>
							<tq-date-time ref="realTimeRef"
								:disEndDate="renderItem(model.form,'planEndTime','')"
								@confirm="(data) => {
									model.form.realTime = data
									$refs.uForm.validateField('form.realTime')
								}"
							>
							</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="`${model.form.exType==1?`实际出发地`:`实际目的地`}`" labelPosition="top" prop="form.realAddr" :required="true">
									<u--input
										v-model="model.form.realAddr" 
										placeholder="请输入" 
										border="surround"
										type="text"
										inputAlign="center"
										maxlength="100"
										:clearable="true"
										:customStyle="{
											'marginTop': '20rpx',
										}"
									>
									</u--input>
								</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.boardMile" :required="true">
									<u--input
										v-model="model.form.boardMile" 
										placeholder="请输入" 
										border="surround"
										type="number"
										inputAlign="center"
										maxlength="12"
										:clearable="true"
										:customStyle="{
											'marginTop': '20rpx',
										}"
									>
									</u--input>
								</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="`当前码表照（${model.form.boardMilePic?model.form.boardMilePic.split(',').length:0}/6）`" 
									labelPosition="top" prop="form.boardMilePic" :required="true"
								>
									<tq-upload-img
										v-model="model.form.boardMilePic"
										style="margin-top: 20rpx;"
										@confirm="() => {
											$refs.uForm.validateField('form.boardMilePic')
										}"
									>
										
									</tq-upload-img>
								</u-form-item>
							</view>	
						</u-cell> 
						
						<template v-if="model.form.exType==2">
							<u-cell title="" :border="false" :isLink="false" :clickable="false" class="hidde-cell-title">
								<view slot="value" class="value">
									<u-form-item :label="`车辆照片（${model.form.vehPic?model.form.vehPic.split(',').length:0}/6）`" 
										labelPosition="top" prop="form.vehPic" :required="false"
									>
										<tq-upload-img
											v-model="model.form.vehPic"
											style="margin-top: 20rpx;"
						
										>
											
										</tq-upload-img>
									</u-form-item>
								</view>	
							</u-cell> 
						</template>
						
					</u-cell-group> -->
					
				</u--form>
			</view>
		
			<view class="page-footer">
				<u-row style="">
					<u-col :span="6">
						<u-button type="info" shape="" :hairline="false" :custom-style="{
								width: '100%',
								borderRadius: '0',
								background: '#F2f2f2',
							  }" @click="close">取消
						</u-button>
					</u-col>	
					<u-col :span="6">
						
						<u-button type="primary" shape="" :hairline="false" :custom-style="{
								width: '100%',
								borderRadius: '0',
							  }" @click="handleSubmit">确认
						</u-button>
					</u-col>
				</u-row>
				
			</view>
		</view>
	</u-popup>
</template>

<script>
import { driverExTask } from "@/api/mine/driverTask.js";
import {copyProps,clearProps} from '@/utils/gdtq.js'

export default {
    data() {
        return {
			isShow: false,
			model: {
				  form: {
					taskId: '',
					/* realTime: "",
					realAddr: '',
					boardMile: '',
					boardMilePic: '',
					vehPic: '', */
					exType: '',
				  }
			},
			rules: {
				'form.realTime': {
					type: 'string',
					required: true,
					message: '请选择',
					trigger: ['blur', 'change']
				},	
				'form.realAddr': {
					type: 'string',
					required: true,
					message: '请输入',
					trigger: ['blur', 'change']
				},	
				'form.boardMile': [
					{
						type: 'string',
						required: true,
						message: '请输入',
						trigger: ['blur', 'change']
					},
					{
						pattern: /^\d+(\.\d{1,2})?$/g,
						// 正则检验前先将值转为字符串
						transform(value) {
							return String(value);
						},
						message: '只能输入两位小数的正数',
						trigger: ['blur', 'change']
					},
					
				],	
				'form.boardMilePic': {
					min: 1,
					type: 'string',
					required: true,
					message: '请上传当前码表照',
					trigger: ['blur', 'change']
				},	
				
			},	
        }
    },
	mounted() {
		
	},
	
	onReady() {
		// this.$refs.uForm.setRules(this.rules)
	},
	
    methods: {

		show(e,type) {
			this.model.form.exType = type
			this.model.form.taskId = e.taskId
			
			this.isShow= true;	
			
		},
		close() {
			clearProps(this.model.form)
		    this.isShow = false
		},
		
		
		// 提交
		async handleSubmit() {
			  this.$refs.uForm.validate().then(async res => {
				 
					let ajaxData = {
						 ...this.model.form,
					}
					let { data, code,msg } = await driverExTask(ajaxData) 
					
					if (code == 0) {
						this.$modal.msg(msg) 
						this.close()
						this.$emit('getList')
					} else {
						this.$modal.msgError(msg)
					}
				  
			  }).catch(errors => {
				  console.log('校验失败',errors)
			  })
		},
		
    }

}
</script>

<style lang="scss" scoped>
	
	.page-container {
		min-width: 600rpx;
		font-size: 28rpx;
		min-height: 100%;
		position: relative;
		
		.page-head {
			text-align: center;
			font-size: 34rpx;
			font-weight: 700;
			padding: 50rpx 0;
		}
		.page-body {
			padding-bottom: 120rpx;
		}
		.page-footer {
			position: absolute;
			width: 100%;
			left: 0;
			bottom: 0;
		}
	}
	
	
	::v-deep {
		.u-form-item__body {
			padding: 0;
		}
		.hidde-cell-title {
			
			.u-cell__body__content {
				width: auto;
				flex: none;
				
			}
			.u-cell__body {
				.value {
					flex: 1;
				}
			}
			
		}
	}
		
</style>