@logwire/logwire-wms-pda-ui 3.5.5 → 3.5.6

package/src/views/wms/page/outbound/pick/components/pickPathSearch.vue

@@ -0,0 +1,366 @@
+<!--
+  拣选路径规划查询
+  @author: 鲍珺
+  @date: 2024-09-11
+-->
+<template>
+    <div>
+        <div>
+            <lw-button mini round @click="pathBtnClick">
+            {{ $lwLanguage.get('wms_project.pda.components.path', '路径') }}
+            </lw-button>
+        </div>
+
+        <!-- 路径弹出框 -->
+        <lw-popup
+            :title="$lwLanguage.get('wms_project.pda.components.path','路径')"
+            :showKeyboardPlaceholder="false"
+            v-model="pathPopup.show"
+            @opened="pathPopupOpened"
+            @closed="pathPopupClosed"
+        >
+        <div class="lw-global-model-box lw-global-model-box-3px">
+            <lw-input
+            :title="$lwLanguage.get('wms_project.pda.components.curLoc','当前库位')"
+            v-model="pathPopup.value"
+            :show-bottom-border="false"
+            rule-key="locLoc"
+            :create-rule="$lwScanRule.create('拣选作业-库位查询-库位','LOCATION')"
+            @confirm="searchPath"
+            >
+                <template #button>
+                    <van-icon
+                    name="search"
+                    size="18px"
+                    @click="searchPath"
+                    />
+                </template>
+            </lw-input>
+        </div>
+
+        <div id="lw-path-container" :style="{ height: pathPopup.containerHeight + 'px' }">
+        </div>
+        </lw-popup>
+    </div>
+</template>
+
+<script>
+import Two from "two.js";
+import { ZUI } from "two.js/extras/jsm/zui.js";
+import {projectWmsOutboundPickQueryPath} from "./../../../../api/outbound/pick/common";
+
+export default {
+  name: "pickPathSearch",
+
+  props: {
+    pickData: null
+  },
+  data() {
+    return {
+      pathPopup: {
+        value: '',
+        focus: false,
+        show: false,
+        containerHeight: 0
+      },
+
+      two: null,
+      zui: null,
+      mouse: null,
+      touches: null,
+      distance: 0
+    }
+  },
+  watch: {
+    pickData(newData, oldData) {
+        const newLocCode = newData?.navigateData.startPointCode
+        if (newLocCode) {
+            const oldLocCode = oldData?.navigateData.startPointCode
+            if (newLocCode !== oldLocCode) {
+                this.resetTwo()
+                this.pathPopup.value = newLocCode
+            }
+        }
+    }
+  },
+  mounted() {
+    const viewH = document.documentElement.clientHeight
+    this.pathPopup.containerHeight = viewH * 0.6
+  },
+  created() {
+    if (this.pickData && this.pickData.navigateData) {
+        this.pathPopup.value = this.pickData.navigateData.startPointCode || ''
+    }
+  },
+  methods: {
+    pathPopupClosed() {
+
+    },
+    pathPopupOpened() {
+        if (!this.two && this.pathPopup.value) {
+            this.searchPath()
+        }
+    },
+    resetTwo() {
+        if (this.two) {
+            const domElement = this.two.renderer.domElement
+            domElement.removeEventListener('mousewheel', this.mousewheel, false)
+            domElement.removeEventListener('mousedown', this.mousewheel, false)
+            domElement.removeEventListener('touchstart', this.touchstart, false);
+            domElement.removeEventListener('touchmove', this.touchmove, false);
+            domElement.removeEventListener('touchend', this.touchend, false);
+            domElement.removeEventListener('touchcancel', this.touchend, false);
+            domElement.remove()
+            this.two = null
+
+            this.zui = null
+            this.mouse = null
+      }
+    },
+    // 拣选路径
+    async searchPath() {
+      if (!this.pathPopup.value) {
+        return
+      }
+      const pending = this.pickData.pendingPickLineList || []
+      if (pending.length <= 0) {
+        return
+      }
+      let targetLocCodes = [...new Set(pending.map(x => x.fromLocationCode))]
+      let param = {
+        pickId: this.pickData.pickId,
+        startLocCode: this.pathPopup.value,
+        targetLocCodes: targetLocCodes
+      }
+
+      const res = await projectWmsOutboundPickQueryPath(param)
+      this.resetTwo()
+      let params = {
+          type: Two.Types.canvas,
+          autostart: true,
+          fitted: true
+      };
+      let elem = document.getElementById('lw-path-container');
+      let two = new Two(params).appendTo(elem);
+      two.renderer.domElement.style.background = 'rgb(0, 191, 168)';
+      this.two = two
+
+      let mouse = new Two.Vector()
+      this.mouse = mouse
+
+      const zui = new ZUI(two.scene, elem)
+      zui.addLimits(0.06, 8);
+      this.zui = zui
+
+      const domElement = two.renderer.domElement;
+      domElement.addEventListener('mousewheel', this.mousewheel, false)
+      domElement.addEventListener('mousedown', this.mousedown, false)
+      domElement.addEventListener('touchstart', this.touchstart, false);
+      domElement.addEventListener('touchmove', this.touchmove, false);
+      domElement.addEventListener('touchend', this.touchend, false);
+      domElement.addEventListener('touchcancel', this.touchend, false);
+
+      let wRatio = two.width / res.width;
+      let hRatio = two.height / res.height;
+
+      let things = new Two.Group();
+      for (let i = 0; i < res.points.length; i++) {
+        let point = res.points[i];
+        let pointX = point.x * wRatio;
+        let pointY = point.y * hRatio;
+
+        let loc = new Two.Circle(pointX, pointY, 5);
+        things.add(loc)
+      }
+      for (let i = 0; i < res.lines.length; i++) {
+            let line = res.lines[i];
+            let lineStartX = line.startX * wRatio;
+            let lineStartY = line.startY * hRatio;
+            let lineEndX = line.endX * wRatio;
+            let lineEndY = line.endY * hRatio;
+
+            let points = [];
+            points.push(new Two.Anchor(lineStartX, lineStartY));
+            points.push(new Two.Anchor(lineEndX, lineEndY));
+            let path = new Two.Path(points);
+            path.noFill().linewidth = 10;
+            path.cap = path.join = 'round';
+            path.stroke = 'white';
+            things.add(path)
+      }
+      two.add(things);
+
+      if (res.passingPoints) {
+        let path = new Two.Group()
+        let lastPoint = null;
+        const styles = {
+            family: 'proxima-nova, sans-serif',
+            size: 15,
+            leading: 50,
+            weight: 900
+        };
+        let pointIdx = 0;
+        let sortedPendingPickLineList = []
+
+        for (let i = 0; i < res.passingPoints.length; i++) {
+          let passingPoint = res.passingPoints[i];
+          let passingPointX = passingPoint.x * wRatio;
+          let passingPointY = passingPoint.y * hRatio;
+
+          if (lastPoint) {
+              let makeLine = new Two.Line(lastPoint.x, lastPoint.y, passingPointX, passingPointY);
+              makeLine.noFill().linewidth = 3;
+              makeLine.stroke = 'red';
+              path.add(makeLine)
+          }
+
+          if ((lastPoint == null || lastPoint.remark !== passingPoint.remark) && passingPoint.id) {
+              let loc = new Two.Circle(passingPointX+5, passingPointY, 9);
+              loc.fill = 'rgb(255, 128, 0)'
+              path.add(loc)
+
+              let text = new Two.Text(pointIdx++ + '', passingPointX+5, passingPointY, styles);
+              text.fill = 'white'
+              path.add(text)
+
+            // 排序任务
+            let locCode = passingPoint.remark
+            for (let i=0; i<this.pickData.pendingPickLineList.length; i++) {
+                const line = this.pickData.pendingPickLineList[i]
+                if (line.fromLocationCode === locCode) {
+                    sortedPendingPickLineList.push(line)
+                }
+            }
+          }
+
+          lastPoint = {x: passingPointX, y: passingPointY, remark: passingPoint.remark};
+        }
+        two.add(path)
+        this.$emit('pickTaskLineSorted', sortedPendingPickLineList)
+      }
+    },
+   // 路径按钮点击
+   pathBtnClick() {
+      this.pathPopup.show = true
+      this.pathPopup.focus = true
+    },
+    mousewheel(e) {
+      let zui = this.zui
+      if (zui) {
+        e.stopPropagation()
+        e.preventDefault()
+
+        let dy = (e.wheelDeltaY || -e.deltaY) / 1000
+        zui.zoomBy(dy, e.clientX, e.clientY)
+      }
+    },
+    mousedown(e) {
+      let mouse = this.mouse
+      if (mouse) {
+        mouse.x = e.clientX;
+        mouse.y = e.clientY;
+        window.addEventListener('mousemove', this.mousemove, false);
+        window.addEventListener('mouseup', this.mouseup, false);
+      }
+    },
+    mousemove(e) {
+      let mouse = this.mouse
+      let zui = this.zui
+      if (mouse && zui) {
+        let dx = e.clientX - mouse.x;
+        let dy = e.clientY - mouse.y;
+        zui.translateSurface(dx, dy);
+        mouse.set(e.clientX, e.clientY);
+      }
+    },
+    mouseup() {
+      window.removeEventListener('mousemove', this.mousemove, false);
+      window.removeEventListener('mouseup', this.mouseup, false);
+    },
+    touchstart(e) {
+      switch (e.touches.length) {
+        case 2:
+          this.pinchstart(e);
+          break;
+        case 1:
+          this.panstart(e)
+          break;
+      }
+    },
+    touchmove(e) {
+      switch (e.touches.length) {
+        case 2:
+          this.pinchmove(e);
+          break;
+        case 1:
+          this.panmove(e)
+          break;
+      }
+    },
+    touchend(e) {
+      let mouse = this.mouse
+      if (mouse) {
+        this.touches = {};
+        let touch = e.touches[ 0 ];
+        if (touch) {  // Pass through for panning after pinching
+          mouse.x = touch.clientX;
+          mouse.y = touch.clientY;
+        }
+      }
+    },
+    panstart(e) {
+      let mouse = this.mouse
+      if(mouse) {
+        let touch = e.touches[ 0 ];
+        mouse.x = touch.clientX;
+        mouse.y = touch.clientY;
+      }
+    },
+    panmove(e) {
+      let mouse = this.mouse
+      let zui = this.zui
+      if (mouse && zui) {
+        let touch = e.touches[ 0 ];
+        let dx = touch.clientX - mouse.x;
+        let dy = touch.clientY - mouse.y;
+        zui.translateSurface(dx, dy);
+        mouse.set(touch.clientX, touch.clientY);
+      }
+    },
+    pinchstart(e) {
+      let mouse = this.mouse
+      if (mouse) {
+        for (let i = 0; i < e.touches.length; i++) {
+          let touch = e.touches[ i ];
+          this.touches[ touch.identifier ] = touch;
+        }
+        let a = this.touches[ 0 ];
+        let b = this.touches[ 1 ];
+        let dx = b.clientX - a.clientX;
+        let dy = b.clientY - a.clientY;
+        this.distance = Math.sqrt(dx * dx + dy * dy);
+        mouse.x = dx / 2 + a.clientX;
+        mouse.y = dy / 2 + a.clientY;
+      }
+    },
+    pinchmove(e) {
+      let mouse = this.mouse
+      let zui = this.zui
+      if(mouse && zui) {
+        for (let i = 0; i < e.touches.length; i++) {
+          let touch = e.touches[ i ];
+          this.touches[ touch.identifier ] = touch;
+        }
+        let a = this.touches[ 0 ];
+        let b = this.touches[ 1 ];
+        let dx = b.clientX - a.clientX;
+        let dy = b.clientY - a.clientY;
+        let d = Math.sqrt(dx * dx + dy * dy);
+        let delta = d - this.distance;
+        zui.zoomBy(delta / 250, mouse.x, mouse.y);
+        this.distance = d;
+      }
+    }
+  }
+}
+</script>

