guomao/guomaoUniapp/pages/home/deal.vue

<template>
	<view>
		<view :style="style">
			<scroll-view scroll-y :style="maxHeight">
				<contractDetail v-if="contractDetailShow" :businessKey = "businessKey"></contractDetail>
				<paymentDetail v-if="paymentDetailShow" :businessKey = "businessKey" :menuId="menuId" :processInstanceId="processInstanceId" ref="payRef"></paymentDetail>
				<financeFlowable v-if="financeFlowableShow" :businessKey = "businessKey" ref="financeRef"></financeFlowable>
				<shanghaiPaymentDetail v-if="shanghaiPaymentDetailShow" :businessKey = "businessKey" ref="shanghaiPaymentRef"></shanghaiPaymentDetail>
				<shanghaiContractDetail v-if="shanghaiContractDetailShow" :businessKey = "businessKey" ref="shanghaiContractRef"></shanghaiContractDetail>
			</scroll-view>
		</view>
		<view class="navigation" v-if="showButtom">
			<view class="left">
				<view class="item" @click="back()">
					<u-icon name="/static/icon/back.png" :size="iconSize"></u-icon>
					<view class="text u-line-1">返 回</view>
				</view>
				<!-- <view class="item">
					<u-icon name="/static/icon/zhuanban.png" :size="iconSize"></u-icon>
					<view class="text u-line-1">转 办</view>
				</view>
				<view class="item">
					<u-icon name="/static/icon/guaqi.png" :size="iconSize"></u-icon>
					<view class="text u-line-1">挂 起</view>
				</view>
				<view class="item">
					<u-icon name="/static/icon/tuihui.png" :size="iconSize"></u-icon>
					<view class="text u-line-1">退 回</view>
				</view> -->
				<view class="item" @click="deleteTaskModalShow()">
					<u-icon name="/static/icon/zhongzhi.png" :size="iconSize"></u-icon>
					<view class="text u-line-1">终 止</view>
				</view>
				<view class="item" @click="completeTaskModalShow()">
					<u-icon name="/static/icon/banjie.png" :size="iconSize"></u-icon>
					<view class="text u-line-1">提 交</view>
				</view>
				<view class="item" @click="taskDetailOpen()">
					<u-icon name="/static/icon/shenpixiangqing.png" :size="iconSize"></u-icon>
					<view class="text u-line-1">审批详情</view>
				</view>
			</view>
		</view>
		
		<uni-popup ref="popup" type="dialog">
		    <uni-popup-dialog mode="input" type="info" title="审批意见" @confirm="completeTask"></uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="popupDelete" type="dialog">
		    <uni-popup-dialog mode="input" type="info" title="终止原因" @confirm="deleteTask"></uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="popupWarn" type="message">
			<view style = "margin-top: 40%;margin-left: 10%; width: 80%;text-align: center;">
				<uni-popup-message type="warn" :message="warnMessage" :duration="1000"></uni-popup-message>
			</view>
		</uni-popup>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import contractDetail from '@/components/pages/beijing/contract/contractDetail.vue';
	import paymentDetail from '@/components/pages/beijing/payment/paymentDetail.vue';
	import financeFlowable from '@/components/pages/beijing/finance/financeFlowable.vue';
	import shanghaiPaymentDetail from '@/components/pages/shanghai/payment/shanghaiPaymentDetail.vue';
	import shanghaiContractDetail from '@/components/pages/shanghai/contract/shanghaiContractDetail.vue';
	export default {
		components:{contractDetail, paymentDetail, financeFlowable, shanghaiPaymentDetail, shanghaiContractDetail},
		data() {
			return {
				taskId : '',
				processInstanceId : '',
				menuId : '',
				businessKey : '',
				style : 'height:'+(uni.getSystemInfoSync().screenHeight - 100)+'px;z-index:1',
				contractDetailShow : false,
				paymentDetailShow : false,
				financeFlowableShow : false,
				shanghaiPaymentDetailShow : false,
				shanghaiContractDetailShow : false,
				formData : null,
				warnMessage : '',
				maxHeight : 'height:'+ (uni.getSystemInfoSync().screenHeight) +'px',
				iconSize : 40,
				showButtom : false
			}
		},
		onLoad(option) {
			this.processInstanceId = option.processInstanceId;
			this.taskId = option.taskId;
			this.menuId = option.menuId;
			this.businessKey = option.businessKey;
			/**--- 北京相关 ---*/
			// 合同审批
			if (this.menuId == '390001') {
				this.contractDetailShow = true;
			// 收付款审批
			} else if(this.menuId.indexOf('4400001') != -1) {
				this.paymentDetailShow = true;
			// 入库单审批
			} else if (this.menuId == '350003') {
				this.financeFlowableShow = true;
			} 
			/**--- 上海相关 ---*/
			// 付款审批
			else if (this.menuId == '150001') {
				this.shanghaiPaymentDetailShow = true;
			} else if (this.menuId == '090001') {
				this.shanghaiContractDetailShow = true;
			}
			
			// 竖屏
			if (uni.getSystemInfoSync().screenHeight > uni.getSystemInfoSync().screenWidth) {
				this.iconSize = 40;
				//#ifdef MP-WEIXIN
				this.maxHeight = 'height:'+ (uni.getSystemInfoSync().screenHeight - 100) +'px';
				// #endif
				//#ifdef H5
				this.maxHeight = 'height:'+ (uni.getSystemInfoSync().screenHeight - 50) +'px';
				// #endif
			} else {
				this.iconSize = 15;
				this.maxHeight = 'height:'+ (uni.getSystemInfoSync().screenHeight - 35) +'px';
			}
			this.isMyTask()
		},
		methods:{
			back(){
				const eventChannel = this.getOpenerEventChannel()
				eventChannel.emit('reloadEvent', {});
				uni.navigateBack({});
			},
			// 提交弹窗
			completeTaskModalShow() {
				this.getCallBackData();
				this.$refs.popup.open()
			},
			// 任务提交
			completeTask(e) {
				let self = this;
				if (!e) {
					this.warnMessage = "请输入审批意见!";
					this.$refs.popupWarn.open();
					setTimeout(function(){
						self.$refs.popup.open()
					}, 1000)
					return;
				}
				var fileData = {};
				fileData.taskId = this.taskId;
				fileData.message = e;
				fileData.type =  "通过";
				if (!!this.formData) {
					fileData.formData = JSON.stringify(this.formData);
				}
				
				this.flowableRequest({
					action: "flow/completeTask",
					data : fileData,
					success(resData) {
						self.$refs.uToast.show({
							title: '操作成功!',
							type: 'success',
							callback(){
								self.back();
							}
						})
					}
				})
			},
			// 终止弹窗
			deleteTaskModalShow() {
				this.getCallBackData();
				this.$refs.popupDelete.open();
			},
			// 流程终止
			deleteTask(e) {
				var self = this;
				if (!e) {
					this.warnMessage = "请输入终止原因!";
					this.$refs.popupWarn.open();
					setTimeout(function(){
						self.$refs.popupDelete.open()
					}, 1000)
					return;
				}
				
				var fileData = {};
				fileData.processInstanceId = this.processInstanceId;
				fileData.reason = e;
				if (!!this.formData) {
					fileData.formData = JSON.stringify(this.formData);
				}
				
				this.flowableRequest({
					action: "flow/deleteProcessInstanceById",
					data : fileData,
					success(resData) {
						self.$refs.uToast.show({
							title: '操作成功!',
							type: 'success',
							callback(){
								self.back();
							}
						})
					}
				})
			},
			// 审批进度详情
			taskDetailOpen(){
				uni.navigateTo({
				    url: '/pages/home/taskDetail?processInstanceId='+this.processInstanceId
				});
			},
			getCallBackData(){
				if (this.menuId.indexOf('4400001') != -1) {
					this.formData = this.$refs.payRef.getCallBackData();
				} else if (this.menuId == '350003') {
					this.formData = this.$refs.financeRef.getCallBackData();
				} else if (this.menuId == '150001') {
					this.formData = this.$refs.shanghaiPaymentRef.getCallBackData();
				} else if (this.menuId == '090001') {
					this.formData = this.$refs.shanghaiContractRef.getCallBackData();
				}
			},
			isMyTask(){
				var self = this;
				this.flowableRequest({
					action: "flow/isMyTask",
					data : {taskId : this.taskId},
					success(resData) {
						if (resData.data.data != 0) {
							self.showButtom = true;
						}
					}
				})
			}
		},
		onResize(res) {
			this.maxHeight = 'height:'+res.size.windowHeight+'px';
			// 竖屏
			if (res.size.windowHeight > res.size.windowWidth) {
				this.iconSize = 40;
			// 横屏	
			} else {
				this.iconSize = 15;
			}
			
			var self = this;
			if (this.financeFlowableShow) {
				this.financeFlowableShow = false;
				setTimeout(function(){
					self.financeFlowableShow = true;
				}, 300)
			} else if(this.contractDetailShow) {
				this.contractDetailShow = false;
				setTimeout(function(){
					self.contractDetailShow = true;
				}, 300)
			} else if(this.paymentDetailShow) {
				this.paymentDetailShow = false;
				setTimeout(function(){
					self.paymentDetailShow = true;
				}, 300)
			}
		}
	};
</script>

<style lang="scss" scoped>
.navigation {
	display: flex;
	border: solid 2rpx #f2f2f2;
	background-color: #ffffff;
	padding: 16rpx 0;
	width: 100%;
	position: fixed;
	bottom: -10rpx;
	z-index: 2;
	.left {
		display: flex;
		font-size: 9px;
		width: 100%;
		.item {
			margin: auto;
			text-align: center;
		}
	}
}
</style>