Skip to content

Commit 1854b85

Browse files
YunaiVYunaiV
committed
Vue3 重构：流程模型的列表和新增、修改
1 parent d0ed5ed commit 1854b85

File tree

6 files changed

+443
-676
lines changed

6 files changed

+443
-676
lines changed

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,15 +25,15 @@ export type ModelVO = {
2525
bpmnXml: string
2626
}
2727

28-
export const getModelPageApi = async (params) => {
28+
export const getModelPage = async (params) => {
2929
return await request.get({ url: '/bpm/model/page', params })
3030
}
3131

3232
export const getModel = async (id: number) => {
3333
return await request.get({ url: '/bpm/model/get?id=' + id })
3434
}
3535

36-
export const updateModelApi = async (data: ModelVO) => {
36+
export const updateModel = async (data: ModelVO) => {
3737
return await request.put({ url: '/bpm/model/update', data: data })
3838
}
3939

@@ -46,7 +46,7 @@ export const updateModelStateApi = async (id: number, state: number) => {
4646
return await request.put({ url: '/bpm/model/update-state', data: data })
4747
}
4848

49-
export const createModelApi = async (data: ModelVO) => {
49+
export const createModel = async (data: ModelVO) => {
5050
return await request.post({ url: '/bpm/model/create', data: data })
5151
}
5252

‎src/components/DictTag/src/DictTag.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export default defineComponent({
3434
return null
3535
}
3636
// 解决自定义字典标签值为零时标签不渲染的问题
37-
if (props.value === undefined) {
37+
if (props.value === undefined || props.value === null) {
3838
return null
3939
}
4040
getDictObj(props.type, props.value.toString())

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

Lines changed: 219 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,219 @@
1+
<template>
2+
<Dialog :title="modelTitle" v-model="modelVisible" width="600">
3+
<el-form
4+
ref="formRef"
5+
:model="formData"
6+
:rules="formRules"
7+
label-width="110px"
8+
v-loading="formLoading"
9+
>
10+
<el-form-item label="流程标识" prop="key">
11+
<el-input
12+
v-model="formData.key"
13+
placeholder="请输入流标标识"
14+
style="width: 330px"
15+
:disabled="!!formData.id"
16+
/>
17+
<el-tooltip
18+
v-if="!formData.id"
19+
class="item"
20+
effect="light"
21+
content="新建后，流程标识不可修改！"
22+
placement="top"
23+
>
24+
<i style="padding-left: 5px" class="el-icon-question"></i>
25+
</el-tooltip>
26+
<el-tooltip v-else class="item" effect="light" content="流程标识不可修改！" placement="top">
27+
<i style="padding-left: 5px" class="el-icon-question"></i>
28+
</el-tooltip>
29+
</el-form-item>
30+
<el-form-item label="流程名称" prop="name">
31+
<el-input
32+
v-model="formData.name"
33+
placeholder="请输入流程名称"
34+
:disabled="!!formData.id"
35+
clearable
36+
/>
37+
</el-form-item>
38+
<el-form-item v-if="formData.id" label="流程分类" prop="category">
39+
<el-select
40+
v-model="formData.category"
41+
placeholder="请选择流程分类"
42+
clearable
43+
style="width: 100%"
44+
>
45+
<el-option
46+
v-for="dict in getIntDictOptions(DICT_TYPE.BPM_MODEL_CATEGORY)"
47+
:key="dict.value"
48+
:label="dict.label"
49+
:value="dict.value"
50+
/>
51+
</el-select>
52+
</el-form-item>
53+
<el-form-item label="流程描述" prop="description">
54+
<el-input type="textarea" v-model="formData.description" clearable />
55+
</el-form-item>
56+
<div v-if="formData.id">
57+
<el-form-item label="表单类型" prop="formType">
58+
<el-radio-group v-model="formData.formType">
59+
<el-radio
60+
v-for="dict in getIntDictOptions(DICT_TYPE.BPM_MODEL_FORM_TYPE)"
61+
:key="dict.value"
62+
:label="dict.value"
63+
>
64+
{{ dict.label }}
65+
</el-radio>
66+
</el-radio-group>
67+
</el-form-item>
68+
<el-form-item v-if="formData.formType === 10" label="流程表单" prop="formId">
69+
<el-select v-model="formData.formId" clearable style="width: 100%">
70+
<el-option v-for="form in forms" :key="form.id" :label="form.name" :value="form.id" />
71+
</el-select>
72+
</el-form-item>
73+
<el-form-item
74+
v-if="formData.formType === 20"
75+
label="表单提交路由"
76+
prop="formCustomCreatePath"
77+
>
78+
<el-input
79+
v-model="formData.formCustomCreatePath"
80+
placeholder="请输入表单提交路由"
81+
style="width: 330px"
82+
/>
83+
<el-tooltip
84+
class="item"
85+
effect="light"
86+
content="自定义表单的提交路径，使用 Vue 的路由地址，例如说：bpm/oa/leave/create"
87+
placement="top"
88+
>
89+
<i style="padding-left: 5px" class="el-icon-question"></i>
90+
</el-tooltip>
91+
</el-form-item>
92+
<el-form-item
93+
v-if="formData.formType === 20"
94+
label="表单查看路由"
95+
prop="formCustomViewPath"
96+
>
97+
<el-input
98+
v-model="formData.formCustomViewPath"
99+
placeholder="请输入表单查看路由"
100+
style="width: 330px"
101+
/>
102+
<el-tooltip
103+
class="item"
104+
effect="light"
105+
content="自定义表单的查看路径，使用 Vue 的路由地址，例如说：bpm/oa/leave/view"
106+
placement="top"
107+
>
108+
<i style="padding-left: 5px" class="el-icon-question"></i>
109+
</el-tooltip>
110+
</el-form-item>
111+
</div>
112+
</el-form>
113+
<template #footer>
114+
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
115+
<el-button @click="modelVisible = false">取 消</el-button>
116+
</template>
117+
</Dialog>
118+
</template>
119+
<script setup lang="ts">
120+
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
121+
import { ElMessageBox } from 'element-plus'
122+
import * as ModelApi from '@/api/bpm/model'
123+
124+
const { t } = useI18n() // 国际化
125+
const message = useMessage() // 消息弹窗
126+
127+
const modelVisible = ref(false) // 弹窗的是否展示
128+
const modelTitle = ref('') // 弹窗的标题
129+
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
130+
const formType = ref('') // 表单的类型：create - 新增；update - 修改
131+
const formData = ref({
132+
formType: 10,
133+
name: '',
134+
category: undefined,
135+
description: '',
136+
formId: '',
137+
formCustomCreatePath: '',
138+
formCustomViewPath: ''
139+
})
140+
const formRules = reactive({
141+
category: [{ required: true, message: '参数分类不能为空', trigger: 'blur' }],
142+
name: [{ required: true, message: '参数名称不能为空', trigger: 'blur' }],
143+
key: [{ required: true, message: '参数键名不能为空', trigger: 'blur' }],
144+
value: [{ required: true, message: '参数键值不能为空', trigger: 'blur' }],
145+
visible: [{ required: true, message: '是否可见不能为空', trigger: 'blur' }]
146+
})
147+
const formRef = ref() // 表单 Ref
148+
149+
/** 打开弹窗 */
150+
const open = async (type: string, id?: number) => {
151+
modelVisible.value = true
152+
modelTitle.value = t('action.' + type)
153+
formType.value = type
154+
resetForm()
155+
// 修改时，设置数据
156+
if (id) {
157+
formLoading.value = true
158+
try {
159+
formData.value = await ModelApi.getModel(id)
160+
} finally {
161+
formLoading.value = false
162+
}
163+
}
164+
}
165+
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
166+
167+
/** 提交表单 */
168+
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
169+
const submitForm = async () => {
170+
// 校验表单
171+
if (!formRef) return
172+
const valid = await formRef.value.validate()
173+
if (!valid) return
174+
// 提交请求
175+
formLoading.value = true
176+
try {
177+
const data = formData.value as unknown as ModelApi.ModelVO
178+
if (formType.value === 'create') {
179+
await ModelApi.createModel(data)
180+
// 提示，引导用户做后续的操作
181+
await ElMessageBox.alert(
182+
'<strong>新建模型成功！</strong>后续需要执行如下 4 个步骤：' +
183+
'<div>1. 点击【修改流程】按钮，配置流程的分类、表单信息</div>' +
184+
'<div>2. 点击【设计流程】按钮，绘制流程图</div>' +
185+
'<div>3. 点击【分配规则】按钮，设置每个用户任务的审批人</div>' +
186+
'<div>4. 点击【发布流程】按钮，完成流程的最终发布</div>' +
187+
'另外，每次流程修改后，都需要点击【发布流程】按钮，才能正式生效！！！',
188+
'重要提示',
189+
{
190+
dangerouslyUseHTMLString: true,
191+
type: 'success'
192+
}
193+
)
194+
} else {
195+
await ModelApi.updateModel(data)
196+
message.success(t('common.updateSuccess'))
197+
}
198+
modelVisible.value = false
199+
// 发送操作成功的事件
200+
emit('success')
201+
} finally {
202+
formLoading.value = false
203+
}
204+
}
205+
206+
/** 重置表单 */
207+
const resetForm = () => {
208+
formData.value = {
209+
formType: 10,
210+
name: '',
211+
category: undefined,
212+
description: '',
213+
formId: '',
214+
formCustomCreatePath: '',
215+
formCustomViewPath: ''
216+
}
217+
formRef.value?.resetFields()
218+
}
219+
</script>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,10 +62,10 @@ const save = async (bpmnXml) => {
6262
} as unknown as ModelApi.ModelVO
6363
// 提交
6464
if (data.id) {
65-
await ModelApi.updateModelApi(data)
65+
await ModelApi.updateModel(data)
6666
message.success('修改成功')
6767
} else {
68-
await ModelApi.createModelApi(data)
68+
await ModelApi.createModel(data)
6969
message.success('新增成功')
7070
}
7171
// 跳转回去

0 commit comments

Comments
 (0)