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="item.finishedStatus != 1"
					:class="{'checkPoint':true,checked:(checkedList.findIndex(t=>t.deptId == item.deptId) != -1)}"
					@click="checkedHandle(item)">
					<image class="innerImg" v-if="(checkedList.findIndex(t=>t.deptId == item.deptId) != -1)"
						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 :class="getStatus(item.completeDes)"  >{{item.completeDes}}</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="selectAll" @click="bottomBtnClickHandle('left')">{{ifSlectedAllCheckList?'取消':'全选'}}</view>
			<view class="leftBtn" @click="bottomBtnClickHandle('middle')">{{`（已选${checkedList.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
			}),
			//计算当所有查核计划都已分配完时掩藏底部批量按钮
			ifAllPlanListHasDistribution: function() {
				const tempData = this.checkList.filter(item => (!item.empId && !item.empName));
				return tempData.length == 0
			},
			ifSlectedAllCheckList:function(){
				 if(this.checkedList.length == this.checkList.length){ //选中集合==总集合
				        this.ifCheckAll = true;
					    return true;
				 }else {
					    this.ifCheckAll = false;
					    return false; 
				 }
			}
		},
		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;

			},
			/**
			 * @str string [noStart,checking,completed]
			 */
			getStatus:function(str){  //设置状态颜色
			    switch(str){
					 case '未分配':
					      return 'status noStart'
					 	 break;
					 case '进行中':
					      return 'status checking'
					 	 break;
					 case '已完成':
					      return 'status completed'
					 	 break;	
				}
			},
			batchCancelDistri(){ //批量撤销
			      const _that = this;
				  this.$store.dispatch({
				  	type: 'editCheckList/commActions',
				  	key: "batchCancelCheckDistribution",
				  	data: {
				  		checkId:this.checkId,
				  		deptIds:this.checkedList.map(t=>t.deptId)
				  	}
				  }).then(data=>{
					    if(data){
							  uni.showModal({
							  	title: '提示',
							  	content: '撤销分配成功！',
							  	showCancel: false,
								success(res) {
									if(res.confirm){
										  _that.checkedList = [];
										  _that.getCheckList(_that.checkId,_that.situationType);
									}
								}
							  });
						}
				  })
			},
			bottomBtnClickHandle(key) {
				let details = {
					index: '', // 修改的下标
					title: '', // 标题
					empId: '',
					empName: '',
					startDate: '',
					endDate: '',
					situationType: this.situationType,
					checkNo:this.checkNo,
					checkedList: this.checkedList.map(t=>t.deptId),
					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){
						this.checkedList = this.checkList;
					}else {
						this.checkedList = [];
					}
					
					
				}
				
				if(key == 'middle'){  //批量撤销
					if(this.checkedList.findIndex(item=>item.completeDes == '未分配') != -1){
						//选中项包含未分配
						uni.showModal({
							title: '提示',
							content: '选择的病区里包含未分配项！是否继续操作？',
							success:(res)=>{
								if (res.confirm) {
								     this.batchCancelDistri(); 
								}
							}
						});
					}else {
						this.batchCancelDistri();
					}
				}
				
				if (key == 'right') {  //批量分配
					if (this.checkedList.length > 0) {
						if(this.checkedList.findIndex(item=>item.completeDes == '进行中') != -1){
							//选中项包含已分配
							uni.showModal({
								title: '提示',
								content: '选择的病区里包含已进行中项！是否继续操作？',
								success:(res)=>{
									if (res.confirm) {
									     uni.navigateTo({
									     	url: `/pages/batchDistribution/batchDistribution?details=${encodeURIComponent(JSON.stringify(details))}`
									     });
									}
								}
							});
						}else {
							uni.navigateTo({
								url: `/pages/batchDistribution/batchDistribution?details=${encodeURIComponent(JSON.stringify(details))}`
							});
						}
					} else {
						uni.showModal({
							title: '提示',
							content: '请先选择分配项！',
							showCancel: false
						});
					}
				}
			},
			checkedHandle(item) {
				let temp = this.checkedList;
				let index = temp.findIndex(val=>val.deptId == item.deptId)
				if ( index != -1) {
					temp.splice(index, 1);
					this.checkedList = temp;
				} else {
					this.checkedList = this.checkedList.concat([item]);
				}
			},
			// 完成
			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);
				
			},
			
			/**
			 * 获取时间字符串
			 * @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;
				.title-wrap {
					text {
						white-space: nowrap;
						text-overflow:ellipsis;
						overflow:hidden;
					}
				}
				.status {
					display: flex;
					justify-content: center;
					width: 100rpx;
					height: 35rpx;
					color: #FFFFFF;
					text-align: center;
					line-height: 35rpx;
					border-radius:20rpx;
					&.noStart {
						background-color:#eee;
					}
					&.checking {
						background-color:#FFCC66;
					}
					&.completed {
						background-color:#29CC96;
					}
				}
			}

			.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;
				}
			}
			
			.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: 100rpx;
					}

					.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;
            .selectAll {
				position: relative;
				display: flex;
				width:20%;
				height: 100%;
				justify-content: center;
				align-items: center;
				font-size: 22.5rpx;
				font-family: SourceHanSansCN-Normal, SourceHanSansCN;
				font-weight: 400;
				color: #3377FF;
				&::after {
					position: absolute;
					display: inline-block;
					content: '';
					right: 0;
					width: 1rpx;
					height:40%;
					background-color: #82848A;
				}
			}
			.leftBtn,
			.rightBtn {
				display: flex;
				width:40%;
				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>