@logwire/logwire-wms-pda-ui 1.1.15

package/src/components/page/inbound/components/AsnInfo.vue

@@ -0,0 +1,178 @@
+<template>
+  <div>
+    <!-- 收货单信息 -->
+    <div class="asn-info" :class="{shrink: isShrink}">
+      <div>
+        <div>到货通知单</div>
+        <div><b>{{ asn.asnNo }}</b></div>
+        <div>
+          <lw-tag v-if="!isNaN(asn.delayTime) && asn.delayTime > 0" type="danger" plain>延迟</lw-tag>
+          <lw-tag v-if="asn.isEmergency" type="danger" plain>BO</lw-tag>
+          <van-icon v-if="shrinkable" class="btn-shrink" :class="{inverted: isShrink}" name="arrow-up" @click.stop="isShrink = !isShrink"/>
+        </div>
+      </div>
+      <template v-for="i in fields">
+        <div v-if="asn[i.field]" :key="i.field">
+          <div>{{ i.label }}</div>
+          <div :style="i.style">
+            <div v-for="(line, idx) in (asn[i.field].split('\n'))" :key="idx">
+              {{ line }}
+            </div>
+          </div>
+        </div>
+      </template>
+    </div>
+    <!-- 收货单数量 -->
+    <div class="task-board-nums" :class="{'bottom-radius': radius}">
+      <div>
+        <div>{{ asn.qty }}</div>
+        <div>计划量</div>
+      </div>
+      <div>
+        <div>{{ asn.receiveQty }}</div>
+        <div>已收量</div>
+      </div>
+      <div>
+        <div>{{ asn.pendingQty }}</div>
+        <div>待收量</div>
+      </div>
+      <div>
+        <div>{{ asn.arrivalQty }}</div>
+        <div>到货量</div>
+      </div>
+      <div class="lw-global-sv"></div>
+      <div class="count-task-board-yellow">
+        <div>{{ asn.qualityLossQty }}</div>
+        <div>异常量</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AsnInfo',
+  props: {
+    data: Object,
+    shrinkable: {
+      type: Boolean,
+      default: false
+    },
+    radius: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  computed: {
+    asn () {
+      const data = this.data
+      if (data) {
+        if (data.ownerCode) {
+          data.owner = data.ownerCode + ' - ' + data.ownerName
+        }
+        if (data.supplierCode) {
+          data.supplier = data.supplierCode + ' - ' + data.supplierName
+          if (data.supplierAddress) {
+            data.supplier += ('\n' + data.supplierAddress)
+          }
+        }
+        if (data.carrierCode) {
+          data.carrier = data.carrierCode + ' - ' + data.carrierName
+        }
+      }
+      data.pendingQty = data.qty - data.cancelQty - data.receiveQty - data.qualityLossQty
+      return data
+    }
+  },
+  data () {
+    return {
+      isShrink: false,
+      fields: [
+        { field: 'extNo', label: '外部单号' },
+        { field: 'type', label: '订单类型' },
+        { field: 'planNo', label: '入库计划单' },
+        { field: 'allocationNo', label: '调拨单' },
+        { field: 'purchaseNo', label: '采购单' },
+        { field: 'owner', label: '货主' },
+        { field: 'supplier', label: '供应商' },
+        { field: 'carrier', label: '承运商' },
+        { field: 'carrierPlateNum', label: '车牌号' },
+        { field: 'planArrivalTime', label: '计划时间' },
+        { field: 'estArrivalTime', label: '预约时间' },
+        { field: 'estDockName', label: '预约月台' },
+        { field: 'abnormalRate', label: '异常率', style: { color: 'red' } },
+      ]
+    }
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.btn-shrink {
+  padding: 5px;
+
+  &.inverted {
+    transform: rotate(180deg);
+  }
+}
+
+.asn-info {
+  line-height: 1.5em;
+  font-size: 0.9em;
+  overflow: hidden;
+
+  &.shrink {
+    max-height: 114px;
+  }
+
+  & > div {
+    display: flex;
+    align-items: center;
+
+    & > div:nth-child(1) {
+      color: gray;
+      flex-basis: 22%;
+      margin-right: 10px;
+      text-align: right;
+
+      &:after {
+        content: ':';
+      }
+    }
+
+    & > div:nth-child(2) {
+      flex-grow: 1;
+    }
+  }
+}
+
+.task-board-nums {
+  display: flex;
+  justify-content: space-between;
+  margin: 10px -10px 0;
+  padding: 15px;
+  background: #0f90dd;
+  color: white;
+  text-align: center;
+  font-size: 0.9em;
+
+  &.bottom-radius {
+    margin-bottom: -10px;
+    border-radius: 0 0 8px 8px;
+  }
+
+  & > div {
+    &:last-child {
+      color: yellow;
+    }
+
+    & > div:first-child {
+      font-size: 1.2em;
+    }
+
+    & > div:last-child {
+      margin-top: 5px;
+    }
+  }
+}
+</style>

package/src/components/page/inbound/components/AsnSkuInfo.vue

@@ -0,0 +1,46 @@
+<template>
+  <div v-if="data && data.sku" class="sku-info">
+    <div>
+      <div style="color: red; font-size: 1.1em;"><b>{{data.sku.code}}</b></div>
+      <div>
+        <lw-tag plain color="red" v-if="data.sku.new">新品</lw-tag>
+      </div>
+    </div>
+    <div>
+      <div>{{data.sku.name}}</div>
+    </div>
+    <div>
+      <div>异常率 <b style="color: red; font-size: 1.1em;">{{data.sku.abnormalRate}}</b>%</div>
+      <div>
+        <lw-tag v-if="['100','200'].includes(data.sku.qualityType)" plain color="red">全检 / 抽检</lw-tag>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AsnSkuInfo',
+  props: {
+    data: Object,
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.sku-info {
+  margin: 10px 0 0;
+  font-size: 0.9em;
+  line-height: 1.5em;
+
+  & > div {
+    display: flex;
+    align-items: center;
+
+    & > div:first-child {
+      flex-grow: 1;
+      color: gray;
+    }
+  }
+}
+</style>

package/src/components/page/inbound/components/QualityCard.vue

@@ -0,0 +1,231 @@
+<template>
+  <div v-if="data">
+    <!-- 顶栏 -->
+    <div class="lw-global-props">
+      <div>
+        <div>品检卡</div>
+        <div>{{data.code}}</div>
+        <div>
+          <van-icon v-if="shrinkable" class="btn-shrink" :class="{inverted: isShrink}" name="arrow-up" @click.stop="isShrink = !isShrink"/>
+        </div>
+      </div>
+    </div>
+    <!-- 内容 -->
+    <div :class="{'content-shrink': isShrink}">
+      <div class="lw-global-sh"></div>
+      <div class="lw-global-props">
+        <div>
+          <div>供应商</div>
+          <div>{{data.supplierName}}</div>
+        </div>
+      </div>
+      <div style="padding: 10px 0;">
+        <lw-tag plain>大件</lw-tag>
+        <lw-tag plain>大件</lw-tag>
+        <lw-tag plain>大件</lw-tag>
+        <lw-tag plain>大件</lw-tag>
+        <lw-tag plain>大件</lw-tag>
+      </div>
+      <div class="quality-des" @click="showOverlay">
+        <div>
+          <div class="quality-des-title">正面</div>
+          <div class="quality-des-content img">
+            <lw-img-look v-if="data.frontImage" :img-list="[data.frontImage]" justify-content="center"/>
+          </div>
+        </div>
+        <div>
+          <div class="quality-des-title">背面</div>
+          <div class="quality-des-content img">
+            <lw-img-look v-if="data.backImage" :img-list="[data.backImage]" justify-content="center"/>
+          </div>
+        </div>
+        <div>
+          <div class="quality-des-title">识别要点</div>
+          <div class="quality-des-content">{{data.frontDescribe}}</div>
+        </div>
+        <div>
+          <div class="quality-des-title">识别要点</div>
+          <div class="quality-des-content">{{data.backDescribe}}</div>
+        </div>
+        <div>
+          <div class="quality-des-title">特殊</div>
+          <div class="quality-des-content img">
+            <lw-img-look v-if="data.markingImage" :img-list="[data.markingImage]" justify-content="center"/>
+          </div>
+        </div>
+        <div>
+          <div class="quality-des-title">过往破损部位</div>
+          <div class="quality-des-content img">
+            <lw-img-look v-if="data.beforeDamagedImage" :img-list="[data.beforeDamagedImage]" justify-content="center"/>
+          </div>
+        </div>
+        <div>
+          <div class="quality-des-title">识别要点</div>
+          <div class="quality-des-content">{{data.markingDescribe}}</div>
+        </div>
+        <div>
+          <div class="quality-des-title">识别要点</div>
+          <div class="quality-des-content">{{data.beforeDamagedDescribe}}</div>
+        </div>
+      </div>
+    </div>
+    <van-overlay v-if="overlay" :show="true">
+      <div class="quality-overlay">
+        <div class="quality-overlay-close" @click="overlay = null">
+          <van-icon name="cross" size="30px" />
+        </div>
+        <div class="quality-overlay-img">
+          <img :src="overlay.image" alt="">
+        </div>
+        <div class="quality-overlay-desc">
+          <div class="quality-overlay-title">{{overlay.title}}</div>
+          <div class="quality-overlay-content" v-html="overlay.desc"></div>
+        </div>
+      </div>
+    </van-overlay>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'QualityCard',
+  props: {
+    data: Object,
+    shrinkable: {
+      type: Boolean,
+      default: true
+    },
+  },
+  data () {
+    return {
+      isShrink: true,
+      overlay: null,
+    }
+  },
+  methods: {
+    showOverlay (e) {
+      if (e.target.tagName === 'IMG') {
+        const image = e.target.src
+        const imgDiv = e.target.closest('.quality-des > div')
+        if (imgDiv) {
+          const desDiv = imgDiv.nextElementSibling.nextElementSibling
+          const overlay = {image}
+          if (desDiv) {
+            const destDiv = desDiv.querySelector('.quality-des-title')
+            if (destDiv) {
+              overlay.title = destDiv.textContent
+            }
+            const descDiv = desDiv.querySelector('.quality-des-content')
+            if (descDiv) {
+              overlay.desc = descDiv.innerHTML
+            }
+          }
+          if (!overlay.title) {
+            overlay.title = '图片'
+          }
+          if (!overlay.desc) {
+            overlay.desc = ''
+          }
+          this.overlay = overlay
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.lw-global-sh {
+  margin: 10px 0;
+}
+.btn-shrink {
+  padding: 5px;
+
+  &.inverted {
+    transform: rotate(180deg);
+  }
+}
+
+.content-shrink {
+  display: none;
+}
+
+.quality-des {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+
+  img {
+    max-width: 100%;
+  }
+
+  &-title {
+    height: 30px;
+    line-height: 30px;
+    background: #0f90dd;
+    color: white;
+    text-align: center;
+  }
+
+  &-content {
+    padding: 10px;
+    font-size: 0.9em;
+    &.img {
+      min-height: 50px;
+      text-align: center;
+    }
+  }
+
+  & > div {
+    border: 1px solid lightgray;
+  }
+}
+.quality-overlay {
+  height: 100%;
+  display: flex;
+  position: relative;
+  background: #3b3a3a;
+  flex-direction: column;
+
+  &-close {
+    position: absolute;
+    top: 60px;
+    right: 10px;
+    background: lightgray;
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    z-index: 9;
+  }
+
+  &-img {
+    flex: 1 0 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    img {
+      width: 100%;
+      min-height: 20%;
+      max-height: 60%;
+    }
+  }
+
+  &-desc {
+    flex-basis: 36%;
+  }
+
+  &-title {
+    height: 40px;
+    line-height: 40px;
+    background: #0f90dd;
+    color: white;
+    text-align: center;
+  }
+
+  &-content {
+    color: white;
+    padding: 10px;
+    line-height: 2em;
+  }
+}
+</style>

package/src/components/page/inbound/components/QualityTaskInfo.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="quality-info" v-if="data">
+    <div class="lw-global-flex-between">
+      <div style="color: red; font-size: 1.1em;"><b>{{data.sku.code}}</b></div>
+      <div>
+        <lw-tag plain>{{$lwDict.getDictLabel('size_type_choice', data.sku.sizeType)}}</lw-tag>
+        <lw-tag plain v-if="data.sku.isLeftRight">左右件</lw-tag>
+        <lw-tag plain color="red">{{$lwDict.getDictLabel('WmsSkuUrgency', data.sku.skuUrgency)}}</lw-tag>
+      </div>
+    </div>
+    <div class="lw-global-sh"></div>
+    <div>{{data.sku.name}}</div>
+    <div class="lw-global-props label-vertical-align">
+      <div>
+        <div>货主</div>
+        <div>{{data.sku.ownerCode}} - {{data.sku.ownerName}}</div>
+      </div>
+      <div>
+        <div>供应商</div>
+        <div>{{data.asn.supplierCode}} - {{data.asn.supplierName}}</div>
+      </div>
+      <div>
+        <div>异常率</div>
+        <div>{{data.asn.abnormalRate || 0}}%</div>
+        <div>
+          <lw-tag plain color="red">{{$lwDict.getDictLabel('quality_type_choice', data.sku.qualityType)}}</lw-tag>
+        </div>
+      </div>
+    </div>
+    <!-- 数字板 -->
+    <div class="lw-global-board-nums">
+      <div>
+        <div>{{data.canQualityQty}}</div>
+        <div>待检量</div>
+      </div>
+      <div>
+        <div>{{data.qualityQty}}</div>
+        <div>已检量</div>
+      </div>
+      <div>
+        <div>{{data.receiveQty}}</div>
+        <div>正品量</div>
+      </div>
+      <div style="color: yellow;">
+        <div>{{data.qualityLossQty}}</div>
+        <div>异常量</div>
+      </div>
+      <div class="lw-global-sv"></div>
+      <div>
+        <div>{{parseInt(data.startTime / 60)}}</div>
+        <div>耗时/分钟</div>
+      </div>
+    </div>
+    <div class="lw-global-props label-vertical-align" style="margin-top: 10px;">
+      <div>
+        <div>通知单号</div>
+        <div>{{data.asn.asnNo}}</div>
+      </div>
+      <div>
+        <div>托盘</div>
+        <div>{{data.lpn}}</div>
+      </div>
+      <div>
+        <div>库位</div>
+        <div>{{data.locationCode}}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'QualityTaskInfo',
+  props: {
+    data: Object,
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.quality-info {
+  font-size: 0.9em;
+  line-height: 1.6em;
+  color: gray;
+}
+.lw-global-sh {
+  margin: 5px 0;
+}
+</style>

package/src/components/page/inbound/components/SnsList.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="lw-global-page-box">
+    <div class="lw-global-model-box">
+      <lw-input title="序列号条码" required v-model="filterSn"/>
+      <div class="tag-list dialog">
+        <div class="tag-list-head">
+          <div>SN</div>
+          <div>数量</div>
+          <div>操作</div>
+        </div>
+        <div class="tag-list-row" v-for="t in filterSns" :key="t.sn">
+          <div>{{ t.sn }}</div>
+          <div>{{ t.qty }}</div>
+          <div>
+            <lw-button mini @click="$emit('remove', t)">剔除</lw-button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SnsList',
+  props: {
+    sns: Array,
+  },
+  data () {
+    return {
+      filterSn: '',
+    }
+  },
+  computed: {
+    filterSns () {
+      if (this.filterSn) {
+        return this.sns.filter(i => i.sn.startsWith(this.filterSn))
+      } else {
+        return this.sns
+      }
+    },
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.tag-list {
+  margin-top: 10px;
+
+  &.dialog {
+    max-height: 50vh;
+    overflow-y: auto;
+  }
+
+  & > div {
+    display: flex;
+    align-items: center;
+
+    & > div:first-child {
+      flex-basis: 40%;
+    }
+
+    & > div:nth-child(2) {
+      flex-basis: 20%;
+      text-align: center;
+    }
+
+    & > div:last-child {
+      flex-basis: 40%;
+      text-align: center;
+    }
+  }
+
+  &-title {
+    background: #0f90dd;
+    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>

package/src/components/page/inbound/index.js

@@ -0,0 +1,11 @@
+import LwInboundReceiveIndexPage from './receive/index'
+import LwInboundReceiveHomePage from './receive/home'
+import receiveSkuPages from './receive/receive-sku'
+import skuQualityPages from './receive/quality'
+
+export default [
+  LwInboundReceiveIndexPage,
+  LwInboundReceiveHomePage,
+  ...receiveSkuPages,
+  ...skuQualityPages,
+]

package/src/components/page/inbound/receive/home/index.js

@@ -0,0 +1,5 @@
+import lwInboundReceiveHomePage from './index.vue'
+
+lwInboundReceiveHomePage.install = Vue => Vue.component(lwInboundReceiveHomePage.name, lwInboundReceiveHomePage)
+
+export default lwInboundReceiveHomePage