提交

web-admin/src/views/system/workflow/components/ApprovalDialog.vue

@@ -10,7 +10,9 @@
     :show-close="false"
     style="backdrop-filter: none"
   >
-    <div v-if="bizLoading" v-loading="true" class="dialog-scroll" style="min-height: 120px" />
+    <div v-if="bizLoading" class="dialog-scroll is-view-loading" style="min-height: 120px">
+      <DialogDetailSkeleton variant="simple" :section-count="2" :field-count="4" />
+    </div>
     <div v-else class="dialog-scroll">
       <!-- Hero header -->
       <div class="view-hero">
@@ -75,6 +77,7 @@
 </template>
 
 <script setup lang="ts">
+  import DialogDetailSkeleton from '@/components/business/dialog-detail-skeleton/index.vue'
   import { fetchApproveTask, fetchRejectTask, fetchInstanceDetail } from '@/api/workflow'
   import { Checked, Close, Check } from '@element-plus/icons-vue'
 

web-admin/src/views/system/workflow/my-applications/index.vue

@@ -126,8 +126,14 @@
         :show-close="false"
         style="backdrop-filter: none"
       >
-        <div v-loading="detailLoading" class="dialog-scroll">
-          <template v-if="detailData">
+        <div class="dialog-scroll" :class="{ 'is-view-loading': detailLoading }">
+          <DialogDetailSkeleton
+            v-if="detailLoading"
+            variant="system-view"
+            :section-count="2"
+            :field-count="6"
+          />
+          <template v-else-if="detailData">
             <div class="view-hero">
               <div class="view-hero-icon">
                 <el-icon :size="28"><Document /></el-icon>
@@ -194,6 +200,7 @@
 </template>
 
 <script setup lang="ts">
+  import DialogDetailSkeleton from '@/components/business/dialog-detail-skeleton/index.vue'
   import { fetchMyInstances, fetchBusinessAllTasks } from '@/api/workflow'
   import ProcessStatusTag from '../components/ProcessStatusTag.vue'
   import { Document, View, Search, RefreshLeft, Close } from '@element-plus/icons-vue'

web-admin/src/views/system/workflow/task-completed/index.vue

@@ -127,8 +127,14 @@
         :show-close="false"
         style="backdrop-filter: none"
       >
-        <div v-loading="detailLoading" class="dialog-scroll">
-          <template v-if="detailData">
+        <div class="dialog-scroll" :class="{ 'is-view-loading': detailLoading }">
+          <DialogDetailSkeleton
+            v-if="detailLoading"
+            variant="system-view"
+            :section-count="2"
+            :field-count="6"
+          />
+          <template v-else-if="detailData">
             <div class="view-hero">
               <div class="view-hero-icon">
                 <el-icon :size="28"><Document /></el-icon>
@@ -197,6 +203,7 @@
 </template>
 
 <script setup lang="ts">
+  import DialogDetailSkeleton from '@/components/business/dialog-detail-skeleton/index.vue'
   import { fetchCompletedTasks, fetchInstanceDetail } from '@/api/workflow'
   import ProcessStatusTag from '../components/ProcessStatusTag.vue'
   import { Document, View, Search, RefreshLeft, Close } from '@element-plus/icons-vue'

web-admin/src/views/system/workflow/task-pending/index.vue

@@ -124,8 +124,14 @@
         :show-close="false"
         style="backdrop-filter: none"
       >
-        <div v-loading="detailLoading" class="dialog-scroll">
-          <template v-if="detailData">
+        <div class="dialog-scroll" :class="{ 'is-view-loading': detailLoading }">
+          <DialogDetailSkeleton
+            v-if="detailLoading"
+            variant="system-view"
+            :section-count="2"
+            :field-count="6"
+          />
+          <template v-else-if="detailData">
             <div class="view-hero">
               <div class="view-hero-icon">
                 <el-icon :size="28"><Document /></el-icon>
@@ -194,6 +200,7 @@
 </template>
 
 <script setup lang="ts">
+  import DialogDetailSkeleton from '@/components/business/dialog-detail-skeleton/index.vue'
   import { fetchPendingTasks, fetchInstanceDetail } from '@/api/workflow'
   import ApprovalDialog from '../components/ApprovalDialog.vue'
   import ProcessStatusTag from '../components/ProcessStatusTag.vue'