Web_TracerMethodology/pages/planList/planList.vue

<template>
	<view class="planList-page">
		<scroll-view class="list-box" scroll-y="true" :style="{'height':listHeight+'rpx'}">
			<uni-swipe-action>
				<uni-swipe-action-item v-for="(item,index) in planList"  :key="index"
				    :disabled="!item.planFlag"
					:threshold="20" :right-options="options" @click="delPlanHandle(item)" >
					<view class="item-box" @click.stop="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">剩余{{item.toDistribute}}个单位待分配</text>
							<text class="startEndTime">起止时间：{{item.startDate}} ~ {{item.endDate}}</text>
						</view>
					</view>
				</uni-swipe-action-item>
			</uni-swipe-action>
		</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';
	import {
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		data() {
			return {
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#F56C6C'
					}
				}],
				situationID: '', //情境id
				planList: [], //计划列表
				firstFlag: 1, //是否为第一次分配的标志，为1时表示是第一次，弹框提示
				isShowDistribution: true, //是否显示批量分配按钮
				listHeight: 1125, //列表高度
				checkGroupId: 0, // 查核组id
				showModal: false,
			}
		},
		computed: {
			...mapState({
				ifReloadData: state => {
					return !state.planList.ifReloadData ? false : true;
				},
			})
		},
		watch: {
			ifReloadData(newVal, oldVal) {
				if (newVal != oldVal) {
					console.log('更新列表');
					this.getPlanList();
				}
			},
		},
		onLoad({
			situationId,
			checkGroupId
		}) { // situationId：情景id checkGroupId: 查核组id
			this.situationID = situationId;
			this.checkGroupId = checkGroupId;
		},
		created: function() {
			this.getPlanList();
		},
		methods: {
			delPlanHandle(data){
				 this.$store.dispatch({
				 	type: 'planList/commActions',
				 	payload: {
				 		key: 'delOutofPlan',
				 		data:data.id
				 	}
				 }).then(()=>{
					 this.getPlanList();
				 })
			},
			callback(flage) {
				this.showModal = false;
				if (flage && this.planList.length > 0) {
					this.gotoCheckList(true, this.planList[0]);
				}
			},
			getPlanList() {
				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,
								planFlag:item.planFlag,
								situationType: item.situationType,
								checkNo: item.checkNo,
								isCompeleted: item.status == 3 ? true : false,
								isContinued: item.status == 2 ? true : false,
								toDistribute: item.toDistribute,
							}
						});
						if (this.firstFlag == 1) {
							this.showModal = true;
						}
					}
				});
			},
			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,
					situationType,
					checkNo
				} = currentObj;
				let _startDate = startDate ? startDate + ' 00:00' : ''; // 计划开始时间
				let _endDate = endDate ? endDate + ' 23:59' : ''; // 计划结束时间
				//跳转到查核列表
				this.$store.commit('planList/comChangeState', {
					key: 'ifReloadData',
					data: false
				});
				uni.navigateTo({
					url: `/pages/editCheckList/editCheckList?situationId=${this.situationID}&checkId=${id}&checkGroupId=${this.checkGroupId}&startDate=${_startDate}&endDate=${_endDate}&multiple=${multiple}&situationType=${situationType}&checkNo=${checkNo}`
				});
			}
		},
		components: {
			modal,
		}
	}
</script>

<style lang="less" scoped>
	.planList-page {
		height: 100%;

		.list-box {
			padding-bottom: 80rpx;

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