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 :disabled="details.isDistribution" :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 :disabled="details.isDistribution" :height="100" :start="details.planStartDate" :end="details.planEndDate"
								:defaultValue="details.endDate" placeholder="请选择结束时间" pickType="endDate"
								@change="changeDateTime" />
						</view>
					</view>
				</div>
				<view class="blockTitle">查核人</view>
				<tm-checked-group :list="empList" :defaultValue='checkPresonList' :setting="{
				  value: 'employeeId',
				  name: 'employeeName'
				}" :openkeys="[0]" @change="onCheckPerosonChanged" />
				<view class="blockTitle" v-if="details.situationType == 3">要点分类</view>
				<tm-checked-group v-if="details.situationType == 3" :list="checkPointList"
					:defaultValue='checkedPointList' :setting="{
				  value: 'categoryId',
				  name: 'categoryName'
				}" :openkeys="[0]" @change="checkChanged" />

			</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: {
	
		},
		data() {
			return {
				title: '', // 导航标题
				// 查核组员列表
				empList: [],
				// 组件信息
				details: {},
				//选中的查核人
				checkPresonList: [],
				//查核要点列表
				checkPointList: [],
				// 服务器时间
				dateStr: '',
				timer: null,
				// 点击确定按钮是否直接保存
				isSubmit: false,
				//选中的查核要点
				checkedPointList: [],
			}
		},
		onLoad({
			details
		}) {

			const _details = details ? JSON.parse(details) : {};
			console.log({_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) {
				const {
					checkGroupId,
					situationType,
					checkId,
					deptId,
					empId,
					empName,
					categoryId
				} = details;
				this.details = details;
				this.getEmpDeptTree(checkGroupId, situationType,deptId);
				//查核人回显
				if(empId&&empName){
					const empIdArr = empId.split(',');
					const empNameArr = empName.split(',');
					this.checkPresonList = empIdArr.map((item,index)=>({
						  employeeId:Number(item),
						  employeeName:empNameArr[index]
					}));
				}
				//查核要点回显
				if(categoryId){
					this.checkedPointList = categoryId.map((item)=>({
						  categoryId:Number(item),
					}));
				}
				
			},
			// 查询部门人员树
			getEmpDeptTree(checkGroupId, situationType,deptId) {
				this.$store.dispatch({
					type: 'allocationPerson/commActions',
					key: "getGroupEmpList",
					data: {
						checkGroupId,
						situationType,
						deptId
					}
				}).then(data => {
					if (data) {
						this.empList = data.sysCheckGroupEmployees || [];
						if (situationType == 3) this.checkPointList = data.pointCategoryBOs || [] ;
					}
				});
			},
			//查核要点选择回调
			checkChanged(data) {
				// console.log({data});
				const {
					checkedList
				} = data;
				this.checkedPointList = checkedList;

			},
			//查核人选择回调
			onCheckPerosonChanged(data) {
				const {
					checkedList
				} = data;
				this.checkPresonList = checkedList;
			},
			// 指派查核人员改变
			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 {startDate,endDate} = this.details;
                const empId = (this.checkPresonList.map(item => item.employeeId)).join(',');
                const empName = (this.checkPresonList.map(item => item.employeeName)).join(',');
				
				if (!empId) {
					return this.showModal('请选择查核人');
				}
				if (!startDate) {
					return this.showModal('请选择开始时间');
				}
				if (!endDate) {
					return this.showModal('请选择结束时间');
				}
				const {checkId,checkedList,checkNo,situationType} = this.details;
				const categoryIds = this.checkedPointList.map(item=>item.categoryId);
				const data = {
					"checkId": checkId, //  计划id
					"deptId": JSON.parse(JSON.stringify(checkedList)), // 多个单位id列表
					"empId": empId, // 查核者id
					"empName": empName, // 查核者名字
					"startDate": startDate, // 开始时间
					"endDate":endDate, // 结束时间
					"checkNo":checkNo,
					"situationType":Number(situationType),
					"categoryIds":categoryIds
					
				}
				// 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>