aizuda-web-vue3/src/views/approve/components/approvedContent.vue

<template>
	<div class="flow-detail-content">
		<div class="flow-detail-container">
			<!-- 值为空 -->
			<div v-if="!currentTaskRow.instanceId" class="flow-empty-detail-box">
				<el-empty description="暂无数据" />
			</div>

			<!-- 值不为空 -->
			<template v-if="currentTaskRow.instanceId">
				<!-- 1、头部信息 -->
				<div class="flow-status-stamp">
					<div class="flow-stamp-container">
						<FlowStatusStamp :status="currentTaskRow.instanceState" />
					</div>
				</div>

				<div class="flow-header-box">
					<div class="flow-no">编号：{{ currentTaskRow.instanceId }}</div>
					<div class="action-area">
						<div class="action-item"></div>
					</div>
				</div>
				<!-- 2、内容体 -->
				<div class="flow-detail-box">
					<!--头部-->
					<div class="header-box">
						<div class="summary-info">
							<div class="title">{{ currentTaskRow.processName }}</div>
							<FlowStatusTag :status="0" />
						</div>
						<div class="initiator-info">
							<FlowNodeAvatar :name="currentTaskRow.createBy" />
							<div class="begin-time">{{ currentTaskRow.createTime }} 提交</div>
						</div>
					</div>
					<div class="area-divider"></div>
					<div class="scroll-wrap">
						<!-- 表单 -->
						<div v-loading="validateForm.loading" class="form-wrap">
							<FormCreate v-show="validateForm.rule.length" v-model:api="validateForm.api" :option="validateForm.option" :rule="validateForm.rule" />
							<LeNoData v-if="!validateForm.rule.length" message="表单无数据" />
						</div>

						<div class="area-divider"></div>

						<!--审批流-->
						<el-timeline style="margin-left: 50px">
							<el-timeline-item
								v-for="active in activeData"
								:key="active.id"
								hollow
								:timestamp="active.id ? formatTimestamp(new Date(active.createTime)) : ''"
							>
								<template #dot>
									<FlowTypeDot :status="active.id ? 0 : 1" :type="active.taskType" :name="active.createBy" />
								</template>
								<div v-show="active.type === 0" class="timeline-box flex-1">
									<span style="color: #86909c; display: block; margin-bottom: 3px; padding-left: 4px">评论</span>
									<div class="flex flex-align-center">
										<div class="timeline-box-user flex-1">
											<span style="padding-left: 4px">{{ active.createBy }}</span>
											<div class="comment">
												<div class="comment-content">{{ active.content }}</div>
											</div>
										</div>
										<span class="timeline-box-date">{{ formatTimestamp(active.finishTime) }}</span>
									</div>
								</div>

								<div v-show="active.type !== 0" class="timeline-box flex-1">
									<span style="color: #86909c; display: block; margin-bottom: 3px; padding-left: 4px">{{ active.taskName }}</span>
									<div class="flex flex-align-center">
										<div class="timeline-box-user flex-1">
											<span v-if="active.id" style="padding-left: 4px">{{ active.createBy }}</span>
											<div style="display: flex; gap: 6px; margin-top: 3px">
												<FlowNodeAvatar v-for="nodeUser in JSON.parse(active.content).nodeUserList" :key="nodeUser.id" :name="nodeUser.name" />
												<FlowNodeAvatar v-for="nodeRole in JSON.parse(active.content).nodeRoleList" :key="nodeRole.id" :name="nodeRole.name" />
											</div>
											<div v-if="JSON.parse(active.content).content" class="comment">
												<div class="comment-content">{{ JSON.parse(active.content).content }}</div>
											</div>
										</div>
										<span class="timeline-box-date">{{ formatTimestamp(active.finishTime) }}</span>
									</div>
								</div>
							</el-timeline-item>
						</el-timeline>
					</div>
				</div>

				<!-- 3、底部操作按钮  审批拒绝 强制终止不展示操作按钮-->
				<!--
            1、已审批的任务不显示操作按钮
            2、我的申请显示撤回按钮
            3、认领任务显示认领按钮
            4、我收到的任务显示评论
            -->
				<div v-if="currentTaskRow.instanceState === 0" class="flow-actions">
					<el-button :icon="ChatLineSquare" @click="openComment('reviewVisible', 'review')">评论</el-button>
					<template v-if="currentTaskType !== 'myReceived' || currentTaskType !== 'approved'">
						<el-button
							v-if="currentTaskType === 'pendingApproval'"
							:icon="Check"
							type="primary"
							@click="openComment('consentOrRefuseVisible', 'agree')"
							>同意</el-button
						>
						<el-button
							v-if="currentTaskType === 'pendingApproval'"
							:icon="Close"
							type="danger"
							@click="openComment('consentOrRefuseVisible', 'reject')"
							>拒绝</el-button
						>
						<el-button v-if="currentTaskType === 'myApplication'" :icon="Close" @click="openComment('reviewVisible', 'revoke')">撤回</el-button>
						<el-button v-if="currentTaskType === 'pendingClaim'" :icon="Close" @click="claimTaskEv">认领</el-button>
						<el-dropdown v-if="currentTaskType === 'pendingApproval'" style="margin-left: 12px">
							<el-button :icon="More">更多</el-button>
							<template #dropdown>
								<el-dropdown-menu>
									<el-dropdown-item @click.native="openComment('deliverToReviewVisible')">
										<el-icon><DArrowLeft /></el-icon>
										转交
									</el-dropdown-item>
									<el-dropdown-item @click.native="openComment('rollbackVisible')">
										<el-icon><Switch /></el-icon>
										回退
									</el-dropdown-item>
									<el-dropdown-item @click.native="openComment('addSignVisible')">
										<el-icon><Plus /></el-icon>
										加签
									</el-dropdown-item>
									<el-dropdown-item @click.native="openComment('loseSignVisible')">
										<el-icon><Minus /></el-icon>
										减签
									</el-dropdown-item>
								</el-dropdown-menu>
							</template>
						</el-dropdown>
					</template>
				</div>
			</template>
		</div>

		<!-- 评论弹窗-->
		<review-dialog
			v-if="reviewVisible"
			v-model="reviewVisible"
			:instance-id="currentTaskRow.instanceId"
			:task-id="taskId"
			:current-type="currentType"
			@success-cb="closeDetailEv"
		></review-dialog>

		<!-- 加签弹窗 -->
		<add-sign-dialog v-if="addSignVisible" v-model="addSignVisible" :task-id="taskId" @success-cb="closeDetailEv"></add-sign-dialog>

		<!-- 同意或拒绝弹窗 -->
		<consent-or-refuse-dialog
			v-if="consentOrRefuseVisible"
			v-model="consentOrRefuseVisible"
			:task-id="taskId"
			:current-type="currentType"
			:form-data="currentFormData"
			@success-cb="closeDetailEv"
		></consent-or-refuse-dialog>

		<!-- 转交审批弹窗 -->
		<deliver-to-review-dialog
			v-if="deliverToReviewVisible"
			v-model="deliverToReviewVisible"
			:task-id="taskId"
			@success-cb="closeDetailEv"
		></deliver-to-review-dialog>

		<!-- 减签弹窗 -->
		<lose-sign-dialog v-if="loseSignVisible" v-model="loseSignVisible" :task-id="taskId" @success-cb="closeDetailEv"></lose-sign-dialog>

		<!-- 回退弹窗 -->
		<rollback-dialog v-if="rollbackVisible" v-model="rollbackVisible" :task-id="taskId" @success-cb="closeDetailEv"></rollback-dialog>
	</div>
