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

b587d763 · YunaiV · e83d5914 · b587d763 · b587d763
Commit b587d763 authored Mar 26, 2023 by YunaiV
Show whitespace changes
Inline Side-by-side

Showing with 83 additions and 89 deletions

src/views/bpm/model/ModelImportForm.vue
+71 -87

src/views/bpm/model/index.vue
+12 -2

No files found.
--- a/src/views/bpm/model/ModelImportForm.vue
+++ b/src/views/bpm/model/ModelImportForm.vue
 <template>
-  <ContentWrap>
+  <Dialog title="导入流程" v-model="modelVisible" width="400">
-    <!-- 列表 -->
-    <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"
+        :data="formData"
+        name="bpmnFile"
+        v-model:file-list="fileList"
        :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"
+        :limit="1"
-          :data="importForm"
+        :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>
@@ -41,25 +24,19 @@
            提示：仅允许导入“bpm”或“xml”格式文件！
          </div>
          <div>
-              <el-form
+            <el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px">
-                ref="importFormRef"
-                :model="importForm"
-                :rules="rules"
-                label-width="120px"
-                status-icon
-              >
              <el-form-item label="流程标识" prop="key">
                <el-input
-                    v-model="importForm.key"
+                  v-model="formData.key"
                  placeholder="请输入流标标识"
                  style="width: 250px"
                />
              </el-form-item>
              <el-form-item label="流程名称" prop="name">
-                  <el-input v-model="importForm.name" placeholder="请输入流程名称" clearable />
+                <el-input v-model="formData.name" placeholder="请输入流程名称" clearable />
              </el-form-item>
              <el-form-item label="流程描述" prop="description">
-                  <el-input type="textarea" v-model="importForm.description" clearable />
+                <el-input type="textarea" v-model="formData.description" clearable />
              </el-form-item>
            </el-form>
          </div>
@@ -67,87 +44,94 @@
      </el-upload>
    </div>
    <template #footer>
-        <!-- 按钮：保存 -->
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
-        <XButton
+      <el-button @click="modelVisible = false">取 消</el-button>
-          type="warning"
-          preIcon="ep:upload-filled"
-          :title="t('action.save')"
-          @click="submitFileForm"
-        />
-        <XButton title="取 消" @click="uploadClose" />
    </template>
-    </XModal>
+  </Dialog>
-  </ContentWrap>
 </template>
 <script setup lang="ts">
 import { getAccessToken, getTenantId } from '@/utils/auth'
-const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
-const router = useRouter() // 路由
-// ========== 导入流程 ==========
+const modelVisible = ref(false) // 弹窗的是否展示
-const uploadRef = ref<UploadInstance>()
+const formLoading = ref(false) // 表单的加载中
-let importUrl = import.meta.env.VITE_BASE_URL + import.meta.env.VITE_API_URL + '/bpm/model/import'
+const formData = ref({
-const uploadHeaders = ref()
-const importDialogVisible = ref(false)
-const uploadDisabled = ref(false)
-const importFormRef = ref<FormInstance>()
-const importForm = 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 = () => {
+const open = async () => {
-  importDialogVisible.value = true
+  modelVisible.value = true
-}
+  resetForm()
-// 文件数超出提示
-const handleExceed = (): void => {
-  message.error('最多只能上传一个文件！')
-}
-// 上传错误提示
-const excelUploadError = (): void => {
-  message.error('导入流程失败，请您重新上传！')
 }
+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 uploadClose = () => {
+/** 上传错误提示 */
-  // 关闭弹窗
+const submitFormError = (): void => {
-  importDialogVisible.value = false
+  message.error('导入流程失败，请您重新上传！')
+  formLoading.value = false
+}
+/** 重置表单 */
+const resetForm = () => {
  // 重置上传状态和文件
-  uploadDisabled.value = false
+  formLoading.value = false
-  uploadRef.value!.clearFiles()
+  uploadRef.value?.clearFiles()
  // 重置表单
-  importForm.value = {
+  formData.value = {
    key: '',
    name: '',
    description: ''
  }
-  importFormRef.value?.resetFields()
+  formRef.value?.resetFields()
+}
+/** 文件数超出提示 */
+const handleExceed = (): void => {
+  message.error('最多只能上传一个文件！')
 }
 </script>
--- a/src/views/bpm/model/index.vue
+++ b/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 {