猪类型增删改查界面

src/components/feed/PigBreedTable.vue

@@ -53,7 +53,12 @@
             <el-divider></el-divider>
 
             <!-- 下半段：该品种下的年龄阶段简介 -->
-            <h4 style="margin-bottom: 16px;">该品种下的年龄阶段简介</h4>
+            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
+              <h4>该品种下的年龄阶段简介</h4>
+              <el-button type="primary" size="small" @click="handleAddPigType(props.row.id)">添加年龄阶段</el-button>
+            </div>
+
+            <template v-if="props.row.pig_types && props.row.pig_types.length > 0">
               <el-table
                 :data="props.row.pig_types"
                 border
@@ -73,7 +78,20 @@
                     <el-button type="text" @click="handleViewNutrientRequirements(scope.row)">查看详情</el-button>
                   </template>
                 </el-table-column>
+                <!-- 新增操作列 -->
+                <el-table-column label="操作" width="150">
+                  <template #default="scope">
+                    <el-button size="small" @click="handleEditPigType(scope.row)">编辑</el-button>
+                    <el-button size="small" type="danger" @click="handleDeletePigType(scope.row)">删除</el-button>
+                  </template>
+                </el-table-column>
               </el-table>
+            </template>
+            <template v-else>
+              <el-empty description="暂无年龄阶段数据">
+                <el-button type="primary" @click="handleAddPigType(props.row.id)">点击添加首个年龄阶段</el-button>
+              </el-empty>
+            </template>
           </div>
         </template>
       </el-table-column>
@@ -112,6 +130,22 @@
           @refresh="handleNutrientRequirementsRefresh"
       ></PigNutrientRequirementsDisplay>
     </el-dialog>
+
+    <!-- 新增：年龄阶段编辑弹窗 -->
+    <el-dialog
+        v-model="showPigTypeDialog"
+        :title="isEditingPigType ? '编辑年龄阶段' : '添加年龄阶段'"
+        width="600px"
+        :close-on-click-modal="false"
+    >
+      <PigTypeEditor
+          v-if="showPigTypeDialog"
+          :initialData="currentPigType"
+          :breedId="currentBreedIdForPigType"
+          @save="handlePigTypeSave"
+          @cancel="handlePigTypeCancel"
+      ></PigTypeEditor>
+    </el-dialog>
   </div>
 </template>
 
@@ -120,12 +154,14 @@ import {ref, onMounted} from 'vue';
 import {FeedApi} from '../../api/feed';
 import {ElMessageBox, ElMessage} from 'element-plus';
 import PigNutrientRequirementsDisplay from './PigNutrientRequirementsDisplay.vue'; // 导入新的组件
