152 lines
3.2 KiB
Vue
152 lines
3.2 KiB
Vue
<template>
|
|
<div class="pig-house-list">
|
|
<div v-for="house in enrichedPigHouses" :key="house.id" class="pig-house-item">
|
|
<div class="house-header" @click="emitToggleExpand(house.id)">
|
|
<div class="house-info">
|
|
<span>猪舍: {{ house.name }}</span>
|
|
<span v-if="house.description">描述: {{ house.description }}</span>
|
|
</div>
|
|
<div class="house-actions">
|
|
<el-button size="small" type="primary" @click.stop="emitAddPen(house)">增加猪栏</el-button>
|
|
<el-button size="small" @click.stop="emitEditHouse(house)">编辑</el-button>
|
|
<el-button size="small" type="danger" @click.stop="emitDeleteHouse(house)">删除</el-button>
|
|
</div>
|
|
</div>
|
|
<div v-if="house.isExpanded" class="house-content">
|
|
<div v-if="house.pens && house.pens.length > 0" class="pig-pen-list">
|
|
<PigPenInfoCard
|
|
v-for="pen in house.pens"
|
|
:key="pen.id"
|
|
:pen="pen"
|
|
@edit="emitEditPen"
|
|
@delete="emitDeletePen"
|
|
/>
|
|
</div>
|
|
<div v-else class="no-pens-message">
|
|
<p>该猪舍下没有猪栏信息。</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import PigPenInfoCard from './PigPenInfoCard.vue';
|
|
|
|
export default {
|
|
name: 'PigHouseList',
|
|
components: {
|
|
PigPenInfoCard
|
|
},
|
|
props: {
|
|
pigHouses: {
|
|
type: Array,
|
|
required: true
|
|
}
|
|
},
|
|
emits: ['edit-house', 'delete-house', 'add-pen', 'edit-pen', 'delete-pen', 'toggle-house-expand'],
|
|
computed: {
|
|
enrichedPigHouses() {
|
|
return this.pigHouses.map(house => {
|
|
const pensWithHouseInfo = house.pens ? house.pens.map(pen => ({
|
|
...pen,
|
|
house_name: house.name,
|
|
house_id: house.id
|
|
})) : [];
|
|
return {
|
|
...house,
|
|
pens: pensWithHouseInfo
|
|
};
|
|
});
|
|
}
|
|
},
|
|
methods: {
|
|
emitToggleExpand(houseId) {
|
|
this.$emit('toggle-house-expand', houseId);
|
|
},
|
|
// 猪舍操作
|
|
emitAddPen(house) {
|
|
this.$emit('add-pen', house);
|
|
},
|
|
emitEditHouse(house) {
|
|
this.$emit('edit-house', house);
|
|
},
|
|
emitDeleteHouse(house) {
|
|
this.$emit('delete-house', house);
|
|
},
|
|
// 猪栏操作
|
|
emitEditPen(pen) {
|
|
this.$emit('edit-pen', pen);
|
|
},
|
|
emitDeletePen(pen) {
|
|
this.$emit('delete-pen', pen);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.pig-house-list {
|
|
width: 100%;
|
|
}
|
|
|
|
.pig-house-item {
|
|
border: 1px solid #eee;
|
|
border-radius: 4px;
|
|
margin-bottom: 16px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.house-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 16px;
|
|
cursor: pointer;
|
|
background-color: #f9f9f9;
|
|
transition: background-color 0.3s;
|
|
}
|
|
|
|
.house-header:hover {
|
|
background-color: #f0f0f0;
|
|
}
|
|
|
|
.house-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.house-info span:first-child {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.house-info span {
|
|
margin-right: 20px;
|
|
font-size: 14px;
|
|
color: #606266;
|
|
}
|
|
|
|
.house-actions {
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
.house-content {
|
|
padding: 16px;
|
|
border-top: 1px solid #eee;
|
|
}
|
|
|
|
.pig-pen-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 16px;
|
|
}
|
|
|
|
.no-pens-message {
|
|
color: #909399;
|
|
text-align: center;
|
|
padding: 20px 0;
|
|
}
|
|
</style>
|