Web_TracerMethodology/pages/planList/planList.vue

<template>
	<view class="planList-page">
		<scroll-view class="list-box" scroll-y="true" :style="{'height':listHeight+'rpx'}">
			<view class="item-box" v-for="(item,index) in planList" @click="gotoCheckList(false,item)">
				<view class="row1">
					<text class="title">{{item.name}}</text>
					<view class="compeleted-box" v-if="item.isCompeleted">
						<text class="compeleted-text" >已完成</text>
					</view>
					<view class="continued-box" v-if="item.isContinued">
						<text class="continued-text" >进行中</text>
					</view>
				</view>
				<view class="row2">
					<text class="TobeDistributed">剩余1个单位待分配</text>
					<text class="startEndTime">起止时间：2020-12-26 ~ 2020-12-18</text>
				</view>
			</view>
		</scroll-view>
		<view class="btn-distribution" @click="gotoCheckList(true, planList[0])" v-if="isShowDistribution">
			<text class="btn-text">批量分配</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				situationID:'',//情境id
				planList:[],//计划列表
				firstFlag:1,//是否为第一次分配的标志，为1时表示是第一次，弹框提示
				isShowDistribution:false,//是否显示批量分配按钮
        listHeight:1125,//列表高度
        checkGroupId: 0 // 查核组id
			}
		},
		onLoad({ situationId, checkGroupId }){ // situationId：情景id checkGroupId: 查核组id
      this.situationID=situationId;
      this.checkGroupId = checkGroupId;
		},
		created: function() {
			this.$store.dispatch({
				type: 'planList/commActions',
				payload: {
					key: 'planList',
					data:{
						situationId:this.situationID
					}
				}
			}).then((data) => {
				if (data) {
					this.planList=data.map((item,index)=>{
						if(item.empList.length!=item.toDistribute){
							this.firstFlag=0;
						}
						return {
							id:item.id,
							name:item.name,
							startDate:item.startDate,
							endDate:item.endDate,
							status:item.status,
							isCompeleted:item.status==3?true:false,
							isContinued:item.status==2?true:false,
							toDistribute:item.toDistribute,
						}
					});
					if(this.firstFlag==1){
						uni.showModal({
							title:'提示',
							content:'您的分配工作量较大，建议使用批量分配功能',
						  showCancel:false
						})
					}
				}
			});
		},
		methods: {
			compareTime(time){
				let myDate=new Date();
				let startDate=time.replace(/-/g,"/");
				startDate=Date.parse(startDate);
				if(myDate>startDate){
          this.listHeight=1200;
				}else{
          this.isShowDistribution=true;
				}
      },
    	/**
			* 跳转页面-查核列表
			* @param {Boolean} type 是否批量编辑
			* @param {Number} checkId 查核id
			*/
			gotoCheckList(type, currentObj){
        const { id, startDate, endDate } = currentObj;
				//跳转到查核列表
				uni.navigateTo({
					url: `/pages/editCheckList/editCheckList?situationId=${type ? this.situationID : 0}&checkId=${id}&checkGroupId=${this.checkGroupId}&startDate=${startDate}&endDate=${endDate}`
				});
			}
		}
	}
</script>

<style lang="less">
	.planList-page{
		height: 100%;
		.list-box{
			// height: 1125rpx;
			.item-box{
				width: 100%;
				height: 125rpx;
				background: #FFFFFF;
				border: 0.62rpx solid #DADEE6;
				.row1{
					margin-top: 30rpx;
					margin-left: 25rpx;
					margin-right: 25rpx;
					.title{
						font-size: 25rpx;
						font-family: SourceHanSansCN-Bold, SourceHanSansCN;
						font-weight: bold;
						color: #292C33;
						float: left;
					}
					.compeleted-box{
						width: 75rpx;
						height: 31.25rpx;
						border-radius: 8px;
						background: rgba(41, 204, 150, 0.1);
						text-align: center;
						float: right;
						.compeleted-text{
							font-size: 17.5rpx;
							font-family: SourceHanSansCN-Medium, SourceHanSansCN;
							font-weight: 500;
							color: #29CC96;
							line-height: 31.25rpx;
						}
					}
					.continued-box{
						width: 75rpx;
						height: 31.25rpx;
						border-radius: 8px;
						background: rgba(255, 204, 102, 0.1);
						text-align: center;
						float: right;
						.continued-text{
							width: 75rpx;
							height: 31.25rpx;
							font-size: 17.5rpx;
							font-family: SourceHanSansCN-Medium, SourceHanSansCN;
							font-weight: 500;
							color: #FFAA00;
							line-height: 31.25rpx;
						}
					}
				}
				.row2{
					margin-left: 25rpx;
					margin-top: 75rpx;
					margin-right: 25rpx;
					.TobeDistributed{
						font-size: 20rpx;
						font-family: SourceHanSansCN-Normal, SourceHanSansCN;
						font-weight: 400;
						color: #666E80;
						float: left;
					}
					.startEndTime{
						font-size: 20rpx;
						font-family: SourceHanSansCN-Normal, SourceHanSansCN;
						font-weight: 400;
						color: #666E80;
						float: right;
					}
				}
			}
		}
		.btn-distribution {
			width: 750rpx;
			height: 75rpx;
			background: #3377FF;
			position: fixed;
			bottom: 0rpx;

			.btn-text {
				font-size: 22.5rpx;
				font-family: SourceHanSansCN-Normal, SourceHanSansCN;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 75rpx;
				margin-left: 352.5rpx;
			}
		}
	}
</style>