@logwire/logwire-wms-pda-ui 1.1.19 → 1.2.0

package/src/components/page/inbound/receive/receive-alloc/LwInboundReceiveAllocSkuExecutePage.vue

@@ -0,0 +1,595 @@
+<!--
+  调拨按商品收货
+  @author jimmy
+-->
+<template>
+  <div>
+    <lw-nav-bar
+      :title="$lwLanguage.get('wms_project.pda.components.page.inbound.receive.receive_alloc.odstbwjf', '调拨按商品收货')"/>
+    <div v-if="asn" class="lw-global-page-box">
+      <div>
+        <asn-info :data="asn" shrinkable radius/>
+      </div>
+
+      <div class="lw-global-model-box" style="margin-top: 10px;" v-if="!showScanResult">
+        <lw-input
+          :title="$lwLanguage.get('wms_project.pda.components.page.inbound.receive.receive_alloc.ixnhhqzo', '商品收货条码')"
+          required v-model="skuTag.value" :get-focus.sync="skuTag.focus"
+          rule-key="skuReceive" :rule-serve-query="barcodeQuery"
+          @confirm="scanSkuTag"/>
+      </div>
+
+      <div class="lw-global-model-box" v-if="showScanResult && currentSku">
+
+        <!--   商品 + 数量   -->
+        <div v-if="!currentSku.needSn">
+          <lw-input :title="$lwLanguage.get('wms_project.pda.components.page.inbound.receive.receive_alloc.calpdkwu','商品编码')" :is-row="false" val-bold val-size="16px"
+                    style="margin-top: 10px;"
+                    required v-model="sku.value" :get-focus.sync="sku.focus"
+                    rule-key="skuReceive" :rule-serve-query="barcodeQuery"
+                    @confirm="addTag"
+          />
+          <div class="lw-global-flex-between">
+            <lw-input style="flex: 1;margin-top: 10px;" :title-width="50"
+                      :title="$lwLanguage.get('wms_project.pda.components.page.inbound.receive.receive_alloc.qofpogny', '数量')"
+                      required v-model="skuQty.value" :get-focus.sync="skuQty.focus"
+                      :placeholder="$lwLanguage.get('wms_project.pda.components.page.inbound.receive.receive_alloc.twmfeikg', '请输入数量')"
+                      type="digit">
+              <template #button>
+                <lw-button mini round @click="submitScanSku"> {{ $lwLanguage.get('wms_project.pda.components.page.receive.alloc.sku.btn.submit', '提交') }}</lw-button>
+              </template>
+            </lw-input>
+          </div>
+        </div>
+
+        <!--   序列号     -->
+        <div v-if="currentSku.needSn">
+          <div class="lw-global-row-end lw-global-flex-between">
+            <div
+              style="flex: 1;font-size: 16px"
+              class="lw-global-value-bold"
+            >{{ currentSku.code }}
+            </div>
+            <div
+              style="font-size: 20px;color: #D50000;"
+              class="lw-global-value-bold"> {{ currentSkuItem.indexNo }}
+            </div>
+          </div>
+          <div class="lw-global-row-end lw-global-flex-between">
+            <div class="lw-global-title">{{ currentSku.name }}</div>
+            <div class="lw-global-value"> {{ $lwLanguage.get('wms_project.pda.components.page.receive.alloc.sku.label.index.no', '序号') }}</div>
+          </div>
+
+          <div
+            style="margin-bottom: 5px;margin-top: 10px;"
+            class="lw-global-row-start lw-global-flex-between"
+          >
+
+            <lw-title-value-cell
+              :title="$lwLanguage.get('wms_project.pda.components.page.inbound.receive.receive_alloc.vygtigsf','主库位')"
+              :value="currentSku.masterLocationCode"
+              val-bold
+              val-red
+              :is-row="false"
+              val-size="16px"
+            />
+
+            <lw-title-value-cell
+              v-if="currentSkuItem"
+              :title="$lwLanguage.get('wms_project.pda.components.page.inbound.receive.receive_alloc.odataaqg','待收量')"
+              :value="currentSkuItem.canReceiveQty"
+              val-bold
+              val-red
+              :is-row="false"
+              val-size="16px"
+            />
+          </div>
+
+          <lw-input
+            :title="$lwLanguage.get('wms_project.pda.components.page.inbound.receive.receive_alloc.hgbwhydg', '序列号')"
+            v-model="sn.value" :get-focus.sync="sn.focus" @confirm="addSn"
+            rule-key="sn" :rule-serve-query="barcodeQuery"
+          />
+
+        </div>
+      </div>
+
+      <div class="lw-global-model-box" v-if="showScanResult && sns && sns.length>0">
+        <div class="lw-global-title">
+          {{ $lwLanguage.get('wms_project.pda.components.page.inbound.receive.receive_alloc.mxgnwtet', '当前扫描结果') }}
+        </div>
+
+        <div
+          style="margin-top: 10px;margin-bottom: 10px;"
+          class="lw-global-row-start lw-global-flex-between"
+        >
+          <lw-title-value-cell
+            :title="$lwLanguage.get('wms_project.pda.components.page.inbound.receive.receive_alloc.scrqstjh','标签')"
+            :value="sns.length"
+            val-bold
+            val-red
+            :is-row="false"
+            val-size="16px"
+          />
+
+          <lw-title-value-cell
+            :title="$lwLanguage.get('wms_project.pda.components.page.inbound.receive.receive_alloc.ibswlkrz','数量')"
+            :value="snStatistics.qty"
+            val-bold
+            val-red
+            :is-row="false"
+            val-size="16px"
+          />
+
+          <lw-button mini round @click="showAllSn=true"> {{ $lwLanguage.get('wms_project.pda.components.page.receive.alloc.sku.btn.all', '全部') }}</lw-button>
+        </div>
+
+        <div class="tag-list">
+          <div class="tag-list-head">
+            <div>SN</div>
+            <div>{{ $lwLanguage.get('wms_project.pda.components.page.inbound.receive.receive_alloc.wbvwfywj', '数量') }}
+            </div>
+            <div></div>
+          </div>
+          <div class="tag-list-row" v-for="t in snsShow" :key="t.sn">
+            <div>{{ t.sn }}</div>
+            <div>{{ t.qty }}</div>
+            <div>
+              <lw-button mini @click="deleteSn(t)">
+                {{ $lwLanguage.get('wms_project.pda.components.page.inbound.receive.receive_alloc.axclhmty', '剔除') }}
+              </lw-button>
+            </div>
+          </div>
+        </div>
+
+      </div>
+
+      <template v-if="allList.length">
+        <alloc-scan-list-item v-for="(i,k) in allList" :key="i.sku.id" :item="i" :index="k" @itemClick="itemClick"/>
+      </template>
+
+      <div class="lw-global-model-box">
+        <div class="lw-global-title" style="margin-bottom: 10px;margin-top: 10px;">
+          {{ $lwLanguage.get('wms_project.pda.components.page.receive.alloc.label.scan.num', '扫描总数：') }}
+          <span>{{ numStatistics.scanQty }}</span>
+        </div>
+        <lw-input v-model="receiveLoc.value"
+                  :title="$lwLanguage.get('wms_project.pda.components.page.inbound.receive.receive_alloc.mtnlfgma', '收货库位')"
+                  required :get-focus.sync="receiveLoc.focus"/>
+      </div>
+    </div>
+
+    <lw-bottom-bar>
+      <lw-button plain @click="resetScan" v-if="!showScanResult">
+        {{ $lwLanguage.get('wms_project.pda.components.page.inbound.receive.receive_alloc.kqlzdnll', '重置扫描') }}
+      </lw-button>
+      <lw-button @click="receive">
+        {{ $lwLanguage.get('wms_project.pda.components.page.inbound.receive.receive_alloc.qcddmcon', '确认完成收货') }}
+      </lw-button>
+      <lw-button plain @click="clearScan" v-if="showScanResult">
+        {{ $lwLanguage.get('wms_project.pda.components.page.inbound.receive.receive_alloc.aztwfola', '扫描商品') }}
+      </lw-button>
+    </lw-bottom-bar>
+
+    <van-dialog v-model="showAllSn"
+                :title="$lwLanguage.get('wms_project.pda.components.page.inbound.receive.receive_alloc.dwichyhx', '当前扫描的SN列表')">
+      <div class="lw-global-page-box">
+        <div class="lw-global-model-box">
+          <sns-list :sns="sns" @remove="deleteSn"/>
+        </div>
+      </div>
+    </van-dialog>
+
+    <van-dialog v-model="showItemSnList"
+                :title="$lwLanguage.get('wms_project.pda.components.page.inbound.receive.receive_alloc.afanphqh', '当前扫描的SN列表')">
+      <div class="lw-global-page-box">
+        <div class="lw-global-model-box">
+          <sns-list :sns="itemSns" @remove="deleteSn"/>
+        </div>
+      </div>
+    </van-dialog>
+
+    <lw-popup v-model="showResult"
+              :title="$lwLanguage.get('wms_project.pda.components.page.inbound.receive.receive_alloc.estdgobe', '收货成功')"
+              :show-off-btn="false">
+      <alloc-receive-result :data="receiveResult"/>
+      <template #button>
+        <lw-button plain @click="hideResult">
+          {{ $lwLanguage.get('wms_project.pda.components.page.inbound.receive.receive_alloc.avswgvst', '关闭') }}
+        </lw-button>
+      </template>
+    </lw-popup>
+
+  </div>
+</template>
+
+<script>
+import {
+  getInboundAsn, getInboundAllocAsnScanListBySku, getInboundAllocAsnSku,
+  submitInboundAllocAsnScanBySkuSn, submitInboundAllocAsnScanBySku, receiveInboundAllocAsnScanBySku,
+  resetInboundAllocAsnScanBySku, deleteInboundAllocAsnScanSnBySku, deleteInboundAllocAsnScanSku,
+} from '../../../../../api/inbound/receive'
+import AsnInfo from '../../components/AsnInfo.vue'
+import AllocScanListItem from '../../components/AllocScanListItem.vue'
+import SnsList from '../../components/SnsList.vue'
+import AllocReceiveResult from '../../components/AllocReceiveResult.vue'
+import {scanUtils} from '../../util/InboundUtils'
+
+export default {
+  name: 'LwInboundReceiveAllocSnExecutePage',
+  components: {AsnInfo, AllocScanListItem, SnsList, AllocReceiveResult},
+  data() {
+    return {
+      asn: null,
+      list: [],
+      skuTag: {
+        value: '',
+        focus: true,
+      },
+      sku: {
+        value: '',
+        focus: true,
+      },
+      skuQty: {
+        value: '',
+        focus: true,
+      },
+      sn: {
+        value: '',
+        focus: false,
+      },
+      receiveLoc: {
+        value: '',
+        focus: false,
+      },
+      showAllSn: false,// 页面展示 sn 全部
+      showItemSnList: false,// 点击 item 显示对应 全部sn
+      showResult: false,// 显示 收货结果
+      showScanResult: false,// 显示扫描结果
+      receiveResult: null,
+      scanTempItem: null,
+      itemSns: []
+    }
+  },
+  computed: {
+    numStatistics() {
+      return this.list.map(i => ({
+        scanQty: i.scanQty
+      })).reduce((a, b) => ({scanQty: a.scanQty + b.scanQty}), ({scanQty: 0}))
+    },
+    barcodeQuery() {
+      return {
+        ownerId: this.asn.ownerId,
+      }
+    },
+    currentSkuItem() {
+      if (this.scanTempItem) {
+        let a1 = this.list ? this.list.filter(i => i.sku.id === this.scanTempItem.sku.id) : []
+        if (a1.length > 0) {
+          return a1[0]
+        } else {
+          return this.scanTempItem
+        }
+      } else {
+        return null
+      }
+    },
+    currentSku() {
+      let s = this.currentSkuItem
+      return s ? s.sku : null
+    },
+    allList() {
+      if (this.scanTempItem && this.scanTempItem.sku) {
+        let a1 = this.list ? this.list.filter(i => i.sku.id === this.scanTempItem.sku.id) : []
+        let arr = this.list ? this.list.filter(i => i.sku.id !== this.scanTempItem.sku.id) : []
+
+        if (a1.length > 0) {
+          arr.unshift(a1[0])
+        } else {
+          arr.unshift(this.scanTempItem)
+        }
+        return arr
+      } else {
+        return this.list
+      }
+    },
+    sns() {
+      let s = this.currentSkuItem
+      return s ? s.snList : null
+    },
+    snsShow() {
+      if (this.sns && this.sns.length > 3) {
+        return this.sns.slice(0, 3)
+      } else {
+        return this.sns ? this.sns : []
+      }
+    },
+    snStatistics() {
+      return this.sns.map(i => ({
+        qty: i.qty
+      })).reduce((a, b) => ({qty: a.qty + b.qty}), ({qty: 0}))
+    },
+  },
+  created() {
+    const {asnId} = this.$route.query
+    if (!asnId) {
+      return this.$lwShowErrorMsg(this.$lwLanguage.get('wms_project.pda.components.page.inbound.receive.receive_alloc.auribofr', '错误的到货通知单号'))
+    }
+    this.loadAsn(asnId)
+  },
+  methods: {
+    updateReceiveLoc(){
+      if(this.receiveLoc.value){
+        return
+      }
+
+      const ar = []
+      this.allList.forEach(item=>ar.push(item))
+      ar.sort(function(a, b){
+        return parseInt(a.indexNo, 0) - parseInt(b.indexNo, 0);
+      })
+      const index = ar.findIndex(l=>l.receiveLocationCode)
+      if(index>=0){
+        this.receiveLoc.value = ar[index].receiveLocationCode
+      }
+    },
+    loadAsn(asnId) {
+      getInboundAsn(asnId).then(res => {
+        this.asn = res
+        this.loadScanList()
+      })
+    },
+    loadScanList() {
+      getInboundAllocAsnScanListBySku(this.asn.id).then((res)=>{
+        this.list = res
+        this.updateReceiveLoc()
+      })
+    },
+    clearScan() {
+      this.clearInput('tag')
+      this.loadScanList()
+    },
+    clearInput(f = null) {
+      this.showScanResult = false
+      this.scanTempItem = null
+      this.skuTag.value = null
+      this.sku.value = null
+      this.skuQty.value = null
+      this.sn.value = null
+      this.receiveLoc.focus = false
+      this.skuTag.focus = 'tag' === f
+      this.skuQty.focus = 'skuQty' === f
+      this.sn.focus = 'sn' === f
+      this.sku.focus = 'sku' === f
+    },
+    scanSkuTag(sku, res) {
+      const scanData = scanUtils.getScanSkuCodeData(sku, res)
+      if(!scanData.success){
+        this.skuTag.value = ''
+        this.skuTag.focus = true
+        return
+      }
+      this.skuTag.value = scanData.skuCode
+      this.loadSkuCode(scanData.skuCode, res)
+    },
+    loadSkuCode(code, data = null) {
+      this.clearInput()
+      getInboundAllocAsnSku(this.asn.id, code).then(res => {
+        if (res) {
+          this.scanTempItem = res
+          this.showScanResult = true
+          this.updateReceiveLoc()
+        } else {
+          this.$lwShowErrorMsg(this.$lwLanguage.get('wms_project.pda.components.page.inbound.receive.receive_alloc.fpfqwoam', '商品 {code} 未找到收货数据', {code: code}))
+        }
+      }).finally(() => {
+        if (this.currentSku) {
+          if (this.currentSku.needSn) {
+            if (data && data.data && data.data.sn) {
+              this.addSn(code, data)
+            }
+          } else {
+            if (data && data.data) {
+              this.addTag(code, data)
+            }
+          }
+        }
+      })
+    },
+    addTag(sku, res) {
+      const scanData = scanUtils.getScanSkuCodeData(sku, res)
+      if(!scanData.success){
+        this.sku.value = ''
+        this.sku.focus = true
+        return
+      }
+      this.sku.value = scanData.skuCode
+
+      if (scanData.skuCode !== this.currentSku.code) {
+        this.sku.value = null
+        this.sku.focus = true
+        return this.$lwShowErrorMsg(this.$lwLanguage.get('wms_project.pda.components.page.inbound.receive.sku.no.same', '商品编码：{sku} 与当前商品：{currentSku} 不符',{sku:scanData.skuCode,currentSku:this.currentSku.code}))
+      }
+      const qty = parseInt(scanData.skuCode.qty) || 0
+      const oQty = parseInt(this.skuQty.value) || 0
+
+      this.skuQty.value = oQty + qty
+      this.sku.value = null
+      this.sku.focus = true
+    },
+    submitScanSku() {
+      if (!this.skuQty.value) {
+        return this.$lwShowErrorMsg(this.$lwLanguage.get('wms_project.pda.components.page.inbound.receive.receive_alloc.lzcfoqzq', '请输入商品数量'))
+      }
+      const qty = parseInt(this.skuQty.value) || 0
+      if (qty <= 0) {
+        return this.$lwShowErrorMsg(this.$lwLanguage.get('wms_project.pda.components.page.inbound.receive.receive_alloc.vibspquz', '商品数量必须大于0'))
+      }
+
+      submitInboundAllocAsnScanBySku(this.asn.id, this.currentSku.id, qty).then((res)=>{
+        this.list = res
+        this.updateReceiveLoc()
+      }).finally(() => {
+        this.clearInput('tag')
+      })
+    },
+    addSn(sn, res) {
+      const scanData = scanUtils.getScanSnData(sn, res)
+      if(!scanData.success){
+        this.sn.value = ''
+        this.sn.focus = true
+        return
+      }
+      this.sn.value = scanData.sn
+
+      if (this.sns && this.sns.length > 0) {
+        const osn = this.sns.find(i => i.sn === scanData.sn)
+        if (osn) {
+          this.sn.focus = true
+          this.sn.value = null
+          return this.$lwShowErrorMsg(this.$lwLanguage.get('wms_project.pda.components.page.inbound.receive.receive_alloc.cermhtlf', '重复的序列号'))
+        }
+      }
+
+      if (scanData.skuCode && scanData.skuCode !== this.currentSku.code) {
+        this.sn.focus = true
+        return this.$lwShowErrorMsg(this.$lwLanguage.get('wms_project.pda.components.page.inbound.receive.sku.no.same', '商品编码：{sku} 与当前商品：{currentSku} 不符',{sku:scanData.skuCode,currentSku:this.currentSku.code}))
+      }
+
+      this.submitScanSn(scanData.sn)
+    },
+    submitScanSn(sn) {
+      submitInboundAllocAsnScanBySkuSn(this.asn.id, this.currentSku.id, sn).then((res)=>{
+        this.list = res
+        this.updateReceiveLoc()
+      }).finally(() => {
+        this.sn.value = null
+        this.sn.focus = true
+      })
+    },
+    resetScan() {
+      resetInboundAllocAsnScanBySku(this.asn.id).then(() => {
+        this.list = []
+        this.clearInput("tag")
+        this.receiveLoc.value = null
+      })
+    },
+    deleteSku() {
+      deleteInboundAllocAsnScanSku(this.asn.id, this.currentSku.id).then(() => {
+        this.loadScanList()
+      })
+    },
+    deleteSn(item) {
+      deleteInboundAllocAsnScanSnBySku(this.asn.id, item.skuId, item.sn).then(res => {
+        if (res && res.snList && res.snList.length > 0) {
+          this.sns = res.snList
+        } else {
+          this.clearInput('tag')
+        }
+        this.loadScanList()
+      })
+    },
+    itemClick(item) {
+      if (item.snList && item.snList.length > 0) {
+        this.itemSns = item.snList
+        this.showItemSnList = true
+      }
+    },
+    receive() {
+      if (!this.receiveLoc.value) {
+        this.receiveLoc.focus = true
+        return this.$lwShowErrorMsg(this.$lwLanguage.get('wms_project.pda.components.page.inbound.receive.receive_alloc.sqejpgjc', '收货库位不能为空'))
+      }
+      if (this.list.length === 0) {
+        return this.$lwShowErrorMsg(this.$lwLanguage.get('wms_project.pda.components.page.inbound.receive.receive_alloc.hhdnpqde', '未提交已扫描商品'))
+      }
+      receiveInboundAllocAsnScanBySku(this.asn.id, this.receiveLoc.value).then(res => {
+        this.clearInput()
+
+        this.loadAsn(this.asn.id)
+        this.receiveResult = res
+        this.showResult = true
+      }).finally(() => {
+        this.receiveLoc.value = null
+      })
+    },
+    hideResult() {
+      this.showResult = false
+      this.receiveResult = null
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.btn-shrink {
+  margin-left: 10px;
+  padding: 5px;
+
+  &.inverted {
+    transform: rotate(180deg);
+  }
+}
+
+.case-nums {
+  color: white;
+  background: #f45858;
+
+  & > div:nth-child(2) {
+    flex: 1;
+    margin-left: 50px;
+
+    span {
+      font-weight: bold;
+    }
+  }
+}
+
+.tag-list {
+  margin-top: 10px;
+
+  & > div {
+    display: flex;
+    align-items: center;
+
+    & > div:first-child {
+      flex-basis: 50%;
+    }
+
+    & > div:nth-child(2) {
+      flex-basis: 30%;
+      text-align: center;
+    }
+
+    & > div:last-child {
+      flex-basis: 30%;
+      text-align: center;
+    }
+  }
+
+  &-title {
+    background: #f45858;
+    color: white;
+    margin: -10px -10px 0;
+    padding: 8px;
+    border-radius: 8px 8px 0 0;
+
+    span {
+      color: yellow;
+      font-weight: bold;
+    }
+  }
+
+  &-head {
+    font-size: 0.9em;
+    color: gray;
+    padding: 5px 0;
+  }
+
+  &-row {
+    font-size: 0.9em;
+    height: 36px;
+    border-top: 1px solid lightgray;
+  }
+}
+</style>