payy-app/views/danger/recity.vue

<template>
	<view class="form search-image-content zhcx-table">
		<uni-forms :modelValue="formData" ref="form" :rules="rules">
<!-- 			<uni-forms-item label="隐患提交照片">
				<view @click="previewImage(danger.fileUrl)">
					<image class="danger-image" :src="danger.fileUrl" style="width: 98%"></image>
				</view>
			</uni-forms-item> -->
			<uni-forms-item label="原因分析">
				<textarea class="textarea" placeholder="请填写意见" name="dangerReason" v-model="formData.dangerReason" />
			</uni-forms-item>
			<uni-forms-item label="整改措施">
				<textarea class="textarea" name="rectifyMeasure" v-model="formData.rectifyMeasure" 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>

			<p class="tip-notice">当前关卡：评审</p>
			<uni-forms-item label="意见/说明" name="actionRemark">
				<textarea class="textarea"
					name="actionRemark" v-model="formData.actionRemark" placeholder-style="color:grey"
					placeholder="请输入隐患评审意见/说明/备注" />
			</uni-forms-item>
			<p class="tip-notice">下一关：处理人员</p>
			<uni-forms-item label="执行人">
				<picker :range="userList" range-key="accountRealName" @change="bindPickerChangeUser" :value="indexUser">
					<view class="uni-input">{{userList[indexUser].accountRealName}}</view>
				</picker>
			</uni-forms-item>

		</uni-forms>
		<view class="handle-wrap">
			<!-- <button type="primary" @click="submit">提交</button> -->
			<button v-for="(item,index) in flowData.taskIns.actionList" 
				:key="index" 
				class="bt" :class="item.actionCode"
				@click="submitForm('ruleForm',item.actionId, item.actionCode)"
				>{{ item.actionTitle }} </button>
			<button class="bt" @click="Cancel()">取消</button>
		</view>
	</view>
</template>

