Web_TracerMethodology/pages/mission-action/components/pdca.vue

<template>
	<view class="pdca-page">
		<uni-segmented-control :current="current" :values="tabItems" @clickItem="onClickItem" style-type="text"
			active-color="#3377FF" />
		<view class="content">
			<scroll-view class="scroll-y" scroll-y="true">
				<one-textarea v-if="current === 0" type="plan" :defaultValue="plan"
					:disabled="disabled || btnInfo.pDisabled" @changeTextare="changeTextare" />
				<do-and-check v-if="current === 1" type="do" :disabled="disabled" :recordList="doList"
					@changeRecordList="changeDoList" />
				<do-and-check v-if="current === 2" type="check" :disabled="disabled" :recordList="checkList"
					:showUploadImg="true" @changeRecordList="changeCheckList" />
				<one-textarea v-if="current === 3" type="action" title="对策处置（Action）" label="对策处置"
					:defaultValue="action" :disabled="disabled" @changeTextare="changeTextare" />
			</scroll-view>
			<view class="bottomBtn" @click="goToPrevPage" v-if="disabled">返回改善任务详情</view>
			<view class="fixed-buttom-btn" v-if="!disabled">
				<view class="btn-text cancle" @click="sure('')">
					<text>暂存</text>
				</view>
				<view class="btn-text" @click="toggleModalVisibile">
					<text>提交</text>
				</view>
			</view>
		</view>
		<!-- 方案名称modal -->
		<modal v-if="modalVisibile" @close="toggleModalVisibile" @sure="sure" />
	</view>
</template>

