Skip to content

Commit 68564b7

Browse files
YunaiVgitee-org
YunaiV
authored and
gitee-org
committed
!90 【重构】Vue3 管理后台：[流程管理 -> 已办任务] 使用 Element Plus 原生实现
Merge pull request !90 from Chika/dev
2 parents b79a187 + c1e760d commit 68564b7

File tree

5 files changed

+208
-71
lines changed

5 files changed

+208
-71
lines changed

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
import request from '@/config/axios'
22

3+
export type TaskVO = {
4+
id: number
5+
}
6+
37
export const getTodoTaskPage = async (params) => {
48
return await request.get({ url: '/bpm/task/todo-page', params })
59
}
@@ -32,3 +36,8 @@ export const getTaskListByProcessInstanceId = async (processInstanceId) => {
3236
url: '/bpm/task/list-by-process-instance-id?processInstanceId=' + processInstanceId
3337
})
3438
}
39+
40+
// 导出任务
41+
export const exportTask = async (params) => {
42+
return await request.download({ url: '/bpm/task/export', params })
43+
}

‎src/router/modules/remaining.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -317,6 +317,18 @@ const remainingRouter: AppRouteRecordRaw[] = [
317317
title: '查看 OA 请假',
318318
activeMenu: 'bpm/oa/leave/detail'
319319
}
320+
},
321+
{
322+
path: '/bpm/task/done',
323+
component: () => import('@/views/bpm/task/done/index.vue'),
324+
name: 'TaskDone',
325+
meta: {
326+
noCache: true,
327+
hidden: true,
328+
canTo: true,
329+
title: '已办任务',
330+
activeMenu: 'bpm/task/done/index'
331+
}
320332
}
321333
]
322334
},

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

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<template>
2+
<Dialog title="详情" v-model="dialogVisible" :scroll="true" :max-height="500" width="800">
3+
<el-descriptions border :column="1">
4+
<el-descriptions-item label="任务编号" min-width="120">
5+
{{ detailData.id }}
6+
</el-descriptions-item>
7+
<el-descriptions-item label="任务名称">
8+
{{ detailData.name }}
9+
</el-descriptions-item>
10+
<el-descriptions-item label="所属流程">
11+
{{ detailData.processInstance.name }}
12+
</el-descriptions-item>
13+
<el-descriptions-item label="流程发起人">
14+
{{ detailData.processInstance.startUserNickname }}
15+
</el-descriptions-item>
16+
<el-descriptions-item label="状态">
17+
{{ detailData.result }}
18+
</el-descriptions-item>
19+
<el-descriptions-item label="原因">
20+
{{ detailData.reason }}
21+
</el-descriptions-item>
22+
<el-descriptions-item label="创建时间">
23+
{{ formatDate(detailData.createTime) }}
24+
</el-descriptions-item>
25+
</el-descriptions>
26+
</Dialog>
27+
</template>
28+
<script setup lang="ts">
29+
import { formatDate } from '@/utils/formatTime'
30+
import * as TaskApi from '@/api/bpm/task'
31+
const dialogVisible = ref(false) // 弹窗的是否展示
32+
const detailLoading = ref(false) // 表单的加载中
33+
const detailData = ref() // 详情数据
34+
35+
/** 打开弹窗 */
36+
const openModal = async (data: TaskApi.TaskVO) => {
37+
dialogVisible.value = true
38+
// 设置数据
39+
detailLoading.value = true
40+
try {
41+
detailData.value = data
42+
} finally {
43+
detailLoading.value = false
44+
}
45+
}
46+
defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
47+
</script>

‎src/views/bpm/task/done/done.data.ts

Lines changed: 0 additions & 52 deletions
This file was deleted.

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

