Web_TracerMethodology/pages/creatingSituations/creatingSituations.vue

<template>
	<view class="creatingSituations">
		<uni-popup ref="popup" type="bottom" :maskClick="true" @change="popupChangehandle">
			<tm-radio-group :list="situationTypeList" :defaultValue='situationPreview.situationType' :setting="{
			  value: 'situationType',
			  name: 'situationTypeName'
			}" :openkeys="[0]" @change="situationTypeChanged" />
		</uni-popup>
		<check-map-detail v-if="showCheckMapDetail"></check-map-detail>
		<view v-else class="page-wrap" 
			:style="{paddingBottom: stepActive !== 0 ? '75rpx' : 0}">
			<tm-steps class="tm-steps" :options="options" :active="stepActive"></tm-steps>
			
			<scroll-view scroll-y="true" class="component-wrap">
				<!-- <component :is="options[active].component"></component> -->
				<theme v-if="stepActive==0"></theme>
				<condition v-if="stepActive==1"></condition>
				<checkRent v-if="stepActive==2"></checkRent>
				<checkMap v-if="stepActive==3"></checkMap>
				<checkPlan v-if="stepActive==4"></checkPlan>
				<situationPreview v-if="stepActive==5"></situationPreview>
			</scroll-view>
			
			<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";
	import {
		themeList,
		normalBtnGroup,
		btnGroupPlan1,
		btnGroupPlan2,
		btnGroupSituationPreview,
		optionsHandle,
		checkDep,
		checkGroup,
		editCondition,
		editCheckRent,
		editCheckMap,
		editCheckPlan,
		checkPlanList,
		editSituationPreview
	} from "./components/utils.js";
	import {dateHandle} from "../../utils/dateHandle.js";
	
	export default {
		data() {
			return {
				saveType: 'POST',
				editID: '',
				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,
				situationTypeList:state => state.creatingSituations.situationTypeList,
				showSelectableSituationTypeList:state => state.creatingSituations.showSelectableSituationTypeList,
			}),
			situationTypeName(){
				const temp  = this.situationTypeList.filter(item=>item.situationType == this.situationPreview.situationType);
				return temp[0].situationTypeName;
			},
			botmBtnGroup: function() {
				if(this.stepActive === 4) {
					if(this.showCheckPlan1) {
						return btnGroupPlan1;
					} else {
						return btnGroupPlan2;
					}
				} else if(this.stepActive === 5) {
					return btnGroupSituationPreview;
				} else {
					return normalBtnGroup;
				}
			},
			dataIsNull() {
				let data = this.checkMap.list.filter((item)=> item.status !== 'disable');
				return data.length === 0;
			}
		},
		watch:{
			/**
			 * @param {Boolen} newVal
			 * @param {Boolen} oldVal
			 */
			showSelectableSituationTypeList:function(newVal, oldVal){
				if(newVal){
					this.$refs.popup.open();
				}else{
					this.$refs.popup.close();
				}
			}
		},
		onLoad:function({id,type}){
			this.saveType = type ? type : 'POST';
			this.dispatch('getSituationTypes').then(res=>{
				  this.myCommit('situationTypeList', res);
			})
			if(id) {
				this.editID = id;
				this.dispatch('detialConfig',{id}).then((data)=>{
					if(data) {
						const {topic} = data;
						let theme = themeList[Number(topic)],
							condition = editCondition(data),
							editConfig = {};
						this.myCommit('theme', theme); // 主题
						if(type === 'PUT') { // 编辑
							let checkRent = editCheckRent(data),
							checkMap = editCheckMap(data),
							checkPlan = editCheckPlan(data),
							situationPreview = editSituationPreview(data);
							this.myCommit('checkPlan', checkPlan); // 查核计划
							this.myCommit('situationPreview', situationPreview); // 预览
							editConfig = {
								theme, 
								condition, 
								checkRent, 
								checkMap,
								checkPlan,
								situationPreview
							};
							console.log({editConfig});
						} else { // 复制创建
							this.myCommit('condition', condition); // 条件
							editConfig = {
								theme, 
								condition, 
							};
						}
						this.myCommit('editConfig', editConfig); 
						// 回到第一步或者第三步
						this.myCommit('stepActive', type === 'PUT' ? 0 : 2); 
					}
				});
			}
		},
		methods: {
			situationTypeChanged(type,name){
				// console.log({type,name});
			    this.$store.commit('creatingSituations/comChangeState',{key:'situationPreview',data:{...this.situationPreview,situationType:type}});
				// this.$store.commit('creatingSituations/comChangeState',{key:'showSelectableSituationTypeList',data:false});
			},
			save: function() {
				const {sitName,preDay,preH,startDay, description,situationType,showNotApplicable,showCountNum} = this.situationPreview;
				const {dateObj,checkedItem,checkList} = this.checkPlan;
				const {depType, options, conditionIds} = this.condition;

				if(!sitName || sitName.length < 2) {
					uni.showModal({
						title: '温馨提示',
						content: `情境名称不能为空也不能少于2个字！`,
						showCancel: false
					});
					return;
				}
				if(preDay > 31) {
					uni.showModal({
						title: '温馨提示',
						content: `提醒天数不得大于31天！`,
						showCancel: false
					});
					return;
				}
				if(preH > 24) {
					uni.showModal({
						title: '温馨提示',
						content: `提醒天数不得大于24小时！`,
						showCancel: false
					});
					return;
				}
				if(preDay != null&&! /^\d+$/.test(preDay)) {
					uni.showModal({
						title: '温馨提示',
						content: `提醒天数不能是小数！`,
						showCancel: false
					});
					return;
				}
				if(preH != null&&! /^\d+$/.test(preH)) {
					uni.showModal({
						title: '温馨提示',
						content: `提醒小时不能是小数！`,
						showCancel: false
					});
					return;
				}
				let data = {
					description,
					name: sitName,
					topic: this.theme.id,
					checkPlanStartDate: dateObj.start,
					checkPlanEndDate: dateObj.end,
					remindPlanDay: preDay,
					remindPlanHour: preH,
					remindCheckDay: startDay,
					depType,
					showNotApplicable:showNotApplicable,
					subtotal:showCountNum,
					situationType:situationType,
					filterCondition: optionsHandle(options, conditionIds),
					checkGroup: checkGroup(this.checkRent),
					checkDep: checkDep(this.checkMap.list),
					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: dateHandle.getNewData(date, checkedItem.model - 1)
						}
					})
				};
				if(this.saveType === 'PUT') {
					data.id = this.editID;
				}
				this.dispatch(`save${this.saveType}`, data).then((data)=>{
					if(data) {
						// 保存成功先清空数据
						this.clearData();
						uni.navigateTo({
							url: '/pages/situationsCenter/situationsCenter'
						});
					}
				});
			},
			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': // 生成查核计划
						if(this.checkPlan.checkList.length === 0&&this.checkPlan.dateObj.dayNum<1) {
							uni.showModal({
							  title: '错误提示',
							  content: '查核频次必须大于或等于1！',
							  showCancel: false
							});
						}else {
							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 3: flage = this.errorHandle(!this.dataIsNull, 3);
						break;
					case 4: 
						const {checkList} = this.checkPlan;
						flage = this.errorHandle(checkList.length > 0, 4);
						break;
					case 5: 
					    this.dispatch('getSituationTypes').then(res=>{
							  console.log({res});
						})
					    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: index === 3 ? '查核地图不能为空' :`请先选择${this.options[index].hint}！`,
						showCancel: false
					});
					return false;
				}
			},
			myCommit: function(key, data) {
				// console.log({key, data});
				this.$store.commit({type: 'creatingSituations/comChangeState',key,data});
			},
			dispatch: function(key, data) {
				return this.$store.dispatch({type: 'creatingSituations/commActions', key, data});
			},
			clearData:function() {
				checkPlanList[5].model = null;
				this.$store.commit({type: 'creatingSituations/setInit'});
			},
			popupChangehandle:function(data){
				const {show} = data;
				this.$store.commit('creatingSituations/comChangeState',{key:'showSelectableSituationTypeList',data:show});
			},
		},
		destroyed() {
			this.clearData();
		},
		components: {
			checkMapDetail,
			checkMapAdd,
			theme,
			condition,
			checkRent,
			checkMap,
			checkPlan,
			situationPreview
		}
	}
</script>

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