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

package/src/components/page/outbound/handover/components/collapseItem.vue

@@ -0,0 +1,136 @@
+<!--
+  用于起始页显示数据的折叠框项
+  @author: 张文
+  @date: 2022-07-11
+-->
+<template>
+  <div
+    :style="{
+      padding: '5px 10px',
+      animationDelay: 50 * index + 'ms'
+    }"
+    class="lw-global-model-box lw-global-animation-out lw-global-collapse-box"
+  >
+
+    <van-collapse
+      v-model="collapseAction"
+      :border="false"
+      @change="collapseChange"
+    >
+      <van-collapse-item name="1">
+
+        <template #title>
+          <line-info
+            :item="item"
+            @dataClick="itemClick"
+          />
+        </template>
+
+        <div
+          class="lw-global-click-style"
+          @click="itemClick"
+        >
+          <store-info
+            v-for="(i,k) in this.openData"
+            :key="k"
+            :item="i"
+          />
+        </div>
+        <lw-pages
+          style="margin: 10px 0 0 0"
+          v-model="pageNum"
+          :page-total="pageTotal"
+          :page-size="pageSize"
+          mode="simple"
+          :scroll-top="false"
+          @change="pageChange"
+
+        />
+
+      </van-collapse-item>
+    </van-collapse>
+
+  </div>
+</template>
+
+<script>
+import storeInfo from './storeInfo.vue'
+import lineInfo from './lineInfo.vue'
+import {projectWmsOutboundGetValueGroupCustomerHandoverData} from "../../../../../api/outbound/handover";
+
+export default {
+  name: "collapseItem",
+  components:{
+    storeInfo,
+    lineInfo,
+  },
+  props:{
+    item:{
+      type: Object,
+      default: () => {}
+    },
+    index: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      collapseAction:[],
+
+      // 展开后的数据
+      openData: [],
+
+      // 当前页
+      pageNum: 1,
+      pageTotal: 0,
+      pageSize: 5
+    }
+  },
+  methods: {
+    // 获取客户数据
+    getCustomerData(){
+      projectWmsOutboundGetValueGroupCustomerHandoverData({
+        tabGroupKey: this.item.tabGroupKey,
+        valueGroupKey: this.item.valueGroupKey,
+        pageNum: this.pageNum,
+        pageSize: this.pageSize
+      }).then(res=>{
+        this.pageTotal = res.total || 0
+        this.openData = res.datas || []
+      })
+    },
+    collapseChange(active){
+      // 判断折叠框是否打开，并且没有数据
+      if (active.length && !this.openData.length) {
+        this.getCustomerData()
+      }
+    },
+
+    // 点击
+    itemClick(){
+      this.$emit('click', this.item)
+    },
+
+    // 页码改变
+    pageChange(){
+      this.getCustomerData()
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.title-box{
+
+  flex-wrap: wrap;
+
+  >.title-item{
+    min-width: 45%;
+    max-width: 100%;
+    flex-shrink: 0;
+    margin-bottom: 3px;
+  }
+}
+
+</style>

package/src/components/page/outbound/handover/components/customerAndLine.vue

@@ -0,0 +1,179 @@
+<!--
+  按客户交接和按线路交接组件
+  @author: 张文
+  @date: 2022-07-15
+-->
+<template>
+  <page-box
+    ref="pageBox"
+    :title="
+      handoverType==='100'?
+      $lwLanguage.get('wms_project.pda.components.page.outbound.handover.components.fsqdzbgc','出库交接 - 按线路') :
+      $lwLanguage.get('wms_project.pda.components.page.outbound.handover.components.kxlcxzvc','出库交接 - 按客户')
+    "
+    :line-data="lineData"
+    :box-list="boxList"
+    :show-bottom-bar="tabActive==='ing'"
+    @repeatScan="repeatScanBtn"
+    @handoverSubmit="handoverSubmit"
+    @inputFocus="box.focus=true"
+  >
+
+    <!-- tab -->
+    <div class="lw-global-tab-box">
+
+      <van-tabs
+        type="card"
+        animated
+        v-model="tabActive"
+      >
+
+        <!-- 正在交接 -->
+        <van-tab
+          name="ing"
+          :title="$lwLanguage.get('wms_project.pda.components.page.outbound.handover.components.suyfsbtp','正在交接')"
+        >
+
+          <!-- 扫描输入框 -->
+          <div
+            style="padding: 5px 10px"
+            class="lw-global-model-box"
+          >
+            <lw-input
+              :title="$lwLanguage.get('wms_project.pda.components.page.outbound.handover.components.tglogeud','捆包箱号')"
+              v-model="box.value"
+              :get-focus.sync="box.focus"
+              rule-prefix="handover/component/customerLine"
+              rule-key="box"
+              @confirm="boxConfirm"
+            />
+
+            <lw-title-value-cell
+              style="border-bottom: none"
+              :title="$lwLanguage.get('wms_project.pda.components.page.outbound.handover.components.fpkvqpsy','本次累计扫描箱数')"
+              :value="boxList.length || 0"
+              val-bold
+              val-red
+            />
+          </div>
+
+          <!-- 当前扫描数据 -->
+          <now-scan
+            v-if="Object.keys(nowScanData).length"
+            :class="[
+              showMove ? 'lw-global-animation-breath' : '',
+              'lw-global-border-2px'
+            ]"
+            :item="nowScanData"
+          />
+
+          <!-- 已扫箱 -->
+          <box-info
+            v-for="(i,k) in boxList"
+            :key="k"
+            v-bind="i"
+            :show-customer="handoverType==='100'"
+          />
+
+        </van-tab>
+
+        <!-- 店铺列表 -->
+        <van-tab
+          name="store"
+          :title="$lwLanguage.get('wms_project.pda.components.page.outbound.handover.components.lfwlsjwf','店铺列表')"
+        >
+
+          <customer-list
+            v-model="customer.pageNum"
+            :list="customer.list"
+            :page-total="customer.pageTotal"
+            @pageChange="getCustomerData"
+            @click="showBoxNoPopup"
+          />
+
+        </van-tab>
+      </van-tabs>
+
+    </div>
+
+    <!-- 查看线路交接箱信息弹框 -->
+    <lw-popup
+      :title="$lwLanguage.get('wms_project.pda.components.page.outbound.handover.components.gkseuvnz','捆包箱信息')"
+      v-model="boxDataPopup.show"
+      height="90%"
+      background="#f0f0f0"
+      @closed="boxDataPopup.showCom=false"
+    >
+
+      <div v-if="boxDataPopup.showCom" class="lw-global-tab-box">
+        <van-tabs
+          type="card"
+          animated
+          v-model="boxDataPopup.tabActive"
+        >
+
+          <!-- 未交接 -->
+          <van-tab
+            name="wait"
+            :title="$lwLanguage.get('wms_project.pda.components.page.outbound.handover.components.fxcfuewv','未交接')"
+          >
+            <box-num-list
+              :query="boxDataPopup.query"
+            />
+          </van-tab>
+
+          <!-- 已交接 -->
+          <van-tab
+            name="wait"
+            :title="$lwLanguage.get('wms_project.pda.components.page.outbound.handover.components.tnwlbqhx','已交接')"
+          >
+            <box-num-list
+              type="200"
+              :query="boxDataPopup.query"
+            />
+          </van-tab>
+        </van-tabs>
+      </div>
+
+    </lw-popup>
+
+  </page-box>
+</template>
+
+<script>
+
+import {action} from "../mixin";
+import pageBox from "./pageBox.vue";
+import nowScan from "./nowScan.vue";
+import customerList from "./customerList.vue";
+import boxNumList from "./boxNumList.vue";
+import boxInfo from "./boxInfo.vue";
+
+export default {
+  name: "lwOutboundHandoverLineActionPage",
+  mixins:[action],
+  components:{
+    pageBox,
+    nowScan,
+    customerList,
+    boxNumList,
+    boxInfo,
+  },
+  props:{
+    handoverType: String
+  },
+  data() {
+    return {
+
+
+
+    }
+  },
+  methods: {}
+}
+</script>
+
+
+<style scoped lang="less">
+
+</style>

package/src/components/page/outbound/handover/components/customerList.vue

@@ -0,0 +1,94 @@
+<!--
+  客户列表组件
+  @author: 张文
+  @date: 2022-07-14
+-->
+<template>
+  <div>
+    <div
+      :class="[
+        'lw-global-model-box',
+        'lw-global-animation-out',
+        isClick ? 'lw-global-click-style' :''
+      ]"
+      v-for="(i,k) in list"
+      :key="k"
+      :style="{animationDelay: 50 * k + 'ms'}"
+      @click="$emit('click', i)"
+    >
+      <store-info
+        :item="i"
+        :show-style="false"
+      />
+    </div>
+
+    <lw-pages
+      v-model="pageNum"
+      :page-size="pageSize"
+      :page-total="pageTotal"
+      @change="pageChange"
+    />
+
+    <lw-not-data v-if="!list.length"/>
+  </div>
+</template>
+
+<script>
+import storeInfo from './storeInfo.vue'
+
+export default {
+  name: "customerList",
+  components:{
+    storeInfo
+  },
+  props:{
+    list: {
+      type: Array,
+      default: () => []
+    },
+
+    // 总量
+    pageTotal: {
+      type: Number,
+      default: 0
+    },
+
+    // 总量
+    pageSize: {
+      type: Number,
+      default: 10
+    },
+
+    // 是否显示点击样式
+    isClick: Boolean
+  },
+  computed:{
+    pageNum:{
+      get(){
+        return this.value
+      },
+      set(v){
+        this.$emit('input', v)
+      }
+    }
+  },
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    // 分页切换
+    pageChange(){
+      this.$emit('pageChange', {
+        pageNum: this.pageNum,
+        pageSize: this.pageSize
+      })
+    },
+  }
+}
+</script>
+
+<style scoped lang="less">
+
+</style>

