Skip to content

Commit 3c6bf37

Browse files
YunaiVYunaiV
committed
Vue3 重构：流程定义列表
1 parent b587d76 commit 3c6bf37

File tree

7 files changed

+151
-187
lines changed

7 files changed

+151
-187
lines changed

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

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

3-
export const getProcessDefinitionBpmnXMLApi = async (id: number) => {
3+
export const getProcessDefinitionBpmnXML = async (id: number) => {
44
return await request.get({
55
url: '/bpm/process-definition/get-bpmn-xml?id=' + id
66
})
77
}
88

9-
export const getProcessDefinitionPageApi = async (params) => {
9+
export const getProcessDefinitionPage = async (params) => {
1010
return await request.get({
1111
url: '/bpm/process-definition/page',
1212
params
1313
})
1414
}
1515

16-
export const getProcessDefinitionListApi = async (params) => {
16+
export const getProcessDefinitionList = async (params) => {
1717
return await request.get({
1818
url: '/bpm/process-definition/list',
1919
params

‎src/views/bpm/definition/definition.data.ts

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

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

Lines changed: 135 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -1,92 +1,138 @@
11
<template>
22
<ContentWrap>
3-
<!-- 列表 -->
4-
<XTable @register="registerTable">
5-
<!-- 流程名称 -->
6-
<template #name_default="{ row }">
7-
<XTextButton :title="row.name" @click="handleBpmnDetail(row.id)" />
8-
</template>
9-
<!-- 流程分类 -->
10-
<template #category_default="{ row }">
11-
<DictTag :type="DICT_TYPE.BPM_MODEL_CATEGORY" :value="Number(row?.category)" />
12-
</template>
13-
<!-- 表单信息 -->
14-
<template #formId_default="{ row }">
15-
<XTextButton
16-
v-if="row.formType === 10"
17-
:title="row.formName"
18-
@click="handleFormDetail(row)"
19-
/>
20-
<XTextButton v-else :title="row.formCustomCreatePath" @click="handleFormDetail(row)" />
21-
</template>
22-
<!-- 流程版本 -->
23-
<template #version_default="{ row }">
24-
<el-tag>v{{ row.version }}</el-tag>
25-
</template>
26-
<!-- 激活状态 -->
27-
<template #suspensionState_default="{ row }">
28-
<el-tag type="success" v-if="row.suspensionState === 1">激活</el-tag>
29-
<el-tag type="warning" v-if="row.suspensionState === 2">挂起</el-tag>
30-
</template>
31-
<!-- 操作 -->
32-
<template #actionbtns_default="{ row }">
33-
<XTextButton
34-
preIcon="ep:user"
35-
title="分配规则"
36-
v-hasPermi="['bpm:task-assign-rule:query']"
37-
@click="handleAssignRule(row)"
38-
/>
39-
</template>
40-
</XTable>
41-
42-
<!-- 表单详情的弹窗 -->
43-
<XModal v-model="formDetailVisible" width="800" title="表单详情" :show-footer="false">
44-
<form-create
45-
:rule="formDetailPreview.rule"
46-
:option="formDetailPreview.option"
47-
v-if="formDetailVisible"
3+
<el-table v-loading="loading" :data="list">
4+
<el-table-column label="定义编号" align="center" prop="id" width="400" />
5+
<el-table-column label="流程名称" align="center" prop="name" width="200">
6+
<template #default="scope">
7+
<el-button type="text" @click="handleBpmnDetail(scope.row)">
8+
<span>{{ scope.row.name }}</span>
9+
</el-button>
10+
</template>
11+
</el-table-column>
12+
<el-table-column label="定义分类" align="center" prop="category" width="100">
13+
<template #default="scope">
14+
<dict-tag :type="DICT_TYPE.BPM_MODEL_CATEGORY" :value="scope.row.category" />
15+
</template>
16+
</el-table-column>
17+
<el-table-column label="表单信息" align="center" prop="formType" width="200">
18+
<template #default="scope">
19+
<el-button
20+
v-if="scope.row.formType === 10"
21+
type="text"
22+
@click="handleFormDetail(scope.row)"
23+
>
24+
<span>{{ scope.row.formName }}</span>
25+
</el-button>
26+
<el-button v-else type="text" @click="handleFormDetail(scope.row)">
27+
<span>{{ scope.row.formCustomCreatePath }}</span>
28+
</el-button>
29+
</template>
30+
</el-table-column>
31+
<el-table-column label="流程版本" align="center" prop="processDefinition.version" width="80">
32+
<template #default="scope">
33+
<el-tag v-if="scope.row">v{{ scope.row.version }}</el-tag>
34+
<el-tag type="warning" v-else>未部署</el-tag>
35+
</template>
36+
</el-table-column>
37+
<el-table-column label="状态" align="center" prop="version" width="80">
38+
<template #default="scope">
39+
<el-tag type="success" v-if="scope.row.suspensionState === 1">激活</el-tag>
40+
<el-tag type="warning" v-if="scope.row.suspensionState === 2">挂起</el-tag>
41+
</template>
42+
</el-table-column>
43+
<el-table-column
44+
label="部署时间"
45+
align="center"
46+
prop="deploymentTime"
47+
width="180"
48+
:formatter="dateFormatter"
4849
/>
49-
</XModal>
50-
<!-- 流程模型图的预览 -->
51-
<XModal title="流程图" v-model="showBpmnOpen" width="80%" height="90%">
52-
<my-process-viewer
53-
key="designer"
54-
v-model="bpmnXML"
55-
:value="bpmnXML"
56-
v-bind="bpmnControlForm"
57-
:prefix="bpmnControlForm.prefix"
50+
<el-table-column
51+
label="定义描述"
52+
align="center"
53+
prop="description"
54+
width="300"
55+
show-overflow-tooltip
5856
/>
59-
</XModal>
57+
<el-table-column label="操作" align="center" width="150" fixed="right">
58+
<template #default="scope">
59+
<el-button
60+
link
61+
type="primary"
62+
@click="handleAssignRule(scope.row)"
63+
v-hasPermi="['bpm:task-assign-rule:query']"
64+
>
65+
分配规则
66+
</el-button>
67+
</template>
68+
</el-table-column>
69+
</el-table>
70+
<!-- 分页 -->
71+
<Pagination
72+
:total="total"
73+
v-model:page="queryParams.pageNo"
74+
v-model:limit="queryParams.pageSize"
75+
@pagination="getList"
76+
/>
6077
</ContentWrap>
78+
79+
<!-- 弹窗：表单详情 -->
80+
<Dialog title="表单详情" v-model="formDetailVisible" width="800">
81+
<form-create :rule="formDetailPreview.rule" :option="formDetailPreview.option" />
82+
</Dialog>
83+
84+
<!-- 弹窗：流程模型图的预览 -->
85+
<Dialog title="流程图" v-model="bpmnDetailVisible" width="800">
86+
<my-process-viewer
87+
key="designer"
88+
v-model="bpmnXML"
89+
:value="bpmnXML"
90+
v-bind="bpmnControlForm"
91+
:prefix="bpmnControlForm.prefix"
92+
/>
93+
</Dialog>
6194
</template>
62-
<script setup lang="ts">
63-
// 业务相关的 import
95+
96+
<script setup lang="ts" name="Form">
97+
import { DICT_TYPE } from '@/utils/dict'
98+
import { dateFormatter } from '@/utils/formatTime'
6499
import * as DefinitionApi from '@/api/bpm/definition'
65-
// import * as ModelApi from '@/api/bpm/model'
66-
import { allSchemas } from './definition.data'
67100
import { setConfAndFields2 } from '@/utils/formCreate'
68-
import { DICT_TYPE } from '@/utils/dict'
69-
70-
const bpmnXML = ref(null)
71-
const showBpmnOpen = ref(false)
72-
const bpmnControlForm = ref({
73-
prefix: 'flowable'
74-
})
75-
// const message = useMessage() // 消息弹窗
76-
const router = useRouter() // 路由
101+
const { push } = useRouter() // 路由
77102
const { query } = useRoute() // 查询参数
78103
79-
// ========== 列表相关 ==========
104+
const loading = ref(true) // 列表的加载中
105+
const total = ref(0) // 列表的总页数
106+
const list = ref([]) // 列表的数据
80107
const queryParams = reactive({
108+
pageNo: 1,
109+
pageSize: 10,
81110
key: query.key
82111
})
83-
const [registerTable] = useXTable({
84-
allSchemas: allSchemas,
85-
getListApi: DefinitionApi.getProcessDefinitionPageApi,
86-
params: queryParams
87-
})
88112
89-
// 流程表单的详情按钮操作
113+
/** 查询参数列表 */
114+
const getList = async () => {
115+
loading.value = true
116+
try {
117+
const data = await DefinitionApi.getProcessDefinitionPage(queryParams)
118+
list.value = data.list
119+
total.value = data.total
120+
} finally {
121+
loading.value = false
122+
}
123+
}
124+
125+
/** 点击任务分配按钮 */
126+
const handleAssignRule = (row) => {
127+
push({
128+
name: 'BpmTaskAssignRuleList',
129+
query: {
130+
modelId: row.id
131+
}
132+
})
133+
}
134+
135+
/** 流程表单的详情按钮操作 */
90136
const formDetailVisible = ref(false)
91137
const formDetailPreview = ref({
92138
rule: [],
@@ -99,32 +145,25 @@ const handleFormDetail = async (row) => {
99145
// 弹窗打开
100146
formDetailVisible.value = true
101147
} else {
102-
await router.push({
148+
await push({
103149
path: row.formCustomCreatePath
104150
})
105151
}
106152
}
107153
108-
// 流程图的详情按钮操作
109-
const handleBpmnDetail = (row) => {
110-
// TODO 芋艿：流程组件开发中
111-
console.log(row)
112-
DefinitionApi.getProcessDefinitionBpmnXMLApi(row).then((response) => {
113-
console.log(response, 'response')
114-
bpmnXML.value = response
115-
// 弹窗打开
116-
showBpmnOpen.value = true
117-
})
118-
// message.success('流程组件开发中，预计 2 月底完成')
154+
/** 流程图的详情按钮操作 */
155+
const bpmnDetailVisible = ref(false)
156+
const bpmnXML = ref(null)
157+
const bpmnControlForm = ref({
158+
prefix: 'flowable'
159+
})
160+
const handleBpmnDetail = async (row) => {
161+
bpmnXML.value = await DefinitionApi.getProcessDefinitionBpmnXML(row.id)
162+
bpmnDetailVisible.value = true
119163
}
120164
121-
// 点击任务分配按钮
122-
const handleAssignRule = (row) => {
123-
router.push({
124-
name: 'BpmTaskAssignRuleList',
125-
query: {
126-
processDefinitionId: row.id
127-
}
128-
})
129-
}
165+
/** 初始化 **/
166+
onMounted(() => {
167+
getList()
168+
})
130169
</script>

0 commit comments

Comments
 (0)