猪群管理

src/components/PigBatchList.vue

@@ -3,9 +3,25 @@
     <div v-for="batch in pigBatches" :key="batch.id" class="pig-batch-item">
       <div class="batch-header" @click="toggleExpand(batch)">
         <div class="batch-info">
-          <span>批次编号: {{ batch.batch_number }}</span>
-          <span>状态: {{ batch.status }}</span>
-          <span>初始数量: {{ batch.initial_count }}</span>
+          <div class="batch-info-line">
+            <span>批次编号: {{ batch.batch_number }}</span>
+            <span>状态: {{ batch.status }}</span>
+            <span>初始数量: {{ batch.initial_count }}</span>
+            <span v-if="batch.currentTotalQuantity !== undefined && batch.currentTotalQuantity !== null">当前总数: {{ batch.currentTotalQuantity }}</span>
+            <span v-if="batch.origin_type">批次来源: {{ batch.origin_type }}</span>
+          </div>
+          <div class="batch-info-line">
+            <span v-if="batch.start_date">批次开始日期: {{ formatRFC3339(batch.start_date) }}</span>
+            <span v-if="batch.end_date">
+              批次结束日期:
+              <template v-if="formatRFC3339(batch.end_date) === '0001-01-01 08:00:00'">
+                正在饲养中
+              </template>
+              <template v-else>
+                {{ formatRFC3339(batch.end_date) }}
+              </template>
+            </span>
+          </div>
         </div>
         <div class="batch-actions">
           <el-button size="small" type="primary" @click.stop="showAddPenDialog(batch)">增加猪栏</el-button>
@@ -51,7 +67,8 @@
 
 <script>
 import PigBatchPenCard from './PigBatchPenCard.vue';
-import { getAllPens, getAllPigHouses } from '../api/pigBatch'; // Import new API functions
+import { getAllPens, getAllPigHouses } from '../api/pigBatch';
+import { formatRFC3339 } from '../utils/format'; // 导入格式化函数
 
 export default {
   name: 'PigBatchList',
@@ -74,6 +91,7 @@ export default {
     };
   },
   methods: {
+    formatRFC3339,
     toggleExpand(batch) {
       batch.isExpanded = !batch.isExpanded;
     },
@@ -162,16 +180,21 @@ export default {
 
 .batch-info {
   display: flex;
-  flex-direction: column;
-  gap: 8px;
+  flex-direction: column; /* 垂直堆叠子元素 */
+  gap: 8px; /* 行间距 */
 }
 
-.batch-info span:first-child {
+.batch-info-line {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0 20px; /* 列间距 */
+}
+
+.batch-info-line:first-child span:first-child {
   font-weight: bold;
 }
 
 .batch-info span {
-  margin-right: 20px;
   font-size: 14px;
   color: #606266;
 }