payy-app/views/danger/riskPointDanger.vue

<template>
	<view class="riskPointDanger-form zhcx-table">
		<uni-forms :modelValue="formData" ref="form" :rules="rules">
			<uni-forms-item label="标题" name="dangerTitle" required>
				<uni-easyinput type="text" v-model="formData.dangerTitle" placeholder="请填写隐患标题" />
			</uni-forms-item>
			<uni-forms-item label="等级">
				<radio-group v-model="formData.dangerLevel" style="transform:scale(0.85)" @change="radioChange">
					<label>
						<radio value="2" /><text>重大隐患</text>
					</label>
					<label>
						<radio value="1" checked="true" /><text>一般隐患</text>
					</label>
				</radio-group>
			</uni-forms-item>
			<uni-forms-item label="隐患来源">
				<picker @change="bindPickerChange" :value="index" :range="array">
					<view class="uni-input">{{array[index]}}</view>
				</picker>
			</uni-forms-item>
			<uni-forms-item label="隐患类别">
				<picker :range="dangerCatList" range-key="dangerCatTitle" @change="bindPickerChangeCat" :value="indexs">
					<view class="uni-input">{{dangerCatList[indexs].dangerCatTitle}}</view>
				</picker>
			</uni-forms-item>
			<uni-forms-item label="所属部门">
				<uni-data-picker :localdata="groupItem" popup-title="请选择隐患所属部门" @change="onchange"
					@nodeclick="onnodeclick"></uni-data-picker>
			</uni-forms-item>
			<uni-forms-item label="截止时间">
				<uni-datetime-picker class="uni-datetime" @change="onChangeDateTime"></uni-datetime-picker>
			</uni-forms-item>
			<p class="tip">支持各类图片，文件不大于10M</p>				
			<uni-forms-item label="隐患照片">
				<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-item label="描述" name="dangerDesc">
				<textarea name="dangerDesc" v-model="formData.dangerDesc" 
					class="textarea"
					placeholder-style="color:grey"
					placeholder="请输入隐患描述" />
			</uni-forms-item>
			<uni-forms-item label="下一关" >
				<view style="margin-top: 9px;">
					<text>评审任务</text>
				</view>
			</uni-forms-item>		
			<uni-forms-item label="执行人">
				<!-- <uni-forms-item label="所属部门">
				<uni-data-picker :localdata="userList" popup-title="请选择执行人" @change="onchange"
					@nodeclick="onnodeclick"></uni-data-picker>
			</uni-forms-item> -->
				<picker :range="userList" range-key="accountRealName"  class="picker"
						@change="bindPickerChangeUser" :value="indexUser">
					<view class="uni-input">{{userList[indexUser].accountRealName}}</view>
				</picker>
			</uni-forms-item>
			<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>
		<view class="uni-btn-v">
			<!--<button type="primary" @click="submit">提交</button>-->
			<button v-for="(item,index) in flowData.taskIns.actionList" :key="index" type="primary"
				@click="submit('form', item.actionId, item.actionCode)">{{ item.actionTitle }} </button>
			<button type="default" @click="Cancel()">取消</button>
		</view>
	</view>
</template>

