Web_TracerMethodology/pages/checkMainPoints/checkMainPoints.vue

<template>
	<view class="checkMainPoints">
		<tm-top-menu>
			<view class="top-search">
				<view class="search">
					<input confirm-type="search" @input="filterFromName" placeholder="搜索查核要点或查核项" />
					<image src="../../static/search.png"></image>
				</view>
				<view class="top-btn-wrap">
					<view class="btn-list" v-if="nowPermission == 3">
						<com-button v-for="(item, index) in btnArr" :btnText="item.label"
							:type="active === item.id ? 'pramary':'default'" v-on:btnClick="btnClick(item.id)" />
					</view>
					<view class="select-wrap" v-else-if="nowPermission == 2 || nowPermission == 1"
						@click="toggleModal(!showModal)">
						<text>{{getCheckPointName}}</text>
						<image :src="`../../static/${showModal?'open':'close'}-icon.png`"></image>
					</view>
				</view>
			</view>
		</tm-top-menu>
		<tm-modal v-show="showModal" v-on:click="toggleModal(false)">
			<view class="content-list">
				<view class="list-item" v-for="(item, index) in point"
					:class="{active: checkPointId === item.checkPointId}" @click="checkPointHandle(item.checkPointId)">
					<text>{{item.checkPointName}}</text>
					<image class="check-img" v-if="checkPointId === item.checkPointId"
						src="../../static/checkStatus.png"></image>
				</view>
			</view>
		</tm-modal>
		<scroll-view @scroll="scrollHandle"  scroll-y="true" :class="(detailList.length>0&&active != 2&&finishedStatus != 1)?'scroll-Y':'scroll-Y noBtn'" >
		<view class="list" v-for="(item, index) in detailList" :key="index">
			<view class="title" v-if="item.responseList.length > 0">查核要点：{{item.checkPointName}}</view>
			<view class="item" v-for="(child, n) in item.responseList" @click="childClick(child,item.checkPointId)"
				:key="n">
				<view class="top-box">
					<view class="top-box-left">
						<view class="index-icon">{{n + 1}}</view>
						<text>{{child.checkItemName}}</text>
						<!-- <text>ICU病房查看危重病人的抢救全过程(访谈)ICU病房查看危重病人的抢救全过程(访谈)ICU病房查看危重病人的抢救全过程(访谈)的抢救全过程(访谈)</text> -->
					</view>
					<image src="../../static/tuli.png"
						@tap.stop="goLegendDetails($event ,child.checkItemId, item.checkPointId)"></image>
				</view>
				<view class="children">
					<view class="child">
						<text>{{child.deptName || '--'}}</text>
						<text>查核单位</text>
					</view>
					<view class="child">
						<text>{{child.checkModelName || '--'}}</text>
						<text>查核方式</text>
					</view>
					<view class="child">
						<text>{{child.lastResult || '--'}}</text>
						<text>上次结果</text>
					</view>
					<view class="child">
						<text>{{child.checkResult || '--'}}</text>
						<text>本次结果</text>
					</view>
				</view>
			</view>
		</view>
		</scroll-view>
		<tm-callback-listpage />
		<view class="bottomBtnGroup">
			<view class="score">
				<view class="box">
					<text class="label">得分</text>
					<text class="currentScore">{{currentScore}}</text>
				</view>
				<view class="midLine"></view>
				<view class="box">
					<text class="label">总分</text>
					<text class="totalScore">{{totalScore}}</text>
				</view>
			</view>
			<view v-if="detailList.length>0&&active != 2&&finishedStatus != 1" @click="onkeyCheckHandle" class="botOneKeyCheck">完成</view>
		</view>
		<!-- <view v-if="detailList.length>0&&active != 2&&finishedStatus != 1" @click="onkeyCheckHandle" class="botOneKeyCheck">完成</view> -->
	</view>
</template>

