猪类型增删改查界面

src/components/feed/PigBreedTable.vue

@@ -53,27 +53,45 @@
             <el-divider></el-divider>
 
             <!-- 下半段：该品种下的年龄阶段简介 -->
-            <h4 style="margin-bottom: 16px;">该品种下的年龄阶段简介</h4>
-            <el-table
-              :data="props.row.pig_types"
-              border
-              style="width: 100%; margin-top: 10px;"
-            >
-              <el-table-column prop="age_stage_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-column label="营养需求" width="120">
-                <template #default="scope">
-                  <el-button type="text" @click="handleViewNutrientRequirements(scope.row)">查看详情</el-button>
-                </template>
-              </el-table-column>
-            </el-table>
+            <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
+                style="width: 100%; margin-top: 10px;"
+              >
+                <el-table-column prop="age_stage_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-column label="营养需求" width="120">
+                  <template #default="scope">
+                    <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,
     };
   },
 };