年龄管理界面
This commit is contained in:
103
src/components/feed/PigAgeStageForm.vue
Normal file
103
src/components/feed/PigAgeStageForm.vue
Normal file
@@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<el-form :model="formData" :rules="rules" ref="formRef" label-width="120px">
|
||||
<el-form-item label="年龄阶段名称" prop="name">
|
||||
<el-input v-model="formData.name" placeholder="请输入年龄阶段名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述" prop="description">
|
||||
<el-input
|
||||
v-model="formData.description"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="请输入年龄阶段描述"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm">提交</el-button>
|
||||
<el-button @click="cancelForm">取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
|
||||
export default {
|
||||
name: 'PigAgeStageForm',
|
||||
props: {
|
||||
isEdit: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
initialData: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
name: '',
|
||||
description: '',
|
||||
}),
|
||||
},
|
||||
},
|
||||
emits: ['submit', 'cancel'],
|
||||
setup(props, { emit }) {
|
||||
const formRef = ref(null);
|
||||
const formData = reactive({
|
||||
name: '',
|
||||
description: '',
|
||||
});
|
||||
|
||||
// 监听 initialData 变化，用于编辑模式下初始化表单
|
||||
watch(
|
||||
() => props.initialData,
|
||||
(newVal) => {
|
||||
if (newVal) {
|
||||
formData.name = newVal.name || '';
|
||||
formData.description = newVal.description || '';
|
||||
}
|
||||
},
|
||||
{ immediate: true, deep: true }
|
||||
);
|
||||
|
||||
const rules = {
|
||||
name: [
|
||||
{ required: true, message: '请输入年龄阶段名称', trigger: 'blur' },
|
||||
{ min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' },
|
||||
],
|
||||
};
|
||||
|
||||
const submitForm = () => {
|
||||
formRef.value.validate((valid) => {
|
||||
if (valid) {
|
||||
emit('submit', { ...formData });
|
||||
} else {
|
||||
ElMessage.error('请检查表单项');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const cancelForm = () => {
|
||||
emit('cancel');
|
||||
resetForm();
|
||||
};
|
||||
|
||||
const resetForm = () => {
|
||||
formRef.value.resetFields();
|
||||
// 手动重置 formData，因为 resetFields 不会重置未绑定 prop 的字段
|
||||
formData.name = '';
|
||||
formData.description = '';
|
||||
};
|
||||
|
||||
return {
|
||||
formRef,
|
||||
formData,
|
||||
rules,
|
||||
submitForm,
|
||||
cancelForm,
|
||||
resetForm,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
199
src/components/feed/PigAgeStageTable.vue
Normal file
199
src/components/feed/PigAgeStageTable.vue
Normal file
@@ -0,0 +1,199 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 搜索区域 -->
|
||||
<div style="margin-bottom: 20px; display: flex; align-items: center; gap: 10px;">
|
||||
<el-input
|
||||
v-model="searchKeyword"
|
||||
placeholder="请输入年龄阶段名称"
|
||||
clearable
|
||||
style="width: 300px;"
|
||||
@keyup.enter="handleSearch"
|
||||
></el-input>
|
||||
<el-button type="primary" @click="handleSearch">搜索</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 猪年龄阶段列表 -->
|
||||
<el-table :data="tableData" style="width: 100%" v-loading="loading" row-key="id"
|
||||
:expand-row-keys="expandRowKeys" @expand-change="handleExpandChange">
|
||||
<el-table-column type="expand">
|
||||
<template #default="props">
|
||||
<div style="padding: 10px 20px;">
|
||||
<h4>各品种当前年龄简介</h4>
|
||||
<el-table :data="props.row.pig_types" border>
|
||||
<el-table-column prop="breed_name" label="猪品种"></el-table-column>
|
||||
<el-table-column prop="description" label="描述"></el-table-column>
|
||||
<el-table-column prop="min_days" label="最小天数"></el-table-column>
|
||||
<el-table-column prop="max_days" label="最大天数"></el-table-column>
|
||||
<el-table-column prop="min_weight" label="最小体重(kg)" :formatter="weightFormatter"></el-table-column>
|
||||
<el-table-column prop="max_weight" label="最大体重(kg)" :formatter="weightFormatter"></el-table-column>
|
||||
<el-table-column prop="daily_gain_weight" label="日增重(kg)" :formatter="weightFormatter"></el-table-column>
|
||||
<el-table-column prop="daily_feed_intake" label="日采食量(kg)" :formatter="weightFormatter"></el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="年龄阶段名称"></el-table-column>
|
||||
<el-table-column prop="description" label="描述"></el-table-column>
|
||||
<el-table-column label="操作" width="180">
|
||||
<template #default="scope">
|
||||
<el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
|
||||
<el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<el-pagination
|
||||
style="margin-top: 20px;"
|
||||
:current-page="pagination.page"
|
||||
:page-size="pagination.page_size"
|
||||
:total="pagination.total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
></el-pagination>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {ref, onMounted} from 'vue';
|
||||
import {FeedApi} from '../../api/feed';
|
||||
import {ElMessageBox, ElMessage} from 'element-plus';
|
||||
|
||||
export default {
|
||||
name: 'PigAgeStageTable',
|
||||
emits: ['edit'], // 声明触发的事件
|
||||
setup(props, { emit }) {
|
||||
const tableData = ref([]);
|
||||
const loading = ref(false);
|
||||
const searchKeyword = ref('');
|
||||
const expandRowKeys = ref([]); // 用于控制展开行
|
||||
|
||||
const pagination = ref({
|
||||
page: 1,
|
||||
page_size: 10,
|
||||
total: 0,
|
||||
});
|
||||
|
||||
const fetchPigAgeStages = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
const params = {
|
||||
page: pagination.value.page,
|
||||
page_size: pagination.value.page_size,
|
||||
};
|
||||
|
||||
if (searchKeyword.value) {
|
||||
params.name = searchKeyword.value; // 按名称模糊查询
|
||||
}
|
||||
|
||||
const response = await FeedApi.getPigAgeStages(params);
|
||||
|
||||
if (response.data) {
|
||||
tableData.value = response.data.list;
|
||||
pagination.value.total = response.data.pagination.total;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取猪年龄阶段列表失败:', error);
|
||||
ElMessage.error('获取猪年龄阶段列表失败');
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
pagination.value.page = 1;
|
||||
fetchPigAgeStages();
|
||||
};
|
||||
|
||||
const handleSizeChange = (size) => {
|
||||
pagination.value.page_size = size;
|
||||
fetchPigAgeStages();
|
||||
};
|
||||
|
||||
const handleCurrentChange = (page) => {
|
||||
pagination.value.page = page;
|
||||
fetchPigAgeStages();
|
||||
};
|
||||
|
||||
// 处理行展开/折叠事件
|
||||
const handleExpandChange = async (row, expandedRows) => {
|
||||
const isExpanded = expandedRows.some(r => r.id === row.id);
|
||||
// 优化：仅在展开时且数据未加载时才请求
|
||||
// 注意：PigAgeStageResponse 默认不包含 pig_types 字段，需要单独请求
|
||||
if (isExpanded && (!row.pig_types || row.pig_types.length === 0)) {
|
||||
try {
|
||||
// 调用 getPigTypes 接口，按 age_stage_id 筛选，并显式设置 page 参数
|
||||
const response = await FeedApi.getPigTypes({ age_stage_id: row.id, page: 1, page_size: 999 }); // 获取所有相关猪类型
|
||||
if (response.data && response.data.list) {
|
||||
const index = tableData.value.findIndex(item => item.id === row.id);
|
||||
if (index !== -1) {
|
||||
tableData.value[index].pig_types = response.data.list;
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取该年龄阶段下的猪类型失败:', error);
|
||||
ElMessage.error('获取猪类型失败');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 将克转换为公斤并格式化，只返回数值
|
||||
const weightFormatter = (row, column, cellValue) => {
|
||||
if (typeof cellValue === 'number') {
|
||||
return (cellValue / 1000).toFixed(2);
|
||||
}
|
||||
return cellValue;
|
||||
};
|
||||
|
||||
const handleEdit = (row) => {
|
||||
emit('edit', row); // 触发 edit 事件，并传递当前行数据
|
||||
};
|
||||
|
||||
const handleDelete = (row) => {
|
||||
ElMessageBox.confirm(
|
||||
`确定要删除年龄阶段 "${row.name}" 吗？`,
|
||||
'提示',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
).then(async () => {
|
||||
try {
|
||||
await FeedApi.deletePigAgeStage(row.id);
|
||||
ElMessage.success('删除成功');
|
||||
await fetchPigAgeStages();
|
||||
} catch (error) {
|
||||
ElMessage.error('删除失败: ' + (error.message || '未知错误'));
|
||||
}
|
||||
}).catch(() => {
|
||||
// 用户取消操作
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
fetchPigAgeStages();
|
||||
});
|
||||
|
||||
return {
|
||||
tableData,
|
||||
loading,
|
||||
searchKeyword,
|
||||
expandRowKeys,
|
||||
pagination,
|
||||
handleSearch,
|
||||
handleSizeChange,
|
||||
handleCurrentChange,
|
||||
handleExpandChange,
|
||||
weightFormatter, // 暴露给模板
|
||||
handleEdit,
|
||||
handleDelete,
|
||||
fetchPigAgeStages, // 将方法暴露出去
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -90,6 +90,12 @@
|
||||
</el-icon>
|
||||
<template #title>营养管理</template>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/feed/pig-age-stages">
|
||||
<el-icon>
|
||||
<Tickets/>
|
||||
</el-icon>
|
||||
<template #title>猪年龄阶段管理</template>
|
||||
</el-menu-item>
|
||||
|
||||
</el-sub-menu>
|
||||
|
||||
|
||||
@@ -24,7 +24,8 @@ import WeighingRecordsView from '../views/monitor/WeighingRecordsView.vue';
|
||||
import AlarmList from '../views/alarm/AlarmList.vue';
|
||||
import ThresholdAlarmList from '../views/alarm/ThresholdAlarmList.vue';
|
||||
import RawMaterialList from '../views/feed/RawMaterialList.vue';
|
||||
import NutrientList from '../views/feed/NutrientList.vue'; // 导入 NutrientList 组件
|
||||
import NutrientList from '../views/feed/NutrientList.vue'; // 修正拼写错误
|
||||
import PigAgeStageList from '../views/feed/PigAgeStageList.vue'; // 导入 PigAgeStageList 组件
|
||||
|
||||
const routes = [
|
||||
{path: '/', component: Home, meta: {requiresAuth: true, title: '系统首页'}},
|
||||
@@ -37,7 +38,8 @@ const routes = [
|
||||
{path: '/pms/farm-management', name: 'PigFarmManagement', component: PigFarmManagementView, meta: { requiresAuth: true, title: '栏舍管理' }},
|
||||
{path: '/pms/batch-management', name: 'PigBatchManagement', component: PigBatchManagementView, meta: { requiresAuth: true, title: '猪群管理' }},
|
||||
{path: '/feed/raw-materials', component: RawMaterialList, meta: {requiresAuth: true, title: '原料管理'}},
|
||||
{path: '/feed/nutrients', component: NutrientList, meta: {requiresAuth: true, title: '营养管理'}}, // 添加营养管理路由
|
||||
{path: '/feed/nutrients', component: NutrientList, meta: {requiresAuth: true, title: '营养管理'}},
|
||||
{path: '/feed/pig-age-stages', component: PigAgeStageList, meta: {requiresAuth: true, title: '猪年龄阶段管理'}}, // 添加猪年龄阶段管理路由
|
||||
{path: '/monitor/device-command-logs', component: DeviceCommandLogView, meta: {requiresAuth: true, title: '设备命令日志'}},
|
||||
{path: '/monitor/medication-logs', component: MedicationLogsView, meta: {requiresAuth: true, title: '用药记录'}},
|
||||
{path: '/monitor/notifications', component: NotificationLogView, meta: {requiresAuth: true, title: '通知记录'}},
|
||||
|
||||
184
src/views/feed/PigAgeStageList.vue
Normal file
184
src/views/feed/PigAgeStageList.vue
Normal file
@@ -0,0 +1,184 @@
|
||||
<template>
|
||||
<div class="pig-age-stage-list-container">
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<div class="title-container">
|
||||
<h2 class="page-title">猪年龄阶段管理</h2>
|
||||
<el-button type="text" @click="refreshList" class="refresh-btn" title="刷新年龄阶段列表">
|
||||
<el-icon :size="20"><Refresh /></el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
<el-button type="primary" @click="handleAddPigAgeStage">添加年龄阶段</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<pig-age-stage-table ref="pigAgeStageTableRef" @edit="handleEdit"></pig-age-stage-table>
|
||||
</el-card>
|
||||
|
||||
<!-- 添加/编辑猪年龄阶段弹窗 -->
|
||||
<el-dialog
|
||||
v-model="showDialog"
|
||||
:title="formTitle"
|
||||
width="500px"
|
||||
:close-on-click-modal="false"
|
||||
@close="handleCancel"
|
||||
>
|
||||
<!-- 只有在弹窗显示时才渲染表单组件，并传递编辑状态和初始数据 -->
|
||||
<pig-age-stage-form
|
||||
v-if="showDialog"
|
||||
ref="pigAgeStageFormRef"
|
||||
:isEdit="isEditMode"
|
||||
:initialData="currentEditData"
|
||||
@submit="handleSubmit"
|
||||
@cancel="handleCancel"
|
||||
></pig-age-stage-form>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, nextTick } from 'vue';
|
||||
import { Refresh } from '@element-plus/icons-vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import PigAgeStageTable from '../../components/feed/PigAgeStageTable.vue';
|
||||
import PigAgeStageForm from '../../components/feed/PigAgeStageForm.vue';
|
||||
import { FeedApi } from '../../api/feed';
|
||||
|
||||
export default {
|
||||
name: 'PigAgeStageList',
|
||||
components: {
|
||||
PigAgeStageTable,
|
||||
PigAgeStageForm,
|
||||
Refresh,
|
||||
},
|
||||
setup() {
|
||||
const pigAgeStageTableRef = ref(null);
|
||||
const pigAgeStageFormRef = ref(null);
|
||||
const showDialog = ref(false);
|
||||
const isEditMode = ref(false);
|
||||
const currentEditData = ref(null);
|
||||
const formTitle = ref('添加年龄阶段');
|
||||
|
||||
const refreshList = () => {
|
||||
if (pigAgeStageTableRef.value) {
|
||||
pigAgeStageTableRef.value.fetchPigAgeStages();
|
||||
}
|
||||
};
|
||||
|
||||
// 处理添加年龄阶段按钮点击事件
|
||||
const handleAddPigAgeStage = () => {
|
||||
formTitle.value = '添加年龄阶段';
|
||||
isEditMode.value = false; // 新增模式
|
||||
currentEditData.value = null; // 清空编辑数据
|
||||
showDialog.value = true;
|
||||
nextTick(() => {
|
||||
pigAgeStageFormRef.value?.resetForm();
|
||||
});
|
||||
};
|
||||
|
||||
// 处理编辑按钮点击事件
|
||||
const handleEdit = (row) => {
|
||||
formTitle.value = '编辑年龄阶段';
|
||||
isEditMode.value = true; // 编辑模式
|
||||
currentEditData.value = { ...row }; // 存储当前编辑数据，进行深拷贝
|
||||
showDialog.value = true;
|
||||
};
|
||||
|
||||
// 处理表单提交
|
||||
const handleSubmit = async (formData) => {
|
||||
try {
|
||||
let message = '';
|
||||
if (isEditMode.value) {
|
||||
// 编辑模式
|
||||
await FeedApi.updatePigAgeStage(currentEditData.value.id, formData);
|
||||
message = '年龄阶段更新成功';
|
||||
} else {
|
||||
// 新增模式
|
||||
await FeedApi.createPigAgeStage(formData);
|
||||
message = '年龄阶段添加成功';
|
||||
}
|
||||
ElMessage.success(message);
|
||||
refreshList(); // 刷新列表
|
||||
showDialog.value = false; // 关闭弹窗
|
||||
} catch (error) {
|
||||
ElMessage.error('操作失败: ' + (error.message || '未知错误'));
|
||||
}
|
||||
};
|
||||
|
||||
// 处理弹窗取消或关闭
|
||||
const handleCancel = () => {
|
||||
showDialog.value = false;
|
||||
// 关闭弹窗时重置表单和编辑状态
|
||||
if (pigAgeStageFormRef.value) {
|
||||
pigAgeStageFormRef.value.resetForm();
|
||||
}
|
||||
isEditMode.value = false;
|
||||
currentEditData.value = null;
|
||||
};
|
||||
|
||||
return {
|
||||
pigAgeStageTableRef,
|
||||
pigAgeStageFormRef,
|
||||
showDialog,
|
||||
formTitle,
|
||||
isEditMode,
|
||||
currentEditData,
|
||||
refreshList,
|
||||
handleAddPigAgeStage,
|
||||
handleEdit,
|
||||
handleSubmit,
|
||||
handleCancel,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.pig-age-stage-list-container {
|
||||
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;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.pig-age-stage-list-container {
|
||||
padding: 10px;
|
||||
}
|
||||
.card-header {
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user