package/src/views/wms/page/outbound/pick/components/skuLocationInfo/index.vue

@@ -103,6 +103,9 @@
       <lw-data-look-item
         :title="$lwLanguage.get('wms_project.pda.components.page.outbound.pick.components.skuLocationInfo.ghoxuwxz','待拣量')"
         :value="item.waitPickQtyLabel"
+        subject-color
+        val-size="1.28rem"
+        title-color="#D50000"
       />
 
     </lw-data-look-bg>

package/src/views/wms/page/outbound/pick/components/taskInfo.vue

@@ -48,6 +48,8 @@
           </lw-tag>
         </div>
 
+        <slot name="task-header"></slot>
+
       </div>
     </div>
     <lw-data-look-bg

package/src/views/wms/page/outbound/pick/container/index.vue

@@ -17,7 +17,11 @@
     :get-data="getData"
     @pickConfirm="pickConfirm"
   >
-
+  <template v-slot:task-header v-if="pickPathSort">
+    <pick-path-search :pickData="pickData" 
+      @pickTaskLineSorted="pickTaskLineSorted"
+      style="display: flex; flex:1; margin-bottom: 18px; justify-content: end;"/>
+  </template>
     <!-- 拣选托盘 -->
     <div
       style="margin-bottom: 10px;"
@@ -219,6 +223,7 @@
 </template>
 
 <script>
