Web_TracerMethodology/pages/creatingSituations/creatingSituations.vue

<template>
	<view class="creatingSituations">

		<uni-popup ref="popup" type="bottom" :maskClick="true" @change="popupChangehandle">
			<tm-radio-group v-if="popupType==1" :list="situationTypeList" :defaultValue='situationPreview.situationType'
				:setting="{
			  value: 'situationType',
			  name: 'situationTypeName'
			}" :openkeys="[0]" @change="situationTypeChanged" />

			<tm-radio-group v-if="popupType==2" :list="templateList" :defaultValue='situationPreview.pageTemplateId'
				:setting="{
			  value: 'id',
			  name: 'name'
			}" :openkeys="[0]" @change="templateTypeChanged" />

		</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> -->
				
				<!-- 当流程下标为0且非职能科室负责人执行计划设置时展示 -->
				<theme v-if="stepActive==0&&!isPlanSet"></theme>
				
				<div v-if="theme.type == 'NORMAL'">
					<condition v-if="stepActive==1&&theme.id != 0"></condition>
	                <!-- 个案情境条件 -->
					<conditionCard v-if="stepActive==1&&theme.id == 0"></conditionCard>
					
					<checkRent v-if="stepActive==2"></checkRent> 		
					<checkMap v-if="stepActive==3"></checkMap>
					<checkPlan v-if="stepActive==4"></checkPlan>
					<situationPreview v-if="stepActive==5"></situationPreview>
				</div>
				
				<div v-if="isPlanSet">
					<!--自查督查计划设置 -->
					<condition v-if="stepActive==0"></condition>
					<person v-if="stepActive==1"></person>
					<checkMap v-if="stepActive==2"></checkMap>
					<checkPlan v-if="stepActive==3"></checkPlan>
					<taskPreview v-if="stepActive==4"></taskPreview>
				</div>
				
				<div v-if="theme.type == 'MULTI'">
					<!--创建 自查+督查 -->
					<typeList v-if="stepActive==1"></typeList>
					<typeList v-if="stepActive==2" :isMultiMode="true"></typeList>
					<planPreview v-if="stepActive==3"></planPreview>
				</div>

			</scroll-view>

			<tm-simple-btn-group v-if="stepActive != 0 || isPlanSet" :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 typeList from "./components/type.vue"
	import planPreview from "./components/preview.vue"
	import taskPreview from "./components/taskPreview.vue"
	import person from "./components/person.vue"
	import conditionCard from "./components/conditionCard.vue";
	import {
		themeList,
		normalBtnGroup,
		btnGroupPlan1,
		btnGroupPlan2,
		btnGroupSituationPreview,
		optionsHandle,
		checkDep,
		firstStepBtnGroup,
		checkGroup,
		editCondition,
		editCheckRent,
		editCheckMap,
		editCheckPlan,
		checkPlanList,
		editSituationPreview
	} from "./components/utils.js";
	import {
		dateHandle
	} from "../../utils/dateHandle.js";

	export default {
		data() {
			return {
				isPlanSet: false, //自查督查负责人操作计划设置
				saveType: 'POST',
				editID: '',
			}
		},
		computed: {
			...mapState({
				popupType: state => state.creatingSituations.popupType,
				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,
				templateList: state => state.creatingSituations.templateList,
				situationTypeList: state => state.creatingSituations.situationTypeList,
				showPopupSelectorList: state => state.creatingSituations.showPopupSelectorList,
				zhinengDepartments:state=>state.creatingSituations.zhinengDepartments,
				typeList:state=>state.creatingSituations.typeList,
				checkPerson:state=>state.creatingSituations.checkPerson,
				conditionCard: state => state.creatingSituations.conditionCard
			}),
			situationTypeName() {
				const temp = this.situationTypeList.filter(item => item.situationType == this.situationPreview
					.situationType);
				return temp[0].situationTypeName;
			},
			botmBtnGroup: function() {
				if(this.stepActive === 0){
					  return firstStepBtnGroup;
				}
				if (this.stepActive === 4 && this.theme.id != 2) {
					if (this.showCheckPlan1) {
						return btnGroupPlan1;
					} else {
						return btnGroupPlan2;
					}
				} else if (this.stepActive === 5 || (this.stepActive === 3 && this.theme.type == 'MULTI')||(this.stepActive === 4&&this.theme.id == 2)) {
					//普通情境和自查督查
					return btnGroupSituationPreview;
				} else {
					return normalBtnGroup;
				}
			},
			dataIsNull() {
				let data = this.checkMap.list.filter((item) => item.status !== 'disable');
				return data.length === 0;
			},
			themeType() {
				//planSet 职能科室负责人操作计划设置
				return this.theme.type?this.theme.type:'planSet'
			},
			options() {
				if (this.theme.type == 'MULTI'&&!this.isPlanSet) {
					//管理员创建自查督查
					return [{
							id: 'theme',
							title: '主题',
							component: theme
						},
						{
							id: 'typeList',
							title: '类型',
							component: typeList,
							hint: '追踪条件'
						},
						{
							id: 'departmentList',
							title: '职能科室',
							component: typeList,
							hint: '查核组'
						},
						{
							id: 'checkRent',
							title: '预览',
							component: checkRent,
							hint: '查核组'
						},
					]
				}
          
				if (this.isPlanSet) {
					//自查督查负责人操作计划设置流程集合
					return [
						{
							id: 'condition',
							title: '条件',
							component: condition,
							hint: '追踪条件'
						},
						{
							id: 'person',
							title: '人员',
							component: person,
							hint: '人员'
						},
						{
							id: 'checkMap',
							title: '地图',
							component: checkMap,
							hint: '地图'
						},
						{
							id: 'checkPlan',
							title: '计划',
							component: checkPlan,
							hint: '制定计划'
						},
						{
							id: 'situationPreview',
							title: '预览',
							component: situationPreview
						},
					]
				}

				//普通情境流程
				return [{
						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
					},
				]
			}
		},
		watch: {
			/**
			 * @param {Boolen} newVal
			 * @param {Boolen} oldVal
			 */
			showPopupSelectorList: function(newVal, oldVal) {
				if (newVal) {
					this.$refs.popup.open();
				} else {
					this.$refs.popup.close();
				}
			}
		},
		onLoad: function({
			id,
			type,
			actTarget,
			situationId,
			themeName, //情境名
			systemSituationType, //系统情境类型 0 个案 1 普通 2自查督查
		}) {
			
			this.isPlanSet = actTarget == 'planSet';
			this.situationId = situationId;
			
			
			
			
			this.saveType = type ? type : 'POST';
			
			if(systemSituationType == 2){
				  
				  this.myCommit('theme', {
					  ...this.theme,
				  	  id: systemSituationType, title:themeName, des: null,
					  situationId:situationId,
				  }); // 设置为自查督查
				  
				  this.myCommit('checkPerson', {
					  ...this.checkPerson,
				  	  situationId:situationId
				  }); // 自查督查时，人员获取需要适用情境筛选
			}
			
			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
							};

						} 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
					}
				});
			},
			templateTypeChanged(type, item) {
				// console.log({type,item});
				this.$store.commit('creatingSituations/comChangeState', {
					key: 'situationPreview',
					data: {
						...this.situationPreview,
						pageTemplateId: type,
						templateName: item.name
					}
				});
			},
			zichaduchaSave: function() {
				  let data = {
					   name:this.situationPreview.sitName,
					   checkPlanStartDate:'',
					   checkPlanEndDate:'',
					   functionCodes:this.zhinengDepartments.checkedItems.map(v=>v.id),
					   filterCodes:this.typeList.checkedItems.map(v=>v.id),
					   permission:1
				  }
                  this.dispatch(`addDuchazichaSituation`, data).then((data) => {
                  	if (data) {
                  		// 保存成功先清空数据
                  		this.clearData();
                  		uni.navigateTo({
                  			url: '/pages/situationsCenter/situationsCenter'
                  		});
                  	}
                  });
			},
			zichaduchaPlanSave(){
				//自查督查计划保存
				const param  = {
					  name:this.theme.title,
					  topic: this.theme.id,
					  id:this.situationId,
					  num: this.checkPlan.checkList.length,
					  checkPlanEndDate:`${this.checkPlan.dateObj.end} 23:59`,
					  checkPlanStartDate:`${this.checkPlan.dateObj.start} 00:00`,
					  day:this.checkPlan.dateObj.dayNum,
					  employeeList:this.checkPerson.checkedItems,
					  filterCondition:this.condition.checkedItems,
					  frequency:this.checkPlan.checkedItem.value,
					  planList: [...this.checkPlan.checkList].map((date, i) => {
					  	return {
					  		startDate:`${date} 00:00`,
					  		endDate: `${dateHandle.getNewData(date, this.checkPlan.checkedItem.model - 1)} 23:59`
					  	}
					  }),
					  filterDepartments:this.checkMap.list.map(item=>item.departmentId)
					  
				}
				
				this.dispatch(`saveZichaduchaPlan`, param).then((data) => {
					if (data) {
						// 保存成功先清空数据
						this.clearData();
						uni.navigateTo({
							url: '/pages/situationsCenter/situationsCenter'
						});
					}
				});
			},
			save: function() {
				const {
					sitName,
					preDay,
					preH,
					startDay,
					description,
					situationType,
					showNotApplicable,
					showCountNum,
					pageTemplateId
				} = 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,
					pageTemplateId: pageTemplateId,
					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) {
				// console.log({id,'stepActive':this.stepActive,'this.options':this.options});
				switch (id) {
					case 'goback':
					     uni.navigateBack({
					     	delta: 1
					     });
					break;
					case 'pre': // 上一步
						if (this.stepActive > 0){
							this.myCommit('needReload', false);
							this.myCommit('stepActive', this.stepActive - 1);
						}else {
							console.log({'this.stepActive':this.stepActive});
						}
						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 {
							console.log('checkPlanCreate');
							this.myCommit('showCheckPlan1', false);
						}
						break;
					case 'checkPlanCallback': // 生成查核计划-返回
						this.myCommit('showCheckPlan1', true);
						break;
					case 'situationPreviewOK': // 完成
						if (this.theme.type == 'MULTI') {
							//自查督查
							this.zichaduchaSave();
							break;
						}
						if (this.theme.id == 2) {
							//自查督查
							this.zichaduchaPlanSave();
							break;
						}
						this.save();
						break;
				}
			},
			/**
			 * 处理【下一步】逻辑
			 */
			nextHandle: function(stepActive) {
				console.log({stepActive,'themeType':this.themeType})
				let flage = false;
				if (this.themeType == 'NORMAL') {
					//非督查+自查
					switch (stepActive) {
						case 1:
						    if(this.theme.id == 0){
								//创建个案情境
								flage = this.errorHandle(this.condition.conditionIds.length >= this.conditionCard.requireds.length, 1);			
							}else{
								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 (this.themeType == 'MULTI') {
					//管理员创建 督查+自查
					switch (stepActive) {
						case 1:
							flage = true;
							break;
						case 2:
							flage = true;
							break;
						case 3:
							flage = true;
							break;
						default:
							flage = true;
							break;
					}
				}
				
				if(this.isPlanSet){
					  //职能科室负责人  督查+自查 计划设置
					  switch (stepActive) {
					  	case 1:
					  		flage = true;
					  		break;
					  	case 2:
					  		flage = true;
					  		break;
					  	case 3:
					  		flage = true;
					  		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) {
				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: 'showPopupSelectorList',
					data: show
				});
			},
		},
		destroyed() {
			this.clearData();
		},
		components: {
			checkMapDetail,
			checkMapAdd,
			theme,
			condition,
			checkRent,
			checkMap,
			checkPlan,
			situationPreview,
			typeList,
			person,
			planPreview,
			taskPreview,
			conditionCard
		}
	}
</script>

<style lang="less">
	.creatingSituations {
		width: 100%;
		height: 100%;
		background-color: #F5F6FA;

		.page-wrap {
			padding-bottom: 75rpx;
			width: 100%;
			height: 100%;

			.tm-steps {
				height: auto;
			}

			.component-wrap {
				padding-bottom: 87.5rpx;
			}
		}
	}
</style>