</template>

<script setup>
import useTaskProcessStore from '@/store/modules/taskProcess'
import { computed, ref, onMounted, nextTick, watch } from 'vue'
import FlowStatusStamp from '@/components/Flow/FlowStatusStamp.vue'
import FlowStatusTag from '@/components/Flow/FlowStatusTag.vue'
import FlowNodeAvatar from '@/components/Flow/FlowNodeAvatar.vue'
import FlowTypeDot from '@/components/Flow/FlowTypeDot.vue'
import { ChatLineSquare, Check, Close, Switch, DArrowLeft, Plus, Minus, More } from '@element-plus/icons-vue'
import { processTaskApprovalInfo, processClaimTaskApi } from '@/api/flow/processTask'
import { formatTimestamp } from '@/utils/datetime'
import ReviewDialog from './reviewDialog'
import AddSignDialog from './addSignDialog'
import ConsentOrRefuseDialog from './consentOrRefuseDialog'
import DeliverToReviewDialog from './deliverToReviewDialog'
import LoseSignDialog from './loseSignDialog'
import RollbackDialog from './rollbackDialog'
import viewForm from '@/utils/form'
import { storeToRefs } from 'pinia'
import { ElMessage, ElMessageBox } from 'element-plus'

defineProps({
	/**
	 * pendingApproval 待审批
	 * myApplication 我的申请
	 * myReceived 我收到的
	 * pendingClaim 认领任务
	 * approved 已审批
	 */
	currentTaskType: {
		type: String,
		default: ''
	}
})

