@logwire/logwire-wms-pda-ui 1.1.15

package/src/components/page/outbound/pick/alone/index.vue

@@ -0,0 +1,493 @@
+<!--
+  出库拣选 - 独立件
+  @author: 张文
+  @date: 2022-06-17
+-->
+<template>
+  <data-look-and-change
+    v-if="Object.keys(pickData).length"
+    ref="dataLookAndChange"
+    type="alone"
+    :task-index="taskIndex"
+    :pick-data="pickData"
+    :lack-confirm-fn="lackConfirm"
+    :abn-confirm-fn="abnConfirm"
+    :get-data="getData"
+    @pickConfirm="pickConfirm"
+  >
+    <!-- 左右切换滚动到顶部的锚点 -->
+    <div id="tab-top"></div>
+    <div class="lw-global-tab-box">
+      <van-tabs
+        type="card"
+        animated
+        v-model="tabActive"
+        @change="goTop"
+      >
+
+        <!-- 正在拣选 -->
+        <van-tab
+          :title="$lwLanguage.get('','正在拣选')"
+          name="ing"
+        >
+          <div class="lw-global-model-box">
+
+            <sku-location-info
+              :item="pickData.pendingPickLineList[taskIndex]"
+              wait-pick
+            />
+
+            <!-- 托盘号 -->
+            <lw-title-value-cell
+              v-if="hasLpn"
+              :title="$lwLanguage.get('','托盘号')"
+              :value="pickData.pendingPickLineList[taskIndex].fromLpn"
+              val-bold
+            />
+
+            <!-- 库位 -->
+            <lw-input
+              :title="$lwLanguage.get('','拣选库位')"
+              v-model="locationCode.value"
+              :get-focus.sync="locationCode.focus"
+              required
+              @confirm="locationCodeConfirm"
+            />
+
+            <!-- 托盘号 -->
+            <lw-input
+              v-if="hasLpn"
+              :title="$lwLanguage.get('','托盘号')"
+              v-model="lpn.value"
+              :get-focus.sync="lpn.focus"
+              required
+              @confirm="lpnConfirm"
+            />
+
+            <!-- 需要SN -->
+            <template
+              v-if="pickData.pendingPickLineList[taskIndex].needHandleSn"
+            >
+              <lw-input
+                :title="$lwLanguage.get('','序列号')"
+                v-model="sn.value"
+                :get-focus.sync="sn.focus"
+                required
+                auto-clear-val
+                input-over-blur
+                @confirm="snConfirm"
+              />
+              <lw-scan-data-list-module
+                class="lw-global-row"
+                v-model="sn.list"
+              />
+            </template>
+            <!-- 商品号 -->
+            <template v-else>
+              <lw-input
+                :title="$lwLanguage.get('','商品号')"
+                v-model="sku.value"
+                :get-focus.sync="sku.focus"
+                required
+                @confirm="skuConfirm"
+              />
+              <lw-input
+                :title="$lwLanguage.get('','数量')"
+                v-model="qty.value"
+                :get-focus.sync="qty.focus"
+                required
+                :disabled="qty.disabled"
+                type="digit"
+                @confirm="qtyConfirm"
+              >
+                <template #button>
+                  <lw-button
+                    v-if="!qty.disabled"
+                    mini
+                    round
+                    @click="qtyConfirm"
+                  >{{ $lwLanguage.get('','确认') }}</lw-button>
+                </template>
+              </lw-input>
+            </template>
+
+
+
+            <lw-cut-card
+              v-model="taskIndex"
+              :length="pickData.pendingPickLineList.length"
+              :cut-start="cutStart"
+              :cut-end="cutEnd"
+            />
+
+          </div>
+
+        </van-tab>
+
+        <!-- 拣选明细行 -->
+        <van-tab
+          :title="$lwLanguage.get('','拣选明细行')"
+          name="wait"
+        >
+
+          <div
+            v-for="(i,k) in pickData.allLineList"
+            :key="k"
+            :class="[
+              'lw-global-model-box',
+              'lw-global-animation-out',
+              i.pickStatus !== '300' ? 'lw-global-click-style' : ''
+              ]"
+            :style="{
+              animationDelay: 50 * k + 'ms',
+              background: i.pickStatus === '300' ? '#ddd' : ''
+            }"
+            @click="allPickClick(i)"
+          >
+            <sku-location-info :item="i"/>
+          </div>
+
+
+        </van-tab>
+
+      </van-tabs>
+    </div>
+
+    <!-- 确认拆板下架弹框 -->
+    <split-put-down
+      v-model="splitPopup.show"
+      :item="splitPopup.data.splitDownData"
+      @splitConfirm="splitConfirm"
+      @closed="splitOff"
+    />
+  </data-look-and-change>
+</template>
+
+<script>
+import dataLookAndChange from './../components/dataLookAndChange/index.vue'
+import skuLocationInfo from './../components/skuLocationInfo/index.vue'
+import splitPutDown from './../components/splitPutDown/index.vue'
+import {all} from "../mixin/all";
+import {aloneAndNotAlone} from "../mixin/aloneAndNotAlone";
+import {
+  projectQueryAlonePickData,
+  projectWmsOutboundAlonePick,
+  projectWmsOutboundPickCheckSn,
+} from "../../../../../api/outbound/pick/alone";
+
+export default {
+  name: "lwOutboundPickAloneActionPage",
+  components:{
+    dataLookAndChange,
+    skuLocationInfo,
+    splitPutDown
+  },
+  mixins:[all, aloneAndNotAlone],
+  computed:{
+    // 是否有lpn
+    hasLpn(){
+      return !!this.pickData.pendingPickLineList[this.taskIndex].fromLpn
+    }
+  },
+  data() {
+    return {
+
+      // 当前任务索引
+      taskIndex: 0,
+
+      // 拣选数据
+      pickData: {},
+
+      // tab激活项
+      tabActive:'ing',
+
+      // 拣选库位
+      locationCode:{
+        value:'',
+        focus: false
+      },
+
+      // 托盘号
+      lpn:{
+        value:'',
+        focus: false
+      },
+
+      // 商品
+      sku:{
+        value:'',
+        focus: false
+      },
+
+      // 商品数量
+      qty:{
+        value:'',
+        focus: false,
+        disabled: false
+      },
+
+      // 序列号
+      sn:{
+        value:'',
+        focus: false,
+        list:[]
+      },
+
+
+      // 拆板下架弹出层
+      splitPopup:{
+        show: false,
+        // 后端返回的全部数据
+        data:{},
+      }
+    }
+  },
+  mounted() {
+    this.getData()
+  },
+  methods: {
+
+    // 获取数据
+    getData(){
+      projectQueryAlonePickData({
+        pickId: this.$route.query.lwPickId
+      }).then(res=>{
+        this.pickData = this.formatData(res)
+        this.checkTaskIndex(this.pickData.pendingPickLineList.length)
+      }).catch(()=>history.go(-1))
+    },
+
+    // 拣选库位确认
+    locationCodeConfirm(){
+      if (this.locationCodeCheck()){
+        if (this.hasLpn){
+          this.lpn.focus = true
+        }else {
+          this.skuOrSnFocus()
+        }
+      }
+    },
+    // 检查拣选库位
+    locationCodeCheck(){
+
+      return this.inputCheck({
+        key: 'locationCode',
+        checkVal: this.pickData.pendingPickLineList[this.taskIndex].fromLocationCode,
+      })
+    },
+
+    // 托盘号确认
+    lpnConfirm(){
+      if (this.lpnCheck()) this.skuOrSnFocus()
+    },
+    // 托盘号校验
+    lpnCheck(){
+
+      if (!this.hasLpn) return true
+
+      return this.inputCheck({
+        key: 'lpn',
+        checkVal: this.pickData.pendingPickLineList[this.taskIndex].fromLpn,
+      })
+    },
+
+    // 商品或者sn输入框获取焦点
+    skuOrSnFocus(){
+      if (this.pickData.pendingPickLineList[this.taskIndex].needHandleSn){
+        this.sn.focus = true
+      }else {
+        this.sku.focus = true
+      }
+    },
+
+    // 商品确认
+    skuConfirm(val,{success, data}){
+
+      if (!this.skuCheck()) return
+
+      // 如果条码解析成功，并且能解析出数量就回填数量，并禁用数量输入框
+      if (success && data.qty){
+        this.qty.disabled = true
+        this.qty.value = data.qty
+        this.pickConfirm()
+        return
+      }
+
+      this.qty.disabled = false
+      this.qty.value = this.pickData.pendingPickLineList[this.taskIndex].uomQty
+      this.qty.focus = true
+    },
+    // 商品检查
+    skuCheck(){
+      return this.inputCheck({
+        key: 'sku',
+        checkVal: this.pickData.pendingPickLineList[this.taskIndex].skuCode,
+      })
+    },
+
+    // 数量确认
+    qtyConfirm(){
+      if (this.qtyCheck()) this.pickConfirm()
+    },
+    // 数量校验
+    qtyCheck(){
+      const qty = Number(this.qty.value || 0)
+      if (!qty){
+        this.qty.focus = true
+        this.$lwShowErrorMsg(
+          this.$lwLanguage.get('','拣选数量不能为空，且应当是大于0的整数')
+        )
+        this.qty.value = ''
+        return false
+      }
+
+      const item = this.pickData.pendingPickLineList[this.taskIndex]
+      const uomQty = Number(item.uomQty || 0)
+
+      if (uomQty === 0){
+        console.warn('拣选最小单位数据异常，值为：', uomQty)
+        return true
+      }
+
+      if (qty%item.uomQty !== 0){
+        this.qty.focus = true
+        this.$lwShowErrorMsg(
+          this.$lwLanguage.get('','拣选数量应当为') + item.uomLabel.top + this.$lwLanguage.get('','的倍数')
+        )
+        this.qty.value = ''
+        return false
+      }
+
+      const waitQty = Number(item.totalQty || 0) - Number(item.pickQty || 0)
+      if (qty > waitQty){
+        this.qty.focus = true
+        this.$lwShowErrorMsg(
+          this.$lwLanguage.get('','拣选数量不能大于待拣量')
+        )
+        this.qty.value = ''
+        return false
+      }
+
+      return true
+    },
+
+    // 序列号确认
+    snConfirm(val, {data}){
+      const item = this.pickData.pendingPickLineList[this.taskIndex]
+      projectWmsOutboundPickCheckSn({
+        ownerId: item.ownerId,
+        skuId: item.skuId,
+        sn: val,
+        qty: data.qty || 0
+      }).then(res=>{
+        this.sn.list.unshift(res)
+        this.sn.focus = true
+
+        // 如果拣选量复核要求就自动提交
+        let qty = 0
+        this.sn.list.forEach(item=>{
+          qty = qty + item.qty
+        })
+        if (qty === (item.totalQty - item.pickQty)){
+          this.pickConfirm()
+        }
+
+      })
+    },
+
+    // 任务行切换前
+    cutStart(){
+      return this.checkInputVal(
+        ['locationCode', 'lpn', 'sku', 'qty', 'sn'],
+        !!this.sn.list.length
+      )
+
+    },
+    // 任务行切换后
+    cutEnd(){
+      this.clearInputVal(
+        ['locationCode', 'lpn', 'sku', 'qty', 'sn'],
+      )
+      this.sn.list = []
+    },
+
+    // 确认拣选
+    pickConfirm(){
+      // 库位、托盘号
+      if (!(
+        this.locationCodeCheck() &&
+        this.lpnCheck()
+      )) return
+
+      const item = this.pickData.pendingPickLineList[this.taskIndex]
+      let currentPickQty = 0
+
+      // 是否需要处理SN
+      if (item.needHandleSn) {
+        // 如果需要sn就判断当前是否有sn，没有就报错并退出
+        if (!this.sn.list.length) {
+          this.sn.focus = true
+          this.$lwShowErrorMsg(
+            this.$lwLanguage.get('', '请扫描拣选商品的序列号')
+          )
+          return
+        }
+
+        // 有列表数据就合计拣选数量
+        this.sn.list.forEach(item => {
+          currentPickQty = currentPickQty + item.qty
+        })
+      }else {
+        // 不校验sn就调用数量检查方法检查数量输入
+        if (!this.qtyCheck()) return;
+
+        // 校验通过拣选数量就是输入框数量
+        currentPickQty = this.qty.value
+      }
+
+
+      projectWmsOutboundAlonePick({
+        pickId: this.pickData.pickId,
+        pickNo: this.pickData.pickNo,
+        fromLocationId: item.fromLocationId,
+        fromLpn: item.fromLpn,
+        ownerId: item.ownerId,
+        skuId: item.skuId,
+        uom: item.uom,
+        uomQty: item.uomQty,
+        needHandleSn: item.needHandleSn,
+        allocationOrder: this.pickData.allocationOrder,
+        currentPickQty: currentPickQty,
+        lineGroupKey: item.lineGroupKey,
+        snList: this.sn.list,
+      }).then(res=>{
+
+        // 判断是否需要打印箱票
+        if(res.needPrintBox){
+          this.$refs.dataLookAndChange.print(res)
+        }
+
+        this.splitPopup.data = res
+
+        this.$lwToast.success(
+          this.$lwLanguage.get('','拣选成功')
+        )
+
+        // 是否需要拆板下架
+        if(res.needSplitDown){
+          this.splitPopup.show = true
+          this.splitPopup.container.focus = true
+          return
+        }
+
+        this.splitOff()
+
+      })
+    },
+  }
+}
+</script>
+
+<style scoped lang="less">
+
+</style>

package/src/components/page/outbound/pick/box/index.js

@@ -0,0 +1,11 @@
+/*
+* 出库拣选 - 按箱
+* @author: 张文
+* @date  2022-06-16
+* */
+
+import lwOutboundPickBoxActionPage from "./index.vue";
+
+lwOutboundPickBoxActionPage.install = Vue => Vue.component(lwOutboundPickBoxActionPage.name, lwOutboundPickBoxActionPage)
+
+export default lwOutboundPickBoxActionPage