diff --git a/src/views/repair/tickets/Components/TicketTable.vue b/src/views/repair/tickets/Components/TicketTable.vue index 0453c20..0b98d74 100644 --- a/src/views/repair/tickets/Components/TicketTable.vue +++ b/src/views/repair/tickets/Components/TicketTable.vue @@ -366,6 +366,14 @@ 取 消 + + +
+
+ +

数据加载中...

+
+
@@ -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 { \ No newline at end of file diff --git a/src/views/repair/tickets/Components/TicketsShow.vue b/src/views/repair/tickets/Components/TicketsShow.vue index 5853f3d..2fcaff9 100644 --- a/src/views/repair/tickets/Components/TicketsShow.vue +++ b/src/views/repair/tickets/Components/TicketsShow.vue @@ -7,373 +7,269 @@ v-dialogDrag append-to-body > - - -
- - 工单信息 -
- -
- - - - {{ info.ticketNo }} - - - - - - - - - - - - {{ info.userName }} - - - - {{ info.carNo }} - - - - {{ info.carBrandName }} - - - - {{ info.userMobile }} - - - - {{ info.handleName }} - - - - {{ info.handleMobile }} - - - - {{ parseTime(info.createTime, "{y}-{m}-{d}") }} - - - - {{ info.mileageTraveled }} - - - - {{ info.threePackUnits }} - - - - {{ info.insuranceName }} - - - - {{ info.managerMoney }} - - - - {{ info.rescueMoney }} - - - - {{ info.threePackMoney }} - - - - {{ info.confirmFaultMoney }} - - - - {{ parseTime(info.outTime, "{y}-{m}-{d}") }} - - - - {{ info.totalPrice }} - - - - {{ parseTime(info.maintenanceDate, "{y}-{m}-{d}") }} - - - - {{ info.maintenanceMileage }} - - - - - - - - - - - - - - - - - - - - - - {{ info.adviserName }} - - - - - - - - - - - - - - {{ info.remark }} - - -
- - - -
- - 项目信息 -
- -
- -
- - - -
- - 材料信息 - - -
- -
- -
- - - -
- - 附加信息 -
- -
- -
- +
+ + +
+ + 工单信息 +
+ +
+ + + + {{ info.ticketNo }} + + + + + + + + + + + + {{ info.userName }} + + + + {{ info.carNo }} + + + + {{ info.carBrandName }} + + + + {{ info.userMobile }} + + + + {{ info.handleName }} + + + + {{ info.handleMobile }} + + + + {{ parseTime(info.createTime, "{y}-{m}-{d}") }} + + + + {{ info.mileageTraveled }} + + + + {{ info.threePackUnits }} + + + + {{ info.insuranceName }} + + + + {{ info.managerMoney }} + + + + {{ info.rescueMoney }} + + + + {{ info.threePackMoney }} + + + + {{ info.confirmFaultMoney }} + + + + {{ parseTime(info.outTime, "{y}-{m}-{d}") }} + + + + {{ info.totalPrice }} + + + + {{ parseTime(info.maintenanceDate, "{y}-{m}-{d}") }} + + + + {{ info.maintenanceMileage }} + + + + + + + + + + + + + + + + + + + + + + {{ info.adviserName }} + + + + + + + + + + + + + + {{ info.remark }} + + +
+ + + +
+ + 项目信息 +
+ +
+ +
+ + + +
+ + 材料信息 + + +
+ +
+ +
+ + + +
+ + 附加信息 +
+ +
+ +
+ - -
- - 合计 -
-
- - - - {{ totalCount }} - - - - {{ otherInfo.cost }} - - - - {{ totalMoney }} - - -
-
- - - - {{ otherInfo.profitRate * 100 }}% - - - - {{ otherInfo.profitRateNo * 100 }}% - - -
- + +
+ + 合计 +
+
+ + + + {{ totalCount }} + + + + {{ otherInfo.cost }} + + + + {{ totalMoney }} + + +
+
+ + + + {{ otherInfo.profitRate * 100 }}% + + + + {{ otherInfo.profitRateNo * 100 }}% + + +
+ - - -
- - 工种 -
- -
- -
- + + +
+ + 工种 +
+ +
+ +
+ +
- - + - 关闭 + 关闭 +
@@ -686,21 +689,33 @@ export default { totalCount: 0, totalMoney: 0, otherInfo: {}, + loading: false // 添加加载状态 }; }, methods: { checkPermi, - async open(row) { - this.reset(); - const res = await getTicketsById(row.id); - this.allList = res.data.items; - this.computed(); - this.projects = this.allList.filter((item) => item.project); - this.wares = this.allList.filter((item) => item.ware); - this.others = this.allList.filter((item) => item.other); - this.info = row; - this.otherInfo = res.data; - this.dialogVisible = true; + // 添加打开弹窗的方法，支持加载动画 + open(row) { + // 返回 Promise 以便调用者可以正确处理异步操作 + return new Promise((resolve, reject) => { + this.reset(); + this.loading = true; // 开启加载状态 + getTicketsById(row.id).then(res => { + this.allList = res.data.items; + this.computed(); + this.projects = this.allList.filter((item) => item.project); + this.wares = this.allList.filter((item) => item.ware); + this.others = this.allList.filter((item) => item.other); + 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; + } +} + \ No newline at end of file