更新

src/views/repair/tickets/Components/TicketTable.vue

@@ -366,6 +366,14 @@
         <el-button @click="cancelConfirmPayment">取 消</el-button>
       </div>
     </el-dialog>
+    
+    <!-- 查看详情的加载遮罩 -->
+    <div v-if="showLoading" class="loading-overlay">
+      <div class="loading-content">
+        <i class="el-icon-loading"></i>
+        <p>数据加载中...</p>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -408,6 +416,7 @@ export default {
   data() {
     return {
       loading: false,
+      showLoading: false, // 添加加载状态
       formData: {
         id: null,
         ticketsStatus: null,
@@ -490,7 +499,16 @@ export default {
   
   methods: {
     handleShow(row) {
-      this.$refs.ticketsShow.open(row)
+      // 显示加载动画
+      this.showLoading = true;
+      // 调用子组件的open方法
+      this.$refs.ticketsShow.open(row).then(() => {
+        // 加载完成后隐藏加载动画
+        this.showLoading = false;
+      }).catch(() => {
+        // 出错时也隐藏加载动画
+        this.showLoading = false;
+      });
     },
     async handleVoid(row) {
       this.$prompt('作废备注', '提示', {
@@ -736,5 +754,29 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.loading-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 9999;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 
+.loading-content {
+  background: white;
+  padding: 20px;
+  border-radius: 4px;
+  text-align: center;
+}
+
+.loading-content i {
+  font-size: 24px;
+  color: #409EFF;
+  margin-bottom: 10px;
+}
 </style>