Web_TracerMethodology/pages/creatingSituations/creatingSituations.vue

<template>
	<view class="creatingSituations">
		<check-map-detail v-if="showCheckMapDetail"></check-map-detail>
		<view v-else class="page-wrap" 
			:style="{paddingBottom: stepActive !== 0 ? '75rpx' : 0}">
			<tm-steps :options="options" :active="stepActive"></tm-steps>
			<tm-simple-btn-group v-if="stepActive !== 0" 
				:options="botmBtnGroup"
				v-on:callback="changeStep"></tm-simple-btn-group>
		</view>
		<check-map-add v-if="showCheckMapAdd"></check-map-add>
	</view>
</template>

<script>
	import { mapState } from "vuex";
	import theme from "./components/theme.vue";
	import condition from "./components/condition.vue";
	import checkRent from "./components/checkRent.vue";
	import checkMap from "./components/checkMap.vue";
	import checkMapDetail from "./components/checkMapDetail.vue";
	import checkMapAdd from "./components/checkMapAdd.vue";
	import checkPlan from "./components/checkPlan.vue";
	import situationPreview from "./components/situationPreview.vue";
	
	const normalBtnGroup = [
		{id: 'pre', label: '上一步'},
		{id: 'next', label: '下一步'}
	];
	const btnGroupPlan1 = [
		{id: 'pre', label: '上一步'},
		{id: 'checkPlanCreate', label: '生成查核计划'}
	];
	const btnGroupPlan2 = [
		{id: 'checkPlanCallback', label: '返回'},
		{id: 'next', label: '下一步'}
	];
	const btnGroupSituationPreview = [
		{id: 'pre', label: '上一步'},
		{id: 'situationPreviewOK', label: '完成'}
	];
	
	export default {
		data() {
			return {
				options: [
					{id: 'theme', title: '主题', component: theme},
					{id: 'condition', title: '条件', component: condition, hint: '追踪条件'},
					{id: 'checkRent', title: '查核组', component: checkRent, hint: '查核组'},
					{id: 'checkMap', title: '地图', component: checkMap, hint: '地图'},
					{id: 'checkPlan', title: '计划', component: checkPlan, hint: '制定计划'},
					{id: 'situationPreview', title: '预览', component: situationPreview},
				]
			}
		},
		computed: {
			...mapState({
				showCheckMapDetail: state => state.creatingSituations.showCheckMapDetail,
				showCheckMapAdd: state => state.creatingSituations.showCheckMapAdd,
				showCheckPlan1: state => state.creatingSituations.showCheckPlan1,
				stepActive: state => state.creatingSituations.stepActive,
				theme: state => state.creatingSituations.theme,
				condition: state => state.creatingSituations.condition,
				checkRent: state => state.creatingSituations.checkRent,
				checkMap: state => state.creatingSituations.checkMap,
				checkPlan: state => state.creatingSituations.checkPlan,
				situationPreview: state => state.creatingSituations.situationPreview,
			}),
			botmBtnGroup: function() {
				if(this.stepActive === 4) {
					if(this.showCheckPlan1) {
						return btnGroupPlan1;
					} else {
						return btnGroupPlan2;
					}
				} else if(this.stepActive === 5) {
					return btnGroupSituationPreview;
				} else {
					return normalBtnGroup;
				}
			}
		},
		methods: {
			save: function() {
				const {sitName,preDay,preH,startDay} = this.situationPreview;
				const {dateObj,checkedItem,checkList} = this.checkPlan;
				const {depType, options} = this.condition;
				const {list} = this.checkMap;
				if(!sitName) {
					uni.showModal({
						title: '温馨提示',
						content: `情境名称不能为空！`,
						showCancel: false
					});
					return;
				}
				this.dispatch('save', {
					name: sitName,
					topic: this.theme.id,
					checkPlanStartDate: dateObj.start,
					checkPlanEndDate: dateObj.end,
					remindPlanDay: preDay,
					remindPlanHour: preH,
					remindCheckDay: startDay,
					depType,
					filterCondition: options,
					checkGroup: this.checkRent.list,
					checkDep: [...list].map((item,i)=>{
						return {
							...item,
							sort: i+1,
							enableFlag: item.status === 'disable' ? false : true
						}
					}),
					planConfig: {
						frequency: checkedItem.value,
						day: checkedItem.model,
						startDate: dateObj.start,
						endDate: dateObj.end,
						num: checkList.length
					},
					planList: [...checkList].map((date, i)=>{
						return {
							startDate: date,
							endDate: i === checkList.length - 1 ? dateObj.end : checkList[i+1]
						}
					})
				}).then((data)=>{
					if(data) {
						
					}
				});
			},
			changeStep: function(id) {
				switch(id) {
					case 'pre': // 上一步
						if(this.stepActive > 0) 
							this.myCommit('needReload', false);
							this.myCommit('stepActive', this.stepActive - 1);
						break;
					case 'next': // 下一步
						if(this.stepActive < this.options.length) 
							this.nextHandle(this.stepActive);
						break;
					case 'checkPlanCreate': // 生成查核计划
						this.myCommit('showCheckPlan1', false);
						break;
					case 'checkPlanCallback': // 生成查核计划-返回
						this.myCommit('showCheckPlan1', true);
						break;
					case 'situationPreviewOK': // 完成
						this.save();
						break;
				}
			},
			/**
			 * 处理【下一步】逻辑
			 */
			nextHandle: function(stepActive) {
				let flage = false;
				switch(stepActive) {
					case 1: 
						flage = this.errorHandle(this.condition.conditionIds.length > 0, 1);
						break;
					case 2: 
						const {points} = this.checkRent.checkedItem;
						let condition = this.checkRent.checkedItem.id !== null && points;
						flage = this.errorHandle(condition, 2);
						break;
					case 4: 
						const {checkList} = this.checkPlan;
						flage = this.errorHandle(checkList.length > 0, 4);
						break;
					default: 
						flage = true;
						break;
				}
				if(flage) {
					this.myCommit('needReload', true);
					this.myCommit('stepActive', stepActive + 1);
				} 
			},
			/**
			 * 错误处理，满足条件返回true
			 * @param {Object} condition 条件
			 * @param {Object} index 当前下标
			 */
			errorHandle: function(condition, index) {
				if(condition) {
					return true;
				} else {
					uni.showModal({
						title: '温馨提示',
						content: `请先选择${this.options[index].hint}！`,
						showCancel: false
					});
					return false;
				}
			},
			myCommit: function(key, data) {
				this.$store.commit({type: 'creatingSituations/comChangeState',key,data});
			},
			dispatch: function(key, data) {
				return this.$store.dispatch({type: 'creatingSituations/commActions', key, data});
			},
		},
		components: {
			checkMapDetail,
			checkMapAdd
		}
	}
</script>

<style lang="less">
	.creatingSituations {
		width: 100%;
		height: 100%;
		background-color: #F5F6FA;
		.page-wrap {
			padding-bottom: 75rpx;
			width: 100%;
			height: 100%;
		}
	}
</style>