Skip to content

Commit 52c393a

Browse files
LesanOuOLesanOuO
committed
feat: BPM-报表
1 parent 7db5ac8 commit 52c393a

File tree

3 files changed

+204
-0
lines changed

3 files changed

+204
-0
lines changed

‎src/api/bpm/processInstance/index.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,10 @@ export const getProcessInstanceManagerPage = async (params: any) => {
6060
return await request.get({ url: '/bpm/process-instance/manager-page', params })
6161
}
6262

63+
export const getProcessInstanceReportPage = async (params: any) => {
64+
return await request.get({ url: '/bpm/process-instance/report-page', params })
65+
}
66+
6367
export const createProcessInstance = async (data) => {
6468
return await request.post({ url: '/bpm/process-instance/create', data: data })
6569
}

‎src/views/bpm/model/CategoryDraggableModel.vue

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -192,6 +192,13 @@
192192
<el-dropdown-item command="handleDefinitionList" v-if="hasPermiPdQuery">
193193
历史
194194
</el-dropdown-item>
195+
<el-dropdown-item
196+
command="handleReport"
197+
v-if="checkPermi(['bpm:model:report']) && scope.row.processDefinition"
198+
:disabled="!isManagerUser(scope.row)"
199+
>
200+
报表
201+
</el-dropdown-item>
195202
<el-dropdown-item
196203
command="handleChangeState"
197204
v-if="hasPermiUpdate && scope.row.processDefinition"
@@ -301,6 +308,7 @@ const { t } = useI18n() // 国际化
301308
const { push } = useRouter() // 路由
302309
const userStore = useUserStoreWithOut() // 用户信息缓存
303310
const isDark = computed(() => useAppStore().getIsDark) // 是否黑暗模式
311+
const router = useRouter() // 路由
304312
305313
const isModelSorting = ref(false) // 是否正处于排序状态
306314
const originalData = ref<ModelInfo[]>([]) // 原始数据
@@ -349,6 +357,15 @@ const handleModelCommand = (command: string, row: any) => {
349357
case 'handleClean':
350358
handleClean(row)
351359
break
360+
case 'handleReport':
361+
router.push({
362+
name: 'BpmProcessInstanceReport',
363+
query: {
364+
processDefinitionId: row.processDefinition.id,
365+
processDefinitionKey: row.key
366+
}
367+
})
368+
break
352369
default:
353370
break
354371
}

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

