修bug
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="pig-house-list">
|
||||
<div v-for="house in enrichedPigHouses" :key="house.id" class="pig-house-item">
|
||||
<div class="house-header" @click="toggleExpand(house)">
|
||||
<div class="house-header" @click="emitToggleExpand(house.id)">
|
||||
<div class="house-info">
|
||||
<span>猪舍: {{ house.name }}</span>
|
||||
<span v-if="house.description">描述: {{ house.description }}</span>
|
||||
@@ -44,14 +44,14 @@ export default {
|
||||
required: true
|
||||
}
|
||||
},
|
||||
emits: ['edit-house', 'delete-house', 'add-pen', 'edit-pen', 'delete-pen'],
|
||||
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, // Add house name to pen object
|
||||
house_id: house.id // Add house id to pen object
|
||||
house_name: house.name,
|
||||
house_id: house.id
|
||||
})) : [];
|
||||
return {
|
||||
...house,
|
||||
@@ -61,8 +61,8 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggleExpand(house) {
|
||||
this.$set(house, 'isExpanded', !house.isExpanded);
|
||||
emitToggleExpand(houseId) {
|
||||
this.$emit('toggle-house-expand', houseId);
|
||||
},
|
||||
// 猪舍操作
|
||||
emitAddPen(house) {
|
||||
@@ -82,7 +82,7 @@ export default {
|
||||
this.$emit('delete-pen', pen);
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -94,7 +94,7 @@ export default {
|
||||
border: 1px solid #eee;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 16px;
|
||||
overflow: hidden; /* 防止子元素溢出圆角 */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.house-header {
|
||||
|
||||
@@ -6,7 +6,9 @@
|
||||
<div class="title-container">
|
||||
<h2 class="page-title">栏舍管理</h2>
|
||||
<el-button type="text" @click="loadData" class="refresh-btn" title="刷新列表">
|
||||
<el-icon :size="20"><Refresh /></el-icon>
|
||||
<el-icon :size="20">
|
||||
<Refresh/>
|
||||
</el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
<el-button type="primary" @click="handleAddHouse">添加猪舍</el-button>
|
||||
@@ -41,6 +43,7 @@
|
||||
@add-pen="handleAddPen"
|
||||
@edit-pen="handleEditPen"
|
||||
@delete-pen="handleDeletePen"
|
||||
@toggle-house-expand="handleToggleHouseExpand"
|
||||
/>
|
||||
<el-empty v-else description="暂无数据"/>
|
||||
</div>
|
||||
@@ -251,6 +254,12 @@ export default {
|
||||
this.$message.success('猪栏添加成功');
|
||||
}
|
||||
}
|
||||
},
|
||||
handleToggleHouseExpand(houseId) {
|
||||
const house = this.pigHousesData.find(h => h.id === houseId);
|
||||
if (house) {
|
||||
house.isExpanded = !house.isExpanded;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -312,6 +321,7 @@ export default {
|
||||
.pig-farm-management {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
|
||||
Reference in New Issue
Block a user