Skip to content

Commit f974bf2

Browse files
YunaiVYunaiV
committed
【功能优化】BPM：我的流程，优化“流程状态”的展示
1 parent 986d1cd commit f974bf2

File tree

1 file changed

+43
-53
lines changed

1 file changed

+43
-53
lines changed

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

Lines changed: 43 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,7 @@
2424
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
2525
</el-form-item>
2626

27-
<!-- TODO @ tuituji：style 可以使用 unocss -->
28-
<el-form-item label="" prop="category" :style="{ position: 'absolute', right: '300px' }">
29-
<!-- TODO @tuituji：应该选择好分类，就触发搜索啦。 RE:done & to check-->
27+
<el-form-item label="" prop="category" class="absolute right-[300px]">
3028
<el-select
3129
v-model="queryParams.category"
3230
placeholder="请选择流程分类"
@@ -43,7 +41,7 @@
4341
</el-select>
4442
</el-form-item>
4543

46-
<el-form-item label="" prop="status" :style="{ position: 'absolute', right: '130px' }">
44+
<el-form-item label="" prop="status" class="absolute right-[130px]">
4745
<el-select
4846
v-model="queryParams.status"
4947
placeholder="请选择流程状态"
@@ -61,8 +59,7 @@
6159
</el-form-item>
6260