Lines changed: 183 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,183 @@
1+
<template>
2+
<doc-alert title="工作流手册" url="https://doc.iocoder.cn/bpm/" />
3+
4+
<ContentWrap>
5+
<!-- 搜索工作栏 -->
6+
<el-form
7+
class="-mb-15px"
8+
:model="queryParams"
9+
ref="queryFormRef"
10+
:inline="true"
11+
label-width="68px"
12+
>
13+
<el-form-item label="发起人" prop="startUserId">
14+
<el-select v-model="queryParams.startUserId" placeholder="请选择发起人" class="!w-240px">
15+
<el-option
16+
v-for="user in userList"
17+
:key="user.id"
18+
:label="user.nickname"
19+
:value="user.id"
20+
/>
21+
</el-select>
22+
</el-form-item>
23+
<el-form-item label="流程名称" prop="name">
24+
<el-input
25+
v-model="queryParams.name"
26+
placeholder="请输入流程名称"
27+
clearable
28+
@keyup.enter="handleQuery"
29+
class="!w-240px"
30+
/>
31+
</el-form-item>
32+
<el-form-item label="流程状态" prop="status">
33+
<el-select
34+
v-model="queryParams.status"
35+
placeholder="请选择流程状态"
36+
clearable
37+
class="!w-240px"
38+
>
39+
<el-option
40+
v-for="dict in getIntDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS)"
41+
:key="dict.value"
42+
:label="dict.label"
43+
:value="dict.value"
44+
/>
45+
</el-select>
46+
</el-form-item>
47+
<el-form-item label="发起时间" prop="createTime">
48+
<el-date-picker
49+
v-model="queryParams.createTime"
50+
value-format="YYYY-MM-DD HH:mm:ss"
51+
type="daterange"
52+
start-placeholder="开始日期"
53+
end-placeholder="结束日期"
54+
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
55+
class="!w-240px"
56+
/>
57+
</el-form-item>
58+
<el-form-item label="结束时间" prop="endTime">
59+
<el-date-picker
60+
v-model="queryParams.endTime"
61+
value-format="YYYY-MM-DD HH:mm:ss"
62+
type="daterange"
63+
start-placeholder="开始日期"
64+
end-placeholder="结束日期"
65+
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
66+
class="!w-240px"
67+
/>
68+
</el-form-item>
69+
<el-form-item>
70+
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
71+
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
72+
</el-form-item>
73+
</el-form>
74+
</ContentWrap>
75+
76+
<!-- 列表 -->
77+
<ContentWrap>
78+
<el-table v-loading="loading" border :data="list">
79+
<el-table-column label="流程名称" align="center" prop="name" fixed="left" width="200" />
80+
<el-table-column label="流程发起人" align="center" prop="startUser.nickname" width="120" />
81+
<el-table-column label="流程状态" prop="status" width="120">
82+
<template #default="scope">
83+
<dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS" :value="scope.row.status" />
84+
</template>
85+
</el-table-column>
86+
<el-table-column
87+
label="发起时间"
88+
align="center"
89+
prop="startTime"
90+
width="180"
91+
:formatter="dateFormatter"
92+
/>
93+
<el-table-column
94+
label="结束时间"
95+
align="center"
96+
prop="endTime"
97+
width="180"
98+
:formatter="dateFormatter"
99+
/>
100+
<el-table-column
101+
v-for="(item, index) in formFieldsList"
102+
:key="index"
103+
:label="item.title"
104+
:prop="item.field"
105+
width="120"
106+
>
107+
<!-- TODO 可以根据formField的type进行展示方式的控制，现在全部以字符串 -->
108+
<template #default="scope">
109+
{{ scope.row.variables.find(variable => variable.key === item.field)?.value }}
110+
</template>
111+
</el-table-column>
112+
</el-table>
113+
<!-- 分页 -->
114+
<Pagination
115+
:total="total"
116+
v-model:page="queryParams.pageNo"
117+
v-model:limit="queryParams.pageSize"
118+
@pagination="getList"
119+
/>
120+
</ContentWrap>
121+
</template>
122+
<script lang="ts" setup>
123+
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
124+
import { dateFormatter } from '@/utils/formatTime'
125+
import * as ProcessInstanceApi from '@/api/bpm/processInstance'
126+
import * as UserApi from '@/api/system/user'
127+
128+
defineOptions({ name: 'BpmProcessInstanceReport' })
129+
130+
const router = useRouter() // 路由
131+
const { query } = useRoute() // 查询参数
132+
const message = useMessage() // 消息弹窗
133+
const { t } = useI18n() // 国际化
134+
135+
const loading = ref(true) // 列表的加载中
136+
const total = ref(0) // 列表的总页数
137+
const list = ref([]) // 列表的数据
138+
const formFieldsList = ref([])
139+
const queryParams = reactive({
140+
pageNo: 1,
141+
pageSize: 10,
142+
startUserId: undefined,
143+
name: '',
144+
processDefinitionId: query.processDefinitionId,
145+
processDefinitionKey: query.processDefinitionKey,
146+
status: undefined,
147+
createTime: [],
148+
endTime: []
149+
})
150+
const queryFormRef = ref() // 搜索的表单
151+
const userList = ref<any[]>([]) // 用户列表
152+
153+
/** 查询列表 */
154+
const getList = async () => {
155+
loading.value = true
156+
try {
157+
const data = await ProcessInstanceApi.getProcessInstanceReportPage(queryParams)
158+
list.value = data.pageResult.list
159+
total.value = data.pageResult.total
160+
formFieldsList.value = data.formFields
161+
} finally {
162+
loading.value = false
163+
}
164+
}
165+
166+
/** 搜索按钮操作 */
167+
const handleQuery = () => {
168+
queryParams.pageNo = 1
169+
getList()
170+
}
171+
172+
/** 重置按钮操作 */
173+
const resetQuery = () => {
174+
queryFormRef.value.resetFields()
175+
handleQuery()
176+
}
177+
178+
/** 初始化 **/
179+
onMounted(async () => {
180+
await getList()
181+
userList.value = await UserApi.getSimpleUserList()
182+
})
183+
</script>

0 commit comments

Comments
 (0)