From c0e33ad42974248939e56c124dfe583775801cad Mon Sep 17 00:00:00 2001
From: huang <1724659546@qq.com>
Date: Sat, 22 Nov 2025 18:30:01 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=AF=E6=8C=81=E4=BF=AE=E6=94=B9=E8=90=A5?=
 =?UTF-8?q?=E5=85=BB=E9=9C=80=E6=B1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/feed/NutrientEditor.vue        |  15 +-
 src/components/feed/PigAgeStageTable.vue      |  23 ++-
 src/components/feed/PigBreedTable.vue         |  25 ++-
 .../feed/PigNutrientRequirementsDisplay.vue   |  71 +++++--
 .../feed/PigNutrientRequirementsEditor.vue    | 192 ++++++++++++++++++
 src/views/feed/RawMaterialList.vue            |   2 +-
 6 files changed, 302 insertions(+), 26 deletions(-)
 create mode 100644 src/components/feed/PigNutrientRequirementsEditor.vue

diff --git a/src/components/feed/NutrientEditor.vue b/src/components/feed/NutrientEditor.vue
index ee57e242..f4b8280b 100644
--- a/src/components/feed/NutrientEditor.vue
+++ b/src/components/feed/NutrientEditor.vue
@@ -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;
@@ -136,4 +145,4 @@ export default {
   margin-top: 30px;
   text-align: right;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/feed/PigAgeStageTable.vue b/src/components/feed/PigAgeStageTable.vue
index 7f129946..efb08e68 100644
--- a/src/components/feed/PigAgeStageTable.vue
+++ b/src/components/feed/PigAgeStageTable.vue
@@ -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,10 +272,11 @@ export default {
       handleEdit,
       handleDelete,
       fetchPigAgeStages, // 将方法暴露出去
+      handleNutrientRequirementsRefresh, // 暴露给模板
     };
   },
 };
 </script>
 
 <style scoped>
-</style>
+</style>
\ No newline at end of file
diff --git a/src/components/feed/PigBreedTable.vue b/src/components/feed/PigBreedTable.vue
index a0b7d88a..7568a89d 100644
--- a/src/components/feed/PigBreedTable.vue
+++ b/src/components/feed/PigBreedTable.vue
@@ -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,10 +305,11 @@ export default {
       handleEdit,
       handleDelete,
       fetchPigBreeds, // 将方法暴露出去
+      handleNutrientRequirementsRefresh, // 暴露给模板
     };
   },
 };
 </script>
 
 <style scoped>
-</style>
+</style>
\ No newline at end of file
diff --git a/src/components/feed/PigNutrientRequirementsDisplay.vue b/src/components/feed/PigNutrientRequirementsDisplay.vue
index b9eb3f2c..fef2676f 100644
--- a/src/components/feed/PigNutrientRequirementsDisplay.vue
+++ b/src/components/feed/PigNutrientRequirementsDisplay.vue
@@ -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>
diff --git a/src/components/feed/PigNutrientRequirementsEditor.vue b/src/components/feed/PigNutrientRequirementsEditor.vue
new file mode 100644
index 00000000..fc81edba
--- /dev/null
+++ b/src/components/feed/PigNutrientRequirementsEditor.vue
@@ -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>
diff --git a/src/views/feed/RawMaterialList.vue b/src/views/feed/RawMaterialList.vue
index b2e90d6c..abab8a6c 100644
--- a/src/views/feed/RawMaterialList.vue
+++ b/src/views/feed/RawMaterialList.vue
@@ -37,7 +37,7 @@
     <el-dialog
       v-model="showNutrientDialog"
       title="修改营养成分"
-      width="600px"
+      width="700px"
       :close-on-click-modal="false"
       @close="handleNutrientCancel"
     >