+import pickPathSearch from '../components/pickPathSearch.vue'
 import dataLookAndChange from './../components/dataLookAndChange/index.vue'
 import containerLine from "../components/containerLine.vue";
 import {all} from "../mixin/all";
@@ -233,6 +238,7 @@ export default {
   components: {
     dataLookAndChange,
     containerLine,
+    pickPathSearch,
   },
   mixins: [all],
   data() {
@@ -271,7 +277,12 @@ export default {
     this.getData()
   },
   methods: {
-
+    // 拣选任务行排序完成
+    pickTaskLineSorted(sortedList) {
+      if (this.pickData.pendingPickLineList) {
+        this.pickData.pendingPickLineList = sortedList
+      }
+    },
     // 获取数据
     getData() {
       this.mixinAllCheckTaskIndex(this.pickData.pendingPickLineList?.length || 0)

package/src/views/wms/page/outbound/pick/mixin/all.js

@@ -61,6 +61,10 @@ export const all = {
     }
   },
   computed: {
+    // 是否开启拣选路径规划
+    pickPathSort() {
+      return this.$lwWarehouseConfig.get('systemConfig.OUTBOUND_PICK_WORK_PATH_SORT') === 'true'
+    },
     // 是否需要确认库位
     mixinNeedInputLoc() {
       return this.$lwWarehouseConfig.get('systemConfig.OUTBOUND_PICK_WORK_NEED_SCAN_LOCATION') === 'true'

package/src/views/wms/page/outbound/pick/mixin/aloneAndNotAlone.js

@@ -42,6 +42,9 @@ export const aloneAndNotAlone = {
         // 后端返回的全部数据
         data: {},
       },
+
+      // 记录使用过的拣选容器数据
+      usePickContainer: []
     }
   },
   computed: {
@@ -260,17 +263,43 @@ export const aloneAndNotAlone = {
         lpn: split.lpn,
         needDirectMove: this.$lwWarehouseConfig.get('systemConfig.OUTBOUND_SPLIT_DOWN_NEED_DIRECT_MOVE') === 'true',
         ...data,
-      }).then(()=>{
+      }).then(() => {
         this.$lwToast.success(
-            this.$lwLanguage.get('wms_project.pda.components.page.outbound.pick.mixin.aloneAndNotAlone.success','操作成功')
+          this.$lwLanguage.get('wms_project.pda.components.page.outbound.pick.mixin.aloneAndNotAlone.success', '操作成功')
         )
         this.splitPopup.show = false
       })
     },
+
+    // 页面返回
+    mixinAloneBackPage() {
+      const back = JSON.parse(this.$route.query.backPageInfo || '{}')
+      if (Object.keys(back).length) {
+        this.$router.replace({
+          path: back.path,
+          query: {
+            ...back.query,
+            container: this.usePickContainer.join(',')
+          }
+        })
+      } else {
+        history.go(-1)
+      }
+
+    },
     // 拆板下架弹出框关闭
     mixinAloneSplitOff() {
       // 判断当前拣选任务是否完成
-      if (this.splitPopup.data.pickOrderFinish) {
+      const {pickOrderFinish, pickTaskData} = this.splitPopup.data
+      if (pickOrderFinish || !pickTaskData.pendingPickLineList.length) {
+
+        // 判断是否有返回页面，目前（2024-9-13，屈臣氏 #1785）用于返回跳转
+        if (this.$route.query.backPageInfo) {
+          this.mixinAloneBackPage()
+          return
+        }
+
+
         this.$refs.dataLookAndChange.openPickSuccessPopup(this.splitPopup.data)
         return
       }
@@ -281,6 +310,15 @@ export const aloneAndNotAlone = {
     async mixinAlonePickSuccessCheck(res, pickContainer) {
       pickContainer ? this.container.value = pickContainer : ''
 
+      // 判断是否有返回页面，目前（2024-9-13，屈臣氏 #1785）用于返回跳转
+      if (this.$route.query.backPageInfo) {
+        // 如果存在就记录当前拣选的托盘号，方便业务需要
+        if (!this.usePickContainer.some(item => item === this.container.value)) {
+          this.usePickContainer.push(this.container.value)
+        }
+      }
+
+
       // 判断是否需要打印箱票
       try {
         await this.$refs.dataLookAndChange.print(res)
@@ -297,7 +335,6 @@ export const aloneAndNotAlone = {
       // 是否需要拆板下架
       if (res.needSplitDown) {
         this.splitPopup.show = true
-        this.splitPopup.container.focus = true
         return
       }
 
@@ -320,7 +357,7 @@ export const aloneAndNotAlone = {
     mixinAloneCheckPickQtyByQty(nowPickQty) {
       return this.mixinAloneCheckPickQty(
         Number(nowPickQty || 0),
-        this.$refs.qty.getQty()
+        this.$refs.qty?.getQty() || 0
       )
     },
     // 拣选数量校验是否超过待拣量 - 序列号