hs_hzl_uniapp_ml/pageApp/ge/geReserveApproval.vue

<template>
	<view class="geHeight">
		<view style="height: 100%;">
			<u-gap height="10" bgColor="#f7f7f7"></u-gap>
			<view>
				<uni-row>
					<uni-col :span="6">
						<view class="desc">
							申请人
						</view>
					</uni-col>
					<uni-col :span="19">
						<view class="desc">
							{{data.formData.apply_user_name}}
						</view>
					</uni-col>
				</uni-row>
			</view>
			<u-gap height="10" bgColor="#f7f7f7"></u-gap>
			<view>
				<uni-row>
					<uni-col :span="6">
						<view class="desc">
							申请日期
						</view>
					</uni-col>
					<uni-col :span="19">
						<view class="desc">
							{{dateFormat(data.formData.apply_date)}}
						</view>
					</uni-col>
				</uni-row>
			</view>
			<u-gap height="10" bgColor="#f7f7f7"></u-gap>
			<view>
				<uni-row>
					<uni-col :span="6">
						<view class="desc">
							申请部门
						</view>
					</uni-col>
					<uni-col :span="19">
						<view class="desc">
							{{$dictTranslation(data.formData.apply_department,'deptData','dept')}}
						</view>
					</uni-col>
				</uni-row>
			</view>
			<u-gap height="10" bgColor="#f7f7f7" v-if="data.formData.record_type === '2'"></u-gap>
			<view v-if="data.formData.record_type === '2'">
				<uni-row>
					<uni-col :span="6">
						<view class="desc">
							申请用途
						</view>
					</uni-col>
					<uni-col :span="19">
						<view class="desc">
							{{$dictTranslation(data.formData.apply_reason,'out_storage_type','dict')}}
						</view>
					</uni-col>
				</uni-row>
			</view>
			<u-gap height="10" bgColor="#f7f7f7"></u-gap>
			<view>
				<uni-row>
					<uni-col :span="6">
						<view class="desc">
							物资类型
						</view>
					</uni-col>
					<uni-col :span="19">
						<view class="desc">
							{{data.formData.goodsData.type_root}}
						</view>
					</uni-col>
				</uni-row>
			</view>
			<view>
				<uni-row>
					<uni-col :span="6">
						<view class="desc">
							具体分类
						</view>
					</uni-col>
					<uni-col :span="19">
						<view class="desc">
							{{data.formData.goodsData.type_branch}}
						</view>
					</uni-col>
				</uni-row>
			</view>
			<u-gap height="10" bgColor="#f7f7f7"></u-gap>
			<view>
				<uni-row>
					<uni-col :span="6">
						<view class="desc">
							物资名称
						</view>
					</uni-col>
					<uni-col :span="19">
						<view class="desc">
							{{data.formData.goodsData.NAME}}
						</view>
					</uni-col>
				</uni-row>
			</view>
			<u-gap height="10" bgColor="#f7f7f7"></u-gap>
			<view>
				<uni-row>
					<uni-col :span="6">
						<view class="desc">
							单位
						</view>
					</uni-col>
					<uni-col :span="19">
						<view class="desc">
							{{data.formData.goodsData.unit}}
						</view>
					</uni-col>
				</uni-row>
			</view>
			<u-gap height="10" bgColor="#f7f7f7"></u-gap>
			<view>
				<uni-row>
					<uni-col :span="6">
						<view class="desc" v-if="data.formData.record_type === '1'">
							登记数量
						</view>
						<view class="desc" v-if="data.formData.record_type === '2'">
							申请数量
						</view>
						<view class="desc" v-if="data.formData.record_type === '3'">
							归还数量
						</view>
					</uni-col>
					<uni-col :span="19">
						<view class="desc">
							{{data.formData.amount}}
						</view>
					</uni-col>
				</uni-row>
			</view>
			<u-gap height="10" bgColor="#f7f7f7"></u-gap>
			<view>
				<uni-row>
					<uni-col :span="6">
						<view class="desc" v-if="data.formData.record_type === '2'">
							备注
						</view>
						<view class="desc" v-if="data.formData.record_type === '3'">
							物品状态
						</view>
					</uni-col>
					<uni-col :span="19">
						<view class="desc" v-if="data.formData.remark">
							{{ data.formData.remark}}
						</view>
					</uni-col>
				</uni-row>
			</view>
			<u-gap height="10" bgColor="#f7f7f7"></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="#f7f7f7"></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="#f7f7f7"></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>
		</view>
		<u-gap height="110" bgColor="#f7f7f7"></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 {
				nextApproval: '',
				nextUserName: '',
				data: uni.getStorageSync("approval"),
				form: {},
				dataTree: [],
				queryParams: {},
				historyData: [],
				rejectHistoryData: [],
				active: 0,
				list1: [],
				isDisabled: false,
				actions: [],
				type: 'center',
				zindeButtion: 1,
				selectTitle: '',
				nextTitle: ''
			}
		},
		onLoad() {
			uni.showLoading({
				title: '正在加载'
			})
			this.getHouXuanZu()
			this.getListHistory()
			this.readTask()
			if (this.data.baseName && this.data.pageType === 1) {
				uni.setNavigationBarTitle({
					title: this.data.baseName
				})
			}
		},
		methods: {
			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
				}
			},
			rejectSubmit(item) {
				this.form.rejectBaseId = item.baseId
				this.nextApproval = item.operator
				this.submitPass()
			},
			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() {
				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 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 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) {
					this.historyData = res.data
					if (0 != this.historyData.length) {
						for (var i = 0; i < this.historyData.length; i++) {
							this.list1.push({
								title: 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
					uni.hideLoading()
				}
			},
			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 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 #f7f7f7 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>