栏舍管理界面
This commit is contained in:
263
src/views/pms/PigFarmManagementView.vue
Normal file
263
src/views/pms/PigFarmManagementView.vue
Normal file
@@ -0,0 +1,263 @@
|
||||
<template>
|
||||
<div class="pig-farm-management">
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<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-button>
|
||||
</div>
|
||||
<el-button type="primary" @click="handleAddHouse">添加猪舍</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 加载状态 -->
|
||||
<div v-if="loading" class="loading">
|
||||
<el-skeleton animated />
|
||||
</div>
|
||||
|
||||
<!-- 错误状态 -->
|
||||
<div v-else-if="error" class="error">
|
||||
<el-alert
|
||||
title="获取栏舍数据失败"
|
||||
:description="error"
|
||||
type="error"
|
||||
show-icon
|
||||
closable
|
||||
@close="error = null"
|
||||
/>
|
||||
<el-button type="primary" @click="loadData" class="retry-btn">重新加载</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 数据展示或空状态 -->
|
||||
<div v-else>
|
||||
<PigHouseList
|
||||
v-if="pigHousesData.length > 0"
|
||||
:pigHouses="pigHousesData"
|
||||
@edit-house="handleEditHouse"
|
||||
@delete-house="handleDeleteHouse"
|
||||
@add-pen="handleAddPen"
|
||||
@edit-pen="handleEditPen"
|
||||
@delete-pen="handleDeletePen"
|
||||
/>
|
||||
<el-empty v-else description="暂无数据" />
|
||||
</div>
|
||||
|
||||
</el-card>
|
||||
|
||||
<!-- 猪舍表单对话框 -->
|
||||
<PigHouseForm
|
||||
v-model:visible="houseDialogVisible"
|
||||
:house-data="currentHouse"
|
||||
:is-edit="isEditHouse"
|
||||
@success="handleHouseSuccess"
|
||||
@cancel="houseDialogVisible = false"
|
||||
/>
|
||||
|
||||
<!-- 猪栏表单对话框 -->
|
||||
<PenForm
|
||||
v-model:visible="penDialogVisible"
|
||||
:pen-data="currentPen"
|
||||
:is-edit="isEditPen"
|
||||
@success="handlePenSuccess"
|
||||
@cancel="penDialogVisible = false"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPigHouses, deletePigHouse } from '@/api/pigHouse.js';
|
||||
import { getPens, deletePen } from '@/api/pen.js';
|
||||
import PigHouseList from '@/components/PigHouseList.vue';
|
||||
import PigHouseForm from '@/components/PigHouseForm.vue';
|
||||
import PenForm from '@/components/PenForm.vue';
|
||||
import { Refresh } from '@element-plus/icons-vue';
|
||||
|
||||
export default {
|
||||
name: 'PigFarmManagementView',
|
||||
components: {
|
||||
PigHouseList,
|
||||
PigHouseForm,
|
||||
PenForm,
|
||||
Refresh
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pigHousesData: [],
|
||||
loading: false,
|
||||
error: null,
|
||||
// 猪舍表单状态
|
||||
houseDialogVisible: false,
|
||||
isEditHouse: false,
|
||||
currentHouse: {},
|
||||
// 猪栏表单状态
|
||||
penDialogVisible: false,
|
||||
isEditPen: false,
|
||||
currentPen: {},
|
||||
};
|
||||
},
|
||||
async mounted() {
|
||||
await this.loadData();
|
||||
},
|
||||
methods: {
|
||||
async loadData() {
|
||||
this.loading = true;
|
||||
this.error = null;
|
||||
try {
|
||||
const [pigHousesResponse, pensResponse] = await Promise.all([
|
||||
getPigHouses(),
|
||||
getPens()
|
||||
]);
|
||||
|
||||
const houses = Array.isArray(pigHousesResponse.data) ? pigHousesResponse.data : [];
|
||||
const pens = Array.isArray(pensResponse.data) ? pensResponse.data : [];
|
||||
|
||||
this.pigHousesData = this.assembleData(houses, pens);
|
||||
} catch (err) {
|
||||
this.error = err.message || '无法获取数据';
|
||||
console.error('Failed to fetch pig farm data:', err);
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
assembleData(houses, pens) {
|
||||
const houseMap = new Map(houses.map(house => [house.id, { ...house, pens: [], isExpanded: false }]));
|
||||
for (const pen of pens) {
|
||||
if (houseMap.has(pen.house_id)) {
|
||||
houseMap.get(pen.house_id).pens.push(pen);
|
||||
}
|
||||
}
|
||||
return Array.from(houseMap.values());
|
||||
},
|
||||
// --- 猪舍操作 ---
|
||||
handleAddHouse() {
|
||||
this.currentHouse = {};
|
||||
this.isEditHouse = false;
|
||||
this.houseDialogVisible = true;
|
||||
},
|
||||
handleEditHouse(house) {
|
||||
this.currentHouse = { ...house };
|
||||
this.isEditHouse = true;
|
||||
this.houseDialogVisible = true;
|
||||
},
|
||||
async handleDeleteHouse(house) {
|
||||
try {
|
||||
await this.$confirm(`确认删除猪舍 "${house.name}" 吗？`, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
});
|
||||
await deletePigHouse(house.id);
|
||||
this.$message.success('删除成功');
|
||||
await this.loadData();
|
||||
} catch (err) {
|
||||
if (err !== 'cancel') {
|
||||
this.$message.error('删除失败: ' + (err.message || '未知错误'));
|
||||
console.error('Failed to delete pig house:', err);
|
||||
}
|
||||
}
|
||||
},
|
||||
async handleHouseSuccess() {
|
||||
this.houseDialogVisible = false;
|
||||
await this.loadData();
|
||||
},
|
||||
// --- 猪栏操作 ---
|
||||
handleAddPen(house) {
|
||||
this.currentPen = { house_id: house.id };
|
||||
this.isEditPen = false;
|
||||
this.penDialogVisible = true;
|
||||
},
|
||||
handleEditPen(pen) {
|
||||
this.currentPen = { ...pen };
|
||||
this.isEditPen = true;
|
||||
this.penDialogVisible = true;
|
||||
},
|
||||
async handleDeletePen(pen) {
|
||||
try {
|
||||
await this.$confirm(`确认删除猪栏 "${pen.pen_number}" 吗？`, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
});
|
||||
await deletePen(pen.id);
|
||||
this.$message.success('删除成功');
|
||||
await this.loadData();
|
||||
} catch (err) {
|
||||
if (err !== 'cancel') {
|
||||
this.$message.error('删除失败: ' + (err.message || '未知错误'));
|
||||
console.error('Failed to delete pen:', err);
|
||||
}
|
||||
}
|
||||
},
|
||||
async handlePenSuccess() {
|
||||
this.penDialogVisible = false;
|
||||
await this.loadData();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.pig-farm-management {
|
||||
padding: 20px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
.title-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.refresh-btn {
|
||||
color: black;
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.loading {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.error {
|
||||
padding: 20px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.retry-btn {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.pig-farm-management {
|
||||
padding: 10px;
|
||||
}
|
||||
.card-header {
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user