<script>
	// 改善任务PDCA
	import uniSegmentedControl from "@/components/uni-segmented-control/uni-segmented-control.vue"
	import oneTextarea from './pdca-components/one-textarea.vue'
	import doAndCheck from './pdca-components/do-and-check.vue'
	import modal from './modal.vue'
	import {
		mapState
	} from "vuex";

	export default {
		props: {
			// 是否禁用
			disabled: {
				type: Boolean,
				default: false
			},
			// 详情回显的数据
			values: {
				type: Object,
				default: () => {
					return {}
				}
			},
			// 按钮信息 (包过请求的key)
			btnInfo: {
				type: Object,
				default: () => {
					return {}
				}
			},
			// 任务详情
			missionDetails: {
				type: Object,
				default: () => {
					return {}
				}
			},
			// pdca类型 p 和 pdca
			pdcaSetting: {
				type: String,
				default: 'p'
			}
		},
		data() {
			return {
				current: 0,
				plan: '', // 改善计划
				doList: [{
					record: '',
					date: ''
				}], // 执行过程
				checkList: [{
					record: '',
					date: '',
					filePath: []
				}], // 改善确认
				action: '', // 对策处置
				// 方案名称显示隐藏
				modalVisibile: false
			}
		},
		computed: {
			tabItems() {
				return this.pdcaSetting === 'p' ?
					['改善计划(P)'] :
					['改善计划(P)', '执行过程(D)', '改善确认(C)', '对策处置(A)'];
			},
			...mapState({
				missionDetails: state => state.mission.missionDetails
			}),
		},
		created() {
			uni.setNavigationBarTitle({
				title: '改善计划'
			});
			// if(this.disabled || this.btnInfo.isEdit) {
			this.plan = this.values['plan'] || '';
			this.doList = (this.values['do'] && this.values['do'].length > 0) ?
				this.getComList(this.values['do'], 'do') :
				[{
					record: '',
					date: ''
				}];
			this.checkList = (this.values['check'] && this.values['check'].length > 0) ?
				this.getComList(this.values['check'], 'check') :
				[{
					record: '',
					date: '',
					filePath: []
				}];
			this.action = this.values['action'] || '';
			// }
		},
		methods: {
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex;
				}
			},
			// 切换方案名称显示隐藏
			toggleModalVisibile() {
				this.modalVisibile = !this.modalVisibile;
			},
			// 改善计划/对策处置变化
			changeTextare(type, text) {
				this[type] = text;
			},
			// 执行过程变化
			changeDoList(list) {
				this.doList = list;
			},
			goToPrevPage(){
				// window.history.back();
				uni.navigateBack({
				    delta: 1
				});
			},
			// 改善确认变化
			changeCheckList(list) {
				this.checkList = list;
			},
			// 提交审核/ 暂存(暂存时improveScheme为空)
			sure(improveScheme) {
				let requestParams = {
					improveScheme // 改善方案名称
				};
				this.btnInfo.params && this.btnInfo.params.map(item => {
					if (item.valueKey && !item.isEdit) {
						requestParams[item.paramsKey] = (
							item.isOutvalueKey ?
							this.missionDetails :
							this.btnInfo
						)[item.valueKey];
					} else {
						switch (item.paramsKey) {
							case 'taskPlan':
								requestParams[item.paramsKey] = this.plan;
								break;
							case 'taskAction':
								requestParams[item.paramsKey] = this.action;
								break;
							case 'taskDoRequestList':
								requestParams[item.paramsKey] = this.doList.map((item, i) => {
									return {
										taskDoId: i + 1,
										taskDoProcess: item.record,
										taskDoPlan: item.date
									}
								});
								break;
							case 'taskCheckRequestList':
								requestParams[item.paramsKey] = this.checkList.map((item, i) => {
									return {
										taskCheckId: i + 1,
										taskCheckProcess: item.record,
										taskCheckPlan: item.date,
										taskCheckEffect: item.filePath.join(',')
									}
								});
								break;
							default:
								requestParams[item.paramsKey] = '';
								break;
						}
					}
				});
				if (improveScheme) { // 提交
					requestParams['taskType'] = this.pdcaSetting === 'p' ? 14 : 16;
				} else { // 暂存
					// requestParams['taskType'] = this.pdcaSetting === 'p' ? 13 : 15;
					// 注意暂存的时候接收人是当前登录的账号
					requestParams['receiveEmpId'] = uni.getStorageSync('id');
					requestParams['receiveEmpName'] = uni.getStorageSync('name');
					if ([4, 6].includes(requestParams['taskType'])) {
						requestParams['needApproveFlag'] = this.missionDetails.needApproveFlag;
					}
				}
				this.$emit('comRequest', requestParams);
				improveScheme && this.toggleModalVisibile();
			},
			/**
			 * 获取相同key 的新数组
			 * @param {Array} list 原数组
			 * @param {String} type 类型(如 do、check)
			 */
			getComList(list, type) {
				let newList = [];
				list.map(item => {
					if (type === 'do') {
						newList.push({
							record: item.taskDoProcess || '', // 记录内容
							date: item.taskDoPlan || '' // 计划日期
						});
					} else if (type === 'check') {
						newList.push({
							record: item.taskCheckProcess || '', // 记录过程
							date: item.taskCheckPlan || '', // 计划日期
							filePath: item.taskCheckEffect ? item.taskCheckEffect.split(',') :
							[] // 改善效果(图片)
						});
					}
				});
				return newList;
			}
		},
		components: {
			uniSegmentedControl,
			oneTextarea,
			doAndCheck,
			modal
		}
	}
</script>

<style lang="less" scoped>
	.pdca-page {
		height: 100%;

		.content {
			height: calc(100vh - 125rpx);
			.scroll-y {
				height: 100%;
			}
			.bottomBtn {
				position: fixed;
				bottom: 0;
				width: 100%;
				height: 75rpx;
				line-height: 75rpx;
				text-align: center;
				font-size: 22.5rpx;
				font-family: SourceHanSansCN-Normal, SourceHanSansCN;
				font-weight: 400;
				color: #FFFFFF;
				background: #3377FF;
			}
		}
	}
</style>