更新

components/RepairCompletion.vue

@@ -0,0 +1,103 @@
+<template>
+	<view class="container">
+		<view v-for="(group, index) in workGroups" :key="index" class="group-card">
+			<view class="group-header" @click="toggleGroup(index)">
+				<text class="group-name">{{ group.workTypeName }}</text>
+				<text class="group-status" :style="{ color: group.completionRate === 1 ? 'green' : 'orange' }">
+					{{ group.completionRate === 1 ? '已完成' : '维修中' }}
+				</text>
+			</view>
+
+			<!-- 展开后的维修项目列表 -->
+			<view v-show="group.isExpanded" class="item-list">
+				<view v-for="(item, i) in group.children" :key="i" class="item-card">
+					<text class="item-name">{{ item.itemName }}</text>
+					<view class="item-status">
+						<text :style="{ backgroundColor: item.finished ? 'green' : 'orange' }"
+							class="status-indicator"></text>
+						<text class="status-text">{{ item.finished ? '已完成' : '维修中' }}</text>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			workGroups: {
+				type: Array,
+				required: true
+			}
+		},
+		methods: {
+			toggleGroup(index) {
+				// 使用 Vue.set 确保 isExpanded 是响应式的
+				this.$set(this.workGroups, index, {
+					...this.workGroups[index],
+					isExpanded: !this.workGroups[index].isExpanded
+				});
+				console.log(this.workGroups);
+			}
+
+		}
+	};
+</script>
+
+<style scoped>
+	.container {
+		padding: 20px;
+	}
+
+	.group-card {
+		margin-bottom: 20px;
+		padding: 10px;
+		border: 1px solid #ccc;
+		border-radius: 8px;
+	}
+
+	.group-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		cursor: pointer;
+	}
+
+	.group-name {
+		font-size: 18px;
+		font-weight: bold;
+	}
+
+	.group-status {
+		font-size: 14px;
+	}
+
+	.item-list {
+		margin-top: 10px;
+	}
+
+	.item-card {
+		padding: 10px;
+		margin-top: 5px;
+		/* background-color: #f9f9f9; */
+		border-radius: 6px;
+	}
+
+	.item-status {
+		display: flex;
+		align-items: center;
+		margin-top: 5px;
+	}
+
+	.status-indicator {
+		width: 10px;
+		height: 10px;
+		border-radius: 50%;
+		margin-right: 10px;
+	}
+
+	.status-text {
+		font-size: 14px;
+	}
+</style>

pages-order/orderDetail/orderDetail.vue

@@ -402,9 +402,10 @@
 					</view>
 				</view>
 				<view v-if="isDetail == '1'" class="card cardInfo projCard">
-					<view class="projTitle">维修检验记录</view>
+					<view class="projTitle">维修状态</view>
 					<view class="projList">
-						<steps :steps="inspectionSteps"></steps>
+						<!-- <steps :steps="inspectionSteps"></steps> -->
+						<RepairCompletion :workGroups="workGroups"></RepairCompletion>
 					</view>
 				</view>
 				<view v-if="isDetail == '1'" class="card cardInfo projCard">
@@ -545,10 +546,12 @@
 	import {
 		fixScreen
 	} from '@/utils/fixScreen.js';
+	import RepairCompletion from '@/components/RepairCompletion.vue';
 	export default {
 		components: {
 			VNavigationBar,
-			steps
+			steps,
+			RepairCompletion
 		},
 		data() {
 			return {
@@ -613,6 +616,7 @@
 				userInfo: {},
 				loginUser: {},
 				selectedProj: [],
+				workGroups: [],
 				submitData: [],
 				//是否是通知客户取车操作，默认都不是
 				ifCallCus: false,
@@ -709,6 +713,8 @@
 				await this.getProjItem()
 				//获取当前订单是否有审批的配件
 				await this.waresByTicket()
+				//获取进度
+				await this.getTeamProgressWithItems(this.ticketId)
 
 				uni.hideLoading();
 			},
@@ -1628,6 +1634,23 @@
 				})
 			},
 
+			/**
+			 * 根据工单ID统计班组完成进度及工时项目情况
+			 * @param {Object} ticketId 工单id
+			 */
+			getTeamProgressWithItems(ticketId) {
+				request({
+					url: '/admin-api/repair/titem/teamProgressWithItems',
+					method: 'get',
+					params: {
+						ticketId
+					}
+				}).then(res => {
+					this.workGroups = res.data
+					this.workGroups.forEach(work => work.isExpanded = false)
+				})
+			},
+
 			/**
 			 * 查当前维修的项目
 			 */
@@ -1692,7 +1715,7 @@
 
 	.container {
 		height: 100%;
-		background-color: #F3F5F7;
+		// background-color: #F3F5F7;
 
 		.containerBody {
 			height: 100%;
@@ -2249,7 +2272,6 @@
 				width: 646rpx;
 				margin: 0 auto;
 				padding: 30rpx 20rpx;
-				background: #F3F5F7;
 				border-radius: 6rpx 6rpx 6rpx 6rpx;
 
 				display: flex;