Skip to content

Commit d0bc7f0

Browse files
xiaoPOooxiaoPOoo
committed
VUE3【流程管理-我的流程】elment-plus改造
1 parent 173c375 commit d0bc7f0

File tree

2 files changed

+211
-44
lines changed

2 files changed

+211
-44
lines changed

‎src/router/modules/remaining.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -341,6 +341,18 @@ const remainingRouter: AppRouteRecordRaw[] = [
341341
title: '代办任务',
342342
activeMenu: 'bpm/task/todo/index'
343343
}
344+
},
345+
{
346+
path: '/bpm/processInstance',
347+
component: () => import('@/views/bpm/processInstance/index.vue'),
348+
name: 'processInstance',
349+
meta: {
350+
noCache: true,
351+
hidden: true,
352+
canTo: true,
353+
title: '流程办理',
354+
activeMenu: 'bpm/processInstance/index'
355+
}
344356
}
345357
]
346358
},

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

Lines changed: 199 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,215 @@
11
<template>
22
<ContentWrap>
3-
<!-- 列表 -->
4-
<XTable @register="registerTable">
5-
<template #toolbar_buttons>
6-
<!-- 操作：新增 -->
7-
<XButton
8-
type="primary"
9-
preIcon="ep:zoom-in"
10-
title="发起流程"
11-
v-hasPermi="['bpm:process-instance:query']"
12-
@click="handleCreate"
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+
class="!w-240px"
1318
/>
14-
</template>
15-
<!-- 流程分类 -->
16-
<template #category_default="{ row }">
17-
<DictTag :type="DICT_TYPE.BPM_MODEL_CATEGORY" :value="Number(row?.category)" />
18-
</template>
19-
<!-- 当前审批任务 -->
20-
<template #tasks_default="{ row }">
21-
<el-button v-for="task in row.tasks" :key="task.id" link>
22-
<span>{{ task.name }}</span>
23-
</el-button>
24-
</template>
25-
<!-- 操作 -->
26-
<template #actionbtns_default="{ row }">
27-
<XTextButton
28-
preIcon="ep:view"
29-
:title="t('action.detail')"
30-
v-hasPermi="['bpm:process-instance:cancel']"
31-
@click="handleDetail(row)"
19+
</el-form-item>
20+
<el-form-item label="所属流程" prop="processDefinitionId">
21+
<el-input
22+
v-model="queryParams.processDefinitionId"
23+
placeholder="请输入流程定义的编号"
24+
clearable
25+
@keyup.enter="handleQuery"
26+
class="!w-240px"
3227
/>
33-
<XTextButton
34-
preIcon="ep:delete"
35-
title="取消"
36-
v-if="row.result === 1"
37-
v-hasPermi="['bpm:process-instance:query']"
38-
@click="handleCancel(row)"
28+
</el-form-item>
29+
<el-form-item label="流程分类" prop="category">
30+
<el-select v-model="queryParams.category" placeholder="请选择" clearable>
31+
<el-option
32+
v-for="dict in getIntDictOptions(DICT_TYPE.BPM_MODEL_CATEGORY)"
33+
:key="dict.value"
34+
:label="dict.label"
35+
:value="dict.value"
36+
/>
37+
</el-select>
38+
</el-form-item>
39+
<el-form-item label="状态" prop="status">
40+
<el-select v-model="queryParams.status" placeholder="请选择" clearable>
41+
<el-option
42+
v-for="dict in getIntDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS)"
43+
:key="dict.value"
44+
:label="dict.label"
45+
:value="dict.value"
46+
/>
47+
</el-select>
48+
</el-form-item>
49+
<el-form-item label="结果" prop="result">
50+
<el-select v-model="queryParams.result" placeholder="请选择" clearable>
51+
<el-option
52+
v-for="dict in getIntDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT)"
53+
:key="dict.value"
54+
:label="dict.label"
55+
:value="dict.value"
56+
/>
57+
</el-select>
58+
</el-form-item>
59+
<el-form-item label="提交时间" prop="createTime">
60+
<el-date-picker
61+
v-model="queryParams.createTime"
62+
value-format="YYYY-MM-DD HH:mm:ss"
63+
type="daterange"
64+
start-placeholder="开始日期"
65+
end-placeholder="结束日期"
66+
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
67+
class="!w-240px"
3968
/>
40-
</template>
41-
</XTable>
69+
</el-form-item>
70+
<el-form-item>
71+
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
72+
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
73+
</el-form-item>
74+
</el-form>
75+
<el-col>
76+
<el-row>
77+
<el-col>
78+
<!-- 操作：新增 -->
79+
<el-button
80+
type="primary"
81+
v-hasPermi="['bpm:process-instance:query']"
82+
@click="handleCreate"
83+
>发起流程</el-button
84+
>
85+
</el-col>
86+
</el-row>
87+
</el-col>
88+
</ContentWrap>
89+
90+
<!-- 列表 -->
91+
<ContentWrap>
92+
<el-table v-loading="loading" :data="list">
93+
<el-table-column label="流程编号" align="center" prop="id" width="300px" />
94+
<el-table-column label="流程名称" align="center" prop="name" />
95+
<el-table-column label="流程分类" align="center" prop="category">
96+
<template #default="scope">
97+
<dict-tag :type="DICT_TYPE.BPM_MODEL_CATEGORY" :value="scope.row.category" />
98+
</template>
99+
</el-table-column>
100+
<el-table-column label="当前审批任务" align="center" prop="tasks">
101+
<template #default="scope">
102+
<el-button type="primary" v-for="task in scope.row.tasks" :key="task.id" link>
103+
<span>{{ task.name }}</span>
104+
</el-button>
105+
</template>
106+
</el-table-column>
107+
<el-table-column label="状态" prop="status">
108+
<template #default="scope">
109+
<dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS" :value="scope.row.status" />
110+
</template>
111+
</el-table-column>
112+
<el-table-column label="结果" prop="result">
113+
<template #default="scope">
114+
<dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT" :value="scope.row.result" />
115+
</template>
116+
</el-table-column>
117+
<el-table-column
118+
label="提交时间"
119+
align="center"
120+
prop="createTime"
121+
width="180"
122+
:formatter="dateFormatter"
123+
/>
124+
<el-table-column
125+
label="结束时间"
126+
align="center"
127+
prop="endTime"
128+
width="180"
129+
:formatter="dateFormatter"
130+
/>
131+
<el-table-column label="操作" align="center">
132+
<template #default="scope">
133+
<el-button
134+
link
135+
type="primary"
136+
v-hasPermi="['bpm:process-instance:cancel']"
137+
@click="handleDetail(scope.row)"
138+
>详情</el-button
139+
>
140+
<el-button
141+
link
142+
type="primary"
143+
v-if="scope.row.result === 1"
144+
v-hasPermi="['bpm:process-instance:query']"
145+
@click="handleCancel(scope.row)"
146+
>取消</el-button
147+
>
148+
</template>
149+
</el-table-column>
150+
</el-table>
151+
<!-- 分页 -->
152+
<Pagination
153+
:total="total"
154+
v-model:page="queryParams.pageNo"
155+
v-model:limit="queryParams.pageSize"
156+
@pagination="getList"
157+
/>
42158
</ContentWrap>
43159
</template>
44160
<script setup lang="ts">
45161
// 全局相关的 import
46162
import { ElMessageBox } from 'element-plus'
47-
import { DICT_TYPE } from '@/utils/dict'
163+
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
48164
49165
// 业务相关的 import
50166
import * as ProcessInstanceApi from '@/api/bpm/processInstance'
51-
import { allSchemas } from './process.data'
52-
167+
// import { allSchemas } from './process.data'
168+
import { dateFormatter } from '@/utils/formatTime'
169+
const loading = ref(true) // 列表的加载中
170+
const total = ref(0) // 列表的总页数
171+
const list = ref([]) // 列表的数据
172+
const queryParams = reactive({
173+
pageNo: 1,
174+
pageSize: 10,
175+
name: '',
176+
processDefinitionId: undefined,
177+
category: undefined,
178+
status: undefined,
179+
result: undefined,
180+
createTime: []
181+
})
53182
const router = useRouter() // 路由
54183
const message = useMessage() // 消息弹窗
55184
const { t } = useI18n() // 国际化
185+
const queryFormRef = ref() // 搜索的表单
186+
/** 查询列表 */
187+
const getList = async () => {
188+
loading.value = true
189+
try {
190+
const data = await ProcessInstanceApi.getMyProcessInstancePage(queryParams)
191+
list.value = data.list
192+
total.value = data.total
193+
} finally {
194+
loading.value = false
195+
}
196+
}
197+
/** 搜索按钮操作 */
198+
const handleQuery = () => {
199+
queryParams.pageNo = 1
200+
getList()
201+
}
56202
203+
/** 重置按钮操作 */
204+
const resetQuery = () => {
205+
queryFormRef.value.resetFields()
206+
handleQuery()
207+
}
57208
// ========== 列表相关 ==========
58-
const [registerTable, { reload }] = useXTable({
59-
allSchemas: allSchemas,
60-
getListApi: ProcessInstanceApi.getMyProcessInstancePage
61-
})
209+
// const [reload] = useXTable({
210+
// allSchemas: allSchemas,
211+
// getListApi: ProcessInstanceApi.getMyProcessInstancePage
212+
// })
62213
63214
/** 发起流程操作 **/
64215
const handleCreate = () => {
@@ -87,7 +238,11 @@ const handleCancel = (row) => {
87238
}).then(async ({ value }) => {
88239
await ProcessInstanceApi.cancelProcessInstance(row.id, value)
89240
message.success('取消成功')
90-
reload()
241+
// reload()
91242
})
92243
}
244+
/** 初始化 **/
245+
onMounted(() => {
246+
getList()
247+
})
93248
</script>

0 commit comments

Comments
 (0)