Web_TracerMethodology/pages/batchDistribution/batchDistribution.vue

<template>
	<view class="allocationPerson-page">
		<scroll-view class="scroll-y" scroll-y="true">
			<template>
				<view class="blockTitle">计划时间</view>
				<div class="date-view">
					<view class="row">
						<text class="label">开始时间</text>
						<view class="date-box">
							<date-time-picker :height="100" :start="details.planStartDate" :end="details.planEndDate"
								:defaultValue="details.startDate" placeholder="请选择起始时间" pickType="startDate"
								@change="changeDateTime" />
						</view>
					</view>
					<view class="row">
						<text class="label">结束时间</text>
						<view class="date-box">
							<date-time-picker :height="100" :start="details.planStartDate" :end="details.planEndDate"
								:defaultValue="details.endDate" placeholder="请选择结束时间" pickType="endDate"
								@change="changeDateTime" />
						</view>
					</view>
				</div>
				<view class="blockTitle">查核人</view>
				<tm-radio-group :list="empList" :defaultValue='details.empId' :setting="{
				  value: 'employeeId',
				  name: 'employeeName'
				}" :openkeys="[0]" @change="changeDetails" />

			</template>
		</scroll-view>
		<view class="fixed-buttom-btn" @click="sure">
			<text class="btn-text">确定</text>
		</view>
	</view>
</template>

<script>
	// 查核列表编辑 查核人和计划时间
	import {
		mapState
	} from "vuex";
	import moment from 'moment';
	export default {
		computed: {
			...mapState({
				checkList: state => state.editCheckList.checkList
			})
		},
		data() {
			return {
				title: '', // 导航标题
				// 查核组员列表
				empList: [],
				// 组件信息
				details: {},
				// 服务器时间
				dateStr: '',
				timer: null,
				// 点击确定按钮是否直接保存
				isSubmit: false
			}
		},
		onLoad({
			details
		}) {
		
			const _details = details ? JSON.parse(details) : {};
			// 强制刷新返回查核列表页面
			if (getCurrentPages().length === 1) {
				const {
					situationId,
					checkId,
					checkGroupId,
					planStartDate,
					planEndDate
				} = _details;
				uni.redirectTo({
					url: `/pages/editCheckList/editCheckList?situationId=${situationId}&checkId=${checkId}&checkGroupId=${checkGroupId}&startDate=${planStartDate}&endDate=${planEndDate}`
				});
			}
			this.getComponentInfo(_details);
		},
		destroyed() {
			this.clearTimer();
		},
		methods: {
			getComponentInfo(details) {
				// this.setNavigationBarTitle(details.title);
				this.details = details;
				this.getEmpDeptTree(details.checkGroupId);
			},
			// 查询部门人员树
			getEmpDeptTree(checkGroupId) {
				this.$store.dispatch({
					type: 'allocationPerson/commActions',
					key: "getGroupEmpList",
					data: {
						checkGroupId
					}
				}).then(data => {
					if (data) {
						this.empList = data || [];
					}
				});
			},
			// 指派查核人员改变
			changeDetails(selectVal, selectData, index) {
				this.details = {
					...this.details,
					empId: selectData.employeeId,
					empName: selectData.employeeName
				}
			},
			// 时间变化
			changeDateTime(dateObj, pickType) {
				if (pickType === 'startDate') { // 开始时间变化
					this.diffDateTime(dateObj.f3, this.details.endDate);
				} else {
					this.diffDateTime(this.details.startDate, dateObj.f3);
				}
				this.details = {
					...this.details,
					[pickType]: dateObj.f3
				};
			},
			// 开始时间和结束时间对比
			diffDateTime(startTime, endTime) {
				if (moment(startTime).valueOf() > moment(endTime).valueOf()) {
					this.showModal('开始时间不能大于结束时间');
				}
			},
			// 点击确定
			sure() {
				const {
					empId,
					startDate,
					endDate
				} = this.details;
				if (this.isSubmit === true) {
					return this.changeCheckList(this.checkList);
				}
				if (this.title === '指派查核人员') {
					if (!empId) {
						return this.showModal('请选择查核人');
					}
					// this.setNavigationBarTitle('设置查核时间');
				} else {
					if (!startDate) {
						return this.showModal('请选择开始时间');
					}
					if (!endDate) {
						return this.showModal('请选择结束时间');
					}
					if (!empId) {
						// this.setNavigationBarTitle('指派查核人员');
						this.isSubmit = true;
					} else {
						const data = {
							"checkId": this.details.checkId, //  计划id
							"deptIds": JSON.parse(JSON.stringify(this.details.checkedList)), // 多个单位id列表
							"empId": this.details.empId, // 查核者id
							"empName": this.details.empName, // 查核者名字
							"startDate": this.details.startDate, // 开始时间
							"endDate": this.details.endDate // 结束时间
						}
						// console.log({data});
						this.$store.dispatch({
							type: 'batchDistribution/commActions',
							key: 'batchCheckEmp',
							data: {
								...data
							}
						}).then(data => {
							if (data) {
								uni.showModal({
									title: '分配成功！',
									content: '',
									showCancel: false,
									success: function(res) {
										if (res.confirm) {
											// console.log('用户点击确定');
											
											let pages = getCurrentPages();	// 获取当前页面栈
											let prePage = pages[pages.length - 2];	// 上一个页面
											// console.log({prePage});
											prePage.ifInit = true;   
											uni.navigateBack({
												delta: 1
											});
											
										}
									}
								});
							}
						});
					}
				}
			},


			// 获取当前时间
			getDateStr() {
				this.$store.dispatch({
					type: "commActions",
					key: "getDateStr",
				}).then((data) => {
					if (data) {
						this.dateStr = data;
					}
				});
			},
			showModal(content) {
				uni.showModal({
					content,
					showCancel: false
				});
			},
			// 清除定时器
			clearTimer() {
				if (this.timer) {
					clearInterval(this.timer);
					this.timer = null;
				}
			}
		},
	}
</script>

<style lang="less">
	.allocationPerson-page {
		height: 100%;

		.scroll-y {
			height: calc(100% - 87.5rpx);
			padding-top: 15rpx;

			.blockTitle {
				font-size: 22.5rpx;
				font-family: SourceHanSansCN-Normal, SourceHanSansCN;
				font-weight: 400;
				color: #666F80;
				padding: 15rpx 0;
				padding-left: 25rpx;
				border-bottom: 0.62rpx solid #DADEE6;
			}

			.date-view {
				padding: 0 25rpx;
				background: #fff;
				margin-bottom: 12.5rpx;
				border-bottom: 0.62rpx solid #DADEE6;

				.row {
					display: flex;
					align-items: center;
					height: 62.5rpx;
					border-bottom: 0.62rpx solid #DADEE6;

					.label {
						width: 112.5rpx;
						font-size: 22.5rpx;
						color: #292C33;
					}

					.date-box {
						padding-left: 25rpx;
						flex: 1;
					}

					&:last-child {
						border-bottom: 0;
					}
				}
			}
		}
	}
</style>