hptwxMiniProgram/components/riskPiontForm.vue

<template>
	<view class="risk-Form">
		<uni-forms :modelValue="formData" label-width="120">
			<uni-forms-item label="检查结果" name="cardNo">
				<div class="check-result">
					<div class="tag-item" @click="inspectResultChange(1)" :class="form.checkResult===1?'active':''">通过</div>
					<div class="tag-item" @click="inspectResultChange(-1)" :class="form.checkResult===-1?'active':''">不通过</div>
					<div class="tag-item" @click="inspectResultChange(0)" :class="form.checkResult===0?'active':''">不涉及</div>
				</div>
			</uni-forms-item>
			<uni-forms-item  name="remark" label="说明">
				<uni-easyinput type="textarea" autoHeight v-model="form.checkDesc" placeholder="请输入说明信息" trim="all"></uni-easyinput>
			</uni-forms-item>						
		</uni-forms>
		<button class="submit-BT" type="primary" @click="submit">提交</button>		
	</view>
</template>

<script>
	 import { updateCheckTaskDoingItem } from '@/api/system/checkTaskDoingApi.js'
	export default {
		name:"riskPiontForm",
		data(){
		  return{
			fileList:[],
			form:{
				taskId: undefined,
				checkRecordId: undefined,
				checkResult: 1,
				checkDesc: '',
				dangerId: undefined,
				attachList: []
			}
		  }
		},
		methods:{
			inspectResultChange(result){
				this.form.checkResult=result
			},
			submit(){	
				const taskId=this.taskId
				const checkRecordId=this.checkRecordId
				let form={
					taskId: taskId,
					checkRecordId: checkRecordId,
					checkResult:this.form.checkResult,
					checkDesc:this.form.checkDesc,
					dangerId:this.form.dangerId,
					attachList:this.form.attachList       
				}
				if(this.form.checkResult===-1){
					if(this.isEmpty(this.form.checkDesc)){
						uni.showToast({
							icon:'none',
							title: '请填写不通过理由'
						});
						return
					}
				}
				updateCheckTaskDoingItem(form).then(()=>{
					uni.showToast({
						icon:'none',
						title: '提交成功！'
					});
				})
			},
			validate(callback){
				var rulesKeys=Object.keys(this.rules)
				for(let i=0;i<rulesKeys.length;i++){
					if(this.isEmpty(this.form[rulesKeys[i]])){
						uni.showToast({
							icon:'none',
							title: this.rules[rulesKeys[i]][0].message||'请检查表单'
						});
						return false
					} 
				}
				callback()
			},
			isEmpty(val){
				if(val!==undefined&&val!=="undefined"&&val!==null&&val!==""){
					return false
				}
				return true
			}        
		}
	}
</script>

<style lang="scss">
	.risk-Form{
		padding: 20rpx;
		.check-result{
			&{
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;
			}
			.tag-item{
				width: 180rpx;
				height: 64rpx;
				background: #E5E5E5;
				border-radius: 4px;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #555555;   
				text-align: center; 
				line-height: 64rpx; 
				margin-right: 20rpx;  
				margin-bottom: 33rpx; 
			    &.active{
					background: #11C786;
					color: #fff;					   
			    }
			}			
		}	
		.submit-BT{
			color: #fff;
			background-color: #007aff !important;
			margin-top: 60upx;
		}	
	}
</style>