流程详情页面-解决ref定义组件导致性能警告问题

src/views/system/bpm/processInstance/detail/index.vue

@@ -1,54 +1,54 @@
 <template>
-  <div class='default-main'>
+    <div class="default-main">
         <!--返回按钮-->
-    <back-component style='margin: 8px;position: absolute;z-index: 10;top: -3px;right: 2px' />
+        <back-component style="margin: 8px; position: absolute; z-index: 10; top: -3px; right: 2px" />
-    <el-tabs type='border-card' v-model='tab'>
+        <el-tabs type="border-card" v-model="tab">
-      <el-tab-pane label='流程审核' name='流程审核' v-if='runningTasks.length>0'>
+            <el-tab-pane label="流程审核" name="流程审核" v-if="runningTasks.length > 0">
                 <el-card
-            v-for='(item, index) in runningTasks'
+                    v-for="(item, index) in runningTasks"
-            :key='index'
+                    :key="index"
-            v-loading='processInstanceLoading'
+                    v-loading="processInstanceLoading"
-            class='box-card'
+                    class="box-card"
                 >
                     <template #header>
-            <span class='el-icon-picture-outline'>当前任务【{{ item.name }}】</span>
+                        <span class="el-icon-picture-outline">当前任务【{{ item.name }}】</span>
                     </template>
-          <el-col :offset='6' :span='16'>
+                    <el-col :offset="6" :span="16">
                         <el-form
                             :ref="'form' + index"
-                :model='auditForms[index]'
+                            :model="auditForms[index]"
-                :rules='auditRule'
+                            :rules="auditRule"
-                label-width='100px'
+                            label-width="100px"
                         >
-              <el-form-item v-if='processInstance && processInstance.name' label='流程名'>
+                            <el-form-item v-if="processInstance && processInstance.name" label="流程名">
                                 {{ processInstance.name }}
                             </el-form-item>
-              <el-form-item v-if='processInstance && processInstance.startUser' label='发起人'>
+                            <el-form-item v-if="processInstance && processInstance.startUser" label="发起人">
                                 {{ processInstance?.startUser.name }}
                             </el-form-item>
-              <el-form-item v-if='processInstance && processInstance.startUser' label='发起部门'>
+                            <el-form-item v-if="processInstance && processInstance.startUser" label="发起部门">
                                 {{ processInstance?.startUser.deptName }}
                             </el-form-item>
 
-              <el-card v-if='runningTasks[index].formId != null' class='mb-15px !-mt-10px'>
+                            <el-card v-if="runningTasks[index].formId != null" class="mb-15px !-mt-10px">
                                 <template #header>
-                  <span class='el-icon-picture-outline'>
+                                    <span class="el-icon-picture-outline">
                                         {{ runningTasks[index]?.formName }}
                                     </span>
                                 </template>
                                 <form-create
-                    v-model='approveForms[index].value'
+                                    v-model="approveForms[index].value"
-                    v-model:api='approveFormFApis[index]'
+                                    v-model:api="approveFormFApis[index]"
-                    :option='approveForms[index].option'
+                                    :option="approveForms[index].option"
-                    :rule='approveForms[index].rule'
+                                    :rule="approveForms[index].rule"
                                 />
                             </el-card>
 
-              <el-form-item label='审批建议' prop='reason' style='margin-top: 15px'>
+                            <el-form-item label="审批建议" prop="reason" style="margin-top: 15px">
                                 <el-input
-                    v-model='auditForms[index].reason'
+                                    v-model="auditForms[index].reason"
-                    placeholder='请输入审批建议'
+                                    placeholder="请输入审批建议"
-                    type='textarea'
+                                    type="textarea"
                                 />
                             </el-form-item>
                             <!--                <el-form-item label='抄送人' prop='copyUserIds'>-->
@@ -62,21 +62,10 @@
                             <!--                  </el-select>-->
                             <!--                </el-form-item>-->
                         </el-form>
-            <div style='margin-bottom: 20px; margin-left: 10%; font-size: 14px'>
+                        <div style="margin-bottom: 20px; margin-left: 10%; font-size: 14px">
+                            <el-button type="success" :icon="Select" @click="handleAudit(item, true)">通过</el-button>
 
