!130 流程表单：使用异步组件的方式动态加载业务表单指定的查看表单的组件，直接显示到审批页面，不再需要点击查看

Merge pull request !130 from puhui999/dev-to-dev
2025-10-31 18:28:44 +08:00 · 2023-04-19 11:44:47 +00:00
parent bcf8cccf8b f74067023d
commit d87c02b232
7 changed files with 158 additions and 108 deletions
--- a/src/utils/routerHelper.ts
+++ b/src/utils/routerHelper.ts
@@ -1,10 +1,22 @@
+import type { RouteLocationNormalized, Router, RouteRecordNormalized } from 'vue-router'
 import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
-import type { Router, RouteLocationNormalized, RouteRecordNormalized } from 'vue-router'
 import { isUrl } from '@/utils/is'
-import { omit, cloneDeep } from 'lodash-es'
+import { cloneDeep, omit } from 'lodash-es'

 const modules = import.meta.glob('../views/**/*.{vue,tsx}')
-
+/**
+ * 注册一个异步组件
+ * @param componentPath 例:/bpm/oa/leave/detail
+ */
+export const registerComponent = (componentPath: string) => {
+  for (const item in modules) {
+    if (item.includes(componentPath)) {
+      // 使用异步组件的方式来动态加载组件
+      // @ts-ignore
+      return defineAsyncComponent(modules[item])
+    }
+  }
+}
 /* Layout */
 export const Layout = () => import('@/layout/Layout.vue')

--- a/src/views/bpm/form/editor/index.vue
+++ b/src/views/bpm/form/editor/index.vue
@@ -44,10 +44,13 @@ import { CommonStatusEnum } from '@/utils/constants'
 import * as FormApi from '@/api/bpm/form'
 import FcDesigner from '@form-create/designer'
 import { encodeConf, encodeFields, setConfAndFields } from '@/utils/formCreate'
+import { useTagsViewStore } from '@/store/modules/tagsView'

 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息
-const { query } = useRoute() // 路由
+const { push, currentRoute } = useRouter() // 路由
+const { query } = useRoute() // 路由信息
+const { delView } = useTagsViewStore() // 视图操作

 const designer = ref() // 表单设计器
 const dialogVisible = ref(false) // 弹窗是否展示
@@ -88,10 +91,16 @@ const submitForm = async () => {
      message.success(t('common.updateSuccess'))
    }
    dialogVisible.value = false
+    close()
  } finally {
    formLoading.value = false
  }
 }
