Web_TracerMethodology/pages/editCheckList/editCheckList.vue

<template>
	<view class="check-map-list">
		<scroll-view :class="[ifAllPlanListHasDistribution==true?'scroll-y noBottom':'scroll-y']" scroll-y="true" v-if="checkList.length > 0">
			<view class="item" v-for="(item, index) in checkList" :key="index">
				<view v-if="multiple != 'true'&&ifStartCheck(item.startDate)&&!item.isDistribution"
					:class="{'checkPoint':true,checked:checkedList.includes(item.deptId)}"
					@click="checkedHandle(item.deptId)">
					<image class="innerImg" v-if="checkedList.includes(item.deptId)"
						src="../../static/check-checkbox.png" mode=""></image>
				</view>
				<view class="status" :style="{'background':item.color}" >{{item.completeDes}}</view>
				<view class="title-wrap">
					<text>{{item.deptName}}</text>
					<view>
						<image src="../../static/icon-map.png"></image>
						<text>{{item.deptClassName}}</text>
					</view>
				</view>
				<view class="content">
					<text>{{item.decs}}</text>
					<text>
						要点概览：{{item.checkPointNames}}
					</text>
				</view>
				<view class="footer">
					<view class="row" @click="checkEdit(item, index, '指派查核人员')">
						<text class="label">查核人</text>
						<view class="content">
							<text :class="['base-text', item.empName ? 'black-color' : '']">
								{{ item.empName?item.empName : '选择查核成员'}}
							</text>
						</view>
						<image class="arrow" src="/static/images/icon-more.png"></image>
					</view>
					<view class="row" @click="checkEdit(item, index, '设置查核时间')">
						<text class="label">计划时间</text>
						<view class="content">
							<text :class="['base-text', item.startDate ? 'black-color' : '']">
								{{ item.startDate ? item.startDate : '选择起始时间' }}
							</text>
							<text class="center-text">至</text>
							<text :class="['base-text', item.endDate ? 'black-color' : '']">
								{{ item.endDate ? item.endDate : '选择结束时间' }}
							</text>
						</view>
						<image class="arrow" src="/static/images/icon-more.png"></image>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="null" v-else>暂无数据</view>
		<view class="fixed-buttom-btn" @click="submit" v-if="multiple == 'true'">
			<text class="btn-text">完成</text>
		</view>
		<view class="bottomBtnGroup" v-if="multiple != 'true'&&ifAllPlanListHasDistribution==false">
			<view class="leftBtn" @click="bottomBtnClickHandle('left')">{{ifCheckAll?'取消':'全选'}}</view>
			<view class="rightBtn" @click="bottomBtnClickHandle('right')">{{`（已选${checkedList.length}项）批量分配`}}</view>
		</view>
	</view>
</template>

