Skip to content

Commit 4388d65

Browse files
YunaiVYunaiV
committed
Vue3 重构：流程实例的详情（流程任务列表）
1 parent 9e6da44 commit 4388d65

File tree

2 files changed

+109
-109
lines changed

2 files changed

+109
-109
lines changed

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

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<template>
2+
<el-card class="box-card" v-loading="loading">
3+
<template #header>
4+
<span class="el-icon-picture-outline">审批记录</span>
5+
</template>
6+
<el-col :span="16" :offset="4">
7+
<div class="block">
8+
<el-timeline>
9+
<el-timeline-item
10+
v-for="(item, index) in tasks"
11+
:key="index"
12+
:icon="getTimelineItemIcon(item)"
13+
:type="getTimelineItemType(item)"
14+
>
15+
<p style="font-weight: 700">任务：{{ item.name }}</p>
16+
<el-card :body-style="{ padding: '10px' }">
17+
<label v-if="item.assigneeUser" style="font-weight: normal; margin-right: 30px">
18+
审批人：{{ item.assigneeUser.nickname }}
19+
<el-tag type="info" size="small">{{ item.assigneeUser.deptName }}</el-tag>
20+
</label>
21+
<label style="font-weight: normal" v-if="item.createTime">创建时间：</label>
22+
<label style="color: #8a909c; font-weight: normal">
23+
{{ parseTime(item?.createTime) }}
24+
</label>
25+
<label v-if="item.endTime" style="margin-left: 30px; font-weight: normal">
26+
审批时间：
27+
</label>
28+
<label v-if="item.endTime" style="color: #8a909c; font-weight: normal">
29+
{{ parseTime(item?.endTime) }}
30+
</label>
31+
<label v-if="item.durationInMillis" style="margin-left: 30px; font-weight: normal">
32+
耗时：
33+
</label>
34+
<label v-if="item.durationInMillis" style="color: #8a909c; font-weight: normal">
35+
{{ formatPast2(item?.durationInMillis) }}
36+
</label>
37+
<p v-if="item.reason">
38+
<el-tag :type="getTimelineItemType(item)">{{ item.reason }}</el-tag>
39+
</p>
40+
</el-card>
41+
</el-timeline-item>
42+
</el-timeline>
43+
</div>
44+
</el-col>
45+
</el-card>
46+
</template>
47+
<script setup lang="ts">
48+
import { parseTime, formatPast2 } from '@/utils/formatTime'
49+
import { propTypes } from '@/utils/propTypes'
50+
51+
defineProps({
52+
loading: propTypes.bool, // 是否加载中
53+
tasks: propTypes.array // 流程任务的数组
54+
})
55+
56+
/** 获得任务对应的 icon */
57+
const getTimelineItemIcon = (item) => {
58+
if (item.result === 1) {
59+
return 'el-icon-time'
60+
}
61+
if (item.result === 2) {
62+
return 'el-icon-check'
63+
}
64+
if (item.result === 3) {
65+
return 'el-icon-close'
66+
}
67+
if (item.result === 4) {
68+
return 'el-icon-remove-outline'
69+
}
70+
return ''
71+
}
72+
73+
/** 获得任务对应的颜色 */
74+
const getTimelineItemType = (item) => {
75+
if (item.result === 1) {
76+
return 'primary'
77+
}
78+
if (item.result === 2) {
79+
return 'success'
80+
}
81+
if (item.result === 3) {
82+
return 'danger'
83+
}
84+
if (item.result === 4) {
85+
return 'info'
86+
}
87+
return ''
88+
}
89+
</script>

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

Lines changed: 20 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -81,50 +81,7 @@
8181
</el-card>
8282

8383
<!-- 审批记录 -->
84-
<el-card class="box-card" v-loading="tasksLoad">
85-
<template #header>
86-
<span class="el-icon-picture-outline">审批记录</span>
87-
</template>
88-
<el-col :span="16" :offset="4">
89-
<div class="block">
90-
<el-timeline>
91-
<el-timeline-item
92-
v-for="(item, index) in tasks"
93-
:key="index"
94-
:icon="getTimelineItemIcon(item)"
95-
:type="getTimelineItemType(item)"
96-
>
97-
<p style="font-weight: 700">任务：{{ item.name }}</p>
98-
<el-card :body-style="{ padding: '10px' }">
99-
<label v-if="item.assigneeUser" style="font-weight: normal; margin-right: 30px">
100-
审批人：{{ item.assigneeUser.nickname }}
101-
<el-tag type="info" size="small">{{ item.assigneeUser.deptName }}</el-tag>
102-
</label>
103-
<label style="font-weight: normal" v-if="item.createTime">创建时间：</label>
104-
<label style="color: #8a909c; font-weight: normal">
105-
{{ parseTime(item?.createTime) }}
106-
</label>
107-
<label v-if="item.endTime" style="margin-left: 30px; font-weight: normal">
108-
审批时间：
109-
</label>
110-
<label v-if="item.endTime" style="color: #8a909c; font-weight: normal">
111-
{{ parseTime(item?.endTime) }}
112-
</label>
113-
<label v-if="item.durationInMillis" style="margin-left: 30px; font-weight: normal">
114-
耗时：
115-
</label>
116-
<label v-if="item.durationInMillis" style="color: #8a909c; font-weight: normal">
117-
{{ formatPast2(item?.durationInMillis) }}
118-
</label>
119-
<p v-if="item.reason">
120-
<el-tag :type="getTimelineItemType(item)">{{ item.reason }}</el-tag>
121-
</p>
122-
</el-card>
123-
</el-timeline-item>
124-
</el-timeline>
125-
</div>
126-
</el-col>
127-
</el-card>
84+
<ProcessInstanceTaskList :loading="tasksLoad" :tasks="tasks" />
12885

