Web_TracerMethodology/pages/editCheckList/editCheckList.vue

<template>
	<view class="editCheckList">
		<view class="searchBar" v-if="checkList.length>0">
			<view class="filter">
				<view class="selecter" @click="selecterHandle">
					<text>{{selectedStr}}</text>
					<image src="../../static/fillBlackArrow.png" mode=""></image>
				</view>
				<view class="searchBar">
					<image class="serachIcon" src="../../static/searchIcon.png" mode=""></image>
					<tm-input class="searchVal" :clear="ifclearSearch" @onChange="searchInputHandle"
						placeholder="请输入单位名称"></tm-input>
					<view class="searchBtn" @click="searchHandle">搜索</view>
				</view>
			</view>
		</view>
	
		<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 copiedCheckList" :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>
		
		<uni-popup ref="popup" type="bottom" :maskClick="true">
			<view class="selectableList">
				<scroll-view scroll-y="true" class="listWrap">
					<view :class="getClass(v.id)" v-for="(v,i) in selectables" @click="listClickHandle(v)">{{v.name}}
					</view>
				</scroll-view>
				<view class="btnGroup">
					<view class="cancelBtn btn" @click="btnGroupClickHandle(false)">取消</view>
					<view class="confirmBtn btn" @click="btnGroupClickHandle(true)">确定</view>
				</view>
			</view>
		</uni-popup>
		
	</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;
				}
			},
			selectedStr() {
				const {
					status
				} = this.filter;
				return (status.map(t => t.name)).join(',')
			},
		},
		watch:{
			filter(val, oldVal) {
				if (val.keyword.length == 0) {
					this.searchHandle();
				}
			}
		},
		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, //是否全选
				copiedCheckList:[],
				ifclearSearch: false,
				filter: {
					keyword: '',
					status: [{
						name: '全部',
						id: 0
					}]
				},
				selectables: [{
						id: 0,
						name: '全部'
					},
					{
						id: 1,
						name: '进行中'
					},
					{
						id: 2,
						name: '未分配'
					}
				]
			};
		},

		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;
				}
			},
			getClass(id) {
				const ids = this.filter.status.map(item => item.id);
				if (ids.indexOf(id) != -1) {
					return "list on"
				}
				return "list"
			},
			/**
			 * @param {boolean} flag true确定按钮点击，false取消按钮
			 */
			btnGroupClickHandle(flag) {
				this.$refs.popup.close();
				//清空搜索
				this.filter = {
					...this.filter,
					keyword: ''
				}
			},
			listClickHandle(item) {
					const _filter = this.filter;
					const {
						status
					} = _filter;
					const index = _filter.status.findIndex(t => t.id == item.id);

					if (item.id == 0) {
						//全部
						this.filter = {
							...this.filter,
							status: [{
								name: '全部',
								id: 0
							}]
						};
						return;
					}
					//去除全部选项选中
					status.splice(_filter.status.findIndex(t => t.id == 0), 1);

					if (index != -1) {
						status.splice(index, 1)
					} else {
						status.push({
							name: item.name,
							id: item.id
						})
					}
					this.filter = _filter;
			},
			selecterHandle() {
				this.$refs.popup.open();
			},
			searchInputHandle(val) {
				this.filter = {
					...this.filter,
					keyword: val
				};
			},
			searchHandle() {
					let tempArr = this.checkList;

					if (this.filter.status[0].id == 1) {
						//进行中
						tempArr = this.checkList.filter(item => item.completeDes == '进行中');
					}

					if (this.filter.status[0].id == 2) {
						//未分配
						tempArr = this.checkList.filter(item => item.completeDes == '未分配');
					}

					this.copiedCheckList = tempArr.filter(item => item.deptName.indexOf(this.filter.keyword) != -1);
			},
			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) {
				const that = this;
				this.$store.dispatch({
					type: 'editCheckList/commActions',
					key: "getCheckList",
					data: {
						checkId,
						situationType
					}
				}).then(data => {
					this.$store.dispatch({
						type: "commActions",
						key: "getDateStr",
					}).then((dateStr) => {
						if (dateStr) {
							const _data = data.map(item => {
								if (item.endDate && moment(item.endDate)
									.valueOf() < moment(dateStr).valueOf()) {
									return {
										...item,
										completeState: true // true:说明计划已结束, 不能编辑查核人和计划时间
									}
								} else {
									return item
								}
							});
							//copiedCheckList用于搜索/筛选
							that.copiedCheckList = _data;
							
							this.$store.commit({
								type: 'editCheckList/comChangeState',
								key: 'checkList',
								data: _data
							});
						}
					});
				});
			},
			// 获取计划列表
			getPlanList() {
				this.$store.dispatch({
					type: 'planList/commActions',
					payload: {
						key: 'planList',
						data: {
							situationId: this.situationId,
						}
					}
				}).then((data) => {
					this.planList = data || [];
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.editCheckList {
		padding-top: 30rpx;
	}
	
	.selectableList {
		display: flex;
		width: 100%;
		flex-direction: column;
		height: 50vh;
		padding-top: 50rpx;
		box-sizing: border-box;
		border-radius: 25rpx 25rpx 0px 0px;
		background-color: #FFFFFF;
	
		.listWrap {
			height: calc(50vh - 75rpx);
			overflow-y: scroll;
	
			.list {
				height: 87.5rpx;
				line-height: 87.5rpx;
				text-align: center;
				font-size: 30rpx;
				font-family: SourceHanSansCN-Normal, SourceHanSansCN;
				font-weight: 400;
				color: #8A8F99;
	
				&.on {
					font-weight: 500;
					color: #3377FF;
				}
			}
		}
	
		.btnGroup {
			display: flex;
			width: 100%;
			flex-direction: row;
			justify-content: center;
			align-items: center;
	
			.btn {
				width: 50%;
				height: 75rpx;
				line-height: 75rpx;
				text-align: center;
				font-size: 22.5rpx;
				font-family: SourceHanSansCN-Normal, SourceHanSansCN;
				font-weight: 400;
				color: #3377FF;
			}
	
			.cancelBtn {
				border-top: 0.62rpx solid #DADEE6;
			}
	
			.confirmBtn {
				color: #FFFFFF;
				background: #3377FF;
			}
		}
	}
	
	.searchBar {
		width: 93%;
		margin: 0 auto;

		.filter {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 15rpx;
			padding: 0 25rpx;
			background: #FFFFFF;

			.selecter {
				display: flex;
				width: 25%;
				height: 70rpx;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				padding-right: 25rpx;
				border-right: 0.62rpx solid #DADEE6;

				&>text {
					width: 112.5rpx;
					font-size: 25rpx;
					font-family: SourceHanSansCN-Medium, SourceHanSansCN;
					font-weight: 500;
					color: #292C33;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;

				}

				&>image {
					width: 11.25rpx;
					height: 7.5rpx;
				}
			}

			.searchBar {
				display: flex;
				width: 75%;
				flex-direction: row;
				align-items: center;
				height: 70rpx;
				padding-left: 25rpx;

				.serachIcon {
					width: 25rpx;
					height: 25rpx;
				}

				.searchVal {
					width: 79%;
					padding-left: 25rpx;
					font-size: 25rpx;
					font-family: SourceHanSansCN-Normal, SourceHanSansCN;
					font-weight: 400;
					color: #292C33;
				}

				.searchBtn {
					padding-left: 25rpx;
					font-size: 25rpx;
					font-family: SourceHanSansCN-Normal, SourceHanSansCN;
					font-weight: 400;
					color: #3377FF;
					white-space: nowrap;
					border-left: 1rpx solid #DADEE6;
				}
			}
		}
	}

	.check-map-list {
		display: flex;
		flex-direction: column;
		height: 100%;

		.scroll-y {
			flex: 1;
			height: 100%;
			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>