CKQ/pages/risk/check/form/form.vue

<template>
	<div class="body">		
		<uni-forms ref="form" label-position="top" :model="formData">
			<uni-forms-item label="预警描述" >
				<p class="desc">{{formData.hdangerDesc}}</p>
			</uni-forms-item>
			<uni-forms-item label="处理动作" name="actionId" required>
				<uni-data-checkbox v-model="flowData.actionId" :localdata="actionList" @change="changeCheck"/>
			</uni-forms-item>
			<uni-forms-item label="处理说明" name="acceptRemark" required>
				<uni-easyinput type="textarea" autoHeight v-model="formData.acceptRemark" placeholder="请输入描述"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item label="附件">
				<div class="upload-container">
					<image @click="upload" class="upload" src="/static/icon/upload.png" mode="widthFix"></image>
					<p class="tip">注：单个附件上传不超过10M，附件累计不超过20M</p>					
				</div>
				<view class="preview" v-if="formData.attachList.length>0">
					<image class="preview-item" :src="attach.fileUrl" mode="widthFix" v-for="(attach,index) in formData.attachList" :key="index"></image>
				</view>
			</uni-forms-item>
		</uni-forms>	
		<view class="footer" @click="onSubmit">提交</view>
	</div>
</template>

<script>
	import {upload} from '@/api/index.js'
    import { startWorkflow, getWorkflowById, handleWorkflow } from '@/api/system/wfApi'
	import { updateDanger, getDangerById } from '@/api/dangerApi'
	import {parseTime} from '@/libs'
	export default {
		data() {
			return {
				formData:{
					'hdangerId': undefined,
					'formCode': 'accept',
					'hdangerTitle': '', // 隐患标题
					'dangerCatId': undefined, // 隐患类别ID
					'hdangerLevel': 1, // 隐患等级
					'hdangerDesc': '', // 描述
					'acceptRemark':"",
					'acceptTime': parseTime(new Date()),
					'dangerDeadline': '', // 截止时间
					'goafId': undefined,
					'checklistId': '',
					"attachList":[]
				},
				flowData:{
				},
				actionList:[]
			}
		},
		created() {
			this.init()
		},
		methods: {
			// 获取流程
			get(wfInsId) {
			  // this.resetFormData()
			  getWorkflowById(wfInsId).then((resp) => {
				const { code, data, msg } = resp
				if (code === 0) {
				  this.$emit('success',data)					
				  this.flowData = data
				  this.flowData.wfDefId = data.wfDefId
				  this.flowData.wfInsId = data.wfInsId
				  this.flowData.activityDefId = data.curActivityIns.activityDefId
				  this.flowData.activityInsId = data.curActivityIns.activityInsId
				  this.flowData.activityCode = data.curActivityIns.activityCode
				  if(data.curActivityIns.actionList){
					let actionList=data.curActivityIns.actionList.map(function(item){
						  item.value=item.actionId
						  item.text=item.actionTitle
						  return item
					})	
					this.actionList=JSON.parse(JSON.stringify(actionList))
					this.flowData.actionId=actionList[0].actionId
					this.flowData.actionCode=actionList[0].actionCode
				  }
				}
			  })
			},
			init(){
				let data=uni.getStorageSync('submit-data')
				//初始化流程
				let danger_info=uni.getStorageSync('danger-info')
				this.get(danger_info.hdangerId)
				this.formData={...this.formData,...danger_info}
				if(data){
					this.formData.checklistId = data.checklistId
					this.formData.goafId = data.goafId
					this.formData.hdangerDesc = data.checkItemNopass	
				}
			},
			 onSubmit(){
				if(!this.verify()){
					return
				}
				handleWorkflow({
				    "wfDefId": this.flowData.wfDefId,
				    "wfInsId": this.flowData.wfInsId,
				    "activityDefId": this.flowData.activityDefId,
				    "activityInsId": this.flowData.activityInsId,
				    "activityCode": this.flowData.activityCode,
				    "actionId": this.flowData.actionId,
				    "actionCode": this.flowData.actionCode,
				    "actionRemark": this.formData.hdangerDesc,
					"attachList":this.formData.attachList
				}).then(()=>{
					//renshengkuduan !
					this.formData.status=4
					this.formData.acceptTime=parseTime(this.formData.acceptTime)
					this.formData.dangerDeadline=parseTime(this.formData.dangerDeadline)
					updateDanger(this.formData).then((resp) => {
						uni.switchTab({
							url:'/pages/risk/risk'
						})
					})					
				})
			},
			upload(){
				let self=this;
				let attachList= JSON.parse(JSON.stringify(this.formData.attachList))
				uni.chooseImage({
					success:(files)=>{
						let filePath = files.tempFilePaths[0]
						upload({
							filePath
						}).then((res)=>{
							let result=JSON.parse(res);
							attachList.push(result.data)
							self.$set(self.formData,'attachList',attachList)
							self.$nextTick(()=>{
								self.scrollBottom()
							})
						})
					}
				})
			},
			scrollBottom(duration=100){
				　uni.createSelectorQuery().select(".footer").boundingClientRect((res)=>{
					console.log(res)
					  const scrollH = res.top;
				　　uni.pageScrollTo({
				　　　　duration,// 过渡时间
				　　　　scrollTop: scrollH,// 滚动的实际距离
				　　})
				}).exec()
			},
			verify(){
				let items={
					'acceptRemark': '处理说明', // 		
				}
				for(let key in items){
					if(this.formData[key]===""||this.formData[key]===undefined||this.formData[key]==="undefined"){
						uni.showToast({
							icon:'none',
							title:`请填写${items[key]}`
						})	
						return false;
					}
				}
				return true
			},
			changeCheck(){
				let actionCode=this.actionList.filter(item=>item.actionId===this.flowData.actionId)[0].actionCode
				this.flowData.actionCode=actionCode
			}
		}
	}
</script>
<style lang="scss" scoped>
.body{
	min-height: 100vh;
	box-sizing: border-box;
	padding:21rpx 16rpx;
	background-color: #F3F5FB;
	padding-bottom: 160rpx;
	.desc{
		padding-left: 24rpx;
		color: #666;
		background-color: #fff;
		border-radius: 10rpx;
		padding: 10rpx;
	}
	.status-item{
		padding: 22rpx 32rpx;
		background-color: #fff;
		font-size: 28rpx;
		line-height: 1;
		display: inline-block;
		color: #434343;
		margin-right: 20rpx;
		border-radius: 2px;
		&.active{
			background: rgba(22, 141, 236, 0.16);
			color:#168DEC ;
		}
	}
	::v-deep .uni-forms-item__content{
		.uni-easyinput,.uni-select{
			background-color: #fff;
		}	
	}
	.upload-container{
		.upload{
			width: 216rpx;
			display: block;
		}
		.tip{
			font-size: 24rpx;
			line-height: 28rpx;
			color: #999999;
			padding-top: 20rpx;
		}
	}
	.footer{
		width: 100%;
		height: 136upx;
		background: #FFFFFF;
		border-radius: 16upx 16upx 0px 0px;
		position: fixed;
		left: 0;
		bottom: 0;
		text-align: center;
		color: #168DEC;
		font-size: 32upx;
		padding-top: 20upx;
		letter-spacing: 2px;
	}
	.preview{
		padding-top: 50rpx;
		.preview-item{
			width: 200rpx;
			height: 200rpx;
		}
	}
}
</style>