Skip to content

Commit 4ba5dad

Browse files
YunaiVYunaiV
committed
【代码评审】工作流：我发起的审批列表
1 parent 91b1ecd commit 4ba5dad

File tree

1 file changed

+102
-100
lines changed

1 file changed

+102
-100
lines changed

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

Lines changed: 102 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -19,104 +19,102 @@
1919
class="!w-240px"
2020
/>
2121
</el-form-item>
22-
22+
2323
<el-form-item>
2424
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
25-
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
26-
<el-button
27-
type="primary"
28-
plain
29-
v-hasPermi="['bpm:process-instance:query']"
30-
@click="handleCreate(undefined)"
31-
>
32-
<Icon icon="ep:plus" class="mr-5px" /> 发起流程
33-
</el-button>
3425
</el-form-item>
3526

27+
<!-- TODO @ tuituji：style 可以使用 unocss -->
3628
<el-form-item label="" prop="category" :style="{ position: 'absolute', right: '130px' }">
37-
<el-select
38-
v-model="queryParams.category"
39-
placeholder="请选择流程分类"
40-
clearable
41-
class="!w-240px"
42-
>
43-
<el-option
44-
v-for="category in categoryList"
45-
:key="category.code"
46-
:label="category.name"
47-
:value="category.code"
48-
/>
49-
</el-select>
29+
<!-- TODO @tuituji：应该选择好分类，就触发搜索啦。 -->
30+
<el-select
31+
v-model="queryParams.category"
32+
placeholder="请选择流程分类"
33+
clearable
34+
class="!w-155px"
35+
>
36+
<el-option
37+
v-for="category in categoryList"
38+
:key="category.code"
39+
:label="category.name"
40+
:value="category.code"
41+
/>
42+
</el-select>
5043
</el-form-item>
5144

45+
<!-- 高级筛选 -->
46+
<!-- TODO @ tuituji：style 可以使用 unocss -->
5247
<el-form-item :style="{ position: 'absolute', right: '0px' }">
53-
<el-button v-popover="popoverRef" v-click-outside="onClickOutside" :icon="List" >
54-
高级筛选
55-
</el-button>
56-
57-
<el-popover
58-
ref="popoverRef"
59-
trigger="click"
60-
virtual-triggering
61-
persistent
62-
:width="400"
63-
:show-arrow="false"
64-
placement="bottom-end"
65-
>
66-
<el-form-item label="流程发起人" class="bold-label" label-position="top" prop="category">
67-
<el-select
68-
v-model="queryParams.category"
69-
placeholder="请选择流程发起人"
70-
clearable
71-
class="!w-390px"
48+
<el-button v-popover="popoverRef" v-click-outside="onClickOutside" :icon="List">
49+
高级筛选
50+
</el-button>
51+
<el-popover
52+
ref="popoverRef"
53+
trigger="click"
54+
virtual-triggering
55+
persistent
56+
:width="400"
57+
:show-arrow="false"
58+
placement="bottom-end"
59+
>
60+
<el-form-item label="流程发起人" class="bold-label" label-position="top" prop="category">
61+
<el-select
62+
v-model="queryParams.category"
63+
placeholder="请选择流程发起人"
64+
clearable
65+
class="!w-390px"
66+
>
67+
<el-option
68+
v-for="category in categoryList"
69+
:key="category.code"
70+
:label="category.name"
71+
:value="category.code"
72+
/>
73+
</el-select>
74+
</el-form-item>
75+
<el-form-item
76+
label="所属流程"
77+
class="bold-label"
78+
label-position="top"
79+
prop="processDefinitionKey"
7280
>
73-
<el-option
74-
v-for="category in categoryList"
75-
:key="category.code"
76-
:label="category.name"
77-
:value="category.code"
81+
<el-input
82+
v-model="queryParams.processDefinitionKey"
83+
placeholder="请输入流程定义的标识"
84+
clearable
85+
@keyup.enter="handleQuery"
86+
class="!w-390px"
7887
/>
79-
</el-select>
80-
</el-form-item>
81-
<el-form-item label="所属流程" class="bold-label" label-position="top" prop="processDefinitionKey">
82-
<el-input
83-
v-model="queryParams.processDefinitionKey"
84-
placeholder="请输入流程定义的标识"
85-
clearable
86-
@keyup.enter="handleQuery"
87-
class="!w-390px"
88-
/>
89-
</el-form-item>
90-
91-
<el-form-item label="流程状态" class="bold-label" label-position="top" prop="status">
92-
<el-select
93-
v-model="queryParams.status"
94-
placeholder="请选择流程状态"
95-
clearable
96-
class="!w-390px"
97-
>
98-
<el-option
99-
v-for="dict in getIntDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS)"
100-
:key="dict.value"
101-
:label="dict.label"
102-
:value="dict.value"
88+
</el-form-item>
89+
<el-form-item label="流程状态" class="bold-label" label-position="top" prop="status">
90+
<el-select
91+
v-model="queryParams.status"
92+
placeholder="请选择流程状态"
93+
clearable
94+
class="!w-390px"
95+
>
96+
<el-option
97+
v-for="dict in getIntDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS)"
98+
:key="dict.value"
99+
:label="dict.label"
100+
:value="dict.value"
101+
/>
102+
</el-select>
103+
</el-form-item>
104+
<el-form-item label="发起时间" class="bold-label" label-position="top" prop="createTime">
105+
<el-date-picker
106+
v-model="queryParams.createTime"
107+
value-format="YYYY-MM-DD HH:mm:ss"
108+
type="daterange"
109+
start-placeholder="开始日期"
110+
end-placeholder="结束日期"
111+
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
112+
class="!w-240px"
103113
/>
104-
</el-select>
105-
</el-form-item>
106-
<el-form-item label="发起时间" class="bold-label" label-position="top" prop="createTime">
107-
<el-date-picker
108-
v-model="queryParams.createTime"
109-
value-format="YYYY-MM-DD HH:mm:ss"
110-
type="daterange"
111-
start-placeholder="开始日期"
112-
end-placeholder="结束日期"
113-
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
114-
class="!w-240px"
115-
/>
116-
</el-form-item>
117-
</el-popover>
114+
</el-form-item>
115+
</el-popover>
116+
<!-- TODO @tuituji：这里应该有确认，和取消、清空搜索条件，三个按钮。 -->
118117
</el-form-item>
119-
120118
</el-form>
121119
</ContentWrap>
122120