package/src/components/page/outbound/handover/components/lineInfo.vue

@@ -0,0 +1,129 @@
+<!--
+  线路信息
+  @author: 张文
+  @date: 2022-07-11
+-->
+<template>
+  <div
+    :class="[
+      'lw-global-model-box',
+      allClick ? 'lw-global-click-style' : ''
+    ]"
+    @click="allClick ? $emit('click') : ''"
+  >
+
+    <!-- 线路徽标及头部信息 -->
+    <div
+      style="flex-wrap: wrap"
+      class="lw-global-flex-between lw-global-row-start"
+    >
+
+      <lw-tag
+        v-if="showTag"
+        class="title-item"
+        round
+        plain
+      >{{ item.tabGroupKey }}</lw-tag>
+
+      <div
+        class="lw-global-title title-item"
+        v-for="(i,k) in item.labelList"
+        :key="k"
+      >{{ i }}</div>
+    </div>
+
+    <!-- 看板数据 -->
+    <div
+      :class="[
+        'lw-global-flex-around',
+        showTag ? 'lw-global-row' : 'lw-global-row-end'
+      ]"
+      @click.stop="$emit('dataClick')"
+    >
+
+      <div class="lw-global-data-look-item">
+        <div class="lw-global-value-bold">{{ item.customerCount }}</div>
+        <div class="lw-global-title">
+          {{ $lwLanguage.get('wms_project.pda.components.page.outbound.handover.components.vlkxzibb','店数') }}
+        </div>
+      </div>
+
+      <div class="lw-global-data-look-item">
+        <div class="lw-global-value-bold">{{ item.pickRate }}%</div>
+        <div class="lw-global-title">
+          {{ $lwLanguage.get('wms_project.pda.components.page.outbound.handover.components.utmulqar','拣选率') }}
+        </div>
+      </div>
+
+      <div class="lw-global-data-look-item">
+        <div class="lw-global-value-bold">{{ item.packRate }}%</div>
+        <div class="lw-global-title">
+          {{ $lwLanguage.get('wms_project.pda.components.page.outbound.handover.components.gwrdhtxo','捆包率') }}
+        </div>
+      </div>
+
+      <div class="lw-global-data-look-item">
+        <div class="lw-global-value-bold-red">{{ item.handoverRate }}%</div>
+        <div class="lw-global-title">
+          {{ $lwLanguage.get('wms_project.pda.components.page.outbound.handover.components.shnhppbz','交接率') }}
+        </div>
+      </div>
+
+    </div>
+
+    <!-- 捆包信息 -->
+    <div
+      v-if="showTag"
+      class="lw-global-row-end lw-global-flex-between"
+    >
+
+      <lw-title-value-cell
+        :title="$lwLanguage.get('wms_project.pda.components.page.outbound.handover.components.qyifxahv','已捆包箱')"
+        :value="item.boxCount"
+        val-bold
+        :is-row="false"
+      />
+
+      <lw-title-value-cell
+        :title="$lwLanguage.get('wms_project.pda.components.page.outbound.handover.components.yujvkjck','已交接箱')"
+        :value="item.handoverBoxCount"
+        val-bold
+        val-red
+        :is-row="false"
+      />
+
+    </div>
+
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "lineInfo",
+  props:{
+    item:{
+      type: Object,
+      default: () => {}
+    },
+    // 是否显示线路徽标和捆包数据
+    showTag: Boolean,
+
+    // 是否全部点击
+    allClick: Boolean
+  },
+  data() {
+    return {}
+  },
+  methods: {}
+}
+</script>
+
+<style scoped lang="less">
+.title-item{
+  min-width: 45%;
+  max-width: 100%;
+  flex-shrink: 0;
+  margin-bottom: 3px;
+}
+</style>

