Web_TracerMethodology/pages/mission-details/mission-details.vue

<template>
	<view class="mission-details-page">
		<scroll-view class="scroll-y" scroll-y="true">
			<list-item :isDetails="true" :task="missionDetails" />
			<view class="mission-plan">
				<view class="label">
					<text>改善进度</text>
				</view>
				<view class="plan-box">
					<template v-for="(item, i) in missionDetails.pfmTaskCirculationList || []">
						<view class="row" :key="i">
							<view class="col">
								<image class="plan-icon"
									:src="`/static/${i === taskStepLength ? 'check-radio' : 'check-no'}.png`">
								</image>
								<view class="line" v-show="i != taskStepLength"></view>
							</view>
							<view class="col">
								<view class="title">
									<text>{{ getContext(item, false, 'row1') }}</text>
								</view>
								<view class="sub-box">
									<view class="sub-title">
										<text>{{ getContext(item, false, 'row2') }}</text>
									</view>
									<view class="sub-title">
										<text>{{ item.recordTime }}</text>
									</view>
								</view>
								<template v-if="getContext(item, true, 'selectDetails')">
									<view class="link-view"
										@click="goToDetails(item, getContext(item, true, 'selectDetails'))">
										<text>{{ getContext(item, true, 'selectDetails').name }}</text>
										<image class="blue-arr" src="/static/blue-arrow.png"></image>
									</view>
								</template>
							</view>
						</view>
						<view :class="['btn-group', taskBtn.length === 1 ?'btn-one' : '']" v-if="missionDetails.buttonDisplayFlag == 1
              && missionDetails.pfmTaskCirculationList
              && i == missionDetails.pfmTaskCirculationList.length - 1">
							<template v-for="(btn, i1) in taskBtn">
								<tm-button :key="i1"
									:type="taskBtn.length === 1 ? 'default' : ( i1 === 0 ? 'pramary' : 'default')"
									:btnText="btn.name" @btnClick="clickBtn(item, btn)" />
							</template>
						</view>
					</template>
				</view>
			</view>
		</scroll-view>
		<view class="bottomBtn" @click="goBack">{{botBtnText}}</view>
	</view>
</template>

