Skip to content

Commit dc0e947

Browse files
YunaiVYunaiV
committed
【功能优化】工作流：模型定义的列表，进行一定的简化，为后续把流程分类、流程定义融合在一个 vue 界面做准备。这样，和钉钉的界面更容易统一！
1 parent 28f768f commit dc0e947

File tree

2 files changed

+96
-115
lines changed

2 files changed

+96
-115
lines changed

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

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,7 @@
88
label-width="110px"
99
>
1010
<el-form-item label="流程标识" prop="key">
11-
<el-input
12-
v-model="formData.key"
13-
:disabled="!!formData.id"
14-
placeholder="请输入流标标识"
15-
style="width: 330px"
16-
/>
11+
<el-input v-model="formData.key" :disabled="!!formData.id" placeholder="请输入流标标识" />
1712
<el-tooltip
1813
v-if="!formData.id"
1914
class="item"
@@ -217,10 +212,9 @@ const submitForm = async () => {
217212
await ModelApi.createModel(data)
218213
// 提示，引导用户做后续的操作
219214
await ElMessageBox.alert(
220-
'<strong>新建模型成功！</strong>后续需要执行如下 3 个步骤：' +
221-
'<div>1. 点击【修改流程】按钮，配置流程的分类、表单信息</div>' +
222-
'<div>2. 点击【设计流程】按钮，绘制流程图</div>' +
223-
'<div>3. 点击【发布流程】按钮，完成流程的最终发布</div>' +
215+
'<strong>新建模型成功！</strong>后续需要执行如下 2 个步骤：' +
216+
'<div>1. 点击【设计流程】按钮，绘制流程图</div>' +
217+
'<div>2. 点击【发布流程】按钮，完成流程的最终发布</div>' +
224218
'另外，每次流程修改后，都需要点击【发布流程】按钮，才能正式生效！！！',
225219
'重要提示',
226220
{

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

Lines changed: 92 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -67,21 +67,14 @@
6767
<!-- 列表 -->
6868
<ContentWrap>
6969
<el-table v-loading="loading" :data="list">
70-
<el-table-column label="流程标识" align="center" prop="key" width="200" />
71-
<el-table-column label="流程名称" align="center" prop="name" width="200">
72-
<template #default="scope">
73-
<el-button type="primary" link @click="handleBpmnDetail(scope.row)">
74-
<span>{{ scope.row.name }}</span>
75-
</el-button>
76-
</template>
77-
</el-table-column>
78-
<el-table-column label="流程图标" align="center" prop="icon" width="100">
70+
<el-table-column label="流程名称" align="center" prop="name" min-width="200" />
71+
<el-table-column label="流程图标" align="center" prop="icon" min-width="100">
7972
<template #default="scope">
8073
<el-image :src="scope.row.icon" class="h-32px w-32px" />
8174
</template>
8275
</el-table-column>
83-
<el-table-column label="流程分类" align="center" prop="categoryName" width="100" />
84-
<el-table-column label="表单信息" align="center" prop="formType" width="200">
76+
<el-table-column label="流程分类" align="center" prop="categoryName" min-width="100" />
77+
<el-table-column label="表单信息" align="center" prop="formType" min-width="200">
8578
<template #default="scope">
8679
<el-button
8780
v-if="scope.row.formType === 10"
@@ -102,52 +95,36 @@
10295
<label v-else>暂无表单</label>
10396
</template>
10497
</el-table-column>
105-
<el-table-column
106-
label="创建时间"
107-
align="center"
108-
prop="createTime"
109-
width="180"
110-
:formatter="dateFormatter"
111-
/>
112-
<el-table-column label="最新部署的流程定义" align="center">
113-
<el-table-column
114-
label="流程版本"
115-
align="center"
116-
prop="processDefinition.version"
117-
width="100"
118-
>
119-
<template #default="scope">
120-
<el-tag v-if="scope.row.processDefinition">
121-
v{{ scope.row.processDefinition.version }}
122-
</el-tag>
123-
<el-tag v-else type="warning">未部署</el-tag>
124-
</template>
125-
</el-table-column>
126-
<el-table-column
127-
label="激活状态"
128-
align="center"
129-
prop="processDefinition.version"
130-
width="85"
131-
>
132-
<template #default="scope">
133-
<el-switch
134-
v-if="scope.row.processDefinition"
135-
v-model="scope.row.processDefinition.suspensionState"
136-
:active-value="1"
137-
:inactive-value="2"
138-
@change="handleChangeState(scope.row)"
139-
/>
140-
</template>
141-
</el-table-column>
142-
<el-table-column label="部署时间" align="center" prop="deploymentTime" width="180">
143-
<template #default="scope">
144-
<span v-if="scope.row.processDefinition">
145-
{{ formatDate(scope.row.processDefinition.deploymentTime) }}
146-
</span>
147-
</template>
148-
</el-table-column>
98+
<!-- <el-table-column label="激活状态" align="center" prop="processDefinition.version" width="85">-->
99+
<!-- <template #default="scope">-->
100+
<!-- <el-switch-->
101+
<!-- v-if="scope.row.processDefinition"-->
102+
<!-- v-model="scope.row.processDefinition.suspensionState"-->
103+
<!-- :active-value="1"-->
104+
<!-- :inactive-value="2"-->
105+
<!-- @change="handleChangeState(scope.row)"-->
106+
<!-- />-->
107+
<!-- </template>-->
108+
<!-- </el-table-column>-->
109+
<el-table-column label="最后发布" align="center" prop="deploymentTime" min-width="250">
110+
<template #default="scope">
111+
<span v-if="scope.row.processDefinition">
112+
{{ formatDate(scope.row.processDefinition.deploymentTime) }}
113+
</span>
114+
<el-tag v-if="scope.row.processDefinition" class="ml-10px">
115+
v{{ scope.row.processDefinition.version }}
116+
</el-tag>
117+
<el-tag v-else type="warning">未部署</el-tag>
118+
<el-tag
119+
v-if="scope.row.processDefinition.suspensionState === 2"
120+
type="warning"
121+
class="ml-10px"
122+
>
123+
已停用
124+
</el-tag>
125+
</template>
149126
</el-table-column>
150-
<el-table-column label="操作" align="center" width="250" fixed="right">
127+
<el-table-column label="操作" align="center" width="200" fixed="right">
151128
<template #default="scope">
152129
<el-button
153130
link
@@ -159,6 +136,7 @@
159136
</el-button>
160137
<el-button
161138
link
139+
class="!ml-5px"
162140
type="primary"
163141
@click="handleDesign(scope.row)"
164142
v-hasPermi="['bpm:model:update']"
@@ -167,28 +145,43 @@
167145
</el-button>
168146
<el-button
169147
link
148+
class="!ml-5px"
170149
type="primary"
171150
@click="handleDeploy(scope.row)"
172151
v-hasPermi="['bpm:model:deploy']"
173152
>
174153
发布
175154
</el-button>
176-
<el-button
177-
link
178-
type="primary"
179-
v-hasPermi="['bpm:process-definition:query']"
180-
@click="handleDefinitionList(scope.row)"
181-
>
182-
历史
183-
</el-button>
184-
<el-button
185-
link
186-
type="danger"
187-
@click="handleDelete(scope.row.id)"
188-
v-hasPermi="['bpm:model:delete']"
155+
<el-dropdown
156+
class="!align-middle ml-5px"
157+
@command="(command) => handleCommand(command, scope.row)"
158+
v-hasPermi="['bpm:process-definition:query', 'bpm:model:update', 'bpm:model:delete']"
189159
>
190-
删除
191-
</el-button>
160+
<el-button type="primary" link>更多</el-button>
161+
<template #dropdown>
162+
<el-dropdown-menu>
163+
<el-dropdown-item
164+
command="handleDefinitionList"
165+
v-if="checkPermi(['bpm:process-definition:query'])"
166+
>
167+
历史
168+
</el-dropdown-item>
169+
<el-dropdown-item
170+
command="handleChangeState"
171+
v-if="checkPermi(['bpm:model:update'])"
172+
>
173+
{{ scope.row.processDefinition.suspensionState === 1 ? '停用' : '启用' }}
174+
</el-dropdown-item>
175+
<el-dropdown-item
176+
type="danger"
177+
command="handleDelete"
178+
v-if="checkPermi(['bpm:model:delete'])"
179+
>
180+
删除
181+
</el-dropdown-item>
182+
</el-dropdown-menu>
183+
</template>
184+
</el-dropdown>
192185
</template>
193186
</el-table-column>
194187
</el-table>
@@ -208,28 +201,17 @@
208201
<Dialog title="表单详情" v-model="formDetailVisible" width="800">
209202
<form-create :rule="formDetailPreview.rule" :option="formDetailPreview.option" />
210203
</Dialog>
211-
212-
<!-- 弹窗：流程模型图的预览 -->
213-
<Dialog title="流程图" v-model="bpmnDetailVisible" width="800">
214-
<MyProcessViewer
215-
key="designer"
216-
v-model="bpmnXML"
217-
:value="bpmnXML as any"
218-
v-bind="bpmnControlForm"
219-
:prefix="bpmnControlForm.prefix"
220-
/>
221-
</Dialog>
222204
</template>
223205

224206
<script lang="ts" setup>
225-
import { dateFormatter, formatDate } from '@/utils/formatTime'
226-
import { MyProcessViewer } from '@/components/bpmnProcessDesigner/package'
207+
import { formatDate } from '@/utils/formatTime'
227208
import * as ModelApi from '@/api/bpm/model'
228209
import * as FormApi from '@/api/bpm/form'
229210
import ModelForm from './ModelForm.vue'
230211
import { setConfAndFields2 } from '@/utils/formCreate'
231212
import { CategoryApi } from '@/api/bpm/category'
232213
import { BpmModelType } from '@/utils/constants'
214+
import { checkPermi } from '@/utils/permission'
233215
234216
defineOptions({ name: 'BpmModel' })
235217
@@ -274,42 +256,59 @@ const resetQuery = () => {
274256
handleQuery()
275257
}
276258
259+
/** '更多'操作按钮 */
260+
const handleCommand = (command: string, row: any) => {
261+
switch (command) {
262+
case 'handleDefinitionList':
263+
handleDefinitionList(row)
264+
break
265+
case 'handleDelete':
266+
handleDelete(row)
267+
break
268+
case 'handleChangeState':
269+
handleChangeState(row)
270+
break
271+
default:
272+
break
273+
}
274+
}
275+
277276
/** 添加/修改操作 */
278277
const formRef = ref()
279278
const openForm = (type: string, id?: number) => {
280279
formRef.value.open(type, id)
281280
}
282281
283282
/** 删除按钮操作 */
284-
const handleDelete = async (id: number) => {
283+
const handleDelete = async (row: any) => {
285284
try {
286285
// 删除的二次确认
287286
await message.delConfirm()
288287
// 发起删除
289-
await ModelApi.deleteModel(id)
288+
await ModelApi.deleteModel(row.id)
290289
message.success(t('common.delSuccess'))
291290
// 刷新列表
292291
await getList()
293292
} catch {}
294293
}
295294
296295
/** 更新状态操作 */
297-
const handleChangeState = async (row) => {
296+
const handleChangeState = async (row: any) => {
298297
const state = row.processDefinition.suspensionState
298+
const newState = state === 1 ? 2 : 1
299299
try {
300300
// 修改状态的二次确认
301301
const id = row.id
302-
const statusState = state === 1 ? '激活' : '挂起'
302+
debugger
303+
const statusState = state === 1 ? '停用' : '启用'
303304
const content = '是否确认' + statusState + '流程名字为"' + row.name + '"的数据项?'
304305
await message.confirm(content)
305306
// 发起修改状态
306-
await ModelApi.updateModelState(id, state)
307+
await ModelApi.updateModelState(id, newState)
308+
message.success(statusState + '成功')
307309
// 刷新列表
308310
await getList()
309-
} catch {
310-
// 取消后，进行恢复按钮
311-
row.processDefinition.suspensionState = state === 1 ? 2 : 1
312-
}
311+
} catch {}
313312
}
314313
315314
/** 设计流程 */
@@ -374,18 +373,6 @@ const handleFormDetail = async (row) => {
374373
}
375374
}
376375
377-
/** 流程图的详情按钮操作 */
378-
const bpmnDetailVisible = ref(false)
379-
const bpmnXML = ref(null)
380-
const bpmnControlForm = ref({
381-
prefix: 'flowable'
382-
})
383-
const handleBpmnDetail = async (row) => {
384-
const data = await ModelApi.getModel(row.id)
385-
bpmnXML.value = data.bpmnXml || ''
386-
bpmnDetailVisible.value = true
387-
}
388-
389376
/** 初始化 **/
390377
onMounted(async () => {
391378
await getList()

0 commit comments

Comments
 (0)