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>
		<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>
		<tm-callback-listpage />
	</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: ''
			};
		},
		computed: {
			getCheckPointName() {
				let item = this.point.find((item) => item.checkPointId === this.checkPointId);
				return item ? item.checkPointName : '';
			},
		},
		onLoad: function({
			checkId,
			deptId
		}) {
			this.deptId = deptId;
			this.checkId = checkId;
			this.checkTaskDetailList({
				deptId,
				checkId
			});
		},
		onShow: function() {	
			if(this.ifFromChildPage){
				//页面重新拉取数据
				this.checkTaskDetailList({
					'deptId':this.deptId,
					'checkId':this.checkId
				});
			}
		},
		beforeDestroy(){
			this.ifFromChildPage=false;
		},
		methods: {
			btnClick(id) {
				this.active = id;
				this.filterCompleteFlag(id);
			},
			checkTaskDetailList({
				checkId,
				deptId
			}) {
				this.dispatch('checkTaskDetailList', {
					checkId,
					deptId
				}).then((data) => {
					if (data) {
						// console.log({data});
						this.detailList = data;
						this.copyDetailList = data;
						data.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;

		.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;
				}
			}
		}

		.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>