+import PigTypeEditor from './PigTypeEditor.vue'; // 导入年龄阶段编辑器组件
 
 export default {
   name: 'PigBreedTable',
   emits: ['edit'], // 声明触发的事件
   components: {
     PigNutrientRequirementsDisplay, // 注册组件
+    PigTypeEditor, // 注册年龄阶段编辑器组件
   },
   setup(props, { emit }) {
     const mainTable = ref(null); // el-table 的引用
@@ -140,6 +176,11 @@ export default {
     const currentBreedName = ref('');
     const currentAgeStageName = ref('');
     const currentPigTypeId = ref(null); // 新增：用于传递给营养需求编辑器的 pigType ID
+    // 年龄阶段编辑弹窗相关
+    const showPigTypeDialog = ref(false);
+    const currentPigType = ref({}); // 当前编辑的年龄阶段数据
+    const currentBreedIdForPigType = ref(null); // 当前操作的品种ID
+    const isEditingPigType = ref(false); // 是否是编辑模式
 
     const pagination = ref({
       page: 1,
@@ -279,6 +320,73 @@ export default {
       showNutrientDialog.value = false;
     };
 
+    // 处理添加年龄阶段
+    const handleAddPigType = (breedId) => {
+      isEditingPigType.value = false;
+      currentPigType.value = { // 初始化新年龄阶段的数据
+        age_stage_name: '',
+        description: '',
+        min_days: 0,
+        max_days: 0,
+        min_weight: 0,
+        max_weight: 0,
+        daily_gain_weight: 0,
+        daily_feed_intake: 0,
+      };
+      currentBreedIdForPigType.value = breedId;
+      showPigTypeDialog.value = true;
+    };
+
+    // 处理编辑年龄阶段
+    const handleEditPigType = (pigType) => {
+      isEditingPigType.value = true;
+      currentPigType.value = { ...pigType }; // 复制一份数据进行编辑
+      currentBreedIdForPigType.value = pigType.breed_id;
+      showPigTypeDialog.value = true;
+    };
+
+    // 处理删除年龄阶段
+    const handleDeletePigType = (pigType) => {
+      ElMessageBox.confirm(
+          `确定要删除年龄阶段 "${pigType.age_stage_name}" 吗？`,
+          '提示',
+          {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning',
+          }
+      ).then(async () => {
+        try {
+          await FeedApi.deletePigType(pigType.id);
+          ElMessage.success('年龄阶段删除成功');
+          // 刷新当前展开行的 pig_types 数据
+          const expandedRow = tableData.value.find(item => expandRowKeys.value.includes(item.breed_id));
+          if (expandedRow) {
+            await handleExpandChange(expandedRow, [expandedRow]);
+          }
+        } catch (error) {
+          ElMessage.error('删除失败: ' + (error.message || '未知错误'));
+        }
+      }).catch(() => {
+        // 用户取消操作
+      });
+    };
+
+    // 年龄阶段编辑器保存后的回调
+    const handlePigTypeSave = async () => {
+      showPigTypeDialog.value = false;
+      // 刷新当前展开行的 pig_types 数据
+      const expandedRow = tableData.value.find(item => expandRowKeys.value.includes(currentBreedIdForPigType.value));
+      if (expandedRow) {
+        await handleExpandChange(expandedRow, [expandedRow]);
+      }
+    };
+
+    // 年龄阶段编辑器取消后的回调
+    const handlePigTypeCancel = () => {
+      showPigTypeDialog.value = false;
+    };
+
     onMounted(() => {
       fetchPigBreeds();
     });
@@ -295,6 +403,10 @@ export default {
       currentBreedName,
       currentAgeStageName,
       currentPigTypeId,
+      showPigTypeDialog,
+      currentPigType,
+      currentBreedIdForPigType,
+      isEditingPigType,
       handleSearch,
       handleSizeChange,
       handleCurrentChange,
@@ -305,7 +417,12 @@ export default {
       handleEdit,
       handleDelete,
       fetchPigBreeds, // 将方法暴露出去
+      handleAddPigType,
+      handleEditPigType,
+      handleDeletePigType,
       handleNutrientRequirementsRefresh, // 暴露给模板
+      handlePigTypeSave,
+      handlePigTypeCancel,
     };
   },
 };

src/components/feed/PigTypeEditor.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="pig-type-editor">
+    <el-form :model="formData" ref="formRef" label-width="120px">
+      <el-form-item label="年龄阶段名称" prop="age_stage_name" :rules="[{ required: true, message: '请输入年龄阶段名称', trigger: 'blur' }]">
+        <el-input v-model="formData.age_stage_name"></el-input>
+      </el-form-item>
+      <el-form-item label="描述" prop="description">
+        <el-input type="textarea" v-model="formData.description"></el-input>
+      </el-form-item>
+      <el-form-item label="最小天数" prop="min_days" :rules="[{ required: true, message: '请输入最小天数', trigger: 'blur' }]">
+        <el-input-number v-model="formData.min_days" :min="0" controls-position="right"></el-input-number>
+      </el-form-item>
+      <el-form-item label="最大天数" prop="max_days" :rules="[{ required: true, message: '请输入最大天数', trigger: 'blur' }]">
+        <el-input-number v-model="formData.max_days" :min="0" controls-position="right"></el-input-number>
+      </el-form-item>
+      <el-form-item label="最小体重(kg)" prop="min_weight">
+        <el-input-number v-model="formData.min_weight" :min="0" :step="0.01" :precision="2" controls-position="right"></el-input-number>
+      </el-form-item>
+      <el-form-item label="最大体重(kg)" prop="max_weight">
+        <el-input-number v-model="formData.max_weight" :min="0" :step="0.01" :precision="2" controls-position="right"></el-input-number>
+      </el-form-item>
+      <el-form-item label="日增重(kg)" prop="daily_gain_weight">
+        <el-input-number v-model="formData.daily_gain_weight" :min="0" :step="0.01" :precision="2" controls-position="right"></el-input-number>
+      </el-form-item>
+      <el-form-item label="日采食量(kg)" prop="daily_feed_intake">
+        <el-input-number v-model="formData.daily_feed_intake" :min="0" :step="0.01" :precision="2" controls-position="right"></el-input-number>
+      </el-form-item>
+    </el-form>
+
+    <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 } from 'vue';
+import { ElMessage } from 'element-plus';
+import { FeedApi } from '../../api/feed'; // Assuming FeedApi has createPigType and updatePigType
+
+export default {
+  name: 'PigTypeEditor',
+  props: {
+    initialData: {
+      type: Object,
+      default: () => ({}),
+    },
+    breedId: {
+      type: Number,
+      required: true,
+    },
+  },
+  emits: ['save', 'cancel'],
+  setup(props, { emit }) {
+    const formRef = ref(null);
+    const formData = ref({});
+
+    watch(() => props.initialData, (newData) => {
+      // 复制一份数据，避免直接修改props
+      formData.value = { ...newData };
+      // 将克转换为公斤显示
+      if (formData.value.min_weight) formData.value.min_weight /= 1000;
+      if (formData.value.max_weight) formData.value.max_weight /= 1000;
+      if (formData.value.daily_gain_weight) formData.value.daily_gain_weight /= 1000;
+      if (formData.value.daily_feed_intake) formData.value.daily_feed_intake /= 1000;
+    }, { immediate: true, deep: true });
+
+    const handleSave = () => {
+      formRef.value.validate(async (valid) => {
+        if (valid) {
+          try {
+            const dataToSave = {
+              breed_id: props.breedId,
+              age_stage_name: formData.value.age_stage_name,
+              description: formData.value.description,
+              min_days: formData.value.min_days,
+              max_days: formData.value.max_days,
+              min_weight: formData.value.min_weight * 1000, // Convert kg to g
+              max_weight: formData.value.max_weight * 1000, // Convert kg to g
+              daily_gain_weight: formData.value.daily_gain_weight * 1000, // Convert kg to g
+              daily_feed_intake: formData.value.daily_feed_intake * 1000, // Convert kg to g
+            };
+
+            if (formData.value.id) {
+              // 编辑现有年龄阶段
+              await FeedApi.updatePigType(formData.value.id, dataToSave);
+              ElMessage.success('年龄阶段更新成功');
+            } else {
+              // 添加新年龄阶段
+              await FeedApi.createPigType(dataToSave);
+              ElMessage.success('年龄阶段添加成功');
+            }
+            emit('save');
+          } catch (error) {
+            ElMessage.error('操作失败: ' + (error.message || '未知错误'));
+          }
+        }
+      });
+    };
+
+    const handleCancel = () => {
+      emit('cancel');
+    };
+
+    return {
+      formRef,
+      formData,
+      handleSave,
+      handleCancel,
+    };
+  },
+};
+</script>
+
+<style scoped>
+.pig-type-editor {
+  padding: 20px;
+}
+.dialog-footer {
+  margin-top: 20px;
+  text-align: right;
+}
+</style>