Skip to content
Toggle navigation
P
Projects
G
Groups
S
Snippets
Help
phsl
/
admin
This project
Loading...
Sign in
Toggle navigation
Go to a project
Project
Repository
Issues
0
Merge Requests
0
Pipelines
Wiki
Snippets
Members
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Commit
927196c5
authored
Aug 26, 2024
by
GoldenZqqq
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat: 将工作流状态svg放到同一文件夹下;将工作流审批页面操作栏抽取为单独组件
parent
b9970045
Hide whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
341 additions
and
344 deletions
+341
-344
src/assets/svgs/bpm/audit1.svg
+0
-0
src/assets/svgs/bpm/audit2.svg
+0
-0
src/assets/svgs/bpm/audit3.svg
+0
-0
src/views/bpm/processInstance/detail/ProcessInstanceBtnConatiner.vue
+318
-0
src/views/bpm/processInstance/detail/index_new.vue
+23
-344
No files found.
src/assets/svgs/audit1.svg
→
src/assets/svgs/
bpm/
audit1.svg
View file @
927196c5
File moved
src/assets/svgs/audit2.svg
→
src/assets/svgs/
bpm/
audit2.svg
View file @
927196c5
File moved
src/assets/svgs/audit3.svg
→
src/assets/svgs/
bpm/
audit3.svg
View file @
927196c5
File moved
src/views/bpm/processInstance/detail/ProcessInstanceBtnConatiner.vue
0 → 100644
View file @
927196c5
<
template
>
<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"
/>
通过
</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"
/>
拒绝
</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"
/>
抄送
</div>
<div
@
click=
"openTaskUpdateAssigneeForm"
>
<Icon
:size=
"14"
icon=
"fa:share-square-o"
/>
转交
</div>
<div
@
click=
"handleDelegate"
>
<Icon
:size=
"14"
icon=
"ep:position"
/>
委派
</div>
<div
@
click=
"handleSign"
>
<Icon
:size=
"14"
icon=
"ep:plus"
/>
加签
</div>
<div
@
click=
"handleBack"
>
<Icon
:size=
"14"
icon=
"fa:mail-reply"
/>
退回
</div>
</div>
</el-affix>
<!-- 弹窗:转派审批人 -->
<TaskTransferForm
ref=
"taskTransferFormRef"
@
success=
"getDetail"
/>
<!-- 弹窗:回退节点 -->
<TaskReturnForm
ref=
"taskReturnFormRef"
@
success=
"getDetail"
/>
<!-- 弹窗:委派,将任务委派给别人处理,处理完成后,会重新回到原审批人手中-->
<TaskDelegateForm
ref=
"taskDelegateForm"
@
success=
"getDetail"
/>
<!-- 弹窗:加签,当前任务审批人为A,向前加签选了一个C,则需要C先审批,然后再是A审批,向后加签B,A审批完,需要B再审批完,才算完成这个任务节点 -->
<TaskSignCreateForm
ref=
"taskSignCreateFormRef"
@
success=
"getDetail"
/>
</template>
<
script
lang=
"ts"
setup
>
import
{
setConfAndFields2
}
from
'@/utils/formCreate'
import
{
useUserStore
}
from
'@/store/modules/user'
import
*
as
TaskApi
from
'@/api/bpm/task'
import
{
propTypes
}
from
'@/utils/propTypes'
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
{
isEmpty
}
from
'@/utils/is'
defineOptions
({
name
:
'ProcessInstanceBtnConatiner'
})
const
userId
=
useUserStore
().
getUser
.
id
// 当前登录的编号
const
message
=
useMessage
()
// 消息弹窗
const
{
proxy
}
=
getCurrentInstance
()
as
any
const
emit
=
defineEmits
([
'success'
])
// 定义 success 事件,用于操作成功后的回调
defineProps
({
processInstance
:
propTypes
.
any
,
// 流程实例信息
userOptions
:
propTypes
.
any
})
const
formLoading
=
ref
(
false
)
// 表单加载中
const
passVisible
=
ref
(
false
)
// 是否显示
const
rejectVisible
=
ref
(
false
)
// 是否显示
// ========== 审批信息 ==========
const
runningTask
=
ref
<
any
>
({})
// 运行中的任务
const
auditForm
=
ref
<
any
>
({})
// 审批任务的表单
const
approveForm
=
ref
<
any
>
({})
// 审批通过时,额外的补充信息
const
approveFormFApi
=
ref
<
any
>
({})
// approveForms 的 fAPi
const
formRef
=
ref
()
const
auditRule
=
reactive
({
reason
:
[{
required
:
true
,
message
:
'审批建议不能为空'
,
trigger
:
'blur'
}]
})
/** 监听 approveFormFApis,实现它对应的 form-create 初始化后,隐藏掉对应的表单提交按钮 */
watch
(
()
=>
approveFormFApi
.
value
,
(
val
)
=>
{
val
?.
btn
?.
show
(
false
)
val
?.
resetBtn
?.
show
(
false
)
},
{
deep
:
true
}
)
/**
* 设置 runningTasks 中的任务
*/
const
loadRunningTask
=
(
tasks
)
=>
{
runningTask
.
value
=
{}
auditForm
.
value
=
{}
approveForm
.
value
=
{}
approveFormFApi
.
value
=
{}
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
=
{}
// 占位,避免为空
}
})
}
/** 处理审批通过和不通过的操作 */
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
}
}
/* 抄送 TODO */
const
handleSend
=
()
=>
{}
const
openPopover
=
(
flag
)
=>
{
passVisible
.
value
=
false
rejectVisible
.
value
=
false
formRef
.
value
.
resetFields
()
flag
===
'1'
?
(
passVisible
.
value
=
true
)
:
(
rejectVisible
.
value
=
true
)
}
/** 转派审批人 */
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
=
()
=>
{
emit
(
'success'
)
}
defineExpose
({
loadRunningTask
})
</
script
>
<
style
lang=
"scss"
scoped
>
: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
>
src/views/bpm/processInstance/detail/index_new.vue
View file @
927196c5
<
template
>
<
template
>
<ContentWrap
:bodyStyle=
"
{ padding: '10px 20px' }" class="position-relative">
<ContentWrap
:bodyStyle=
"
{ padding: '10px 20px' }" class="position-relative">
<
!-- TODO @GoldenZqqq:建议 svgs 里面新建一个 bpm;把相关的图标放进去哈 -->
<
img
<Icon
class=
"position-absolute right-20px"
class=
"!position-fixed right-80px
"
width=
"150
"
:s
ize=
"130
"
:s
rc=
"auditIcons[processInstance.status]
"
:icon=
"`svg-icon:audit$
{processInstance.status}`
"
alt=
"
"
/>
/>
<div
class=
"text-#878c93"
>
编号:
{{
id
}}
</div>
<div
class=
"text-#878c93"
>
编号:
{{
id
}}
</div>
<el-divider
class=
"!my-8px"
/>
<el-divider
class=
"!my-8px"
/>
...
@@ -46,177 +46,16 @@
...
@@ -46,177 +46,16 @@
<BusinessFormComponent
:id=
"processInstance.businessKey"
/>
<BusinessFormComponent
:id=
"processInstance.businessKey"
/>
</div>
</div>
</div>
</div>
<!-- 操作栏按钮 -->
<!-- TODO @GoldenZqqq:可以把下面 runningTask 拆一个小组件么 -->
<ProcessInstanceBtnConatiner
<el-affix
target=
".formCol"
position=
"bottom"
class=
"h-50px"
v-if=
"runningTask?.id"
>
ref=
"processInstanceBtnRef"
<el-divider
class=
"!mb-8px !mt-0"
/>
:processInstance=
"processInstance"
<div
:userOptions=
"userOptions"
class=
"pl-50px text-14px flex items-center color-#32373c dark:color-#fff font-bold btn-container"
@
success=
"getDetail"
>
/>
<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"
/>
通过
</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"
/>
拒绝
</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"
/>
抄送
</div>
<div
@
click=
"openTaskUpdateAssigneeForm"
>
<Icon
:size=
"14"
icon=
"fa:share-square-o"
/>
转交
</div>
<div
@
click=
"handleDelegate"
>
<Icon
:size=
"14"
icon=
"ep:position"
/>
委派
</div>
<div
@
click=
"handleSign"
>
<Icon
:size=
"14"
icon=
"ep:plus"
/>
加签
</div>
<div
@
click=
"handleBack"
>
<Icon
:size=
"14"
icon=
"fa:mail-reply"
/>
退回
</div>
</div>
</el-affix>
<!-- TODO @GoldenZqqq:后续这个,也拆个小组件出来 -->
</el-col>
</el-col>
<el-col
:span=
"6"
>
<el-col
:span=
"6"
>
<!-- TODO @GoldenZqqq:后续这个,也拆个小组件出来 -->
<el-timeline
class=
"pt-20px"
>
<el-timeline
class=
"pt-20px"
>
<el-timeline-item
type=
"primary"
size=
"large"
>
<el-timeline-item
type=
"primary"
size=
"large"
>
<div
class=
"flex flex-col items-start gap-2"
>
<div
class=
"flex flex-col items-start gap-2"
>
...
@@ -266,7 +105,6 @@
...
@@ -266,7 +105,6 @@
</el-tab-pane>
</el-tab-pane>
<!-- 流程图 -->
<!-- 流程图 -->
<el-tab-pane
label=
"流程图"
>
<el-tab-pane
label=
"流程图"
>
<!-- 高亮流程图 -->
<ProcessInstanceBpmnViewer
<ProcessInstanceBpmnViewer
:id=
"`${id}`"
:id=
"`${id}`"
:bpmn-xml=
"bpmnXml"
:bpmn-xml=
"bpmnXml"
...
@@ -277,7 +115,6 @@
...
@@ -277,7 +115,6 @@
</el-tab-pane>
</el-tab-pane>
<!-- 流转记录 -->
<!-- 流转记录 -->
<el-tab-pane
label=
"流转记录"
>
<el-tab-pane
label=
"流转记录"
>
<!-- 审批记录 -->
<ProcessInstanceTaskList
<ProcessInstanceTaskList
:loading=
"tasksLoad"
:loading=
"tasksLoad"
:process-instance=
"processInstance"
:process-instance=
"processInstance"
...
@@ -288,21 +125,11 @@
...
@@ -288,21 +125,11 @@
<!-- 流转评论 -->
<!-- 流转评论 -->
<el-tab-pane
label=
"流转评论"
>
流转评论
</el-tab-pane>
<el-tab-pane
label=
"流转评论"
>
流转评论
</el-tab-pane>
</el-tabs>
</el-tabs>
<!-- 弹窗:转派审批人 -->
<TaskTransferForm
ref=
"taskTransferFormRef"
@
success=
"getDetail"
/>
<!-- 弹窗:回退节点 -->
<TaskReturnForm
ref=
"taskReturnFormRef"
@
success=
"getDetail"
/>
<!-- 弹窗:委派,将任务委派给别人处理,处理完成后,会重新回到原审批人手中-->
<TaskDelegateForm
ref=
"taskDelegateForm"
@
success=
"getDetail"
/>
<!-- 弹窗:加签,当前任务审批人为A,向前加签选了一个C,则需要C先审批,然后再是A审批,向后加签B,A审批完,需要B再审批完,才算完成这个任务节点 -->
<TaskSignCreateForm
ref=
"taskSignCreateFormRef"
@
success=
"getDetail"
/>
</ContentWrap>
</ContentWrap>
</template>
</template>
<
script
lang=
"ts"
setup
>
<
script
lang=
"ts"
setup
>
import
{
formatDate
}
from
'@/utils/formatTime'
import
{
formatDate
}
from
'@/utils/formatTime'
import
{
DICT_TYPE
}
from
'@/utils/dict'
import
{
DICT_TYPE
}
from
'@/utils/dict'
import
{
useUserStore
}
from
'@/store/modules/user'
import
{
setConfAndFields2
}
from
'@/utils/formCreate'
import
{
setConfAndFields2
}
from
'@/utils/formCreate'
import
type
{
ApiAttrs
}
from
'@form-create/element-ui/types/config'
import
type
{
ApiAttrs
}
from
'@form-create/element-ui/types/config'
import
*
as
DefinitionApi
from
'@/api/bpm/definition'
import
*
as
DefinitionApi
from
'@/api/bpm/definition'
...
@@ -310,39 +137,28 @@ import * as ProcessInstanceApi from '@/api/bpm/processInstance'
...
@@ -310,39 +137,28 @@ import * as ProcessInstanceApi from '@/api/bpm/processInstance'
import
*
as
TaskApi
from
'@/api/bpm/task'
import
*
as
TaskApi
from
'@/api/bpm/task'
import
ProcessInstanceBpmnViewer
from
'./ProcessInstanceBpmnViewer.vue'
import
ProcessInstanceBpmnViewer
from
'./ProcessInstanceBpmnViewer.vue'
import
ProcessInstanceTaskList
from
'./ProcessInstanceTaskList.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
{
registerComponent
}
from
'@/utils/routerHelper'
import
{
isEmpty
}
from
'@/utils/is'
import
*
as
UserApi
from
'@/api/system/user'
import
*
as
UserApi
from
'@/api/system/user'
import
audit1
from
'@/assets/svgs/bpm/audit1.svg'
import
audit2
from
'@/assets/svgs/bpm/audit2.svg'
import
audit3
from
'@/assets/svgs/bpm/audit3.svg'
defineOptions
({
name
:
'BpmProcessInstanceDetail'
})
defineOptions
({
name
:
'BpmProcessInstanceDetail'
})
const
{
query
}
=
useRoute
()
// 查询参数
const
{
query
}
=
useRoute
()
// 查询参数
const
message
=
useMessage
()
// 消息弹窗
const
message
=
useMessage
()
// 消息弹窗
const
{
proxy
}
=
getCurrentInstance
()
as
any
const
userId
=
useUserStore
().
getUser
.
id
// 当前登录的编号
const
id
=
query
.
id
as
unknown
as
string
// 流程实例的编号
const
id
=
query
.
id
as
unknown
as
string
// 流程实例的编号
const
processInstanceLoading
=
ref
(
false
)
// 流程实例的加载中
const
processInstanceLoading
=
ref
(
false
)
// 流程实例的加载中
const
formLoading
=
ref
(
false
)
// 表单加载中
const
passVisible
=
ref
(
false
)
// 是否显示
const
rejectVisible
=
ref
(
false
)
// 是否显示
const
processInstance
=
ref
<
any
>
({})
// 流程实例
const
processInstance
=
ref
<
any
>
({})
// 流程实例
const
processInstanceBtnRef
=
ref
()
const
bpmnXml
=
ref
(
''
)
// BPMN XML
const
bpmnXml
=
ref
(
''
)
// BPMN XML
const
tasksLoad
=
ref
(
true
)
// 任务的加载中
const
tasksLoad
=
ref
(
true
)
// 任务的加载中
const
tasks
=
ref
<
any
[]
>
([])
// 任务列表
const
tasks
=
ref
<
any
[]
>
([])
// 任务列表
// ========== 审批信息 ==========
const
auditIcons
=
{
const
runningTask
=
ref
<
any
>
({})
// 运行中的任务
1
:
audit1
,
const
formRef
=
ref
()
2
:
audit2
,
const
auditForm
=
ref
<
any
>
({})
// 审批任务的表单
3
:
audit3
const
auditRule
=
reactive
({
}
reason
:
[{
required
:
true
,
message
:
'审批建议不能为空'
,
trigger
:
'blur'
}]
})
const
approveForm
=
ref
<
any
>
({})
// 审批通过时,额外的补充信息
const
approveFormFApi
=
ref
<
any
>
({})
// approveForms 的 fAPi
// ========== 申请信息 ==========
// ========== 申请信息 ==========
const
fApi
=
ref
<
ApiAttrs
>
()
//
const
fApi
=
ref
<
ApiAttrs
>
()
//
...
@@ -352,80 +168,6 @@ const detailForm = ref({
...
@@ -352,80 +168,6 @@ const detailForm = ref({
value
:
{}
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
=
()
=>
{
const
getDetail
=
()
=>
{
// 1. 获得流程实例相关
// 1. 获得流程实例相关
...
@@ -474,10 +216,6 @@ const getProcessInstance = async () => {
...
@@ -474,10 +216,6 @@ const getProcessInstance = async () => {
/** 加载任务列表 */
/** 加载任务列表 */
const
getTaskList
=
async
()
=>
{
const
getTaskList
=
async
()
=>
{
runningTask
.
value
=
{}
auditForm
.
value
=
{}
approveForm
.
value
=
{}
approveFormFApi
.
value
=
{}
try
{
try
{
// 获得未取消的任务
// 获得未取消的任务
tasksLoad
.
value
=
true
tasksLoad
.
value
=
true
...
@@ -505,56 +243,12 @@ const getTaskList = async () => {
...
@@ -505,56 +243,12 @@ const getTaskList = async () => {
})
})
// 获得需要自己审批的任务
// 获得需要自己审批的任务
loadRunningTask
(
tasks
.
value
)
processInstanceBtnRef
.
value
.
loadRunningTask
(
tasks
.
value
)
}
finally
{
}
finally
{
tasksLoad
.
value
=
false
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
[]
>
([])
// 用户列表
const
userOptions
=
ref
<
UserApi
.
UserVO
[]
>
([])
// 用户列表
onMounted
(
async
()
=>
{
onMounted
(
async
()
=>
{
...
@@ -570,19 +264,4 @@ onMounted(async () => {
...
@@ -570,19 +264,4 @@ onMounted(async () => {
border
:
none
;
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
>
</
style
>
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment