Skip to content

Commit 5968fc5

Browse files
GoldenZqqqGoldenZqqq
committed
feat: 审批通过/拒绝以popover的形式来填写审批意见等信息并进行二次确认
1 parent 38e2063 commit 5968fc5

File tree

1 file changed

+212
-118
lines changed

1 file changed

+212
-118
lines changed

‎src/views/bpm/processInstance/detail/index_new.vue

Lines changed: 212 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,7 @@
2424
<el-row :gutter="10">
2525
<el-col :span="18" class="!flex !flex-col">
2626
<!-- 表单信息 -->
27-
<div
28-
v-loading="processInstanceLoading"
29-
class="form-box border-1 border-solid border-[#ccc] p-20px flex flex-col mb-30px"
30-
>
27+
<div v-loading="processInstanceLoading" class="form-box flex flex-col mb-30px flex-1">
3128
<!-- 情况一：流程表单 -->
3229
<el-col
3330
v-if="processInstance?.processDefinition?.formType === 10"
@@ -47,98 +44,167 @@
4744
</div>
4845
</div>
4946

50-
<!-- 审批信息 -->
51-
<el-divider content-position="center" v-if="runningTask">
52-
<div class="text-16px font-1000">审批意见</div>
53-
</el-divider>
54-
<div class="flex flex-col flex-1" v-loading="processInstanceLoading">
55-
<el-form
56-
class="mb-auto"
57-
ref="formRef"
58-
:model="auditForm"
59-
:rules="auditRule"
60-
label-width="100px"
61-
>
62-
<el-form-item
63-
v-if="processInstance && processInstance.startUser"
64-
label="流程发起人"
65-
>
66-
{{ processInstance?.startUser.nickname }}
67-
<el-tag size="small" type="info" class="ml-8px">
68-
{{ processInstance?.startUser.deptName }}
69-
</el-tag>
70-
</el-form-item>
71-
<el-card v-if="runningTask.formId > 0" class="mb-15px !-mt-10px">
72-
<template #header>
73-
<span class="el-icon-picture-outline">
74-
填写表单【{{ runningTask?.formName }}】
75-
</span>
47+
<div class="h-60px">
48+
<el-divider class="!my-8px" />
49+
<div class="text-14px flex items-center color-#32373c font-bold btn-container">
50+
<el-popover :visible="passVisible" placement="top-end" :width="500" trigger="click">
51+
<template #reference>
52+
<el-button plain type="success" @click="openPopover('1')">
53+
<Icon icon="ep:select" />&nbsp; 通过
54+
</el-button>
7655
</template>
77-
<form-create
78-
v-model="approveForm.value"
79-
v-model:api="approveFormFApi"
80-
:option="approveForm.option"
81-
:rule="approveForm.rule"
82-
/>
83-
</el-card>
84-
<el-form-item label="审批建议" prop="reason">
85-
<el-input
86-
v-model="auditForm.reason"
87-
placeholder="请输入审批建议"
88-
type="textarea"
89-
/>
90-
</el-form-item>
91-
<el-form-item label="抄送人" prop="copyUserIds">
92-
<el-select v-model="auditForm.copyUserIds" multiple placeholder="请选择抄送人">
93-
<el-option
94-
v-for="itemx in userOptions"
95-
:key="itemx.id"
96-
:label="itemx.nickname"
97-
:value="itemx.id"
98-
/>
99-
</el-select>
100-
</el-form-item>
101-
</el-form>
102-
<div class="h-60px">
103-
<el-divider class="!my-8px" />
104-
<div class="text-14px flex items-center color-#32373c font-bold">
105-
<el-button plain type="success" @click="handleAudit(true)">
106-
<Icon icon="ep:select" />&nbsp; 通过
107-
</el-button>
108-
<el-button class="mr-20px" plain type="danger" @click="handleAudit(false)">
109-
<Icon icon="ep:close" />&nbsp; 拒绝
110-
</el-button>
111-
<div
112-
class="mx-15px cursor-pointer !hover:color-#6db5ff flex items-center"
113-
@click="handleSend"
114-
>
115-
<Icon :size="14" icon="svg-icon:send" />&nbsp;抄送
116-
</div>
117-
<div
118-
class="mx-15px cursor-pointer !hover:color-#6db5ff flex items-center"
119-
@click="openTaskUpdateAssigneeForm"
120-
>
121-
<Icon :size="14" icon="fa:share-square-o" />&nbsp;转交
122-
</div>
123-
<div
124-
class="mx-15px cursor-pointer !hover:color-#6db5ff flex items-center"
125-
@click="handleDelegate"
126-
>
127-
<Icon :size="14" icon="ep:position" />&nbsp;委派
128-
</div>
129-
<div
130-
class="mx-15px cursor-pointer !hover:color-#6db5ff flex items-center"
131-
@click="handleSign"
132-
>
133-
<Icon :size="14" icon="ep:plus" />&nbsp;加签
56+
<div class="flex flex-col flex-1 pt-20px px-20px" v-loading="formLoading">
57+
<el-form
58+
label-position="top"
59+
class="mb-auto"
60+
ref="formRef"
61+
:model="auditForm"
62+
:rules="auditRule"
63+
label-width="100px"
64+
>
65+
<el-form-item
66+
v-if="processInstance && processInstance.startUser"
67+
label="流程发起人"
68+
>
69+
{{ processInstance?.startUser.nickname }}
70+
<el-tag size="small" type="info" class="ml-8px">
71+
{{ processInstance?.startUser.deptName }}
72+
</el-tag>
73+
</el-form-item>
74+
<el-card v-if="runningTask.formId > 0" class="mb-15px !-mt-10px">
75+
<template #header>
76+
<span class="el-icon-picture-outline">
77+
填写表单【{{ runningTask?.formName }}】
78+
</span>
79+
</template>
80+
<form-create
81+
v-model="approveForm.value"
82+
v-model:api="approveFormFApi"
83+
:option="approveForm.option"
84+
:rule="approveForm.rule"
85+
/>
86+
</el-card>
87+
<el-form-item label="审批建议" prop="reason">
88+
<el-input
89+
v-model="auditForm.reason"
90+
placeholder="请输入审批建议"
91+
type="textarea"
92+
/>
93+
</el-form-item>
94+
<el-form-item label="抄送人" prop="copyUserIds">
95+
<el-select
96+
v-model="auditForm.copyUserIds"
97+
multiple
98+
placeholder="请选择抄送人"
99+
>
100+
<el-option
101+
v-for="itemx in userOptions"
102+
:key="itemx.id"
103+
:label="itemx.nickname"
104+
:value="itemx.id"
105+
/>
106+
</el-select>
107+
</el-form-item>
108+
109+
<el-form-item>
110+
<el-button
111+
:disabled="formLoading"
112+
type="primary"
113+
@click="handleAudit(true)"
114+
>
115+
通过
116+
</el-button>
117+
<el-button @click="passVisible = false"> 取消 </el-button>
118+
</el-form-item>
119+
</el-form>
134120
</div>
135-
<div
136-
class="mx-15px cursor-pointer !hover:color-#6db5ff flex items-center"
137-
@click="handleBack"
138-
>
139-
<Icon :size="14" icon="fa:mail-reply" />&nbsp;退回
121+
</el-popover>
122+
<el-popover
123+
:visible="rejectVisible"
124+
placement="top-end"
125+
:width="500"
126+
trigger="click"
127+
>
128+
<template #reference>
129+
<el-button class="mr-20px" plain type="danger" @click="openPopover('2')">
130+
<Icon icon="ep:close" />&nbsp; 拒绝
131+
</el-button>
132+
</template>
133+
<div class="flex flex-col flex-1 pt-20px px-20px" v-loading="formLoading">
134+
<el-form
135+
label-position="top"
136+
class="mb-auto"
137+
ref="formRef"
138+
:model="auditForm"
139+
:rules="auditRule"
140+
label-width="100px"
141+
>
142+
<el-form-item
143+
v-if="processInstance && processInstance.startUser"
144+
label="流程发起人"
145+
>
146+
{{ processInstance?.startUser.nickname }}
147+
<el-tag size="small" type="info" class="ml-8px">
148+
{{ processInstance?.startUser.deptName }}
149+
</el-tag>
150+
</el-form-item>
151+
<el-card v-if="runningTask.formId > 0" class="mb-15px !-mt-10px">
152+
<template #header>
153+
<span class="el-icon-picture-outline">
154+
填写表单【{{ runningTask?.formName }}】
155+
</span>
156+
</template>
157+
<form-create
158+
v-model="approveForm.value"
159+
v-model:api="approveFormFApi"
160+
:option="approveForm.option"
161+
:rule="approveForm.rule"
162+
/>
163+
</el-card>
164+
<el-form-item label="审批建议" prop="reason">
165+
<el-input
166+
v-model="auditForm.reason"
167+
placeholder="请输入审批建议"
168+
type="textarea"
169+
/>
170+
</el-form-item>
171+
<el-form-item label="抄送人" prop="copyUserIds">
172+
<el-select
173+
v-model="auditForm.copyUserIds"
174+
multiple
175+
placeholder="请选择抄送人"
176+
>
177+
<el-option
178+
v-for="itemx in userOptions"
179+
:key="itemx.id"
180+
:label="itemx.nickname"
181+
:value="itemx.id"
182+
/>
183+
</el-select>
184+
</el-form-item>
185+
186+
<el-form-item>
187+
<el-button
188+
:disabled="formLoading"
189+
type="danger"
190+
@click="handleAudit(false)"
191+
>
192+
拒绝
193+
</el-button>
194+
<el-button @click="rejectVisible = false"> 取消 </el-button>
195+
</el-form-item>
196+
</el-form>
140197
</div>
198+
</el-popover>
199+
<div @click="handleSend"> <Icon :size="14" icon="svg-icon:send" />&nbsp;抄送 </div>
200+
<div @click="openTaskUpdateAssigneeForm">
201+
<Icon :size="14" icon="fa:share-square-o" />&nbsp;转交
141202
</div>
203+
<div @click="handleDelegate">
204+
<Icon :size="14" icon="ep:position" />&nbsp;委派
205+
</div>
206+
<div @click="handleSign"> <Icon :size="14" icon="ep:plus" />&nbsp;加签 </div>
207+
<div @click="handleBack"> <Icon :size="14" icon="fa:mail-reply" />&nbsp;退回 </div>
142208
</div>
143209
</div>
144210
</el-col>
@@ -245,12 +311,16 @@ const { proxy } = getCurrentInstance() as any
245311
const userId = useUserStore().getUser.id // 当前登录的编号
246312
const id = query.id as unknown as string // 流程实例的编号
247313
const processInstanceLoading = ref(false) // 流程实例的加载中
314+
const formLoading = ref(false) // 表单加载中
315+
const passVisible = ref(false) // 是否显示
316+
const rejectVisible = ref(false) // 是否显示
248317
const processInstance = ref<any>({}) // 流程实例
249318
const bpmnXml = ref('') // BPMN XML
250319
const tasksLoad = ref(true) // 任务的加载中
251320
const tasks = ref<any[]>([]) // 任务列表
252321
// ========== 审批信息 ==========
253322
const runningTask = ref<any>({}) // 运行中的任务
323+
const formRef = ref()
254324
const auditForm = ref<any>({}) // 审批任务的表单
255325
const auditRule = reactive({
256326
reason: [{ required: true, message: '审批建议不能为空', trigger: 'blur' }]
@@ -280,35 +350,40 @@ watch(
280350
281351
/** 处理审批通过和不通过的操作 */
282352
const handleAudit = async (pass) => {
283-
const auditFormRef = proxy.$refs['formRef']
284-
// 1.2 校验表单
285-
const elForm = unref(auditFormRef)
286-
if (!elForm) return
287-
const valid = await elForm.validate()
288-
if (!valid) return
353+
formLoading.value = true
354+
try {
355+
const auditFormRef = proxy.$refs['formRef']
356+
// 1.2 校验表单
357+
const elForm = unref(auditFormRef)
358+
if (!elForm) return
359+
const valid = await elForm.validate()
360+
if (!valid) return
289361
290-
// 2.1 提交审批
291-
const data = {
292-
id: runningTask.value.id,
293-
reason: auditForm.value.reason,
294-
copyUserIds: auditForm.value.copyUserIds
295-
}
296-
if (pass) {
297-
// 审批通过，并且有额外的 approveForm 表单，需要校验 + 拼接到 data 表单里提交
298-
const formCreateApi = approveFormFApi.value
299-
if (formCreateApi) {
300-
await formCreateApi.validate()
301-
// @ts-ignore
302-
data.variables = approveForm.value.value
362+
// 2.1 提交审批
363+
const data = {
364+
id: runningTask.value.id,
365+
reason: auditForm.value.reason,
366+
copyUserIds: auditForm.value.copyUserIds
367+
}
368+
if (pass) {
369+
// 审批通过，并且有额外的 approveForm 表单，需要校验 + 拼接到 data 表单里提交
370+
const formCreateApi = approveFormFApi.value
371+
if (formCreateApi) {
372+
await formCreateApi.validate()
373+
// @ts-ignore
374+
data.variables = approveForm.value.value
375+
}
376+
await TaskApi.approveTask(data)
377+
message.success('审批通过成功')
378+
} else {
379+
await TaskApi.rejectTask(data)
380+
message.success('审批不通过成功')
303381
}
304-
await TaskApi.approveTask(data)
305-
message.success('审批通过成功')
306-
} else {
307-
await TaskApi.rejectTask(data)
308-
message.success('审批不通过成功')
382+
// 2.2 加载最新数据
383+
getDetail()
384+
} finally {
385+
formLoading.value = false
309386
}
310-
// 2.2 加载最新数据
311-
getDetail()
312387
}
313388
314389
/** 转派审批人 */
@@ -457,6 +532,13 @@ const loadRunningTask = (tasks) => {
457532
/* 抄送 TODO */
458533
const handleSend = () => {}
459534
535+
const openPopover = (flag) => {
536+
passVisible.value = false
537+
rejectVisible.value = false
538+
formRef.value.resetFields()
539+
flag === '1' ? (passVisible.value = true) : (rejectVisible.value = true)
540+
}
541+
460542
/** 初始化 */
461543
const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
462544
onMounted(async () => {
@@ -507,4 +589,16 @@ const activities = [
507589
border: none;
508590
}
509591
}
592+
593+
.btn-container {
594+
> div {
595+
margin: 0 15px;
596+
cursor: pointer;
597+
display: flex;
598+
align-items: center;
599+
&:hover {
600+
color: #6db5ff;
601+
}
602+
}
603+
}
510604
</style>

0 commit comments

Comments
 (0)