12986
<!-- 高亮流程图 -->
13087
<ProcessInstanceBpmnViewer
@@ -140,38 +97,46 @@
14097
</ContentWrap>
14198
</template>
14299
<script setup lang="ts">
143-
import { parseTime } from '@/utils/formatTime'
144-
import * as ProcessInstanceApi from '@/api/bpm/processInstance'
145-
import * as TaskApi from '@/api/bpm/task'
146-
import { formatPast2 } from '@/utils/formatTime'
147100
import { setConfAndFields2 } from '@/utils/formCreate'
148101
import type { ApiAttrs } from '@form-create/element-ui/types/config'
149102
import { useUserStore } from '@/store/modules/user'
103+
import * as DefinitionApi from '@/api/bpm/definition'
104+
import * as ProcessInstanceApi from '@/api/bpm/processInstance'
105+
import * as TaskApi from '@/api/bpm/task'
150106
import TaskUpdateAssigneeForm from './TaskUpdateAssigneeForm.vue'
151107
import ProcessInstanceBpmnViewer from './ProcessInstanceBpmnViewer.vue'
152-
import * as DefinitionApi from '@/api/bpm/definition'
153-
108+
import ProcessInstanceTaskList from './ProcessInstanceTaskList.vue'
154109
const { query } = useRoute() // 查询参数
155110
const message = useMessage() // 消息弹窗
156111
const { proxy } = getCurrentInstance() as any
157112
158-
// ========== 审批信息 ==========
159-
const id = query.id as unknown as number
113+
const userId = useUserStore().getUser.id // 当前登录的编号
114+
const id = query.id as unknown as number // 流程实例的编号
160115
const processInstanceLoading = ref(false) // 流程实例的加载中
161116
const processInstance = ref<any>({}) // 流程实例
117+
const bpmnXML = ref('') // BPMN XML
118+
const tasksLoad = ref(true) // 任务的加载中
119+
const tasks = ref<any[]>([]) // 任务列表
120+
// ========== 审批信息 ==========
162121
const runningTasks = ref<any[]>([]) // 运行中的任务
163122
const auditForms = ref<any[]>([]) // 审批任务的表单
164123
const auditRule = reactive({
165124
reason: [{ required: true, message: '审批建议不能为空', trigger: 'blur' }]
166125
})
126+
// ========== 申请信息 ==========
127+
const fApi = ref<ApiAttrs>() //
128+
const detailForm = ref({
129+
// 流程表单详情
130+
rule: [],
131+
option: {},
132+
value: {}
133+
})
167134
168-
// 处理审批通过和不通过的操作
135+
/** 处理审批通过和不通过的操作 */
169136
const handleAudit = async (task, pass) => {
170137
// 1.1 获得对应表单
171138
const index = runningTasks.value.indexOf(task)
172139
const auditFormRef = proxy.$refs['form' + index][0]
173-
// alert(auditFormRef)
174-
175140
// 1.2 校验表单
176141
const elForm = unref(auditFormRef)
177142
if (!elForm) return
@@ -194,54 +159,6 @@ const handleAudit = async (task, pass) => {
194159
getDetail()
195160
}
196161
197-
// ========== 申请信息 ==========
198-
const fApi = ref<ApiAttrs>()
199-
const userId = useUserStore().getUser.id // 当前登录的编号
200-
// 流程表单详情
201-
const detailForm = ref({
202-
rule: [],
203-
option: {},
204-
value: {}
205-
})
206-
207-
// ========== 审批记录 ==========
208-
const tasksLoad = ref(true)
209-
const tasks = ref<any[]>([])
210-
211-
const getTimelineItemIcon = (item) => {
212-
if (item.result === 1) {
213-
return 'el-icon-time'
214-
}
215-
if (item.result === 2) {
216-
return 'el-icon-check'
217-
}
218-
if (item.result === 3) {
219-
return 'el-icon-close'
220-
}
221-
if (item.result === 4) {
222-
return 'el-icon-remove-outline'
223-
}
224-
return ''
225-
}
226-
const getTimelineItemType = (item) => {
227-
if (item.result === 1) {
228-
return 'primary'
229-
}
230-
if (item.result === 2) {
231-
return 'success'
232-
}
233-
if (item.result === 3) {
234-
return 'danger'
235-
}
236-
if (item.result === 4) {
237-
return 'info'
238-
}
239-
return ''
240-
}
241-
242-
// ========== 审批记录 ==========
243-
const bpmnXML = ref('')
244-
245162
/** 转派审批人 */
246163
const taskUpdateAssigneeFormRef = ref()
247164
const openTaskUpdateAssigneeForm = (id: string) => {
@@ -352,9 +269,3 @@ const getDetail = () => {
352269
})
353270
}
354271
</script>
355-
<style lang="scss">
356-
.box-card {
357-
width: 100%;
358-
margin-bottom: 20px;
359-
}
360-
</style>

0 commit comments

Comments
 (0)