+/** 关闭按钮 */
+const close = () => {
+  delView(unref(currentRoute))
+  push('/bpm/manager/form')
+}

 /** 初始化 **/
 onMounted(async () => {
--- a/src/views/bpm/form/index.vue
+++ b/src/views/bpm/form/index.vue
@@ -2,26 +2,33 @@
  <ContentWrap>
    <!-- 搜索工作栏 -->
    <el-form
-      class="-mb-15px"
-      :model="queryParams"
      ref="queryFormRef"
      :inline="true"
+      :model="queryParams"
+      class="-mb-15px"
      label-width="68px"
    >
      <el-form-item label="表单名" prop="name">
        <el-input
          v-model="queryParams.name"
-          placeholder="请输入表单名"
-          clearable
-          @keyup.enter="handleQuery"
          class="!w-240px"
+          clearable
+          placeholder="请输入表单名"
+          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item>
-        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
-        <el-button type="primary" plain @click="openForm" v-hasPermi="['bpm:form:create']">
-          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        <el-button @click="handleQuery">
+          <Icon class="mr-5px" icon="ep:search" />
+          搜索
+        </el-button>
+        <el-button @click="resetQuery">
+          <Icon class="mr-5px" icon="ep:refresh" />
+          重置
+        </el-button>
+        <el-button v-hasPermi="['bpm:form:create']" plain type="primary" @click="openForm">
+          <Icon class="mr-5px" icon="ep:plus" />
+          新增
        </el-button>
      </el-form-item>
    </el-form>
@@ -30,38 +37,38 @@
  <!-- 列表 -->
  <ContentWrap>
    <el-table v-loading="loading" :data="list">
-      <el-table-column label="编号" align="center" prop="id" />
-      <el-table-column label="表单名" align="center" prop="name" />
-      <el-table-column label="状态" align="center" prop="status">
+      <el-table-column align="center" label="编号" prop="id" />
+      <el-table-column align="center" label="表单名" prop="name" />
+      <el-table-column align="center" label="状态" prop="status">
        <template #default="scope">
          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
        </template>
      </el-table-column>
-      <el-table-column label="备注" align="center" prop="remark" />
+      <el-table-column align="center" label="备注" prop="remark" />
      <el-table-column
-        label="创建时间"
-        align="center"
-        prop="createTime"
        :formatter="dateFormatter"
+        align="center"
+        label="创建时间"
+        prop="createTime"
      />
-      <el-table-column label="操作" align="center">
+      <el-table-column align="center" label="操作">
        <template #default="scope">
          <el-button
+            v-hasPermi="['bpm:form:update']"
            link
            type="primary"
            @click="openForm(scope.row.id)"
-            v-hasPermi="['bpm:form:update']"
          >
            编辑
          </el-button>
-          <el-button link @click="openDetail(scope.row.id)" v-hasPermi="['bpm:form:query']">
+          <el-button v-hasPermi="['bpm:form:query']" link @click="openDetail(scope.row.id)">
            详情
          </el-button>
          <el-button
+            v-hasPermi="['bpm:form:delete']"
            link
            type="danger"
            @click="handleDelete(scope.row.id)"
-            v-hasPermi="['bpm:form:delete']"
          >
            删除
          </el-button>
@@ -70,27 +77,28 @@
    </el-table>
    <!-- 分页 -->
    <Pagination
-      :total="total"
-      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
+      v-model:page="queryParams.pageNo"
+      :total="total"
      @pagination="getList"
    />
  </ContentWrap>

  <!-- 表单详情的弹窗 -->
-  <Dialog title="表单详情" v-model="detailVisible" width="800">
-    <form-create :rule="detailData.rule" :option="detailData.option" />
+  <Dialog v-model="detailVisible" title="表单详情" width="800">
+    <form-create :option="detailData.option" :rule="detailData.rule" />
  </Dialog>
 </template>

-<script setup lang="ts" name="BpmForm">
+<script lang="ts" name="BpmForm" setup>
 import { DICT_TYPE } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
 import * as FormApi from '@/api/bpm/form'
 import { setConfAndFields2 } from '@/utils/formCreate'
+
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
-const { push } = useRouter() // 路由
+const { currentRoute, push } = useRouter() // 路由

 const loading = ref(true) // 列表的加载中
 const total = ref(0) // 列表的总页数
@@ -128,12 +136,16 @@ const resetQuery = () => {

 /** 添加/修改操作 */
 const openForm = (id?: number) => {
-  push({
-    name: 'BpmFormEditor',
-    query: {
+  const toRouter: { name: string; query?: { id: number } } = {
+    name: 'BpmFormEditor'
+  }
+  // 表单新建的时候id传的是event需要排除
+  if (typeof id === 'number') {
+    toRouter.query = {
      id
    }
-  })
+  }
+  push(toRouter)
 }

 /** 删除按钮操作 */
@@ -162,7 +174,16 @@ const openDetail = async (rowId: number) => {
  // 弹窗打开
  detailVisible.value = true
 }
-
+/**表单保存返回后重新加载列表 */
+watch(
+  () => currentRoute.value,
+  () => {
+    getList()
+  },
+  {
+    immediate: true
+  }
+)
 /** 初始化 **/
 onMounted(() => {
  getList()
--- a/src/views/bpm/group/UserGroupForm.vue
+++ b/src/views/bpm/group/UserGroupForm.vue
@@ -11,7 +11,7 @@
        <el-input v-model="formData.name" placeholder="请输入组名" />
      </el-form-item>
      <el-form-item label="描述">
-        <el-input v-model="formData.name" placeholder="请输入描述" type="textarea" />
+        <el-input v-model="formData.description" placeholder="请输入描述" type="textarea" />
      </el-form-item>
      <el-form-item label="成员" prop="memberUserIds">
        <el-select v-model="formData.memberUserIds" multiple placeholder="请选择成员">
--- a/src/views/bpm/oa/leave/detail.vue
+++ b/src/views/bpm/oa/leave/detail.vue
@@ -1,6 +1,6 @@
 <template>
  <ContentWrap>
-    <el-descriptions border :column="1">
+    <el-descriptions :column="1" border>
      <el-descriptions-item label="请假类型">
        <dict-tag :type="DICT_TYPE.BPM_OA_LEAVE_TYPE" :value="detailData.type" />
      </el-descriptions-item>
@@ -21,6 +21,7 @@ import { DICT_TYPE } from '@/utils/dict'
 import { formatDate } from '@/utils/formatTime'
 import { propTypes } from '@/utils/propTypes'
 import * as LeaveApi from '@/api/bpm/leave'
+
 const { query } = useRoute() // 查询参数

 const props = defineProps({
@@ -34,7 +35,7 @@ const queryId = query.id as unknown as number // 从 URL 传递过来的 id 编
 const getInfo = async () => {
  detailLoading.value = true
  try {
-    detailData.value = await LeaveApi.getLeave(queryId || props.id)
+    detailData.value = await LeaveApi.getLeave(props.id || queryId)
  } finally {
    detailLoading.value = false
  }
--- a/src/views/bpm/processInstance/detail/index.vue
+++ b/src/views/bpm/processInstance/detail/index.vue
@@ -2,81 +2,78 @@
  <ContentWrap>
    <!-- 审批信息 -->
    <el-card
-      class="box-card"
-      v-loading="processInstanceLoading"
      v-for="(item, index) in runningTasks"
      :key="index"
+      v-loading="processInstanceLoading"
+      class="box-card"
    >
      <template #header>
        <span class="el-icon-picture-outline">审批任务【{{ item.name }}】</span>
      </template>
-      <el-col :span="16" :offset="6">
+      <el-col :offset="6" :span="16">
        <el-form
          :ref="'form' + index"
          :model="auditForms[index]"
          :rules="auditRule"
          label-width="100px"
        >
-          <el-form-item label="流程名" v-if="processInstance && processInstance.name">
+          <el-form-item v-if="processInstance && processInstance.name" label="流程名">
            {{ processInstance.name }}
          </el-form-item>
-          <el-form-item label="流程发起人" v-if="processInstance && processInstance.startUser">
+          <el-form-item v-if="processInstance && processInstance.startUser" label="流程发起人">
            {{ processInstance.startUser.nickname }}
-            <el-tag type="info" size="small">{{ processInstance.startUser.deptName }}</el-tag>
+            <el-tag size="small" type="info">{{ processInstance.startUser.deptName }}</el-tag>
          </el-form-item>
          <el-form-item label="审批建议" prop="reason">
            <el-input
-              type="textarea"
              v-model="auditForms[index].reason"
              placeholder="请输入审批建议"
+              type="textarea"
            />
          </el-form-item>
        </el-form>
        <div style="margin-left: 10%; margin-bottom: 20px; font-size: 14px">
          <el-button type="success" @click="handleAudit(item, true)">
-            <Icon icon="ep:select" /> 通过
+            <Icon icon="ep:select" />
+            通过
          </el-button>
          <el-button type="danger" @click="handleAudit(item, false)">
-            <Icon icon="ep:close" /> 不通过
+            <Icon icon="ep:close" />
+            不通过
          </el-button>
          <el-button type="primary" @click="openTaskUpdateAssigneeForm(item.id)">
-            <Icon icon="ep:edit" /> 转办
+            <Icon icon="ep:edit" />
+            转办
          </el-button>
          <el-button type="primary" @click="handleDelegate(item)">
-            <Icon icon="ep:position" /> 委派
+            <Icon icon="ep:position" />
+            委派
          </el-button>
          <el-button type="warning" @click="handleBack(item)">
-            <Icon icon="ep:back" /> 回退
+            <Icon icon="ep:back" />
+            回退
          </el-button>
        </div>
      </el-col>
    </el-card>

    <!-- 申请信息 -->
-    <el-card class="box-card" v-loading="processInstanceLoading">
+    <el-card v-loading="processInstanceLoading" class="box-card">
      <template #header>
        <span class="el-icon-document">申请信息【{{ processInstance.name }}】</span>
      </template>
      <!-- 情况一：流程表单 -->
-      <el-col v-if="processInstance?.processDefinition?.formType === 10" :span="16" :offset="6">
+      <el-col v-if="processInstance?.processDefinition?.formType === 10" :offset="6" :span="16">
        <form-create
          ref="fApi"
-          :rule="detailForm.rule"
-          :option="detailForm.option"
          v-model="detailForm.value"
+          :option="detailForm.option"
+          :rule="detailForm.rule"
        />
      </el-col>
-      <!-- 情况二：流程表单 -->
+      <!-- 情况二：业务表单 -->
      <div v-if="processInstance?.processDefinition?.formType === 20">
-        <router-link
-          :to="
-            processInstance.processDefinition.formCustomViewPath +
-            '?id=' +
-            processInstance.businessKey
-          "
-        >
-          <el-button type="primary"><Icon icon="ep:view" /> 点击查看</el-button>
-        </router-link>
+        <autoComponent :id="processInstance.businessKey" />
      </div>
    </el-card>

@@ -85,18 +82,18 @@

    <!-- 高亮流程图 -->
    <ProcessInstanceBpmnViewer
-      :id="id"
-      :process-instance="processInstance"
-      :loading="processInstanceLoading"
-      :tasks="tasks"
+      :id="`${id}`"
      :bpmn-xml="bpmnXML"
+      :loading="processInstanceLoading"
+      :process-instance="processInstance"
+      :tasks="tasks"
    />

    <!-- 弹窗：转派审批人 -->
    <TaskUpdateAssigneeForm ref="taskUpdateAssigneeFormRef" @success="getDetail" />
  </ContentWrap>
 </template>
-<script setup lang="ts" name="BpmProcessInstanceDetail">
+<script lang="ts" name="BpmProcessInstanceDetail" setup>
 import { useUserStore } from '@/store/modules/user'
 import { setConfAndFields2 } from '@/utils/formCreate'
 import type { ApiAttrs } from '@form-create/element-ui/types/config'
@@ -106,6 +103,8 @@ import * as TaskApi from '@/api/bpm/task'
 import TaskUpdateAssigneeForm from './TaskUpdateAssigneeForm.vue'
 import ProcessInstanceBpmnViewer from './ProcessInstanceBpmnViewer.vue'
 import ProcessInstanceTaskList from './ProcessInstanceTaskList.vue'
+import { registerComponent } from '@/utils/routerHelper'
+
 const { query } = useRoute() // 查询参数
 const message = useMessage() // 消息弹窗
 const { proxy } = getCurrentInstance() as any
@@ -184,7 +183,7 @@ const getDetail = () => {
  // 2. 获得流程任务列表（审批记录）
  getTaskList()
 }
-
+const autoComponent = ref(null) // 异步组件
 /** 加载流程实例 */
 const getProcessInstance = async () => {
  try {
@@ -195,7 +194,7 @@ const getProcessInstance = async () => {
      return
    }
    processInstance.value = data
-
+    autoComponent.value = registerComponent(data.processDefinition.formCustomViewPath)
    // 设置表单信息
    const processDefinition = data.processDefinition
    if (processDefinition.formType === 10) {
@@ -213,7 +212,7 @@ const getProcessInstance = async () => {
    }

    // 加载流程图
-    bpmnXML.value = await DefinitionApi.getProcessDefinitionBpmnXML(processDefinition.id)
+    bpmnXML.value = await DefinitionApi.getProcessDefinitionBpmnXML(processDefinition.id as number)
  } finally {
    processInstanceLoading.value = false
  }
--- a/src/views/infra/codegen/index.vue
+++ b/src/views/infra/codegen/index.vue
@@ -5,46 +5,53 @@
  <!-- 搜索 -->
  <ContentWrap>
    <el-form
-      class="-mb-15px"
-      :model="queryParams"
      ref="queryFormRef"
      :inline="true"
+      :model="queryParams"
+      class="-mb-15px"
      label-width="68px"
    >
      <el-form-item label="表名称" prop="tableName">
        <el-input
          v-model="queryParams.tableName"
-          placeholder="请输入表名称"
-          clearable
-          @keyup.enter="handleQuery"
          class="!w-240px"
+          clearable
+          placeholder="请输入表名称"
+          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="表描述" prop="tableComment">
        <el-input
          v-model="queryParams.tableComment"
-          placeholder="请输入表描述"
-          clearable
-          @keyup.enter="handleQuery"
          class="!w-240px"
+          clearable
+          placeholder="请输入表描述"
+          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="创建时间" prop="createTime">
        <el-date-picker
          v-model="queryParams.createTime"
-          value-format="YYYY-MM-dd HH:mm:ss"
-          type="daterange"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
          class="!w-240px"
+          end-placeholder="结束日期"
+          start-placeholder="开始日期"
+          type="daterange"
+          value-format="YYYY-MM-dd HH:mm:ss"
        />
      </el-form-item>
      <el-form-item>
-        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" />搜索</el-button>
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" />重置</el-button>
-        <el-button type="primary" v-hasPermi="['infra:codegen:create']" @click="openImportTable()">
-          <Icon icon="ep:zoom-in" class="mr-5px" /> 导入
+        <el-button @click="handleQuery">
+          <Icon class="mr-5px" icon="ep:search" />
+          搜索
+        </el-button>
+        <el-button @click="resetQuery">
+          <Icon class="mr-5px" icon="ep:refresh" />
+          重置
+        </el-button>
+        <el-button v-hasPermi="['infra:codegen:create']" type="primary" @click="openImportTable()">
+          <Icon class="mr-5px" icon="ep:zoom-in" />
+          导入
        </el-button>
      </el-form-item>
    </el-form>
@@ -53,75 +60,75 @@
  <!-- 列表 -->
  <ContentWrap>
    <el-table v-loading="loading" :data="list">
-      <el-table-column label="数据源" align="center">
+      <el-table-column align="center" label="数据源">
        <template #default="scope">
          {{
            dataSourceConfigList.find((config) => config.id === scope.row.dataSourceConfigId)?.name
          }}
        </template>
      </el-table-column>
-      <el-table-column label="表名称" align="center" prop="tableName" width="200" />
+      <el-table-column align="center" label="表名称" prop="tableName" width="200" />
      <el-table-column
-        label="表描述"
-        align="center"
-        prop="tableComment"
        :show-overflow-tooltip="true"
+        align="center"
+        label="表描述"
+        prop="tableComment"
        width="200"
      />
-      <el-table-column label="实体" align="center" prop="className" width="200" />
+      <el-table-column align="center" label="实体" prop="className" width="200" />
      <el-table-column
+        :formatter="dateFormatter"
+        align="center"
        label="创建时间"
-        align="center"
        prop="createTime"
        width="180"
-        :formatter="dateFormatter"
      />
      <el-table-column
-        label="更新时间"
+        :formatter="dateFormatter"
        align="center"
+        label="更新时间"
        prop="createTime"
        width="180"
-        :formatter="dateFormatter"
      />
-      <el-table-column label="操作" align="center" width="300px" fixed="right">
+      <el-table-column align="center" fixed="right" label="操作" width="300px">
        <template #default="scope">
          <el-button
+            v-hasPermi="['infra:codegen:preview']"
            link
            type="primary"
            @click="handlePreview(scope.row)"
-            v-hasPermi="['infra:codegen:preview']"
          >
            预览
          </el-button>
          <el-button
+            v-hasPermi="['infra:codegen:update']"
            link
            type="primary"
            @click="handleUpdate(scope.row.id)"
-            v-hasPermi="['infra:codegen:update']"
          >
            编辑
          </el-button>
          <el-button
+            v-hasPermi="['infra:codegen:delete']"
            link
            type="danger"
            @click="handleDelete(scope.row.id)"
-            v-hasPermi="['infra:codegen:delete']"
          >
            删除
          </el-button>
          <el-button
+            v-hasPermi="['infra:codegen:update']"
            link
            type="primary"
            @click="handleSyncDB(scope.row)"
-            v-hasPermi="['infra:codegen:update']"
          >
            同步
          </el-button>
          <el-button
+            v-hasPermi="['infra:codegen:download']"
            link
            type="primary"
            @click="handleGenTable(scope.row)"
-            v-hasPermi="['infra:codegen:download']"
          >
            生成代码
          </el-button>
@@ -130,25 +137,26 @@
    </el-table>
    <!-- 分页 -->
    <Pagination
-      :total="total"
-      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
+      v-model:page="queryParams.pageNo"
+      :total="total"
      @pagination="getList"
    />
  </ContentWrap>

  <!-- 弹窗：导入表 -->
-  <ImportTable ref="importRef" success="getList" />
+  <ImportTable ref="importRef" @success="getList" />
  <!-- 弹窗：预览代码 -->
  <PreviewCode ref="previewRef" />
 </template>
-<script setup lang="ts" name="InfraCodegen">
+<script lang="ts" name="InfraCodegen" setup>
 import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
 import * as CodegenApi from '@/api/infra/codegen'
 import * as DataSourceConfigApi from '@/api/infra/dataSourceConfig'
 import ImportTable from './ImportTable.vue'
 import PreviewCode from './PreviewCode.vue'
+
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 const { push } = useRouter() // 路由跳转