优化loading显示

 <!--
 <!--
  * @Date: 2022-07-18 10:22:22
  * @Date: 2022-07-18 10:22:22
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-08-03 20:33:17
+ * @LastEditTime: 2024-08-04 10:22:01
  * @FilePath: /data-table/src/views/index.vue
  * @FilePath: /data-table/src/views/index.vue
  * @Description: 首页
  * @Description: 首页
 -->
 -->
 <template>
 <template>
   <van-notice-bar v-if="formSetting.sjsj_is_count_down" left-icon="volume-o" :text="notice_text" scrollable
   <van-notice-bar v-if="formSetting.sjsj_is_count_down" left-icon="volume-o" :text="notice_text" scrollable
     mode="closeable" />
     mode="closeable" />
-  <!-- <div class="table-box" :style="{ margin: is_pc ? '1rem 0' : '1rem' }"> -->
-  <div class="table-box">
+  <div v-if="!show_loading" class="table-box">
     <template v-if="PHeader.visible && (page_type === 'add' || model === 'preview')">
     <template v-if="PHeader.visible && (page_type === 'add' || model === 'preview')">
       <van-image v-if="PHeader.type === 'image' && PHeader.cover" width="100%" :src="PHeader.cover + '?imageView2/0/w/2000'" fit="cover" />
       <van-image v-if="PHeader.type === 'image' && PHeader.cover" width="100%" :src="PHeader.cover + '?imageView2/0/w/2000'" fit="cover" />
       <template v-if="PHeader.type === 'carousel'">
       <template v-if="PHeader.type === 'carousel'">
@@ -187,6 +186,8 @@
       </van-checkbox-group>
       </van-checkbox-group>
     </div>
     </div>
   </van-dialog>
   </van-dialog>
+
+  <van-loading v-if="show_loading" size="24px" vertical style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 5rem;">加载中...</van-loading>
 </template>
 </template>
 
 
 <script setup>
 <script setup>
@@ -416,7 +417,11 @@ const form_flow_process_list = ref([]);
 const active_flow_process = ref([]);
 const active_flow_process = ref([]);
 const collapseRef = ref(null);
 const collapseRef = ref(null);
 
 
+const show_loading = ref(false);
+
 onMounted(async () => {
 onMounted(async () => {
+  // 显示加载动画
+  show_loading.value = true;
   // TAG: 全局背景色
   // TAG: 全局背景色
   document
   document
     .querySelector("body")
     .querySelector("body")
@@ -678,10 +683,17 @@ onMounted(async () => {
         }
         }
       });
       });
       historyData.value = history_data.data; // 历史表单字段数据
       historyData.value = history_data.data; // 历史表单字段数据
+      // 显示加载动画
+      show_loading.value = false;
     }
     }
     if (!history_data) {
     if (!history_data) {
       PCommit.value.visible = false; // 查询数据错误，提交按钮隐藏
       PCommit.value.visible = false; // 查询数据错误，提交按钮隐藏
+      // 显示加载动画
+      show_loading.value = false;
     }
     }
+  } else {
+    // 显示加载动画
+    show_loading.value = false;
   }
   }
 
 
   // TAG: mock数据
   // TAG: mock数据
@@ -798,9 +810,12 @@ onMounted(async () => {
     approval_actions.value = formSetting.value.flow_node_action_list?.map((item) => { return { name: item.btnText, id: item.id, parent_nodes: item.parent_nodes } });
     approval_actions.value = formSetting.value.flow_node_action_list?.map((item) => { return { name: item.btnText, id: item.id, parent_nodes: item.parent_nodes } });
   }, 1000);
   }, 1000);
 
 
-  const width = $('body').width();
-  // 固定表单宽度
-  $('.table-box').css('width', (width - 30) + 'px');
+  setTimeout(() => {
+    const width = $('body').width();
+    // 固定表单宽度
+    $('.table-box').css('width', (width - 30) + 'px');
+  }, 100);
+
   // TAG：表单样式统一修改
   // TAG：表单样式统一修改
   // 详情页表单的border去掉
   // 详情页表单的border去掉
   if (page_type === 'info') {
   if (page_type === 'info') {