修bug
This commit is contained in:
@@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="pig-house-list">
|
<div class="pig-house-list">
|
||||||
<div v-for="house in enrichedPigHouses" :key="house.id" class="pig-house-item">
|
<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">
|
<div class="house-info">
|
||||||
<span>猪舍: {{ house.name }}</span>
|
<span>猪舍: {{ house.name }}</span>
|
||||||
<span v-if="house.description">描述: {{ house.description }}</span>
|
<span v-if="house.description">描述: {{ house.description }}</span>
|
||||||
@@ -44,14 +44,14 @@ export default {
|
|||||||
required: true
|
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: {
|
computed: {
|
||||||
enrichedPigHouses() {
|
enrichedPigHouses() {
|
||||||
return this.pigHouses.map(house => {
|
return this.pigHouses.map(house => {
|
||||||
const pensWithHouseInfo = house.pens ? house.pens.map(pen => ({
|
const pensWithHouseInfo = house.pens ? house.pens.map(pen => ({
|
||||||
...pen,
|
...pen,
|
||||||
house_name: house.name, // Add house name to pen object
|
house_name: house.name,
|
||||||
house_id: house.id // Add house id to pen object
|
house_id: house.id
|
||||||
})) : [];
|
})) : [];
|
||||||
return {
|
return {
|
||||||
...house,
|
...house,
|
||||||
@@ -61,8 +61,8 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
toggleExpand(house) {
|
emitToggleExpand(houseId) {
|
||||||
this.$set(house, 'isExpanded', !house.isExpanded);
|
this.$emit('toggle-house-expand', houseId);
|
||||||
},
|
},
|
||||||
// 猪舍操作
|
// 猪舍操作
|
||||||
emitAddPen(house) {
|
emitAddPen(house) {
|
||||||
@@ -82,7 +82,7 @@ export default {
|
|||||||
this.$emit('delete-pen', pen);
|
this.$emit('delete-pen', pen);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
@@ -94,7 +94,7 @@ export default {
|
|||||||
border: 1px solid #eee;
|
border: 1px solid #eee;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
overflow: hidden; /* 防止子元素溢出圆角 */
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.house-header {
|
.house-header {
|
||||||
|
|||||||
@@ -6,7 +6,9 @@
|
|||||||
<div class="title-container">
|
<div class="title-container">
|
||||||
<h2 class="page-title">栏舍管理</h2>
|
<h2 class="page-title">栏舍管理</h2>
|
||||||
<el-button type="text" @click="loadData" class="refresh-btn" title="刷新列表">
|
<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>
|
</el-button>
|
||||||
</div>
|
</div>
|
||||||
<el-button type="primary" @click="handleAddHouse">添加猪舍</el-button>
|
<el-button type="primary" @click="handleAddHouse">添加猪舍</el-button>
|
||||||
@@ -15,7 +17,7 @@
|
|||||||
|
|
||||||
<!-- 加载状态 -->
|
<!-- 加载状态 -->
|
||||||
<div v-if="loading" class="loading">
|
<div v-if="loading" class="loading">
|
||||||
<el-skeleton animated />
|
<el-skeleton animated/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 错误状态 -->
|
<!-- 错误状态 -->
|
||||||
@@ -41,8 +43,9 @@
|
|||||||
@add-pen="handleAddPen"
|
@add-pen="handleAddPen"
|
||||||
@edit-pen="handleEditPen"
|
@edit-pen="handleEditPen"
|
||||||
@delete-pen="handleDeletePen"
|
@delete-pen="handleDeletePen"
|
||||||
|
@toggle-house-expand="handleToggleHouseExpand"
|
||||||
/>
|
/>
|
||||||
<el-empty v-else description="暂无数据" />
|
<el-empty v-else description="暂无数据"/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</el-card>
|
</el-card>
|
||||||
@@ -68,13 +71,13 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { getPigHouses, deletePigHouse } from '@/api/pigHouse.js';
|
import {getPigHouses, deletePigHouse} from '@/api/pigHouse.js';
|
||||||
import { getPens, deletePen } from '@/api/pen.js';
|
import {getPens, deletePen} from '@/api/pen.js';
|
||||||
import { getPigBatches } from '@/api/pigBatch.js';
|
import {getPigBatches} from '@/api/pigBatch.js';
|
||||||
import PigHouseList from '@/components/PigHouseList.vue';
|
import PigHouseList from '@/components/PigHouseList.vue';
|
||||||
import PigHouseForm from '@/components/PigHouseForm.vue';
|
import PigHouseForm from '@/components/PigHouseForm.vue';
|
||||||
import PenForm from '@/components/PenForm.vue';
|
import PenForm from '@/components/PenForm.vue';
|
||||||
import { Refresh } from '@element-plus/icons-vue';
|
import {Refresh} from '@element-plus/icons-vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'PigFarmManagementView',
|
name: 'PigFarmManagementView',
|
||||||
@@ -136,7 +139,7 @@ export default {
|
|||||||
houses.forEach(house => {
|
houses.forEach(house => {
|
||||||
// 确保保留 isExpanded 状态
|
// 确保保留 isExpanded 状态
|
||||||
const existingHouse = this.pigHousesData.find(h => h.id === house.id);
|
const existingHouse = this.pigHousesData.find(h => h.id === house.id);
|
||||||
houseMap.set(house.id, { ...house, pens: [], isExpanded: existingHouse ? existingHouse.isExpanded : false });
|
houseMap.set(house.id, {...house, pens: [], isExpanded: existingHouse ? existingHouse.isExpanded : false});
|
||||||
});
|
});
|
||||||
|
|
||||||
for (const pen of pens) {
|
for (const pen of pens) {
|
||||||
@@ -157,7 +160,7 @@ export default {
|
|||||||
this.houseDialogVisible = true;
|
this.houseDialogVisible = true;
|
||||||
},
|
},
|
||||||
handleEditHouse(house) {
|
handleEditHouse(house) {
|
||||||
this.currentHouse = { ...house };
|
this.currentHouse = {...house};
|
||||||
this.isEditHouse = true;
|
this.isEditHouse = true;
|
||||||
this.houseDialogVisible = true;
|
this.houseDialogVisible = true;
|
||||||
},
|
},
|
||||||
@@ -187,23 +190,23 @@ export default {
|
|||||||
if (index !== -1) {
|
if (index !== -1) {
|
||||||
// 保留 pens 和 isExpanded 状态
|
// 保留 pens 和 isExpanded 状态
|
||||||
const existingHouse = this.pigHousesData[index];
|
const existingHouse = this.pigHousesData[index];
|
||||||
this.pigHousesData[index] = { ...newHouseData, pens: existingHouse.pens, isExpanded: existingHouse.isExpanded };
|
this.pigHousesData[index] = {...newHouseData, pens: existingHouse.pens, isExpanded: existingHouse.isExpanded};
|
||||||
}
|
}
|
||||||
this.$message.success('猪舍更新成功');
|
this.$message.success('猪舍更新成功');
|
||||||
} else {
|
} else {
|
||||||
// 添加新猪舍
|
// 添加新猪舍
|
||||||
this.pigHousesData.push({ ...newHouseData, pens: [], isExpanded: false });
|
this.pigHousesData.push({...newHouseData, pens: [], isExpanded: false});
|
||||||
this.$message.success('猪舍添加成功');
|
this.$message.success('猪舍添加成功');
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// --- 猪栏操作 ---
|
// --- 猪栏操作 ---
|
||||||
handleAddPen(house) {
|
handleAddPen(house) {
|
||||||
this.currentPen = { house_id: house.id };
|
this.currentPen = {house_id: house.id};
|
||||||
this.isEditPen = false;
|
this.isEditPen = false;
|
||||||
this.penDialogVisible = true;
|
this.penDialogVisible = true;
|
||||||
},
|
},
|
||||||
handleEditPen(pen) {
|
handleEditPen(pen) {
|
||||||
this.currentPen = { ...pen };
|
this.currentPen = {...pen};
|
||||||
this.isEditPen = true;
|
this.isEditPen = true;
|
||||||
this.penDialogVisible = true;
|
this.penDialogVisible = true;
|
||||||
},
|
},
|
||||||
@@ -251,6 +254,12 @@ export default {
|
|||||||
this.$message.success('猪栏添加成功');
|
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 {
|
.pig-farm-management {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-header {
|
.card-header {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 15px;
|
gap: 15px;
|
||||||
|
|||||||
Reference in New Issue
Block a user