Lines changed: 140 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,147 @@
11
<template>
22
<ContentWrap>
3-
<XTable @register="registerTable">
4-
<template #suspensionState_default="{ row }">
5-
<el-tag type="success" v-if="row.suspensionState === 1">激活</el-tag>
6-
<el-tag type="warning" v-if="row.suspensionState === 2">挂起</el-tag>
7-
</template>
8-
<template #actionbtns_default="{ row }">
9-
<!-- 操作: 审批进度 -->
10-
<XTextButton preIcon="ep:view" title="详情" @click="handleAudit(row)" />
11-
</template>
12-
</XTable>
3+
<!-- 搜索工作栏 -->
4+
<el-form
5+
class="-mb-15px"
6+
:model="queryParams"
7+
ref="queryFormRef"
8+
:inline="true"
9+
label-width="68px"
10+
>
11+
<el-form-item label="任务名称" prop="name">
12+
<el-input
13+
v-model="queryParams.name"
14+
placeholder="请输入任务名称"
15+
clearable
16+
@keyup.enter="handleQuery"
17+
/>
18+
</el-form-item>
19+
<el-form-item label="状态" prop="status">
20+
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
21+
<el-option
22+
v-for="dict in getIntDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT)"
23+
:key="dict.value"
24+
:label="dict.label"
25+
:value="dict.value"
26+
/>
27+
</el-select>
28+
</el-form-item>
29+
<el-form-item>
30+
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
31+
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
32+
<el-button
33+
type="success"
34+
plain
35+
@click="handleExport"
36+
:loading="exportLoading"
37+
v-hasPermi="['bpm:task:done:export']"
38+
>
39+
<Icon icon="ep:download" class="mr-5px" /> 导出
40+
</el-button>
41+
</el-form-item>
42+
</el-form>
1343
</ContentWrap>
44+
<!-- 列表 -->
45+
<ContentWrap>
46+
<el-table v-loading="loading" :data="list" align="center">
47+
<el-table-column label="任务编号" align="center" prop="id" width="300px" />
48+
<el-table-column label="任务名称" align="center" prop="name" />
49+
<el-table-column label="所属流程" align="center" prop="processInstance.name" />
50+
<el-table-column label="流程发起人" align="center" prop="processInstance.startUserNickname" />
51+
<el-table-column label="状态" align="center" prop="result">
52+
<template #default="scope">
53+
<dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT" :value="scope.row.result" />
54+
</template>
55+
</el-table-column>
56+
<el-table-column label="原因" align="center" prop="reason" />
57+
<el-table-column
58+
label="创建时间"
59+
align="center"
60+
prop="createTime"
61+
width="180"
62+
:formatter="dateFormatter"
63+
/>
64+
<el-table-column label="操作" align="center">
65+
<template #default="scope">
66+
<el-button link type="primary" @click="openModal(scope.row)"> 流程信息 </el-button>
67+
<el-button link type="primary" @click="handleAudit(scope.row)"> 流程详情 </el-button>
68+
</template>
69+
</el-table-column>
70+
</el-table>
71+
<!-- 分页 -->
72+
<Pagination
73+
:total="total"
74+
v-model:page="queryParams.pageNo"
75+
v-model:limit="queryParams.pageSize"
76+
@pagination="getList"
77+
/>
78+
</ContentWrap>
79+
<!-- 表单弹窗：详情 -->
80+
<TaskDoneDetail ref="modalRef" @success="getList" />
1481
</template>
15-
<script setup lang="ts">
16-
// 业务相关的 import
17-
import { allSchemas } from './done.data'
82+
<script setup lang="tsx">
83+
import { dateFormatter } from '@/utils/formatTime'
84+
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
1885
import * as TaskApi from '@/api/bpm/task'
86+
import download from '@/utils/download'
87+
import TaskDoneDetail from './Taskdetail.vue'
1988
20-
const { push } = useRouter() // 路由
21-
22-
const [registerTable] = useXTable({
23-
allSchemas: allSchemas,
24-
topActionSlots: false,
25-
getListApi: TaskApi.getDoneTaskPage
89+
const loading = ref(true) // 列表的加载中
90+
const total = ref(0) // 列表的总页数
91+
const list = ref([]) // 列表的数据
92+
const message = useMessage() // 消息弹窗
93+
const exportLoading = ref(false) // 导出的加载中
94+
const queryFormRef = ref() // 搜索的表单
95+
const queryParams = reactive({
96+
pageNo: 1,
97+
pageSize: 10,
98+
name: '',
99+
status: undefined,
100+
createTime: []
26101
})
27102
103+
/** 搜索按钮操作 */
104+
const handleQuery = () => {
105+
queryParams.pageNo = 1
106+
getList()
107+
}
108+
/** 详情操作 */
109+
const modalRef = ref()
110+
const openModal = (data: TaskApi.TaskVO) => {
111+
modalRef.value.openModal(data)
112+
}
113+
114+
/** 重置按钮操作 */
115+
const resetQuery = () => {
116+
queryFormRef.value.resetFields()
117+
handleQuery()
118+
}
119+
/** 查询任务列表 */
120+
const getList = async () => {
121+
loading.value = true
122+
try {
123+
const data = await TaskApi.getDoneTaskPage(queryParams)
124+
list.value = data.list
125+
total.value = data.total
126+
} finally {
127+
loading.value = false
128+
}
129+
}
130+
/** 导出按钮操作 */
131+
const handleExport = async () => {
132+
try {
133+
// 导出的二次确认
134+
await message.exportConfirm()
135+
// 发起导出
136+
exportLoading.value = true
137+
const data = await TaskApi.exportTask(queryParams)
138+
download.excel(data, '任务列表.xls')
139+
} catch {
140+
} finally {
141+
exportLoading.value = false
142+
}
143+
}
144+
const { push } = useRouter() // 路由
28145
// 处理审批按钮
29146
const handleAudit = (row) => {
30147
push({
@@ -34,4 +151,8 @@ const handleAudit = (row) => {
34151
}
35152
})
36153
}
154+
/** 初始化 **/
155+
onMounted(() => {
156+
getList()
157+
})
37158
</script>

0 commit comments

Comments
 (0)