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