@logwire/logwire-wms-pda-ui 1.1.15

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

@@ -0,0 +1,748 @@
+<!--
+  数据看板及底部操作
+  @author: 张文
+  @date: 2022-06-16
+-->
+<template>
+  <div>
+
+    <lw-nav-bar :title="$lwLanguage.get('','执行拣选')"/>
+
+    <!-- 页主体 -->
+    <div class="lw-global-page-box">
+
+      <!-- 头部数据看板 -->
+      <div
+        class="lw-global-model-box"
+        style="border-radius: 10px 10px 0 0"
+      >
+        <div class="lw-global-flex-start">
+
+          <img
+            :src="require('./../../../../../../assets/img/taskOrder.png')"
+            alt=""
+            style="width: 50px;"
+          >
+
+          <div style="margin-left: 10px">
+            <div class="lw-global-value-bold" style="font-size: 16px">{{ pickData.pickNo }}</div>
+
+            <!-- 捆包类型 -->
+            <lw-tag
+              v-if="pickData.pickPackTypeLabel"
+              style="margin-left: 0"
+              plain
+              round
+            >{{ pickData.pickPackTypeLabel }}</lw-tag>
+            <!-- 拣选方式 -->
+            <lw-tag
+              v-if="pickData.pickMethodLabel"
+              type="warning"
+              plain
+              round
+            >{{ pickMethod }}</lw-tag>
+          </div>
+
+        </div>
+      </div>
+      <lw-data-look-bg type="not">
+
+        <!-- 计划量 -->
+        <div>
+          <div>{{ pickData.totalQty || 0 }}</div>
+          <div class="lw-data-look-bg-title">
+            {{ $lwLanguage.get('','计划量') }}
+          </div>
+        </div>
+
+        <!-- 已拣量 -->
+        <div>
+          <div>{{ pickData.pickQty || 0 }}</div>
+          <div class="lw-data-look-bg-title">
+            {{ $lwLanguage.get('','已拣量') }}
+          </div>
+        </div>
+
+        <!-- 待拣量 -->
+        <div>
+          <div>{{ pickData.waitPickQty || 0 }}</div>
+          <div class="lw-data-look-bg-title">
+            {{ $lwLanguage.get('','待拣量') }}
+          </div>
+        </div>
+
+        <!-- 异常量 -->
+        <div class="lw-data-last-item">
+          <div>{{ pickData.abnormalQty || 0 }}</div>
+          <div class="lw-data-look-bg-title">
+            {{ $lwLanguage.get('','异常量') }}
+          </div>
+        </div>
+
+      </lw-data-look-bg>
+      <div
+        class="lw-global-model-box"
+        style="border-radius: 0 0 10px 10px;margin-bottom: 10px"
+      >
+        <!--进度条-->
+        <van-progress
+          style="margin: 5px 0"
+          stroke-width="8"
+          :percentage="percentage"
+          color="linear-gradient(90deg, #FF8E8F 0%, #C5000A 100%)"
+        />
+
+        <div style="margin-top: 15px">
+          <lw-tag
+            v-if="pickData.allocationOrder"
+            type="danger"
+            round
+            plain
+          >{{ $lwLanguage.get('','调拨出库') }}</lw-tag>
+          <lw-tag
+            v-if="pickData.multiInOne"
+            round
+            plain
+          >{{ $lwLanguage.get('','多件一票') }}</lw-tag>
+        </div>
+        <slot name="look-bottom"></slot>
+      </div>
+
+      <!-- 业务自定义 -->
+      <slot></slot>
+
+    </div>
+
+    <div :style="{height: hasPrint ? '50px' : 0}"></div>
+    <div
+      :style="{height: hasPrint ? '50px' : 0}"
+      class="lw-global-flex-between lw-data-loot-adn-change-print"
+    >
+      <div style="text-align: center;">
+        <div class="lw-global-value-bold">A00001</div>
+        <div class="lw-global-title">{{ $lwLanguage.get('','已打印出库票') }}</div>
+      </div>
+
+      <div style="text-align: center;">
+        <div class="lw-global-value-bold">2</div>
+        <div class="lw-global-title">最小销售数</div>
+      </div>
+
+      <div style="text-align: center;">
+        <div class="lw-global-value-bold-red">4</div>
+        <div class="lw-global-title">{{ $lwLanguage.get('','商品数') }}</div>
+      </div>
+
+      <lw-button
+        style="flex-shrink: 0"
+        mini
+        round
+      >{{ $lwLanguage.get('','补打票') }}</lw-button>
+
+    </div>
+
+    <!-- 底部按钮 -->
+    <lw-bottom-bar v-if="showBottomBar">
+
+      <lw-button
+        type="last"
+        @click="lackBtn"
+      >{{ $lwLanguage.get('','拣选缺货') }}</lw-button>
+
+      <lw-button
+        type="normal"
+        plain
+        @click="abnBtn"
+      >{{ $lwLanguage.get('','异常') }}</lw-button>
+
+      <lw-button
+        @click="confirmBtn"
+      >{{ $lwLanguage.get('','确认拣选') }}</lw-button>
+
+    </lw-bottom-bar>
+
+    <!-- 多零件选择 -->
+    <lw-popup
+      :title="$lwLanguage.get('','选择商品')"
+      v-model="skuSelectPopup.show"
+    >
+
+      <div
+        class="lw-global-row lw-global-click-style lw-global-flex-start-start"
+        v-for="(i,k) in skuSelectPopup.list"
+        :key="k"
+        @click="skuSelectClick(i)"
+      >
+
+        <div style="flex: 1">
+          <lw-sku-info-module v-bind="i"/>
+        </div>
+
+        <van-icon
+          style="margin-left: 10px;"
+          name="arrow"
+          size="18px"
+          color="#ccc"
+        />
+      </div>
+
+    </lw-popup>
+
+    <!-- 拣选缺货 -->
+    <lw-popup
+      :title="$lwLanguage.get('','拣选缺货')"
+      v-model="lackPopup.show"
+    >
+
+
+      <!-- 箱、托盘显示 -->
+      <template v-if="isBoxOrLpn">
+        <lw-sku-info-module v-bind="lackPopup.skuInfo"/>
+      </template>
+      <!-- 独立件、非独立件显示 -->
+      <template v-else>
+        <div class="lw-global-flex-start-start lw-global-row">
+
+          <div style="flex: 1">
+            <div class="lw-global-value-bold">{{ lackPopup.skuInfo.skuCode }}</div>
+            <div class="lw-global-title">{{ lackPopup.skuInfo.skuName }}</div>
+          </div>
+
+          <lw-tag
+            plain
+            round
+          >{{ lackPopup.skuInfo.skuSizeLabel }}</lw-tag>
+
+        </div>
+
+        <div class="lw-global-flex-between lw-global-row">
+
+          <lw-title-value-cell
+            :title="$lwLanguage.get('','拣选库位')"
+            :value="lackPopup.skuInfo.fromLocationCode"
+            val-bold
+            :is-row="false"
+          />
+
+          <div>
+            <span class="lw-global-title">
+              {{ $lwLanguage.get('','最小销售量') }}
+            </span>
+            <span class="lw-global-value-bold-red">
+              {{ lackPopup.skuInfo.uomQty }}
+            </span>
+          </div>
+
+        </div>
+
+        <lw-title-value-cell
+          class="lw-global-row"
+          :title="$lwLanguage.get('','待拣量')"
+          :value="lackPopup.skuInfo.qty || 0"
+          val-bold
+          :is-row="false"
+        />
+
+      </template>
+
+
+      <lw-input
+        :title="$lwLanguage.get('','缺货量')"
+        v-model="lackPopup.lackQty"
+        :get-focus.sync="lackPopup.lackQtyFocus"
+        type="digit"
+        @confirm="lackConfirm"
+      />
+
+      <template #button>
+        <lw-button @click="lackConfirm"
+        >{{ $lwLanguage.get('','确认') }}</lw-button>
+      </template>
+
+    </lw-popup>
+
+    <!-- 异常 -->
+    <lw-popup
+      :title="$lwLanguage.get('','异常')"
+      v-model="abnPopup.show"
+      @closed="abnPopup.comShow = false"
+    >
+
+      <lw-inner-abnormal-module
+        v-if="abnPopup.comShow"
+        ref="abnormal"
+        v-bind="abnPopup.skuInfo"
+        :location="abnPopup.skuInfo.fromLocationCode"
+        :type="$lwLanguage.get('','在库')"
+        :ab-type="$lwLanguage.get('','拣选')"
+      />
+
+      <template #button>
+        <lw-button @click="abnConfirm"
+        >{{ $lwLanguage.get('','确认') }}</lw-button>
+      </template>
+
+    </lw-popup>
+
+    <!-- 去播种 -->
+    <lw-popup
+      :title="$lwLanguage.get('','拣选完成 - 提总')"
+      v-model="sowShow"
+      :off-btn-fn="backPage"
+    >
+
+      <div class="lw-global-row lw-data-loot-adn-change-success">
+        {{ $lwLanguage.get('','当前任务已拣选完成，请移动到播种墙进行播种分拣') }}
+      </div>
+
+      <lw-title-value-cell
+        :title="$lwLanguage.get('','拣选容器号')"
+        :value="pickContainer"
+        val-red
+        val-bold
+        :val-size="16"
+      />
+
+      <lw-title-value-cell
+        :title="$lwLanguage.get('','播种墙')"
+        :value="pickData.sowCode"
+        val-bold
+        :val-size="16"
+      />
+
+    </lw-popup>
+
+    <!-- 集合 -->
+    <lw-popup
+      :title="$lwLanguage.get('','拣选完成')"
+      v-model="summaryShow"
+      :off-btn-fn="backPage"
+    >
+
+      <div class="lw-global-row lw-data-loot-adn-change-success">
+        {{ $lwLanguage.get('','当前任务已拣选完成，请移动到集合口进行分区拣选集合') }}
+      </div>
+
+      <lw-title-value-cell
+        :title="$lwLanguage.get('','拣选容器号')"
+        :value="pickContainer"
+        val-red
+        val-bold
+        :val-size="16"
+      />
+
+      <div class="lw-global-flex-between">
+        <lw-title-value-cell
+          :title="$lwLanguage.get('','集合口')"
+          :value="pickData.summaryCode"
+          val-bold
+          :val-size="16"
+        />
+
+        <lw-title-value-cell
+          :title="$lwLanguage.get('','集合位')"
+          :value="pickData.summaryLineCode"
+          val-bold
+          :val-size="16"
+        />
+      </div>
+
+    </lw-popup>
+
+    <!-- 独立件 - 集货 -->
+    <lw-popup
+      :title="$lwLanguage.get('','拣选完成')"
+      v-model="aloneShow"
+      :off-btn-fn="backPage"
+    >
+
+      <div class="lw-global-row lw-data-loot-adn-change-success">
+        {{ $lwLanguage.get('','当前任务已拣选完成，请移动到集货位进行集货') }}
+      </div>
+
+    </lw-popup>
+
+    <!-- 非独立件 -->
+    <lw-popup
+      :title="$lwLanguage.get('','拣选完成')"
+      v-model="notAloneShow"
+      :off-btn-fn="backPage"
+    >
+
+      <div class="lw-global-row lw-data-loot-adn-change-success">
+        {{ $lwLanguage.get('','当前任务已拣选完成，请移动到捆包区:') }}
+        <span
+          class="lw-global-value-bold-red"
+          style="font-size: 16px"
+        >{{ pickData.pickPackTypeLabel }}</span>
+      </div>
+
+      <!-- 独立捆包件不显示 -->
+      <lw-title-value-cell
+        v-if="pickData.pickMethod !== 'ALONE_PACK'"
+        :title="$lwLanguage.get('','拣选容器号')"
+        :value="pickContainer"
+        val-red
+        val-bold
+        :val-size="16"
+      />
+
+      <div style="text-align: center;margin-top: 10px">
+        <lw-tag size="large">{{ pickData.pickPackTypeLabel }}</lw-tag>
+      </div>
+
+    </lw-popup>
+
+
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "index",
+  props:{
+
+    // 当前拣选类型： box-按箱、lpn-按托盘、alone-独立件、notAlone-非独立件
+    type:{
+      type: String,
+      required: true
+    },
+
+    // 拣选数据
+    pickData: Object,
+
+    // 当前拣选行的索引
+    taskIndex:{
+      type: Number,
+      default: 0
+    },
+
+    // 异常提交的函数 - 必须是异步的
+    abnConfirmFn:{
+      type: Function,
+      required: true
+    },
+
+    // 缺货拣选的函数 - 必须是异步的
+    lackConfirmFn:{
+      type: Function,
+      required: true
+    },
+
+    // 拣选容器号
+    pickContainer: String,
+
+    // 获取数据
+    getData:{
+      type: Function,
+      required: true
+    },
+
+    // 是否显示底部操作按钮
+    showBottomBar:{
+      type: Boolean,
+      default: true
+    }
+  },
+  computed:{
+    // 完成百分比
+    percentage(){
+      return Math.floor(
+        (this.pickData.pickQty + this.pickData.abnormalQty) /
+        this.pickData.totalQty * 100
+      ) || 0
+    },
+
+    // 当前类型是否为整箱或整托
+    isBoxOrLpn(){
+      return ['box', 'lpn'].includes(this.type)
+    },
+
+    // 拣选方式
+    pickMethod(){
+      if (this.pickData.pickUom === 'CASE'){
+        return this.$lwLanguage.get('','按箱拣选')
+      }
+      if (this.pickData.pickUom === 'LPN'){
+        return this.$lwLanguage.get('','整托盘拣选')
+      }
+
+      return this.pickData.pickMethodLabel
+    }
+  },
+  data() {
+    return {
+      // 选择零件的弹框
+      skuSelectPopup:{
+        // 调用选择零件的父类型：缺货-lack，异常-abn
+        type:'',
+        show: false,
+        list:[]
+      },
+
+      // 拣选缺货的弹框
+      lackPopup:{
+        show: false,
+        skuInfo: [],
+        lackQty:'',
+        lackQtyFocus:false,
+      },
+
+      // 异常的弹框
+      abnPopup:{
+        show: false,
+        comShow:false,
+        skuInfo: []
+      },
+
+      // 播种墙
+      sowShow: false,
+
+      // 集合
+      summaryShow: false,
+
+      // 独立件
+      aloneShow: false,
+
+      // 非独立件
+      notAloneShow: false,
+
+      // 有无打印数据
+      hasPrint: false
+    }
+  },
+  mounted() {
+    // TODO 检查是否配置了打印机
+  },
+  methods: {
+
+    // 缺货、异常上报成功后状态判断
+    lackAbnSuccess(res){
+      if (res.generateStatus){
+        this.$lwToast.success(
+          this.$lwLanguage.get('','上报缺货成功')
+        )
+      }
+
+      if (res.taskFinishStatus){
+        this.openPickSuccessPopup()
+        return
+      }
+
+      this.getData()
+    },
+    // 拣选完成的弹出框
+    openPickSuccessPopup(){
+      if (this.pickData.sowCode){
+        this.sowShow = true
+        return
+      }
+
+      if (this.pickData.summaryCode){
+        this.summaryShow = true
+        return
+      }
+
+      if (this.pickData.pickPackType === 'ALONE'){
+        this.aloneShow = true
+        return
+      }
+
+      this.notAloneShow = true
+    },
+
+
+    // 缺货拣选或者异常上报时候是否存在多零件
+    checkSkuMore(type){
+
+      let data
+      switch (this.type) {
+        case 'box':
+          data = this.pickData.pendingPickCaseList[this.taskIndex]
+          break;
+        case 'lpn':
+          data = this.pickData.pendingPickLpnList[this.taskIndex]
+          break;
+        default:
+          data = {
+            ...this.pickData.pendingPickLineList[this.taskIndex],
+            qty:Number(this.pickData.pendingPickLineList[this.taskIndex].totalQty || 0) -
+              Number(this.pickData.pendingPickLineList[this.taskIndex].pickQty || 0)
+          }
+      }
+
+      let skuInfo = []
+      if (this.isBoxOrLpn){
+        skuInfo = data.skuList.map(item=>{
+          item.fromLocationCode = data.fromLocationCode
+          item.qty = Number(item.qty || 0)
+          return item
+        })
+      }else {
+        skuInfo = [data]
+      }
+
+
+      if (skuInfo.length === 1){
+        return {
+          success: true,
+          data: skuInfo[0]
+        }
+      }else {
+        this.showSkuSelect(skuInfo, type)
+        return {
+          success: false,
+          data: {}
+        }
+      }
+    },
+    // 显示需要选择零件的弹框
+    showSkuSelect(list, type){
+      this.skuSelectPopup.list = list
+      this.skuSelectPopup.type = type
+      this.skuSelectPopup.show = true
+    },
+    // 选中零件
+    skuSelectClick(item){
+      if (this.skuSelectPopup.type === 'abn'){
+        this.showAbnPopup(item)
+      }else {
+        this.showLackPopup(item)
+      }
+      this.skuSelectPopup.show = false
+    },
+
+
+    // 拣选缺货按钮
+    lackBtn(){
+      const {success, data} = this.checkSkuMore('lack')
+
+      if (!success) return
+
+      this.showLackPopup(data)
+    },
+    // 显示拣选缺货弹框
+    showLackPopup(data){
+      this.lackPopup.skuInfo = data
+      this.lackPopup.show = true
+      this.lackPopup.lackQtyFocus = true
+    },
+    // 确认拣选缺货
+    lackConfirm(){
+      const qty = Number(this.lackPopup.lackQty || 0)
+      if (!qty){
+        this.lackPopup.lackQtyFocus = true
+        this.$lwShowErrorMsg(
+          this.$lwLanguage.get('','缺货量不能为空，且应当是大于0的整数')
+        )
+        this.lackPopup.lackQty = ''
+        return
+      }
+
+      const sku = this.lackPopup.skuInfo
+
+      // 判断是否大于待拣量
+      if (Number(sku.qty || 0) < qty){
+        this.lackPopup.lackQtyFocus = true
+        this.$lwShowErrorMsg(
+          this.$lwLanguage.get('','缺货量不能大于待拣量')
+        )
+        this.lackPopup.lackQty = ''
+        return
+      }
+
+      this.lackConfirmFn({
+        ...this.lackPopup.skuInfo,
+        lackQty: qty
+      }).then((res)=>{
+
+        this.lackAbnSuccess(res)
+
+        this.lackPopup.lackQty = ''
+        this.lackPopup.show = false
+      })
+    },
+
+
+    // 异常按钮
+    abnBtn(){
+      const {success, data} = this.checkSkuMore('abn')
+
+      if (!success) return
+
+      this.showAbnPopup(data)
+    },
+    // 显示拣选缺货弹框
+    showAbnPopup(data){
+      this.abnPopup.skuInfo = data
+      this.abnPopup.comShow = true
+      this.$nextTick(()=>{
+        this.abnPopup.show = true
+      })
+    },
+    // 确认异常
+    abnConfirm(){
+      const {success, data} = this.$refs.abnormal.getAbnormalData()
+
+      if (!success) return
+
+      this.abnConfirmFn({
+        ...this.abnPopup.skuInfo,
+        data
+      }).then((res)=>{
+        this.lackAbnSuccess(res)
+        this.abnPopup.show = false
+      })
+    },
+
+
+    // 确认拣选按钮
+    confirmBtn(){
+      this.$emit('pickConfirm')
+    },
+
+
+    // 返回页面
+    backPage(){
+      history.go(-1)
+    },
+
+
+    // 打印箱票
+    print(res){
+      // TODO 调用接口获取打印数据
+      console.log(res)
+    }
+
+  }
+}
+</script>
+
+<style scoped lang="less">
+.lw-data-loot-adn-change-success{
+  font-size: 16px;
+  text-align: center;
+  font-weight: bold;
+  letter-spacing: 1px;
+}
+
+
+.lw-data-loot-adn-change-print{
+  position: fixed;
+  bottom: 50px;
+  left: 0;
+  width: 100%;
+  height: 50px;
+  background: #ccc;
+  padding: 0 5px;
+  box-sizing: border-box;
+  overflow: hidden;
+  transition: all .3s;
+
+  .lw-global-title{
+    font-size: 12px;
+  }
+}
+
+</style>