payy-app/views/warning/manage/manage.vue

<template>
	<view class="detail-wrap warning zhcx-table">
		<view class="handle-wrap" v-if=" flowData.taskIns.actionList.length>0">
			<button v-for="(item,index) in flowData.taskIns.actionList"
					class="custom-button primary" 
					@click="submitForm(item.actionCode,item.actionId)">{{ item.actionTitle }}</button>									
		</view>	
		<view class="form-wrap">
			<uni-forms :modelValue="formData" ref="form" :rules="rules">
				<uni-forms-item label="说明" name="actionRemark">
					<textarea name="actionRemark" class="textarea"
						v-model="formData.actionRemark" 
						placeholder-style="color:grey"
						placeholder="请输入说明/备注" />
				</uni-forms-item>	
				<uni-forms-item label="隐患照片">
					<p class="tip">支持各类图片，文件不大于10M</p>
					<view class="zhcx-upload" @click="uploadBt">
						<div class="icon"></div>
						<text class="uploadTitle">点击上传</text>
					</view>
					<view class="attachList" v-if="formData.attachList.length>0">
						<image class="dangerimage" :src="formData.attachList[0].thumbnailsFileUrl" mode="widthFix"></image>
					</view>			
				</uni-forms-item>														
			</uni-forms>		
		</view>
	</view>
</template>

<script>
	import { upload } from '@/api/index';
	import { alertLevel ,alertStatus} from '@/libs/enum';
	import { getAlertById,handleAlert} from '@/api/warning';
	export default {
		data() {
			return {
				formData:{
					alertId: undefined,
					alertReason: '',
					handleMeasure: '',
					wfDefId: undefined,
					wfInsId: undefined,
					taskDefId: undefined,
					taskInsId: undefined,
					taskCode: '',
					actionId: undefined,
					actionCode: '',
					actionRemark: '',
					attachList: []
				},
				  flowData: {
					wfDefId: 1,
					wfInsId: undefined,
					wfInsTitle: '',
					status: undefined,
					taskIns: {
					  actionList: [],
					  taskInsId: undefined,
					  taskInsTitle: '',
					  taskDefId: undefined,
					  taskCode: ''
					},
					taskInsRecordList: []
				  },			
				rules: {
					actionRemark: {
						rules: [{
							required: true,
							errorMessage: '请填写意见，说明',
						}]
					},
					validateTrigger: 'submit'
				}			
			}
		},
		filters:{
			alertLevelFilter(value){
				return alertLevel(value);
			},
			alertStatusFilter(value){
				return alertStatus(value);
			}					
		},
		methods: {
			init(){
				let warnInfo=uni.getStorageSync('warnInfo');
				this.getDtail(warnInfo.alertId)
			},
			getDtail(id){
				getAlertById(id).then((resp)=>{
					 const { code, data, msg } = resp			
					  // Flow Data
					  const flowData = data.flow
					  this.flowData = flowData
			
					  // Form Data
					  this.formData.alertId =  data.data.alertId
					  this.formData.alertTitle =  data.data.alertTitle
			
					  this.formData.wfDefId = flowData.wfDefId
					  this.formData.wfInsId = flowData.wfInsId
					  this.formData.taskDefId = flowData.taskIns.taskDefId
					  this.formData.taskInsId = flowData.taskIns.taskInsId
					  this.formData.taskCode = flowData.taskIns.taskCode				
				})
			},
			/**
			 * 提交
			 */
			submitForm(actionId, actionCode) {
				this.formData.actionId = actionId;
				this.formData.actionCode = actionCode;			
				this.$refs.form.validate().then(res => {
					  handleAlert(this.formData).then((resp) => {
						const { code, msg } = resp
						if (code === 0) {
							uni.showToast({
								icon:"none",
								title:'提交成功',
								complete() {
									uni.navigateTo({
										url:"/views/warning/index"
									})
								}
							})
						} else {
							uni.showToast({
								icon:"none",
								title:"提交失败"
							})
						}
					  }).catch((error) => {
							uni.showToast({
								icon:"none",
								title:"提交失败"
							})
					  })				
				}).catch(err => {
					uni.showToast({
						icon: 'none',
						title: "提交失败,请检查"
					})
				})
			},
			//上传入口
			uploadBt() {
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						this.uploadSubmit(tempFilePaths[0])
					}
				});
			},
			uploadSubmit(filePath) {
				upload({ filePath }).then((res) => {
					let result=JSON.parse(res);
					if(result.code===0){
						let attachList=[];
						let path=result.data.path;
						let thumbnailsFileUrl=path.split('$')[0];
						let fileUrl=path.split('$')[1];
						let uploadImgInfo={
							thumbnailsFileUrl,
							fileUrl,
							fileSize:result.data.size,
							fileExt:result.data.ext,
							fileTitle:result.data.oriFileName,
							opCode:0
						};
						attachList.push(uploadImgInfo);
						this.$set(this.formData,'attachList',attachList)					
					}else{
						uni.showToast({
							title: result.msg||"上传失败"
						})						
					}
				}).catch((msg) => {
					uni.showToast({
						title: "上传失败"
					})
				})
			}
		},
		onShow(){
			this.init();	
		}
	}
</script>

<style lang="scss" scoped>
	.detail-wrap{
		&.warning{
			padding: 20upx 0 120upx 0;
			background-color: #fff;
		}
		.detail-list{
			.head{
				width: 300upx;
				height: 58upx;
				line-height: 58upx;	
				color: #FFFFFF;
				background: #00A0FF;
				border-radius:0 16upx 16upx 0;
				padding: 0 20upx;										
			}
			.table-cont {
				padding: 0 26upx;
				.row {
					height: 78upx;
					line-height: 78upx;
					border-bottom: 2upx solid #EDE1D9;
					padding-left: 10upx;
					&.desc{
						height: auto;
						line-height: 1.5;
						min-height: 78upx;
						border-bottom: none;
						padding-top: 16upx;
						display: flex;
						justify-content: flex-start;
						.desc-txt{
							width: 600upx;
							word-break: break-word;
						}
					}
				}				
			}			
		}
		.handle-wrap{
			width:710upx;
			display: flex;
			justify-content: space-around;	
			padding: 20upx;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 99;
			background-color: rgba(255,255,255,0.6);
			.custom-button{
				width: 200upx;
				line-height: 2;
				margin: 0;
				margin-right: 20upx;
				padding: 15upx 0;		
				&.warn{
					background: #ff4949 ;
					color: #fff;
				}	
				&.success{
					background:#1aad19;
					color: #fff;
				}
				&.primary{
					background: #1890ff;
					color: #fff;
				}
			}
		}
		.form-wrap{
			margin-top: 30upx;
			padding: 0rpx 10px;
			.dangerimage{
				display: block;
				width: 200upx;
				height: 200upx;
			}
			.textarea{
				width: 530upx;
				border: 1upx solid #d7d6d6;
				padding: 10upx;
				font-size: 30upx;
			}
			.head {
				padding-left: 59upx;
				font-size: 30upx;
				color: #333;
			}
			.tip {
				padding: 8upx 0 16upx 59upx;
				font-size: 24upx;
				color: #3584FF;
			}
			.picker{
				.uni-input{
					border: 1upx solid #ccc;		
				}
			}			
		}
	}
</style>