Merge pull request #80 from GoldenZqqq/Refactor_Bpm

重构工作流审批页面
pull/526/MERGE
芋道源码 2024-08-23 20:18:57 +08:00 committed by GitHub
commit 535921b0d0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 588 additions and 0 deletions

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 7.4 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 10 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 11 KiB

1
src/assets/svgs/send.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1724297262365" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1396" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M707.91 103c16.28 0 29.522 13.007 29.897 29.195l0.009 0.706v111.878a29.96 29.96 0 0 1-0.898 7.3l171.177-0.001c16.28 0 29.522 13.007 29.897 29.195l0.008 0.706v637.12c0 16.278-13.01 29.518-29.2 29.893l-0.705 0.008H270.884c-16.28 0-29.522-13.007-29.897-29.195l-0.008-0.706V787.274c0-16.514 13.389-29.9 29.905-29.9 16.28 0 29.522 13.007 29.897 29.194l0.008 0.706v101.924h577.4V311.88h-577.4v88.787c0 16.278-13.009 29.518-29.2 29.893l-0.705 0.008c-16.28 0-29.522-13.008-29.897-29.195l-0.008-0.706V281.979c0-16.278 13.009-29.518 29.2-29.893l0.705-0.008h408.019a29.916 29.916 0 0 1-0.89-6.593l-0.008-0.706v-81.978H132.808v407.113h385.787L408.223 456.982c-11.36-11.624-11.329-30.143-0.066-41.729l0.554-0.555c11.625-11.358 30.147-11.327 41.734-0.066l0.555 0.554 161.028 164.762c11.244 11.504 11.344 29.793 0.362 41.42l-0.55 0.565-161.027 161.849c-11.648 11.707-30.583 11.757-42.292 0.11-11.524-11.461-11.754-29.979-0.657-41.723l0.546-0.563 111.319-111.89H102.905c-16.28 0-29.522-13.007-29.897-29.195l-0.008-0.705V132.9c0-16.278 13.01-29.518 29.2-29.893l0.705-0.008H707.91z" p-id="1397"></path></svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