// store值
const taskProcessInfo = useTaskProcessStore()
const { currentTaskRow } = storeToRefs(taskProcessInfo)

// 各种操作弹窗显示隐藏 start
const reviewVisible = ref(false)
const addSignVisible = ref(false)
const consentOrRefuseVisible = ref(false)
const deliverToReviewVisible = ref(false)
const loseSignVisible = ref(false)
const rollbackVisible = ref(false)
// 各种操作弹窗显示隐藏 end
const activeData = ref([])
const currentType = ref(null)
const currentFormData = ref({})
// 当前form 表单数据字符串
let cur_processForm_str = '[]'
const taskId = computed(() => {
	return currentTaskRow.value.taskId || ''
})

const FormCreate = viewForm.$form()
const validateForm = ref({
	api: {},
	option: {
		submitBtn: false
	},
	rule: [],
	loading: false
})

/**
 * 详情按钮各个操作弹窗
 * @param visibleType 评论 拒绝 同意等
 */
const openComment = async (visibleType, item) => {
	switch (visibleType) {
		case 'reviewVisible':
			currentType.value = item
			reviewVisible.value = !reviewVisible.value
			break
		case 'addSignVisible':
			addSignVisible.value = !addSignVisible.value
			break
		case 'consentOrRefuseVisible':
			currentFormData.value = {}
			// 点击同意
			let bool = true
			if (item === 'agree') {
				const api = validateForm.value.api
				bool = await api.validate((valid, fail) => {
					if (valid) {
						// 表单验证通过
						const values = api.formData()
						const processForm = JSON.parse(cur_processForm_str)
						processForm.forEach(v => {
							// 填写的数据存储(local_: 本地数据处理标识)
							v.local_value = values[v.field]
						})
						console.warn(processForm, 'processForm')
						// 流程表单JSON内容 & local_value 保存
						currentFormData.value = { processForm: JSON.stringify(processForm) }
					}
				})
			}
			if (!bool) return
			currentType.value = item
			consentOrRefuseVisible.value = !consentOrRefuseVisible.value
			break
		case 'deliverToReviewVisible':
			deliverToReviewVisible.value = !deliverToReviewVisible.value
			break
		case 'loseSignVisible':
			loseSignVisible.value = !loseSignVisible.value
			break
		case 'rollbackVisible':
			rollbackVisible.value = !rollbackVisible.value
			break
	}
}

/**
 * 获取taskId对应的详情
 */
const getTaskDetail = () => {
	const cur = currentTaskRow.value || {}
	// 提交的表单 数据展示
	validateForm.value.loading = true
	processTaskApprovalInfo({
		taskId: cur.taskId,
		instanceId: cur.instanceId,
		instanceState: cur.instanceState
	})
		.then(data => {
			activeData.value = data.processApprovals
			console.log(data, 'data.......')
			// validateForm.value.origin = data
			try {
				/*descItemsData.value.list = JSON.parse(data.formContent).map(item => {
					const showLabel = item.title
					let showValue = item.local_value
					const options = item.options
					if (Array.isArray(options) && showValue !== undefined) {
						if (Array.isArray(showValue)) {
							showValue = showValue.reduce(val => {
								const cur = options.find(option => option.value === val)
								return cur?.label || val
							}, [])
						} else {
							const cur = options.find(option => option.value === showValue)
							showValue = cur?.label || showValue
						}
					}
					return {
						showLabel,
						showValue
					}
				})*/
				const forms = JSON.parse(data.formContent)
				cur_processForm_str = data.formContent
				if (Array.isArray(forms)) {
					validateForm.value.rule = forms
					const api = validateForm.value.api
					api.setValue(
						forms.reduce((obj, item) => {
							obj[item.field] = item.local_value
							return obj
						}, {})
					)
					api.nextTick(() => {
						// 是否有编辑权限 操作
						api.disabled(false /*true*/)
					})
				}
			} catch (e) {
				console.error('解析 descItems 数据出现问题', e)
				// descItemsData.value.list = []
				validateForm.value.rule = []
			}
		})
		.finally(() => {
			validateForm.value.loading = false
		})
}