<script>
	// 查核列表(查核人和计划时间可编辑)
	import {
		mapState
	} from "vuex";
	import moment from 'moment';
	export default {
		computed: {
			...mapState({
				checkList: state => state.editCheckList.checkList
			}),
			//计算当所有查核计划都已分配完时掩藏底部批量按钮
			ifAllPlanListHasDistribution: function() {
				const tempData = this.checkList.filter(item => (!item.empId && !item.empName));
				return tempData.length == 0
			}
		},
		data() {
			return {
				// 查核组id
				checkGroupId: 0,
				// 情境id (批量修改有,不然为0)
				situationId: 0,
				// 查核id
				checkId: 0,
				// 计划开始时间
				startDate: '',
				// 计划结束时间
				endDate: '',
				multiple: false,
				planList: [],
				hasStartedCheck: [], //查核已经开始的集合
				ifInit: null,
				ifshowBottom: false,
				checkedList: [], //批量选中的集合
				ifCheckAll:false,//是否全选
			};
		},
		onLoad({
			situationId,
			checkId,
			checkGroupId,
			startDate,
			endDate,
			multiple,
			situationType,
			checkNo
		}) {
			this.init(situationId,
				checkId,
				checkGroupId,
				startDate,
				endDate,
				multiple,
				situationType,
				checkNo
		    );
		},
		onShow() {
			let pages = getCurrentPages(); // 获取当前页面栈
			let curPage = pages[pages.length - 1]; // 当前页面
			if (curPage.ifInit) {
				curPage.ifInit = false;
				this.init(
					this.situationId,
					this.checkId,
					this.checkGroupId,
					this.startDate,
					this.endDate,
					this.multiple,
					this.situationType,
					this.checkNo
				) // A页面 method中的方法，用来刷新页面A
			}

		},
		mounted() {},
		onUnload() {
			//页面卸载或返回
			this.$store.commit('planList/comChangeState',{key:'ifReloadData',data:true})
		},
		methods: {
			init(situationId,
				checkId,
				checkGroupId,
				startDate,
				endDate,
				multiple,
				situationType,
				checkNo) {
						this.getCheckList(checkId, situationType);
						this.checkGroupId = checkGroupId ? +checkGroupId : 0;
						this.situationId = situationId ? +situationId : 0;
						this.checkId = checkId ? +checkId : 0;
						this.startDate = startDate;
						this.endDate = endDate;
						this.multiple = multiple;
						this.checkedList = [];
						this.situationType = situationType;
						this.checkNo = checkNo;
			},
			ifStartCheck(timeStr) {
				if (timeStr) {
					const currentTime = new Date().getTime();
					const startTime = Date.parse(timeStr.replace(/-/g, '/'));

					if (currentTime < startTime) {
						this.ifshowBottom = true;
					}
					return currentTime < startTime;
				}
				this.ifshowBottom = true;
				return true;

			},
			bottomBtnClickHandle(key) {
				
				

				let details = {
					index: '', // 修改的下标
					title: '', // 标题
					empId: '',
					empName: '',
					startDate: '',
					endDate: '',
					situationType: this.situationType,
					checkNo:this.checkNo,
					checkedList: this.checkedList,
					situationId: this.situationId, //  情境id (批量修改有,不然为0)
					checkId: this.checkId, // 查核id
					checkGroupId: this.checkGroupId, //查核组id
					planStartDate: this.startDate, // 计划开始时间
					planEndDate: this.endDate // 计划结束时间
				}

				if (key == 'left') {
                    this.ifCheckAll = !this.ifCheckAll;
					if(this.ifCheckAll){
						const tempArr = this.checkList.filter(item => this.ifStartCheck(item.startDate));
						this.checkedList = tempArr.map(v => v.deptId);
					}else {
						this.checkedList = [];
					}
					
					
				}
				if (key == 'right') {
					if (this.checkedList.length > 0) {
						uni.navigateTo({
							url: `/pages/batchDistribution/batchDistribution?details=${encodeURIComponent(JSON.stringify(details))}`
						});
					} else {
						uni.showModal({
							title: '提示',
							content: '请先选择分配项！',
							showCancel: false
						});
					}
				}
			},
			checkedHandle(deptId) {
				// console.log({checkId});
				let temp = JSON.parse(JSON.stringify(this.checkedList)); //去除_observer_
				if (temp.includes(deptId)) {
					temp.splice(temp.findIndex(v => v === deptId), 1);
					this.checkedList = temp;
				} else {
					this.checkedList = this.checkedList.concat([deptId]);
				}
			},
			// 完成
			submit(){
				const hadDistributionList = this.checkList.filter((item,index)=>{
					 return item.isDistribution||item.empId;
				});
				const commitData = hadDistributionList.map(item=>({
					     "checkId": item.checkId, 
					     "deptId": item.deptId,
					     "empId":item.empId,
					     "empName":item.empName,
					     "startDate":item.startDate,
					     "endDate": item.endDate,
					     "categoryIds":item.categoryIds
					   
				}));
				// console.log({commitData});
				this.batchDistribute(commitData);
				
			},
			// submit1() {
			// 	// baseEmpList: 第一次计划修改的数据; changePlanList: 批量分配,记录第一次计划修改数据的信息;  multipleEmpList: 批量修改的数据
			// 	let baseEmpList = [],
			// 		changePlanList = [],
			// 		multipleEmpList = [];
			// 	// planStartTimestamp: 开始计划时间戳;
			// 	let planStartTimestamp = this.dateToTimestamp(this.startDate);
				
			// 	this.checkList.map((item, i) => {
			// 		const {
			// 			checkId,
			// 			deptId,
			// 			empId,
			// 			empName,
			// 			categoryIds,
			// 			startDate,
			// 			endDate
			// 		} = item;
					
			// 		if (empId && startDate && endDate) {
			// 			baseEmpList.push({
			// 				checkId,
			// 				deptId,
			// 				empId,
			// 				empName,
			// 				categoryIds,
			// 				startDate: startDate || '',
			// 				endDate: endDate || ''
			// 			});
			// 			if (this.multiple === 'true') { // 批量分配
			// 				changePlanList.push({
			// 					index: i, // 第一次计划修改的下标
			// 					empId,
			// 					empName,
			// 					categoryIds,
			// 					baseEmpListIndex: baseEmpList.length - 1,
			// 					startDiffTimestamp: (startDate && planStartTimestamp != -1) ? this
			// 						.dateToTimestamp(startDate) - planStartTimestamp : -1, // 开始时间差
			// 					endDifTimestamp: (endDate && planStartTimestamp != -1) ? this
			// 						.dateToTimestamp(endDate) - planStartTimestamp : -1 // 结束时间差
			// 				});
			// 			}
			// 		}
			// 	});
			// 	console.log({changePlanList,baseEmpList});
			// 	return;
			// 	if (this.multiple === 'true') { // 批量分配
			// 		this.$store.dispatch({
			// 			type: 'planList/commActions',
			// 			payload: {
			// 				key: 'planList',
			// 				data: {
			// 					situationId: this.situationId
			// 				}
			// 			}
			// 		}).then((planList) => {
			// 			(planList || []).map(((planItem, planI) => {
			// 				if (planI != 0) { // 过滤掉第一条
			// 					// 计划开始时间戳
			// 					let planStartTimestamp = planItem.startDate ? this.dateToTimestamp(
			// 						planItem.startDate + ' 00:00') : -1;
			// 					// 计划结束时间戳
			// 					let planEndTimestamp = planItem.endDate ? this.dateToTimestamp(planItem
			// 						.endDate + ' 23:59') : -1;

			// 					planItem.empList && planItem.empList.map((empItem, empI) => {
			// 						// 当前分配明细
			// 						let currentEmp = changePlanList.find(item => item.index ===
			// 							empI);
			// 						if (currentEmp) {
			// 							const {
			// 								baseEmpListIndex,
			// 								startDiffTimestamp,
			// 								endDifTimestamp
			// 							} = currentEmp;
			// 							const {
			// 								categoryIds,
			// 								empId,
			// 								empName,
			// 							} = baseEmpList[baseEmpListIndex] || {};
										
			// 							multipleEmpList.push({
			// 								categoryIds,
			// 								empId,
			// 								empName,
			// 								checkId: empItem.checkId,
			// 								deptId: empItem.deptId,
			// 								startDate: (planStartTimestamp > -1 &&
			// 										startDiffTimestamp > -1) ?
			// 									this.getDateStr(planStartTimestamp,
			// 										planEndTimestamp,
			// 										startDiffTimestamp, planItem
			// 										.endDate) : '',
			// 								endDate: (planStartTimestamp > -1 &&
			// 										endDifTimestamp > -1) ?
			// 									this.getDateStr(planStartTimestamp,
			// 										planEndTimestamp, endDifTimestamp,
			// 										planItem.endDate) : ''
			// 							});
			// 						}
			// 					})
			// 				}
			// 			}))
			// 			multipleEmpList = [...baseEmpList, ...multipleEmpList];
			// 			// console.log('批量',multipleEmpList,baseEmpList);
			// 			// return;
			// 			this.batchDistribute(multipleEmpList);
			// 		})
			// 	} else { // 单个分配
			// 		this.batchDistribute(baseEmpList);
			// 	}
			// },
			/**
			 * 获取时间字符串
			 * @param {Number} startTimestamp 计划开始时间戳
			 * @param {Number} endTimestamp 计划结束时间戳
			 * @param {Number} diffTimestamp 第一次计划中的时间差
			 * @param {String} endDateStr 计划结束时间字符串
			 */

			getDateStr(startTimestamp, endTimestamp, diffTimestamp, endDateStr) {
				if ((startTimestamp + diffTimestamp) > endTimestamp) { // 超出计划结束时间, 则取计划结束时间
					return endDateStr;
				} else {
					return moment(startTimestamp + diffTimestamp).format('YYYY-MM-DD HH:mm');
				}
			},
			// 分配单位查核人员
			batchDistribute(empList) {
				if (empList.length === 0) { // 未作修改直接跳转页面
					return this.redirectToPlanList();
				}
				this.$store.dispatch({
					type: 'editCheckList/commActions',
					key: "batchDistribute",
					data: {
						empList
					}
				}).then(data => {
					if (data) {
						this.redirectToPlanList();
					}
				});
			},
			// 跳转页面
			redirectToPlanList() {
				uni.redirectTo({
					url: `/pages/planList/planList?situationId=${this.situationId}&checkGroupId=${this.checkGroupId}`
				});
			},
			// 日期时间转换为时间戳
			dateToTimestamp(dataStr) {
				return dataStr ? moment(dataStr).valueOf() : -1
			},
			checkEdit(data, index, title) {
				// console.log({data});
				if (data.completeState) { // 计划已开始, 不能编辑查核人和计划时间
					uni.showModal({
						content: '因查核计划已结束，故不可修改',
						showCancel: false
					});
				} else { // 跳转编辑页面
					const {
						empId,
						empName,
						startDate,
						endDate,
						deptId,
						categoryId,
						isDistribution,
					} = data;
					let details = {
						index, // 修改的下标
						title, // 标题
						empId,
						empName,
						startDate,
						endDate,
						deptId,
						categoryId,
						isDistribution,
						situationType: this.situationType,
						checkNo:this.checkNo,
						situationId: this.situationId, //  情境id (批量修改有,不然为0)
						checkId: this.checkId, // 查核id
						checkGroupId: this.checkGroupId, //查核组id
						planStartDate: this.startDate, // 计划开始时间
						planEndDate: this.endDate // 计划结束时间
					}

			
					if (this.multiple == 'true') {
						uni.navigateTo({
							url: `/pages/allocationPerson/allocationPerson?details=${encodeURIComponent(JSON.stringify(details))}`
						});
					}
					if (this.multiple == 'false') {
						const _detailsTwo = {
							...details,
							checkedList: [deptId]
						}
						uni.navigateTo({
							url: `/pages/batchDistribution/batchDistribution?details=${encodeURIComponent(JSON.stringify(_detailsTwo))}`
						});
					}

				}
			},
			// 获取查核列表
			getCheckList(checkId, situationType) {
				this.$store.dispatch({
					type: 'editCheckList/commActions',
					key: "getCheckList",
					data: {
						checkId,
						situationType
					}
				}).then(data => {
					this.$store.dispatch({
						type: "commActions",
						key: "getDateStr",
					}).then((dateStr) => {
						if (dateStr) {
							this.$store.commit({
								type: 'editCheckList/comChangeState',
								key: 'checkList',
								data: (data || []).map(item => {
									if (item.endDate && moment(item.endDate)
										.valueOf() < moment(dateStr).valueOf()) {
										return {
											...item,
											completeState: true // true:说明计划已结束, 不能编辑查核人和计划时间
										}
									} else {
										return item
									}
								})
							});
						}
					});
				});
			},
			// 获取计划列表
			getPlanList() {
				this.$store.dispatch({
					type: 'planList/commActions',
					payload: {
						key: 'planList',
						data: {
							situationId: this.situationId,
						}
					}
				}).then((data) => {
					this.planList = data || [];
				})
			}
		}
	}
