@logwire/logwire-wms-pda-ui 1.1.15

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

@@ -0,0 +1,643 @@
+<!--
+  按箱集货
+  @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>

package/src/components/page/outbound/summary/lpn/action/index.js

@@ -0,0 +1,12 @@
+/*
+* 按托盘集货 - 执行页
+* @author: 张文
+* @date  2022-04-29
+* */
+
+
+import lwOutboundSummaryLpnActionPage from "./index.vue";
+
+lwOutboundSummaryLpnActionPage.install = Vue => Vue.component(lwOutboundSummaryLpnActionPage.name, lwOutboundSummaryLpnActionPage)
+
+export default lwOutboundSummaryLpnActionPage