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,
				condition: state => state.creatingSituations.condition,
				checkRent: state => state.creatingSituations.checkRent,
			}),
			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: {
			changeStep: function(id) {
				switch(id) {
					case 'pre': // 上一步
						if(this.stepActive > 0) 
							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;
				}
			},
			/**
			 * 处理【下一步】逻辑
			 */
			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;
				}
				if(flage) 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});
			}
		},
		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>