Web_TracerMethodology/pages/allocationPerson/allocationPerson.vue

<template>
	<view class="allocationPerson-page">
		<scroll-view class="scroll-y" scroll-y="true">
			
			<template v-if="title === '指派查核人员'">
				<!-- <tm-radio-group :list="empList" :defaultValue='details.empId' :setting="{
			   	  value: 'employeeId',
			   	  name: 'employeeName'
			    }" :openkeys="[0]" @change="changeDetails" /> -->
				<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: 'employeeId',
				  name: 'employeeName'
				}" :openkeys="[0]" @change="checkChanged" />
			</template>
			<template v-else>
				<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>
			</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: [],
				//查核要点列表
				checkPointList:[],
				//选中的查核要点
				checkedPointList:[],
				//选中的查核人
				checkPresonList:[],
				// 组件信息
				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);
		},
		watch: {
			title(newVal, oldVal) {
				if (newVal === '设置查核时间') {
					this.getDateStr();
					!this.timer && (this.timer = setInterval(() => {
						this.getDateStr();
					}, 10000));
				} else {
					this.clearTimer();
				}
			}
		},
		destroyed() {
			this.clearTimer();
		},
		methods: {
			//查核人选择回调
			onCheckPerosonChanged(data){
				const {checkedList} = data;
				this.checkPresonList = checkedList;
				const empId = (this.checkPresonList.map(item=>item.employeeId)).join(',');
				const empName = (this.checkPresonList.map(item=>item.employeeName)).join(',');
				this.details = {
					...this.details,
					empId:empId,
					empName:empName
				}
			},
			getComponentInfo(details) {
				console.log({details});
				const {checkGroupId,situationType,title,checkId} = details;
				this.setNavigationBarTitle(title);
				this.details = details;
				this.getEmpDeptTree(checkGroupId,situationType);
				if(situationType == 3){
					this.getCheckPointList(checkId,situationType);
				}
			},
			// 查询部门人员树
			getEmpDeptTree(checkGroupId, situationType) {
				this.$store.dispatch({
					type: 'allocationPerson/commActions',
					key: "getGroupEmpList",
					data: {
						checkGroupId,
						situationType
					}
				}).then(data => {
					if (data) {
						this.empList = data.sysCheckGroupEmployees || [];
					}
				});
			},
			//获取查核要点列表
			getCheckPointList(checkId,situationType){
				this.$store.dispatch({
					type: 'batchDistribution/commActions',
					key: "getCheckPointList",
					data: {
						checkId,
						situationType
					}
				}).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 {
						this.changeCheckList(this.checkList);
					}
				}
			},
			// 更改查核列表数据
			changeCheckList(data) {
				const {
					situationId,
					checkId,
					checkGroupId
				} = this.details;
				let checkList = this.checkList.map((item, i) => {
					if (this.details.index === i) {
						return {
							...item,
							...this.details
						}
					} else {
						return item;
					}
				});
				this.$store.commit({
					type: 'editCheckList/comChangeState',
					key: 'checkList',
					data: checkList
				});
				// 关闭当前页面，返回上一页面
				uni.navigateBack({
					delta: 1
				});
			},
			// 修改导航名称
			setNavigationBarTitle(title) {
				this.title = title;
				uni.setNavigationBarTitle({
					title
				});
			},
			// 获取当前时间
			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;

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

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

					.date-box {
						padding-left: 25rpx;
						flex: 1;
					}
				}
			}
		}
	}
</style>