<script>
	import {
		_stopPropagation
	} from "../../utils/compatible.js";
	
	export default {
		
		data() {
			return {
				
				btnArr: [{
						id: 0,
						label: '全部'
					},
					{
						id: 1,
						label: '未查核'
					},
					{
						id: 2,
						label: '已查核'
					},
				],
				showModal: false,
				detailList: [],
				ifFromChildPage:false,
				copyDetailList: [],
				point: [{
					checkPointId: 'all',
					checkPointName: '全部要点'
				}],
				checkPointId: 'all',
				nowPermission: uni.getStorageSync('nowPermission'),
				active: 0,
				checkId: '',
				deptId: '',
				currentScrollHeight:0,
				finishedStatus:0,//所有计划里的查核项是否都以完成
				totalScore:0,
				currentScore:0,
			};
		},
		computed: {
			getCheckPointName() {
				let item = this.point.find((item) => item.checkPointId === this.checkPointId);
				return item ? item.checkPointName : '';
			},
		},
		onLoad: function({
			checkId,
			deptId,
			finishedStatus
		}) {
			this.deptId = deptId;
			this.checkId = checkId;
			this.finishedStatus = finishedStatus;
			this.checkTaskDetailList({
				deptId,
				checkId
			});
			
			
		},
		onShow: function() {	
			
			if(this.ifFromChildPage){
				//页面重新拉取数据
				this.checkTaskDetailList({
					'deptId':this.deptId,
					'checkId':this.checkId
				});
				uni.pageScrollTo({
				    scrollTop: this.currentScrollHeight,
				    duration: 300
				});
			}
		},
		beforeDestroy(){
			this.ifFromChildPage=false;
		},
		methods: {
			//滚动监听事件，记录滚动高度
			scrollHandle(e){
				this.currentScrollHeight = e.detail.scrollTop;
			},
			//一键查核
			onkeyCheckHandle(){
				uni.showModal({
				    title: '注意',
				    content: '确定所有未填写查核结果项默认无缺失结果吗？',
				    success:(res)=>{
				        if (res.confirm) {
				            console.log('用户点击确定');
							this.oneKeyCheckCommit();
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			oneKeyCheckCommit(){
				let ids=[];
				console.log('this.detailList',this.detailList);
				this.detailList.forEach(item=>{
					   // console.log(item.responseList);
					   //筛选掉已查核项
					   const temp = item.responseList.filter(v=>!v.checkResult);
					   const arr = temp.map(v=>v.id);
					   ids = ids.concat(arr);
				});
				this.$store.dispatch({
					type: 'checkMainPoints/commActions',
					key: 'oneKeyCheck',						
					data: ids
				}).then(data=>{
					   if(data){
				           uni.showModal({
				               title: '查核完成！',
				               content: '',
							   showCancel:false,
				               success: function (res) {
				                   if (res.confirm) {
				                       console.log('用户点击确定');
									   uni.navigateBack({
									       delta: 1
									   });
				                   }
				               }
				           });
					   }
				});
			},
			btnClick(id) {
				// console.log({id});
				this.active = id;
				this.filterCompleteFlag(id);
			},
			checkTaskDetailList({
				checkId,
				deptId
			}) {
				this.dispatch('checkTaskDetailList', {
					checkId,
					deptId
				}).then((data) => {
					if (data) {
						// console.log({data});
						this.$store.commit('checkMainPoints/comChangeState',{key:'detailList',data:data.checkDetailMapResponses});
						if(!data.isBindResponsible){
							uni.showModal({
							    title: '提示',
							    content: '目前未批量分配当事人，是否前往选择？',
							    success:(res)=>{
							        if (res.confirm) {
							            uni.navigateTo({
							              url: `/pages/responsibleList/responsibleList?deptId=${this.deptId}&isFromCheckMainPoints=true`,
							            });
							        } else if (res.cancel) {
							            console.log('用户点击取消');
							        }
							    }
							});
						}
						
						this.detailList = data.checkDetailMapResponses;
						this.copyDetailList = data.checkDetailMapResponses;
						this.currentScore = data.getScore;
						this.totalScore = data.totalScore;
						data.checkDetailMapResponses.map(({
							checkPointId,
							checkPointName
						}) => {
							this.point.push({
								checkPointId,
								checkPointName
							});
						});
					}
				});
			},
			childClick(child, checkPointId) {
				// 查核者，管理员
				if (this.nowPermission == 1 || this.nowPermission == 3) {
					let str = '',
						that = this;
					if (child.checkResult) {
						// 跳转到查核项详情
						str = 'auditItemDetails/auditItemDetails';
					} else {
						if (this.nowPermission == 1) {
							uni.showModal({
								title: '提示',
								content: '请切换至查核者角色再进行查核操作！',
								showCancel: false
							});
							return;
						} else {
							// 跳转到查核结果提交
							str = 'mainPointsDetail/mainPointsDetail';
						}
					}
					uni.navigateTo({
						url: `/pages/${str}?id=${child.id}&checkPointId=${checkPointId}&checkItemId=${child.checkItemId}`,
						success: function(res) {
							const currentGroup = that.detailList.filter(item => item.checkPointId ==
								checkPointId);
							// 通过eventChannel向被打开页面传送数据
							res.eventChannel.emit('acceptDataFromOpenerPage', {
								data: currentGroup
							});
						}
					});
				}
			},
			toggleModal(flage) {
				this.showModal = flage;
			},
			checkPointHandle(id) {
				this.checkPointId = id;
				if (id === 'all') {
					this.detailList = [...this.copyDetailList];
				} else {
					this.detailList = this.copyDetailList
						.filter((item) => item.checkPointId === id);
				}
			},
			filterCompleteFlag(btnId) {
				if (btnId === 0) {
					this.detailList = [...this.copyDetailList];
				} else {
					let completeFlag = btnId === 1 ? false : true;
					this.detailList = this.copyDetailList.map((item) => {
						return {
							...item,
							responseList: item.responseList
								.filter((child) => child.completeFlag === completeFlag)
						}
					});
				}
			},
			filterFromName(e) {
				const {
					value
				} = e.detail;
				if (value === '') {
					this.detailList = [...this.copyDetailList];
				} else {
					this.detailList = [];
					this.copyDetailList.map((item) => {
						let responseList = item.responseList
							.filter((child) => child.checkItemName.indexOf(value) >= 0);
						if (item.checkPointName.indexOf(value) >= 0) {
							this.detailList.push({
								...item
							});
						} else if (responseList.length > 0) {
							this.detailList.push({
								...item,
								responseList
							});
						}
					});
				}
			},
			goLegendDetails(e, checkItemId, checkPointId) {
				_stopPropagation(e);
				//跳转到图例详情
				uni.navigateTo({
					url: `/pages/legendDetails/legendDetails?checkItemId=${checkItemId}&checkPointId=${checkPointId}`
				});
			},
			dispatch(key, data) {
				return this.$store.dispatch({
					type: 'checkList/commActions',
					key,
					data
				});
			},
		}
	}
</script>

<style lang="less">
	.checkMainPoints {
		position: relative;
		padding-top: 105rpx;
		height: 100%;
		font-size: 22.5rpx;
		line-height: 33.75rpx;
		background-color: #F5F6FA;
		.botOneKeyCheck {
			text-align: center;
			height: 75rpx;
			width: 100%;
			line-height: 75rpx;
			font-size: 22.5rpx;
			font-family: SourceHanSansCN-Normal, SourceHanSansCN;
			font-weight: 400;
			color: #FFFFFF;
			background: #3377FF;
		}
		.bottomBtnGroup {
			position: fixed;
			width: 100%;
			left:0;
			bottom: 0;
			display: flex;
			flex-direction: row;
			border-top:1px solid #DADEE6;
			background-color: #fff;
			.score {
				display: flex;
				width: 50%;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				height: 75rpx;
				.box {
					width: 50%;
					text-align: center;
					white-space: nowrap;
					vertical-align:bottom;
					.label {
						color: #666E80;
						font-size: 17.5rpx;
						margin-right: 10rpx;
					}
					.currentScore {
						font-size:30rpx;
						font-weight: bold;
						color: #3377FF;
					}
					.totalScore {
						font-size:30rpx;
						font-weight: bold;
						color: #292C33;
					}
				}
				.midLine {
					height:17.5rpx;
					border-left: 1px solid #DADEE6;
				}
			}
			.botOneKeyCheck {
				text-align: center;
				height: 75rpx;
				flex-grow: 1;
				line-height: 75rpx;
				font-size: 22.5rpx;
				font-family: SourceHanSansCN-Normal, SourceHanSansCN;
				font-weight: 400;
				color: #FFFFFF;
				background: #3377FF;
			}
		}
        
		.top-search {
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 25rpx;
			background-color: #fff;
			box-shadow: 0 3.75rpx 12.5rpx 0 rgba(0, 13, 51, 0.1);

			.search {
				position: relative;
				width: 100%;
				height: 55rpx;
				line-height: 55rpx;
				background-color: #F0F2F7;

				input {
					padding: 0 45rpx 0 15rpx;
					height: 55rpx;
					line-height: 55rpx;
					font-size: 22.5rpx;
				}

				image {
					position: absolute;
					top: 16.87rpx;
					right: 15rpx;
					width: 21.25rpx;
					height: 21.25rpx;
				}
			}

			.top-btn-wrap {
				padding-left: 25rpx;

				.btn-list {
					display: flex;
					flex-direction: row;

					.com-button {
						margin-left: 5rpx;

						&:first-child {
							margin-left: 0;
						}
					}
				}

				.select-wrap {
					display: flex;
					flex-direction: row;
					align-items: center;
					white-space: nowrap;

					image {
						margin-left: 9.37rpx;
						width: 12.5rpx;
						height: 12.5rpx;
					}
				}
			}
		}

		.content-list {
			padding-top: 105rpx;
			width: 100%;
			background-color: #fff;

			.list-item {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #DADEE6;
				padding: 0 25rpx;
				width: 100%;
				height: 87.5rpx;
				font-size: 22.5rpx;
				line-height: 33.75rpx;
				color: #292C33;

				.check-img {
					float: right;
					width: 19.37rpx;
					height: 14.37rpx;
				}

				&.active {
					color: #3377FF;
				}
			}
		}
        .scroll-Y {
			height: calc(100% - 75rpx);
			&.noBtn {
				height: 100%;
			}
		}
		.list {
			.title {
				padding-left: 25rpx;
				width: 100%;
				height: 62.5rpx;
				line-height: 62.5rpx;
				color: #666F80;
			}

			.item {
				margin-top: 15rpx;
				padding: 25rpx 0;
				min-height: 167.5rpx;
				background-color: #fff;

				&:nth-child(2) {
					margin-top: 0;
				}

				.top-box {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;

					.top-box-left {
						display: flex;
						flex-direction: row;
						width: calc(100% - 55rpx);

						.index-icon {
							margin-right: 15rpx;
							border-radius: 0 62.5rpx 62.5rpx 0;
							width: 50rpx;
							height: 35rpx;
							line-height: 35rpx;
							text-align: center;
							color: #fff;
							background-color: #66B2FE;
						}

						>text {
							display: -webkit-box;
							overflow: hidden;
							width: calc(100% - 65rpx);
							text-overflow: ellipsis;
							-webkit-line-clamp: 2;
							/*! autoprefixer: off */
							-webkit-box-orient: vertical;
						}
					}

					image {
						margin-right: 15rpx;
						width: 40rpx;
						height: 40rpx;
					}
				}

				.children {
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-top: 18.75rpx;

					.child {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						flex: 1;
						border-right: 1px solid #DADEE6;

						text {
							font-weight: 500;

							&:last-child {
								font-size: 17.5rpx;
								line-height: 26.25rpx;
								color: #7A8599;
								font-weight: 400;
							}
						}

						&:last-child {
							border-right: 0;
						}
					}
				}
			}
		}
	}
</style>