Skip to content

Commit 455c192

Browse files
tuituji111tuituji111
committed
【优化】BPM 界面优化：工作流程/审批中心/我的流程 +3
1 parent f125df7 commit 455c192

File tree

3 files changed

+188
-53
lines changed

3 files changed

+188
-53
lines changed

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

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
</el-form-item>
2626

2727
<!-- TODO @ tuituji：style 可以使用 unocss -->
28-
<el-form-item label="" prop="category" :style="{ position: 'absolute', right: '130px' }">
28+
<el-form-item label="" prop="category" :style="{ position: 'absolute', right: '300px' }">
2929
<!-- TODO @tuituji：应该选择好分类，就触发搜索啦。 RE:done & to check-->
3030
<el-select
3131
v-model="queryParams.category"
@@ -43,6 +43,23 @@
4343
</el-select>
4444
</el-form-item>
4545

46+
<el-form-item label="" prop="status" :style="{ position: 'absolute', right: '130px' }">
47+
<el-select
48+
v-model="queryParams.status"
49+
placeholder="请选择流程状态"
50+
clearable
51+
class="!w-155px"
52+
@change="handleQuery"
53+
>
54+
<el-option
55+
v-for="dict in getIntDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS)"
56+
:key="dict.value"
57+
:label="dict.label"
58+
:value="dict.value"
59+
/>
60+
</el-select>
61+
</el-form-item>
62+
4663
<!-- 高级筛选 -->
4764
<!-- TODO @ tuituji：style 可以使用 unocss -->
4865
<el-form-item :style="{ position: 'absolute', right: '0px' }">
@@ -88,21 +105,6 @@
88105
class="!w-390px"
89106
/>
90107
</el-form-item>
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"
103-
/>
104-
</el-select>
105-
</el-form-item>
106108
<el-form-item label="发起时间" class="bold-label" label-position="top" prop="createTime">
107109
<el-date-picker
108110
v-model="queryParams.createTime"

‎src/views/bpm/task/done/index.vue

Lines changed: 94 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
class="-mb-15px"
1717
label-width="68px"
1818
>
19-
<el-form-item label="任务名称" prop="name">
19+
<el-form-item label="" prop="name">
2020
<el-input
2121
v-model="queryParams.name"
2222
class="!w-240px"
@@ -25,27 +25,96 @@
2525
@keyup.enter="handleQuery"
2626
/>
2727
</el-form-item>
28-
<el-form-item label="创建时间" prop="createTime">
29-
<el-date-picker
30-
v-model="queryParams.createTime"
31-
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
32-
class="!w-240px"
33-
end-placeholder="结束日期"
34-
start-placeholder="开始日期"
35-
type="daterange"
36-
value-format="YYYY-MM-DD HH:mm:ss"
37-
/>
38-
</el-form-item>
3928
<el-form-item>
4029
<el-button @click="handleQuery">
4130
<Icon class="mr-5px" icon="ep:search" />
4231
搜索
4332
</el-button>
44-
<el-button @click="resetQuery">
45-
<Icon class="mr-5px" icon="ep:refresh" />
46-
重置
47-
</el-button>
4833
</el-form-item>
34+
35+
<el-form-item label="" prop="category" :style="{ position: 'absolute', right: '300px' }">
36+
<el-select
37+
v-model="queryParams.category"
38+
placeholder="请选择流程分类"
39+
clearable
40+
class="!w-155px"
41+
@change="handleQuery"
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>
50+
</el-form-item>
51+
52+
<el-form-item label="" prop="status" :style="{ position: 'absolute', right: '130px' }">
53+
<el-select
54+
v-model="queryParams.status"
55+
placeholder="请选择流程状态"
56+
clearable
57+
class="!w-155px"
58+
@change="handleQuery"
59+
>
60+
<el-option
61+
v-for="dict in getIntDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS)"
62+
:key="dict.value"
63+
:label="dict.label"
64+
:value="dict.value"
65+
/>
66+
</el-select>
67+
</el-form-item>
68+
69+
<!-- 高级筛选 -->
70+
<el-form-item :style="{ position: 'absolute', right: '0px' }">
71+
<el-popover
72+
:visible="showPopover"
73+
persistent
74+
:width="400"
75+
:show-arrow="false"
76+
placement="bottom-end"
77+
>
78+
<template #reference>
79+
<el-button @click="showPopover = !showPopover" >
80+
<Icon icon="ep:plus" class="mr-5px" />高级筛选
81+
</el-button>
82+
83+
</template>
84+
<el-form-item label="流程发起人" class="bold-label" label-position="top" prop="category">
85+
<el-select
86+
v-model="queryParams.category"
87+
placeholder="请选择流程发起人"
88+
clearable
89+
class="!w-390px"
90+
>
91+
<el-option
92+
v-for="category in categoryList"
93+
:key="category.code"
94+
:label="category.name"
95+
:value="category.code"
96+
/>
97+
</el-select>
98+
</el-form-item>
99+
<el-form-item label="发起时间" class="bold-label" label-position="top" prop="createTime">
100+
<el-date-picker
101+
v-model="queryParams.createTime"
102+
value-format="YYYY-MM-DD HH:mm:ss"
103+
type="daterange"
104+
start-placeholder="开始日期"
105+
end-placeholder="结束日期"
106+
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
107+
class="!w-240px"
108+
/>
109+
</el-form-item>
110+
<el-form-item class="bold-label" label-position="top">
111+
<el-button @click="handleQuery"> 确认</el-button>
112+
<el-button @click="showPopover = false"> 取消</el-button>
113+
<el-button @click="resetQuery"> 清空</el-button>
114+
</el-form-item>
115+
</el-popover>
116+
</el-form-item>
117+
49118
</el-form>
50119
</ContentWrap>
51120

