CKQ/pages/risk/rectify/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="rectifyRemark" required>
				<uni-easyinput type="textarea" autoHeight v-model="formData.rectifyRemark" placeholder="请输入描述"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item label="验收人" name="acceptAccountId" required>
				<view style="padding-bottom: 16rpx;">
					<uni-data-picker :map='groupMap'
					v-model="groupId"
					placeholder="请选择组织"
					 popup-title="请选择组织" 
					:localdata="groupList"
					@nodeclick="onnodeclick"
					@change="onchangeGroup">  
					</uni-data-picker> 					
				</view> 
				<uni-data-select
					v-model="formData.acceptAccountId"
					:localdata="userList"
				></uni-data-select>
			</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 {getUserByPage} from '@/api/user.js'
	import {upload} from '@/api/index.js'
    import { startWorkflow, getWorkflowById, handleWorkflow } from '@/api/system/wfApi'
	import { updateDanger, getDangerById } from '@/api/dangerApi'
	import { getGroupByList } from '@/api/system/groupApi'
	import {parseTime,packageTreeData} from '@/libs'
	export default {
		data() {
			return {
				formData:{
					'hdangerId': undefined,
					'formCode': 'rectify',
					'hdangerTitle': '', // 预警标题
					'dangerCatId': undefined, // 预警类别ID
					'hdangerLevel': 1, // 预警等级
					'rectifyRemark': '', // 描述
					'rectifyTime': parseTime(new Date()),
					'dangerDeadline': '', // 截止时间
					'goafId': undefined,
					'checklistId': '',
					"attachList":[]
				},
				flowData:{
				},
				groupList:[],
				groupId:"",
				groupMap:{text:"groupName",value:"groupId"},
				actionList:[],
				userList:[]
			}
		},
		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.formData={...this.formData,...danger_info}
				this.get(danger_info.hdangerId)
				this.getUser()
				this.getGroup()				
				if(data){
					this.formData.checklistId = data.checklistId
					this.formData.goafId = data.goafId
					this.formData.hdangerDesc = data.checkItemNopass	
				}
			},
			async onSubmit(){
				let user=this.userList.filter(item=>item.accountId===this.formData.acceptAccountId)[0]
				if(!user){
					uni.showToast({
						icon:'none',
						title:"请选择验收人"
					})	
					return
				}
					this.formData.acceptAccountName = user.accountName
					this.formData.acceptGroupId = user.groupId
					this.formData.acceptGroupName = user.groupName
					this.formData.acceptPositionId = user.positionId
					this.formData.acceptPositionName = user.positionName	
					this.formData.ocId=user.ocId
				
				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.rectifyRemark,
					"attachList":this.formData.attachList,
					"groupIdTo": user.groupId,
					"positionIdTo": user.positionId,
					"accountIdTo": user.accountId,
					"groupNameTo": user.groupName,
					"positionNameTo": user.positionName,
					"accountNameTo": user.accountName,
				}).then((res)=>{
					let flow=res.data
					  if (flow.curActivityCode === 'review') {
						this.formData.status = 1
					  }
					  if (flow.curActivityCode === 'rectify') {
						this.formData.status = 2
					  }
					  if (flow.curActivityCode === 'accept') {
						this.formData.status = 3
					  }
						this.formData.rectifyTime=parseTime(this.formData.rectifyTime)
						this.formData.dangerDeadline=parseTime(this.formData.dangerDeadline)
						updateDanger(this.formData).then((resp) => {
							uni.switchTab({
								url:'/pages/risk/risk'
							})
						})					
				})
			},
			onchangeGroup({detail}){
				let groupVal=detail.value
				let groupId=groupVal[groupVal.length-1].value
				this.formData.acceptAccountId=""
				this.getUser(groupId)
			},
			onnodeclick(node){
				this.formData.rectifyAccountId=""
				this.groupId=node.groupId
				this.getUser(node.groupId)
			},
			getGroup(){
				getGroupByList().then((res)=>{
					let items=packageTreeData({
						data:res.data,
						id:"groupId"
					})
					this.groupList=items
				})
			},
			getUser(groupId){
				getUserByPage({
					page: 1,
					limit: 999999,
					groupId
				}).then((res)=>{
					this.userList=res.data.map(item=>{
						return{
							...item,
							value:item.accountId,
							text:item.accountName
						}
					})
				})
			},
			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)=>{
					  const scrollH = res.top;
				　　uni.pageScrollTo({
				　　　　duration,// 过渡时间
				　　　　scrollTop: scrollH,// 滚动的实际距离
				　　})
				}).exec()
			},
			verify(){
				let items={
					'rectifyRemark': '处理说明', // 		
				}
				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;
			border: 1px solid #ccc;
			margin: 10rpx;
		}
	}
}
</style>