103 lines
2.0 KiB
Vue
103 lines
2.0 KiB
Vue
|
<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>
|