更新

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>

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

@@ -7,6 +7,7 @@
       v-dialogDrag
       append-to-body
     >
+      <div v-loading="loading" element-loading-text="数据加载中..." style="min-height: 200px;">
         <el-card class="box-card">
           <!-- 卡片头 -->
           <div slot="header" class="clearfix">
@@ -257,12 +258,13 @@
             <TicketsJobType :list="otherInfo.groupByJobType" list-type="other" />
           </div>
         </el-card>
+      </div>
       <div slot="footer" class="dialog-footer">
+        <div class="button-container">
           <PrintButton
             ref="printButton"
             print-title="工单详情"
             @click="handlePrint"
-          style="float: left"
           >
             <template #printContent>
               <div class="print-content">
@@ -657,6 +659,7 @@
 
           <el-button @click="dialogVisible = false">关闭</el-button>
         </div>
+      </div>
     </el-dialog>
   </div>
 </template>
@@ -686,13 +689,18 @@ export default {
       totalCount: 0,
       totalMoney: 0,
       otherInfo: {},
+      loading: false // 添加加载状态
     };
   },
   methods: {
     checkPermi,
-    async open(row) {
+    // 添加打开弹窗的方法，支持加载动画
+    open(row) {
+      // 返回 Promise 以便调用者可以正确处理异步操作
+      return new Promise((resolve, reject) => {
         this.reset();
-      const res = await getTicketsById(row.id);
+        this.loading = true; // 开启加载状态
+        getTicketsById(row.id).then(res => {
           this.allList = res.data.items;
           this.computed();
           this.projects = this.allList.filter((item) => item.project);
@@ -701,6 +709,13 @@ export default {
           this.info = row;
           this.otherInfo = res.data;
           this.dialogVisible = true;
+          this.loading = false; // 关闭加载状态
+          resolve();
+        }).catch((error) => {
+          this.loading = false; // 出错时也关闭加载状态
+          reject(error);
+        });
+      });
     },
     async changeShow() {
       try {
@@ -756,4 +771,17 @@ export default {
   background-color: #f5f5f5;
   font-weight: bold;
 }
+
+// 添加按钮容器样式，使按钮位于右下角
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 20px 0;
+  
+  .button-container {
+    display: flex;
+    gap: 10px;
+  }
+}
 </style>