Vue3 重构：流程模型的各种操作

src/views/bpm/model/ModelImportForm.vue

 <template>
-  <ContentWrap>
-    <!-- 列表 -->
-    <XTable @register="registerTable">
-      <template #toolbar_buttons>
-        <!-- 操作：导入 -->
-        <XButton
-          type="warning"
-          preIcon="ep:upload"
-          :title="'导入流程'"
-          @click="handleImport"
-          style="margin-left: 10px"
-        />
-      </template>
-    </XTable>
-
-    <!-- 导入流程 -->
-    <XModal v-model="importDialogVisible" width="400" title="导入流程">
-      <div>
-        <el-upload
-          ref="uploadRef"
-          :action="importUrl"
-          :headers="uploadHeaders"
-          :drag="true"
-          :limit="1"
-          :multiple="true"
-          :show-file-list="true"
-          :disabled="uploadDisabled"
-          :on-exceed="handleExceed"
-          :on-success="handleFileSuccess"
-          :on-error="excelUploadError"
-          :auto-upload="false"
-          accept=".bpmn, .xml"
-          name="bpmnFile"
-          :data="importForm"
-        >
-          <Icon class="el-icon--upload" icon="ep:upload-filled" />
-          <div class="el-upload__text"> 将文件拖到此处，或 <em>点击上传</em> </div>
-          <template #tip>
-            <div class="el-upload__tip" style="color: red">
-              提示：仅允许导入“bpm”或“xml”格式文件！
-            </div>
-            <div>
-              <el-form
-                ref="importFormRef"
-                :model="importForm"
-                :rules="rules"
-                label-width="120px"
-                status-icon
-              >
-                <el-form-item label="流程标识" prop="key">
-                  <el-input
-                    v-model="importForm.key"
-                    placeholder="请输入流标标识"
-                    style="width: 250px"
-                  />
-                </el-form-item>
-                <el-form-item label="流程名称" prop="name">
-                  <el-input v-model="importForm.name" placeholder="请输入流程名称" clearable />
-                </el-form-item>
-                <el-form-item label="流程描述" prop="description">
-                  <el-input type="textarea" v-model="importForm.description" clearable />
-                </el-form-item>
-              </el-form>
-            </div>
-          </template>
-        </el-upload>
-      </div>
-      <template #footer>
-        <!-- 按钮：保存 -->
-        <XButton
-          type="warning"
-          preIcon="ep:upload-filled"
-          :title="t('action.save')"
-          @click="submitFileForm"
-        />
-        <XButton title="取 消" @click="uploadClose" />
-      </template>
-    </XModal>
-
-  </ContentWrap>
+  <Dialog title="导入流程" v-model="modelVisible" width="400">
+    <div>
+      <el-upload
+        ref="uploadRef"
+        :action="importUrl"
+        :headers="uploadHeaders"
+        :data="formData"
+        name="bpmnFile"
+        v-model:file-list="fileList"
+        :drag="true"
+        :auto-upload="false"
+        accept=".bpmn, .xml"
+        :limit="1"
+        :on-exceed="handleExceed"
+        :on-success="submitFormSuccess"
+        :on-error="submitFormError"
+        :disabled="formLoading"
+      >
+        <Icon class="el-icon--upload" icon="ep:upload-filled" />
+        <div class="el-upload__text"> 将文件拖到此处，或 <em>点击上传</em> </div>
+        <template #tip>
+          <div class="el-upload__tip" style="color: red">
+            提示：仅允许导入“bpm”或“xml”格式文件！
+          </div>
+          <div>
+            <el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px">
+              <el-form-item label="流程标识" prop="key">
+                <el-input
+                  v-model="formData.key"
+                  placeholder="请输入流标标识"
+                  style="width: 250px"
+                />
+              </el-form-item>
+              <el-form-item label="流程名称" prop="name">
+                <el-input v-model="formData.name" placeholder="请输入流程名称" clearable />
+              </el-form-item>
+              <el-form-item label="流程描述" prop="description">
+                <el-input type="textarea" v-model="formData.description" clearable />
+              </el-form-item>
+            </el-form>
+          </div>
+        </template>
+      </el-upload>
+    </div>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="modelVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
 </template>
-
 <script setup lang="ts">
 import { getAccessToken, getTenantId } from '@/utils/auth'
-
-const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
-const router = useRouter() // 路由
 
