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)" :key="index">
				<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">剩余{{item.toDistribute}}个单位待分配</text>
					<text class="startEndTime">起止时间：{{item.startDate}} ~ {{item.endDate}}</text>
				</view>
			</view>
		</scroll-view>
		<view class="btn-distribution" @click="gotoCheckList(true, planList[0])" v-if="isShowDistribution">
			<text class="btn-text">批量分配</text>
		</view>
		<modal v-if="showModal" v-on:callback="callback"></modal>
	</view>
</template>

<script>
	import modal from './components/modal.vue'
	import moment from 'moment';
	export default {
		data() {
			return {
				situationID:'',//情境id
				planList:[],//计划列表
				firstFlag:1,//是否为第一次分配的标志，为1时表示是第一次，弹框提示
				isShowDistribution: false,//是否显示批量分配按钮
        listHeight:1125,//列表高度
        checkGroupId: 0, // 查核组id
				showModal: false
			}
		},
		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.compareTime(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){
						this.showModal = true;
					}
				}
			});
		},
		methods: {
			callback(flage) {
				this.showModal = false;
				if(flage && this.planList.length > 0) {
					this.gotoCheckList(true, this.planList[0]);
				}
			}, 
			compareTime(planList){
				this.$store.dispatch({
				  type: "commActions",
				   key: "getDateStr" ,
				}).then((dateStr) => {
				  if (dateStr) {
						if(planList.some((item)=>moment(item.startDate).valueOf()<moment(dateStr).valueOf())){
							 this.listHeight=1200;
						} else {
							this.isShowDistribution=true;
						}
				  }
				});
      },
    	/**
			* 跳转页面-查核列表
			* @param {Boolean} multiple 是否批量编辑
			* @param {Number} checkId 查核id
			*/
			gotoCheckList(multiple, currentObj){
        const { id, startDate, endDate } = currentObj;
        let _startDate = startDate ? startDate + ' 00:00' : ''; // 计划开始时间
        let _endDate = endDate ? endDate + ' 23:59' : ''; // 计划结束时间
				//跳转到查核列表
				uni.navigateTo({
					url: `/pages/editCheckList/editCheckList?situationId=${this.situationID}&checkId=${id}&checkGroupId=${this.checkGroupId}&startDate=${_startDate}&endDate=${_endDate}&multiple=${multiple}`
				});
			}
		},
		components: {
			modal,
		}
	}
</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>