</script>

<style lang="less">
	.check-map-list {
		display: flex;
		flex-direction: column;
		height: 100%;
		.scroll-y {
			flex: 1;
			height: 100%;
			// height: calc(100% - 87.5rpx);
			padding-top: 25rpx;
            padding-bottom:95rpx;
			
			&.noBottom {
				padding-bottom:0;
			}
			.item {
				position: relative;
			}

			.checkPoint {
				position: absolute;
				top: 30rpx;
				right: 25rpx;
				width: 25rpx;
				height: 25rpx;
				z-index: 2;
				border-radius: 50%;
				border: 2.5rpx solid #C3CAD9;

				.innerImg {
					width: 100%;
					height: 100%;
				}

				&.checked {
					border: none;
				}
			}
			
			.status {
				position: absolute;
				top: 0;
				right:0;
				width: 100rpx;
				height: 35rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 35rpx;
				border-radius: 0px 5rpx 0px 28.12rpx;
			}

			.footer {

				.row {
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-top: 1px solid #DADEE6;
					height: 62.5rpx;
					padding: 0 25rpx;
					font-size: 22.5rpx;

					.label {
						color: #525866;
						width: 93.75rpx;
					}

					.content {
						display: flex;
						flex-direction: row;
						align-items: center;
						flex: 1;
						height: 100%;
						padding: 0 25rpx;

						.base-text {
							flex: 1;
							line-height: 62.5rpx;
							color: #B8BECC;
							font-weight: normal;
							margin-bottom: 0;
						}

						.center-text {
							padding: 0 25rpx;
							color: #292C33;
						}

						.black-color {
							color: #292C33;
						}
					}

					.arrow {
						width: 12.5rpx;
						height: 21.25rpx;
					}
				}
			}
		}

		.bottomBtnGroup {
			position: fixed;
			width: 100%;
			height: 87.5rpx;
			bottom: 0;
			left: 0;
			display: flex;
			flex-direction: row;
			background-color: #FFFFFF;

			.leftBtn,
			.rightBtn {
				display: flex;
				width: 50%;
				height: 100%;
				justify-content: center;
				align-items: center;
				font-size: 22.5rpx;
				font-family: SourceHanSansCN-Normal, SourceHanSansCN;
				font-weight: 400;
				color: #3377FF;

			}

			.rightBtn {
				color: #FFFFFF;
				background-color: #3377FF;
			}
		}

		.null {
			margin-top: 375rpx;
			text-align: center;
			color: #999;
		}
	}
</style>