<script>
	import { upload } from '@/api/index';
	import graceChecker from "@/libs/graceChecker.js"
	import { getUserList, add, createDangerIns, getDangerInsById, triggerDangerIns } from "@/api/danger.js"
	export default {
		data() {
			return {
				riskPointId: '',
				groupItem: [],
				FilePaths: [],
				userList: [{ accountRealName: '' }, { accountRealName: '' }],
				index: 0,
				indexs: 0,
				indexUser: 1,
				array: ['自查', '内部反馈', '上级检查', '政府执法'],
				rules: {
					accountId: {
						rules: [{
							required: true,
							errorMessage: '请选择执行人',
						}]
					},
					validateTrigger: 'submit'
				},
				danger: {
					groupId: undefined,
					groupName: '',
					dangerId: undefined,
					dangerSource: undefined,
					dangerCode: '',
					dangerTitle: '',
					dangerDesc: '',
					dangerLevel: undefined,
					dangerCatId: undefined,
					dangerCatTitle: '',
					riskPointId: undefined,
					riskPointTitle: '',

					submitGroupId: undefined,
					submitGroupName: '',
					submitPositionId: undefined,
					submitPositionName: '',
					submitAccountId: undefined,
					submitAccountName: '',
					submitTime: '',
					dangerDeadLine: '',

					reviewGroupId: undefined,
					reviewGroupName: '',
					reviewPositionId: undefined,
					reviewPositionName: '',
					reviewAccountId: undefined,
					reviewAccountName: '',
					reviewTime: '',

					rectifyGroupId: undefined,
					rectifyGroupName: '',
					rectifyPositionId: undefined,
					rectifyPositionName: '',
					rectifyAccountId: undefined,
					rectifyAccountName: '',

					dangerReason: '',
					recifyCat: 1,
					rectifyMeasure: '',
					rectifyRemark: '',
					rectifyTime: '',

					acceptGroupId: undefined,
					acceptGroupName: '',
					acceptPositionId: undefined,
					acceptPositionName: '',
					acceptAccountId: undefined,
					acceptAccountName: '',
					acceptTime: '',

					wfDefId: 1,
					wfInsId: undefined,
					wfInsTitle: '',
					wfInsStatus: undefined,

					taskDefId: undefined,
					taskInsId: undefined,
					taskInsTitle: '',

					taskInsGroupId: undefined,
					taskInsGroupName: '',
					taskInsPositionId: undefined,
					taskInsPositionName: '',
					taskInsAccountId: undefined,
					taskInsAccountName: '',
					taskInsStatus: undefined,

					attachList: [],
					taskCode: '',
					formCode: '',
					fileUrl: ''
				},
				formData: {
					dangerId: undefined,
					wfDefId: undefined,
					wfInsId: undefined,
					taskDefId: undefined,
					taskInsId: undefined,
					taskCode: '',
					actionId: undefined,
					actionCode: '',
					actionRemark: '',
					groupIdTo: undefined,
					positionIdTo: undefined,
					accountIdTo: undefined,
					attachList: []
				},
				flowData: {
					wfDefId: 1,
					wfInsId: undefined,
					wfInsTitle: '',
					status: undefined,
					taskIns: {
						actionList: [],
						taskInsId: undefined,
						taskInsTitle: '',
						taskDefId: undefined,
						taskCode: ''
					},
					taskInsRecordList: []
				},
				computed: {},
			}
		},
		onLoad(options) {
			//调用页面请求数据接口
			this.dangerId = options.dangerId;
			this.getUserList();
			this.getDangerIns(options.dangerId)
		},
		filters:{
			previewImage(val){
				let imgsrc=val.split("$");
				return imgsrc[0];
			}
		},		
		methods: {
			bindPickerChangeUser: function(e3) {
				this.indexUser = e3.target.value
				console.log("执行人", this.indexUser)
				this.formData.accountId = this.userList[this.indexUser].accountId
				this.formData.accountIdTo = this.userList[this.indexUser].accountId
				this.formData.groupIdTo = this.userList[this.indexUser].groupId
				this.formData.positionIdTo = this.userList[this.indexUser].positionId
			},

			//获取详细流程信息
			getDangerIns(dangerId) {
				getDangerInsById(dangerId).then((resp) => {
					const { code, data, msg } = resp
					if (code === 0) {
						const { danger, flow } = data
						this.danger = danger
						this.flowData = flow
						this.formData.dangerId = danger.dangerId
						this.formData.attachList = danger.attachList
						this.formData.wfDefId = flow.wfDefId
						this.formData.wfInsId = flow.wfInsId
						this.formData.taskDefId = flow.taskIns.taskDefId
						this.formData.taskInsId = flow.taskIns.taskInsId
						this.formData.taskCode = flow.taskIns.taskCode
					} else {
						this.$message.error(msg)
					}
				}).catch((error) => {
					console.log(error)
				})
			},
			previewImage(url) {
				// 预览图片
				let urls = []
				urls.push(url)
				uni.previewImage({
					urls: urls,
				});
			},
			// 提交
			submitForm(form, actionId, actionCode) {
				this.formData.actionId = actionId
				this.formData.actionCode = actionCode
				triggerDangerIns(this.formData).then((resp) => {
					const { code, msg } = resp
					if (code === 0) {
						uni.showToast({
							title: '整改成功',
							icon: 'success',
							success: function() {
								console.log("整改成功")
							},
							complete() {
								uni.switchTab({
									url: '/views/danger/index'
								})
							}
						});

					} else {
						uni.showToast({
							title: '评审失败',
							icon: 'error'
						})
					}
				}).catch((error) => {
					console.log(error)
				})
			},
			Cancel() {
				//取消
				uni.navigateBack();
			},
			//用户列表
			getUserList() {
				getUserList().then((resp) => {
					const { code, data } = resp
					if (code === 0) {
						this.userList = data
						this.formData.accountIdTo = this.userList[1].accountId
						this.formData.groupIdTo = this.userList[1].groupId
						this.formData.positionIdTo = this.userList[1].positionId
					}
				}).catch((error) => {
					console.log(error)
				})
			},
			//上传入口
			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: "上传失败"
					})
				})
			},

		}
	}
</script>
<style lang="scss" scoped>
	.form {
		padding: 30rpx 10px 100upx;
		background-color: #fff;
		.textarea{
			width: 500upx;
			border: 1px solid #eaeaea;
			padding: 20upx;
		}
		.dangerimage{
			display: block;
			width: 200upx;
			height: 200upx;
			background-color:#ccc ;
		}
		.tip {
			padding: 8upx 0 16upx 59upx;
			font-size: 24upx;
			color: #3584FF;
		}	
		.tip-notice{
			display: inline-block;
			padding: 10upx;
			background-color: #3584FF;
			color: #fff;
			line-height: 1;
			margin-bottom: 10upx;
		}
		.handle-wrap{
			display: flex;
			justify-content:space-between;
			.bt{
				width: 200upx;
				line-height: 2;
				margin: 0;
				margin-right: 20upx;
				&:last-child{
					margin-right: 0;
				}
				&.warn{
					color: #fff;
					background-color: #e6a23c;
					border-color: #e6a23c;
				}
				&.submit{
					background-color:#00A0FF ;
					border-color: #00A0FF;
					color: #fff;
				}
				&.transfer{
					color: #fff;
					background-color: #67c23a;
					border-color: #67c23a;
				}	
				&.return{
					color: #fff;
					background-color: #f56c6c;
					border-color: #f56c6c;
				}
			}			
		}		
	}
</style>