-              <el-button
+                            <el-button type="danger" :icon="Close" @click="handleAudit(item, false)">不通过</el-button>
-                  type='success'
-                  :icon='Select'
-                  @click='handleAudit(item, true)'
-              >通过
-              </el-button>
-
-              <el-button
-                  type='danger'
-                  :icon='Close'
-                  @click='handleAudit(item, false)'
-              >不通过
-              </el-button>
 
                             <!--                <el-button type='primary' @click='openTaskUpdateAssigneeForm(item.id)'>-->
                             <!--                  <Icon icon='ep:edit' />-->
@@ -91,44 +80,39 @@
                             <!--                  加签-->
                             <!--                </el-button>-->
 
-              <el-button
+                            <el-button type="warning" :icon="Back" @click="handleBack(item)">回退</el-button>
-                  type='warning'
-                  :icon='Back'
-                  @click='handleBack(item)'
-              >回退
-              </el-button>
                         </div>
                     </el-col>
                 </el-card>
             </el-tab-pane>
-      <el-tab-pane label='申请信息' name='申请信息'>
+            <el-tab-pane label="申请信息" name="申请信息">
                 <!-- 申请信息 -->
-        <el-card v-loading='processInstanceLoading' class='box-card'>
+                <el-card v-loading="processInstanceLoading" class="box-card">
                     <template #header>
-            <span class='el-icon-document'>申请信息【{{ processInstance.name }}】</span>
+                        <span class="el-icon-document">申请信息【{{ processInstance.name }}】</span>
                     </template>
                     <!-- 情况一：流程表单 -->
-          <el-col v-if='processInstance?.processDefinition?.formType === 10' :offset='6' :span='16'>
+                    <el-col v-if="processInstance?.processDefinition?.formType === 10" :offset="6" :span="16">
                         <form-create
-                v-model='detailForm.value'
+                            v-model="detailForm.value"
-                v-model:api='fApi'
+                            v-model:api="fApi"
-                :option='detailForm.option'
+                            :option="detailForm.option"
-                :rule='detailForm.rule'
+                            :rule="detailForm.rule"
                         />
                     </el-col>
                     <!-- 情况二：业务表单 -->
-          <div v-if='processInstance?.processDefinition?.formType === 20'>
+                    <div v-if="processInstance?.processDefinition?.formType === 20">
-            <BusinessFormComponent :id='processInstance.businessKey' :applyTitle='processInstance.name' />
+                        <BusinessFormComponent :id="processInstance.businessKey" :applyTitle="processInstance.name" />
                     </div>
                 </el-card>
             </el-tab-pane>
-      <el-tab-pane label='审批记录' name='审批记录'>
+            <el-tab-pane label="审批记录" name="审批记录">
                 <!-- 审批记录 -->
                 <ProcessInstanceTaskList
-            :loading='tasksLoad'
+                    :loading="tasksLoad"
-            :process-instance='processInstance'
+                    :process-instance="processInstance"
-            :tasks='tasks'
+                    :tasks="tasks"
-            @refresh='getTaskList'
+                    @refresh="getTaskList"
                 />
             </el-tab-pane>
             <!--            <el-tab-pane label='流程图'>-->
@@ -143,18 +127,18 @@
         </el-tabs>
         <ContentWrap>
             <!-- 弹窗：转派审批人 -->
-      <TaskTransferForm ref='taskTransferFormRef' @success='getDetail' />
+            <TaskTransferForm ref="taskTransferFormRef" @success="getDetail" />
             <!-- 弹窗：回退节点 -->
-      <TaskReturnForm ref='taskReturnFormRef' @success='getDetail' />
+            <TaskReturnForm ref="taskReturnFormRef" @success="getDetail" />
             <!-- 弹窗：委派，将任务委派给别人处理，处理完成后，会重新回到原审批人手中-->
-      <TaskDelegateForm ref='taskDelegateForm' @success='getDetail' />
+            <TaskDelegateForm ref="taskDelegateForm" @success="getDetail" />
             <!-- 弹窗：加签，当前任务审批人为A，向前加签选了一个C，则需要C先审批，然后再是A审批，向后加签B，A审批完，需要B再审批完，才算完成这个任务节点 -->
