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">查核要点一：{{item.checkPointName}}</view>
			<view class="item" 
				v-for="(child, n) in item.responseList" 
				@click="childClick(child)"
				:key="n">
				<view class="top-box">
					<view class="top-box-left">
						<view class="index-icon">{{n + 1}}</view>
						<text>{{child.checkItemName}}</text>
					</view>
					<image src="../../static/tuli.png" 
						@click="goLegendDetails($event ,child.checkItemId)"></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>
	</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: [],
				copyDetailList: [],
				point: [{checkPointId: 'all', checkPointName: '全部要点'}],
				checkPointId: 'all',
				nowPermission: uni.getStorageSync('nowPermission'),
				active: 0
			};
		},
		computed: {
			getCheckPointName() {
				let item=this.point.find((item)=> item.checkPointId === this.checkPointId);
				return item ? item.checkPointName : '';
			},
		},
		onLoad: function ({checkId,deptId}) {
			this.dispatch('checkTaskDetailList', {checkId,deptId}).then((data)=>{
				if(data) {
					this.detailList = data;
					this.copyDetailList = data;
					data.map(({checkPointId,checkPointName})=>{
						this.point.push({checkPointId, checkPointName});
					});
				}
			});
		},
		methods: {
			btnClick(id) {
				this.active = id;
				this.filterCompleteFlag(id);
			},
			childClick(child) {
				// 查核者，管理员
				if(this.nowPermission == 1 || this.nowPermission == 3) { 
					let str = '';
					if(child.checkResult) {
						// 跳转到查核项详情
						str = 'auditItemDetails/auditItemDetails';
					} else {
						// 跳转到查核结果提交
						str = 'mainPointsDetail/mainPointsDetail';
					}
					uni.navigateTo({
						url: `/pages/${str}?id=${child.id}`
					});
				}
			},
			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) {
				_stopPropagation(e);
				//跳转到图例详情
				uni.navigateTo({
					url: `/pages/legendDetails/legendDetails?checkItemId=${checkItemId}`
				});
			},
			dispatch(key, data) {
				return this.$store.dispatch({type: 'checkList/commActions', key, data});
			},
		}
	}
</script>

<style lang="less">
	.checkMainPoints {
		padding-top: 105rpx;
		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;
				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;
						.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;
						}
					}
					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>