Skip to content

Commit c5a3fa1

Browse files
YunaiVYunaiV
committed
Vue3 重构：流程实例的详情
1 parent 1a43113 commit c5a3fa1

File tree

4 files changed

+107
-114
lines changed

4 files changed

+107
-114
lines changed

‎src/router/modules/remaining.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -284,7 +284,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
284284
},
285285
{
286286
path: '/process-instance/detail',
287-
component: () => import('@/views/bpm/processInstance/detail.vue'),
287+
component: () => import('@/views/bpm/processInstance/detail/index.vue'),
288288
name: 'BpmProcessInstanceDetail',
289289
meta: {
290290
noCache: true,

‎src/types/auto-components.d.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,8 @@ declare module '@vue/runtime-core' {
7373
ElTabPane: typeof import('element-plus/es')['ElTabPane']
7474
ElTabs: typeof import('element-plus/es')['ElTabs']
7575
ElTag: typeof import('element-plus/es')['ElTag']
76+
ElTimeline: typeof import('element-plus/es')['ElTimeline']
77+
ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
7678
ElTooltip: typeof import('element-plus/es')['ElTooltip']
7779
ElTransfer: typeof import('element-plus/es')['ElTransfer']
7880
ElTree: typeof import('element-plus/es')['ElTree']

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

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<template>
2+
<Dialog title="转派审批人" v-model="modelVisible" width="500">
3+
<el-form
4+
ref="formRef"
5+
:model="formData"
6+
:rules="formRules"
7+
label-width="110px"
8+
v-loading="formLoading"
9+
>
10+
<el-form-item label="新审批人" prop="assigneeUserId">
11+
<el-select v-model="formData.assigneeUserId" clearable style="width: 100%">
12+
<el-option
13+
v-for="item in userList"
14+
:key="item.id"
15+
:label="item.nickname"
16+
:value="item.id"
17+
/>
18+
</el-select>
19+
</el-form-item>
20+
</el-form>
21+
<template #footer>
22+
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
23+
<el-button @click="modelVisible = false">取 消</el-button>
24+
</template>
25+
</Dialog>
26+
</template>
27+
<script setup lang="ts">
28+
import * as TaskApi from '@/api/bpm/task'
29+
import * as UserApi from '@/api/system/user'
30+
31+
const modelVisible = ref(false) // 弹窗的是否展示
32+
const formLoading = ref(false) // 表单的加载中
33+
const formData = ref({
34+
id: '',
35+
assigneeUserId: undefined
36+
})
37+
const formRules = ref({
38+
assigneeUserId: [{ required: true, message: '新审批人不能为空', trigger: 'change' }]
39+
})
40+
41+
const formRef = ref() // 表单 Ref
42+
const userList = ref<any[]>([]) // 用户列表
43+
44+
/** 打开弹窗 */
45+
const open = async (id: string) => {
46+
modelVisible.value = true
47+
resetForm()
48+
formData.value.id = id
49+
// 获得用户列表
50+
userList.value = await UserApi.getSimpleUserList()
51+
}
52+
defineExpose({ open }) // 提供 openModal 方法，用于打开弹窗
53+
54+
/** 提交表单 */
55+
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
56+
const submitForm = async () => {
57+
// 校验表单
58+
if (!formRef) return
59+
const valid = await formRef.value.validate()
60+
if (!valid) return
61+
// 提交请求
62+
formLoading.value = true
63+
try {
64+
await TaskApi.updateTaskAssignee(formData.value)
65+
modelVisible.value = false
66+
// 发送操作成功的事件
67+
emit('success')
68+
} finally {
69+
formLoading.value = false
70+
}
71+
}
72+
73+
/** 重置表单 */
74+
const resetForm = () => {
75+
formData.value = {
76+
id: '',
77+
assigneeUserId: undefined
78+
}
79+
formRef.value?.resetFields()
80+
}
81+
</script>

‎src/views/bpm/processInstance/detail.vue renamed to ‎src/views/bpm/processInstance/detail/index.vue

Lines changed: 23 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -33,31 +33,21 @@
3333
</el-form-item>
3434
</el-form>
3535
<div style="margin-left: 10%; margin-bottom: 20px; font-size: 14px">
36-
<XButton
37-
pre-icon="ep:select"
38-
type="success"
39-
title="通过"
40-
@click="handleAudit(item, true)"
41-
/>
42-
<XButton
43-
pre-icon="ep:close"
44-
type="danger"
45-
title="不通过"
46-
@click="handleAudit(item, false)"
47-
/>
48-
<XButton
49-
pre-icon="ep:edit"
50-
type="primary"
51-
title="转办"
52-
@click="handleUpdateAssignee(item)"
53-
/>
54-
<XButton
55-
pre-icon="ep:position"
56-
type="primary"
57-
title="委派"
58-
@click="handleDelegate(item)"
59-
/>
60-
<XButton pre-icon="ep:back" type="warning" title="委派" @click="handleBack(item)" />
36+
<el-button type="success" @click="handleAudit(item, true)">
37+
<Icon icon="ep:select" /> 通过
38+
</el-button>
39+
<el-button type="danger" @click="handleAudit(item, false)">
40+
<Icon icon="ep:close" /> 不通过
41+
</el-button>
42+
<el-button type="primary" @click="openTaskUpdateAssigneeForm(item.id)">
43+
<Icon icon="ep:edit" /> 转办
44+
</el-button>
45+
<el-button type="primary" @click="handleDelegate(item)">
46+
<Icon icon="ep:position" /> 委派
47+
</el-button>
48+
<el-button type="warning" @click="handleBack(item)">
49+
<Icon icon="ep:back" /> 回退
50+
</el-button>
6151
</div>
6252
</el-col>
6353
</el-card>
@@ -85,7 +75,7 @@
8575
processInstance.businessKey
8676
"
8777
>
88-
<XButton type="primary" preIcon="ep:view" title="点击查看" />
78+
<el-button type="primary"><Icon icon="ep:view" /> 点击查看</el-button>
8979
</router-link>
9080
</div>
9181
</el-card>
@@ -153,42 +143,8 @@
153143
/>
154144
</el-card>
155145

156-
<!-- 对话框(转派审批人) -->
157-
<XModal v-model="updateAssigneeVisible" title="转派审批人" width="500">
158-
<el-form
159-
ref="updateAssigneeFormRef"
160-
:model="updateAssigneeForm"
161-
:rules="updateAssigneeRules"
162-
label-width="110px"
163-
>
164-
<el-form-item label="新审批人" prop="assigneeUserId">
165-
<el-select v-model="updateAssigneeForm.assigneeUserId" clearable style="width: 100%">
166-
<el-option
167-
v-for="item in userOptions"
168-
:key="parseInt(item.id)"
169-
:label="item.nickname"
170-
:value="parseInt(item.id)"
171-
/>
172-
</el-select>
173-
</el-form-item>
174-
</el-form>
175-
<!-- 操作按钮 -->
176-
<template #footer>
177-
<!-- 按钮：保存 -->
178-
<XButton
179-
type="primary"
180-
:title="t('action.save')"
181-
:loading="updateAssigneeLoading"
182-
@click="submitUpdateAssigneeForm"
183-
/>
184-
<!-- 按钮：关闭 -->
185-
<XButton
186-
:loading="updateAssigneeLoading"
187-
:title="t('dialog.close')"
188-
@click="updateAssigneeLoading = false"
189-
/>
190-
</template>
191-
</XModal>
146+
<!-- 弹窗：转派审批人 -->
147+
<TaskUpdateAssigneeForm ref="taskUpdateAssigneeFormRef" @success="getDetail" />
192148
</ContentWrap>
193149
</template>
194150
<script setup lang="ts">
@@ -200,13 +156,12 @@ import * as TaskApi from '@/api/bpm/task'
200156
import * as ActivityApi from '@/api/bpm/activity'
201157
import { formatPast2 } from '@/utils/formatTime'
202158
import { setConfAndFields2 } from '@/utils/formCreate'
203-
// import { OptionAttrs } from '@form-create/element-ui/types/config'
204159
import type { ApiAttrs } from '@form-create/element-ui/types/config'
205160
import { useUserStore } from '@/store/modules/user'
161+
import TaskUpdateAssigneeForm from './TaskUpdateAssigneeForm.vue'
206162
207163
const { query } = useRoute() // 查询参数
208164
const message = useMessage() // 消息弹窗
209-
const { t } = useI18n() // 国际化
210165
const { proxy } = getCurrentInstance() as any
211166
212167
// ========== 审批信息 ==========
@@ -294,55 +249,11 @@ const getTimelineItemType = (item) => {
294249
}
295250
296251
// ========== 审批记录 ==========
297-
const updateAssigneeVisible = ref(false)
298-
const updateAssigneeLoading = ref(false)
299-
const updateAssigneeForm = ref({
300-
id: undefined,
301-
assigneeUserId: undefined
302-
})
303-
const updateAssigneeRules = ref({
304-
assigneeUserId: [{ required: true, message: '新审批人不能为空', trigger: 'change' }]
305-
})
306-
const updateAssigneeFormRef = ref()
307-
const userOptions = ref<any[]>([])
308-
309-
// 处理转派审批人
310-
const handleUpdateAssignee = (task) => {
311-
// 设置表单
312-
resetUpdateAssigneeForm()
313-
updateAssigneeForm.value.id = task.id
314-
// 设置为打开
315-
updateAssigneeVisible.value = true
316-
}
317252
318-
// 提交转派审批人
319-
const submitUpdateAssigneeForm = async () => {
320-
// 1. 校验表单
321-
const elForm = unref(updateAssigneeFormRef)
322-
if (!elForm) return
323-
const valid = await elForm.validate()
324-
if (!valid) return
325-
326-
// 2.1 提交审批
327-
updateAssigneeLoading.value = true
328-
try {
329-
await TaskApi.updateTaskAssignee(updateAssigneeForm.value)
330-
// 2.2 设置为隐藏
331-
updateAssigneeVisible.value = false
332-
// 加载最新数据
333-
getDetail()
334-
} finally {
335-
updateAssigneeLoading.value = false
336-
}
337-
}
338-
339-
// 重置转派审批人表单
340-
const resetUpdateAssigneeForm = () => {
341-
updateAssigneeForm.value = {
342-
id: undefined,
343-
assigneeUserId: undefined
344-
}
345-
updateAssigneeFormRef.value?.resetFields()
253+
/** 转派审批人 */
254+
const taskUpdateAssigneeFormRef = ref()
255+
const openTaskUpdateAssigneeForm = (id: string) => {
256+
taskUpdateAssigneeFormRef.value.open(id)
346257
}
347258
348259
/** 处理审批退回的操作 */
@@ -375,7 +286,6 @@ const activityList = ref([])
375286
376287
// ========== 初始化 ==========
377288
onMounted(() => {
378-
// 加载详情
379289
getDetail()
380290
// 加载用户的列表
381291
UserApi.getSimpleUserList().then((data) => {

0 commit comments

Comments
 (0)