-      <TaskSignCreateForm ref='taskSignCreateFormRef' @success='getDetail' />
+            <TaskSignCreateForm ref="taskSignCreateFormRef" @success="getDetail" />
         </ContentWrap>
     </div>
 </template>
-<script lang='ts' setup>
+<script lang="ts" setup>
-import { onMounted, provide, ref, getCurrentInstance, reactive, watch, unref, nextTick } from 'vue'
+import { onMounted, provide, ref, getCurrentInstance, reactive, watch, unref, nextTick ,markRaw} from 'vue'
 import { ElMessage } from 'element-plus'
 import { useUserStore } from '@/stores/modules/user'
 import ContentWrap from '@/components/ContentWrap/src/ContentWrap.vue'
@@ -181,11 +165,10 @@ defineOptions({ name: 'BpmProcessInstanceDetail' })
 const { query } = useRoute() // 查询参数
 const { proxy } = getCurrentInstance() as any
 
-const userId = JSON.parse(window.localStorage.getItem('adminInfo')).id// 当前登录的编号
+const userId = JSON.parse(window.localStorage.getItem('adminInfo')).id // 当前登录的编号
-
 
 const id = query.id as unknown as string // 流程实例的编号
-const todo = query.todo// 是否存在待办事项
+const todo = query.todo // 是否存在待办事项
 const processInstanceLoading = ref(false) // 流程实例的加载中
 const processInstance = ref({}) // 流程实例
 const bpmnXml = ref('') // BPMN XML
@@ -211,8 +194,8 @@ const detailForm = ref({
 /** 监听 approveFormFApis，实现它对应的 form-create 初始化后，隐藏掉对应的表单提交按钮 */
 watch(
     () => approveFormFApis.value,
-    (value) => {
+    value => {
-      value?.forEach((api) => {
+        value?.forEach(api => {
             api.btn.show(false)
             api.resetBtn.show(false)
         })
@@ -266,7 +249,7 @@ const openTaskUpdateAssigneeForm = (id: string) => {
 
 /** 处理审批委托的操作 */
 const taskDelegateForm = ref()
-const handleDelegate = async (task) => {
+const handleDelegate = async task => {
     taskDelegateForm.value.open(task.id)
 }
 
@@ -308,27 +291,19 @@ const getProcessInstance = async () => {
         // 设置表单信息
         const processDefinition = data.processDefinition
         if (processDefinition.formType === 10) {
-      setConfAndFields2(
+            setConfAndFields2(detailForm, processDefinition.formConf, processDefinition.formFields, data.formVariables)
-          detailForm,
-          processDefinition.formConf,
-          processDefinition.formFields,
-          data.formVariables
-      )
             nextTick().then(() => {
                 fApi.value?.btn.show(false)
                 fApi.value?.resetBtn.show(false)
                 fApi.value?.disabled(true)
             })
         } else {
-
             // 注意：data.processDefinition.formCustomViewPath 是组件的全路径，例如说：/crm/contract/detail/index.vue
-      BusinessFormComponent.value = registerComponent(data.processDefinition.formCustomViewPath)
+            BusinessFormComponent.value = markRaw(registerComponent(data.processDefinition.formCustomViewPath))
         }
 
         // 加载流程图
-    bpmnXml.value = (
+        bpmnXml.value = (await getProcessDefinitionById(processDefinition.id))?.bpmnXml
-        await getProcessDefinitionById(processDefinition.id)
-    )?.bpmnXml
     } finally {
         processInstanceLoading.value = false
     }
@@ -349,7 +324,7 @@ const getTaskList = async () => {
         })
         tasks.value = []
         // 1.1 移除已取消的审批
-    data.forEach((task) => {
+        data.forEach(task => {
             if (task.status !== 4) {
                 tasks.value.push(task)
             }
@@ -379,8 +354,8 @@ const getTaskList = async () => {
 /**
  * 设置 runningTasks 中的任务
  */
-const loadRunningTask = (tasks) => {
+const loadRunningTask = tasks => {
-  tasks.forEach((task) => {
+    tasks.forEach(task => {
         if (!isEmpty(task.children)) {
             loadRunningTask(task.children)
         }