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

package/src/components/page/outbound/bale/components/planCollapse/index.vue

@@ -1,352 +1,396 @@
-<!--
-  捆包进度 - 折叠框组件
-  @author: 张文
-  @date: 2022-06-29
--->
-<template>
-  <div
-    v-if="item"
-    class="lw-global-animation-out lw-global-model-box lw-global-collapse-box"
-    :style="{animationDelay: index * 50 + 'ms'}"
-  >
-    <van-collapse
-      v-model="activeCollapse"
-      :border="false"
-    >
-      <van-collapse-item name="1">
-
-        <template #title>
-
-          <div
-            style="flex-wrap: wrap"
-            class="lw-global-flex-between lw-global-row-start"
-          >
-            <div
-              class="title-item"
-              v-for="(i,k) in item.title"
-              :key="k"
-            >{{ i }}
-            </div>
-          </div>
-
-          <div
-            style="margin-top: 10px"
-            class="lw-global-flex-around"
-          >
-
-            <div class="lw-global-data-look-item">
-              <div class="lw-global-value-bold">1</div>
-              <div class="lw-global-title">
-                {{ $lwLanguage.get('', '店数') }}
-              </div>
-            </div>
-
-            <div class="lw-global-data-look-item">
-              <div class="lw-global-value-bold">1</div>
-              <div class="lw-global-title">
-                {{ $lwLanguage.get('', '拣选率') }}
-              </div>
-            </div>
-
-            <div class="lw-global-data-look-item">
-              <div class="lw-global-value-bold">1</div>
-              <div class="lw-global-title">
-                {{ $lwLanguage.get('', '捆包率') }}
-              </div>
-            </div>
-
-            <div class="lw-global-data-look-item">
-              <div class="lw-global-value-bold">1</div>
-              <div class="lw-global-title">
-                {{ $lwLanguage.get('', '交接率') }}
-              </div>
-            </div>
-
-          </div>
-
-        </template>
-
-        <div
-          class="store-item"
-          v-for="(i,k) in item.store"
-          :key="k"
-        >
-
-          <div class="lw-global-flex-between lw-global-row-start">
-            <div class="lw-global-value-bold">MD001</div>
-            <div class="lw-global-value-bold">门店001</div>
-          </div>
-
-          <div class="lw-global-flex-between lw-global-row">
-
-            <lw-title-value-cell
-              class="lw-global-click-style"
-              :title="$lwLanguage.get('','拣选率')"
-              value="80%"
-              val-red
-              val-bold
-              :is-row="false"
-              @click="pickRate"
-            />
-
-            <lw-title-value-cell
-              class="lw-global-click-style"
-              :title="$lwLanguage.get('','捆包率')"
-              value="80%"
-              val-red
-              val-bold
-              :is-row="false"
-              @click="baleRate"
-            />
-
-          </div>
-
-          <div style="margin-top: 8px" class="lw-global-flex-start">
-
-            <div
-              style="flex-shrink: 0"
-              class="lw-global-title"
-            >{{ $lwLanguage.get('','捆包容器') }}</div>
-
-            <div class="lw-global-value-bold">
-
-              <span
-                class="lw-global-click-style container"
-                v-for="(item,key) in i.pickContainer"
-                :key="key"
-                @click="containerClick(item)"
-              >{{ item }}</span>
-
-            </div>
-
-          </div>
-
-
-
-        </div>
-
-      </van-collapse-item>
-    </van-collapse>
-
-    <!-- 拣选率弹框 -->
-    <lw-popup
-      title="KH001 - 客户001"
-      v-model="pickRatePopupShow"
-    >
-
-      <div
-        style="padding: 5px 0 "
-        class="lw-global-flex-between lw-global-row"
-      >
-
-        <div class="lw-global-title">
-          {{ $lwLanguage.get('','商品列表') }}
-        </div>
-
-        <div class="lw-global-value-bold-red">
-          3
-          {{ $lwLanguage.get('','行') }}
-        </div>
-
-      </div>
-
-      <lw-sku-info-module
-        class="lw-global-flex-center"
-        v-for="(i,k) in skuList"
-        :key="k"
-        :sku-name="i.skuName"
-        :sku-code="i.skuCode"
-        is-row
-      >
-
-        <div class="lw-global-flex-center" style="flex-direction: column">
-          <div>
-
-            <span class="lw-global-value-bold-red">10</span>
-            <span class="lw-global-value-bold"> / 10</span>
-
-          </div>
-          <lw-tag
-            round
-            plain
-          >已发放</lw-tag>
-        </div>
-
-      </lw-sku-info-module>
-
-    </lw-popup>
-
-    <!-- 捆包率弹框 -->
-    <lw-popup
-      title="KH001 - 客户001"
-      v-model="baleRatePopupShow"
-    >
-
-      <div
-        style="padding: 5px 0 "
-        class="lw-global-flex-between lw-global-row"
-      >
-
-        <div class="lw-global-title">
-          {{ $lwLanguage.get('','拣选容器列表') }}
-        </div>
-
-        <div class="lw-global-value-bold-red">
-          3
-          {{ $lwLanguage.get('','行') }}
-        </div>
-
-      </div>
-
-      <div
-        class="lw-global-flex-between lw-global-click-style lw-global-row"
-        v-for="(i,k) in baleList"
-        :key="k"
-        @click="containerClick(i)"
-      >
-
-        <div
-          style="width: 45%"
-          class="lw-global-value-bold"
-        >RQ001</div>
-
-        <div
-          style="flex-shrink: 0"
-          class="lw-global-value-bold-red"
-        >10</div>
-
-        <lw-tag
-          style="flex-shrink: 0"
-          round
-          plain
-        >已集合</lw-tag>
-
-      </div>
-
-    </lw-popup>
-
-    <!-- 容器弹框 -->
-    <lw-popup
-      :title="containerPopup.title"
-      v-model="containerPopup.show"
-    >
-
-      <div
-        style="padding: 5px 0 "
-        class="lw-global-flex-between lw-global-row"
-      >
-
-        <div class="lw-global-title">
-          {{ $lwLanguage.get('','商品列表') }}
-        </div>
-
-        <div class="lw-global-value-bold-red">
-          3
-          {{ $lwLanguage.get('','行') }}
-        </div>
-
-      </div>
-
-      <lw-sku-info-module
-        v-for="(i,k) in skuList"
-        :key="k"
-        :sku-name="i.skuName"
-        :sku-code="i.skuCode"
-        :qty="9"
-        is-row
-      />
-    </lw-popup>
-  </div>
-</template>
-
-<script>
-
-export default {
-  name: "planCollapse",
-  props: {
-    // 数据
-    item: Object,
-
-    // 索引
-    index: {
-      type: Number,
-      default: 0
-    }
-  },
-  data() {
-    return {
-      // 折叠框展开项
-      activeCollapse: [],
-
-      // 拣选率弹框显示
-      pickRatePopupShow: false,
-
-      // 捆包率弹框显示
-      baleRatePopupShow: false,
-
-      // 容器弹框显示
-      containerPopup:{
-        show: false,
-        title: 'RQ001'
-      },
-
-      skuList:[
-        {skuCode:'LJ-001',skuName:'零件001'},
-        {skuCode:'LJ-002',skuName:'零件002'},
-        {skuCode:'LJ-003',skuName:'零件003'},
-      ],
-      baleList:[
-        {},{},{}
-      ]
-    }
-  },
-  methods: {
-    // 拣选率
-    pickRate(){
-      this.pickRatePopupShow = true
-    },
-
-    // 捆包率
-    baleRate(){
-      this.baleRatePopupShow = true
-    },
-
-    // 容器号点击
-    containerClick(item){
-      console.log(item)
-      this.containerPopup.show = true
-    }
-  }
-}
-</script>
-
-<style scoped lang="less">
-
-.title-item{
-  width:48%;
-  flex-shrink: 0;
-
-  &:nth-child(2n){
-    text-align: right;
-  }
-}
-
-.store-item{
-  border: solid 1px #f0f0f0;
-  border-radius: 8px;
-  padding: 5px 8px;
-  box-sizing: border-box;
-
-  &+.store-item{
-    margin-top: 10px;
-  }
-}
-
-.container{
-  display: inline-block;
-
-  &+.container{
-    margin-left: 8px;
-  }
-}
-</style>
+<!--
+  捆包进度 - 折叠框组件
+  @author: 张文
+  @date: 2022-06-29
+-->
+<template>
+  <div
+    v-if="item"
+    class="lw-global-animation-out lw-global-model-box lw-global-collapse-box"
+    :style="{animationDelay: index * 50 + 'ms'}"
+  >
+    <van-collapse
+      v-model="activeCollapse"
+      :border="false"
+      @change="openCollapse"
+    >
+      <van-collapse-item name="1">
+
+        <template #title>
+
+          <div
+            style="flex-wrap: wrap"
+            class="lw-global-flex-between lw-global-row-start"
+          >
+            <div
+              class="title-item"
+              v-for="(i,k) in item.labelList"
+              :key="k"
+            >{{ i }}
+            </div>
+          </div>
+
+          <div
+            style="margin-top: 10px"
+            class="lw-global-flex-around"
+          >
+
+            <div class="lw-global-data-look-item">
+              <div class="lw-global-value-bold">{{ item.customerCount }}</div>
+              <div class="lw-global-title">
+                {{ $lwLanguage.get('', '店数') }}
+              </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('', '拣选率') }}
+              </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('', '捆包率') }}
+              </div>
+            </div>
+
+            <div class="lw-global-data-look-item">
+              <div class="lw-global-value-bold">{{ item.handoverRate }}</div>
+              <div class="lw-global-title">
+                {{ $lwLanguage.get('', '交接率') }}
+              </div>
+            </div>
+
+          </div>
+
+        </template>
+
+        <div
+          class="store-item"
+          v-for="(i,k) in store"
+          :key="k"
+        >
+
+          <div class="lw-global-flex-between lw-global-row-start">
+            <div class="lw-global-value-bold">{{ i.customerCode }}</div>
+            <div class="lw-global-value-bold">{{ i.customerName }}</div>
+          </div>
+
+          <div class="lw-global-flex-between lw-global-row">
+
+            <lw-title-value-cell
+              class="lw-global-click-style"
+              :title="$lwLanguage.get('','拣选率')"
+              :value="i.pickRate"
+              val-red
+              val-bold
+              :is-row="false"
+              @click="pickRate(i)"
+            />
+
+            <lw-title-value-cell
+              class="lw-global-click-style"
+              :title="$lwLanguage.get('','捆包率')"
+              :value="i.packRate"
+              val-red
+              val-bold
+              :is-row="false"
+              @click="baleRate(i)"
+            />
+
+          </div>
+
+          <div style="margin-top: 8px" class="lw-global-flex-start">
+
+            <div
+              style="flex-shrink: 0"
+              class="lw-global-title"
+            >{{ $lwLanguage.get('','捆包容器') }}</div>
+
+            <div class="lw-global-value-bold">
+
+              <span
+                class="lw-global-click-style container"
+                v-for="(item,key) in i.waitPackContainerList"
+                :key="key"
+                @click="containerClick(item)"
+              >{{ item.pickContainer }}</span>
+
+            </div>
+
+          </div>
+
+
+
+        </div>
+
+      </van-collapse-item>
+    </van-collapse>
+
+    <!-- 拣选率弹框 -->
+    <lw-popup
+      :title="pickRatePopup.title"
+      v-model="pickRatePopup.show"
+    >
+
+      <div
+        style="padding: 5px 0 "
+        class="lw-global-flex-between lw-global-row"
+      >
+
+        <div class="lw-global-title">
+          {{ $lwLanguage.get('','商品列表') }}
+        </div>
+
+        <div class="lw-global-value-bold-red">
+          3
+          {{ $lwLanguage.get('','行') }}
+        </div>
+
+      </div>
+
+      <lw-sku-info-module
+        class="lw-global-flex-center"
+        v-for="(i,k) in pickRatePopup.skuList"
+        :key="k"
+        :sku-name="i.skuName"
+        :sku-code="i.skuCode"
+        is-row
+      >
+
+        <div class="lw-global-flex-center" style="flex-direction: column">
+          <div>
+
+            <span class="lw-global-value-bold-red">{{ i.pickQty }}</span>
+            <span class="lw-global-value-bold"> / {{ i.qty }}</span>
+
+          </div>
+          <lw-tag
+            v-if="i.status==='100'"
+            round
+            plain
+            type="danger"
+          >{{ $lwLanguage.get('','未拣选') }}</lw-tag>
+          <lw-tag
+            v-if="i.status==='200'"
+            round
+            plain
+          >{{ $lwLanguage.get('','拣选中') }}</lw-tag>
+          <lw-tag
+            v-if="i.status==='300'"
+            round
+            plain
+            type="success"
+          >{{ $lwLanguage.get('','已拣选') }}</lw-tag>
+        </div>
+
+      </lw-sku-info-module>
+
+    </lw-popup>
+
+    <!-- 捆包率弹框 -->
+    <lw-popup
+      :title="baleRatePopup.title"
+      v-model="baleRatePopup.show"
+    >
+
+      <div
+        style="padding: 5px 0 "
+        class="lw-global-flex-between lw-global-row"
+      >
+
+        <div class="lw-global-title">
+          {{ $lwLanguage.get('','拣选容器列表') }}
+        </div>
+
+        <div class="lw-global-value-bold-red">
+          3
+          {{ $lwLanguage.get('','行') }}
+        </div>
+
+      </div>
+
+      <div
+        class="lw-global-flex-between lw-global-click-style lw-global-row"
+        v-for="(i,k) in baleRatePopup.container"
+        :key="k"
+        @click="containerClick(i)"
+      >
+
+        <div
+          style="width: 45%"
+          class="lw-global-value-bold"
+        >{{ i.pickContainer }}</div>
+
+        <div
+          style="flex-shrink: 0"
+          class="lw-global-value-bold-red"
+        >{{ i.waitPackQty }}</div>
+
+        <lw-tag
+          style="flex-shrink: 0"
+          round
+          plain
+        >{{ i.statusLabel }}</lw-tag>
+
+      </div>
+
+    </lw-popup>
+
+    <!-- 容器弹框 -->
+    <lw-popup
+      :title="containerPopup.title"
+      v-model="containerPopup.show"
+    >
+
+      <div
+        style="padding: 5px 0 "
+        class="lw-global-flex-between lw-global-row"
+      >
+
+        <div class="lw-global-title">
+          {{ $lwLanguage.get('','商品列表') }}
+        </div>
+
+        <div class="lw-global-value-bold-red">
+          3
+          {{ $lwLanguage.get('','行') }}
+        </div>
+
+      </div>
+
+      <lw-sku-info-module
+        v-for="(i,k) in containerPopup.skuList"
+        :key="k"
+        :sku-name="i.skuName"
+        :sku-code="i.skuCode"
+        :qty="i.qty"
+        is-row
+      />
+    </lw-popup>
+  </div>
+</template>
+
+<script>
+
+import {
+  projectWmsGetPackValueGroupKeyCustomterData
+} from "../../../../../../api/outbound/bale/checkBale";
+
+export default {
+  name: "planCollapse",
+  props: {
+    // 数据
+    item: Object,
+
+    // 索引
+    index: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      // 门店数据
+      store:[],
+
+      // 折叠框展开项
+      activeCollapse: [],
+
+      // 拣选率弹框显示
+      pickRatePopup:{
+        show: false,
+        title: '',
+        skuList: []
+      },
+
+      // 捆包率弹框显示
+      baleRatePopup:{
+        show: false,
+        title: '',
+        container: []
+      },
+
+      // 容器弹框显示
+      containerPopup:{
+        show: false,
+        title: '',
+        skuList: []
+      }
+    }
+  },
+  methods: {
+    // 打开折叠框
+    openCollapse(){
+      if (!this.activeCollapse.length) return
+
+      this.store = []
+
+      projectWmsGetPackValueGroupKeyCustomterData({
+        tabGroupKey: this.item.tabGroupKey,
+        valueGroupKey: this.item.valueGroupKey,
+      }).then(res=>{
+        this.store = res
+      })
+
+    },
+
+    // 拣选率
+    pickRate(item){
+      this.pickRatePopup.skuList = []
+      this.pickRatePopup.title = item.customerCode +'-'+ item.customerName
+      this.pickRatePopup.skuList = item.pickSkuList
+      this.pickRatePopup.show = true
+    },
+
+    // 捆包率
+    baleRate(item){
+      this.this.baleRatePopup.container = []
+      this.baleRatePopup.title = item.customerCode +'-'+ item.customerName
+      this.baleRatePopup.container = item.waitPackContainerList
+      this.baleRatePopup.show = true
+    },
+
+    // 容器号点击
+    containerClick(item){
+      this.containerPopup.skuList = []
+      this.containerPopup.title = item.pickContainer
+      this.containerPopup.skuList = item.skuList
+      this.containerPopup.show = true
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+
+.title-item{
+  width:48%;
+  flex-shrink: 0;
+
+  &:nth-child(2n){
+    text-align: right;
+  }
+}
+
+.store-item{
+  border: solid 1px #f0f0f0;
+  border-radius: 8px;
+  padding: 5px 8px;
+  box-sizing: border-box;
+
+  &+.store-item{
+    margin-top: 10px;
+  }
+}
+
+.container{
+  display: inline-block;
+
+  &+.container{
+    margin-left: 8px;
+  }
+}
+</style>