flowable/flowable-front/src/components/views/deal.vue

<template>
	<div>
		<el-container>
		  <el-header style = "margin-bottom: -1%;">
			  <div style = "float: right;">
					<el-button @click="closeDeal()">取 消</el-button>
					<el-button @click="showTransferTask()" v-if="purview5">转办</el-button>
					<el-button @click="handUpProcessInstance()" v-if="purview4">补充资料挂起</el-button>
					<el-button @click="findReturnUserTask()" v-if="purview3">退回</el-button>
					<el-button @click="cantVisible=true">审批拒绝</el-button>
					<el-button type="primary" @click="attachmentVisible=true">审批通过</el-button>
			  </div>
		  </el-header>
		  <el-main>
			  <el-tabs type="border-card" >
				<el-tab-pane>
				  <span slot="label"><i class="el-icon-date"></i> 任务详情</span>
				  <parser :form-conf="formConf" @submit="sumbitForm" ref="parserRef" v-if="type == '0'"/>
				  <iframe :src="iframeUrl" ref="iframe" v-if="type == '1'" width="100%" height="500px" name = "customWindow" style = "border: none;"></iframe>
				</el-tab-pane>
				<el-tab-pane label="流程跟踪" style="overflow: scroll; height: 500px;">
					<div>
						<el-steps direction="vertical" :active="histaskList[histaskList.length-1] && histaskList[histaskList.length-1].activityType == 'endEvent' ? histaskList.length : histaskList.length-1" finish-status="success" space = "60px">
							<el-step :title="item.name" v-for="item in histaskList" :key="item.id">
								<template slot="description">
										<span v-if="item.activityType == 'userTask'">办理人:  {{item.displayName}}</span>  节点名称:  {{item.activityName}}   任务接收时间  {{item.startTime}}     任务办结时间  {{item.endTime}}
										  <div v-for="comment in item.commentList" class="text item" :key="comment.id">
										    {{'审批通过: ' + comment.message }}
										  </div>
								</template>
							</el-step>
						</el-steps>
						<el-image :src="processImgUrl">
						</el-image>
					</div>
				</el-tab-pane>
			  </el-tabs>
		  </el-main>
		</el-container>
		
		
		<el-dialog title="审批通过" :visible.sync="attachmentVisible" :modal="false"  v-loading="tableloading" style="width: 80%;margin-left:10%;">
			<el-form>
				<el-form-item label="请输入审批意见">
				  <el-input  v-model="message" :rows= "6" maxlength="200"
				  autocomplete="off" type = "textarea"></el-input>
				</el-form-item>
			<!-- 	<el-upload
				class="upload-demo"
				action="123"
				ref="upload"
				:on-remove="handleRemove"
				:before-remove="beforeRemove"
				:auto-upload = false
				:file-list="fileList"
				:limit="3"
				:http-request="uploadFile"
				>
					<el-button size="small" type="primary">点击上传附件</el-button>
				</el-upload> -->
				<el-form-item style="margin-left:60%">
					<el-button @click="attachmentVisible = false">取消</el-button>
					<el-button type="primary" @click="completeTask">确定</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>

		<el-dialog title="审批拒绝" :visible.sync="cantVisible" :modal="false"  v-loading="tableloading" style="width: 80%;margin-left:10%;">
			<el-form>
				<el-form-item label="请输入审批意见">
				  <el-input  v-model="messageCant" :rows= "6" maxlength="200"
				  autocomplete="off" type = "textarea"></el-input>
				</el-form-item>
			<!-- 	<el-upload
				class="upload-demo"
				action="123"
				ref="upload"
				:on-remove="handleRemove"
				:before-remove="beforeRemove"
				:auto-upload = false
				:file-list="fileList"
				:limit="3"
				:http-request="uploadFile"
				>
					<el-button size="small" type="primary">点击上传附件</el-button>
				</el-upload> -->
				<el-form-item style="margin-left:60%">
					<el-button @click="cantVisible = false">取消</el-button>
					<el-button type="primary" @click="deleteProcess">确定</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	
		<!-- 转办弹窗 -->
		<el-dialog title="选择转办人员" :visible.sync="transferTaskVisible">
			<el-form ref="form" label-width="80px">
				<el-form-item label="转办人">
					<el-select v-model="acceptUserId" placeholder="请选择">
						<el-option
						  v-for="item in users"
						  :key="item.id"
						  :label="item.displayName"
						  :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button @click="transferTaskVisible = false">取消</el-button>
					<el-button type="primary" @click="transferTask">确定</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
		
		<!-- 退回弹窗 -->
		<el-dialog title="选择退回节点" :visible.sync="findReturnUserTaskVisible">
			<el-form ref="form" label-width="80px">
				<el-form-item label="退回节点">
					<el-select v-model="backNode" placeholder="请选择">
						<el-option
						  v-for="item in userTaskList"
						  :key="item.id"
						  :label="item.name"
						  :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button @click="findReturnUserTaskVisible = false">取消</el-button>
					<el-button type="primary" @click="flowReturn">确定</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
	import Parser from '../parser/Parser'
	export default {
		components : {
			Parser
		},
		props : ["formConf", "histaskList", "fileList", "purviews","type", "customUrl", "tempRow", "parentDom"],
		data() {
			return {
				/** 转办弹窗显示标识 */
				transferTaskVisible : false,
				findReturnUserTaskVisible : false,
				/** 转办指定人id */
				acceptUserId : '',
				/** 表单提交 */
				fileData : new FormData(),
				/** 回退节点列表 */
				userTaskList : [],
				/** 审批意见 */
				message : '',
				messageCant : '',
				/** 退回节点 */
				backNode : '',
				purview3 : false,
				purview4 : false,
				purview5 : false,
				processImgUrl : '',
				attachmentVisible : false,
				cantVisible : false,
				tableloading:false,
				iframeUrl : '',
				users : []
			}
		},
		mounted() {
			// 操作按钮权限控制
			if (!!this.purviews) {
				let nodePurviewList = this.purviews.split(",");
				for (let p of nodePurviewList) {
					if (p == "3") {
						this.purview3 = true;
					} else if (p == "4") {
						this.purview4 = true;
					} else if (p == "5") {
						this.purview5 = true;
					}
				}
			}
			this.processImgUrl = '/api/flow/genProcessDiagram?processId=' + this.tempRow.instId;

			if (this.customUrl.indexOf("http") != -1 || this.customUrl.indexOf("HTTP") != -1) {
				this.iframeUrl = this.customUrl;
			} else {
				this.iframeUrl = window.location.protocol + "//" + window.location.host + this.customUrl;
			}
			console.log("this.iframeUrl")
			console.log(this.iframeUrl)
		},
		methods : {
			getUsers() {
				this.Axios.post('/api/flow/getUserInf').then(response => {
					if (!!response.data) {
						this.users = response.data.userList;
					} else {
						this.users = [];
					}
				}).catch(err => {
					console.log(err)
					this.$message.error({message : '请求失败!', offset : 70});
				})
			},
			sumbitForm(data) {
			  console.log('sumbitForm1提交数据：', data)
			},
			/** 转办弹窗 */
			showTransferTask () {
				this.transferTaskVisible = true;
			},
			
			/** 转办任务 */
			transferTask () {
				this.Axios.post('/api/flow/transferTask', 'taskId='+this.tempRow.taskId + '&acceptUserId=' + this.acceptUserId).then(response => {
					if (!!response.data) {
						if(response.data.code == "200") {
							this.transferTaskVisible = false;
							this.getMystartFlow();
							this.$message({
								message: '操作成功!',
								type: 'success',
								offset : 70
							});
						} else {
							this.$message.error({message : response.data.message, offset : 70});
						}
					}
				}).catch(err => {
					console.log(err)
					this.$message.error({message : err.message, offset : 70});
				})
			},
			
			/** 补充资料挂起任务*/
			handUpProcessInstance () {
				//this.submitUpload();
				this.fileData.set('taskId', this.tempRow.taskId)
				this.Axios.post('/api/flow/handUpProcessInstance', this.fileData).then(response => {
					if (!!response.data) {
						this.tempRow = null;
						this.fileData = new FormData(); 
						this.getMystartFlow();
						this.$message({
							message: '保存成功!',
							type: 'success',
							offset : 70
						});
					}
				}).catch(err => {
					console.log(err)
					this.$message.error({message : '请求失败!', offset : 70});
				})
			},
			/* 终止任务 */
			deleteProcess (r) {
				debugger
				// this.$prompt('请输入审批意见', '审批拒绝', {
					// confirmButtonText: '确定',
					// cancelButtonText: '取消',
					// type: 'warning'
				// }).then((value) => {
					var formData = null;
					if (this.type == '0') {
						formData = JSON.stringify(this.$refs.parserRef[this.$refs.parserRef.formConf.formModel]);
					} else {
						debugger
						try{
						let callBackData = window.frames['customWindow'].callBack("refuse");
						if(callBackData != null){
								if (callBackData.code != 200) {
									this.$message({
										message:callBackData.msg,
										type: 'warning'
										});
									return;
								} else {
									formData = JSON.stringify(callBackData.formData);
								}
						}
					}catch(e){
						console.log(e);
						if ("SecurityError" != e.name) {
							return;
						}
					}
					}
				if(this.messageCant){
					this.fileData = new FormData();
					this.fileData.append("processInstanceId", this.tempRow.instId);
					this.fileData.append("reason", this.messageCant);
					this.fileData.append("formData", formData);
					this.Axios.post('/api/flow/deleteProcessInstanceById', this.fileData).then(response => {
						if (response.data.code == "200") {
							this.tempRow = null;
							this.message = '';
							this.messageCant = '';
							this.fileData = new FormData(); 
							this.$message({
								message: '保存成功!',
								type: 'success',
								offset : 70
							});
							this.cantVisible = false;
							this.closeDeal();
						} else {
							this.$message.error({message : response.data.message, offset : 70});
						}
					}
				
					).catch(err => {
						console.log(err)
						this.$message.error({message : '请求失败!', offset : 70});
					})
							}else{
					this.$message.error({message : '审批意见不能为空!', offset : 70});
					}
				// }
				// ).catch(() => {
				// });
			
			},
			/* 办结提交 */
			completeTask (r) {
				this.tableloading = true
				var formData = null;
				if (this.type == '0') {
					formData = JSON.stringify(this.$refs.parserRef[this.$refs.parserRef.formConf.formModel]);
				} else {
					try{
						let callBackData = window.frames['customWindow'].callBack("adopt");
						if(callBackData != null){
								if (callBackData.code != 200) {
									this.$message({
										message:callBackData.msg,
										type: 'warning'
										});
										this.tableloading = false;
									return;
								} else {
									formData = JSON.stringify(callBackData.formData);
								}
						}

					}catch(e){
						console.log(e);
						if ("SecurityError" != e.name) {
							return;
						}
						this.tableloading = false;
					}
				}
				//this.submitUpload();
				this.fileData = new FormData();
				this.fileData.append('taskId', this.tempRow.taskId)
				this.fileData.append('message', this.message)
				this.fileData.append('type', "通过")
				this.fileData.append("formData", formData);
				this.Axios.post('/api/flow/completeTask', this.fileData).then(response => {
					if (!!response.data) {
						if (response.data.code == "200") {
							this.tempRow = null;
							this.message = '';
							this.messageCant = '';
							this.fileData = new FormData(); 
							this.$message({
								message: '保存成功!',
								type: 'success',
								offset : 70
							});
							this.attachmentVisible = false;
							this.tableloading = false;
							this.closeDeal();
						} else {
							this.$message.error({message : response.data.message, offset : 70});
							this.tableloading = false;
						}
					}
				}).catch(err => {
					console.log(err)
					this.$message.error({message : '请求失败!', offset : 70});
					this.tableloading = false;
				})
			},
			
			/** 重写上传方法 */
			uploadFile(file) {
				this.fileData = new FormData();
				this.fileData.append('files', file.file); // append增加数据
				console.log(this.fileData);
			},
			
			// 文件移除提醒
			beforeRemove(file, fileList) {
				return this.$confirm(`确定删除 ${ file.name }？`);
			},
			// 文件移除
			handleRemove(file, fileList) {
				console.log(file);
				console.log(fileList);
				this.Axios.post('/api/flow/deleteAttachment', 'attachmentId=' + file.id).then(response => {
					if (!!response.data) {
						this.$message({
							message: '操作成功!',
							type: 'success',
							offset : 70
						});
					}
				}).catch(err => {
					console.log(err)
					this.$message.error({message : '请求失败!'});
				})
			},
			// 触发文件上传
			/* submitUpload() {
				this.$refs.upload.submit();
			}, */
			
			// 挂起流程
			activateProcessInstance (r) {
				this.$confirm('是否恢复被挂起的流程?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.Axios.post('/api/flow/activateProcessInstance', 'taskId=' + r.taskId).then(response => {
						if (!!response.data) {
							this.$message({
								message: '操作成功!',
								type: 'success',
								offset : 70
							});
						}
					}).catch(err => {
						console.log(err)
						this.$message.error({message : '请求失败!', offset : 70});
					})
				}).catch(() => {
				});
			},
			// 可驳回节点列表
			findReturnUserTask(){
				this.findReturnUserTaskVisible = true;
				this.Axios.post('/api/flow/findReturnUserTask', 'taskId=' + this.tempRow.taskId).then(response => {
					if (!!response.data) {
						this.userTaskList = response.data;
					}
				}).catch(err => {
					console.log(err)
					this.$message.error({message : '请求失败!', offset : 70});
				})
			},
			// 任务退回
			flowReturn(){
				this.Axios.post('/api/flow/flowReturn', 'taskId=' + this.tempRow.taskId + '&targetKey=' + this.backNode).then(response => {
					if (!!response.data) {
						if (response.data.code != '200') {
							this.$message.error({message : response.data.message, offset : 70});
						} else {
							this.$message({
								message: '操作成功!',
								type: 'success',
								offset : 70
							});
							this.findReturnUserTaskVisible = false;
							this.closeDeal();
						}
					}
				}).catch(err => {
					console.log(err)
					this.$message.error({message : '请求失败!', offset : 70});
				})
			},
			closeDeal () {
				this.iframeUrl="";
				this.parentDom.closeDealVue();
			}
		}
	}

</script>

<style>
.el-message-box{
	margin-top: -29%;
	width: 40%;
	height: 28%;
}
</style>