hs_hzl_uniapp_ml/pageApp/components/ge.vue

<template>
	<view class="geHeight">
		<view>
			<u-gap height="10" bgColor="#f5f5f5"></u-gap>
			<view 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 class="desc">
				<view>
					<uni-steps :options="list1" :active="active" direction="column" active-color="rgb(55,186,189)" />
				</view>
			</view>
		</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"></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 {
				baseUrl: this.$BASE_URL,
				data: uni.getStorageSync("approval"),
				form: {
					nextApproval: '',
					nextUserName: '',
					pz: ''
				},
				dataTree: [],
				queryParams: {},
				historyData: [],
				rejectHistoryData: [],
				active: 0,
				list1: [],
				isDisabled: false,
				actions: [],
				type: 'center',
				zindeButtion: 1,
				selectTitle: '',
				nextTitle: ''
			}
		},
		mounted() {
			uni.showLoading({
				title: '正在加载'
			})
			if (this.data.baseName && this.data.pageType === 1) {
				uni.setNavigationBarTitle({
					title: this.data.baseName
				})
			}
			this.getHouXuanZu()
			this.getListHistory()
			this.readTask()
			uni.hideLoading()
		},
		methods: {
			nextApprovalChange(e) {
				let nextUser = e.detail.value[1]
				this.form.nextUserName = e.detail.value[1].text
				this.form.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.form.nextApproval = item.operator
				this.submitPass()
			},
			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()
						}
					})
				}
			},
			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',
					urlType: this.$getUrlType()
				});
				if (res.code === 200) {

				}
			},
			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',
					urlType: this.$getUrlType()
				});
				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,
					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 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
					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.list1.push({
								title: "待审批"
							})
						}
					}
					this.active = this.list1.length - 1
					uni.hideLoading()
				}
			},
			dataForm(comment, pass) {
				this.form = {
					comment: this.form.pz ? this.form.pz : comment,
					result: pass,
					baseId: this.data.baseId,
					taskId: this.data.id,
					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.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',
					urlType: this.$getUrlType()
				});
				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") {
					if (!this.form.nextApproval) {
						uni.hideLoading()
						uni.showModal({
							content: '请选择批准人',
							title: '提交失败',
							showCancel: false
						})
						return
					}
				}
				const {
					data: res
				} = await this.$httpRequest({
					url: '/app/nextStep',
					method: 'post',
					data: this.form,
					urlType: this.$getUrlType()
				});
				if (res.code === 200) {
					uni.hideLoading()
					uni.showModal({
						title: "提交成功",
						icon: "OK",
						showCancel: false,
						success() {
							uni.navigateBack()
						}
					})
				} else {
					uni.showModal({
						title: "提交失败",
						icon: "ERROR",
						showCancel: false,
						content: res.msg
					})
				}
				uni.hideLoading()
			},
			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%;
	}

	.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>