@@ -131,6 +129,8 @@
131129
min-width="100"
132130
fixed="left"
133131
/>
132+
<!-- TODO @芋艿：摘要 -->
133+
<!-- TODO @tuituji：流程状态。可见需求文档里 -->
134134
<el-table-column label="流程状态" prop="status" width="120">
135135
<template #default="scope">
136136
<dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS" :value="scope.row.status" />
@@ -162,7 +162,7 @@
162162
</el-button>
163163
</template>
164164
</el-table-column>
165-
<el-table-column label="流程编号" align="center" prop="id" min-width="320px" />-->
165+
-->
166166
<el-table-column label="操作" align="center" fixed="right" width="180">
167167
<template #default="scope">
168168
<el-button
@@ -198,12 +198,13 @@
198198
</ContentWrap>
199199
</template>
200200
<script lang="ts" setup>
201-
import { Delete, Edit, Search, Share, Upload, List } from '@element-plus/icons-vue'
201+
// TODO @tuituji：List 改成 <Icon icon="ep:plus" class="mr-5px" /> 类似这种组件哈。
202+
import { List } from '@element-plus/icons-vue'
202203
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
203-
import { dateFormatter, formatPast2 } from '@/utils/formatTime'
204+
import { dateFormatter } from '@/utils/formatTime'
204205
import { ElMessageBox } from 'element-plus'
205206
import * as ProcessInstanceApi from '@/api/bpm/processInstance'
206-
import { CategoryApi } from '@/api/bpm/category'
207+
import { CategoryApi, CategoryVO } from '@/api/bpm/category'
207208
import { ProcessInstanceVO } from '@/api/bpm/processInstance'
208209
import * as DefinitionApi from '@/api/bpm/definition'
209210
@@ -226,7 +227,7 @@ const queryParams = reactive({
226227
createTime: []
227228
})
228229
const queryFormRef = ref() // 搜索的表单
229-
const categoryList = ref([]) // 流程分类列表
230+
const categoryList = ref<CategoryVO[]>([]) // 流程分类列表
230231
231232
/** 查询列表 */
232233
const getList = async () => {
@@ -297,6 +298,15 @@ const handleCancel = async (row) => {
297298
await getList()
298299
}
299300
301+
// TODO @tuituji：这个 import 是不是没用哈？
302+
import { ClickOutside as vClickOutside } from 'element-plus'
303+
304+
// TODO @tuituji：onClickAdvancedSearch。方法名叫这个，会更好一些哇？打开高级搜索。
305+
const popoverRef = ref()
306+
const onClickOutside = () => {
307+
unref(popoverRef).popperRef?.delayHide?.()
308+
}
309+
300310
/** 激活时 **/
301311
onActivated(() => {
302312
getList()
@@ -307,17 +317,9 @@ onMounted(async () => {
307317
await getList()
308318
categoryList.value = await CategoryApi.getCategorySimpleList()
309319
})
310-
311-
import { ref, unref } from 'vue'
312-
import { ClickOutside as vClickOutside } from 'element-plus'
313-
314-
const popoverRef = ref()
315-
const onClickOutside = () => {
316-
unref(popoverRef).popperRef?.delayHide?.()
317-
}
318320
</script>
319321
<style>
320322
.bold-label .el-form-item__label {
321323
font-weight: bold; /* 将字体加粗 */
322324
}
323-
</style>
325+
</style>

0 commit comments

Comments
 (0)