Web_TracerMethodology/pages/checkList/checkList.vue

<template>
	<view class="check-map-list-page">
		<scroll-view scroll-y="true" class="check-map-list">
			<tm-top-menu>
				<view class="top-menu"  @click="showModalHandle(!showModal)">
					<text>{{createTitle}}</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="status" :style="{'background-color':item.color}">{{item.completeDes}}</view>
				<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>
			<tm-no-data v-if="depList.length === 0"
				:textArr="['暂时没有内容可以展示哦', '请返回上一页面或尝试刷新页面']" />
			<tm-modal v-show="showModal" v-on:click="showModalHandle(false)">
				<scroll-view scroll-y="true" 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>
				</scroll-view>
			</tm-modal>
		</scroll-view>
		<tm-callback-listpage/>
	</view>
</template>

<script>
	import {_stopPropagation} from "../../utils/compatible.js";
	
	export default {
		data() {
			return {
				showModal: false,
				planList: [],
				checkId: '',
				depList: []
			};
		},
		computed: {
			createTitle: function() {
				let item = this.planList.find((item)=> item.id === this.checkId);
				if(item) {
					let name = item.name;
					return name.slice(0, name.length - 3) + `/${this.planList.length}` + name.slice(-3);
				} else {
					return '';
				}
			}
		},
		onLoad: function ({situationId,situationType}) {
			this.situationType = situationType;
			this.dispatch('planList', {situationId}).then((data)=>{
				if(data&&data.length>0) {
					this.planList = data;
					let checkArr = data.filter((item)=> Number(item.status)=== 2).sort((a,b)=>a.createTime - b.createTime);
					this.checkId = checkArr ? checkArr[checkArr.length - 1].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,situationType:this.situationType}).then((data)=>{
					if(data) {
						this.depList = data.sort((a,b)=> {
							if(a.sort && b.sort) return a.sort - b.sort;
						});
						this.showModalHandle(false);
					}
				});
			},
			showModalHandle: function(showModal) {
				this.showModal = showModal;
			},
			gotoCheckMainPointsPage({checkId, deptId,finishedStatus}) {
				//跳转到查核要点
				uni.navigateTo({
					url: `/pages/checkMainPoints/checkMainPoints?checkId=${checkId}&deptId=${deptId}&finishedStatus=${finishedStatus}&situationType=${this.situationType}`
				});
			},
			dispatch: function(key, data) {
				return this.$store.dispatch({type: 'checkList/commActions', key, data});
			},
		}
	}
</script>

<style lang="less">
	.check-map-list-page {
		position: relative;
		height: 100%;
	}
	.check-map-list {
		padding: 25rpx;
		padding-top: 75rpx;
		height: 100%;
		.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;
			.status {
				position: absolute;
				width: 100rpx;
				height: 35rpx;
				top:0;
				right: 0;
				text-align: center;
				font-size: 17.5rpx;
				font-family: SourceHanSansCN-Medium, SourceHanSansCN;
				font-weight: 500;
				color: #FFFFFF;
				border-radius: 0px 5rpx 0px 28.12rpx;
			}
		}
		.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;
		}
	}
	.content-list {
		padding-top: 50rpx;
		width: 100%;
		height: 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>