Web_TracerMethodology/pages/creatingSituations/components/checkPlan.vue

<template>
	<view class="check-plan">
		<view class="title">请制定查核计划（{{showCheckPlan1 ? 1 : 2}}/2）</view>
		<view class="content1" v-if="showCheckPlan1">
			<view class="list">
				<view class="item" v-for="(item, index) in list" :key="index">
					<view class="text-wrap">
						<input v-if="item.id === 'custom'" 
							v-model="item.model" 
							type="number" 
							@input="createList"
							placeholder="自定义" />
						<text>{{item.label}}</text>
					</view>
					<view class="img-wrap" @click="checkModel(item)">
						<image :src="`../../static/check-${checkedItem.id === item.id 
							? 'radio': 'no'}.png`"></image>
					</view>
				</view>
			</view>
			<view class="date-box">
				<text>起止时间</text>
				<view>
					<date-time-pick-group fields="day" 
						:startTime="startTime()"
						:startSelectValue="dateObj.start"
						:endSelectValue="dateObj.end"
						v-on:changeDate="changeDate"></date-time-pick-group>
					<image src="../../../static/incon-more.png"></image>
				</view>
			</view>
			<view class="result-box">
				<text>查核频次</text>
				<text>{{checkNumber}}</text>
			</view>
		</view>
		<view class="content2" v-else>
			<view class="top-box">
				<view class="result-box">
					<text>开始日期</text>
					<text>{{dateObj.start}}</text>
				</view>
				<view class="date-box">
					<text>结束日期</text>
					<view>
						<date-time-picker fields="day"
							placeholder="请选择结束日期"
							pickType="end"
							:start="startTime()"
							:defaultValue="dateObj.end"
							v-on:change="changeDate"></date-time-picker>
						<image src="../../../static/incon-more.png"></image>
					</view>
				</view>
			</view>
			<view class="content2-list">
				<view class="item" v-for="(item, index) in checkList" :key="index">
					<text>第{{index + 1}}次查核</text>
					<view class="date-box">
						<text>开始日期</text>
						<view>
							<date-time-picker fields="day"
								:start="startDate(index)"
								:end="formateStartEnd(endDate())"
								placeholder="请选择开始日期"
								:defaultValue="item"
								v-on:change="changeChildDate($event, index)"></date-time-picker>
							<image src="../../../static/incon-more.png"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {dateHandle} from "../../../utils/dateHandle.js";
	import { mapState } from "vuex";
	const {dateDiff, getNewData, todayDate, compare} = dateHandle;
	const list = [
		{id: 'week', label: '每周', model: 7},
		{id: 'month', label: '每月', model: 30},
		{id: 'twoMonth', label: '每两月', model: 60},
		{id: 'quarter', label: '每季度', model: 90},
		{id: 'halfAYear', label: '每半年', model: 180},
		{id: 'custom', label: '天', model: null},
	];
	export default {
		data() {
			return {
				list, 
				checkedItem: list[1], // 选中的取模方式对象
				dateObj: { // 保存开始日期结束日期的对象
					start: todayDate(),
					end: '',
					dayNum: 0 // 两个日期间隔的天数
				}, 
				checkList: [], // 核查计划数组
			}
		},
		computed: {
			...mapState({
				showCheckPlan1: state => state.creatingSituations.showCheckPlan1,
			}),
			checkNumber: function() { // 查核频次
				return this.checkList.length;
			}
		},
		methods: {
			checkModel: function(item) {
				this.checkedItem = item;
				this.createList();
			},
			/**
			 * 开始、结束日期变化函数
			 * @param {Object} date 日期对象
			 * @param {Object} type 返回类型（start/end）
			 */
			changeDate: function(date, type) {
				this.dateObj[type] = date.f1;
				const {start, end} = this.dateObj;
				if(start && end) {
					this.dateObj.dayNum = dateDiff(start, end);
					this.createList();
				}
			},
			/**
			 * 构造计划列表
			 */
			createList: function() {
				const { model } = this.checkedItem;
				const {start, dayNum} = this.dateObj;
				if(model && dayNum > 0) { // 确保前两步都做好了
					let num = Math.floor(dayNum / model);
					this.checkList = [start];
					for(let i = 0; i < num - 1; i++) {
						this.checkList[i+1] = getNewData(this.checkList[i], model);
					}
				} else {
					this.checkList = [];
				}
			},
			/**
			 * 已经生成的计划日期变化
			 * @param {Object} date
			 */
			changeChildDate: function(date, index) {
				let newList = this.checkList.slice(0, index); // 不包括index
				newList[index] = date.f1;
				const { model } = this.checkedItem;
				let i = index;
				// 判断下一个计划开始时间日期不能大于结束的前X(模)天
				while(compare(this.endDate(), getNewData(newList[i], model))) { 
					newList[i+1] = getNewData(newList[i], model);
					i++;
				}
				this.checkList = newList;
			},
			startTime: function() { // 限制只能从今天开始
				return this.formateStartEnd(todayDate());
			},
			endDate: function() { // 获取能选择的最大日期，取结束日期的前模天
				let day = -Number(this.checkedItem.model); // 使用负数能取前X天
				return getNewData(this.dateObj.end, day);
			},
			startDate: function(index) { // 子级能选择的最早开始时间
				if(index > 0) {
					let day = Number(this.checkedItem.model);
					return this.formateStartEnd(getNewData(this.checkList[index - 1], day));
				} else {
					return this.startTime();
				}
			},
			formateStartEnd: function(str) {
				return str + ' 00:00';
			}
		}
	}
</script>

<style lang="less">
	.check-plan {
		font-size: 22.5rpx;
		line-height: 33.75rpx;
		color: #292C33;
		.content1 {
			.list {
				padding-left: 25rpx;
				background-color: #fff;
				.item {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					border-bottom: 1px solid #DADEE6;
					width: 100%;
					height: 87.5rpx;
					.text-wrap {
						display: flex;
						flex-direction: row;
						align-items: center;
						input {
							margin-right: 25rpx;
							width: 75rpx;
							font-size: 22.5rpx;
							line-height: 33.75rpx;
							color: #292C33;
						}
					}
					.img-wrap {
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;
						width: 75rpx;
						height: 100%;
						image {
							width: 25rpx;
							height: 25rpx;
						}
					}
				}
			}
		}
		.content2 {
			.top-box {
				padding-left: 25rpx;
				background-color: #fff;
				.date-box,
				.result-box {
					padding-left: 0;
				}
				.result-box {
					border-bottom: 1px solid #DADEE6;
				}
			}
			.content2-list {
				padding-bottom: 25rpx;
				.item {
					display: flex;
					flex-direction: column;
					margin-top: 19.37rpx;
					>text {
						padding-bottom: 9.37rpx;
						padding-left: 25rpx;
						color: #666F80;
					}
				}
			}
			.date-box,
			.result-box {
				margin-top: 0;
			}
		}
		.date-box,
		.result-box {
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-top: 15rpx;
			padding: 0 25rpx;
			width: 100%;
			height: 87.5rpx;
			background-color: #fff;
			>text:first-child {
				margin-right: 85rpx;
				white-space: nowrap;
				color: #525866;
			}
			>view {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				image {
					width: 12.5rpx;
					height: 21.25rpx;
				}
			}
		}
	}
</style>