Skip to content

Commit 8985936

Browse files
YunaiVYunaiV
committed
【功能新增】工作流：BPM Model 增加 type 标记是 BPMN 设计器，还是 SIMPLE 钉钉设计器
1 parent ce0f6ed commit 8985936

File tree

6 files changed

+134
-104
lines changed

6 files changed

+134
-104
lines changed

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,10 @@ export const updateModel = async (data: ModelVO) => {
3838
return await request.put({ url: '/bpm/model/update', data: data })
3939
}
4040

41+
export const updateModelBpmn = async (data: ModelVO) => {
42+
return await request.put({ url: '/bpm/model/update-bpmn', data: data })
43+
}
44+
4145
// 任务状态修改
4246
export const updateModelState = async (id: number, state: number) => {
4347
const data = {

‎src/utils/constants.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -437,3 +437,15 @@ export const ErpBizType = {
437437
SALE_OUT: 21,
438438
SALE_RETURN: 22
439439
}
440+
441+
// ========== BPM 模块 ==========
442+
443+
export const BpmModelType = {
444+
BPMN: 10, // BPMN 设计器
445+
SIMPLE: 20 // 简易设计器
446+
}
447+
448+
export const BpmModelFormType = {
449+
NORMAL: 10, // 流程表单
450+
CUSTOM: 20 // 业务表单
451+
}

‎src/utils/dict.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -143,6 +143,7 @@ export enum DICT_TYPE {
143143
INFRA_OPERATE_TYPE = 'infra_operate_type',
144144

145145
// ========== BPM 模块 ==========
146+
BPM_MODEL_TYPE = 'bpm_model_type',
146147
BPM_MODEL_FORM_TYPE = 'bpm_model_form_type',
147148
BPM_TASK_CANDIDATE_STRATEGY = 'bpm_task_candidate_strategy',
148149
BPM_PROCESS_INSTANCE_STATUS = 'bpm_process_instance_status',

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

Lines changed: 92 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
placeholder="请输入流程名称"
3636
/>
3737
</el-form-item>
38-
<el-form-item v-if="formData.id" label="流程分类" prop="category">
38+
<el-form-item label="流程分类" prop="category">
3939
<el-select
4040
v-model="formData.category"
4141
clearable
@@ -50,73 +50,84 @@
5050
/>
5151
</el-select>
5252
</el-form-item>
53-
<el-form-item v-if="formData.id" label="流程图标" prop="icon">
54-
<UploadImg v-model="formData.icon" :limit="1" height="128px" width="128px" />
53+
<el-form-item label="流程图标" prop="icon">
54+
<UploadImg v-model="formData.icon" :limit="1" height="64px" width="64px" />
5555
</el-form-item>
5656
<el-form-item label="流程描述" prop="description">
5757
<el-input v-model="formData.description" clearable type="textarea" />
5858
</el-form-item>
59-
<div v-if="formData.id">
60-
<el-form-item label="表单类型" prop="formType">
61-
<el-radio-group v-model="formData.formType">
62-
<el-radio
63-
v-for="dict in getIntDictOptions(DICT_TYPE.BPM_MODEL_FORM_TYPE)"
64-
:key="dict.value"
65-
:label="dict.value"
66-
>
67-
{{ dict.label }}
68-
</el-radio>
69-
</el-radio-group>
70-
</el-form-item>
71-
<el-form-item v-if="formData.formType === 10" label="流程表单" prop="formId">
72-
<el-select v-model="formData.formId" clearable style="width: 100%">
73-
<el-option
74-
v-for="form in formList"
75-
:key="form.id"
76-
:label="form.name"
77-
:value="form.id"
78-
/>
79-
</el-select>
80-
</el-form-item>
81-
<el-form-item
82-
v-if="formData.formType === 20"
83-
label="表单提交路由"
84-
prop="formCustomCreatePath"
85-
>
86-
<el-input
87-
v-model="formData.formCustomCreatePath"
88-
placeholder="请输入表单提交路由"
89-
style="width: 330px"
90-
/>
91-
<el-tooltip
92-
class="item"
93-
content="自定义表单的提交路径，使用 Vue 的路由地址，例如说：bpm/oa/leave/create"
94-
effect="light"
95-
placement="top"
59+
<el-form-item label="流程类型" prop="type">
60+
<el-radio-group v-model="formData.type">
61+
<el-radio
62+
v-for="dict in getIntDictOptions(DICT_TYPE.BPM_MODEL_TYPE)"
63+
:key="dict.value"
64+
:label="dict.value"
65+
>
66+
{{ dict.label }}
67+
</el-radio>
68+
</el-radio-group>
69+
</el-form-item>
70+
<el-form-item label="表单类型" prop="formType">
71+
<el-radio-group v-model="formData.formType">
72+
<el-radio
73+
v-for="dict in getIntDictOptions(DICT_TYPE.BPM_MODEL_FORM_TYPE)"
74+
:key="dict.value"
75+
:label="dict.value"
9676
>
97-
<i class="el-icon-question" style="padding-left: 5px"></i>
98-
</el-tooltip>
99-
</el-form-item>
100-
<el-form-item
101-
v-if="formData.formType === 20"
102-
label="表单查看地址"
103-
prop="formCustomViewPath"
77+
{{ dict.label }}
78+
</el-radio>
79+
</el-radio-group>
80+
</el-form-item>
81+
<el-form-item v-if="formData.formType === 10" label="流程表单" prop="formId">
82+
<el-select v-model="formData.formId" clearable style="width: 100%">
83+
<el-option v-for="form in formList" :key="form.id" :label="form.name" :value="form.id" />
84+
</el-select>
85+
</el-form-item>
86+
<el-form-item
87+
v-if="formData.formType === 20"
88+
label="表单提交路由"
89+
prop="formCustomCreatePath"
90+
>
91+
<el-input
92+
v-model="formData.formCustomCreatePath"
93+
placeholder="请输入表单提交路由"
94+
style="width: 330px"
95+
/>
96+
<el-tooltip
97+
class="item"
98+
content="自定义表单的提交路径，使用 Vue 的路由地址，例如说：bpm/oa/leave/create.vue"
99+
effect="light"
100+
placement="top"
104101
>
105-
<el-input
106-
v-model="formData.formCustomViewPath"
107-
placeholder="请输入表单查看的组件地址"
108-
style="width: 330px"
109-
/>
110-
<el-tooltip
111-
class="item"
112-
content="自定义表单的查看组件地址，使用 Vue 的组件地址，例如说：bpm/oa/leave/detail"
113-
effect="light"
114-
placement="top"
102+
<i class="el-icon-question" style="padding-left: 5px"></i>
103+
</el-tooltip>
104+
</el-form-item>
105+
<el-form-item v-if="formData.formType === 20" label="表单查看地址" prop="formCustomViewPath">
106+
<el-input
107+
v-model="formData.formCustomViewPath"
108+
placeholder="请输入表单查看的组件地址"
109+
style="width: 330px"
110+
/>
111+
<el-tooltip
112+
class="item"
113+
content="自定义表单的查看组件地址，使用 Vue 的组件地址，例如说：bpm/oa/leave/detail.vue"
114+
effect="light"
115+
placement="top"
116+
>
117+
<i class="el-icon-question" style="padding-left: 5px"></i>
118+
</el-tooltip>
119+
</el-form-item>
120+
<el-form-item label="是否可见" prop="visible">
121+
<el-radio-group v-model="formData.visible">
122+
<el-radio
123+
v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
124+
:key="dict.value as string"
125+
:label="dict.value"
115126
>
116-
<i class="el-icon-question" style="padding-left: 5px"></i>
117-
</el-tooltip>
118-
</el-form-item>
119-
</div>
127+
{{ dict.label }}
128+
</el-radio>
129+
</el-radio-group>
130+
</el-form-item>
120131
</el-form>
121132
<template #footer>
122133
<el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
@@ -125,11 +136,12 @@
125136
</Dialog>
126137
</template>
127138
<script lang="ts" setup>
128-
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
139+
import { DICT_TYPE, getBoolDictOptions, getIntDictOptions } from '@/utils/dict'
129140
import { ElMessageBox } from 'element-plus'
130141
import * as ModelApi from '@/api/bpm/model'
131142
import * as FormApi from '@/api/bpm/form'
132143
import { CategoryApi } from '@/api/bpm/category'
144+
import { BpmModelFormType, BpmModelType } from '@/utils/constants'
133145
134146
defineOptions({ name: 'ModelForm' })
135147
@@ -141,21 +153,27 @@ const dialogTitle = ref('') // 弹窗的标题
141153
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
142154
const formType = ref('') // 表单的类型：create - 新增；update - 修改
143155
const formData = ref({
144-
formType: 10,
145156
name: '',
146157
category: undefined,
147158
icon: undefined,
148159
description: '',
160+
type: BpmModelType.BPMN,
161+
formType: BpmModelFormType.NORMAL,
149162
formId: '',
150163
formCustomCreatePath: '',
151-
formCustomViewPath: ''
164+
formCustomViewPath: '',
165+
visible: true
152166
})
153167
const formRules = reactive({
154-
name: [{ required: true, message: '参数名称不能为空', trigger: 'blur' }],
155-
key: [{ required: true, message: '参数键名不能为空', trigger: 'blur' }],
156-
category: [{ required: true, message: '参数分类不能为空', trigger: 'blur' }],
157-
icon: [{ required: true, message: '参数图标不能为空', trigger: 'blur' }],
158-
value: [{ required: true, message: '参数键值不能为空', trigger: 'blur' }],
168+
name: [{ required: true, message: '流程名称不能为空', trigger: 'blur' }],
169+
key: [{ required: true, message: '流程标识不能为空', trigger: 'blur' }],
170+
category: [{ required: true, message: '流程分类不能为空', trigger: 'blur' }],
171+
icon: [{ required: true, message: '流程图标不能为空', trigger: 'blur' }],
172+
type: [{ required: true, message: '是否可见不能为空', trigger: 'blur' }],
173+
formType: [{ required: true, message: '是否可见不能为空', trigger: 'blur' }],
174+
formId: [{ required: true, message: '流程表单不能为空', trigger: 'blur' }],
175+
formCustomCreatePath: [{ required: true, message: '表单提交路由不能为空', trigger: 'blur' }],
176+
formCustomViewPath: [{ required: true, message: '表单查看地址不能为空', trigger: 'blur' }],
159177
visible: [{ required: true, message: '是否可见不能为空', trigger: 'blur' }]
160178
})
161179
const formRef = ref() // 表单 Ref
@@ -225,14 +243,16 @@ const submitForm = async () => {
225243
/** 重置表单 */
226244
const resetForm = () => {
227245
formData.value = {
228-
formType: 10,
229246
name: '',
230247
category: undefined,
231-
icon: '',
248+
icon: undefined,
232249
description: '',
250+
type: BpmModelType.BPMN,
251+
formType: BpmModelFormType.NORMAL,
233252
formId: '',
234253
formCustomCreatePath: '',
235-
formCustomViewPath: ''
254+
formCustomViewPath: '',
255+
visible: true
236256
}
237257
formRef.value?.resetFields()
238258
}

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -58,17 +58,17 @@ const initModeler = (item) => {
5858
}
5959
6060
/** 添加/修改模型 */
61-
const save = async (bpmnXml) => {
61+
const save = async (bpmnXml: string) => {
6262
const data = {
6363
...model.value,
6464
bpmnXml: bpmnXml // bpmnXml 只是初始化流程图，后续修改无法通过它获得
6565
} as unknown as ModelApi.ModelVO
6666
// 提交
6767
if (data.id) {
68-
await ModelApi.updateModel(data)
68+
await ModelApi.updateModelBpmn(data)
6969
message.success('修改成功')
7070
} else {
71-
await ModelApi.createModel(data)
71+
await ModelApi.updateModelBpmn(data)
7272
message.success('新增成功')
7373
}
7474
// 跳转回去

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

Lines changed: 22 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@
5858
@click="openForm('create')"
5959
v-hasPermi="['bpm:model:create']"
6060
>
61-
<Icon icon="ep:plus" class="mr-5px" /> 新建流程
61+
<Icon icon="ep:plus" class="mr-5px" /> 新建
6262
</el-button>
6363
</el-form-item>
6464
</el-form>
@@ -147,47 +147,39 @@
147147
</template>
148148
</el-table-column>
149149
</el-table-column>
150-
<el-table-column label="操作" align="center" width="240" fixed="right">
150+
<el-table-column label="操作" align="center" width="250" fixed="right">
151151
<template #default="scope">
152152
<el-button
153153
link
154154
type="primary"
155155
@click="openForm('update', scope.row.id)"
156156
v-hasPermi="['bpm:model:update']"
157157
>
158-
修改流程
158+
修改
159159
</el-button>
160160
<el-button
161161
link
162162
type="primary"
163163
@click="handleDesign(scope.row)"
164164
v-hasPermi="['bpm:model:update']"
165165
>
166-
设计流程
167-
</el-button>
168-
<el-button
169-
link
170-
type="primary"
171-
@click="handleSimpleDesign(scope.row)"
172-
v-hasPermi="['bpm:model:update']"
173-
>
174-
仿钉钉设计流程
166+
设计
175167
</el-button>
176168
<el-button
177169
link
178170
type="primary"
179171
@click="handleDeploy(scope.row)"
180172
v-hasPermi="['bpm:model:deploy']"
181173
>
182-
发布流程
174+
发布
183175
</el-button>
184176
<el-button
185177
link
186178
type="primary"
187179
v-hasPermi="['bpm:process-definition:query']"
188180
@click="handleDefinitionList(scope.row)"
189181
>
190-
流程定义
182+
历史
191183
</el-button>
192184
<el-button
193185
link
@@ -237,6 +229,7 @@ import * as FormApi from '@/api/bpm/form'
237229
import ModelForm from './ModelForm.vue'
238230
import { setConfAndFields2 } from '@/utils/formCreate'
239231
import { CategoryApi } from '@/api/bpm/category'
232+
import { BpmModelType } from '@/utils/constants'
240233
241234
defineOptions({ name: 'BpmModel' })
242235
@@ -321,21 +314,21 @@ const handleChangeState = async (row) => {
321314
322315
/** 设计流程 */
323316
const handleDesign = (row) => {
324-
push({
325-
name: 'BpmModelEditor',
326-
query: {
327-
modelId: row.id
328-
}
329-
})
330-
}
331-
332-
const handleSimpleDesign = (row) => {
333-
push({
334-
name: 'SimpleWorkflowDesignEditor',
335-
query: {
336-
modelId: row.id
337-
}
338-
})
317+
if (row.type == BpmModelType.BPMN) {
318+
push({
319+
name: 'BpmModelEditor',
320+
query: {
321+
modelId: row.id
322+
}
323+
})
324+
} else {
325+
push({
326+
name: 'SimpleWorkflowDesignEditor',
327+
query: {
328+
modelId: row.id
329+
}
330+
})
331+
}
339332
}
340333
341334
/** 发布流程 */

0 commit comments

Comments
 (0)