pms 本地库存列表 添加统计

src/views/pms/iotlockstock/index.vue

@@ -93,6 +93,22 @@
     </el-form>
   </ContentWrap>
 
+  <!-- ========== 统计信息卡片 ========== -->
+  <ContentWrap style="margin-bottom: 16px">
+    <el-card shadow="never" class="stat-card">
+      <div class="stat-container">
+        <div class="stat-item">
+          <span class="stat-label">{{ t('stock.totalQuantity') }}：</span>
+          <span class="stat-value">{{ totalQuantity.toLocaleString() }}</span>
+        </div>
+        <div class="stat-item">
+          <span class="stat-label">{{ t('stock.totalAmount') }}：</span>
+          <span class="stat-value">¥ {{ totalAmount.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }) }}</span>
+        </div>
+      </div>
+    </el-card>
+  </ContentWrap>
+
   <!-- 列表 -->
   <ContentWrap>
     <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
@@ -190,6 +206,10 @@ const factoryList = ref([] as SapOrgVO[])   // 工厂列表
 const storageLocationList = ref([] as SapOrgVO[]) // 库存地点列表
 const costCenterList = ref([] as SapOrgVO[]) // SAP成本中心列表
 
+// 新增统计变量
+const totalQuantity = ref(0)   // 总数量
+const totalAmount = ref(0)     // 总金额
+
 const selectedFactoryReqVO = ref({
   type: 0, // 类型(1工厂 2成本中心 3库位)
   factoryCodes: [] // 已经选择的SAP工厂code 列表
@@ -202,6 +222,16 @@ const getList = async () => {
     const data = await IotLockStockApi.getIotLockStockPage(queryParams)
     list.value = data.list
     total.value = data.total
+    // 从第一条记录中提取统计值
+    if (data.list && data.list.length > 0) {
+      // 确保取到有效的数值（第一条记录中的统计值代表整个查询结果）
+      totalQuantity.value = Number(data.list[0].totalQuantity) || 0
+      totalAmount.value = Number(data.list[0].totalAmount) || 0
+    } else {
+      // 没有数据时重置为0
+      totalQuantity.value = 0
+      totalAmount.value = 0
+    }
   } finally {
     loading.value = false
   }
@@ -287,3 +317,34 @@ onMounted(() => {
   getList()
 })
 </script>
+
+<style scoped>
+/* 统计卡片样式 */
+.stat-card {
+  border-radius: 4px;
+  border: 1px solid #ebeef5;
+}
+
+.stat-container {
+  display: flex;
+  padding: 1px;
+}
+
+.stat-item {
+  display: flex;
+  align-items: center;
+  margin-right: 40px; /* 控制项间距 */
+}
+
+.stat-label {
+  font-weight: bold;
+  color: #606266;
+  margin-right: 8px;
+}
+
+.stat-value {
+  font-size: 18px;
+  font-weight: bold;
+  color: #409EFF;
+}
+</style>

src/views/pms/iotsapstock/index.vue

@@ -336,7 +336,7 @@ onMounted(() => {
 
 .stat-container {
   display: flex;
-  padding: 8px;
+  padding: 1px;
 }
 
 .stat-item {