feat: 发货增加统计全部数量

src/views/order/Shipment.vue

@@ -27,8 +27,6 @@
               o.lanshouName || '--'
             }}</span>
           </div>
-        </div>
-        <div class="shipment-info-item-header">
           <div class="shipment-info-item-header--title">
             <span class="shipment-info-item-header__label">区域:</span>
             <span class="shipment-info-item-header__value">{{
@@ -37,9 +35,11 @@
           </div>
           <div class="shipment-info-item-header--title">
             <span class="shipment-info-item-header__label">地址:</span>
-            <span class="shipment-info-item-header__value">{{
-              o.lanshouAddress || '--'
-            }}</span>
+            <span
+              class="shipment-info-item-header__value"
+              :title="o.lanshouAddress"
+              >{{ o.lanshouAddress || '--' }}</span
+            >
           </div>
           <div class="shipment-info-item-header--title">
             <span class="shipment-info-item-header__label">邮编:</span>
@@ -93,10 +93,6 @@
                 }}</span>
               </div>
             </div>
-            <!-- <div v-if="isPod" class="shipment-info-item-content-item--info">
-              <span class="label">生产单号:</span>
-              <span class="value">{{ item.thirdSubOrderNumber || '--' }}</span>
-            </div> -->
             <div
               class="shipment-info-item-content-item--info"
               style="width: 90px; flex: none"
@@ -139,6 +135,48 @@
             </div>
           </div>
         </div>
+        <div class="shipment-info-item-footer">
+          <div class="image">总计</div>
+          <div class="shipment-info-item-content-item--info"></div>
+          <div
+            v-if="!isPod"
+            class="shipment-info-item-content-item--info"
+          ></div>
+          <div
+            v-if="isPod"
+            class="shipment-info-item-content-item--info2"
+          ></div>
+          <div
+            class="shipment-info-item-content-item--info"
+            style="width: 90px; flex: none"
+          >
+            <span class="value">{{ calculateTotals(o)?.totalNum || 0 }}</span>
+          </div>
+          <div
+            class="shipment-info-item-content-item--info"
+            style="width: 90px; flex: none"
+          >
+            <span class="value">{{
+              calculateTotals(o)?.totalShipmentNum || 0
+            }}</span>
+          </div>
+          <div
+            class="shipment-info-item-content-item--info"
+            style="width: 90px; flex: none"
+          >
+            <span class="value">{{
+              calculateTotals(o)?.totalNotShipmentNum || 0
+            }}</span>
+          </div>
+          <div
+            class="shipment-info-item-content-item--info"
+            style="width: 100px; flex: none"
+          >
+            <span class="value highlight">{{
+              calculateTotals(o)?.totalPickNum || 0
+            }}</span>
+          </div>
+        </div>
       </div>
     </div>
     <div v-if="currentRow" class="shipment-order-detail_info">
@@ -241,6 +279,27 @@ const onShipment = async (item: ProductList) => {
   }
   item.count = 0
 }
+const calculateTotals = (ee: OrderData) => {
+  return ee.productList?.reduce(
+    (acc, item) => {
+      return {
+        totalNum: acc.totalNum + (item.num || 0),
+        totalShipmentNum: acc.totalShipmentNum + (item.shipmentNum || 0),
+        totalNotShipmentNum:
+          acc.totalNotShipmentNum +
+          ((item.num || 0) -
+            ((item.shipmentNum || 0) - (item.notPassNum || 0))),
+        totalPickNum: acc.totalPickNum + (item.count || 0),
+      }
+    },
+    {
+      totalNum: 0, // 总购买数
+      totalShipmentNum: 0, // 总已发数
+      totalNotShipmentNum: 0, // 总未发数
+      totalPickNum: 0, // 总拣货数
+    },
+  )
+}
 </script>
 <style lang="scss" scoped>
 .shipment-order {
@@ -285,17 +344,41 @@ const onShipment = async (item: ProductList) => {
     height: 100%;
   }
 }
+.shipment-info-item {
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+.shipment-info-item-content {
+  flex: 1;
+  overflow: auto;
+}
+.shipment-info-item-footer {
+  height: 42px;
+  border-top: 1px solid #eee;
+}
 
 .shipment-info-item-header {
-  display: flex;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 10px;
   background-color: #e6e6e6;
-  padding: 10px 0 10px 50px;
+  padding: 10px;
   .high-light {
     color: #ff0000;
     font-weight: bold;
   }
   .shipment-info-item-header--title {
-    width: 25%;
+    display: inline-flex;
+    align-items: center;
+    overflow: hidden;
+  }
+  .shipment-info-item-header__value {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 }
 
@@ -345,4 +428,22 @@ const onShipment = async (item: ProductList) => {
 .shipment-info-item-content-item--info:last-child {
   border-right: 0;
 }
+.shipment-info-item-footer {
+  height: 42px;
+  border-top: 1px solid #eee;
+  display: flex;
+
+  .image {
+    width: 50px;
+    border-right: 1px solid #eee;
+    text-align: center;
+    line-height: 42px;
+    font-weight: bold;
+  }
+
+  .value.highlight {
+    color: #f56c6c;
+    font-weight: bold;
+  }
+}
 </style>