Web_TracerMethodology/pages/checkGroup/checkGroup.vue

<!--自查督查 查核单位 -->

<template>
	<view class="checkGroup">
		
		<tmNavbar :customBack="goBack"  :is-back="true" :title="pageTitle" title-color="#292C33"></tmNavbar>
		
		<view class="list" v-for="item in list" @click="gotoCheckItemList(item)">
			<view :class="[item.completeFlag == 0?'mark noCompleted':'mark']">
				<text class="score">{{`${item.score}分`}}</text>
				<view class="status">{{item.completeFlag == 0?'未完成':'完成'}}</view>
			</view>
			<view class="name">{{item.departmentName}}</view>
			<view class="rowOne">
				{{`包含${item.pointCount}个查核要点，已完成${item.itemComplete}个查核项目`}}
			</view>
			<view class="rowTwo">
				要点概览：{{item.pointList.reduce((prev,next)=>`${prev},${next.checkPointName}`,'')}}
			</view>
			<view class="footer">
				<view class="line">
					<view class="left">{{`职能科室：${item.functionDepartment}`}}</view>
					<view class="right">{{`${item.checkStartDate}~${item.checkEndDate}`}}</view>
				</view>
				<view class="line">
					<view class="left">自查情况</view>
					<view class="right">{{`得分：${item.selfScore} 改善：${item.improveStatus}`}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import tmNavbar from "@/components/tm-navbar/tm-navbar.vue";
	export default {
		components:{
			tmNavbar
		},
		data() {
			return {
                list:[],
				pageTitle:'标题'
			};
		},
		computed: {
			...mapState({
				ifReloadPageData: state => state.checkGroup.ifReloadPageData,
			})
		},
		watch:{
			ifReloadPageData(cur,prev){
				if(cur){
					this.getData(this.situationId,this.num,this.planType);
				}
			}
		},
		onLoad({
			situationId,
			num,
			planType,
			name,
			entry,//点击进来的入口
			systemSituationType, 
		}) {
			this.situationId = situationId;
			this.num = num;
			this.entry = entry;
			this.planType = planType;
			this.pageTitle = name;
			this.getData(situationId,num,planType);
			this.systemSituationType = systemSituationType;
		},
		methods: {
			goBack(e) {
			    this.$store.commit('situationDetail/comChangeState', {
			    	key: 'ifReloadPageData',
			    	data: true
			    });
				
				uni.navigateBack();
			},
			getData(situationId,num,planType) {
				this.$store.dispatch({
					type: 'planDetailList/commActions',
					payload: {
						key: 'getPlanList',
						data: {
							situationId: situationId,
							num: num,
							planType: planType,
							entry:this.entry
						}
					}
				}).then((data) => {
					this.list = data;
					
					this.$store.commit('checkGroup/comChangeState', {
						key: 'ifReloadPageData',
						data: false
					});
				})
			},
			gotoCheckItemList(item){
				uni.navigateTo({
					url: `/pages/checkMainPoints/checkMainPoints?systemSituationType=${this.systemSituationType}&functionId=${item.functionId}&isZichaDucha=${true}&departmentId=${item.departmentId}`
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	.checkGroup {
		padding: 25rpx;

		.list {
			position: relative;
			width: 700rpx;
			height: 280rpx;
			padding: 25rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			box-shadow: 0px 3.75rpx 12.5rpx 0px rgba(0, 13, 51, 0.1);
			border-radius: 5rpx;
			margin-bottom: 25rpx;

			.mark {
				display: inline-flex;
				flex-direction: row;
				justify-content: flex-end;
				align-items: center;
				position: absolute;
				top: 0;
				right: 0;
				// width: 237.5rpx;
				height: 35rpx;
				background: rgba(41, 204, 150, .1);
				border-radius: 0px 5rpx 0px 28.13rpx;

				.score {
					font-size: 17.5rpx;
					font-family: SourceHanSansCN-Medium, SourceHanSansCN;
					font-weight: 500;
					color: #29CC96;
					padding: 0 25rpx;
				}

				.status {
					display: inline-block;
					padding: 0 18.75rpx;
					height: 35rpx;
					line-height: 35rpx;
					text-align: center;
					background: #29CC96;
					border-radius: 0px 5rpx 0px 28.13rpx;
					font-size: 17.5rpx;
					font-family: SourceHanSansCN-Medium, SourceHanSansCN;
					font-weight: 500;
					color: #FFFFFF;
				}
				&.noCompleted {
					background: rgba(255, 204, 102, .1);
					.score {
						color: rgba(255, 170, 0, 1);
					}
					.status {
						background: rgba(255, 170, 0, 1);
					}
				}
			}

			.name {
				font-size: 35rpx;
				font-family: SourceHanSansCN-Light, SourceHanSansCN;
				font-weight: 300;
				color: #292C33;
				margin-bottom: 25rpx;
			}

			.rowOne {
				// height: 20rpx;
				// line-height: 20rpx;
				font-size: 20rpx;
				font-family: SourceHanSansCN-Bold, SourceHanSansCN;
				font-weight: bold;
				color: #292C33;
				margin-bottom: 15rpx;
			}

			.rowTwo {
				// height: 20rpx;
				// line-height: 20rpx;
				font-size: 20rpx;
				font-family: SourceHanSansCN-Normal, SourceHanSansCN;
				font-weight: 400;
				color: #666F80;
				margin-bottom: 25rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.footer {
				padding-top: 18.75rpx;
				border-top: 0.63rpx solid #DADEE6;

				.line {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 15rpx;

					.left {
						width: 50%;
						font-size: 17.5rpx;
						font-family: SourceHanSansCN-Normal, SourceHanSansCN;
						font-weight: 400;
						color: #666E80;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.right {
						text-align: right;
						width: 50%;
						font-size: 17.5rpx;
						font-family: SourceHanSansCN-Normal, SourceHanSansCN;
						font-weight: 400;
						color: #666E80;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					&:last-child {
						margin-bottom: 0;
					}
				}
			}
		}
	}
</style>