hs_hzl_uniapp_ml/pageApp/ge/geApproval.vue

<template>
	<view class="geHeight">
		<view style="height: 100%;">
			<u-gap height="10" bgColor="#f5f5f5"></u-gap>
			<view>
				<uni-row>
					<uni-col :span="6">
						<view class="desc">
							请假类型
						</view>
					</uni-col>
					<uni-col :span="18">
						<view class="desc">
							{{$dictTranslation(data.formData.type,'app_vacate_type','dict')}}
						</view>
					</uni-col>
				</uni-row>
			</view>
			<u-gap height="10" bgColor="#f5f5f5"></u-gap>
			<view>
				<uni-row>
					<uni-col :span="6">
						<view class="desc">
							请假原因
						</view>
					</uni-col>
					<uni-col :span="18">
						<view class="desc">
							{{data.formData.reason}}
						</view>
					</uni-col>
				</uni-row>
			</view>
			<u-gap height="10" bgColor="#f5f5f5"></u-gap>
			<view>
				<uni-row>
					<uni-col :span="6">
						<view class="desc">
							申请人
						</view>
					</uni-col>
					<uni-col :span="18">
						<view class="desc">
							{{data.formData.apply_user_name}}
						</view>
					</uni-col>
				</uni-row>
				<uni-row>
					<uni-col :span="6">
						<view class="desc">
							开始时间
						</view>
					</uni-col>
					<uni-col :span="18">
						<view class="desc">
							{{dateFormat(data.formData.leave_start_time)}}
						</view>
					</uni-col>
				</uni-row>
				<uni-row>
					<uni-col :span="6">
						<view class="desc">
							结束时间
						</view>
					</uni-col>
					<uni-col :span="18">
						<view class="desc">
							{{dateFormat(data.formData.leave_end_time)}}
						</view>
					</uni-col>
				</uni-row>
				<uni-row>
					<uni-col :span="6">
						<view class="desc">
							天数
						</view>
					</uni-col>
					<uni-col :span="18">
						<view class="desc">
							{{data.formData.total_time}}
						</view>
					</uni-col>
				</uni-row>
				<uni-row>
					<uni-col :span="6">
						<view class="desc">
							是否离沪
						</view>
					</uni-col>
					<uni-col :span="18">
						<view class="desc">
							{{data.formData.is_lh}}
						</view>
					</uni-col>
				</uni-row>
				<uni-row>
					<uni-col :span="6">
						<view class="desc">
							出行方式
						</view>
					</uni-col>
					<uni-col :span="18">
						<view class="desc" v-if="data.formData.trip_mode">
							{{data.formData.trip_mode}}
						</view>
					</uni-col>
				</uni-row>
				<uni-row>
					<uni-col :span="6">
						<view class="desc">
							出行地点
						</view>
					</uni-col>
					<uni-col :span="18">
						<view class="desc" v-if="data.formData.trip_address">
							{{data.formData.trip_address}}
						</view>
					</uni-col>
				</uni-row>
				<uni-row>
					<uni-col :span="6">
						<view class="desc">
							详细地址
						</view>
					</uni-col>
					<uni-col :span="18">
						<view class="desc" v-if="data.formData.detail_addr">
							{{data.formData.detail_addr}}
						</view>
					</uni-col>
				</uni-row>
			</view>
			<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="data.formData.imgUrls" multiple
						width="120" height="120" useBeforeRead="true" disabled="true" uploadIcon="clock">
					</u-upload>
					<u-upload v-if="data.pageType >= 3" :fileList="data.formData.imgUrls" multiple width="120"
						height="120" useBeforeRead="true" disabled="true" uploadIcon="clock">
					</u-upload>
				</view>
			</view>
			<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 class="desc" v-if="data.pageType === 1">
				<view class="desc" style="color: #bababa;">
					批注:
				</view>
				<view class="desc">
					<!-- <u--textarea v-model="pz" border="bottom"></u--textarea> -->
					<uni-easyinput type="textarea" v-model="pz" primaryColor="rgb(55,186,189)" :inputBorder="false">
					</uni-easyinput>
				</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="8">
					<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="8">
					<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="8">
					<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 :style="{'height': approvalPopupHeight+'px'}"
					: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: [],
				active: 0,
				list1: [],
				isDisabled: false,
				actions: [],
				type: 'center',
				zindeButtion: 1,
				selectTitle: '',
				nextTitle: '',
				rejectHistoryData: [],
				approvalPopupHeight: 0,
			}
		},
		onLoad() {
			this.getNextHouXuanZu()
			this.getListHistory()
			this.readTask()
			this.approvalPopupHeight = parseInt(uni.getStorageSync('windowHeight')) / 2 + 50
			console.log(uni.getStorageSync('windowHeight'))
			if (this.data.baseName && this.data.pageType === 1) {
				uni.setNavigationBarTitle({
					title: this.data.baseName
				})
			}
		},
		methods: {
			nextApprovalChange(e) {
				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',
					urlType: this.$getUrlType()
				});
				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()
						}
					})
				}
			},
			async readTask() {
				const {
					data: res
				} = await this.$httpRequest({
					url: '/app/rt?taskId=' + this.data.id,
					method: 'get',
					urlType: this.$getUrlType()
				});
				if (res.code === 200) {}
			},
			async getCurrentHouXuanZu() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				const {
					data: res
				} = await this.$httpRequest({
					url: '/app/currentPL?groupId=' + this.data.baseGroupId + '&baseId=' + this.data.baseId,
					method: 'get',
					urlType: this.$getUrlType()
				});
				if (res.code === 200) {
					this.dataTree = res.data
					uni.hideLoading()
				}
			},
			async getNextHouXuanZu() {
				const {
					data: res
				} = await this.$httpRequest({
					url: '/app/pL?groupId=' + this.data.baseGroupId + '&baseId=' + this.data.baseId,
					method: 'get',
					urlType: this.$getUrlType()
				});
				if (res.code === 200) {
					this.dataTree = res.data
				}
			},
			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,
					urlType: this.$getUrlType()
				});
				if (res.code === 200) {
					this.historyData = res.data
					this.list1
					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] && !(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.type = type
				this.dataForm(comment, pass)
				if (pass !== 'RESULT_CASE_OF' && 2.0 >= parseFloat(this.data.formData.total_time) && this.data.formData
					.is_lh === '不离沪') {
					this.submitPass()
					return
				}
				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.nextTitle = '下一步审批人'
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open('bottom')
			},
			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,
					urlType: this.$getUrlType()
				});
				if (res.code === 200) {
					if (res.data.length == 0) {
						this.submitPass()
						return
					}
					this.$refs.popup2.open('bottom')
					this.rejectHistoryData = 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,
					urlType: this.$getUrlType()
				});
				if (res.code === 200) {
					let that = this
					uni.hideLoading()
					uni.showModal({
						title: "提交成功",
						icon: "OK",
						showCancel: false,
						success() {
							setTimeout(() => {
								that.isDisabled = false
							}, 1000)
							uni.navigateTo({
								url: "../../pages/app/index"
							})
							uni.navigateBack()
						}
					})
				} else {
					uni.hideLoading()
					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 30rpx;
	}

	.popup-content {
		height: 100%;
	}

	.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;
	}
</style>