package/src/components/page/outbound/handover/components/lpnListItem.vue

@@ -0,0 +1,119 @@
+<!--
+  码托列表数据项
+  @author: 张文
+  @date: 2022-07-15
+-->
+<template>
+  <div style="padding: 0 10px" class="lw-global-model-box lw-global-collapse-box">
+    <van-collapse
+      v-model="activeCollapse"
+      :border="false"
+      @change="collapseChange"
+    >
+      <van-collapse-item name="1">
+
+        <template #title>
+
+          <lw-title-value-cell
+            style="padding: 5px 0"
+            :title="$lwLanguage.get('wms_project.pda.components.page.outbound.handover.components.ndlomjxm','托盘号')"
+            :value="item.lpn"
+            val-red
+            val-bold
+          />
+
+          <div class="lw-global-row-end lw-global-flex-around">
+
+            <div class="lw-global-data-look-item">
+
+              <div class="lw-global-value-bold">{{ item.boxCount || 0 }}</div>
+              <div class="lw-global-title">
+                {{ $lwLanguage.get('wms_project.pda.components.page.outbound.handover.components.wtrebvhe','箱数') }}
+              </div>
+
+            </div>
+
+            <div class="lw-global-data-look-item">
+
+              <div class="lw-global-value-bold">{{ item.handoverBoxCount || 0 }}</div>
+              <div class="lw-global-title">
+                {{ $lwLanguage.get('wms_project.pda.components.page.outbound.handover.components.uljypyzp','已交接') }}
+              </div>
+
+            </div>
+
+            <div class="lw-global-data-look-item">
+
+              <div class="lw-global-value-bold">{{ item.totalQty || 0 }}</div>
+              <div class="lw-global-title">
+                {{ $lwLanguage.get('wms_project.pda.components.page.outbound.handover.components.fjunmyio','商品量') }}
+              </div>
+
+            </div>
+
+          </div>
+
+        </template>
+
+        <box-info
+          v-for="(i,k) in boxList"
+          :key="k"
+          v-bind="i"
+        />
+      </van-collapse-item>
+    </van-collapse>
+  </div>
+</template>
+
+<script>
+import boxInfo from './boxInfo.vue'
+import {projectWmsOutboundGetValueGroupLpnDetailHandoverData} from "../../../../../api/outbound/handover/lpn";
+
+export default {
+  name: "lpnListItem",
+  components:{
+    boxInfo
+  },
+  props:{
+    routeQuery: {
+      type: Object,
+      default: () => {}
+    },
+    item: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      activeCollapse: [],
+
+      boxList:[]
+    }
+  },
+  methods: {
+    collapseChange(action){
+      if(action.length){
+        if (this.boxList.length) return
+
+        if (this.item.boxList && this.item.boxList.length){
+          this.boxList = this.item.boxList
+          return
+        }
+
+        projectWmsOutboundGetValueGroupLpnDetailHandoverData({
+          lpn: this.item.lpn,
+          ...this.routeQuery
+        }).then(res=>{
+          this.boxList = res.boxList
+        })
+      }
+
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+
+</style>

package/src/components/page/outbound/handover/components/nowScan.vue

@@ -0,0 +1,59 @@
+<!--
+  当前扫描数据
+  @author: 张文
+  @date: 2022-07-11
+-->
+<template>
+  <div class="lw-global-model-box">
+    <div class="lw-global-title lw-global-row-start">
+      {{ $lwLanguage.get('wms_project.pda.components.page.outbound.handover.components.ycucdcnj','当前扫描 ') }}
+    </div>
+
+    <lw-title-value-cell
+      :title="$lwLanguage.get('wms_project.pda.components.page.outbound.handover.components.zqfkydqr','捆包箱号')"
+      :value="item.boxNo"
+      val-bold
+    />
+
+    <lw-title-value-cell
+      :title="$lwLanguage.get('wms_project.pda.components.page.outbound.handover.components.wamcwlet','商品数')"
+      :value="item.qty"
+      val-bold
+    />
+
+    <store-info
+      style="margin-top: 5px"
+      :item="item"
+      :show-style="false"
+      :show-rate="false"
+    />
+
+  </div>
+</template>
+
+<script>
+import storeInfo from './storeInfo.vue'
+
+export default {
+  name: "nowScan",
+  components:{
+    storeInfo
+  },
+  props:{
+    item:{
+      type: Object,
+      default: ()=>{}
+    }
+  },
+  data() {
+    return {
+
+    }
+  },
+  methods: {}
+}
+</script>
+
+<style scoped lang="less">
+
+</style>