hs_hzl_uniapp_ml/pageApp/ge/geContract.vue

<template>
	<view class="geHeight">
		<view style="height: 100%;">
			<u-gap height="10" bgColor="#f5f5f5"></u-gap>
			<view class="desc">
				<uni-row>
					<uni-col :span="5">
						<view class="desc">
							标题
						</view>
					</uni-col>
					<uni-col :span="18">
						<view class="desc">
							{{data.formData.title}}
						</view>
					</uni-col>
				</uni-row>
			</view>
			<u-gap height="10" bgColor="#f5f5f5"></u-gap>
			<view class="desc">
				<uni-row>
					<uni-col :span="5">
						<view class="desc">
							文件
						</view>
					</uni-col>
					<uni-col :span="18">
						<view class="u-demo-block">
							<text class="u-demo-block__title">点击下方文件名查看</text>
							<view class="u-demo-block__content">
								<view v-for="item in fileList" class="yyButton" style="border: 1rpx solid rgb(10, 185, 156);color: rgb(10, 185, 156);font-size: 22rpx; padding: 5rpx 15rpx;
											 border-radius: 10rpx;" @click="previewFile(item.url)">
									{{item.name?item.name : "无名称"}}
								</view>
							</view>
						</view>
					</uni-col>
				</uni-row>
			</view>
			<u-gap height="10" bgColor="#f5f5f5"></u-gap>
			<view class="desc">
				<view class="desc">
					图片
				</view>
				<view style="width: 100%;overflow-x: scroll;white-space: nowrap">
					<u-upload v-if="data.pageType >= 1 && data.pageType <= 2" :fileList="imgList" multiple width="120"
						height="120" useBeforeRead="true" disabled="true" uploadIcon="clock">
					</u-upload>
					<u-upload v-if="data.pageType >= 3" :fileList="data.formData.img_list" multiple width="120"
						height="120" useBeforeRead="true" disabled="true" uploadIcon="clock">
					</u-upload>
				</view>
			</view>
			<u-gap height="10" bgColor="#f5f5f5"></u-gap>
			<view class="desc">
				<uni-row>
					<uni-col :span="5">
						<view class="desc">
							申请人
						</view>
					</uni-col>
					<uni-col :span="18">
						<view class="desc">
							{{data.formData.apply_user_name}}
						</view>
					</uni-col>
				</uni-row>
			</view>
			<u-gap height="10" bgColor="#f5f5f5"></u-gap>
			<view class="desc">
				<view>
					<uni-steps :options="list1" :active="active" direction="column" active-color="rgb(55,186,189)" />
				</view>
			</view>
			<u-gap height="10" bgColor="#f5f5f5"></u-gap>
			<view v-if="data.pageType === 1" class="desc">
				<view class="desc" style="color: #bababa;">
					批注:
				</view>
				<view class="desc">
					<u--textarea v-model="pz" border="bottom"></u--textarea>
				</view>
			</view>
			<u-gap height="10" bgColor="#f5f5f5"></u-gap>
		</view>
		<view v-if="data.pageType == 3" class="bomButtonBody" style="height: 10%;">
			<uni-row v-if="list1 && list1.length === 1">
				<uni-col>
					<view class="desc">
						<u-button :disabled="isDisabled" color="rgb(55,186,189)" shape="circle" size="large"
							@click="revoke">撤销
						</u-button>
					</view>
				</uni-col>
			</uni-row>
			<uni-row>
				<uni-col>
					<view class="desc">
						<!-- <u-button :disabled="isDisabled" color="rgb(55,186,189)" shape="circle" size="large"
							@click="againLaunch">再次发起
						</u-button> -->
					</view>
				</uni-col>
			</uni-row>
		</view>
		<u-gap height="110" bgColor="#f5f5f5"></u-gap>
		<view v-if="data.pageType === 1 && zindeButtion === 1 && data.isEnd === '0'" class="bomButtonBody"
			style="position: fixed;bottom: 0">
			<uni-row>
				<uni-col :span="10">
					<view class="desc">
						<u-button color="rgb(55,186,189)" shape="circle" size="large"
							@click="passTrue('同意','RESULT_TRUE','bottom')">同意，下一步
						</u-button>
					</view>
				</uni-col>
				<uni-col :span="7.5">
					<view class="desc">
						<u-button color="rgb(188, 188, 188)" shape="circle" size="large"
							@click="passTrue('驳回','RESULT_FALSE','bottom')">驳回</u-button>
					</view>
				</uni-col>
				<uni-col :span="7.5">
					<view class="desc">
						<u-button color="rgb(136, 188, 160)" shape="circle" size="large"
							@click="passTrue('驳回','RESULT_CASE_OF','bottom')">转交</u-button>
					</view>
				</uni-col>
			</uni-row>
		</view>
		<view>
			<!-- 普通弹窗 -->
			<uni-popup ref="popup" background-color="#fff" @change="propChange">
				<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
					<view class="desc">
						<uni-row>
							<uni-col :span="8">
								<view style="font-size: 40rpx;color: rgb(145, 145, 145);">
								</view>
							</uni-col>
							<uni-col :span="13">
								<view style="font-size: 40rpx;color: rgb(98, 98, 98);">
									{{nextTitle}}
								</view>
							</uni-col>
							<uni-col :span="3">
								<view @click="submitPass" style="font-size: 40rpx;color: rgb(55,186,189);">
									确认
								</view>
							</uni-col>
						</uni-row>
					</view>
					<view class="desc">
						<uni-row>
							<uni-col>
								<view class="desc">
									<uni-data-picker ref="picker" placeholder="请选择" :popup-title="selectTitle"
										:localdata="dataTree" v-model="nextUserName" @change="nextApprovalChange">
									</uni-data-picker>
								</view>
							</uni-col>
						</uni-row>
					</view>
				</view>
			</uni-popup>
		</view>
		<view>
			<!-- 驳回选择弹窗 -->
			<uni-popup ref="popup2" background-color="#fff" @change="propChange">
				<view style="height: 800rpx;">
					<view class="desc">
						<view style="text-align: center;font-size: 30rpx;color: rgb(98, 98, 98);">
							驳回至以下任意流程
						</view>
					</view>
					<view style="padding: 20rpx 10rpx;">
						<uni-list v-for="item in rejectHistoryData">
							<uni-list-item :clickable="true" @click="rejectSubmit(item)" :title="item.comment" />
						</uni-list>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pz: '',
				nextApproval: '',
				nextUserName: '',
				app_vacate_type: uni.getStorageSync('app_vacate_type'),
				data: uni.getStorageSync("approval"),
				form: {},
				dataTree: [],
				queryParams: {},
				historyData: [],
				nextTitle: '',
				selectTitle: '',
				active: 0,
				list1: [],
				isDisabled: false,
				actions: [],
				type: 'center',
				zindeButtion: 1,
				rejectHistoryData: [],
				fileList: [],
				imgList: []
			}
		},
		onLoad() {
			uni.showLoading({
				title: '正在加载'
			})
			setTimeout(() => {
				let start = new Date().getTime()
				this.fileList = JSON.parse(this.data.formData.file_list)
				this.imgList = JSON.parse(this.data.formData.img_list)
			}, 10)
			this.getHouXuanZu()
			this.getListHistory()
			this.readTask()
			if (this.data.baseName && this.data.pageType === 1) {
				uni.setNavigationBarTitle({
					title: this.data.baseName
				})
			}
		},
		methods: {
			rejectSubmit(item) {
				this.form.rejectBaseId = item.baseId
				this.nextApproval = item.operator
				this.submitPass()
			},
			nextApprovalChange(e) {
				console.log('onchange:', e.detail.value[1]);
				this.nextUserName = e.detail.value[1].text
				this.nextApproval = e.detail.value[1].value
			},
			propChange(e) {
				if (e.show) {
					this.zindeButtion = 0
				} else {
					this.zindeButtion = 1
				}
			},
			againLaunch() {
				this.$goto('../hr/leave')
			},
			async revoke() {
				const {
					data: res
				} = await this.$httpRequest({
					url: '/app/revoke?taskId=' + this.data.taskId,
					method: 'get'
				});
				if (res.code === 200) {
					uni.showModal({
						title: "撤销成功",
						icon: "OK",
						showCancel: false,
						success() {
							uni.navigateBack()
						}
					})
				} else {
					uni.showModal({
						title: "撤销失败",
						content: res.msg,
						showCancel: false,
						success() {
							uni.navigateBack()
						}
					})
				}
			},
			previewFile(fileUrl) {
				uni.showLoading({
					title: '加载中'
				})
				uni.downloadFile({
					url: fileUrl, //后端返回的文件地址
					// filePath: wx.env.USER_DATA_PATH + '/' + item.name + '.' + item.value.split('.')[item.value.split('.').length - 1],
					success: function(res) {
						if (res.statusCode === 200) {
							uni.openDocument({
								showMenu: true,
								filePath: res.tempFilePath,
								success: function(res) {
									console.log(res, '打开文件成功')
								},
								fail: (err) => {
									uni.showToast({
										title: '打开文件失败请重试',
										icon: 'none'
									})
								}
							})
						} else {
							uni.showToast({
								title: '打开文件失败请重试',
								icon: 'none'
							})
						}
						uni.hideLoading()
					},
					fail: (err) => {
						uni.hideLoading()
						uni.showToast({
							title: '加载失败请重试',
							icon: "none"
						})
					}
				})

			},
			async readTask() {
				if (this.data.msgIsRead === '0') {
					const {
						data: res
					} = await this.$httpRequest({
						url: '/app/rt?taskId=' + this.data.id,
						method: 'get'
					});
					if (res.code === 200) {
						let msgData = uni.getStorageSync("msgData")
						if (this.pageType === 1) {
							--msgData.m1
						} else if (this.pageType === 3) {
							--msgData.m4
						} else if (this.pageType === 4) {
							--msgData.m7
						}
						uni.setStorageSync("msgData", msgData)
					}
				}
			},
			async getHouXuanZu() {
				const {
					data: res
				} = await this.$httpRequest({
					url: '/app/pL?taskId=' + this.data.id + '&groupId=' + this.data.baseGroupId + '&baseId=' +
						this.data.baseId,
					method: 'get'
				});
				if (res.code === 200) {
					this.dataTree = res.data
				}
				uni.hideLoading()
			},
			async getListHistory() {
				let id = this.data.taskId ? this.data.taskId : this.data.id
				const {
					data: res
				} = await this.$httpRequest({
					url: '/app/ctr?taskId=' + id,
					method: 'get',
					data: this.queryParams
				});
				if (res.code === 200) {
					uni.hideLoading()
					this.historyData = res.data
					this.list1
					if (0 != this.historyData.length) {
						for (var i = 0; i < this.historyData.length; i++) {
							if (this.historyData[i].comment && this.historyData[i].comment === "自动结束" ||
								this.historyData[i].comment === "流程结束") {
								this.list1.push({
									title: this.historyData[i].comment,
									desc: this.historyData[i].createTime
								})
							} else {
								this.list1.push({
									title: this.historyData[i].operator + ' ' + this.historyData[i].comment,
									desc: this.historyData[i].createTime
								})
							}
						}
					} else {
						this.list1.push({
							title: "待审批"
						})
					}
					if (this.historyData[this.historyData.length - 1]) {
						if (!(this.historyData[this.historyData.length - 1].comment === "同意并结束") &&
							!(this.historyData[this.historyData.length - 1].comment === "自动结束") &&
							!(this.historyData[this.historyData.length - 1].comment === "流程结束")) {
							this.list1.push({
								title: "待审批"
							})
						}
					}
					this.active = this.list1.length - 1
				}
			},
			dataForm(comment, pass) {
				this.form = {
					comment: this.pz ? this.pz : comment,
					result: pass,
					baseId: this.data.baseId,
					taskId: this.data.id,
					nextApproval: this.nextApproval,
					nextUserName: this.nextUserName,
					formData: this.data.formData
				}
			},
			passTrue(comment, pass, type) {
				this.dataForm(comment, pass)
				if (pass === 'RESULT_TRUE' && this.data.isCandidate == "1") {
					this.submitPass()
					return
				}
				if (pass === 'RESULT_FALSE') {
					this.getRejectListHistory()
					return
				}
				if (pass === 'RESULT_CASE_OF') {
					this.getCurrentHouXuanZu()
					this.selectTitle = '请选择转交人'
					this.nextTitle = '请选择转交人'
					this.$refs.popup.open(type)
					return
				}
				this.getHouXuanZu()
				this.nextTitle = '下一步审批人'
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			async getRejectListHistory() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				let id = this.data.taskId ? this.data.taskId : this.data.id
				const {
					data: res
				} = await this.$httpRequest({
					url: '/app/reject/ctr?taskId=' + id,
					method: 'get',
					data: this.queryParams
				});
				if (res.code === 200) {
					if (res.data.length == 0) {
						this.submitPass()
						return
					}
					this.$refs.popup2.open('bottom')
					this.rejectHistoryData = res.data
					uni.hideLoading()
				}
			},
			async getCurrentHouXuanZu() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				const {
					data: res
				} = await this.$httpRequest({
					url: '/app/currentPL?taskId=' + this.data.id + '&groupId=' + this.data.baseGroupId +
						'&baseId=' + this.data.baseId,
					method: 'get'
				});
				if (res.code === 200) {
					this.dataTree = res.data
					uni.hideLoading()
				}
			},
			async submitPass() {
				uni.showLoading({
					mask: true,
					title: '正在提交'
				})
				if (this.form.result !== 'RESULT_FALSE' && this.data.isCandidate == "0" && 2.0 < parseFloat(this.data
						.formData.total_time)) {
					if (!this.nextApproval) {
						uni.showModal({
							content: '请选择批准人',
							title: '提交失败',
							showCancel: false
						})
						this.isDisabled = false
						return
					}
				}
				this.form.nextApproval = this.nextApproval
				this.form.nextUserName = this.nextUserName
				const {
					data: res
				} = await this.$httpRequest({
					url: '/app/nextStep',
					method: 'post',
					data: this.form
				});
				if (res.code === 200) {
					uni.hideLoading()
					uni.showModal({
						title: "提交成功",
						icon: "OK",
						showCancel: false,
						success() {
							setTimeout(() => {
								this.isDisabled = false
							}, 1000)
							uni.navigateBack()
						}
					})
				} else {
					uni.showModal({
						title: "提交失败",
						icon: "ERROR",
						showCancel: false,
						content: res.msg
					})
				}
				setTimeout(() => {
					this.isDisabled = false
				}, 1000)
				setTimeout(() => {
					this.isDisabled = false
					uni.hideLoading()
				}, 1000)
			},
			dateFormat(time) {
				let date = new Date(time);
				let year = date.getFullYear();
				// 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
				let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				// 拼接
				// return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
				return year + "/" + month + "/" + day;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.desc {
		padding: 10rpx;
	}

	.u-page {
		&__button-item {
			margin: 0 15px 5px 0;
		}
	}

	.u-demo-block__content {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}


	.popup-content {
		height: 800rpx;
	}


	.geHeight {
		height: 100%;
		position: relative;
	}

	.bomButtonBody {
		border-top: 5rpx #f5f5f5 solid;
		padding: 30rpx 0 50rpx 0;
		width: 100%;
		background-color: #ffffff;
	}

	.status-btn {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		height: 92rpx;
		margin: 30rpx;
		background-color: #007AFF;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 15px;
		flex-direction: row;
	}

	.check-btn {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10px;
	}
</style>