@@ -110,9 +179,10 @@
110179
</ContentWrap>
111180
</template>
112181
<script lang="ts" setup>
113-
import { DICT_TYPE } from '@/utils/dict'
182+
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
114183
import { dateFormatter, formatPast2 } from '@/utils/formatTime'
115184
import * as TaskApi from '@/api/bpm/task'
185+
import { CategoryApi, CategoryVO } from '@/api/bpm/category'
116186
117187
defineOptions({ name: 'BpmTodoTask' })
118188
@@ -125,9 +195,13 @@ const queryParams = reactive({
125195
pageNo: 1,
126196
pageSize: 10,
127197
name: '',
198+
category: undefined,
199+
status: undefined,
128200
createTime: []
129201
})
130202
const queryFormRef = ref() // 搜索的表单
203+
const categoryList = ref<CategoryVO[]>([]) // 流程分类列表
204+
const showPopover = ref(false)
131205
132206
/** 查询任务列表 */
133207
const getList = async () => {
@@ -165,7 +239,8 @@ const handleAudit = (row: any) => {
165239
}
166240
167241
/** 初始化 **/
168-
onMounted(() => {
169-
getList()
242+
onMounted(async () => {
243+
await getList()
244+
categoryList.value = await CategoryApi.getCategorySimpleList()
170245
})
171246
</script>

‎src/views/bpm/task/todo/index.vue

Lines changed: 76 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
class="-mb-15px"
1717
label-width="68px"
1818
>
19-
<el-form-item label="任务名称" prop="name">
19+
<el-form-item label="" prop="name">
2020
<el-input
2121
v-model="queryParams.name"
2222
class="!w-240px"
@@ -25,27 +25,79 @@
2525
@keyup.enter="handleQuery"
2626
/>
2727
</el-form-item>
28-
<el-form-item label="创建时间" prop="createTime">
29-
<el-date-picker
30-
v-model="queryParams.createTime"
31-
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
32-
class="!w-240px"
33-
end-placeholder="结束日期"
34-
start-placeholder="开始日期"
35-
type="daterange"
36-
value-format="YYYY-MM-DD HH:mm:ss"
37-
/>
38-
</el-form-item>
3928
<el-form-item>
4029
<el-button @click="handleQuery">
4130
<Icon class="mr-5px" icon="ep:search" />
4231
搜索
4332
</el-button>
44-
<el-button @click="resetQuery">
45-
<Icon class="mr-5px" icon="ep:refresh" />
46-
重置
47-
</el-button>
4833
</el-form-item>
34+
35+
<el-form-item label="" prop="category" :style="{ position: 'absolute', right: '130px' }">
36+
<el-select
37+
v-model="queryParams.category"
38+
placeholder="请选择流程分类"
39+
clearable
40+
class="!w-155px"
41+
@change="handleQuery"
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>
50+
</el-form-item>
51+
52+
<!-- 高级筛选 -->
53+
<el-form-item :style="{ position: 'absolute', right: '0px' }">
54+
<el-popover
55+
:visible="showPopover"
56+
persistent
57+
:width="400"
58+
:show-arrow="false"
59+
placement="bottom-end"
60+
>
61+
<template #reference>
62+
<el-button @click="showPopover = !showPopover" >
63+
<Icon icon="ep:plus" class="mr-5px" />高级筛选
64+
</el-button>
65+
66+
</template>
67+
<el-form-item label="流程发起人" class="bold-label" label-position="top" prop="category">
68+
<el-select
69+
v-model="queryParams.category"
70+
placeholder="请选择流程发起人"
71+
clearable
72+
class="!w-390px"
73+
>
74+
<el-option
75+
v-for="category in categoryList"
76+
:key="category.code"
77+
:label="category.name"
78+
:value="category.code"
79+
/>
80+
</el-select>
81+
</el-form-item>
82+
<el-form-item label="发起时间" class="bold-label" label-position="top" prop="createTime">
83+
<el-date-picker
84+
v-model="queryParams.createTime"
85+
value-format="YYYY-MM-DD HH:mm:ss"
86+
type="daterange"
87+
start-placeholder="开始日期"
88+
end-placeholder="结束日期"
89+
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
90+
class="!w-240px"
91+
/>
92+
</el-form-item>
93+
<el-form-item class="bold-label" label-position="top">
94+
<el-button @click="handleQuery"> 确认</el-button>
95+
<el-button @click="showPopover = false"> 取消</el-button>
96+
<el-button @click="resetQuery"> 清空</el-button>
97+
</el-form-item>
98+
</el-popover>
99+
</el-form-item>
100+
49101
</el-form>
50102
</ContentWrap>
51103

@@ -95,6 +147,7 @@
95147
<script lang="ts" setup>
96148
import { dateFormatter } from '@/utils/formatTime'
97149
import * as TaskApi from '@/api/bpm/task'
150+
import { CategoryApi, CategoryVO } from '@/api/bpm/category'
98151
99152
defineOptions({ name: 'BpmTodoTask' })
100153
@@ -107,9 +160,11 @@ const queryParams = reactive({
107160
pageNo: 1,
108161
pageSize: 10,
109162
name: '',
163+
category: undefined,
110164
createTime: []
111165
})
112166
const queryFormRef = ref() // 搜索的表单
167+
const categoryList = ref<CategoryVO[]>([]) // 流程分类列表
113168
114169
/** 查询任务列表 */
115170
const getList = async () => {
@@ -123,6 +178,8 @@ const getList = async () => {
123178
}
124179
}
125180
181+
const showPopover = ref(false)
182+
126183
/** 搜索按钮操作 */
127184
const handleQuery = () => {
128185
queryParams.pageNo = 1
@@ -147,7 +204,8 @@ const handleAudit = (row: any) => {
147204
}
148205
149206
/** 初始化 **/
150-
onMounted(() => {
151-
getList()
207+
onMounted(async () => {
208+
await getList()
209+
categoryList.value = await CategoryApi.getCategorySimpleList()
152210
})
153211
</script>

0 commit comments

Comments
 (0)