-// ========== 导入流程 ==========
-const uploadRef = ref<UploadInstance>()
-let importUrl = import.meta.env.VITE_BASE_URL + import.meta.env.VITE_API_URL + '/bpm/model/import'
-const uploadHeaders = ref()
-const importDialogVisible = ref(false)
-const uploadDisabled = ref(false)
-const importFormRef = ref<FormInstance>()
-const importForm = ref({
+const modelVisible = ref(false) // 弹窗的是否展示
+const formLoading = ref(false) // 表单的加载中
+const formData = ref({
   key: '',
   name: '',
   description: ''
 })
+const formRules = reactive({
+  key: [{ required: true, message: '流程标识不能为空', trigger: 'blur' }],
+  name: [{ required: true, message: '流程名称不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+const uploadRef = ref() // 上传 Ref
+const importUrl = import.meta.env.VITE_BASE_URL + import.meta.env.VITE_API_URL + '/bpm/model/import'
+const uploadHeaders = ref() // 上传 Header 头
+const fileList = ref([]) // 文件列表
 
-// 导入流程弹窗显示
-const handleImport = () => {
-  importDialogVisible.value = true
-}
-// 文件数超出提示
-const handleExceed = (): void => {
-  message.error('最多只能上传一个文件！')
-}
-// 上传错误提示
-const excelUploadError = (): void => {
-  message.error('导入流程失败，请您重新上传！')
+/** 打开弹窗 */
+const open = async () => {
+  modelVisible.value = true
+  resetForm()
 }
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
-// 提交文件上传
-const submitFileForm = () => {
+/** 重置表单 */
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  if (fileList.value.length == 0) {
+    message.error('请上传文件')
+    return
+  }
+  // 提交请求
   uploadHeaders.value = {
     Authorization: 'Bearer ' + getAccessToken(),
     'tenant-id': getTenantId()
   }
-  uploadDisabled.value = true
+  formLoading.value = true
   uploadRef.value!.submit()
 }
-// 文件上传成功
-const handleFileSuccess = async (response: any): Promise<void> => {
+
+/** 文件上传成功 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitFormSuccess = async (response: any): Promise<void> => {
   if (response.code !== 0) {
     message.error(response.msg)
+    formLoading.value = false
     return
   }
-  // 重置表单
-  uploadClose()
-  // 提示，并刷新
+  // 提示成功
   message.success('导入流程成功！请点击【设计流程】按钮，进行编辑保存后，才可以进行【发布流程】')
-  await reload()
+  // 发送操作成功的事件
+  emit('success')
+}
+
+/** 上传错误提示 */
+const submitFormError = (): void => {
+  message.error('导入流程失败，请您重新上传！')
+  formLoading.value = false
 }
-// 关闭文件上传
-const uploadClose = () => {
-  // 关闭弹窗
-  importDialogVisible.value = false
+
+/** 重置表单 */
+const resetForm = () => {
   // 重置上传状态和文件
-  uploadDisabled.value = false
-  uploadRef.value!.clearFiles()
+  formLoading.value = false
+  uploadRef.value?.clearFiles()
   // 重置表单
-  importForm.value = {
+  formData.value = {
     key: '',
     name: '',
     description: ''
   }
-  importFormRef.value?.resetFields()
+  formRef.value?.resetFields()
+}
+
+/** 文件数超出提示 */
+const handleExceed = (): void => {
+  message.error('最多只能上传一个文件！')
 }
 </script>

src/views/bpm/model/index.vue

@@ -52,7 +52,7 @@
         >
           <Icon icon="ep:plus" class="mr-5px" /> 新建流程
         </el-button>
-        <el-button type="success" plain @click="handleImport()" v-hasPermi="['bpm:model:import']">
+        <el-button type="success" plain @click="openImportForm" v-hasPermi="['bpm:model:import']">
           <Icon icon="ep:upload" class="mr-5px" /> 导入流程
         </el-button>
       </el-form-item>
@@ -196,9 +196,12 @@
     />
   </ContentWrap>
 
-  <!-- 表单弹窗：添加/修改 -->
+  <!-- 表单弹窗：添加/修改流程 -->
   <ModelForm ref="formRef" @success="getList" />
 
+  <!-- 表单弹窗：导入流程 -->
+  <ModelImportForm ref="importFormRef" @success="getList" />
+
   <!-- 弹窗：表单详情 -->
   <Dialog title="表单详情" v-model="formDetailVisible" width="800">
     <form-create :rule="formDetailPreview.rule" :option="formDetailPreview.option" />
@@ -222,6 +225,7 @@ import { dateFormatter, formatDate } from '@/utils/formatTime'
 import * as ModelApi from '@/api/bpm/model'
 import * as FormApi from '@/api/bpm/form'
 import ModelForm from './ModelForm.vue'
+import ModelImportForm from '@/views/bpm/model/ModelImportForm.vue'
 import { setConfAndFields2 } from '@/utils/formCreate'
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
@@ -269,6 +273,12 @@ const openForm = (type: string, id?: number) => {
   formRef.value.open(type, id)
 }
 
+/** 添加/修改操作 */
+const importFormRef = ref()
+const openImportForm = () => {
+  importFormRef.value.open()
+}
+
 /** 删除按钮操作 */
 const handleDelete = async (id: number) => {
   try {