/**
 * 详情页面操作按钮回调
 */
const closeDetailEv = () => {
	ElMessage({
		message: '操作成功',
		type: 'success'
	})
	setTimeout(() => {
		// 如果这里有表单，是否要把所有表单的内容进行存储,存储完毕后，才能关闭这个详情，刷新左侧的列表 todo
		if (currentType.value === 'review') {
			// 评论按钮，不要刷新左侧的列表，只更新右侧的详情即可
			getTaskDetail()
			return
		}
		taskProcessInfo.refresh = true
		taskProcessInfo.setCurrentTaskRow({})
	}, 1000)
}

/** 认领任务 **/
const claimTaskEv = async () => {
	ElMessageBox.confirm('确定认领当前审批流程？', '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
		buttonSize: 'default'
	})
		.then(async () => {
			const { data } = await processClaimTaskApi(currentTaskRow.value.taskId)
			ElMessage({
				message: data ? '执行成功' : '执行失败',
				type: data ? 'success' : 'error'
			})
			if (!data) return
			closeDetailEv()
		})
		.catch(() => {
			console.log('取消')
		})
}

/**
 * 监听同级子组件的instanceId的值变化 这里可能也有实例Id
 * 1、监听instanceId的值变化，如果值有变化，则重新获取审批详情
 * 2、如果instanceId没有值，则不请求接口，暂时暂无数据img
 */
watch(
	() => currentTaskRow.value.instanceId,
	(nValue, oValue) => {
		if (!nValue) return
		nextTick(() => {
			getTaskDetail()
		})
	}
)
</script>

<style scoped lang="scss">
.flow-detail-content {
	height: 100%;
	overflow: hidden;
	background: var(--el-bg-color);
	border-radius: 6px;
	flex: auto;
	.flow-detail-container {
		display: flex;
		flex-direction: column;
		position: relative;
		height: 100%;
		overflow: hidden;
	}

	// 通过、不通过样式
	.flow-status-stamp {
		position: absolute;
		right: 10px;
		top: 10px;
		z-index: 99;
	}

	// 头部
	.flow-header-box {
		font-weight: 400;
		font-size: 13px;
		border-bottom: 1px solid var(--el-border-color);
		padding: 0 20px;
		height: 39px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: var(--el-color-info);
		.action-area {
			display: flex;
			gap: 4px;
			.action-item {
				cursor: pointer;
				padding: 4px;
				border-radius: 6px;
				width: fit-content;
				height: fit-content;
			}
		}
	}

	// 内容体
	.flow-detail-box {
		//height: calc(100% - 92px);
		//overflow: hidden;
		//overflow-y: auto;
		flex: 1;
		min-height: 0;
		padding: 0 20px;
		display: flex;
		flex-direction: column;
		height: 100%;
		.header-box {
			display: flex;
			flex-direction: column;
			justify-content: center;
			// padding-top: 20px;
			.summary-info {
				display: flex;
				align-items: center;
				padding-top: 10px;
				font-size: 24px;
				.title {
					font-family: PingFangSC-Semibold, PingFang SC;
					color: var(--el-text-color-primary);
				}
			}
			.initiator-info {
				display: flex;
				align-items: center;
				margin-top: 16px;
				.begin-time {
					margin-left: 16px;
					font-weight: 350;
					color: var(--el-text-color-placeholder);
					font-size: 13px;
					-webkit-user-select: none;
					user-select: none;
				}
			}
		}
		.area-divider {
			border-bottom: 1px solid var(--el-border-color);
			margin: 20px 0;
			//position: relative;
		}
		.scroll-wrap {
			overflow: hidden;
			overflow-y: auto;
			flex: 1;
		}
	}

	// 底部
	.flow-actions {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		height: 52px;
		//border-top: 1px solid var(--color-neutral-3);
		border-top: 1px solid var(--el-border-color-light);
		background: var(--el-bg-color);
		padding: 0 20px;
	}
}

.comment-content {
	user-select: none;
	margin-top: 4px;
	padding: 8px;
	border-radius: 4px;
	background-color: var(--el-bg-color-page);
}

.timeline-box {
	margin-left: 5px;
}

:deep(.el-timeline-item__timestamp) {
	margin-left: 6px;
}
</style>