Web_TracerMethodology/pages/checkList/checkList.vue

<template>
	<view class="check-map-list">
		<tm-top-menu>
			<view class="top-menu"  @click="showModalHandle(!showModal)">
				<text>第{{checkIndex}}/{{planList.length}}次查核</text>
				<image :src="`../../static/${showModal?'open':'close'}-icon.png`"></image>
			</view>
		</tm-top-menu>
		<view class="item"
			v-for="(item, index) in depList" 
			@click="gotoCheckMainPointsPage(item)"
			:key="index">
			<view class="title-wrap">
				<text>{{item.deptName}}</text>
				<view>
					<image src="../../static/icon-map.png"></image>
					<text>{{item.deptClassName}}</text>
				</view>
			</view>
			<view class="content">
				<text>{{item.decs}}</text>
				<text>
					要点概览：{{item.checkPointNames}}
				</text>
			</view>
			<view class="footer">
				<text>查核人：{{item.empName}}</text>
				<text v-if="item.startDate && item.endDate">
					{{item.startDate}}~{{item.endDate}}
				</text>
			</view>
			<view class="icon-wrap" 
				v-if="Number(item.completeStatus) === 2 || Number(item.completeStatus) === 3">
				<image :src="`../../static/${Number(item.completeStatus) === 2 ?'hight-bg':'top-img'}.png`"></image>
				<text>{{item.completeDes}}</text>
			</view>
		</view>
		<view class="null" v-if="depList.length === 0">暂无数据</view>
		<tm-modal v-show="showModal" v-on:click="showModalHandle(false)">
			<view class="content-list">
				<view class="list-item" 
					v-for="(item, index) in planList"
					:class="{active: checkId === item.id}" 
					@click="checkItem($event, item.id)"
					:key="index">
					<view>
						<text>{{item.name}}（{{item.startDate}} ~ {{item.endDate}}）</text>
						<view class="item-icon" 
							:class="{icon2: Number(item.status) === 2}" 
							v-if="Number(item.status) !== 1">
							{{Number(item.status) === 2 ? '进行中' : '已完成'}}
						</view>
					</view>
					<image class="check-img" 
						v-if="checkId === item.id"
						src="../../static/checkStatus.png"></image>
				</view>
			</view>
		</tm-modal>
	</view>
</template>

<script>
	import {_stopPropagation} from "../../utils/compatible.js";
	
	export default {
		data() {
			return {
				showModal: false,
				planList: [],
				checkId: '',
				depList: []
			};
		},
		computed: {
			checkIndex: function() {
				let index = this.planList.findIndex((item)=> item.id === this.checkId);
				if(index !== -1) {
					return index + 1;
				} else {
					return 0;
				}
			}
		},
		onLoad: function ({situationId}) {
			this.dispatch('planList', {situationId}).then((data)=>{
				if(data) {
					this.planList = data;
					let check = data.find((item)=> Number(item.status)=== 2);
					this.checkId = check ? check.id 
						: data.length > 0 ? data[0].id : '';
					this.getDepList();
				}
			});
		},
		methods: {
			checkItem: function(e, id) {
				_stopPropagation(e);
				if(this.checkId === id) return;
				this.checkId = id;
				this.getDepList();
			},
			getDepList: function() {
				this.dispatch('depList', {checkId: this.checkId}).then((data)=>{
					if(data) {
						this.depList = data;
						this.showModalHandle(false);
					}
				});
			},
			showModalHandle: function(showModal) {
				this.showModal = showModal;
			},
			gotoCheckMainPointsPage({checkId, deptId}) {
				//跳转到查核要点
				uni.navigateTo({
					url: `/pages/checkMainPoints/checkMainPoints?checkId=${checkId}&deptId=${deptId}`
				});
			},
			dispatch: function(key, data) {
				return this.$store.dispatch({type: 'checkList/commActions', key, data});
			},
		}
	}
</script>

<style lang="less">
	.check-map-list {
		padding: 25rpx;
		padding-top: 75rpx;
		.top-menu {
			overflow: hidden;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			height: 50rpx;
			image {
				margin-left: 9.37rpx;
				width: 12.5rpx;
				height: 12.5rpx;
			}
		}
		.item {
			position: relative;
		}
		.icon-wrap {
			position: absolute;
			top: 0;
			right: 0;
			width: 100rpx;
			height: 35rpx;
			image {
				width: 100%;
				height: 100%;
			}
			text {
				position: absolute;
				left: 28.75rpx;
				line-height: 35rpx;
				font-size: 17.5rpx;
				color: #fff;
			}
		}
		.footer {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			margin: 0 25rpx 16.87rpx;
			border-top: 1px solid #DADEE6;
			padding-top: 16.25rpx;
			font-size: 17.5rpx;
			line-height: 26.25rpx;
			color: #666E80;
		}
	}
	.null {
		text-align: center;
		color: #999;
	}
	.content-list {
		padding-top: 50rpx;
		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;
			}
			>view {
				display: flex;
				flex-direction: row;
				.item-icon {
					border-radius: 5rpx;
					padding: 6.25rpx 11.25rpx;
					line-height: 26.25rpx;
					color: #29CC96;
					background-color: #e9f9f4;
					&.icon2 {
						color: #FFAA00;
						background-color: #fff9ef;
					}
				}
			}
			&.active {
				color: #3377FF;
			}
		}
	}
</style>