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="title-wrap">
					<text>{{item.deptName}}</text>
					<view>
						<image src="../../static/icon-map.png"></image>
						<text>{{item.deptClassName}}</text>
					</view>
					<view class="scoreAndStatus">
						<text v-if="item.scoreInfo">{{item.scoreInfo&&((item.scoreInfo.split('/')).map(t=>Number(t).toFixed(1))).join('/')}}</text>
						<view :class="getStatus(item.completeDes)">{{item.completeDes}}</view>
					</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 {
		mapState
	} from 'vuex';
	import {
		_stopPropagation
	} from "../../utils/compatible.js";

	export default {
		data() {
			return {
				showModal: false,
				planList: [],
				checkId: '',
				depList: []
			};
		},
		computed: {
			...mapState({
				ifReloadPageData:state=>{
					return state.checkList.ifReloadPageData
				},
			}),
			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 '';
				}
			}
		},
		watch:{
			/**
			 * @param {Boolen} newVal
			 */
			 ifReloadPageData:function(newVal){
				 if(newVal){
					 this.getPageList();
				 }
			 }
		},
		onLoad: function({
			situationId,
			situationType
		}) {
			this.situationType = situationType;
			this.situationId = situationId;
			this.getPageList();
		},
		onHide(){
			this.$store.commit('checkList/comChangeState', {
				key: 'ifReloadPageData',
				data: false
			});
		},
		onUnload() {
			this.$store.commit('checkList/comChangeState', {
				key: 'ifReloadPageData',
				data: false
			});
		},
		methods: {
			getPageList:function(){
				this.dispatch('planList', {
					situationId:this.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();
					}
				});
			},
			/**
			 * @str string [noStart,checking,completed]
			 */
			getStatus:function(str){  //设置状态颜色
			    switch(str){
					 case '未分配':
					      return 'status noStart'
					 	 break;
					 case '进行中':
					      return 'status checking'
					 	 break;
					 case '已完成':
					      return 'status completed'
					 	 break;	
				}
			},
			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;

			.title-wrap {
				.scoreAndStatus {
					 position: absolute;
					 right:20rpx;
					 .status {
					 	display: flex;
					 	justify-content: center;
					 	width: 150rpx;
					 	height: 35rpx;
					 	font-size: 17.5rpx;
					 	font-family: SourceHanSansCN-Medium, SourceHanSansCN;
					 	font-weight: 500;
					 	color: #FFFFFF;
					 	border-radius: 20rpx;
						&.noStart {
							background-color:#eee;
						}
						&.checking {
							background-color:#FFCC66;
						}
						&.completed {
							background-color:#29CC96;
						}
					 }
				}
			}
		}

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