Merge branch 'master' of http://pqmcc.com:3000/frontend/admin-sjzx
This commit is contained in:
@@ -34,7 +34,6 @@ const bpmnControlForm = ref({
|
||||
})
|
||||
const activityList = ref([]) // 任务列表
|
||||
const getMapList = () => {
|
||||
console.log('执行力');
|
||||
if (props.id) {
|
||||
nextTick(()=>{
|
||||
getTaskListByReturn(props.id).then(res => {
|
||||
|
||||
@@ -1,98 +1,97 @@
|
||||
<template>
|
||||
<el-card v-loading="loading" class="box-card">
|
||||
<template #header>
|
||||
<span class="el-icon-picture-outline">审批记录</span>
|
||||
</template>
|
||||
<el-col :offset="3" :span="17">
|
||||
<div class="block">
|
||||
<el-timeline>
|
||||
<el-timeline-item
|
||||
v-if="processInstance.endTime"
|
||||
:type="getProcessInstanceTimelineItemType(processInstance)"
|
||||
>
|
||||
<p style="font-weight: 700">
|
||||
结束流程：在 {{ formatDate(processInstance?.endTime) }} 结束
|
||||
<el-tag :type='getTaskTimelineItemType(processInstance.status)'>
|
||||
{{getTaskNameItemType(processInstance.status)}}
|
||||
</el-tag>
|
||||
</p>
|
||||
</el-timeline-item>
|
||||
<el-timeline-item
|
||||
v-for="(item, index) in tasks"
|
||||
:key="index"
|
||||
:type="getTaskTimelineItemType(item)"
|
||||
>
|
||||
<p style="font-weight: 700;margin: 8px">
|
||||
审批任务：{{ item.name }}
|
||||
<el-tag :type='getTaskTimelineItemType(item.status)'>
|
||||
{{getTaskNameItemType(item.status)}}
|
||||
</el-tag>
|
||||
<el-button
|
||||
class="ml-10px"
|
||||
v-if="!isEmpty(item.children)"
|
||||
@click="openChildrenTask(item)"
|
||||
size="small"
|
||||
>
|
||||
<Icon icon="ep:memo" /> 子任务
|
||||
</el-button>
|
||||
<el-button
|
||||
class="ml-10px"
|
||||
size="small"
|
||||
v-if="item.formId > 0"
|
||||
@click="handleFormDetail(item)"
|
||||
>
|
||||
<Icon icon="ep:document" /> 查看表单
|
||||
</el-button>
|
||||
</p>
|
||||
<el-card :body-style="{ padding: '10px' }">
|
||||
<label v-if="item.assigneeUser" style="margin-right: 30px; font-weight: normal">
|
||||
审批人：{{ item.assigneeUser.name }}
|
||||
<el-tag size="small" type="info">{{ item.assigneeUser.deptName }}</el-tag>
|
||||
</label>
|
||||
<label v-if="item.createTime" style="font-weight: normal">创建时间：</label>
|
||||
<label style="font-weight: normal; color: #8a909c">
|
||||
{{ formatDate(item?.createTime) }}
|
||||
</label>
|
||||
<label v-if="item.endTime" style="margin-left: 30px; font-weight: normal">
|
||||
审批时间：
|
||||
</label>
|
||||
<label v-if="item.endTime" style="font-weight: normal; color: #8a909c">
|
||||
{{ formatDate(item?.endTime) }}
|
||||
</label>
|
||||
<label v-if="item.durationInMillis" style="margin-left: 30px; font-weight: normal">
|
||||
耗时：
|
||||
</label>
|
||||
<label v-if="item.durationInMillis" style="font-weight: normal; color: #8a909c">
|
||||
{{ formatPast2(item?.durationInMillis) }}
|
||||
</label>
|
||||
<p v-if="item.reason"> 审批建议：{{ item.reason }} </p>
|
||||
</el-card>
|
||||
</el-timeline-item>
|
||||
<el-timeline-item type="success">
|
||||
<p style="font-weight: 700">
|
||||
发起流程：【{{ processInstance.startUser?.name }}】在
|
||||
{{ formatDate(processInstance?.startTime) }} 发起【 {{ processInstance.name }} 】流程
|
||||
</p>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-card>
|
||||
|
||||
<!-- 弹窗：子任务 -->
|
||||
<TaskSignList ref="taskSignListRef" @success="refresh" />
|
||||
<!-- 弹窗：表单 -->
|
||||
<el-dialog title="表单详情" v-model="taskFormVisible" width="600">
|
||||
<form-create
|
||||
ref="fApi"
|
||||
v-model="taskForm.value"
|
||||
:option="taskForm.option"
|
||||
:rule="taskForm.rule"
|
||||
/>
|
||||
</el-dialog>
|
||||
<el-card v-loading="loading" class="box-card">
|
||||
<el-col :offset="3" :span="17">
|
||||
<div class="block">
|
||||
<el-timeline>
|
||||
<el-timeline-item
|
||||
v-if="processInstance.endTime"
|
||||
:type="getProcessInstanceTimelineItemType(processInstance)"
|
||||
>
|
||||
<p style="font-weight: 700">
|
||||
结束流程：在 {{ formatDate(processInstance?.endTime) }} 结束
|
||||
<el-tag :type="getTaskTimelineItemType(processInstance.status)">
|
||||
{{ getTaskNameItemType(processInstance.status) }}
|
||||
</el-tag>
|
||||
</p>
|
||||
</el-timeline-item>
|
||||
<div class="return_send" v-for="(item, index) in tasksList" :key="index">
|
||||
<!-- 最后一条不显示重新发起 -->
|
||||
<el-timeline-item type="success" v-if="index != 0">
|
||||
<p style="font-weight: 700">
|
||||
重新发起：【{{ item.processInstance.startUser?.name }}】在
|
||||
{{ formatDate(item?.createTime) }} 重新发起【 {{ item.processInstance.name }} 】流程
|
||||
</p>
|
||||
</el-timeline-item>
|
||||
<el-timeline-item :type="getTaskTimelineItemType(item)">
|
||||
<p style="font-weight: 700; margin: 8px">
|
||||
审批任务：{{ item.name }}
|
||||
<el-tag :type="getTaskTimelineItemType(item.status)">
|
||||
{{ getTaskNameItemType(item.status) }}
|
||||
</el-tag>
|
||||
<el-button
|
||||
class="ml-10px"
|
||||
v-if="!isEmpty(item.children)"
|
||||
@click="openChildrenTask(item)"
|
||||
size="small"
|
||||
>
|
||||
<Icon icon="ep:memo" />
|
||||
子任务
|
||||
</el-button>
|
||||
<el-button
|
||||
class="ml-10px"
|
||||
size="small"
|
||||
v-if="item.formId > 0"
|
||||
@click="handleFormDetail(item)"
|
||||
>
|
||||
<Icon icon="ep:document" />
|
||||
查看表单
|
||||
</el-button>
|
||||
</p>
|
||||
<el-card :body-style="{ padding: '10px' }">
|
||||
<label v-if="item.assigneeUser" style="margin-right: 30px; font-weight: normal">
|
||||
审批人：{{ item.assigneeUser.name }}
|
||||
<el-tag size="small" type="info">{{ item.assigneeUser.deptName }}</el-tag>
|
||||
</label>
|
||||
<label v-if="item.createTime" style="font-weight: normal">创建时间：</label>
|
||||
<label style="font-weight: normal; color: #8a909c">
|
||||
{{ formatDate(item?.createTime) }}
|
||||
</label>
|
||||
<label v-if="item.endTime" style="margin-left: 30px; font-weight: normal">
|
||||
审批时间：
|
||||
</label>
|
||||
<label v-if="item.endTime" style="font-weight: normal; color: #8a909c">
|
||||
{{ formatDate(item?.endTime) }}
|
||||
</label>
|
||||
<label v-if="item.durationInMillis" style="margin-left: 30px; font-weight: normal">
|
||||
耗时：
|
||||
</label>
|
||||
<label v-if="item.durationInMillis" style="font-weight: normal; color: #8a909c">
|
||||
{{ formatPast2(item?.durationInMillis) }}
|
||||
</label>
|
||||
<p v-if="item.reason">审批建议：{{ item.reason }}</p>
|
||||
</el-card>
|
||||
</el-timeline-item>
|
||||
</div>
|
||||
<el-timeline-item type="success">
|
||||
<p style="font-weight: 700">
|
||||
发起流程：【{{ tasksList[tasksList.length - 1]?.processInstance.startUser?.name }}】在
|
||||
{{ formatDate(tasksList[tasksList.length - 1]?.createTime) }} 发起【
|
||||
{{ tasksList[tasksList.length - 1]?.processInstance.name }} 】流程
|
||||
</p>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-card>
|
||||
<!-- 弹窗：子任务 -->
|
||||
<TaskSignList ref="taskSignListRef" @success="refresh" />
|
||||
<!-- 弹窗：表单 -->
|
||||
<el-dialog title="表单详情" v-model="taskFormVisible" width="600">
|
||||
<form-create ref="fApi" v-model="taskForm.value" :option="taskForm.option" :rule="taskForm.rule" />
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, provide, ref, getCurrentInstance, reactive, watch, unref,nextTick } from 'vue'
|
||||
import { onMounted, provide, ref, getCurrentInstance, reactive, watch, unref, nextTick } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { formatDate, formatPast2 } from '@/utils/formatTime'
|
||||
import { propTypes } from '@/utils/propTypes'
|
||||
@@ -104,91 +103,119 @@ import { setConfAndFields2 } from '@/utils/formCreate'
|
||||
|
||||
defineOptions({ name: 'BpmProcessInstanceTaskList' })
|
||||
|
||||
defineProps({
|
||||
loading: propTypes.bool, // 是否加载中
|
||||
processInstance: propTypes.object, // 流程实例
|
||||
tasks: propTypes.arrayOf(propTypes.object) // 流程任务的数组
|
||||
const props = defineProps({
|
||||
loading: propTypes.bool, // 是否加载中
|
||||
processInstance: propTypes.object, // 流程实例
|
||||
tasks: propTypes.arrayOf(propTypes.object) // 流程任务的数组
|
||||
})
|
||||
|
||||
const tasksList:any=ref([])
|
||||
watch(
|
||||
() => props.tasks,
|
||||
(val, oldVal) => {
|
||||
if (val&&val.length!=0) {
|
||||
tasksList.value =JSON.parse(JSON.stringify( val)).sort((a, b) => {
|
||||
// 有已完成的情况，按照完成时间倒序
|
||||
if (a.endTime && b.endTime) {
|
||||
return sortYMDHMS(a.endTime) - sortYMDHMS(b.endTime)
|
||||
}
|
||||
else if (a.endTime) {
|
||||
return 1
|
||||
} else if (b.endTime) {
|
||||
return -1
|
||||
// 都是未完成，按照创建时间倒序
|
||||
}
|
||||
else {
|
||||
return sortYMDHMS(a.createTime) - sortYMDHMS(b.createTime)
|
||||
}
|
||||
}).reverse()
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate:true,
|
||||
deep:true
|
||||
}
|
||||
)
|
||||
const sortYMDHMS = val => {
|
||||
return val.replace('-', '').replace('-', '').replace(' ', '').replace(':', '').replace(':', '') - 0
|
||||
}
|
||||
/** 获得流程实例对应的颜色 */
|
||||
const getProcessInstanceTimelineItemType = (item: any) => {
|
||||
if (item.status === 2) {
|
||||
return 'success'
|
||||
}
|
||||
if (item.status === 3) {
|
||||
return 'danger'
|
||||
}
|
||||
if (item.status === 4) {
|
||||
return 'warning'
|
||||
}
|
||||
return ''
|
||||
if (item.status === 2) {
|
||||
return 'success'
|
||||
}
|
||||
if (item.status === 3) {
|
||||
return 'danger'
|
||||
}
|
||||
if (item.status === 4) {
|
||||
return 'warning'
|
||||
}
|
||||
return ''
|
||||
}
|
||||
|
||||
/** 获得任务对应的颜色 */
|
||||
const getTaskTimelineItemType = (itemStatus: any) => {
|
||||
if ([0, 1, 6, 7].includes(itemStatus)) {
|
||||
if ([0, 1, 6, 7].includes(itemStatus)) {
|
||||
return 'primary'
|
||||
}
|
||||
if (itemStatus === 2) {
|
||||
return 'success'
|
||||
}
|
||||
if (itemStatus === 3) {
|
||||
return 'danger'
|
||||
}
|
||||
if (itemStatus === 4) {
|
||||
return 'info'
|
||||
}
|
||||
if (itemStatus === 5) {
|
||||
return 'warning'
|
||||
}
|
||||
return 'primary'
|
||||
}
|
||||
if (itemStatus === 2) {
|
||||
return 'success'
|
||||
}
|
||||
if (itemStatus === 3) {
|
||||
return 'danger'
|
||||
}
|
||||
if (itemStatus === 4) {
|
||||
return 'info'
|
||||
}
|
||||
if (itemStatus === 5) {
|
||||
return 'warning'
|
||||
}
|
||||
return 'primary'
|
||||
}
|
||||
const getTaskNameItemType = (itemStatus: any) => {
|
||||
|
||||
if (itemStatus === 1) {
|
||||
if (itemStatus === 1) {
|
||||
return '审批中'
|
||||
}
|
||||
if (itemStatus === 2) {
|
||||
return '审批通过'
|
||||
}
|
||||
if (itemStatus === 3) {
|
||||
return '审批不通过'
|
||||
}
|
||||
if (itemStatus === 4) {
|
||||
return '已取消'
|
||||
}
|
||||
return '审批中'
|
||||
}
|
||||
if (itemStatus === 2) {
|
||||
return '审批通过'
|
||||
}
|
||||
if (itemStatus === 3) {
|
||||
return '审批不通过'
|
||||
}
|
||||
if (itemStatus === 4) {
|
||||
return '已取消'
|
||||
}
|
||||
return '审批中'
|
||||
}
|
||||
|
||||
/** 子任务 */
|
||||
const taskSignListRef = ref()
|
||||
const openChildrenTask = (item: any) => {
|
||||
taskSignListRef.value.open(item)
|
||||
taskSignListRef.value.open(item)
|
||||
}
|
||||
|
||||
/** 查看表单 */
|
||||
const fApi = ref<ApiAttrs>() // form-create 的 API 操作类
|
||||
const taskForm = ref({
|
||||
rule: [],
|
||||
option: {},
|
||||
value: {}
|
||||
rule: [],
|
||||
option: {},
|
||||
value: {}
|
||||
}) // 流程任务的表单详情
|
||||
const taskFormVisible = ref(false)
|
||||
const handleFormDetail = async (row) => {
|
||||
// 设置表单
|
||||
setConfAndFields2(taskForm, row.formConf, row.formFields, row.formVariables)
|
||||
// 弹窗打开
|
||||
taskFormVisible.value = true
|
||||
// 隐藏提交、重置按钮，设置禁用只读
|
||||
await nextTick()
|
||||
fApi.value.fapi.btn.show(false)
|
||||
fApi.value?.fapi?.resetBtn.show(false)
|
||||
fApi.value?.fapi?.disabled(true)
|
||||
const handleFormDetail = async row => {
|
||||
// 设置表单
|
||||
setConfAndFields2(taskForm, row.formConf, row.formFields, row.formVariables)
|
||||
// 弹窗打开
|
||||
taskFormVisible.value = true
|
||||
// 隐藏提交、重置按钮，设置禁用只读
|
||||
await nextTick()
|
||||
fApi.value.fapi.btn.show(false)
|
||||
fApi.value?.fapi?.resetBtn.show(false)
|
||||
fApi.value?.fapi?.disabled(true)
|
||||
}
|
||||
|
||||
/** 刷新数据 */
|
||||
const emit = defineEmits(['refresh']) // 定义 success 事件，用于操作成功后的回调
|
||||
const refresh = () => {
|
||||
emit('refresh')
|
||||
emit('refresh')
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,55 +1,55 @@
|
||||
<!-- 流程详情页面 tab切换 -->
|
||||
<template>
|
||||
<div class='default-main' style='overflow: hidden;'>
|
||||
<div class="default-main" style="overflow: hidden">
|
||||
<!--返回按钮-->
|
||||
<back-component style='margin: 8px; position: absolute; z-index: 10; top: -3px; right: 2px' />
|
||||
<el-tabs type='border-card' v-model='tab' @tab-click='handleClickTab'>
|
||||
<el-tab-pane label='流程审核' name='流程审核' v-if='runningTasks.length > 0'>
|
||||
<back-component style="margin: 8px; position: absolute; z-index: 10; top: -3px; right: 2px" />
|
||||
<el-tabs type="border-card" v-model="tab" @tab-click="handleClickTab">
|
||||
<el-tab-pane label="流程审核" name="流程审核" v-if="runningTasks.length > 0">
|
||||
<el-card
|
||||
v-for='(item, index) in runningTasks'
|
||||
:key='index'
|
||||
v-loading='processInstanceLoading'
|
||||
class='box-card'
|
||||
v-for="(item, index) in runningTasks"
|
||||
:key="index"
|
||||
v-loading="processInstanceLoading"
|
||||
class="box-card"
|
||||
>
|
||||
<template #header>
|
||||
<span class='el-icon-picture-outline'>当前任务【{{ item.name }}】</span>
|
||||
<span class="el-icon-picture-outline">当前任务【{{ item.name }}】</span>
|
||||
</template>
|
||||
<el-col :offset='6' :span='16'>
|
||||
<el-col :offset="6" :span="16">
|
||||
<el-form
|
||||
:ref="'form' + index"
|
||||
:model='auditForms[index]'
|
||||
:rules='auditRule'
|
||||
label-width='100px'
|
||||
:model="auditForms[index]"
|
||||
:rules="auditRule"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-form-item v-if='processInstance && processInstance.name' label='流程名'>
|
||||
<el-form-item v-if="processInstance && processInstance.name" label="流程名">
|
||||
{{ processInstance.name }}
|
||||
</el-form-item>
|
||||
<el-form-item v-if='processInstance && processInstance.startUser' label='发起人'>
|
||||
<el-form-item v-if="processInstance && processInstance.startUser" label="发起人">
|
||||
{{ processInstance?.startUser.name }}
|
||||
</el-form-item>
|
||||
<el-form-item v-if='processInstance && processInstance.startUser' label='发起部门'>
|
||||
<el-form-item v-if="processInstance && processInstance.startUser" label="发起部门">
|
||||
{{ processInstance?.startUser.deptName }}
|
||||
</el-form-item>
|
||||
|
||||
<el-card v-if='runningTasks[index].formId != null' class='mb-15px !-mt-10px'>
|
||||
<el-card v-if="runningTasks[index].formId != null" class="mb-15px !-mt-10px">
|
||||
<template #header>
|
||||
<span class='el-icon-picture-outline'>
|
||||
<span class="el-icon-picture-outline">
|
||||
{{ runningTasks[index]?.formName }}
|
||||
</span>
|
||||
</template>
|
||||
<form-create
|
||||
v-model='approveForms[index].value'
|
||||
v-model:api='approveFormFApis[index]'
|
||||
:option='approveForms[index].option'
|
||||
:rule='approveForms[index].rule'
|
||||
v-model="approveForms[index].value"
|
||||
v-model:api="approveFormFApis[index]"
|
||||
:option="approveForms[index].option"
|
||||
:rule="approveForms[index].rule"
|
||||
/>
|
||||
</el-card>
|
||||
|
||||
<el-form-item label='审批建议' prop='reason' style='margin-top: 15px'>
|
||||
<el-form-item label="审批建议" prop="reason" style="margin-top: 15px">
|
||||
<el-input
|
||||
v-model='auditForms[index].reason'
|
||||
placeholder='请输入审批建议'
|
||||
type='textarea'
|
||||
v-model="auditForms[index].reason"
|
||||
placeholder="请输入审批建议"
|
||||
type="textarea"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label='抄送人' prop='copyUserIds'>-->
|
||||
@@ -63,11 +63,9 @@
|
||||
<!-- </el-select>-->
|
||||
<!-- </el-form-item>-->
|
||||
</el-form>
|
||||
<div style='margin-bottom: 20px; margin-left: 10%; font-size: 14px'>
|
||||
<el-button type='success' :icon='Select' @click='handleAudit(item, true)'>通过</el-button>
|
||||
|
||||
<el-button type='danger' :icon='Close' @click='handleAudit(item, false)'>不通过</el-button>
|
||||
|
||||
<div style="margin-bottom: 20px; margin-left: 10%; font-size: 14px">
|
||||
<el-button type="success" :icon="Select" @click="handleAudit(item, true)">通过</el-button>
|
||||
<el-button type="danger" :icon="Close" @click="handleAudit(item, false)">不通过</el-button>
|
||||
<!-- <el-button type='primary' @click='openTaskUpdateAssigneeForm(item.id)'>-->
|
||||
<!-- <Icon icon='ep:edit' />-->
|
||||
<!-- 转办-->
|
||||
@@ -85,60 +83,60 @@
|
||||
</el-col>
|
||||
</el-card>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label='申请信息' name='申请信息'>
|
||||
<el-tab-pane label="申请信息" name="申请信息">
|
||||
<!-- 申请信息 -->
|
||||
<el-card v-loading='processInstanceLoading' class='box-card'>
|
||||
<el-card v-loading="processInstanceLoading" class="box-card">
|
||||
<template #header>
|
||||
<span class='el-icon-document'>申请信息【{{ processInstance.name }}】</span>
|
||||
<span class="el-icon-document">申请信息【{{ processInstance.name }}】</span>
|
||||
</template>
|
||||
<!-- 情况一：流程表单 -->
|
||||
<el-col v-if='processInstance?.processDefinition?.formType === 10' :offset='6' :span='16'>
|
||||
<el-col v-if="processInstance?.processDefinition?.formType === 10" :offset="6" :span="16">
|
||||
<form-create
|
||||
v-model='detailForm.value'
|
||||
v-model:api='fApi'
|
||||
:option='detailForm.option'
|
||||
:rule='detailForm.rule'
|
||||
v-model="detailForm.value"
|
||||
v-model:api="fApi"
|
||||
:option="detailForm.option"
|
||||
:rule="detailForm.rule"
|
||||
/>
|
||||
</el-col>
|
||||
<!-- 情况二：业务表单 -->
|
||||
<div v-if='processInstance?.processDefinition?.formType === 20'>
|
||||
<BusinessFormComponent :id='processInstance.businessKey' :applyTitle='processInstance.name' />
|
||||
<div v-if="processInstance?.processDefinition?.formType === 20">
|
||||
<BusinessFormComponent :id="processInstance.businessKey" :applyTitle="processInstance.name" />
|
||||
</div>
|
||||
</el-card>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label='审批记录' name='审批记录'>
|
||||
<el-tab-pane label="审批记录" name="审批记录">
|
||||
<!-- 审批记录 -->
|
||||
<ProcessInstanceTaskList
|
||||
:loading='tasksLoad'
|
||||
:process-instance='processInstance'
|
||||
:tasks='tasks'
|
||||
@refresh='getTaskList'
|
||||
:loading="tasksLoad"
|
||||
:process-instance="processInstance"
|
||||
:tasks="tasks"
|
||||
@refresh="getTaskList"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label='流程图' name='流程图'>
|
||||
<el-tab-pane label="流程图" name="流程图">
|
||||
<ProcessInstanceBpmnViewer
|
||||
ref='mapRef'
|
||||
:id='`${id}`'
|
||||
:bpmn-xml='bpmnXml'
|
||||
:loading='processInstanceLoading'
|
||||
:process-instance='processInstance'
|
||||
:tasks='tasks'
|
||||
ref="mapRef"
|
||||
:id="`${id}`"
|
||||
:bpmn-xml="bpmnXml"
|
||||
:loading="processInstanceLoading"
|
||||
:process-instance="processInstance"
|
||||
:tasks="tasks"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<ContentWrap>
|
||||
<!-- 弹窗：转派审批人 -->
|
||||
<TaskTransferForm ref='taskTransferFormRef' @success='getDetail' />
|
||||
<TaskTransferForm ref="taskTransferFormRef" @success="getDetail" />
|
||||
<!-- 弹窗：回退节点 -->
|
||||
<TaskReturnForm ref='taskReturnFormRef' @success='getDetail' />
|
||||
<TaskReturnForm ref="taskReturnFormRef" @success="getDetail" />
|
||||
<!-- 弹窗：委派，将任务委派给别人处理，处理完成后，会重新回到原审批人手中-->
|
||||
<TaskDelegateForm ref='taskDelegateForm' @success='getDetail' />
|
||||
<TaskDelegateForm ref="taskDelegateForm" @success="getDetail" />
|
||||
<!-- 弹窗：加签，当前任务审批人为A，向前加签选了一个C，则需要C先审批，然后再是A审批，向后加签B，A审批完，需要B再审批完，才算完成这个任务节点 -->
|
||||
<TaskSignCreateForm ref='taskSignCreateFormRef' @success='getDetail' />
|
||||
<TaskSignCreateForm ref="taskSignCreateFormRef" @success="getDetail" />
|
||||
</ContentWrap>
|
||||
</div>
|
||||
</template>
|
||||
<script lang='ts' setup>
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, provide, ref, getCurrentInstance, reactive, watch, unref, nextTick, markRaw } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { useUserStore } from '@/stores/modules/user'
|
||||
@@ -165,11 +163,12 @@ defineOptions({ name: 'BpmProcessInstanceDetail' })
|
||||
|
||||
const { query } = useRoute() // 查询参数
|
||||
const { proxy } = getCurrentInstance() as any
|
||||
|
||||
const states = history.state
|
||||
const userId = JSON.parse(window.localStorage.getItem('adminInfo')).id // 当前登录的编号
|
||||
const id = (states.id as unknown as string) || query.id // 流程实例的编号
|
||||
const historyInstanceId = states.historyInstanceId as unknown as string // 历史流程实例的编号
|
||||
|
||||
const id = query.id as unknown as string // 流程实例的编号
|
||||
const todo = query.todo // 是否存在待办事项
|
||||
const todo = states.todo // 是否存在待办事项
|
||||
const processInstanceLoading = ref(false) // 流程实例的加载中
|
||||
const processInstance = ref({}) // 流程实例
|
||||
const bpmnXml = ref('') // BPMN XML
|
||||
@@ -270,6 +269,7 @@ const handleSign = async (task: any) => {
|
||||
const getDetail = () => {
|
||||
// 1. 获得流程实例相关
|
||||
getProcessInstance()
|
||||
//获取历史流程
|
||||
// 2. 获得流程任务列表（审批记录）
|
||||
getTaskList()
|
||||
}
|
||||
@@ -283,6 +283,9 @@ const handleClickTab = (tab: any, event: any) => {
|
||||
|
||||
/** 加载流程实例 */
|
||||
const BusinessFormComponent = ref(null) // 异步组件
|
||||
const historyInstanceIdList: any = ref([])
|
||||
|
||||
//查询流程数据
|
||||
const getProcessInstance = async () => {
|
||||
try {
|
||||
processInstanceLoading.value = true
|
||||
@@ -315,49 +318,39 @@ const getProcessInstance = async () => {
|
||||
await getProcessDefinitionById(processDefinition.id).then(res => {
|
||||
bpmnXml.value = res.data?.bpmnXml
|
||||
})
|
||||
console.log(bpmnXml.value, '流程图数据')
|
||||
// console.log(bpmnXml.value, '流程图数据')
|
||||
} finally {
|
||||
processInstanceLoading.value = false
|
||||
}
|
||||
}
|
||||
const sortYMDHMS = val => {
|
||||
return val.replace('-', '').replace('-', '').replace(' ', '').replace(':', '').replace(':', '') - 0
|
||||
}
|
||||
|
||||
/** 加载任务列表 */
|
||||
let stepList = ref([])
|
||||
const getTaskList = async () => {
|
||||
historyInstanceIdList.value = historyInstanceId ? historyInstanceId?.split(',') : []
|
||||
runningTasks.value = []
|
||||
auditForms.value = []
|
||||
approveForms.value = []
|
||||
approveFormFApis.value = []
|
||||
tasks.value = []
|
||||
stepList.value = []
|
||||
try {
|
||||
// 获得未取消的任务
|
||||
tasksLoad.value = true
|
||||
let data
|
||||
await getTaskListByProcessInstanceId(id).then(res => {
|
||||
data = res.data
|
||||
//根据历史实例id查询历史任务日志数据把最新的id加进去
|
||||
historyInstanceIdList.value.push(id)
|
||||
//轮询
|
||||
await historyInstanceIdList.value?.map((item: any, index: any) => {
|
||||
getTaskListByProcessInstanceId(item).then(res => {
|
||||
res.data.map(vv => {
|
||||
stepList.value.push(vv)
|
||||
})
|
||||
})
|
||||
tasks.value=[]
|
||||
})
|
||||
tasks.value = []
|
||||
// 1.1 移除已取消的审批
|
||||
data.forEach(task => {
|
||||
if (task.status !== 4) {
|
||||
tasks.value.push(task)
|
||||
}
|
||||
})
|
||||
// 1.2 排序，将未完成的排在前面，已完成的排在后面；
|
||||
tasks.value.sort((a, b) => {
|
||||
// 有已完成的情况，按照完成时间倒序
|
||||
if (a.endTime && b.endTime) {
|
||||
return b.endTime - a.endTime
|
||||
} else if (a.endTime) {
|
||||
return 1
|
||||
} else if (b.endTime) {
|
||||
return -1
|
||||
// 都是未完成，按照创建时间倒序
|
||||
} else {
|
||||
return b.createTime - a.createTime
|
||||
}
|
||||
})
|
||||
|
||||
// 获得需要自己审批的任务
|
||||
loadRunningTask(tasks.value)
|
||||
} finally {
|
||||
tasksLoad.value = false
|
||||
}
|
||||
@@ -367,7 +360,8 @@ const getTaskList = async () => {
|
||||
* 设置 runningTasks 中的任务
|
||||
*/
|
||||
const loadRunningTask = tasks => {
|
||||
tasks.forEach(task => {
|
||||
// tasks.length = 1
|
||||
tasks?.forEach(task => {
|
||||
if (!isEmpty(task.children)) {
|
||||
loadRunningTask(task.children)
|
||||
}
|
||||
@@ -385,7 +379,6 @@ const loadRunningTask = tasks => {
|
||||
reason: '',
|
||||
copyUserIds: []
|
||||
})
|
||||
console.log(runningTasks.value)
|
||||
// 2.4 处理 approve 表单
|
||||
if (task.formId && task.formConf) {
|
||||
const approveForm = {}
|
||||
@@ -401,6 +394,41 @@ const tab = ref('')
|
||||
|
||||
/** 初始化 */
|
||||
const userOptions = ref([]) // 用户列表
|
||||
//监听历史流程实例数据
|
||||
watch(
|
||||
() => stepList.value,
|
||||
(val, oldVal) => {
|
||||
if (val&&val.length!=0 ) {
|
||||
tasks.value=[]
|
||||
val.map(task => {
|
||||
if (task.status !== 4) {
|
||||
tasks.value.push(task)
|
||||
}
|
||||
})
|
||||
// 1.2 排序，将未完成的排在前面，已完成的排在后面；
|
||||
let list = Array.from(tasks.value)?.sort((a, b) => {
|
||||
// 有已完成的情况，按照完成时间倒序
|
||||
if (a.endTime && b.endTime) {
|
||||
return sortYMDHMS(b.endTime) - sortYMDHMS(a.endTime)
|
||||
} else if (a.endTime) {
|
||||
return 1
|
||||
} else if (b.endTime) {
|
||||
return -1
|
||||
// 都是未完成，按照创建时间倒序
|
||||
} else {
|
||||
return sortYMDHMS(b.createTime) - sortYMDHMS(a.createTime)
|
||||
}
|
||||
})
|
||||
// 获得需要自己审批的任务
|
||||
loadRunningTask(list)
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate:true,
|
||||
deep:true,
|
||||
}
|
||||
)
|
||||
|
||||
onMounted(async () => {
|
||||
getDetail()
|
||||
// 获得用户列表
|
||||
@@ -414,7 +442,7 @@ onMounted(async () => {
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-tab-pane {
|
||||
height: calc(100vh - 200px) !important;
|
||||
overflow: auto !important;
|
||||
|
||||
Reference in New Issue
Block a user