Skip to content

Commit b587d76

Browse files
YunaiVYunaiV
committed
Vue3 重构：流程模型的各种操作
1 parent e83d591 commit b587d76

File tree

2 files changed

+116
-122
lines changed

2 files changed

+116
-122
lines changed

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

Lines changed: 104 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -1,153 +1,137 @@
11
<template>
2-
<ContentWrap>
3-
<!-- 列表 -->
4-
<XTable @register="registerTable">
5-
<template #toolbar_buttons>
6-
<!-- 操作：导入 -->
7-
<XButton
8-
type="warning"
9-
preIcon="ep:upload"
10-
:title="'导入流程'"
11-
@click="handleImport"
12-
style="margin-left: 10px"
13-
/>
14-
</template>
15-
</XTable>
16-
17-
<!-- 导入流程 -->
18-
<XModal v-model="importDialogVisible" width="400" title="导入流程">
19-
<div>
20-
<el-upload
21-
ref="uploadRef"
22-
:action="importUrl"
23-
:headers="uploadHeaders"
24-
:drag="true"
25-
:limit="1"
26-
:multiple="true"
27-
:show-file-list="true"
28-
:disabled="uploadDisabled"
29-
:on-exceed="handleExceed"
30-
:on-success="handleFileSuccess"
31-
:on-error="excelUploadError"
32-
:auto-upload="false"
33-
accept=".bpmn, .xml"
34-
name="bpmnFile"
35-
:data="importForm"
36-
>
37-
<Icon class="el-icon--upload" icon="ep:upload-filled" />
38-
<div class="el-upload__text"> 将文件拖到此处，或 <em>点击上传</em> </div>
39-
<template #tip>
40-
<div class="el-upload__tip" style="color: red">
41-
提示：仅允许导入“bpm”或“xml”格式文件！
42-
</div>
43-
<div>
44-
<el-form
45-
ref="importFormRef"
46-
:model="importForm"
47-
:rules="rules"
48-
label-width="120px"
49-
status-icon
50-
>
51-
<el-form-item label="流程标识" prop="key">
52-
<el-input
53-
v-model="importForm.key"
54-
placeholder="请输入流标标识"
55-
style="width: 250px"
56-
/>
57-
</el-form-item>
58-
<el-form-item label="流程名称" prop="name">
59-
<el-input v-model="importForm.name" placeholder="请输入流程名称" clearable />
60-
</el-form-item>
61-
<el-form-item label="流程描述" prop="description">
62-
<el-input type="textarea" v-model="importForm.description" clearable />
63-
</el-form-item>
64-
</el-form>
65-
</div>
66-
</template>
67-
</el-upload>
68-
</div>
69-
<template #footer>
70-
<!-- 按钮：保存 -->
71-
<XButton
72-
type="warning"
73-
preIcon="ep:upload-filled"
74-
:title="t('action.save')"
75-
@click="submitFileForm"
76-
/>
77-
<XButton title="取 消" @click="uploadClose" />
78-
</template>
79-
</XModal>
80-
81-
</ContentWrap>
2+
<Dialog title="导入流程" v-model="modelVisible" width="400">
3+
<div>
4+
<el-upload
5+
ref="uploadRef"
6+
:action="importUrl"
7+
:headers="uploadHeaders"
8+
:data="formData"
9+
name="bpmnFile"
10+
v-model:file-list="fileList"
11+
:drag="true"
12+
:auto-upload="false"
13+
accept=".bpmn, .xml"
14+
:limit="1"
15+
:on-exceed="handleExceed"
16+
:on-success="submitFormSuccess"
17+
:on-error="submitFormError"
18+
:disabled="formLoading"
19+
>
20+
<Icon class="el-icon--upload" icon="ep:upload-filled" />
21+
<div class="el-upload__text"> 将文件拖到此处，或 <em>点击上传</em> </div>
22+
<template #tip>
23+
<div class="el-upload__tip" style="color: red">
24+
提示：仅允许导入“bpm”或“xml”格式文件！
25+
</div>
26+
<div>
27+
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px">
28+
<el-form-item label="流程标识" prop="key">
29+
<el-input
30+
v-model="formData.key"
31+
placeholder="请输入流标标识"
32+
style="width: 250px"
33+
/>
34+
</el-form-item>
35+
<el-form-item label="流程名称" prop="name">
36+
<el-input v-model="formData.name" placeholder="请输入流程名称" clearable />
37+
</el-form-item>
38+
<el-form-item label="流程描述" prop="description">
39+
<el-input type="textarea" v-model="formData.description" clearable />
40+
</el-form-item>
41+
</el-form>
42+
</div>
43+
</template>
44+
</el-upload>
45+
</div>
46+
<template #footer>
47+
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
48+
<el-button @click="modelVisible = false">取 消</el-button>
49+
</template>
50+
</Dialog>
8251
</template>
83-
8452
<script setup lang="ts">
8553
import { getAccessToken, getTenantId } from '@/utils/auth'
86-
87-
const { t } = useI18n() // 国际化
8854
const message = useMessage() // 消息弹窗
89-
const router = useRouter() // 路由
9055
91-
// ========== 导入流程 ==========
92-
const uploadRef = ref<UploadInstance>()
93-
let importUrl = import.meta.env.VITE_BASE_URL + import.meta.env.VITE_API_URL + '/bpm/model/import'
94-
const uploadHeaders = ref()
95-
const importDialogVisible = ref(false)
96-
const uploadDisabled = ref(false)
97-
const importFormRef = ref<FormInstance>()
98-
const importForm = ref({
56+
const modelVisible = ref(false) // 弹窗的是否展示
57+
const formLoading = ref(false) // 表单的加载中
58+
const formData = ref({
9959
key: '',
10060
name: '',
10161
description: ''
10262
})
63+
const formRules = reactive({
64+
key: [{ required: true, message: '流程标识不能为空', trigger: 'blur' }],
65+
name: [{ required: true, message: '流程名称不能为空', trigger: 'blur' }]
66+
})
67+
const formRef = ref() // 表单 Ref
68+
const uploadRef = ref() // 上传 Ref
69+
const importUrl = import.meta.env.VITE_BASE_URL + import.meta.env.VITE_API_URL + '/bpm/model/import'
70+
const uploadHeaders = ref() // 上传 Header 头
71+
const fileList = ref([]) // 文件列表
10372
104-
// 导入流程弹窗显示
105-
const handleImport = () => {
106-
importDialogVisible.value = true
107-
}
108-
// 文件数超出提示
109-
const handleExceed = (): void => {
110-
message.error('最多只能上传一个文件！')
111-
}
112-
// 上传错误提示
113-
const excelUploadError = (): void => {
114-
message.error('导入流程失败，请您重新上传！')
73+
/** 打开弹窗 */
74+
const open = async () => {
75+
modelVisible.value = true
76+
resetForm()
11577
}
78+
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
11679
117-
// 提交文件上传
118-
const submitFileForm = () => {
80+
/** 重置表单 */
81+
const submitForm = async () => {
82+
// 校验表单
83+
if (!formRef) return
84+
const valid = await formRef.value.validate()
85+
if (!valid) return
86+
if (fileList.value.length == 0) {
87+
message.error('请上传文件')
88+
return
89+
}
90+
// 提交请求
11991
uploadHeaders.value = {
12092
Authorization: 'Bearer ' + getAccessToken(),
12193
'tenant-id': getTenantId()
12294
}
123-
uploadDisabled.value = true
95+
formLoading.value = true
12496
uploadRef.value!.submit()
12597
}
126-
// 文件上传成功
127-
const handleFileSuccess = async (response: any): Promise<void> => {
98+
99+
/** 文件上传成功 */
100+
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
101+
const submitFormSuccess = async (response: any): Promise<void> => {
128102
if (response.code !== 0) {
129103
message.error(response.msg)
104+
formLoading.value = false
130105
return
131106
}
132-
// 重置表单
133-
uploadClose()
134-
// 提示，并刷新
107+
// 提示成功
135108
message.success('导入流程成功！请点击【设计流程】按钮，进行编辑保存后，才可以进行【发布流程】')
136-
await reload()
109+
// 发送操作成功的事件
110+
emit('success')
111+
}
112+
113+
/** 上传错误提示 */
114+
const submitFormError = (): void => {
115+
message.error('导入流程失败，请您重新上传！')
116+
formLoading.value = false
137117
}
138-
// 关闭文件上传
139-
const uploadClose = () => {
140-
// 关闭弹窗
141-
importDialogVisible.value = false
118+
119+
/** 重置表单 */
120+
const resetForm = () => {
142121
// 重置上传状态和文件
143-
uploadDisabled.value = false
144-
uploadRef.value!.clearFiles()
122+
formLoading.value = false
123+
uploadRef.value?.clearFiles()
145124
// 重置表单
146-
importForm.value = {
125+
formData.value = {
147126
key: '',
148127
name: '',
149128
description: ''
150129
}
151-
importFormRef.value?.resetFields()
130+
formRef.value?.resetFields()
131+
}
132+
133+
/** 文件数超出提示 */
134+
const handleExceed = (): void => {
135+
message.error('最多只能上传一个文件！')
152136
}
153137
</script>

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

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@
5252
>
5353
<Icon icon="ep:plus" class="mr-5px" /> 新建流程
5454
</el-button>
55-
<el-button type="success" plain @click="handleImport()" v-hasPermi="['bpm:model:import']">
55+
<el-button type="success" plain @click="openImportForm" v-hasPermi="['bpm:model:import']">
5656
<Icon icon="ep:upload" class="mr-5px" /> 导入流程
5757
</el-button>
5858
</el-form-item>
@@ -196,9 +196,12 @@
196196
/>
197197
</ContentWrap>
198198

199-
<!-- 表单弹窗：添加/修改 -->
199+
<!-- 表单弹窗：添加/修改流程 -->
200200
<ModelForm ref="formRef" @success="getList" />
201201

202+
<!-- 表单弹窗：导入流程 -->
203+
<ModelImportForm ref="importFormRef" @success="getList" />
204+
202205
<!-- 弹窗：表单详情 -->
203206
<Dialog title="表单详情" v-model="formDetailVisible" width="800">
204207
<form-create :rule="formDetailPreview.rule" :option="formDetailPreview.option" />
@@ -222,6 +225,7 @@ import { dateFormatter, formatDate } from '@/utils/formatTime'
222225
import * as ModelApi from '@/api/bpm/model'
223226
import * as FormApi from '@/api/bpm/form'
224227
import ModelForm from './ModelForm.vue'
228+
import ModelImportForm from '@/views/bpm/model/ModelImportForm.vue'
225229
import { setConfAndFields2 } from '@/utils/formCreate'
226230
const message = useMessage() // 消息弹窗
227231
const { t } = useI18n() // 国际化
@@ -269,6 +273,12 @@ const openForm = (type: string, id?: number) => {
269273
formRef.value.open(type, id)
270274
}
271275
276+
/** 添加/修改操作 */
277+
const importFormRef = ref()
278+
const openImportForm = () => {
279+
importFormRef.value.open()
280+
}
281+
272282
/** 删除按钮操作 */
273283
const handleDelete = async (id: number) => {
274284
try {

0 commit comments

Comments
 (0)