@ -0,0 +1,584 @@
<template>
<ContentWrap :bodyStyle="{ padding: '10px 20px' }" class="position-relative">
<Icon
class="!position-fixed right-80px"
:size="130"
:icon="`svg-icon:audit${processInstance.status}`"
/>
<div class="text-#878c93">编号{{ id }}</div>
<el-divider class="!my-8px" />
<div class="flex items-center gap-5 mb-10px">
<div class="text-26px font-bold mb-5px">{{ processInstance.name }}</div>
<dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS" :value="processInstance.status" />
</div>
<div class="flex items-center gap-5 mb-10px text-13px">
<div class="bg-gray-100 h-35px rounded-3xl flex items-center p-8px gap-2 dark:color-gray-600">
<img class="rounded-full h-28px" src="@/assets/imgs/avatar.jpg" alt="" />
{{ processInstance?.startUser?.nickname }}
</div>
<div class="text-#878c93"> {{ formatDate(processInstance.startTime) }} 提交 </div>
</div>
<el-tabs>
<!-- 表单信息 -->
<el-tab-pane label="表单信息">
<el-row :gutter="10">
<el-col :span="18" class="!flex !flex-col formCol">
<!-- 表单信息 -->
<div v-loading="processInstanceLoading" class="form-box flex flex-col mb-30px flex-1">
<!-- 情况一流程表单 -->
<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"
/>
</el-col>
<!-- 情况二业务表单 -->
<div v-if="processInstance?.processDefinition?.formType === 20">
<BusinessFormComponent :id="processInstance.businessKey" />
</div>
</div>
<el-affix target=".formCol" position="bottom" class="h-50px" v-if="runningTask?.id">
<el-divider class="!mb-8px !mt-0" />
<div
class="pl-50px text-14px flex items-center color-#32373c dark:color-#fff font-bold btn-container"
>
<el-popover :visible="passVisible" placement="top-end" :width="500" trigger="click">
<template #reference>
<el-button plain type="success" @click="openPopover('1')">
<Icon icon="ep:select" />&nbsp; 通过
</el-button>
</template>
<div class="flex flex-col flex-1 pt-20px px-20px" v-loading="formLoading">
<el-form
label-position="top"
class="mb-auto"
ref="formRef"
:model="auditForm"
:rules="auditRule"
label-width="100px"
>
<el-form-item
v-if="processInstance && processInstance.startUser"
label="流程发起人"
>
{{ processInstance?.startUser.nickname }}
<el-tag size="small" type="info" class="ml-8px">
{{ processInstance?.startUser.deptName }}
</el-tag>
</el-form-item>
<el-card v-if="runningTask.formId > 0" class="mb-15px !-mt-10px">
<template #header>
<span class="el-icon-picture-outline">
填写表单{{ runningTask?.formName }}
</span>
</template>
<form-create
v-model="approveForm.value"
v-model:api="approveFormFApi"
:option="approveForm.option"
:rule="approveForm.rule"
/>
</el-card>
<el-form-item label="审批建议" prop="reason">
<el-input
v-model="auditForm.reason"
placeholder="请输入审批建议"
type="textarea"
/>
</el-form-item>
<el-form-item label="抄送人" prop="copyUserIds">
<el-select
v-model="auditForm.copyUserIds"
multiple
placeholder="请选择抄送人"
>
<el-option
v-for="itemx in userOptions"
:key="itemx.id"
:label="itemx.nickname"
:value="itemx.id"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button
:disabled="formLoading"
type="success"
@click="handleAudit(true)"
>
通过
</el-button>
<el-button @click="passVisible = false"> 取消 </el-button>
</el-form-item>
</el-form>
</div>
</el-popover>
<el-popover
:visible="rejectVisible"
placement="top-end"
:width="500"
trigger="click"
>
<template #reference>
<el-button class="mr-20px" plain type="danger" @click="openPopover('2')">
<Icon icon="ep:close" />&nbsp; 拒绝
</el-button>
</template>
<div class="flex flex-col flex-1 pt-20px px-20px" v-loading="formLoading">
<el-form
label-position="top"
class="mb-auto"
ref="formRef"
:model="auditForm"
:rules="auditRule"
label-width="100px"
>
<el-form-item
v-if="processInstance && processInstance.startUser"
label="流程发起人"
>
{{ processInstance?.startUser.nickname }}
<el-tag size="small" type="info" class="ml-8px">
{{ processInstance?.startUser.deptName }}
</el-tag>
</el-form-item>
<el-card v-if="runningTask.formId > 0" class="mb-15px !-mt-10px">
<template #header>
<span class="el-icon-picture-outline">
填写表单{{ runningTask?.formName }}
</span>
</template>
<form-create
v-model="approveForm.value"
v-model:api="approveFormFApi"
:option="approveForm.option"
:rule="approveForm.rule"
/>
</el-card>
<el-form-item label="审批建议" prop="reason">
<el-input
v-model="auditForm.reason"
placeholder="请输入审批建议"
type="textarea"
/>
</el-form-item>
<el-form-item label="抄送人" prop="copyUserIds">
<el-select
v-model="auditForm.copyUserIds"
multiple
placeholder="请选择抄送人"
>
<el-option
v-for="itemx in userOptions"
:key="itemx.id"
:label="itemx.nickname"
:value="itemx.id"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button
:disabled="formLoading"
type="danger"
@click="handleAudit(false)"
>
拒绝
</el-button>
<el-button @click="rejectVisible = false"> 取消 </el-button>
</el-form-item>
</el-form>
</div>
</el-popover>
<div @click="handleSend"> <Icon :size="14" icon="svg-icon:send" />&nbsp;抄送 </div>
<div @click="openTaskUpdateAssigneeForm">
<Icon :size="14" icon="fa:share-square-o" />&nbsp;转交
</div>
<div @click="handleDelegate">
<Icon :size="14" icon="ep:position" />&nbsp;委派
</div>
<div @click="handleSign"> <Icon :size="14" icon="ep:plus" />&nbsp;加签 </div>
<div @click="handleBack"> <Icon :size="14" icon="fa:mail-reply" />&nbsp;退回 </div>
</div>
</el-affix>
</el-col>
<el-col :span="6">
<el-timeline class="pt-20px">
<el-timeline-item type="primary" size="large">
<div class="flex flex-col items-start gap-2">
<div class="font-bold"> 发起人{{ processInstance?.startUser?.nickname }}</div>
<el-tag type="success">发起</el-tag>
<div class="text-#a5a5a5 text-12px">
发起时间{{ formatDate(processInstance.startTime) }}
</div>
</div>
</el-timeline-item>
<el-timeline-item
v-for="(activity, index) in tasks"
:key="index"
type="primary"
size="large"
>
<div class="flex flex-col items-start gap-2">
<div class="font-bold"> 审批人{{ activity.assigneeUser?.nickname }}</div>
<dict-tag
:type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS"
:value="activity.status"
/>
<!-- TODO暂无该字段 -->
<div v-if="activity.receiveTime" class="text-#a5a5a5 text-12px">
接收时间{{ formatDate(activity.receiveTime) }}
</div>
<div v-if="activity.createTime" class="text-#a5a5a5 text-12px">
审批时间{{ formatDate(activity.createTime) }}
</div>
<div v-if="activity.opinion" class="text-#a5a5a5 text-12px w-100%">
<div class="mb-5px">审批意见</div>
<div
class="w-100% border-1px border-#a5a5a5 border-dashed rounded py-5px px-15px text-#2d2d2d"
>
{{ activity.opinion }}
</div>
</div>
</div>
<!-- 该节点用户的头像 -->
<!-- <template #dot>
<img :src="activity?.avatar" alt="" />
</template> -->
</el-timeline-item>
</el-timeline>
</el-col>
</el-row>
</el-tab-pane>
<!-- 流程图 -->
<el-tab-pane label="流程图">
<!-- 高亮流程图 -->
<ProcessInstanceBpmnViewer
:id="`${id}`"
:bpmn-xml="bpmnXml"
:loading="processInstanceLoading"
:process-instance="processInstance"
:tasks="tasks"
/>
</el-tab-pane>
<!-- 流转记录 -->
<el-tab-pane label="流转记录">
<!-- 审批记录 -->
<ProcessInstanceTaskList
:loading="tasksLoad"
:process-instance="processInstance"
:tasks="tasks"
@refresh="getTaskList"
/>
</el-tab-pane>
<!-- 流转评论 -->
<el-tab-pane label="流转评论"> 流转评论 </el-tab-pane>
</el-tabs>
<!-- 弹窗转派审批人 -->
<TaskTransferForm ref="taskTransferFormRef" @success="getDetail" />
<!-- 弹窗回退节点 -->
<TaskReturnForm ref="taskReturnFormRef" @success="getDetail" />
<!-- 弹窗委派将任务委派给别人处理处理完成后会重新回到原审批人手中-->
<TaskDelegateForm ref="taskDelegateForm" @success="getDetail" />
<!-- 弹窗加签当前任务审批人为A向前加签选了一个C则需要C先审批然后再是A审批向后加签BA审批完需要B再审批完才算完成这个任务节点 -->
<TaskSignCreateForm ref="taskSignCreateFormRef" @success="getDetail" />
</ContentWrap>
</template>
<script lang="ts" setup>
import { formatDate } from '@/utils/formatTime'
import { DICT_TYPE } from '@/utils/dict'
import { useUserStore } from '@/store/modules/user'
import { setConfAndFields2 } from '@/utils/formCreate'
import type { ApiAttrs } from '@form-create/element-ui/types/config'
import * as DefinitionApi from '@/api/bpm/definition'
import * as ProcessInstanceApi from '@/api/bpm/processInstance'
import * as TaskApi from '@/api/bpm/task'
import ProcessInstanceBpmnViewer from './ProcessInstanceBpmnViewer.vue'
import ProcessInstanceTaskList from './ProcessInstanceTaskList.vue'
import TaskReturnForm from './dialog/TaskReturnForm.vue'
import TaskDelegateForm from './dialog/TaskDelegateForm.vue'
import TaskTransferForm from './dialog/TaskTransferForm.vue'
import TaskSignCreateForm from './dialog/TaskSignCreateForm.vue'
import { registerComponent } from '@/utils/routerHelper'
import { isEmpty } from '@/utils/is'
import * as UserApi from '@/api/system/user'
defineOptions({ name: 'BpmProcessInstanceDetail' })
const { query } = useRoute() //
const message = useMessage() //
const { proxy } = getCurrentInstance() as any
const userId = useUserStore().getUser.id //
const id = query.id as unknown as string //
const processInstanceLoading = ref(false) //
const formLoading = ref(false) //
const passVisible = ref(false) //
const rejectVisible = ref(false) //
const processInstance = ref<any>({}) //
const bpmnXml = ref('') // BPMN XML
const tasksLoad = ref(true) //
const tasks = ref<any[]>([]) //
// ========== ==========
const runningTask = ref<any>({}) //
const formRef = ref()
const auditForm = ref<any>({}) //
const auditRule = reactive({
reason: [{ required: true, message: '审批建议不能为空', trigger: 'blur' }]
})
const approveForm = ref<any>({}) //
const approveFormFApi = ref<any>({}) // approveForms fAPi
// ========== ==========
const fApi = ref<ApiAttrs>() //
const detailForm = ref({
rule: [],
option: {},
value: {}
}) //
/** 监听 approveFormFApis实现它对应的 form-create 初始化后,隐藏掉对应的表单提交按钮 */
watch(
() => approveFormFApi.value,
(val) => {
val?.btn?.show(false)
val?.resetBtn?.show(false)
},
{
deep: true
}
)
/** 处理审批通过和不通过的操作 */
const handleAudit = async (pass) => {
formLoading.value = true
try {
const auditFormRef = proxy.$refs['formRef']
// 1.2
const elForm = unref(auditFormRef)
if (!elForm) return
const valid = await elForm.validate()
if (!valid) return
// 2.1
const data = {
id: runningTask.value.id,
reason: auditForm.value.reason,
copyUserIds: auditForm.value.copyUserIds
}
if (pass) {
// approveForm + data
const formCreateApi = approveFormFApi.value
if (Object.keys(formCreateApi)?.length > 0) {
await formCreateApi.validate()
// @ts-ignore
data.variables = approveForm.value.value
}
await TaskApi.approveTask(data)
message.success('审批通过成功')
} else {
await TaskApi.rejectTask(data)
message.success('审批不通过成功')
}
// 2.2
getDetail()
} finally {
formLoading.value = false
}
}
/** 转派审批人 */
const taskTransferFormRef = ref()
const openTaskUpdateAssigneeForm = () => {
taskTransferFormRef.value.open(runningTask.value.id)
}
/** 处理审批退回的操作 */
const taskDelegateForm = ref()
const handleDelegate = async () => {
taskDelegateForm.value.open(runningTask.value.id)
}
/** 处理审批退回的操作 */
const taskReturnFormRef = ref()
const handleBack = async () => {
taskReturnFormRef.value.open(runningTask.value.id)
}
/** 处理审批加签的操作 */
const taskSignCreateFormRef = ref()
const handleSign = async () => {
taskSignCreateFormRef.value.open(runningTask.value.id)
}
/** 获得详情 */
const getDetail = () => {
// 1.
getProcessInstance()
// 2.
getTaskList()
}
/** 加载流程实例 */
const BusinessFormComponent = ref<any>(null) //
const getProcessInstance = async () => {
try {
processInstanceLoading.value = true
const data = await ProcessInstanceApi.getProcessInstance(id)
if (!data) {
message.error('查询不到流程信息!')
return
}
processInstance.value = data
//
const processDefinition = data.processDefinition
if (processDefinition.formType === 10) {
setConfAndFields2(
detailForm,
processDefinition.formConf,
processDefinition.formFields,
data.formVariables
)
nextTick().then(() => {
fApi.value?.btn.show(false)
fApi.value?.resetBtn.show(false)
fApi.value?.disabled(true)
})
} else {
// data.processDefinition.formCustomViewPath /crm/contract/detail/index.vue
BusinessFormComponent.value = registerComponent(data.processDefinition.formCustomViewPath)
}
//
bpmnXml.value = (await DefinitionApi.getProcessDefinition(processDefinition.id))?.bpmnXml
} finally {
processInstanceLoading.value = false
}
}
/** 加载任务列表 */
const getTaskList = async () => {
runningTask.value = {}
auditForm.value = {}
approveForm.value = {}
approveFormFApi.value = {}
try {
//
tasksLoad.value = true
const data = await TaskApi.getTaskListByProcessInstanceId(id)
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
}
}
/**
* 设置 runningTasks 中的任务
*/
const loadRunningTask = (tasks) => {
tasks.forEach((task) => {
if (!isEmpty(task.children)) {
loadRunningTask(task.children)
}
// 2.1
if (task.status !== 1 && task.status !== 6) {
return
}
// 2.2
if (!task.assigneeUser || task.assigneeUser.id !== userId) {
return
}
// 2.3
runningTask.value = { ...task }
auditForm.value = {
reason: '',
copyUserIds: []
}
// 2.4 approve
if (task.formId && task.formConf) {
const tempApproveForm = {}
setConfAndFields2(tempApproveForm, task.formConf, task.formFields, task.formVariables)
approveForm.value = tempApproveForm
} else {
approveForm.value = {} //
}
})
}
/* 抄送 TODO */
const handleSend = () => {}
const openPopover = (flag) => {
passVisible.value = false
rejectVisible.value = false
formRef.value.resetFields()
flag === '1' ? (passVisible.value = true) : (rejectVisible.value = true)
}
/** 初始化 */
const userOptions = ref<UserApi.UserVO[]>([]) //
onMounted(async () => {
getDetail()
//
userOptions.value = await UserApi.getSimpleUserList()
})
</script>
<style lang="scss" scoped>
.form-box {
:deep(.el-card) {
border: none;
}
}
:deep(.el-affix--fixed) {
background-color: var(--el-bg-color);
}
.btn-container {
> div {
margin: 0 15px;
cursor: pointer;
display: flex;
align-items: center;
&:hover {
color: #6db5ff;
}
}
}
</style>