pig/pig-farm-controller-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

支持修改营养需求

Browse Source
This commit is contained in:
huang
2025-11-22 18:30:01 +08:00
parent 9761bf1dbb
commit c0e33ad429
6 changed files with 302 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/feed/NutrientEditor.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="nutrient-editor">
<el-form label-width="100px">
<el-form label-width="200px" style="max-height: 300px; overflow-y: auto;">
<el-form-item v-for="(nutrient, index) in localNutrients" :key="index" :label="nutrient.nutrient_name">
<el-input-number v-model="nutrient.value" :min="0" controls-position="right" style="width: 150px;"></el-input-number>
<el-button type="danger" @click="removeNutrient(index)" style="margin-left: 10px;">
@@ -10,7 +10,7 @@
</el-form>
<div class="add-nutrient-section">
<el-select v-model="newNutrientId" placeholder="选择要添加的营养素" filterable>
<el-select v-model="newNutrientId" placeholder="选择要添加的营养素" filterable style="width: 250px;">
<el-option v-for="item in availableNutrients" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
<el-button type="primary" @click="addNutrient" style="margin-left: 10px;">添加</el-button>
@@ -127,6 +127,15 @@ export default {
.nutrient-editor {
padding: 20px;
}
/* 确保 el-form-item 的标签不换行 */
.el-form-item {
/* 移除 display: flex; 因为 label-width 会处理对齐 */
}
.el-form-item__label {
white-space: nowrap; /* 强制不换行 */
/* 移除 flex-shrink: 0; 和 min-width: 150px; 因为 label-width 会处理宽度 */
text-align: right; /* 标签右对齐 */
}
.add-nutrient-section {
margin-top: 20px;
display: flex;

21
src/components/feed/PigAgeStageTable.vue
View File

@@ -77,8 +77,8 @@
<PigNutrientRequirementsDisplay
v-if="showNutrientDialog"
:nutrientRequirements="currentNutrientRequirements"
:breedName="currentBreedName"
:ageStageName="currentAgeStageName"
:pigTypeId="currentPigTypeId"
@refresh="handleNutrientRequirementsRefresh"
></PigNutrientRequirementsDisplay>
</el-dialog>
</div>
@@ -108,6 +108,7 @@ export default {
const currentNutrientRequirements = ref([]);
const currentBreedName = ref('');
const currentAgeStageName = ref('');
const currentPigTypeId = ref(null); // 新增：用于传递给营养需求编辑器的 pigType ID
const pagination = ref({
page: 1,
@@ -202,6 +203,7 @@ export default {
currentNutrientRequirements.value = pigType.pig_nutrient_requirements || [];
currentBreedName.value = pigType.breed_name;
currentAgeStageName.value = pigType.age_stage_name;
currentPigTypeId.value = pigType.id; // 设置当前的 pigType ID
showNutrientDialog.value = true;
};
@@ -231,6 +233,19 @@ export default {
});
};
// 处理营养需求编辑后的刷新事件
const handleNutrientRequirementsRefresh = async () => {
// 重新获取当前展开行的 pig_types 数据
const expandedRow = tableData.value.find(item => expandRowKeys.value.includes(item.id));
if (expandedRow) {
// 重新调用 handleExpandChange 来刷新该行的 pig_types 数据
// 确保传入的 expandedRows 包含当前行，以便触发数据加载逻辑
await handleExpandChange(expandedRow, [expandedRow]);
}
// 关闭弹窗
showNutrientDialog.value = false;
};
onMounted(() => {
fetchPigAgeStages();
});
@@ -246,6 +261,7 @@ export default {
currentNutrientRequirements,
currentBreedName,
currentAgeStageName,
currentPigTypeId,
handleSearch,
handleSizeChange,
handleCurrentChange,
@@ -256,6 +272,7 @@ export default {
handleEdit,
handleDelete,
fetchPigAgeStages, // 将方法暴露出去
handleNutrientRequirementsRefresh, // 暴露给模板
};
},
};

23
src/components/feed/PigBreedTable.vue
View File

@@ -102,14 +102,14 @@
<el-dialog
v-model="showNutrientDialog"
:title="`品种 ${currentBreedName} - 年龄阶段 ${currentAgeStageName} 营养需求`"
width="600px"
width="700px"
:close-on-click-modal="false"
>
<PigNutrientRequirementsDisplay
v-if="showNutrientDialog"
:nutrientRequirements="currentNutrientRequirements"
:breedName="currentBreedName"
:ageStageName="currentAgeStageName"
:pigTypeId="currentPigTypeId"
@refresh="handleNutrientRequirementsRefresh"
></PigNutrientRequirementsDisplay>
</el-dialog>
</div>
@@ -139,6 +139,7 @@ export default {
const currentNutrientRequirements = ref([]);
const currentBreedName = ref('');
const currentAgeStageName = ref('');
const currentPigTypeId = ref(null); // 新增：用于传递给营养需求编辑器的 pigType ID
const pagination = ref({
page: 1,
@@ -235,6 +236,7 @@ export default {
currentNutrientRequirements.value = pigType.pig_nutrient_requirements || [];
currentBreedName.value = pigType.breed_name;
currentAgeStageName.value = pigType.age_stage_name;
currentPigTypeId.value = pigType.id; // 设置当前的 pigType ID
showNutrientDialog.value = true;
};
@@ -264,6 +266,19 @@ export default {
});
};
// 处理营养需求编辑后的刷新事件
const handleNutrientRequirementsRefresh = async () => {
// 重新获取当前展开行的 pig_types 数据
const expandedRow = tableData.value.find(item => expandRowKeys.value.includes(item.id));
if (expandedRow) {
// 重新调用 handleExpandChange 来刷新该行的 pig_types 数据
// 确保传入的 expandedRows 包含当前行，以便触发数据加载逻辑
await handleExpandChange(expandedRow, [expandedRow]);
}
// 关闭弹窗
showNutrientDialog.value = false;
};
onMounted(() => {
fetchPigBreeds();
});
@@ -279,6 +294,7 @@ export default {
currentNutrientRequirements,
currentBreedName,
currentAgeStageName,
currentPigTypeId,
handleSearch,
handleSizeChange,
handleCurrentChange,
@@ -289,6 +305,7 @@ export default {
handleEdit,
handleDelete,
fetchPigBreeds, // 将方法暴露出去
handleNutrientRequirementsRefresh, // 暴露给模板
};
},
};

71
src/components/feed/PigNutrientRequirementsDisplay.vue
View File

@@ -1,35 +1,72 @@
<template>
<div class="pig-nutrient-requirements-display">
<el-table :data="nutrientRequirements" border style="width: 100%">
<el-table-column prop="nutrient_name" label="营养素名称"></el-table-column>
<el-table-column prop="min_requirement" label="最小需求量"></el-table-column>
<el-table-column prop="max_requirement" label="最大需求量"></el-table-column>
</el-table>
<div v-if="nutrientRequirements.length === 0" class="no-data-message">
暂无该品种该年龄阶段的营养需求数据。
<div v-if="!isEditing">
<div class="edit-button-container">
<el-button type="primary" @click="handleEdit">编辑营养需求</el-button>
</div>
<el-table :data="nutrientRequirements" border style="width: 100%; max-height: 300px; overflow-y: auto;">
<el-table-column prop="nutrient_name" label="营养素名称"></el-table-column>
<el-table-column prop="min_requirement" label="最小需求量"></el-table-column>
<el-table-column prop="max_requirement" label="最大需求量"></el-table-column>
</el-table>
<div v-if="nutrientRequirements.length === 0" class="no-data-message">
暂无该品种该年龄阶段的营养需求数据。
</div>
</div>
<PigNutrientRequirementsEditor
v-else
:initialNutrientRequirements="nutrientRequirements"
:pigTypeId="pigTypeId"
@save="handleSave"
@cancel="handleCancel"
></PigNutrientRequirementsEditor>
</div>
</template>
<script>
import { defineComponent } from 'vue';
import { defineComponent, ref } from 'vue';
import PigNutrientRequirementsEditor from './PigNutrientRequirementsEditor.vue';
export default defineComponent({
name: 'PigNutrientRequirementsDisplay',
components: {
PigNutrientRequirementsEditor,
},
props: {
nutrientRequirements: {
type: Array,
default: () => [],
},
breedName: {
type: String,
default: '',
},
ageStageName: {
type: String,
default: '',
pigTypeId: { // 猪类型ID，用于传递给编辑器组件
type: Number,
required: true,
},
},
emits: ['refresh'], // 声明触发的事件，用于通知父组件刷新数据
setup(props, { emit }) {
const isEditing = ref(false); // 控制显示展示模式还是编辑模式
const handleEdit = () => {
isEditing.value = true;
};
const handleSave = () => {
isEditing.value = false;
emit('refresh'); // 通知父组件刷新数据
};
const handleCancel = () => {
isEditing.value = false;
};
return {
isEditing,
handleEdit,
handleSave,
handleCancel,
};
},
});
</script>
@@ -43,4 +80,8 @@ export default defineComponent({
color: #909399;
margin-top: 20px;
}
.edit-button-container {
margin-bottom: 20px; /* 调整按钮与表格之间的间距 */
text-align: right;
}
</style>

192
src/components/feed/PigNutrientRequirementsEditor.vue Normal file
View File

@@ -0,0 +1,192 @@
<template>
<div class="pig-nutrient-requirements-editor">
<el-form style="max-height: 300px; overflow-y: auto;">
<el-form-item v-for="(req, index) in localNutrientRequirements" :key="req.nutrient_id" :label="req.nutrient_name">
<div class="nutrient-input-group">
<el-input-number
v-model="req.min_requirement"
:min="0"
:step="0.01"
:precision="2"
controls-position="right"
placeholder="最小值"
style="width: 120px;"
></el-input-number>
<span style="margin: 0 10px;">-</span>
<el-input-number
v-model="req.max_requirement"
:min="0"
:step="0.01"
:precision="2"
controls-position="right"
placeholder="最大值"
style="width: 120px;"
></el-input-number>
<el-button type="danger" @click="removeNutrientRequirement(index)" style="margin-left: 10px;">
<el-icon><Delete /></el-icon>
</el-button>
</div>
</el-form-item>
</el-form>
<div class="add-nutrient-section">
<el-select v-model="newNutrientId" placeholder="选择要添加的营养素" filterable style="width: 250px;">
<el-option v-for="item in availableNutrients" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
<el-button type="primary" @click="addNutrientRequirement" style="margin-left: 10px;">添加</el-button>
</div>
<div class="dialog-footer">
<el-button @click="handleCancel">取消</el-button>
<el-button type="primary" @click="handleSave">保存</el-button>
</div>
</div>
</template>
<script>
import { ref, watch, onMounted, computed } from 'vue';
import { FeedApi } from '../../api/feed';
import { ElMessage } from 'element-plus';
import { Delete } from '@element-plus/icons-vue';
export default {
name: 'PigNutrientRequirementsEditor',
components: {
Delete,
},
props: {
initialNutrientRequirements: {
type: Array,
default: () => [],
},
pigTypeId: { // 猪类型ID，用于更新API
type: Number,
required: true,
}
},
emits: ['save', 'cancel'],
setup(props, { emit }) {
const localNutrientRequirements = ref([]);
const allNutrients = ref([]); // 所有营养素列表
const newNutrientId = ref(null);
// 计算属性，用于过滤掉已经存在的营养素
const availableNutrients = computed(() => {
const existingNutrientIds = new Set(localNutrientRequirements.value.map(req => req.nutrient_id));
return allNutrients.value.filter(nutrient => !existingNutrientIds.has(nutrient.id));
});
// 监听 initialNutrientRequirements 的变化，深拷贝以避免直接修改 props
watch(() => props.initialNutrientRequirements, (newData) => {
localNutrientRequirements.value = JSON.parse(JSON.stringify(newData));
}, { immediate: true, deep: true });
// 获取所有可用的营养素列表
const fetchAllNutrients = async () => {
try {
const response = await FeedApi.getNutrients({ page_size: 999 }); // 获取所有营养素
if (response.data && response.data.list) {
allNutrients.value = response.data.list;
}
} catch (error) {
ElMessage.error('获取营养素列表失败');
}
};
const removeNutrientRequirement = (index) => {
localNutrientRequirements.value.splice(index, 1);
};
const addNutrientRequirement = () => {
if (!newNutrientId.value) {
ElMessage.warning('请先选择一个营养素');
return;
}
const nutrientToAdd = allNutrients.value.find(n => n.id === newNutrientId.value);
if (nutrientToAdd) {
localNutrientRequirements.value.push({
nutrient_id: nutrientToAdd.id,
nutrient_name: nutrientToAdd.name,
min_requirement: 0, // 默认最小值
max_requirement: 0, // 默认最大值
});
newNutrientId.value = null; // 重置选择
}
};
const handleSave = async () => {
// 验证 min_requirement <= max_requirement
for (const req of localNutrientRequirements.value) {
if (req.min_requirement > req.max_requirement) {
ElMessage.error(`营养素 ${req.nutrient_name} 的最小值不能大于最大值`);
return;
}
}
// 构造符合 API 要求的数据格式
const requirementsToSave = localNutrientRequirements.value.map(req => ({
nutrient_id: req.nutrient_id,
min_requirement: req.min_requirement,
max_requirement: req.max_requirement,
}));
try {
// 调用API更新营养需求
await FeedApi.updatePigNutrientRequirements(props.pigTypeId, { pig_nutrient_requirements: requirementsToSave });
ElMessage.success('营养需求更新成功');
emit('save'); // 通知父组件保存成功
} catch (error) {
ElMessage.error('保存失败: ' + (error.message || '未知错误'));
}
};
const handleCancel = () => {
emit('cancel');
};
onMounted(() => {
fetchAllNutrients();
});
return {
localNutrientRequirements,
availableNutrients,
newNutrientId,
removeNutrientRequirement,
addNutrientRequirement,
handleSave,
handleCancel,
};
},
};
</script>
<style scoped>
.pig-nutrient-requirements-editor {
padding: 20px;
}
/* 确保 el-form-item 的标签不换行 */
.el-form-item {
display: flex; /* 使用 flex 布局 */
}
.el-form-item__label {
white-space: nowrap; /* 强制不换行 */
flex-shrink: 0; /* 防止收缩 */
text-align: right; /* 标签右对齐 */
/* 可以根据需要调整一个最小宽度，但通常 flex-shrink: 0 配合内容自适应就足够 */
min-width: 150px; /* 示例：给一个最小宽度，确保对齐效果 */
}
.nutrient-input-group {
display: flex;
align-items: center;
}
.add-nutrient-section {
margin-top: 20px;
display: flex;
align-items: center;
}
.dialog-footer {
margin-top: 30px;
text-align: right;
}
</style>

2
src/views/feed/RawMaterialList.vue
View File

@@ -37,7 +37,7 @@
<el-dialog
v-model="showNutrientDialog"
title="修改营养成分"
width="600px"
width="700px"
:close-on-click-modal="false"
@close="handleNutrientCancel"
>