<script>
	// 改善任务
	import {
		mapState
	} from "vuex";
	import listItem from '../mission/components/list-item.vue';
	import taskTypeList from './setting.js';
	import pdcaSetting from './pdcaSetting.js'

	export default {
		computed: {
			...mapState({
				missionDetails: state => state.mission.missionDetails
			}),
			// 进度长度
			taskStepLength() {
				return (this.missionDetails.pfmTaskCirculationList || []).length - 1;
			},
			// 获取底部按钮
			taskBtn() {
				const {
					buttonDisplayFlag,
					pfmTaskCirculationList,
					taskType,
					checkResult
				} = this.missionDetails;
				if (buttonDisplayFlag == 1 && pfmTaskCirculationList && pfmTaskCirculationList.length > 0) {
					let task = null;
					if (taskType == 1 || taskType == 3) { // 状态为1, 和3比较特殊,需要再比较checkResult
						task = taskTypeList.find(item => (item.taskType == taskType && item.checkResult == checkResult));
					} else {
						task = taskTypeList.find(item => item.taskType == taskType);
					}
					return task ? task.btnList : []
				} else {
					return [];
				}
			}
		},
		data() {
			return {
				// 任务id
				taskId: '',
				botBtnText: '',
				// 跳转详情信息
				linkTaskDetails: null
			}
		},
		onLoad(option) {
			const {
				taskId,
				pathName
			} = option;
			this.taskId = taskId;
		
			this.botBtnText = pathName == 'missionDetails' ? '返回改善任务列表' : '返回改善消息列表'
		},
		created() {
			this.getMissionDetails();
		},
		methods: {
			goBack() {
				window.history.back();
			},
			// 获取改善任务列表
			getMissionDetails(data) {
				this.$store.dispatch({
					type: 'mission/commActions',
					payload: {
						key: "getMissionDetails",
						data: {
							taskId: this.taskId
						}
					}
				});
			},
			// 点击按钮
			clickBtn(currentInfo, btnInfo) {
				if (btnInfo.componentName) { // 有组件名,则跳转页面
					if (btnInfo.componentName === 'pdca') {
						const {
							taskType,
							needApproveFlag
						} = this.missionDetails;
						// needApproveFlag: true 需要审核（p）只显示p
						if (taskType === 8) {
							btnInfo = {
								...btnInfo,
								...pdcaSetting['pdcaBtnInfo'],
								pDisabled: true // plan内容禁用
							};
						} else if (taskType === 11) {
							btnInfo = {
								...btnInfo,
								...pdcaSetting[needApproveFlag ? 'pdcaBtnInfo' : 'pdcaBtnInfo2'],
								pDisabled: needApproveFlag // plan内容是否禁用取决于needApproveFlag
							};
						} else if (taskType === 13) { // 制定改善方案p中（需要回显暂存过的数据）
							btnInfo = {
								...btnInfo,
								...pdcaSetting['editPBtnInfo'],
								isEdit: true
							};
						} else if (taskType === 15) { // 制定改善方案pdca中（需要回显暂存过的数据）
							btnInfo = {
								...btnInfo,
								...pdcaSetting['editPdcaBtnInfo'],
								isEdit: true,
								pDisabled: needApproveFlag
							};
						} else {
							// taskType === 4 || taskType === 6 || taskType === 7 || taskType === 9
							btnInfo = {
								...btnInfo,
								...pdcaSetting[needApproveFlag ? 'pBtnInfo' : 'pdcaBtnInfo2']
							};
						}
					}
					uni.navigateTo({
						url: `/pages/mission-action/mission-action?details=${encodeURIComponent(JSON.stringify({...currentInfo, ...btnInfo}))}`
					});
				} else { // 直接调接口
					let requestParams = {};
					btnInfo.params.map(item => {
						if (item.valueKey) {
							requestParams[item.paramsKey] = (
								item.isOutvalueKey ?
								this.missionDetails :
								currentInfo
							)[item.valueKey];
						} else if (item.value) {
							requestParams[item.paramsKey] = item.value;
						}
					})
					this.comTaskCirculation(requestParams);
				}
			},
			// 查看详情
			goToDetails(currentInfo, detailInfo) {
				if (detailInfo.navigateUrl) { // 跳转其他页面(如查核项详情) 目前hasAnyData都为false
					const {
						navigateUrl,
						key,
						isOutvalueKey,
						hasAnyData
					} = detailInfo;
					uni.navigateTo({
						url: `${detailInfo.navigateUrl}?id=${(isOutvalueKey ? this.missionDetails : currentInfo)[detailInfo.key]}&checkPointId=${this.missionDetails.checkPointId}`
					});
				} else {
					uni.navigateTo({
						url: `/pages/mission-action/mission-action?details=${encodeURIComponent(JSON.stringify({...currentInfo, ...detailInfo}))}`
					});
				}
			},
			/***
			 *  解析显示对应的内容
			 *  @param {Object} obj 当前遍历的任务
			 *  @param {Boolean} isLink 是否需要跳转页面（查看详情）
			 *  @param {String} rowKey 任务流程中的key
			 */
			getContext(obj, isLink, rowKey) {
				let currentTypeTask = null;
				if (obj.taskType == 1) {
					const {
						checkResult
					} = this.missionDetails;
					currentTypeTask = taskTypeList.find(item => (item.taskType == obj.taskType && item.checkResult ==
						checkResult)) || {};
				} else {
					currentTypeTask = taskTypeList.find(item => item.taskType == obj.taskType) || {};
				}
				if (isLink) {
					return currentTypeTask[rowKey];
				} else {
					const {
						hasJoin,
						name,
						key,
						isOutvalueKey
					} = currentTypeTask[rowKey] || {};
					if (hasJoin) { // 需要删除*并替换
						return name ? name.replace(/x/g, (isOutvalueKey ? this.missionDetails : obj)[key] || '') : ''
					} else {
						return name || '';
					}
				}
			},
			// 公共改善任务接口
			comTaskCirculation(data) {
				this.$store.dispatch({
					type: 'mission/commActions',
					payload: {
						key: "comTaskCirculation",
						data
					}
				}).then(data1 => {
					if (data1) {
						this.getMissionDetails();
					}
				});
			}
		},
		components: {
			listItem
		}
	}
</script>

<style lang="less">
	.mission-details-page {
		height: 100%;
		padding-top: 15rpx;

		.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;
		}

		.scroll-y {
			height: 100%;
            padding-bottom: 87.5rpx;
			.mission-plan {

				.label {
					margin-top: 25rpx;
					margin-bottom: 15rpx;
					height: 20rpx;
					line-height: 20rpx;
					padding-left: 25rpx;

					text {
						font-size: 20rpx;
						color: #666F80;
					}
				}

				.plan-box {
					padding: 25rpx;
					background-color: #fff;

					.row {
						display: flex;

						.col {

							.title {
								display: flex;
								align-items: center;
								margin-bottom: 15rpx;
								height: 25rpx;

								>text {
									font-size: 22.5rpx;
									color: #292C33;
								}
							}

							.sub-box {
								display: flex;
								flex-direction: column;

								.sub-title {
									display: flex;
									align-items: center;
									margin-bottom: 15rpx;
									height: 20rpx;

									&:last-child {
										margin-bottom: 34.37rpx;
									}

									>text {
										font-size: 20rpx;
										color: #666E80;
									}
								}
							}

							&:first-child {
								display: flex;
								flex-direction: column;
								align-items: center;
								margin-right: 15rpx;
								width: 25rpx;

								.plan-icon {
									margin-bottom: 17.5rpx;
									width: 25rpx;
									height: 25rpx;
								}

								.line {
									width: 5rpx;
									height: 75rpx;
									background-color: #E6EAF2;
								}
							}

							&:last-child {
								position: relative;
								flex: 1;

								.link-view {
									position: absolute;
									top: 0;
									right: 0;

									>text {
										font-size: 17.5rpx;
										color: #3377FF;
									}

									.blue-arr {
										margin-left: 10rpx;
										width: 8.12rpx;
										height: 15.62rpx;
									}
								}
							}
						}
					}

					.btn-group {
						display: flex;
						justify-content: space-between;
						padding: 0 25rpx;
					}

					.btn-one {
						justify-content: center;
					}
				}
			}
		}
	}
</style>