优化展示

src/components/feed/PigBreedTable.vue

@@ -18,8 +18,39 @@
       <el-table-column type="expand">
         <template #default="props">
           <div style="padding: 10px 20px;">
+            <!-- 品种的完整信息 -->
+            <el-descriptions
+              class="margin-top"
+              title="品种详细信息"
+              :column="2"
+              border
+            >
+              <el-descriptions-item label="描述" :span="2">
+                {{ props.row.description || '无' }}
+              </el-descriptions-item>
+              <el-descriptions-item label="外貌特征">
+                {{ props.row.appearance_features || '无' }}
+              </el-descriptions-item>
+              <el-descriptions-item label="父母信息">
+                {{ props.row.parent_info || '无' }}
+              </el-descriptions-item>
+              <el-descriptions-item label="品种优点">
+                {{ props.row.breed_advantages || '无' }}
+              </el-descriptions-item>
+              <el-descriptions-item label="品种缺点">
+                {{ props.row.breed_disadvantages || '无' }}
+              </el-descriptions-item>
+            </el-descriptions>
+
+            <el-divider></el-divider>
+
+            <!-- 下半段：该品种下的年龄阶段简介 -->
             <h4>该品种下的年龄阶段简介</h4>
-            <el-table :data="props.row.pig_types" border>
+            <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>
@@ -127,9 +158,11 @@ export default {
           // 调用 getPigTypes 接口，按 breed_id 筛选
           const response = await FeedApi.getPigTypes({ breed_id: row.id, page: 1, page_size: 999 }); // 获取所有相关猪类型
           if (response.data && response.data.list) {
+            // 对获取到的猪类型列表按 age_stage_id 进行排序
+            const sortedPigTypes = response.data.list.sort((a, b) => a.age_stage_id - b.age_stage_id);
             const index = tableData.value.findIndex(item => item.id === row.id);
             if (index !== -1) {
-              tableData.value[index].pig_types = response.data.list;
+              tableData.value[index].pig_types = sortedPigTypes;
             }
           }
         } catch (error) {