6361
<!-- 高级筛选 -->
64-
<!-- TODO @ tuituji：style 可以使用 unocss -->
65-
<el-form-item :style="{ position: 'absolute', right: '0px' }">
62+
<el-form-item class="absolute right-0">
6663
<el-popover
6764
:visible="showPopover"
6865
persistent
@@ -75,24 +72,9 @@
7572
<Icon icon="ep:plus" class="mr-5px" />高级筛选
7673
</el-button>
7774
</template>
78-
<!-- <el-form-item label="流程发起人" class="bold-label" label-position="top" prop="category">
79-
<el-select
80-
v-model="queryParams.category"
81-
placeholder="请选择流程发起人"
82-
clearable
83-
class="!w-390px"
84-
>
85-
<el-option
86-
v-for="category in categoryList"
87-
:key="category.code"
88-
:label="category.name"
89-
:value="category.code"
90-
/>
91-
</el-select>
92-
</el-form-item> -->
9375
<el-form-item
9476
label="所属流程"
95-
class="bold-label"
77+
class="font-bold"
9678
label-position="top"
9779
prop="processDefinitionKey"
9880
>
@@ -104,7 +86,7 @@
10486
class="!w-390px"
10587
/>
10688
</el-form-item>
107-
<el-form-item label="发起时间" class="bold-label" label-position="top" prop="createTime">
89+
<el-form-item label="发起时间" class="font-bold" label-position="top" prop="createTime">
10890
<el-date-picker
10991
v-model="queryParams.createTime"
11092
value-format="YYYY-MM-DD HH:mm:ss"
@@ -115,11 +97,12 @@
11597
class="!w-240px"
11698
/>
11799
</el-form-item>
118-
<!-- TODO tuituiji：参考钉钉，1）按照清空、取消、确认排序。2）右对齐。3）确认增加 primary -->
119-
<el-form-item class="bold-label" label-position="top">
120-
<el-button @click="handleQuery"> 确认</el-button>
121-
<el-button @click="showPopover = false"> 取消</el-button>
122-
<el-button @click="resetQuery"> 清空</el-button>
100+
<el-form-item class="font-bold" label-position="top">
101+
<div class="flex justify-end w-full">
102+
<el-button @click="resetQuery">清空</el-button>
103+
<el-button @click="showPopover = false">取消</el-button>
104+
<el-button type="primary" @click="handleQuery">确认</el-button>
105+
</div>
123106
</el-form-item>
124107
</el-popover>
125108
</el-form-item>
@@ -146,11 +129,37 @@
146129
min-width="100"
147130
fixed="left"
148131
/>
149-
<!-- TODO @芋艿：摘要 -->
150-
<!-- TODO tuituiji：参考钉钉；1）审批中时，展示审批任务；2）非审批中，展示状态 -->
151-
<el-table-column label="流程状态" prop="status" width="120">
132+
<el-table-column label="流程状态" prop="status" min-width="200">
152133
<template #default="scope">
153-
<dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS" :value="scope.row.status" />
134+
<!-- 审批中状态 -->
135+
<template
136+
v-if="
137+
scope.row.status === BpmProcessInstanceStatus.RUNNING && scope.row.tasks?.length > 0
138+
"
139+
>
140+
<!-- 单人审批 -->
141+
<template v-if="scope.row.tasks.length === 1">
142+
<span>
143+
<el-button link type="primary" @click="handleDetail(scope.row)">
144+
{{ scope.row.tasks[0].assigneeUser?.nickname }}
145+
</el-button>
146+
({{ scope.row.tasks[0].name }}) 审批中
147+
</span>
148+
</template>
149+
<!-- 多人审批 -->
150+
<template v-else>
151+
<span>
152+
<el-button link type="primary" @click="handleDetail(scope.row)">
153+
{{ scope.row.tasks[0].assigneeUser?.nickname }}
154+
</el-button>
155+
等 {{ scope.row.tasks.length }} 人 ({{ scope.row.tasks[0].name }})审批中
156+
</span>
157+
</template>
158+
</template>
159+
<!-- 非审批中状态 -->
160+
<template v-else>
161+
<dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS" :value="scope.row.status" />
162+
</template>
154163
</template>
155164
</el-table-column>
156165
<el-table-column
@@ -167,19 +176,6 @@
167176
width="180"
168177
:formatter="dateFormatter"
169178
/>
170-
<!--<el-table-column align="center" label="耗时" prop="durationInMillis" width="160">
171-
<template #default="scope">
172-
{{ scope.row.durationInMillis > 0 ? formatPast2(scope.row.durationInMillis) : '-' }}
173-
</template>
174-
</el-table-column>
175-
<el-table-column label="当前审批任务" align="center" prop="tasks" min-width="120px">
176-
<template #default="scope">
177-
<el-button type="primary" v-for="task in scope.row.tasks" :key="task.id" link>
178-
<span>{{ task.name }}</span>
179-
</el-button>
180-
</template>
181-
</el-table-column>
182-
-->
183179
<el-table-column label="操作" align="center" fixed="right" width="180">
184180
<template #default="scope">
185181
<el-button
@@ -215,14 +211,14 @@
215211
</ContentWrap>
216212
</template>
217213
<script lang="ts" setup>
218-
// TODO @tuituji：List 改成 <Icon icon="ep:plus" class="mr-5px" /> 类似这种组件哈。 RE:done & to check
219214
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
220215
import { dateFormatter } from '@/utils/formatTime'
221216
import { ElMessageBox } from 'element-plus'
222217
import * as ProcessInstanceApi from '@/api/bpm/processInstance'
223218
import { CategoryApi, CategoryVO } from '@/api/bpm/category'
224219
import { ProcessInstanceVO } from '@/api/bpm/processInstance'
225220
import * as DefinitionApi from '@/api/bpm/definition'
221+
import { BpmProcessInstanceStatus } from '@/utils/constants'
226222
227223
defineOptions({ name: 'BpmProcessInstanceMy' })
228224
@@ -244,6 +240,7 @@ const queryParams = reactive({
244240
})
245241
const queryFormRef = ref() // 搜索的表单
246242
const categoryList = ref<CategoryVO[]>([]) // 流程分类列表
243+
const showPopover = ref(false) // 高级筛选是否展示
247244
248245
/** 查询列表 */
249246
const getList = async () => {
@@ -257,8 +254,6 @@ const getList = async () => {
257254
}
258255
}
259256
260-
const showPopover = ref(false)
261-
262257
/** 搜索按钮操作 */
263258
const handleQuery = () => {
264259
queryParams.pageNo = 1
@@ -327,8 +322,3 @@ onMounted(async () => {
327322
categoryList.value = await CategoryApi.getCategorySimpleList()
328323
})
329324
</script>
330-
<style>
331-
.bold-label .el-form-item__label {
332-
font-weight: bold; /* 将字体加粗 */
333-
}
334-
</style>

0 commit comments

Comments
 (0)