<script>
	import { upload } from '@/api/index';
	import graceChecker from "@/libs/graceChecker.js"
	import { getGroupTree, getDangerCatList, getUserList, add, createDangerIns } from "@/api/danger.js"
	import { toTreeText } from "@/libs/tool.js"
	import { isEmpty } from "@/libs"
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				riskPointId: '',
				date: currentDate,
				groupItem: [],
				FilePaths: [],
				userList: [{}, { accountRealName: '' }],
				dangerCatList: [{ dangerCatTitle: '' }],
				index: 0,
				indexs: 0,
				indexUser: 1,
				array: ['自查', '内部反馈', '上级检查', '政府执法'],
				rules: {
					dangerTitle: {
						rules: [{
							required: true,
							errorMessage: '请输入隐患标题',
						}]
					},
					dangerDeadLine: {
						rules: [{
							required: true,
							errorMessage: '请选择截止时间',
						}]
					},
					accountId: {
						rules: [{
							required: true,
							errorMessage: '请选择执行人',
						}]
					},
					validateTrigger: 'submit'
				},
				formData: {
					dangerId: undefined,
					groupId: undefined, // 所属部门
					riskPointId: undefined, // 风险点：所属区域
					dangerCode: '', // 隐患编码
					dangerTitle: '', // 隐患标题
					dangerCatId: undefined, // 隐患类别ID
					dangerLevel: 1, // 隐患等级
					dangerDesc: '', // 描述
					dangerDeadLine: '', // 截止时间
					dangerSource: 0, // 隐患来源

					wfDefId: undefined,
					wfInsId: undefined,
					taskDefId: undefined,
					taskInsId: undefined,
					taskCode: '',
					actionId: undefined,
					actionCode: '',

					groupIdTo: undefined,
					positionIdTo: undefined,
					accountIdTo: undefined, // 执行人

					actionRemark: '', // 说明
					attachList: []
				},
				flowData: {
					taskIns: {
						actionList: []
					}
				},
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			},
		},
		filters:{
			previewImage(val){
				let imgsrc=val.split("$");
				return imgsrc[0];
			}
		},
		onLoad(options) {
			//调用页面请求数据接口
			this.riskPointId = options.riskPointId;
			this.groupTree();
			this.getDangerCatList();
			this.getUserList();
			this.createDangerIns();
		},
		methods: {
			Cancel() {
				//取消
				uni.navigateBack();
			},
			handleSelectUser(item) {
				this.formData.accountIdTo = item.accountId
				this.formData.groupIdTo = item.groupId
				this.formData.positionIdTo = item.positionId
				console.log("item", item);
			},
			radioChange: function(evt) {
				this.formData.dangerLevel = evt.detail.value
			},
			bindPickerChange: function(e1) {
				this.index = e1.target.value
				console.log("隐患来源", this.index)
				this.formData.dangerSource = this.index
			},
			bindPickerChangeCat: function(e2) {
				this.indexs = e2.target.value
				console.log("隐患类别", this.indexs)
				this.formData.dangerCatId = this.dangerCatList[this.indexs].dangerCatId
			},
			bindPickerChangeUser: function(e3) {
				this.indexUser = e3.target.value
				console.log("执行人", this.indexUser)
				this.formData.accountId = this.userList[this.indexUser].accountId
				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
			},

			//初始化流程 写死流程ID
			createDangerIns() {
				createDangerIns(1).then((resp) => {
					const { code, data, msg } = resp
					if (code === 0) {
						this.flowData = data
						this.formData.wfDefId = data.wfDefId
						this.formData.wfInsId = data.wfInsId
						this.formData.taskDefId = data.taskIns.taskDefId
						this.formData.taskInsId = data.taskIns.taskInsId
						this.formData.taskCode = data.taskIns.taskCode
					} else {
						this.$message.error(msg)
					}
				}).catch((error) => {
					console.log(error)
				})
			},
			/**z
			 * 提交
			 */
			submit(formName, actionId, actionCode) {
				this.$refs.form.validate().then(res => {
					this.formData.actionId = actionId;
					this.formData.actionCode = actionCode;
					this.formData.riskPointId = this.riskPointId;
					this.formData.groupId = this.formData.groupIdS[this.formData.groupIdS.length - 1].value
					add(this.formData).then((resp) => {
						const { code, data, msg } = resp
						if (code === 0) {
							console.log("提交成功")
							uni.showToast({
								icon:'success',
								title:"提交成功！",
								complete(res) {
									if(!isEmpty(this.riskPointId)){
										uni.navigateTo({
											url: '/views/entRiskPoint/details/details?id=' + this.riskPointId,
										});										
									}else{
										uni.reLaunch({
											url:'/pages/index/index'
										})
									}								
								}
							})
						} else {
							uni.showToast({
								icon: 'error',
								title: msg
							})
						}
					})
				}).catch(err => {
					uni.showToast({
						icon: 'none',
						// title: err[0].errorMessage
						title: err
					})
				})
			},
			formReset: function(e) {
				console.log('清空数据')
			},
			bindDateChange: function(e) {
				this.date = e.target.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 0;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			onchange(e) {
				const value = e.detail.value
				this.formData.groupIdS = value
			},
			onChangeDateTime(e) {
				this.formData.dangerDeadLine = e
				console.log("dangerDeadLine", e)
			},
			onnodeclick(node) {},
			//初始化group
			groupTree() {
				getGroupTree().then((res) => {
					if (res.data) {
						let temp = toTreeText(res.data)
						this.groupItem = temp;
					} else {
						console.log("group无数据，请检查！")
					}
				});
			},
			//隐患类别列表
			getDangerCatList() {
				getDangerCatList().then((resp) => {
					const { code, data } = resp
					if (code === 0) {
						this.dangerCatList = data
						//默认值
						this.formData.dangerCatId = this.dangerCatList[0].dangerCatId
					}
				}).catch((error) => {
					console.log(error)
				})
			},
			//用户列表
			getUserList() {
				getUserList().then((resp) => {
					const { code, data } = resp
					if (code === 0) {
						this.userList = data
						this.formData.accountId = this.userList[1].accountId
						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>
	.riskPointDanger-form{
		padding: 0rpx 10px;
		padding-top: 100upx;
		background-color: #fff;
		.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>