Web_TracerMethodology/pages/editCheckList/editCheckList.vue

<template>
	<view class="check-map-list">
		<scroll-view class="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)"  :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="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'">
			<view class="leftBtn" @click="bottomBtnClickHandle('left')">{{`（全部${checkList.length}项）全选分配`}}</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
			})
		},
		data() {
			return {
				// 查核组id
				checkGroupId: 0,
				// 情境id (批量修改有,不然为0)
				situationId: 0,
				// 查核id
				checkId: 0,
				// 计划开始时间
				startDate: '',
				// 计划结束时间
				endDate: '',
				multiple:false,
				planList: [],
				hasStartedCheck:[],//查核已经开始的集合
				ifInit:null,
				ifshowBottom:false,
				checkedList:[],//批量选中的集合
			};
		},
		onLoad({
			situationId,
			checkId,
			checkGroupId,
			startDate,
			endDate,
			multiple
		}) {
			this.init(situationId,
			checkId,
			checkGroupId,
			startDate,
			endDate,
			multiple);
		},
		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
					)    // A页面 method中的方法，用来刷新页面A
				}
			
		},
		mounted(){
		},
		methods: {
			init(situationId,
			checkId,
			checkGroupId,
			startDate,
			endDate,
			multiple){
				this.getCheckList(checkId);
				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 = [];
			},
			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){
				// const {
				// 	empId,
				// 	empName,
				// 	startDate,
				// 	endDate
				// } = data;
				let details = {
					index:'', // 修改的下标
					title:'', // 标题
					empId:'',
					empName:'',
					startDate:'',
					endDate:'',
					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'){
					// console.log({key});
					const tempArr = this.checkList.filter(item=>this.ifStartCheck(item.startDate));
					this.checkedList = tempArr.map(v=>v.deptId);
		
					let _details = {...details,checkedList:this.checkedList}
	                setTimeout(()=>{
						 uni.navigateTo({
							 url: `/pages/batchDistribution/batchDistribution?details=${encodeURIComponent(JSON.stringify(_details))}`
						 });
	                },1000)
				}
				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() {
				// baseEmpList: 第一次计划修改的数据; changePlanList: 批量分配,记录第一次计划修改数据的信息;  multipleEmpList: 批量修改的数据
				let baseEmpList = [],
					changePlanList = [],
					multipleEmpList = [];
				// planStartTimestamp: 开始计划时间戳;
				let planStartTimestamp = this.dateToTimestamp(this.startDate);
				this.checkList.map((item, i) => {
					const {
						checkId,
						deptId,
						empId,
						empName,
						startDate,
						endDate
					} = item;
					if (empId && startDate && endDate) {
						baseEmpList.push({
							checkId,
							deptId,
							empId,
							empName,
							startDate: startDate || '',
							endDate: endDate || ''
						});
						if (this.multiple === 'true') { // 批量分配
							changePlanList.push({
								index: i, // 第一次计划修改的下标
								baseEmpListIndex: baseEmpList.length - 1,
								startDiffTimestamp: (startDate && planStartTimestamp != -1) ? this
									.dateToTimestamp(startDate) - planStartTimestamp : -1, // 开始时间差
								endDifTimestamp: (endDate && planStartTimestamp != -1) ? this
									.dateToTimestamp(endDate) - planStartTimestamp : -1 // 结束时间差
							});
						}
					}
				});
				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 {
											empId,
											empName
										} = baseEmpList[baseEmpListIndex] || {};
										multipleEmpList.push({
											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 )
						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
					} = data;
					let details = {
						index, // 修改的下标
						title, // 标题
						empId,
						empName,
						startDate,
						endDate,
						situationId: this.situationId, //  情境id (批量修改有,不然为0)
						checkId: this.checkId, // 查核id
						checkGroupId: this.checkGroupId, //查核组id
						planStartDate: this.startDate, // 计划开始时间
						planEndDate: this.endDate // 计划结束时间
					}
					
					const _detailsTwo = {
						...details,
						checkedList:[deptId]
					}
					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) {
				this.$store.dispatch({
					type: 'editCheckList/commActions',
					key: "getCheckList",
					data: {
						checkId
					}
				}).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.startDate && moment(item.startDate)
									.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 {
		height: 100%;
     
		.scroll-y {
			height: calc(100% - 87.5rpx);
			padding-top: 25rpx;
			.item {
				position:relative;
			}
            .checkPoint {
					position:absolute;
					top:30rpx;
					right: 25rpx;
					width: 25rpx;
					height: 25rpx;
					border-radius: 50%;
					border:2.5rpx solid #C3CAD9;
					.innerImg {
						width: 100%;
						height: 100%;
					}
					&.checked {
						border: none;
					}
			} 
			.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>