@logwire/logwire-wms-pda-ui 1.1.16 → 1.1.17

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

@@ -1,748 +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>
+<!--
+  数据看板及底部操作
+  @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>