@logwire/logwire-wms-pda-ui 1.1.15

package/src/components/page/receive/putaway/skuAction/index.vue

@@ -0,0 +1,735 @@
+<!--
+  入库上架 - 按商品上架执行
+  @author: 张文
+  @date: 2022-02-25
+-->
+<template>
+  <div>
+    <!-- 定位点 -->
+    <div id="lw-putaway-sku-top"></div>
+
+    <lw-nav-bar :title="$lwLanguage.get('wms_project.pda.receive.skuAction.title','入库上架 - 商品')"/>
+
+    <div class="lw-global-page-box">
+
+      <div class="lw-global-tab-box">
+
+        <van-tabs
+          type="card"
+          animated
+          v-model="tabActive"
+        >
+
+          <!-- 当前商品 -->
+          <van-tab
+            name="now"
+            :title="$lwLanguage.get('wms_project.pda.receive.skuAction.sku','当前商品')"
+          >
+
+            <template v-if="skuListData.length">
+
+              <!-- 头部信息 -->
+              <div class="lw-global-model-box">
+
+                <!-- 托盘号 -->
+                <div class="lw-global-row-start">
+                  <span class="lw-global-title">
+                    {{ $lwLanguage.get('wms_project.pda.receive.skuAction.lpn','托盘号') }}
+                  </span>
+                  <span class="lw-global-value-bold">
+                    {{ skuListData[skuIndex].task.lpn || '-' }}
+                  </span>
+                </div>
+
+                <!-- 原库位、目标库区 -->
+                <div class="lw-global-flex-between lw-global-row">
+                  <div>
+                    <span class="lw-global-title">
+                      {{ $lwLanguage.get('wms_project.pda.receive.skuAction.oldLocal','原库位') }}
+                    </span>
+                    <span class="lw-global-value-bold">
+                      {{ skuListData[skuIndex].task.fromLocationCode || '-' }}
+                    </span>
+                  </div>
+                  <div>
+                    <span class="lw-global-title">
+                      {{ $lwLanguage.get('wms_project.pda.receive.skuAction.newLocal','目标库区') }}
+                    </span>
+                    <span class="lw-global-value-bold">
+                      {{ skuListData[skuIndex].task.toZoneCode || '-' }}
+                    </span>
+                  </div>
+                </div>
+
+                <!-- 看板 -->
+                <div
+                  style="text-align: center;margin-top: 10px"
+                  class="lw-global-flex-between"
+                >
+
+                  <!-- 品种数 -->
+                  <div>
+                    <div class="lw-global-value-bold" style="font-size: 16px">
+                      {{ skuListData[skuIndex].task.skuCount || 0 }}
+                    </div>
+                    <div class="lw-global-title">
+                      {{ $lwLanguage.get('wms_project.pda.receive.skuAction.skuCount','品种数') }}
+                    </div>
+                  </div>
+
+                  <!-- 计划量 -->
+                  <div>
+                    <div class="lw-global-value-bold" style="font-size: 16px">
+                      {{ skuListData[skuIndex].task.qty || 0 }}
+                    </div>
+                    <div class="lw-global-title">
+                      {{ $lwLanguage.get('wms_project.pda.receive.skuAction.planQty','计划量') }}
+                    </div>
+                  </div>
+
+                  <!-- 已上架 -->
+                  <div>
+                    <div class="lw-global-value-bold" style="font-size: 16px">
+                      {{ skuListData[skuIndex].task.paQty || 0 }}
+                    </div>
+                    <div class="lw-global-title">
+                      {{ $lwLanguage.get('wms_project.pda.receive.skuAction.up','已上架') }}
+                    </div>
+                  </div>
+
+                  <!-- 待上架 -->
+                  <div>
+                    <div class="lw-global-value-bold" style="font-size: 16px">
+                      {{ skuListData[skuIndex].task.canPaQty || 0 }}
+                    </div>
+                    <div class="lw-global-title">
+                      {{ $lwLanguage.get('wms_project.pda.receive.skuAction.wait','待上架') }}
+                    </div>
+                  </div>
+
+                  <!-- 异常量 -->
+                  <div>
+                    <div
+                      style="font-size: 16px;color: #D50000"
+                      class="lw-global-value-bold"
+                    >
+                      {{ skuListData[skuIndex].task.abnormalQty || 0 }}
+                    </div>
+                    <div
+                      style="color: #D50000"
+                      class="lw-global-title"
+                    >
+                      {{ $lwLanguage.get('wms_project.pda.receive.skuAction.abn','异常量') }}
+                    </div>
+                  </div>
+
+                </div>
+
+              </div>
+
+              <!-- 商品信息 -->
+              <sku-putaway-info
+                style="margin: 10px 0"
+                :item="skuListData[skuIndex]"
+              />
+
+              <!-- 输入框 -->
+              <div class="lw-global-model-box">
+
+                <!-- 商品条码 -->
+                <lw-input
+                  :title="$lwLanguage.get('wms_project.pda.receive.skuAction.skuCode','商品条码')"
+                  v-model="input.sku.value"
+                  :get-focus.sync="input.sku.focus"
+                  required
+                  @confirm="skuCodeConfirm"
+                />
+
+                <!-- 数量 -->
+                <lw-input
+                  :title="$lwLanguage.get('wms_project.pda.receive.skuAction.qty','数量')"
+                  v-model="input.num.value"
+                  :get-focus.sync="input.num.focus"
+                  type="digit"
+                  required
+                  @confirm="numConfirm"
+                />
+
+                <!-- 接力上架开关 -->
+                <lw-cell
+                  style="padding: 0"
+                  :title="$lwLanguage.get('wms_project.pda.receive.skuAction.rely','接力上架')"
+                  :is-link="false"
+                  required
+                >
+                  <template #value>
+                    <van-switch
+                      v-model="input.wait"
+                      size="22px"
+                      @change="waitChange"
+                    />
+                  </template>
+                </lw-cell>
+
+                <!-- 非接力上架 -->
+                <div v-if="!input.wait">
+                  <!-- 目标库位 -->
+                  <lw-input
+                    class="lw-global-animation-rotate"
+                    :title="$lwLanguage.get('wms_project.pda.receive.skuAction.local','目标库位')"
+                    v-model="input.local.value"
+                    :get-focus.sync="input.local.focus"
+                    required
+                    @confirm="localConfirm"
+                  />
+
+                  <!-- 目标托盘 -->
+                  <lw-input
+                    class="lw-global-animation-rotate"
+                    :title="$lwLanguage.get('wms_project.pda.receive.skuAction.lpnCode','目标托盘')"
+                    v-model="input.lpn.value"
+                    :get-focus.sync="input.lpn.focus"
+                    @confirm="lpnConfirm"
+                  />
+                </div>
+
+                <!-- 接力上架 -->
+                <div
+                  class="lw-global-animation-rotate"
+                  v-else
+                >
+                  <!-- 通道库位 -->
+                  <lw-input
+                    :title="$lwLanguage.get('wms_project.pda.receive.skuAction.localP','通道库位')"
+                    v-model="input.local.value"
+                    :get-focus.sync="input.local.focus"
+                    required
+                    @confirm="localConfirm"
+                  />
+                  <!-- 暂存容器号 -->
+                  <lw-input
+                    :title="$lwLanguage.get('wms_project.pda.receive.skuAction.waitLpn','暂存容器号')"
+                    v-model="input.lpn.value"
+                    :get-focus.sync="input.lpn.focus"
+                    required
+                    @confirm="lpnConfirm"
+                  />
+                </div>
+
+                <!-- 左右切换 -->
+                <lw-cut-card
+                v-model="skuIndex"
+                :length="skuListData.length"
+                :cut-end="clearInput"
+              />
+
+              </div>
+
+
+            </template>
+
+          </van-tab>
+
+          <!-- 商品列表 -->
+          <van-tab
+            name="skuList"
+            :title="$lwLanguage.get('wms_project.pda.receive.skuAction.skuList','商品列表')"
+          >
+
+            <div
+              class="lw-global-model-box lw-global-animation-out lw-global-click-style"
+              v-for="(i,k) in skuListData"
+              :key="i.taskId"
+              :style="{animationDelay: 50 * k + 'ms',padding:'10px 0 0 0'}"
+              @click="skuListClick(k)"
+            >
+
+              <div
+                style="padding: 0 10px 8px"
+                class="lw-global-row"
+              >
+                <span class="lw-global-title">
+                  {{ $lwLanguage.get('wms_project.pda.receive.skuAction.lpn','托盘号') }}
+                </span>
+                <span class="lw-global-value-bold">{{ i.fromLpn }}</span>
+              </div>
+
+              <sku-putaway-info
+                :item="i"
+                :top-radius="false"
+              />
+
+            </div>
+
+          </van-tab>
+
+        </van-tabs>
+
+      </div>
+
+    </div>
+
+    <lw-bottom-bar v-if="tabActive==='now'">
+
+      <!-- 上架异常 -->
+      <lw-button
+        plain
+        type="last"
+        @click="abnClick"
+      >
+        {{ $lwLanguage.get('wms_project.pda.receive.skuAction.upAbn','上架异常') }}
+      </lw-button>
+
+      <!-- 定位商品 -->
+      <lw-button
+        plain
+        type="normal"
+        @click="seoSku"
+      >
+        {{ $lwLanguage.get('wms_project.pda.receive.skuAction.skuIndex','定位商品') }}
+      </lw-button>
+
+      <!-- 上架到通道 / 上架到目标库位 -->
+      <lw-button @click="putawayConfirm">
+        {{
+          input.wait ?
+          $lwLanguage.get('wms_project.pda.receive.skuAction.upWay','上架到通道') :
+          $lwLanguage.get('wms_project.pda.receive.skuAction.upLocal','上架到目标库位')
+        }}
+      </lw-button>
+
+    </lw-bottom-bar>
+
+    <!-- 异常弹框 -->
+    <lw-popup
+      :title="$lwLanguage.get('wms_project.pda.receive.skuAction.upAbnLocal','入库上架异常')"
+      v-model="abnPopup.show"
+      @closed="abnPopup.comShow=false"
+    >
+      <lw-inner-abnormal-module
+        v-if="abnPopup.comShow"
+        ref="abnormal"
+        :sku-code="skuListData[skuIndex].sku.code"
+        :sku-name="skuListData[skuIndex].sku.name"
+        :qty="skuListData[skuIndex].qty"
+        :location="skuListData[skuIndex].fromLocationCode"
+        :type="$lwLanguage.get('wms_project.pda.receive.skuAction.inbound','在库')"
+        :ab-type="$lwLanguage.get('wms_project.pda.receive.skuAction.reveiveUp','入库上架')"
+      />
+
+      <template #button>
+        <lw-button @click="abnConfirm">
+          {{ $lwLanguage.get('wms_project.pda.receive.skuAction.submitAbn','上报异常') }}
+        </lw-button>
+      </template>
+    </lw-popup>
+
+    <!-- 定位商品 -->
+    <lw-popup
+      :title="$lwLanguage.get('wms_project.pda.receive.skuAction.skuIndex','定位商品')"
+      v-model="seoPopup.show"
+      @closed="seoPopupOff"
+    >
+
+      <!-- 输入框 -->
+      <lw-input
+        :title="$lwLanguage.get('wms_project.pda.receive.skuAction.skuNum','商品号')"
+        v-model="seoPopup.sku.value"
+        :get-focus.sync="seoPopup.sku.focus"
+        @confirm="seoPopupSkuConfirm"
+      >
+        <template #button>
+          <lw-button
+            mini
+            round
+            @click="seoPopupSkuConfirm"
+          >{{ $lwLanguage.get('wms_project.pda.receive.skuAction.seo','搜索') }}</lw-button>
+        </template>
+      </lw-input>
+
+      <!-- 选择区 -->
+      <template v-if="seoPopup.list.length">
+
+        <div
+          class="lw-global-row lw-global-click-style lw-global-flex-between"
+          v-for="i in seoPopup.list"
+          :key="i.index"
+          @click="seoPopupSkuListClick(i.index)"
+        >
+          <div>
+            <div>
+            <span class="lw-global-title">
+              {{ $lwLanguage.get('wms_project.pda.receive.skuAction.lpn','托盘号') }}
+            </span>
+              <span
+                style="color: #D50000;"
+                class="lw-global-value-bold"
+              >{{ i.data.lpn || '-' }}</span>
+            </div>
+
+            <div
+              style="margin-top: 5px"
+              class="lw-global-value-bold"
+            >{{ i.data.sku.code }}</div>
+            <div class="lw-global-title">{{ i.data.sku.name }}</div>
+          </div>
+
+          <van-icon name="arrow" size="20px"/>
+        </div>
+
+      </template>
+      <lw-not-data v-if="seoPopup.showNotData && !seoPopup.list.length"/>
+
+    </lw-popup>
+
+  </div>
+</template>
+
+<script>
+import SkuPutawayInfo from './../components/SkuPutAwayInfo/index.vue'
+import {
+  wmsMobileQueryPutawayLinesByTasks,
+  wmsMobileSubmitPutawayByAbnormal,
+  wmsMobileSubmitPutawayBySku
+} from "../../../../../api/receive/putaway";
+
+export default {
+  name: "lwReceivePutawaySkuActionPage",
+  components:{
+    SkuPutawayInfo
+  },
+  data() {
+    return {
+      // 返回步数
+      backStep: -1,
+
+      // tab标签激活项
+      tabActive: 'now',
+
+      // 商品列表数据
+      skuListData: [],
+      // 当前商品的索引
+      skuIndex: 0,
+
+      // 输入框
+      input:{
+        // 商品
+        sku:{
+          value:'',
+          focus: false
+        },
+        // 数量
+        num:{
+          value:'',
+          focus: false
+        },
+        // 是否接力上架
+        wait: false,
+        // 目标库位 / 通道库位
+        local:{
+          value:'',
+          focus: false
+        },
+        // 目标托盘 / 通道托盘
+        lpn:{
+          value:'',
+          focus: false
+        },
+      },
+
+      // 异常弹框
+      abnPopup:{
+        show: false,
+        comShow: false,
+        sku: {}
+      },
+
+      // 定位商品
+      seoPopup:{
+        show: false,
+        // 是否显示空数据状态
+        showNotData: false,
+        sku:{
+          value:'',
+          focus: false
+        },
+        list:[]
+      }
+    }
+  },
+  mounted() {
+    this.backStep = Number('-' + this.$route.query.lwBack)
+    this.getData()
+  },
+  methods: {
+    // 滚动到顶部
+    scrollTop(){
+      document.querySelector('#lw-putaway-sku-top').scrollIntoView({
+        behavior: "smooth",
+        block:'start',
+      })
+    },
+
+    // 获取数据
+    getData(){
+      wmsMobileQueryPutawayLinesByTasks({
+        taskIds: JSON.parse(this.$route.query.lwTaskIdList || '[]')
+      }).then(res=>{
+
+        if (!res.length){
+          this.$lwToast.success(
+            this.$lwLanguage.get('wms_project.pda.receive.skuAction.taskOver','当前任务已全部完成')
+          )
+          history.go(this.backStep)
+          return
+        }
+
+        this.skuListData = res
+
+        this.skuIndex + 1 > this.skuListData.length ? this.skuIndex-- : ''
+
+      }).catch(()=>{
+        history.go(this.backStep)
+      })
+    },
+
+    // 清空输入框
+    clearInput(){
+      this.input.sku.value = ''
+      this.input.sku.focus = true // 打开后会导致屏幕滚动到当前位置无法显示在头部
+      this.input.num.value = ''
+      this.input.wait = false
+      this.input.local.value = ''
+      this.input.lpn.value = ''
+      this.scrollTop()
+    },
+
+    // 商品号确认
+    skuCodeConfirm(){
+      if (this.skuCodeCheck()){
+        this.input.num.focus = true
+      }
+    },
+    // 商品号输入校验
+    skuCodeCheck(){
+      const sku = this.input.sku
+      // 非空校验
+      if (!sku.value){
+        sku.focus = true
+        this.$lwShowErrorMsg(
+          this.$lwLanguage.get('wms_project.pda.receive.skuAction.skuNull','商品号不能为空')
+        )
+        return false
+      }
+
+      // 是否输入正确
+      if (sku.value !== this.skuListData[this.skuIndex].sku.code){
+        sku.focus = true
+        this.$lwShowErrorMsg(
+          this.$lwLanguage.get('wms_project.pda.receive.skuAction.skuNot','当前商品与上架商品不一致')
+        )
+        sku.value = ''
+        return false
+      }
+
+      return true
+    },
+
+    // 数量确认
+    numConfirm(){
+      if (this.numCheck()){
+        this.input.local.focus = true
+      }
+    },
+    // 数量校验
+    numCheck(){
+      const num = Number(this.input.num.value || 0)
+      if (!num){
+        this.input.num.focus = true
+        this.$lwShowErrorMsg(
+          this.$lwLanguage.get('wms_project.pda.receive.skuAction.skuNumZero','数量不能为空，且应当是大于0的整数')
+        )
+        this.input.num.value = ''
+        return false
+      }
+
+      if (num > this.skuListData[this.skuIndex].canPaQty){
+        this.input.num.focus = true
+        this.$lwShowErrorMsg(
+          this.$lwLanguage.get('wms_project.pda.receive.skuAction.skuMore','数量不能大于待上架量')
+        )
+        this.input.num.value = ''
+        return false
+      }
+
+      return true
+    },
+
+    // 接力上架切换
+    waitChange(){
+      this.input.local.value = ''
+      this.input.local.focus = true
+      this.input.lpn.value = ''
+    },
+
+    // 库位确认
+    localConfirm(){
+      if (this.localCheck()){
+        this.input.lpn.focus = true
+      }
+    },
+    // 库位校验
+    localCheck(){
+      const local = this.input.local
+      if (!local.value) {
+
+        local.focus = true
+        this.$lwShowErrorMsg(
+          this.$lwLanguage.get('wms_project.pda.receive.skuAction.localNull','库位不能为空')
+        )
+        return false
+      }
+
+      return true
+    },
+
+    // 托盘号校验
+    lpnConfirm(){
+      if(this.lpnCheck()){
+        this.putawayConfirm()
+      }
+    },
+    // 托盘号校验
+    lpnCheck(){
+      if (!this.input.wait || this.input.lpn.value) return true
+
+      this.input.lpn.focus = true
+      this.$lwShowErrorMsg(
+        this.$lwLanguage.get('wms_project.pda.receive.skuAction.lpnNull','托盘号不能为空')
+      )
+      return false
+    },
+
+    // 商品列表商品被点击
+    skuListClick(index){
+      this.skuIndex = index
+      this.tabActive = 'now'
+      this.$lwToast.success(
+        this.$lwLanguage.get('wms_project.pda.receive.skuAction.jump','已跳转至任务行：') + (index + 1)
+      )
+      this.scrollTop()
+    },
+
+    // 上架异常点击
+    abnClick(){
+      this.abnPopup.comShow = true
+      this.abnPopup.show = true
+    },
+    // 上报异常
+    abnConfirm(){
+      const {success, data} = this.$refs.abnormal.getAbnormalData()
+
+      if (!success) return
+
+      const item = this.skuListData[this.skuIndex]
+      wmsMobileSubmitPutawayByAbnormal({
+        taskId: item.task.taskId,
+        skuCode: item.sku.code,
+        groupKey: item.groupKey,
+        ...data
+      }).then(()=>{
+        this.abnPopup.show = false
+        this.abnPopup.comShow = false
+        this.$lwToast.success(
+          this.$lwLanguage.get('wms_project.pda.receive.skuAction.abnSuccess','异常上报成功')
+        )
+        this.getData()
+      })
+    },
+
+    // 定位商品
+    seoSku(){
+      this.seoPopup.show = true
+      this.seoPopup.sku.focus = true
+    },
+    // 定位商品弹框关闭
+    seoPopupOff(){
+      this.seoPopup.sku.value = ''
+      this.seoPopup.list = []
+      this.seoPopup.showNotData = false
+    },
+    // 确认搜索商品
+    seoPopupSkuConfirm() {
+      this.seoPopup.list = []
+      this.skuListData.forEach((item, index) => {
+        if (item.sku.code.includes(this.seoPopup.sku.value)) {
+          this.seoPopup.list.push({
+            index,
+            data: item
+          })
+        }
+      })
+
+      if (this.seoPopup.list.length === 1) {
+        this.seoPopupSkuListClick(this.seoPopup.list[0].index)
+      }
+
+      this.seoPopup.showNotData = true
+    },
+    // 搜索商品结果点击
+    seoPopupSkuListClick(index){
+      this.seoPopup.show = false
+      this.skuListClick(index)
+    },
+
+    // 确认上架 - 不区分是否接力上架
+    putawayConfirm(){
+      if (
+        !(this.skuCodeCheck() &&
+          this.numCheck() &&
+          this.localCheck() &&
+          this.lpnCheck())
+      ) return
+
+      const item = this.skuListData[this.skuIndex]
+      if (!this.input.wait && this.input.local.value !== item.toLocationCode){
+        this.$dialog.confirm({
+          title: this.$lwLanguage.get('wms_project.pda.receive.skuAction.total','提示'),
+          message: this.$lwLanguage.get('wms_project.pda.receive.skuAction.confirmMsg','当前目标库位与推荐库位不一致，确认上架？')
+        }).then(()=>{
+          this.putawaySubmit(item)
+        }).catch(()=>{})
+
+        return
+      }
+
+      this.putawaySubmit(item)
+    },
+
+    // 提交上架数据
+    putawaySubmit(item){
+      wmsMobileSubmitPutawayBySku({
+        taskId: item.task.taskId,
+        groupKey: item.groupKey,
+        toLocationCode: this.input.local.value,
+        toLpn: this.input.lpn.value,
+        skuCode: this.input.sku.value,
+        qty: this.input.num.value,
+        relay: this.input.wait,
+      }).then(()=>{
+        this.$lwToast.success(
+          this.$lwLanguage.get('wms_project.pda.receive.skuAction.unSuccess','上架成功')
+        )
+
+        this.clearInput()
+        this.getData()
+      })
+    }
+
+  }
+}
+</script>
+
+<style scoped lang="less">
+
+</style>