tqApp-webView/pagesVehDispatch/vehInspection/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">
						<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>
						
						<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> 
					</view>
					
					<template v-for="(item,index) in model.form.inspectList">
						<view class="box" style="padding: 20rpx;" :key="index">
							<u-row>
								<u-col :span="6">
									<view class="font700">{{item.projectName}}</view>
								</u-col>
								<u-col :span="6">
									<view class="disflex">
										<text>全选：</text>
										<text class="primary">正常</text>
										<u-switch 
											v-model="item.inspectSts" 
											size="20" 
											inactiveColor="#007aff" 
											activeColor="#dd524d" 
											style="margin: 0 10rpx;"
											:active-value="2" 
											:inactive-value="1"
											@change='(e) => {
												handleAllChange(item,e)
											}'
										>
										</u-switch>
										<text class="error">异常</text>
									</view>
								</u-col>
							</u-row>
							<u-row 
								v-for="(sitem,sindex) in item.itemList"
							style="margin: 40rpx 0;">
								<u-col :span="6">
									<view>{{sitem.itemName}}</view>
								</u-col>
								<u-col :span="3">
									<tq-upload-img
										v-model="sitem.pic"
										:maxCount="1"
									>	
									</tq-upload-img>
								</u-col>
								<u-col :span="3">
									<u-switch 
										v-model="sitem.inspectSts" 
										size="20" 
										inactiveColor="#007aff" 
										activeColor="#dd524d" 
										style="margin: 0 10rpx;"
										:active-value="2" 
										:inactive-value="1"
										@change="(e) => {
											handleChange(item,e)
										}"
									>
									</u-switch>
								</u-col>
							</u-row>
							
						</view>
					</template>
			
						
				</u-cell-group>
				
			</u--form>
		</view>
		
		<view class="page-footer">
			<u-row>
				<u-col :span="12" style="padding: 0 0rpx;">
					<u-button type="primary" shape=""  :custom-style="{
							width: '100%',
							height: '44px',
							borderRadius: '0',
						  }"  @click="handleSubmit">提交
					</u-button>
				</u-col>
			</u-row>
		</view>
	</view>
</template>

<script>
import {addInspectRec,queryById,queryAllEnableList} from '@/api/vehDispatch/vehInspection.js'
import {clearProps,copyProps} from '@/utils/gdtq.js'

export default {
	components: {
	},
	data() {
		return {
			model: {
				  form: {
					vehicleId: "",
					plate: "",
					remark: "",
					inspectList: [],
				  }
			},
			rules: {
				'form.vehicleId': [
					{
						type: 'string' ,
						required: true,
						message: '请选择车辆',
						trigger: ['blur', 'change']
					},	
				],
			 
				
			},
			
			
		}
	},
	onLoad({id}) {
		// console.log(id,'id')
		if(id) {
			this.getInfo(id)
		} else {
			this.getAllEnableList()
		}
		
	},
	onShow() {
		
	},
	onHide() {
		
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules)		
	},
	methods: {
		async getInfo(id) {
			let {code,data} = await queryById({id})
			if(code == 0) {
				copyProps(this.model.form,data)
				
			}
		},
		async getAllEnableList() {
			let {code,data} = await queryAllEnableList({})
			if(code == 0) {
				this.model.form.inspectList = data
			}
		},
		
		handleAllChange(item,value) {
			item.itemList.forEach((e)=>{
				e.inspectSts = value;
			})
				
		},
		
		handleChange(item,value) { 
			let len = item.itemList.length
			let nLen = item.itemList.filter(e => e.inspectSts==1).length
			item.inspectSts = len == nLen ? 1:2
		},
		
		// 提交
		async handleSubmit() {
			  this.$refs.uForm.validate().then(async res => {
					  let ajaxData = {
						  ...this.model.form,
					  }

					  let { data, code,msg } = await addInspectRec(ajaxData) 
					  
					  if (code == 0) {
							
							uni.showModal({
								title: '提示',
								content: `提交成功`,
								showCancel:false,
								confirmText: '好的',
								success: function(res) {
									if (res.confirm) {
										uni.switchTab({url: '/pages/index/index'})
									}
								}
							})
							
					  }	
				  
			  }).catch(errors => {
				  console.log('校验失败',errors)
			  })
		},
	}
}
</script>

<style lang="scss" scoped>
.disflex {
	display: flex;
}
.font700 {
	font-weight: 700;
}
.primary {
	color: $uni-color-primary;
}
.error {
	color: $uni-color-error;
}
.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;
	}
	.page-footer {
		background: #fff;
		padding: 0rpx 0;
		position: fixed;
		width: 100%;
		left: 0;
		bottom: 0;
	}
}	


::v-deep {

	.u-cell__body {
		.u-cell__body__content {
			width: auto;
			flex: none;
			
		}
		
		.value {
			flex: 1;
			
			.u-form-item__body {
				padding: 0;
			}
		}
		.u-form-item__body__right__content__slot {
			flex: 1;
			justify-content: flex-end;
			text-align: right;
		}
	}
	
}
</style>