From 945a39964a87548d6a95e4f51c59996783d0b8ff Mon Sep 17 00:00:00 2001
From: huangjinysf <huangjinysf@163.com>
Date: Tue, 30 Dec 2025 17:37:08 +0800
Subject: [PATCH] =?UTF-8?q?feat(RealTimeInventory):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E5=BA=93=E5=AD=98=E5=8F=98=E5=8C=96=E6=98=BE=E7=A4=BA=E5=88=87?=
 =?UTF-8?q?=E6=8D=A2=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

添加开关控件用于切换显示实际库存或库存变化，包括差值数据获取、样式处理和格式化显示
---
 src/views/plan/RealTimeInventory.vue | 125 ++++++++++++++++++++++++++-
 1 file changed, 123 insertions(+), 2 deletions(-)

diff --git a/src/views/plan/RealTimeInventory.vue b/src/views/plan/RealTimeInventory.vue
index e85bae8..c8daa11 100644
--- a/src/views/plan/RealTimeInventory.vue
+++ b/src/views/plan/RealTimeInventory.vue
@@ -3,6 +3,13 @@
     <div class="table-header">
       <h3>实时库存表</h3>
       <div class="table-actions">
+        <el-switch
+          v-model="showDifference"
+          active-text="显示库存变化"
+          inactive-text="显示实际库存"
+          style="margin-right: 15px;"
+          @change="handleToggleChange"
+        />
         <el-button @click="refreshData" type="primary" size="small">刷新数据</el-button>
       </div>
     </div>
@@ -36,10 +43,27 @@
           :key="column.key"
           :label="column.label" 
           :prop="column.prop"
-          min-width="100" 
+          min-width="120" 
         >
           <template #default="scope">
-            {{ scope.row[column.prop] || '-' }}
+            <div class="cell-content">
+              <span v-if="!showDifference">
+                {{ scope.row[column.prop] || '-' }}
+              </span>
+              <span v-else>
+                {{ scope.row[column.prop] || '-' }}
+                <span 
+                  v-if="scope.row[column.prop + '_difference'] !== undefined && scope.row[column.prop + '_difference'] !== null"
+                  :class="getDifferenceClass(scope.row[column.prop + '_difference'])"
+                  style="margin-left: 5px; font-size: 12px;"
+                >
+                  ({{ formatDifference(scope.row[column.prop + '_difference']) }})
+                </span>
+                <span v-else class="no-data" style="margin-left: 5px; font-size: 12px;">
+                  (-)
+                </span>
+              </span>
+            </div>
           </template>
           <template #header>
             <div v-html="column.label"></div>  <!-- 使用 v-html 渲染 HTML 标签，确保 <br> 生效 -->
@@ -87,6 +111,7 @@ import WmsTable from '@/components/WmsTable/index.vue'
 // 响应式数据
 const loading = ref(false)
 const records = ref([])
+const differenceRecords = ref([])
 
 // WMS对话框相关状态
 const wmsDialogVisible = ref(false)
@@ -94,6 +119,9 @@ const currentWmsModel = ref('')
 const currentWmsSpecification = ref('')
 const wmsTableRef = ref(null)
 
+// 显示控制
+const showDifference = ref(false)
+
 // 计算属性：动态列
 const dynamicColumns = computed(() => {
   if (!records.value.length) return [];
@@ -172,8 +200,24 @@ const tableData = computed(() => {
         return specMatch && modelMatch && wireDiscMatch;
       });
       
+      // 设置实际库存数量
       row[comb] = record ? record.total_number : null;
       if (record) total += record.total_number;
+      
+      // 如果启用了差值显示，查找差值记录
+      if (showDifference.value && differenceRecords.value.length > 0) {
+        const differenceRecord = differenceRecords.value.find(r => {
+          const specMatch = r.specification === specification;
+          const modelMatch = r.model === model;
+          const wireDiscMatch = hasWireDisc 
+            ? (r.wire_disc === wire_disc) 
+            : (!r.wire_disc || r.wire_disc.trim() === '');
+          return specMatch && modelMatch && wireDiscMatch;
+        });
+        
+        // 设置差值
+        row[comb + '_difference'] = differenceRecord ? differenceRecord.difference : null;
+      }
     });
     
     row.total = total;
@@ -207,9 +251,62 @@ const fetchData = async () => {
   }
 };
 
+// 方法：获取差值数据
+const fetchDifferenceData = async () => {
+  const today = new Date().toISOString().split('T')[0]; // 获取今天的日期 YYYY-MM-DD
+  const targetDate = today;
+  
+  try {
+    console.log('正在请求差值API:', `/api/wms/difference/type1-records?target_date=${targetDate}`);
+    const response = await fetch(`${API_CONFIG.BASE_URL}/api/wms/difference/type1-records?target_date=${targetDate}`);
+    const result = await response.json();
+    
+    console.log('差值API返回结果:', result);
+    
+    if (result.code === 200 && result.data && result.data.records) {
+      differenceRecords.value = result.data.records;
+      console.log('设置差值records:', differenceRecords.value);
+    } else {
+      console.error('获取差值数据失败:', result.message);
+      differenceRecords.value = [];
+    }
+  } catch (error) {
+    console.error('差值API调用失败:', error);
+    differenceRecords.value = [];
+  }
+};
+
 // 方法：刷新数据
 const refreshData = () => {
   fetchData();
+  if (showDifference.value) {
+    fetchDifferenceData();
+  }
+};
+
+// 方法：处理toggle变化
+const handleToggleChange = (value) => {
+  if (value) {
+    // 启用差值显示时获取差值数据
+    fetchDifferenceData();
+  } else {
+    // 禁用差值显示时清空差值数据
+    differenceRecords.value = [];
+  }
+};
+
+// 方法：格式化差值显示
+const formatDifference = (difference) => {
+  if (difference === 0) return '0';
+  if (difference > 0) return `+${difference}`;
+  return `${difference}`;
+};
+
+// 方法：获取差值样式类
+const getDifferenceClass = (difference) => {
+  if (difference > 0) return 'difference-positive'; // 绿色，增加
+  if (difference < 0) return 'difference-negative'; // 红色，减少
+  return 'difference-zero'; // 黑色，无变化
 };
 
 // 方法：处理单元格双击事件
@@ -308,6 +405,30 @@ onMounted(() => {
   white-space: nowrap;
 }
 
+/* 库存变化样式 */
+.cell-content {
+  text-align: center;
+}
+
+.difference-positive {
+  color: #67c23a;
+  font-weight: bold;
+}
+
+.difference-negative {
+  color: #f56c6c;
+  font-weight: bold;
+}
+
+.difference-zero {
+  color: #606266;
+  font-weight: normal;
+}
+
+.no-data {
+  color: #c0c4cc;
+}
+
 /* Webkit 浏览器的滚动条样式 */
 .table-wrapper::-webkit-scrollbar {
   height: 10px;