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)"
					: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() {
				// 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,
						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>