148 lines
5.0 KiB
Vue
148 lines
5.0 KiB
Vue
<template>
|
||
<view class="yd-page-container pb-[80rpx]">
|
||
<!-- 顶部导航栏 -->
|
||
<wd-navbar
|
||
title="审批详情"
|
||
left-arrow placeholder safe-area-inset-top fixed
|
||
@click-left="handleBack"
|
||
/>
|
||
|
||
<!-- 区域：流程信息（基本信息） -->
|
||
<view class="relative mx-24rpx mt-24rpx overflow-hidden rounded-16rpx bg-white">
|
||
<!-- 审批状态图标（盖章效果） -->
|
||
<image
|
||
v-if="processInstance?.status !== undefined"
|
||
:src="getStatusIcon(processInstance?.status)"
|
||
class="absolute right-20rpx top-20rpx z-10 h-144rpx w-144rpx"
|
||
mode="aspectFit"
|
||
/>
|
||
<view class="p-24rpx">
|
||
<!-- 标题 -->
|
||
<view class="mb-16rpx pr-160rpx">
|
||
<text class="text-32rpx text-[#333] font-bold">{{ processInstance?.name }}</text>
|
||
</view>
|
||
<!-- 发起人信息 -->
|
||
<view class="flex items-center">
|
||
<view class="mr-12rpx h-64rpx w-64rpx flex items-center justify-center rounded-full bg-[#1890ff] text-white">
|
||
{{ processInstance?.startUser?.nickname?.[0] || '?' }}
|
||
</view>
|
||
<view>
|
||
<text class="text-28rpx text-[#333]">{{ processInstance?.startUser?.nickname }}</text>
|
||
<text v-if="processInstance?.startUser?.deptName" class="ml-8rpx text-24rpx text-[#999]">
|
||
{{ processInstance?.startUser?.deptName }}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
<!-- 提交时间 -->
|
||
<view class="mt-16rpx text-24rpx text-[#999]">
|
||
提交于 {{ formatDateTime(processInstance?.startTime) }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 区域：审批详情（表单） -->
|
||
<FormDetail :process-definition="processDefinition" :process-instance="processInstance" />
|
||
|
||
<!-- 区域：审批进度 -->
|
||
<view class="mx-24rpx mt-24rpx rounded-16rpx bg-white">
|
||
<view class="p-24rpx">
|
||
<view class="mb-16rpx flex">
|
||
<text class="text-28rpx text-[#333] font-bold">审批进度</text>
|
||
</view>
|
||
<!-- 流程时间线 -->
|
||
<ProcessInstanceTimeline :activity-nodes="activityNodes" />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- TODO 待开发：区域：流程评论 -->
|
||
|
||
<!-- 区域：底部操作栏 -->
|
||
<ProcessInstanceOperationButton ref="operationButtonRef" />
|
||
</view>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import type { ApprovalNodeInfo, ProcessDefinition, ProcessInstance } from '@/api/bpm/processInstance'
|
||
import type { Task } from '@/api/bpm/task'
|
||
import { onMounted, ref } from 'vue'
|
||
import { useToast } from 'wot-design-uni'
|
||
import { getApprovalDetail } from '@/api/bpm/processInstance'
|
||
import { getTaskListByProcessInstanceId } from '@/api/bpm/task'
|
||
import { navigateBackPlus } from '@/utils'
|
||
import { BpmProcessInstanceStatus } from '@/utils/constants'
|
||
import { formatDateTime } from '@/utils/date'
|
||
import FormDetail from './components/form-detail.vue'
|
||
import ProcessInstanceOperationButton from './components/operation-button.vue'
|
||
import ProcessInstanceTimeline from './components/time-line.vue'
|
||
|
||
const props = defineProps<{
|
||
id: string // 流程实例的编号
|
||
taskId?: string // 任务编号
|
||
}>()
|
||
|
||
definePage({
|
||
style: {
|
||
navigationBarTitleText: '',
|
||
navigationStyle: 'custom',
|
||
},
|
||
})
|
||
|
||
const toast = useToast()
|
||
const processInstance = ref<ProcessInstance>()
|
||
const processDefinition = ref<ProcessDefinition>()
|
||
const tasks = ref<Task[]>([])
|
||
|
||
const activityNodes = ref<ApprovalNodeInfo[]>([]) // 审批节点信息
|
||
|
||
const operationButtonRef = ref() // 操作按钮组件 ref
|
||
|
||
/** 返回上一页 */
|
||
function handleBack() {
|
||
navigateBackPlus('/pages/bpm/index')
|
||
}
|
||
|
||
/** 获取状态图标 */
|
||
function getStatusIcon(status?: number): string {
|
||
// 状态映射： 1-审批中, 2-审批通过, 3-审批不通过, 4-已取消. -1 未开始不会出现
|
||
const iconMap: Record<number, string> = {
|
||
[BpmProcessInstanceStatus.RUNNING]: '/static/my-icons/bpm/bpm-running.svg', // 待审批
|
||
[BpmProcessInstanceStatus.APPROVE]: '/static/my-icons/bpm/bpm-approve.svg', // 审批通过
|
||
[BpmProcessInstanceStatus.REJECT]: '/static/my-icons/bpm/bpm-reject.svg', // 审批不通过
|
||
[BpmProcessInstanceStatus.CANCEL]: '/static/my-icons/bpm/bpm-cancel.svg', // 已取消
|
||
}
|
||
return iconMap[status ?? 1]
|
||
}
|
||
|
||
/** 加载流程实例 */
|
||
async function loadProcessInstance() {
|
||
const data = await getApprovalDetail({
|
||
processInstanceId: props.id,
|
||
taskId: props.taskId,
|
||
})
|
||
if (!data || !data.processInstance) {
|
||
toast.show('查询不到审批详情信息')
|
||
return
|
||
}
|
||
processInstance.value = data.processInstance
|
||
processDefinition.value = data.processDefinition
|
||
// 获取审批节点，显示 Timeline 的数据
|
||
activityNodes.value = data.activityNodes
|
||
|
||
operationButtonRef.value?.init(data.processInstance, data.todoTask)
|
||
}
|
||
|
||
/** 加载任务列表 */
|
||
async function loadTasks() {
|
||
tasks.value = await getTaskListByProcessInstanceId(props.id)
|
||
}
|
||
|
||
/** 初始化 */
|
||
onMounted(async () => {
|
||
if (!props.id) {
|
||
toast.show('参数错误')
|
||
return
|
||
}
|
||
await Promise.all([loadProcessInstance(), loadTasks()])
|
||
})
|
||
</script>
|