@logwire/logwire-wms-pda-ui 1.1.15

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

@@ -0,0 +1,303 @@
+<!--
+  出库拣选 - 按托盘
+  @author: 张文
+  @date: 2022-06-17
+-->
+<template>
+  <data-look-and-change
+    v-if="Object.keys(pickData).length"
+    ref="dataLookAndChange"
+    type="lpn"
+    :task-index="taskIndex"
+    :pick-data="pickData"
+    :pick-container="pickData.pendingPickLpnList[taskIndex].fromLpn"
+    :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">
+
+            <lw-title-value-cell
+              style="padding-top: 0"
+              :title="$lwLanguage.get('','拣选库位')"
+              :value="pickData.pendingPickLpnList[taskIndex].fromLocationCode"
+              val-bold
+              val-red
+              :val-size="16"
+            />
+
+            <lw-title-value-cell
+              :title="$lwLanguage.get('','托盘号')"
+              :value="pickData.pendingPickLpnList[taskIndex].fromLpn"
+              val-bold
+            />
+
+            <lw-input
+              :title="$lwLanguage.get('','拣选库位')"
+              v-model="locationCode.value"
+              :get-focus.sync="locationCode.focus"
+              required
+              @confirm="locationCodeConfirm"
+            />
+
+            <lw-input
+              :title="$lwLanguage.get('','托盘号')"
+              v-model="lpn.value"
+              :get-focus.sync="lpn.focus"
+              required
+              @confirm="lpnConfirm"
+            />
+
+            <div style="margin-top: 10px" class="lw-global-title">
+              {{ $lwLanguage.get('','商品明细') }}
+            </div>
+            <div style="padding: 0 5px">
+              <lw-sku-info-module
+                v-for="(i,k) in pickData.pendingPickLpnList[taskIndex].skuList"
+                :key="k"
+                v-bind="i"
+                is-row
+              />
+            </div>
+
+            <lw-cut-card
+              v-model="taskIndex"
+              :length="pickData.pendingPickLpnList.length"
+              :cut-start="cutStart"
+              :cut-end="cutEnd"
+            />
+
+          </div>
+
+        </van-tab>
+
+        <van-tab
+          :title="$lwLanguage.get('','待拣托盘')"
+          name="wait"
+        >
+
+          <div
+            class="lw-global-model-box lw-global-animation-out lw-global-click-style"
+            v-for="(i,k) in pickData.pendingPickLpnList"
+            :key="k"
+            :style="{animationDelay: 50 * k + 'ms'}"
+            @click="waitPickClick(k)"
+          >
+            <div
+              class="lw-global-flex-between lw-global-row-start"
+              style="padding-bottom:5px;margin-bottom: 5px"
+            >
+              <div class="lw-global-value-bold">{{ i.fromLpn }}</div>
+              <lw-tag type="danger" plain round>
+                {{ $lwLanguage.get('','待拣选') }}
+              </lw-tag>
+            </div>
+
+            <div class="lw-global-flex-between">
+
+              <lw-title-value-cell
+                :title="$lwLanguage.get('','拣选库位')"
+                :value="i.fromLocationCode"
+                :val-size="16"
+                val-bold
+                val-red
+                :is-row="false"
+              />
+
+              <lw-title-value-cell
+                :title="$lwLanguage.get('','数量')"
+                :value="i.totalQty"
+                val-bold
+                :is-row="false"
+              />
+
+            </div>
+
+          </div>
+
+        </van-tab>
+      </van-tabs>
+    </div>
+  </data-look-and-change>
+</template>
+
+<script>
+import dataLookAndChange from './../components/dataLookAndChange/index.vue'
+import {
+  projectQueryPickByLpnData,
+  projectWmsOutboundSubmitLpnPickAbnormal,
+  projectWmsOutboundSubmitLpnPickSockout,
+  projectWmsOutboundWholeLpnPick
+} from "../../../../../api/outbound/pick/lpn";
+import {all} from "../mixin/all";
+
+export default {
+  name: "lwOutboundPickLpnActionPage",
+  components:{
+    dataLookAndChange
+  },
+  mixins:[all],
+  data() {
+    return {
+      // 拣选数据
+      pickData:{},
+      // 任务行索引
+      taskIndex: 0,
+
+      // tab激活项
+      tabActive:'ing',
+
+      // 拣选库位
+      locationCode:{
+        value:'',
+        focus: false
+      },
+
+      // 托盘号
+      lpn:{
+        value:'',
+        focus: false
+      },
+    }
+  },
+  mounted() {
+    this.getData()
+  },
+  methods: {
+
+    // 获取数据
+    getData(){
+      projectQueryPickByLpnData({
+        pickId: this.$route.query.lwPickId
+      }).then(res=>{
+        this.pickData = res
+        this.checkTaskIndex(this.pickData.pendingPickLpnList.length)
+      }).catch(()=>history.go(-1))
+    },
+
+
+    // 拣选库位确认
+    locationCodeConfirm(){
+      if (this.locationCodeCheck()) this.lpn.focus = true
+    },
+    // 检查拣选库位
+    locationCodeCheck(){
+
+      return this.inputCheck({
+        key: 'locationCode',
+        checkVal: this.pickData.pendingPickLpnList[this.taskIndex].fromLocationCode,
+      })
+    },
+
+    // 托盘号确认
+    lpnConfirm(){
+      if (this.lpnCheck()) this.pickConfirm()
+    },
+    // 托盘号校验
+    lpnCheck(){
+
+      return this.inputCheck({
+        key: 'lpn',
+        checkVal: this.pickData.pendingPickLpnList[this.taskIndex].fromLpn,
+      })
+    },
+
+
+    // 任务行切换前
+    cutStart(){
+      return this.checkInputVal(['locationCode', 'lpn'])
+
+    },
+    // 任何行切换后
+    cutEnd(){
+      this.clearInputVal(['locationCode', 'lpn'])
+    },
+
+
+    // 确认缺货
+    lackConfirm(data){
+      const item = this.pickData.pendingPickLpnList[this.taskIndex]
+
+      return projectWmsOutboundSubmitLpnPickSockout({
+        pickId: this.pickData.pickId,
+        pickNo: this.pickData.pickNo,
+        fromLocationId: item.fromLocationId,
+        fromLpn: item.fromLpn,
+        ownerId: data.ownerId,
+        skuId: data.skuId,
+        stockoutQty: data.lackQty,
+      })
+    },
+
+    // 确认异常
+    abnConfirm(data){
+      const item = this.pickData.pendingPickLpnList[this.taskIndex]
+
+      return projectWmsOutboundSubmitLpnPickAbnormal({
+        pickId: this.pickData.pickId,
+        pickNo: this.pickData.pickNo,
+        fromLocationId: item.fromLocationId,
+        fromLpn: item.fromLpn,
+        ownerId: data.ownerId,
+        skuId: data.skuId,
+        ...data.data
+      })
+    },
+
+    // 确认拣选
+    pickConfirm(){
+      // 校验必填项
+      if (!(
+        this.locationCodeCheck() &&
+        this.lpnCheck()
+      )) return
+
+      const item = this.pickData.pendingPickLpnList[this.taskIndex]
+      projectWmsOutboundWholeLpnPick({
+        pickId: this.pickData.pickId,
+        pickNo: this.pickData.pickNo,
+        fromLocationId: item.fromLocationId,
+        fromLpn: item.fromLpn,
+      }).then(res=>{
+
+        // 判断是否需要打印箱票
+        if(res.needPrintBox){
+          this.$refs.dataLookAndChange.print(res)
+        }
+
+        this.$lwToast.success(
+          this.$lwLanguage.get('','拣选成功')
+        )
+
+        // 拣选完了就不要覆盖数据，会导致页面没有数据而崩溃
+        if (res.pickOrderFinish){
+          this.$refs.dataLookAndChange.openPickSuccessPopup()
+          return
+        }
+
+        this.pickData = res.pickTaskData
+        this.checkTaskIndex(this.pickData.pendingPickLpnList.length)
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+
+</style>

package/src/components/page/outbound/pick/mixin/all.js

@@ -0,0 +1,100 @@
+/*
+* 出库拣选所有拣选方式，使用到的公共方法,采用混入方式
+* @author: 张文
+* @date  2022-06-17
+* */
+
+export const all = {
+  methods: {
+
+    // 输入框校验
+    inputCheck({key, checkVal}) {
+      const msg = {
+        locationCode: {
+          nullMsg: this.$lwLanguage.get('', '拣选库位不能为空'),
+          checkMsg: this.$lwLanguage.get('', '当前库位与拣选库位不一致')
+        },
+        lpn: {
+          nullMsg: this.$lwLanguage.get('', '托盘号不能为空'),
+          checkMsg: this.$lwLanguage.get('', '当前托盘号与拣选托盘号不一致')
+        },
+        box: {
+          nullMsg: this.$lwLanguage.get('', '箱号不能为空'),
+          checkMsg: this.$lwLanguage.get('', '当前箱号与拣选箱号不一致')
+        },
+        sku: {
+          nullMsg: this.$lwLanguage.get('', '商品号不能为空'),
+          checkMsg: this.$lwLanguage.get('', '当前商品与商品不一致')
+        },
+      }
+
+      const val = this[key].value
+
+      // 非空判断
+      if (!val) {
+        this[key].focus = true
+        this.$lwShowErrorMsg(msg[key].nullMsg)
+        return false
+      }
+
+      // 一致性判断
+      if (val !== checkVal) {
+        this[key].focus = true
+        this.$lwShowErrorMsg(msg[key].checkMsg)
+        this[key].value = ''
+        return false
+      }
+
+      return true
+    },
+
+    // 回到tab页面顶部
+    goTop() {
+      const dom = document.querySelector('#tab-top')
+      dom && dom.scrollIntoView({
+        behavior: "smooth",
+        block: 'center',
+      })
+    },
+
+    // 校验当前索引是否满足未拣选的行数
+    checkTaskIndex(length) {
+      if ((this.taskIndex + 1) > length) {
+        this.taskIndex = length - 1
+      }
+      this.cutEnd()
+    },
+
+    // 待拣选列表点击
+    waitPickClick(index) {
+      this.tabActive = 'ing'
+      this.taskIndex = index
+      this.cutEnd()
+    },
+
+    // 检查给定的数据是否有值，并返回一个异步函数
+    checkInputVal(arr, need = false) {
+      return new Promise((res, err) => {
+
+        if (
+          need ||
+          arr.some(item => !!this[item].value)
+        ) {
+          this.$dialog.confirm({
+            title: this.$lwLanguage.get('', '警告'),
+            message: this.$lwLanguage.get('', '切换后当前输入数据将会被清空')
+          }).then(() => res()).catch(() => err('用户取消'))
+          return
+        }
+
+        res()
+      })
+    },
+
+    // 清空给定的数据，并滚动到顶部
+    clearInputVal(arr) {
+      arr.forEach(item => this[item].value = '')
+      this.goTop()
+    }
+  }
+}

package/src/components/page/outbound/pick/mixin/aloneAndNotAlone.js

@@ -0,0 +1,132 @@
+/*
+* 出库拣选 - 独立件和非独立件 使用到的公共方法
+* @author: 张文
+* @date  2022-06-20
+* */
+
+import {
+  projectWmsOutboundSubmitPickAbnormal,
+  projectWmsOutboundSubmitPickSplitDown,
+  projectWmsOutboundSubmitPickStockout
+} from "../../../../../api/outbound/pick/alone";
+
+export const aloneAndNotAlone = {
+  methods: {
+
+    // 格式化数据
+    formatData(res){
+      // 拣选单位中文翻译
+      const uomLabel = {
+        EA: {
+          top: this.$lwLanguage.get('','最小销售数'),
+          table: this.$lwLanguage.get('','最小销售')
+        },
+        IP: {
+          top: this.$lwLanguage.get('','内装数'),
+          table: this.$lwLanguage.get('','内装'),
+        },
+        CS: {
+          top: this.$lwLanguage.get('','箱装数'),
+          table: this.$lwLanguage.get('','箱'),
+        },
+        PL: {
+          top: this.$lwLanguage.get('','托装数'),
+          table: this.$lwLanguage.get('','托'),
+        },
+        LPN: {
+          top: this.$lwLanguage.get('','整托盘'),
+          table: this.$lwLanguage.get('','托'),
+        },
+        CASE: {
+          top: this.$lwLanguage.get('','整箱'),
+          table: this.$lwLanguage.get('','箱'),
+        }
+      }
+
+      res.pendingPickLineList.forEach(item=>{
+        item.uomLabel = uomLabel[item.uom]
+      })
+      return res
+    },
+
+    // 确认缺货
+    lackConfirm(data){
+      const item = this.pickData.pendingPickLineList[this.taskIndex]
+      return projectWmsOutboundSubmitPickStockout({
+        pickId: this.pickData.pickId,
+        pickNo: this.pickData.pickNo,
+        fromLocationId: item.fromLocationId,
+        fromLpn: item.fromLpn,
+        ownerId: data.ownerId,
+        skuId: data.skuId,
+        stockoutQty: data.lackQty,
+        lineGroupKey: item.lineGroupKey,
+      })
+    },
+
+    // 确认异常
+    abnConfirm(data){
+      const item = this.pickData.pendingPickLineList[this.taskIndex]
+      return projectWmsOutboundSubmitPickAbnormal({
+        pickId: this.pickData.pickId,
+        pickNo: this.pickData.pickNo,
+        fromLocationId: item.fromLocationId,
+        fromLpn: item.fromLpn,
+        fromCase: item.fromCase,
+        ownerId: data.ownerId,
+        skuId: data.skuId,
+        lineGroupKey: item.lineGroupKey,
+        ...data.data
+      })
+    },
+
+    // 确认拆板下架
+    splitConfirm(data){
+      const item = this.pickData.pendingPickLineList[this.taskIndex]
+      const split = this.splitPopup.data.splitDownData
+      projectWmsOutboundSubmitPickSplitDown({
+        pickId: this.pickData.pickId,
+        pickNo: this.pickData.pickNo,
+        fromLocationId: item.fromLocationId,
+        fromLpn: item.fromLpn,
+        ownerId: item.ownerId,
+        skuId: item.skuId,
+        masterLocationId: split.masterLocationId,
+        masterLocationCode: split.masterLocationCode,
+        ...data
+      }).then(()=>{
+        this.$lwToast.success(
+            this.$lwLanguage.get('','操作成功')
+        )
+        this.splitPopup.show = false
+      })
+    },
+    // 拆板下架弹出框关闭
+    splitOff(){
+
+      // 判断当前拣选任务是否完成
+      if (this.splitPopup.data.pickOrderFinish){
+        this.$refs.dataLookAndChange.openPickSuccessPopup()
+        return
+      }
+
+      this.pickData = this.formatData(this.splitPopup.data.pickTaskData)
+      this.checkTaskIndex(this.pickData.pendingPickLineList.length)
+    },
+
+    // 拣选明细行点击未拣选行
+    allPickClick(item){
+      if (item.pickStatus === '300') return
+
+      const wait = this.pickData.pendingPickLineList
+      for (let i = 0; i < wait.length; i++) {
+        if (wait[i].lineGroupKey === item.lineGroupKey){
+          this.taskIndex = i
+          this.tabActive = 'ing'
+          this.cutEnd()
+          return;
+        }
+      }
+    },
+  }
+}

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

@@ -0,0 +1,11 @@
+/*
+* 出库拣选 - 非独立件
+* @author: 张文
+* @date  2022-06-20
+* */
+
+import lwOutboundPickNotAloneActionPage from "./index.vue";
+
+lwOutboundPickNotAloneActionPage.install = Vue => Vue.component(lwOutboundPickNotAloneActionPage.name, lwOutboundPickNotAloneActionPage)
+
+export default lwOutboundPickNotAloneActionPage