This commit is contained in:
2025-10-23 13:21:27 +08:00
parent 2d6bb69387
commit 0026f24002
2 changed files with 58 additions and 48 deletions

View File

@@ -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 {

View File

@@ -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,18 +17,18 @@
<!-- 加载状态 --> <!-- 加载状态 -->
<div v-if="loading" class="loading"> <div v-if="loading" class="loading">
<el-skeleton animated /> <el-skeleton animated/>
</div> </div>
<!-- 错误状态 --> <!-- 错误状态 -->
<div v-else-if="error" class="error"> <div v-else-if="error" class="error">
<el-alert <el-alert
title="获取栏舍数据失败" title="获取栏舍数据失败"
:description="error" :description="error"
type="error" type="error"
show-icon show-icon
closable closable
@close="error = null" @close="error = null"
/> />
<el-button type="primary" @click="loadData" class="retry-btn">重新加载</el-button> <el-button type="primary" @click="loadData" class="retry-btn">重新加载</el-button>
</div> </div>
@@ -34,47 +36,48 @@
<!-- 数据展示或空状态 --> <!-- 数据展示或空状态 -->
<div v-else> <div v-else>
<PigHouseList <PigHouseList
v-if="pigHousesData.length > 0" v-if="pigHousesData.length > 0"
:pigHouses="pigHousesData" :pigHouses="pigHousesData"
@edit-house="handleEditHouse" @edit-house="handleEditHouse"
@delete-house="handleDeleteHouse" @delete-house="handleDeleteHouse"
@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>
<!-- 猪舍表单对话框 --> <!-- 猪舍表单对话框 -->
<PigHouseForm <PigHouseForm
v-model:visible="houseDialogVisible" v-model:visible="houseDialogVisible"
:house-data="currentHouse" :house-data="currentHouse"
:is-edit="isEditHouse" :is-edit="isEditHouse"
@success="handleHouseSuccess" @success="handleHouseSuccess"
@cancel="houseDialogVisible = false" @cancel="houseDialogVisible = false"
/> />
<!-- 猪栏表单对话框 --> <!-- 猪栏表单对话框 -->
<PenForm <PenForm
v-model:visible="penDialogVisible" v-model:visible="penDialogVisible"
:pen-data="currentPen" :pen-data="currentPen"
:is-edit="isEditPen" :is-edit="isEditPen"
@success="handlePenSuccess" @success="handlePenSuccess"
@cancel="penDialogVisible = false" @cancel="penDialogVisible = false"
/> />
</div> </div>
</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;