@logwire/logwire-wms-pda-ui 1.1.15 → 1.1.18

package/src/components/page/outbound/summary/box/index/index.vue

@@ -1,643 +1,645 @@
-<!--
-  按箱集货
-  @author: 张文
-  @date: 2022-05-31
--->
-<template>
-  <div>
-
-    <lw-nav-bar
-      :title="$lwLanguage.get('','集货 - 箱')"
-      :click-left="back"
-    />
-
-    <div class="lw-global-page-box">
-
-      <!-- 输入框 -->
-      <div class="lw-global-model-box">
-
-        <lw-input
-          :title="$lwLanguage.get('','箱号')"
-          v-model="boxNo.value"
-          :get-focus.sync="boxNo.focus"
-          :placeholder="$lwLanguage.get('','装箱号/原箱号/箱唛/面单')"
-          required
-          @confirm="boxNoConfirm"
-        />
-
-      </div>
-
-      <!-- 集货分组显示 -->
-      <div
-        v-if="Object.keys(groupData).length && Object.keys(tip.item).length"
-        style="align-items: flex-start"
-        class="lw-global-model-box lw-global-flex-between"
-      >
-
-        <!-- 装箱号 -->
-        <div>
-          <div class="lw-global-title">
-            {{ $lwLanguage.get('', '装箱号') }}
-          </div>
-          <div
-            style="margin-left: 0"
-            class="lw-global-value-bold"
-          >
-            {{ tip.item.boxNo }}
-          </div>
-        </div>
-
-        <!-- 提示信息 -->
-        <div
-          style="flex-direction: column"
-          :class="[
-            'lw-global-flex-around',
-            'lw-outbound-summary-sku-tip-boss',
-            tip.show ? 'lw-global-animation-breath' : ''
-            ]"
-        >
-          <div
-            class="lw-global-value-bold"
-            style="color: #fff;font-size: 20px"
-          >{{ tip.item.serial }}</div>
-
-          <div
-            class="lw-global-value-bold"
-            style="color: yellow"
-          >{{ tip.item.locCode }}</div>
-        </div>
-
-      </div>
-
-      <!-- 数据展示 -->
-      <div
-        class="lw-global-model-box"
-        v-for="(i,k) in groupData"
-        :key="k"
-      >
-
-        <div class="lw-global-flex-between lw-global-row-start">
-
-          <!-- 序号 -->
-          <div class="lw-outbound-summary-sku-serial">{{ i.serial }}</div>
-
-          <!-- 集货通道 -->
-          <div>
-            <span class="lw-global-title">
-              {{ $lwLanguage.get('', '集货通道') }}
-            </span>
-            <span class="lw-global-value-bold">{{ i.zoneCode }}</span>
-          </div>
-
-          <!-- 集货库位 -->
-          <div>
-            <span class="lw-global-title">
-              {{ $lwLanguage.get('', '集货库位') }}
-            </span>
-            <span class="lw-global-value-bold">{{ i.locCode }}</span>
-          </div>
-
-        </div>
-
-        <div class="lw-global-row">
-
-          <!-- 可用集货位 -->
-          <div>
-            <span class="lw-global-title">
-              {{ $lwLanguage.get('', '可用集货位') }}
-            </span>
-            <span class="lw-global-value-bold">{{ i.canUseLocCodes }}</span>
-          </div>
-
-          <!-- 箱数、去集货按钮 -->
-          <div
-            style="margin-top: 5px"
-            class="lw-global-flex-between"
-          >
-            <div>
-              <span class="lw-global-title">
-                {{ $lwLanguage.get('', '箱数') }}
-              </span>
-              <span class="lw-global-value-bold">{{ i.boxList.length }}</span>
-            </div>
-
-            <lw-button
-              mini
-              round
-              @click="goSummary(k)"
-            >
-              {{ $lwLanguage.get('', '去集货') }}
-            </lw-button>
-
-          </div>
-
-
-        </div>
-
-        <!-- 箱数据 -->
-        <div
-          class="lw-global-flex-between lw-global-row"
-          v-for="(item,index) in i.boxList"
-          :key="item.boxId"
-          @click="boxClick(item.boxId, k, index)"
-        >
-          <div
-            style="flex: 1"
-            class="lw-global-value-bold lw-global-click-style"
-          >{{ item.boxNo }}
-          </div>
-          <lw-button
-            type="last"
-            mini
-            round
-            @click.stop="delBox(k,index)"
-          >
-            {{ $lwLanguage.get('', '剔除') }}
-          </lw-button>
-        </div>
-
-      </div>
-
-    </div>
-
-    <!-- 搜索出多个箱号的弹出选择框 -->
-    <lw-popup
-      :title="$lwLanguage.get('','选择箱')"
-      v-model="moreBoxPopup.show"
-      @closed="boxNo.value=''"
-    >
-      <div
-        class="lw-global-row lw-global-flex-between lw-global-click-style"
-        v-for="i in moreBoxPopup.list"
-        :key="i.boxId"
-        @click="moreBoxPopupClick(i)"
-      >
-        <div class="lw-global-value-bold">{{ i.boxNo }}</div>
-        <van-icon name="arrow"/>
-      </div>
-    </lw-popup>
-
-    <!-- 去集货 -->
-    <lw-popup
-      :title="$lwLanguage.get('','集货')"
-      v-model="summaryPopup.show"
-      @closed="summaryPopupOff"
-    >
-      <template v-if="summaryPopup.groupKey">
-        <div class="lw-global-flex-between lw-global-row-start">
-
-          <!-- 集货通道 -->
-          <div>
-            <span class="lw-global-title">
-              {{ $lwLanguage.get('', '集货通道') }}
-            </span>
-            <span class="lw-global-value-bold">{{ groupData[summaryPopup.groupKey].zoneCode }}</span>
-          </div>
-
-          <!-- 集货库位 -->
-          <div>
-            <span class="lw-global-title">
-              {{ $lwLanguage.get('', '集货库位') }}
-            </span>
-            <span class="lw-global-value-bold">{{ groupData[summaryPopup.groupKey].locCode }}</span>
-          </div>
-
-        </div>
-
-        <div class="lw-global-row">
-
-          <!-- 可用集货位 -->
-          <div>
-            <span class="lw-global-title">
-              {{ $lwLanguage.get('', '可用集货位') }}
-            </span>
-            <span class="lw-global-value-bold">{{ groupData[summaryPopup.groupKey].canUseLocCodes }}</span>
-          </div>
-
-          <!-- 箱数 -->
-          <div
-            style="margin-top: 5px"
-            class="lw-global-flex-between"
-          >
-            <div>
-              <span class="lw-global-title">
-                {{ $lwLanguage.get('', '箱数') }}
-              </span>
-              <span class="lw-global-value-bold">{{ groupData[summaryPopup.groupKey].boxList.length }}</span>
-            </div>
-
-          </div>
-
-
-        </div>
-
-        <lw-input
-          :title="$lwLanguage.get('','集货库位')"
-          v-model="summaryPopup.input.local.value"
-          :get-focus.sync="summaryPopup.input.local.focus"
-          required
-          @confirm="summaryPopupLocalConfirm"
-        />
-
-        <lw-input
-          :title="$lwLanguage.get('','组托号')"
-          v-model="summaryPopup.input.lpn.value"
-          :get-focus.sync="summaryPopup.input.lpn.focus"
-          @confirm="summaryPopupLpnConfirm"
-        />
-      </template>
-
-      <template #button>
-        <lw-button @click="confirmSummary">
-          {{ $lwLanguage.get('', '确认集货') }}
-        </lw-button>
-      </template>
-    </lw-popup>
-
-    <!-- 查看箱数据 -->
-    <lw-popup
-      :title="$lwLanguage.get('','箱明细')"
-      v-model="boxContentPopup.show"
-    >
-
-      <!-- 箱号 -->
-      <div class="lw-global-row-start">
-        <span class="lw-global-title">
-          {{ $lwLanguage.get('', '箱号') }}
-        </span>
-        <span class="lw-global-value-bold">{{ boxContentPopup.item.boxNo }}</span>
-      </div>
-
-      <!-- 品种数、数量 -->
-      <div class="lw-global-row lw-global-flex-between">
-        <div>
-          <span class="lw-global-title">
-            {{ $lwLanguage.get('', '品种数') }}
-          </span>
-          <span class="lw-global-value-bold">{{ boxContentPopup.item.skuTypeCount }}</span>
-        </div>
-        <div>
-          <span class="lw-global-title">
-            {{ $lwLanguage.get('', '数量') }}
-          </span>
-          <span class="lw-global-value-bold">{{ boxContentPopup.item.skuQty }}</span>
-        </div>
-      </div>
-
-      <!-- 客户 -->
-      <div class="lw-global-row lw-global-flex-start-start">
-        <div
-          style="margin-right: 10px"
-          class="lw-global-title"
-        >
-          {{ $lwLanguage.get('', '客户') }}
-        </div>
-
-        <div style="flex: 1">
-          <div class="lw-global-value-bold">{{ boxContentPopup.item.customerCode }}</div>
-          <div class="lw-global-title">{{ boxContentPopup.item.customerName }}</div>
-        </div>
-      </div>
-
-      <!-- 商品标题 -->
-      <div
-        style="margin: 5px 0"
-        class="lw-global-flex-between"
-      >
-        <div
-          style="flex: 1"
-          class="lw-global-title"
-        >
-          {{ $lwLanguage.get('', '商品') }}
-        </div>
-        <div
-          style="width: 50px;text-align: center;flex-shrink: 0"
-          class="lw-global-title lw-summary-"
-        >
-          {{ $lwLanguage.get('', '数量') }}
-        </div>
-      </div>
-      <!-- 商品明细 -->
-      <div
-        class="lw-global-row lw-global-flex-between"
-        style="align-items: flex-start"
-        v-for="(i,k) in boxContentPopup.item.skuLineData"
-        :key="k"
-      >
-        <div
-          style="flex: 1"
-          class="lw-global-title"
-        >
-          <div class="lw-global-value-bold">{{ i.skuCode }}</div>
-          <div class="lw-global-title">{{ i.skuName }}</div>
-        </div>
-        <div
-          style="width: 50px;text-align: center;flex-shrink: 0;color: #D50000;"
-          class="lw-global-value-bold lw-outbound-summary-sku-qty"
-        >{{ i.qty }}
-        </div>
-      </div>
-
-      <!-- 剔除按钮 -->
-      <template #button>
-        <lw-button @click="boxContentDel">
-          {{ $lwLanguage.get('', '剔除') }}
-        </lw-button>
-      </template>
-
-
-    </lw-popup>
-
-  </div>
-</template>
-
-<script>
-
-import {
-  projectCollectByBoxSubmit,
-  projectQueryCollectBox,
-  projectQueryCollectBoxSkuData
-} from "../../../../../../api/outbound/summary/box";
-
-export default {
-  name: "lwOutboundSummaryBoxIndexPage",
-  data() {
-    return {
-      // 箱号输入框
-      boxNo: {
-        value: '',
-        focus: true
-      },
-
-      // 分组数据
-      groupData: {},
-
-      // 多条箱的弹框
-      moreBoxPopup: {
-        show: false,
-        list: []
-      },
-
-      // 指示分组的弹出层
-      tip: {
-        show: false,
-        item:{}
-      },
-
-      // 确认集货
-      summaryPopup: {
-        show: false,
-        groupKey: '',
-        input: {
-          local: {
-            value: '',
-            focus: false
-          },
-          lpn: {
-            value: '',
-            focus: false
-          },
-        }
-      },
-
-      // 箱明细
-      boxContentPopup: {
-        show: false,
-        // 分组的索引
-        groupKey: '',
-        // 箱号索引
-        boxIndex: '',
-        item: {}
-      }
-    }
-  },
-  methods: {
-    // 返回
-    back() {
-      if (!Object.keys(this.groupData).length) {
-
-        history.go(-1)
-
-        return
-      }
-
-      this.$dialog.confirm({
-        title: this.$lwLanguage.get('', '警告'),
-        message: this.$lwLanguage.get('', '退出后当前扫描数据将会被清空'),
-      }).then(() => {
-        history.go(-1)
-      }).catch(() => {
-      })
-    },
-
-    // 箱号输入确认
-    boxNoConfirm() {
-
-      if (!this.boxNo.value) {
-        this.boxNo.focus = true
-        this.$lwShowErrorMsg(
-          this.$lwLanguage.get('', '箱号不能为空')
-        )
-        return
-      }
-
-      this.tip.show = false
-
-      projectQueryCollectBox({
-        boxNo: this.boxNo.value
-      }).then(res => {
-
-        // 如果搜索出多条就弹出选择框
-        if (res.length > 1) {
-          this.moreBoxPopup.list = res
-          this.moreBoxPopup.show = true
-          return
-        }
-
-        this.boxDataCheck(res[0])
-
-      })
-    },
-
-    // 比对箱号数据是否存在当前已经分组的数据中
-    boxDataCheck(item) {
-
-      const key = item.zoneId + item.locId
-
-      if (this.groupData[key]) {
-
-        // 判断是否重复扫描
-        const hasBox = this.groupData[key].boxList.filter(i => {
-          return i.boxId === item.boxId
-        })
-
-        // 如果扫描到重复项就不增加数据，但是依旧提示集货位置
-        !hasBox.length ? this.groupData[key].boxList.unshift(item) : ''
-
-      } else {
-        this.groupData[key] = {
-          serial: Object.keys(this.groupData).length + 1,
-          ...item,
-          boxList: [item]
-        }
-      }
-
-      this.tip.item = {
-        ...item,
-        serial: this.groupData[key].serial
-      }
-      this.$lwAppPower.speak(this.tip.item.serial)
-      this.$nextTick(()=>{
-        this.tip.show = true
-      })
-
-      this.boxNo.focus = true
-      this.boxNo.value = ''
-    },
-
-    // 如果存在多条箱数据点击
-    moreBoxPopupClick(item) {
-      this.boxDataCheck(item)
-      this.moreBoxPopup.show = false
-    },
-
-    // 去集货 - 显示确认集货弹框
-    goSummary(index) {
-      this.summaryPopup.groupKey = index
-      this.summaryPopup.show = true
-      this.summaryPopup.input.local.focus = true
-    },
-    // 去集货 - 确认库位
-    summaryPopupLocalConfirm() {
-      if (this.summaryPopupLocalCheck()) this.summaryPopup.input.lpn.focus = true
-    },
-    // 去集货 - 确认库位校验
-    summaryPopupLocalCheck() {
-      const localInp = this.summaryPopup.input.local
-      if (!localInp.value) {
-        localInp.focus = true
-        this.$lwShowErrorMsg(
-          this.$lwLanguage.get('', '集货库位不能为空')
-        )
-        return false
-      }
-
-      const item = this.groupData[this.summaryPopup.groupKey]
-
-      if (!item.canUseLocationList.includes(localInp.value)) {
-        localInp.focus = true
-        this.$lwShowErrorMsg(
-          this.$lwLanguage.get('', '集货库位不一致')
-        )
-        localInp.value = ''
-        return false
-      }
-
-      return true
-    },
-    // 去集货 - 确认组托号
-    summaryPopupLpnConfirm() {
-      this.confirmSummary()
-    },
-    // 去集货 - 确认集货
-    confirmSummary() {
-      if (!this.summaryPopupLocalCheck()) return
-
-      const input = this.summaryPopup.input
-      projectCollectByBoxSubmit({
-        actualCollectCode: input.local.value,
-        lpn: input.lpn.value,
-        boxList: this.groupData[this.summaryPopup.groupKey].boxList
-      }).then(() => {
-
-        this.$lwToast.success(
-          this.$lwLanguage.get('', '集货成功')
-        )
-
-        // 删除当前确认集货的数据
-        this.$delete(this.groupData, this.summaryPopup.groupKey)
-
-        this.summaryPopup.show = false
-        this.summaryPopup.groupKey = ''
-      })
-    },
-    // 去集货 - 弹框关闭
-    summaryPopupOff() {
-      this.summaryPopup.input.local.value = ''
-      this.summaryPopup.input.lpn.value = ''
-      this.summaryPopup.groupKey = ''
-    },
-
-    // 箱被点击
-    boxClick(boxId, groupKey, boxIndex) {
-      projectQueryCollectBoxSkuData({
-        boxId
-      }).then(res => {
-        this.boxContentPopup.item = res
-        this.boxContentPopup.groupKey = groupKey
-        this.boxContentPopup.boxIndex = boxIndex
-        this.boxContentPopup.show = true
-      })
-    },
-    // 箱详情 - 剔除
-    boxContentDel() {
-      this.delBox(this.boxContentPopup.groupKey, this.boxContentPopup.boxIndex).then(() => {
-        this.boxContentPopup.show = false
-      })
-    },
-
-    // 剔除
-    delBox(key, index) {
-      return new Promise((res, err) => {
-        this.$dialog.confirm({
-          title: this.$lwLanguage.get('', '提示'),
-          message: this.$lwLanguage.get('', '确认删除箱？装箱号:') + this.groupData[key].boxList[index].boxNo
-        }).then(() => {
-          this.groupData[key].boxList.splice(index, 1)
-
-          if (this.groupData[key].boxList.length === 0) {
-            this.$delete(this.groupData, key)
-          }
-
-          this.$lwToast.success(
-            this.$lwLanguage.get('', '已剔除')
-          )
-          // 强制更新
-          this.$forceUpdate()
-          res()
-        }).catch(() => {
-          err()
-        })
-      })
-    }
-  }
-}
-</script>
-
-<style scoped lang="less">
-
-@import "./../../../../../../assets/css/var.less";
-
-.lw-outbound-summary-sku-serial{
-  width: 25px;
-  height: 25px;
-  text-align: center;
-  line-height: 25px;
-  background: @titleColor;
-  color: #fff;
-  border-radius: 3px;
-  font-size: 18px;
-  font-weight: bold;
-}
-
-.lw-outbound-summary-sku-tip-boss{
-  width: 70px;
-  height: 70px;
-  text-align: center;
-  padding: 10px;
-  border-radius: 8px;
-  background: #D50000;
-  box-sizing: border-box;
-}
-
-</style>
+<!--
+  按箱集货
+  @author: 张文
+  @date: 2022-05-31
+-->
+<template>
+  <div>
+
+    <lw-nav-bar
+      :title="$lwLanguage.get('','集货 - 箱')"
+      :click-left="back"
+    />
+
+    <div class="lw-global-page-box">
+
+      <!-- 输入框 -->
+      <div class="lw-global-model-box">
+
+        <lw-input
+          :title="$lwLanguage.get('','箱号')"
+          v-model="boxNo.value"
+          :get-focus.sync="boxNo.focus"
+          :placeholder="$lwLanguage.get('','装箱号/原箱号/箱唛/面单')"
+          required
+          rule-key="box"
+          @confirm="boxNoConfirm"
+        />
+
+      </div>
+
+      <!-- 集货分组显示 -->
+      <div
+        v-if="Object.keys(groupData).length && Object.keys(tip.item).length"
+        style="align-items: flex-start"
+        class="lw-global-model-box lw-global-flex-between"
+      >
+
+        <!-- 装箱号 -->
+        <div>
+          <div class="lw-global-title">
+            {{ $lwLanguage.get('', '装箱号') }}
+          </div>
+          <div
+            style="margin-left: 0"
+            class="lw-global-value-bold"
+          >
+            {{ tip.item.boxNo }}
+          </div>
+        </div>
+
+        <!-- 提示信息 -->
+        <div
+          style="flex-direction: column"
+          :class="[
+            'lw-global-flex-around',
+            'lw-outbound-summary-sku-tip-boss',
+            tip.show ? 'lw-global-animation-breath' : ''
+            ]"
+        >
+          <div
+            class="lw-global-value-bold"
+            style="color: #fff;font-size: 20px"
+          >{{ tip.item.serial }}</div>
+
+          <div
+            class="lw-global-value-bold"
+            style="color: yellow"
+          >{{ tip.item.locCode }}</div>
+        </div>
+
+      </div>
+
+      <!-- 数据展示 -->
+      <div
+        class="lw-global-model-box"
+        v-for="(i,k) in groupData"
+        :key="k"
+      >
+
+        <div class="lw-global-flex-between lw-global-row-start">
+
+          <!-- 序号 -->
+          <div class="lw-outbound-summary-sku-serial">{{ i.serial }}</div>
+
+          <!-- 集货通道 -->
+          <div>
+            <span class="lw-global-title">
+              {{ $lwLanguage.get('', '集货通道') }}
+            </span>
+            <span class="lw-global-value-bold">{{ i.zoneCode }}</span>
+          </div>
+
+          <!-- 集货库位 -->
+          <div>
+            <span class="lw-global-title">
+              {{ $lwLanguage.get('', '集货库位') }}
+            </span>
+            <span class="lw-global-value-bold">{{ i.locCode }}</span>
+          </div>
+
+        </div>
+
+        <div class="lw-global-row">
+
+          <!-- 可用集货位 -->
+          <div>
+            <span class="lw-global-title">
+              {{ $lwLanguage.get('', '可用集货位') }}
+            </span>
+            <span class="lw-global-value-bold">{{ i.canUseLocCodes }}</span>
+          </div>
+
+          <!-- 箱数、去集货按钮 -->
+          <div
+            style="margin-top: 5px"
+            class="lw-global-flex-between"
+          >
+            <div>
+              <span class="lw-global-title">
+                {{ $lwLanguage.get('', '箱数') }}
+              </span>
+              <span class="lw-global-value-bold">{{ i.boxList.length }}</span>
+            </div>
+
+            <lw-button
+              mini
+              round
+              @click="goSummary(k)"
+            >
+              {{ $lwLanguage.get('', '去集货') }}
+            </lw-button>
+
+          </div>
+
+
+        </div>
+
+        <!-- 箱数据 -->
+        <div
+          class="lw-global-flex-between lw-global-row"
+          v-for="(item,index) in i.boxList"
+          :key="item.boxId"
+          @click="boxClick(item.boxId, k, index)"
+        >
+          <div
+            style="flex: 1"
+            class="lw-global-value-bold lw-global-click-style"
+          >{{ item.boxNo }}
+          </div>
+          <lw-button
+            type="last"
+            mini
+            round
+            @click.stop="delBox(k,index)"
+          >
+            {{ $lwLanguage.get('', '剔除') }}
+          </lw-button>
+        </div>
+
+      </div>
+
+    </div>
+
+    <!-- 搜索出多个箱号的弹出选择框 -->
+    <lw-popup
+      :title="$lwLanguage.get('','选择箱')"
+      v-model="moreBoxPopup.show"
+      @closed="boxNo.value=''"
+    >
+      <div
+        class="lw-global-row lw-global-flex-between lw-global-click-style"
+        v-for="i in moreBoxPopup.list"
+        :key="i.boxId"
+        @click="moreBoxPopupClick(i)"
+      >
+        <div class="lw-global-value-bold">{{ i.boxNo }}</div>
+        <van-icon name="arrow"/>
+      </div>
+    </lw-popup>
+
+    <!-- 去集货 -->
+    <lw-popup
+      :title="$lwLanguage.get('','集货')"
+      v-model="summaryPopup.show"
+      @closed="summaryPopupOff"
+    >
+      <template v-if="summaryPopup.groupKey">
+        <div class="lw-global-flex-between lw-global-row-start">
+
+          <!-- 集货通道 -->
+          <div>
+            <span class="lw-global-title">
+              {{ $lwLanguage.get('', '集货通道') }}
+            </span>
+            <span class="lw-global-value-bold">{{ groupData[summaryPopup.groupKey].zoneCode }}</span>
+          </div>
+
+          <!-- 集货库位 -->
+          <div>
+            <span class="lw-global-title">
+              {{ $lwLanguage.get('', '集货库位') }}
+            </span>
+            <span class="lw-global-value-bold">{{ groupData[summaryPopup.groupKey].locCode }}</span>
+          </div>
+
+        </div>
+
+        <div class="lw-global-row">
+
+          <!-- 可用集货位 -->
+          <div>
+            <span class="lw-global-title">
+              {{ $lwLanguage.get('', '可用集货位') }}
+            </span>
+            <span class="lw-global-value-bold">{{ groupData[summaryPopup.groupKey].canUseLocCodes }}</span>
+          </div>
+
+          <!-- 箱数 -->
+          <div
+            style="margin-top: 5px"
+            class="lw-global-flex-between"
+          >
+            <div>
+              <span class="lw-global-title">
+                {{ $lwLanguage.get('', '箱数') }}
+              </span>
+              <span class="lw-global-value-bold">{{ groupData[summaryPopup.groupKey].boxList.length }}</span>
+            </div>
+
+          </div>
+
+
+        </div>
+
+        <lw-input
+          :title="$lwLanguage.get('','集货库位')"
+          v-model="summaryPopup.input.local.value"
+          :get-focus.sync="summaryPopup.input.local.focus"
+          required
+          @confirm="summaryPopupLocalConfirm"
+        />
+
+        <lw-input
+          :title="$lwLanguage.get('','组托号')"
+          v-model="summaryPopup.input.lpn.value"
+          :get-focus.sync="summaryPopup.input.lpn.focus"
+          rule-key="lpn"
+          @confirm="summaryPopupLpnConfirm"
+        />
+      </template>
+
+      <template #button>
+        <lw-button @click="confirmSummary">
+          {{ $lwLanguage.get('', '确认集货') }}
+        </lw-button>
+      </template>
+    </lw-popup>
+
+    <!-- 查看箱数据 -->
+    <lw-popup
+      :title="$lwLanguage.get('','箱明细')"
+      v-model="boxContentPopup.show"
+    >
+
+      <!-- 箱号 -->
+      <div class="lw-global-row-start">
+        <span class="lw-global-title">
+          {{ $lwLanguage.get('', '箱号') }}
+        </span>
+        <span class="lw-global-value-bold">{{ boxContentPopup.item.boxNo }}</span>
+      </div>
+
+      <!-- 品种数、数量 -->
+      <div class="lw-global-row lw-global-flex-between">
+        <div>
+          <span class="lw-global-title">
+            {{ $lwLanguage.get('', '品种数') }}
+          </span>
+          <span class="lw-global-value-bold">{{ boxContentPopup.item.skuTypeCount }}</span>
+        </div>
+        <div>
+          <span class="lw-global-title">
+            {{ $lwLanguage.get('', '数量') }}
+          </span>
+          <span class="lw-global-value-bold">{{ boxContentPopup.item.skuQty }}</span>
+        </div>
+      </div>
+
+      <!-- 客户 -->
+      <div class="lw-global-row lw-global-flex-start-start">
+        <div
+          style="margin-right: 10px"
+          class="lw-global-title"
+        >
+          {{ $lwLanguage.get('', '客户') }}
+        </div>
+
+        <div style="flex: 1">
+          <div class="lw-global-value-bold">{{ boxContentPopup.item.customerCode }}</div>
+          <div class="lw-global-title">{{ boxContentPopup.item.customerName }}</div>
+        </div>
+      </div>
+
+      <!-- 商品标题 -->
+      <div
+        style="margin: 5px 0"
+        class="lw-global-flex-between"
+      >
+        <div
+          style="flex: 1"
+          class="lw-global-title"
+        >
+          {{ $lwLanguage.get('', '商品') }}
+        </div>
+        <div
+          style="width: 50px;text-align: center;flex-shrink: 0"
+          class="lw-global-title lw-summary-"
+        >
+          {{ $lwLanguage.get('', '数量') }}
+        </div>
+      </div>
+      <!-- 商品明细 -->
+      <div
+        class="lw-global-row lw-global-flex-between"
+        style="align-items: flex-start"
+        v-for="(i,k) in boxContentPopup.item.skuLineData"
+        :key="k"
+      >
+        <div
+          style="flex: 1"
+          class="lw-global-title"
+        >
+          <div class="lw-global-value-bold">{{ i.skuCode }}</div>
+          <div class="lw-global-title">{{ i.skuName }}</div>
+        </div>
+        <div
+          style="width: 50px;text-align: center;flex-shrink: 0;color: #D50000;"
+          class="lw-global-value-bold lw-outbound-summary-sku-qty"
+        >{{ i.qty }}
+        </div>
+      </div>
+
+      <!-- 剔除按钮 -->
+      <template #button>
+        <lw-button @click="boxContentDel">
+          {{ $lwLanguage.get('', '剔除') }}
+        </lw-button>
+      </template>
+
+
+    </lw-popup>
+
+  </div>
+</template>
+
+<script>
+
+import {
+  projectCollectByBoxSubmit,
+  projectQueryCollectBox,
+  projectQueryCollectBoxSkuData
+} from "../../../../../../api/outbound/summary/box";
+
+export default {
+  name: "lwOutboundSummaryBoxIndexPage",
+  data() {
+    return {
+      // 箱号输入框
+      boxNo: {
+        value: '',
+        focus: true
+      },
+
+      // 分组数据
+      groupData: {},
+
+      // 多条箱的弹框
+      moreBoxPopup: {
+        show: false,
+        list: []
+      },
+
+      // 指示分组的弹出层
+      tip: {
+        show: false,
+        item:{}
+      },
+
+      // 确认集货
+      summaryPopup: {
+        show: false,
+        groupKey: '',
+        input: {
+          local: {
+            value: '',
+            focus: false
+          },
+          lpn: {
+            value: '',
+            focus: false
+          },
+        }
+      },
+
+      // 箱明细
+      boxContentPopup: {
+        show: false,
+        // 分组的索引
+        groupKey: '',
+        // 箱号索引
+        boxIndex: '',
+        item: {}
+      }
+    }
+  },
+  methods: {
+    // 返回
+    back() {
+      if (!Object.keys(this.groupData).length) {
+
+        history.go(-1)
+
+        return
+      }
+
+      this.$dialog.confirm({
+        title: this.$lwLanguage.get('', '警告'),
+        message: this.$lwLanguage.get('', '退出后当前扫描数据将会被清空'),
+      }).then(() => {
+        history.go(-1)
+      }).catch(() => {
+      })
+    },
+
+    // 箱号输入确认
+    boxNoConfirm() {
+
+      if (!this.boxNo.value) {
+        this.boxNo.focus = true
+        this.$lwShowErrorMsg(
+          this.$lwLanguage.get('', '箱号不能为空')
+        )
+        return
+      }
+
+      this.tip.show = false
+
+      projectQueryCollectBox({
+        boxNo: this.boxNo.value
+      }).then(res => {
+
+        // 如果搜索出多条就弹出选择框
+        if (res.length > 1) {
+          this.moreBoxPopup.list = res
+          this.moreBoxPopup.show = true
+          return
+        }
+
+        this.boxDataCheck(res[0])
+
+      })
+    },
+
+    // 比对箱号数据是否存在当前已经分组的数据中
+    boxDataCheck(item) {
+
+      const key = item.zoneId + item.locId
+
+      if (this.groupData[key]) {
+
+        // 判断是否重复扫描
+        const hasBox = this.groupData[key].boxList.filter(i => {
+          return i.boxId === item.boxId
+        })
+
+        // 如果扫描到重复项就不增加数据，但是依旧提示集货位置
+        !hasBox.length ? this.groupData[key].boxList.unshift(item) : ''
+
+      } else {
+        this.groupData[key] = {
+          serial: Object.keys(this.groupData).length + 1,
+          ...item,
+          boxList: [item]
+        }
+      }
+
+      this.tip.item = {
+        ...item,
+        serial: this.groupData[key].serial
+      }
+      this.$lwAppPower.speak(this.tip.item.serial)
+      this.$nextTick(()=>{
+        this.tip.show = true
+      })
+
+      this.boxNo.focus = true
+      this.boxNo.value = ''
+    },
+
+    // 如果存在多条箱数据点击
+    moreBoxPopupClick(item) {
+      this.boxDataCheck(item)
+      this.moreBoxPopup.show = false
+    },
+
+    // 去集货 - 显示确认集货弹框
+    goSummary(index) {
+      this.summaryPopup.groupKey = index
+      this.summaryPopup.show = true
+      this.summaryPopup.input.local.focus = true
+    },
+    // 去集货 - 确认库位
+    summaryPopupLocalConfirm() {
+      if (this.summaryPopupLocalCheck()) this.summaryPopup.input.lpn.focus = true
+    },
+    // 去集货 - 确认库位校验
+    summaryPopupLocalCheck() {
+      const localInp = this.summaryPopup.input.local
+      if (!localInp.value) {
+        localInp.focus = true
+        this.$lwShowErrorMsg(
+          this.$lwLanguage.get('', '集货库位不能为空')
+        )
+        return false
+      }
+
+      const item = this.groupData[this.summaryPopup.groupKey]
+
+      if (!item.canUseLocationList.includes(localInp.value)) {
+        localInp.focus = true
+        this.$lwShowErrorMsg(
+          this.$lwLanguage.get('', '集货库位不一致')
+        )
+        localInp.value = ''
+        return false
+      }
+
+      return true
+    },
+    // 去集货 - 确认组托号
+    summaryPopupLpnConfirm() {
+      this.confirmSummary()
+    },
+    // 去集货 - 确认集货
+    confirmSummary() {
+      if (!this.summaryPopupLocalCheck()) return
+
+      const input = this.summaryPopup.input
+      projectCollectByBoxSubmit({
+        actualCollectCode: input.local.value,
+        lpn: input.lpn.value,
+        boxList: this.groupData[this.summaryPopup.groupKey].boxList
+      }).then(() => {
+
+        this.$lwToast.success(
+          this.$lwLanguage.get('', '集货成功')
+        )
+
+        // 删除当前确认集货的数据
+        this.$delete(this.groupData, this.summaryPopup.groupKey)
+
+        this.summaryPopup.show = false
+        this.summaryPopup.groupKey = ''
+      })
+    },
+    // 去集货 - 弹框关闭
+    summaryPopupOff() {
+      this.summaryPopup.input.local.value = ''
+      this.summaryPopup.input.lpn.value = ''
+      this.summaryPopup.groupKey = ''
+    },
+
+    // 箱被点击
+    boxClick(boxId, groupKey, boxIndex) {
+      projectQueryCollectBoxSkuData({
+        boxId
+      }).then(res => {
+        this.boxContentPopup.item = res
+        this.boxContentPopup.groupKey = groupKey
+        this.boxContentPopup.boxIndex = boxIndex
+        this.boxContentPopup.show = true
+      })
+    },
+    // 箱详情 - 剔除
+    boxContentDel() {
+      this.delBox(this.boxContentPopup.groupKey, this.boxContentPopup.boxIndex).then(() => {
+        this.boxContentPopup.show = false
+      })
+    },
+
+    // 剔除
+    delBox(key, index) {
+      return new Promise((res, err) => {
+        this.$dialog.confirm({
+          title: this.$lwLanguage.get('', '提示'),
+          message: this.$lwLanguage.get('', '确认删除箱？装箱号:') + this.groupData[key].boxList[index].boxNo
+        }).then(() => {
+          this.groupData[key].boxList.splice(index, 1)
+
+          if (this.groupData[key].boxList.length === 0) {
+            this.$delete(this.groupData, key)
+          }
+
+          this.$lwToast.success(
+            this.$lwLanguage.get('', '已剔除')
+          )
+          // 强制更新
+          this.$forceUpdate()
+          res()
+        }).catch(() => {
+          err()
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+
+@import "./../../../../../../assets/css/var.less";
+
+.lw-outbound-summary-sku-serial{
+  width: 25px;
+  height: 25px;
+  text-align: center;
+  line-height: 25px;
+  background: @titleColor;
+  color: #fff;
+  border-radius: 3px;
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.lw-outbound-summary-sku-tip-boss{
+  width: 70px;
+  height: 70px;
+  text-align: center;
+  padding: 10px;
+  border-radius: 8px;
+  background: #D50000;
+  box-sizing: border-box;
+}
+
+</style>