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

package/src/components/page/inventory/queryInventory/page/index.vue

@@ -0,0 +1,662 @@
+<!--
+  库存查询
+  @author: 鲍珺
+  @date: 2022-07-06
+-->
+<template>
+  <div>
+    <lw-nav-bar :title="$lwLanguage.get('wms_project.pda.queryInventory.title','库存查询')"
+                :click-left="() => this.$router.replace({path: '/inventory/queryInventory/lwIndex'})"/>
+
+    <div class="lw-global-page-box">
+      <!-- 货主+分仓分组 -->
+      <div class="lw-global-tab-box">
+        <van-tabs
+          v-if="type !== 'container'"
+          type="card"
+          animated
+          v-model="tabActive"
+          @rendered="tabChange"
+          @change="tabChange"
+        >
+          <van-tab
+            v-for="i in groupList"
+            :name="i.key"
+            :key="i.key"
+            :title="i.key"
+          >
+            <div v-if="type === 'sku'">
+              <div class="lw-global-model-box">
+                <div class="lw-global-flex-between lw-global-row-start">
+                  <div>
+                    <span class="lw-global-title">
+                      {{ $lwLanguage.get('wms_project.pda.inventory.query.sku', '商品') }}
+                    </span>
+                    <span class="lw-global-value-bold">
+                      {{ group.skuCode }}
+                    </span>
+                  </div>
+
+                  <lw-button
+                    round
+                    style="flex-shrink: 0"
+                    @click="goIndex">
+                    {{ $lwLanguage.get('wms_project.pda.inventory.query.changeSku', '切换商品') }}
+                  </lw-button>
+                </div>
+
+                <div class="lw-global-row">
+                <span class="lw-global-title">
+                  {{ $lwLanguage.get('wms_project.pda.inventory.query.skuName', '商品名称') }}
+                </span>
+                  <span class="lw-global-value">
+                  {{ group.skuName }}
+                </span>
+                </div>
+
+                <!-- 库存统计 -->
+                <div class="lw-global-row">
+                <span class="lw-global-title">
+                  {{ $lwLanguage.get('wms_project.pda.inventory.query.invReport', '库存统计') }}
+                </span>
+                  <span>
+                <span class="lw-global-value">
+                  {{ $lwLanguage.get('wms_project.pda.inventory.query.invReport.qty', '库存量') }}
+                </span>
+                  <span
+                    class="lw-global-value-bold"
+                    style="color: #D50000"
+                  >
+                    {{ group.qty }}
+                  </span>
+                  <span class="lw-global-value">
+                     / {{ $lwLanguage.get('wms_project.pda.inventory.query.invReport.lockQty', '锁定量') }}
+                  </span>
+                  <span
+                    class="lw-global-value-bold"
+                    style="color: #D50000"
+                  >
+                    {{ group.lockQty }}
+                  </span>
+                  <span class="lw-global-value">
+                     / {{ $lwLanguage.get('wms_project.pda.inventory.query.invReport.availQty', '可用量') }}
+                  </span>
+                  <span
+                    class="lw-global-value-bold"
+                    style="color: #D50000"
+                  >
+                    {{ group.availQty }}
+                  </span>
+                </span>
+                </div>
+              </div>
+            </div>
+
+            <div v-if="type === 'location'">
+              <div class="lw-global-model-box">
+                <div class="lw-global-flex-between lw-global-row-start">
+                  <div>
+                    <span class="lw-global-title">
+                      {{ $lwLanguage.get('wms_project.pda.inventory.query.location', '库位') }}
+                    </span>
+                    <span class="lw-global-value-bold">
+                      {{ group.locationCode }}
+                    </span>
+                  </div>
+
+                  <lw-button
+                    round
+                    style="flex-shrink: 0"
+                    @click="goIndex">
+                    {{ $lwLanguage.get('wms_project.pda.inventory.query.changeSku', '切换库位') }}
+                  </lw-button>
+                </div>
+
+                <div class="lw-global-row">
+                  <span class="lw-global-title">
+                    {{ $lwLanguage.get('wms_project.pda.inventory.query.locationType', '库位类型') }}
+                  </span>
+                  <span class="lw-global-value">
+                    {{ group.locationTypeLabel }}
+                  </span>
+                </div>
+
+                <!-- 库存统计 -->
+                <div class="lw-global-row">
+                  <span class="lw-global-title">
+                    {{ $lwLanguage.get('wms_project.pda.inventory.query.invReport', '库存统计') }}
+                  </span>
+                    <span>
+                      <span class="lw-global-value">
+                        {{ $lwLanguage.get('wms_project.pda.inventory.query.invReport.skuCount', '品种数') }}
+                      </span>
+                      <span
+                        class="lw-global-value-bold"
+                        style="color: #D50000"
+                      >
+                        {{ group.skuCount }}
+                      </span>
+                      <span class="lw-global-value">
+                        {{ $lwLanguage.get('wms_project.pda.inventory.query.invReport.qty', '库存量') }}
+                      </span>
+                      <span
+                        class="lw-global-value-bold"
+                        style="color: #D50000"
+                      >
+                        {{ group.qty }}
+                      </span>
+                      <span class="lw-global-value">
+                         / {{ $lwLanguage.get('wms_project.pda.inventory.query.invReport.lockQty', '锁定量') }}
+                      </span>
+                      <span
+                        class="lw-global-value-bold"
+                        style="color: #D50000"
+                      >
+                        {{ group.lockQty }}
+                      </span>
+                      <span class="lw-global-value">
+                         / {{ $lwLanguage.get('wms_project.pda.inventory.query.invReport.availQty', '可用量') }}
+                      </span>
+                      <span
+                        class="lw-global-value-bold"
+                        style="color: #D50000"
+                      >
+                        {{ group.availQty }}
+                      </span>
+                    </span>
+                </div>
+              </div>
+            </div>
+
+            <div class="lw-global-row" v-if="type === 'sku' || type === 'location' || type === 'lot'">
+              <!-- 库存明细 -->
+              <lw-inventory-item
+                v-for="(i, k) in groupPage.datas"
+                :key="i.belongCompanyCode + ':' + i.ownerCode + ':' + i.skuCode + ':' + i.locationCode"
+                :item="i"
+                :index="k"
+                :type="type === 'sku'? 'location': (type === 'location'? 'sku': type)"
+                @detail="openLotPopup"
+              />
+            </div>
+            <!-- 分页 -->
+            <lw-pages v-if="type === 'sku' || type === 'location' || type === 'lot'"
+              v-model="groupPage.pageNum"
+              :page-total="groupPage.total"
+              :page-size="groupPage.pageSize"
+              @change="paging"
+              :hide="false"
+            />
+
+            <div v-if="type === 'skuLocation'">
+              <div class="lw-global-model-box">
+                <lw-inventory-lot-page :item="group">
+                  <template #button>
+                    <lw-button
+                      round
+                      @click="goIndex">
+                      {{ $lwLanguage.get('wms_project.pda.inventory.query.changeCondition', '切换条件') }}
+                    </lw-button>
+                  </template>
+                </lw-inventory-lot-page>
+              </div>
+            </div>
+
+            <div v-if="type === 'sn'">
+              <div class="lw-global-model-box">
+                <div class="lw-global-flex-between lw-global-row-start">
+                  <div>
+                    <span class="lw-global-title">
+                      {{ $lwLanguage.get('wms_project.pda.inventory.query.sn', '序列号') }}
+                    </span>
+                    <span class="lw-global-value-bold">
+                      {{ group.sn }}
+                    </span>
+                  </div>
+
+                  <lw-button
+                    round
+                    style="flex-shrink: 0"
+                    @click="goIndex">
+                    {{ $lwLanguage.get('wms_project.pda.inventory.query.changeCondition', '切换条件') }}
+                  </lw-button>
+                </div>
+
+                <div class="lw-global-row">
+                  <span class="lw-global-title">
+                    {{ $lwLanguage.get('wms_project.pda.inventory.query.skuCode', '商品编码') }}
+                  </span>
+                    <span class="lw-global-value">
+                    {{ group.skuCode }}
+                  </span>
+                </div>
+
+                <div class="lw-global-row">
+                  <span class="lw-global-title">
+                    {{ $lwLanguage.get('wms_project.pda.inventory.query.skuName', '商品名称') }}
+                  </span>
+                    <span class="lw-global-value">
+                    {{ group.skuName }}
+                  </span>
+                </div>
+
+                <!-- 库位 -->
+                <div class="lw-global-flex-between lw-global-row">
+                  <div>
+                    <span class="lw-global-title">
+                      {{ $lwLanguage.get('wms_project.pda.inventory.query.location', '库位') }}
+                    </span>
+                    <span class="lw-global-value-bold">
+                      {{ group.locationCode }}
+                    </span>
+                  </div>
+
+                  <div style="flex-shrink: 0">
+                    <span class="lw-global-value-bold">
+                      {{ group.locationTypeLabel }}
+                    </span>
+                  </div>
+                </div>
+
+                <div class="lw-global-row">
+                  <span class="lw-global-title">
+                    {{ $lwLanguage.get('wms_project.pda.inventory.query.lpn', '托盘号') }}
+                  </span>
+                  <span class="lw-global-value">
+                    {{ group.lpn }}
+                  </span>
+                </div>
+
+                <div class="lw-global-row">
+                  <span class="lw-global-title">
+                    {{ $lwLanguage.get('wms_project.pda.inventory.query.caseNum', '箱号') }}
+                  </span>
+                  <span class="lw-global-value">
+                    {{ group.caseNum }}
+                  </span>
+                </div>
+
+              </div>
+
+              <div class="lw-global-model-box">
+                <!-- 数据看板 -->
+                <div class="lw-global-row lw-global-flex-around">
+                  <!-- 待下架 -->
+                  <div class="lw-task-move-look-item">
+                    <div class="lw-global-value-bold">{{ group.qty || 0 }}</div>
+                    <div class="lw-global-title">
+                      {{ $lwLanguage.get('wms_project.pda.inbound.taskMove.todoQty','库存量') }}
+                    </div>
+                  </div>
+                </div>
+
+                <lw-lot-look-module :columns="group.lotItems" />
+              </div>
+
+            </div>
+
+          </van-tab>
+        </van-tabs>
+
+        <div v-if="type === 'container'">
+          <!-- 头部 -->
+          <div class="lw-global-model-box">
+            <div class="lw-global-flex-between lw-global-row-start">
+              <div>
+                    <span class="lw-global-title">
+                      {{ $lwLanguage.get('wms_project.pda.inventory.query.lpn', '托盘号') }}
+                    </span>
+                <span class="lw-global-value-bold">
+                      {{ $route.query.lpn }}
+                    </span>
+              </div>
+
+              <lw-button
+                round
+                style="flex-shrink: 0"
+                @click="goIndex">
+                {{ $lwLanguage.get('wms_project.pda.inventory.query.changeCondition', '切换条件') }}
+              </lw-button>
+            </div>
+
+            <div class="lw-global-row">
+                  <span class="lw-global-title">
+                    {{ $lwLanguage.get('wms_project.pda.inventory.query.caseNum', '箱号') }}
+                  </span>
+              <span class="lw-global-value">
+                    {{ $route.query.caseNum }}
+                  </span>
+            </div>
+
+            <!-- 库存统计 -->
+            <div class="lw-global-row">
+                <span class="lw-global-title">
+                  {{ $lwLanguage.get('wms_project.pda.inventory.query.invReport', '库存统计') }}
+                </span>
+              <span>
+                <span class="lw-global-value">
+                  {{ $lwLanguage.get('wms_project.pda.inventory.query.invReport.qty', '库存量') }}
+                </span>
+                  <span
+                    class="lw-global-value-bold"
+                    style="color: #D50000"
+                  >
+                    {{ group.qty }}
+                  </span>
+                  <span class="lw-global-value">
+                     / {{ $lwLanguage.get('wms_project.pda.inventory.query.invReport.lockQty', '锁定量') }}
+                  </span>
+                  <span
+                    class="lw-global-value-bold"
+                    style="color: #D50000"
+                  >
+                    {{ group.lockQty }}
+                  </span>
+                  <span class="lw-global-value">
+                     / {{ $lwLanguage.get('wms_project.pda.inventory.query.invReport.availQty', '可用量') }}
+                  </span>
+                  <span
+                    class="lw-global-value-bold"
+                    style="color: #D50000"
+                  >
+                    {{ group.availQty }}
+                  </span>
+                </span>
+            </div>
+          </div>
+
+          <!-- 库存明细 -->
+          <lw-inventory-item
+            v-for="(i, k) in groupPage.datas"
+            :key="i.belongCompanyCode + ':' + i.ownerCode + ':' + i.skuCode + ':' + i.locationCode"
+            :item="i"
+            :index="k"
+            :type="type"
+            @detail="openLotPopup"
+          />
+
+          <!-- 分页 -->
+          <lw-pages v-model="groupPage.pageNum"
+                    :page-total="groupPage.total"
+                    :page-size="groupPage.pageSize"
+                    @change="paging"
+                    :hide="false"
+          />
+        </div>
+      </div>
+
+      <lw-popup
+        :title="$lwLanguage.get('wms_project.pda.inbound.taskMove.lot','库存批次')"
+        v-model="lotPopup.show"
+        @closed="clearLotPopup"
+      >
+
+        <lw-inventory-lot-page :item="lotPopup.item">
+        </lw-inventory-lot-page>
+
+      </lw-popup>
+    </div>
+  </div>
+</template>
+
+<script>
+import lwInventoryItem from './../../inventoryItem/index.vue'
+import lwInventoryLotPage from './../../inventoryLotPage/index.vue'
+import {
+  projectWmsQueryInventoryLocationBySku,
+  projectWmsQueryInventoryLotBySn,
+  projectWmsQueryInventoryOwnersByLocation,
+  projectWmsQueryInventoryOwnersBySku,
+  projectWmsQueryInventoryOwnersBySkuLocation,
+  projectWmsQueryInventorySkuByLocation,
+  projectWmsQueryInventorySkuLocationsByContainer,
+  projectWmsQueryInventorySkuLocationsByLot, projectWmsQueryInventorySkuLocationsOwnerByLot,
+} from "../../../../../api/inventory/inventory";
+
+export default {
+  name: "lwQueryInventoryPage",
+  components: {
+    lwInventoryItem,
+    lwInventoryLotPage
+  },
+  data() {
+    return {
+      tabActive: '',
+
+      type: '',
+
+      // 货主分组
+      groupList: [],
+
+      // 当前分组
+      group: {},
+
+      // 当前分组分页明细
+      groupPage: {
+        pageNum: 1,
+        pageSize: 10,
+        total: 0,
+        datas: []
+      },
+
+      // 查看任务弹出框
+      lotPopup: {
+        show: false,
+        item: {}
+      },
+    }
+  },
+
+  mounted() {
+    this.type = this.$route.query.type
+    this.reload();
+  },
+
+  methods: {
+    checkExistInventory(res) {
+      if (!res || res.length <= 0) {
+        this.$lwShowErrorMsg(
+          this.$lwLanguage.get('wms_project.pda.queryInventory.inventory.notExist','库存不存在')
+        )
+
+        this.goIndex()
+      }
+    },
+    // 重新加载
+    reload() {
+      if (this.type === 'sku') {
+        projectWmsQueryInventoryOwnersBySku({
+          skuCode: this.$route.query.skuCode
+        }).then(res => {
+          this.checkExistInventory(res)
+
+          for (let i = 0; i < res.length; i++) {
+            // 分组: 货主+分仓代码
+            res[i].key = res[i].ownerCode + (res[i].belongCompanyCode? (':' + res[i].belongCompanyCode): '')
+          }
+          this.groupList = res;
+
+          if (this.groupList.length > 0) {
+            this.group = this.groupList[0]
+            this.paging()
+          }
+        })
+      } else if (this.type === 'location') {
+        projectWmsQueryInventoryOwnersByLocation({
+          locationCode: this.$route.query.locationCode
+        }).then(res => {
+          this.checkExistInventory(res)
+
+          for (let i = 0; i < res.length; i++) {
+            // 分组: 货主+分仓代码
+            res[i].key = res[i].ownerCode + (res[i].belongCompanyCode? (':' + res[i].belongCompanyCode): '')
+          }
+          this.groupList = res;
+
+          if (this.groupList.length > 0) {
+            this.group = this.groupList[0]
+            this.paging()
+          }
+        })
+      } else if (this.type === 'skuLocation') {
+        projectWmsQueryInventoryOwnersBySkuLocation({
+          skuCode: this.$route.query.skuCode,
+          locationCode: this.$route.query.locationCode
+        }).then(res => {
+          this.checkExistInventory(res)
+
+          for (let i = 0; i < res.length; i++) {
+            // 分组: 货主+分仓代码
+            res[i].key = res[i].ownerCode + (res[i].belongCompanyCode? (':' + res[i].belongCompanyCode): '')
+          }
+          this.groupList = res;
+
+          if (this.groupList.length > 0) {
+            this.group = this.groupList[0]
+          }
+        })
+      } else if (this.type === 'sn') {
+        projectWmsQueryInventoryLotBySn({
+          sn: this.$route.query.sn
+        }).then(res => {
+          this.checkExistInventory(res)
+
+          for (let i = 0; i < res.length; i++) {
+            // 分组: 货主
+            res[i].key = res[i].ownerCode
+          }
+          this.groupList = res;
+
+          if (this.groupList.length > 0) {
+            this.group = this.groupList[0]
+          }
+        })
+      } else if (this.type === 'lot') {
+        projectWmsQueryInventorySkuLocationsOwnerByLot({
+          ...this.$route.query,
+        }).then(res => {
+          this.checkExistInventory(res)
+
+          for (let i = 0; i < res.length; i++) {
+            // 分组: 货主+分仓代码
+            res[i].key = res[i].ownerCode + (res[i].belongCompanyCode? (':' + res[i].belongCompanyCode): '')
+          }
+          this.groupList = res;
+
+          if (this.groupList.length > 0) {
+            this.group = this.groupList[0]
+            this.paging()
+          }
+        })
+      } else if (this.type === 'container') {
+        this.paging()
+      }
+    },
+
+    // 切换
+    goIndex() {
+      this.$router.replace({
+        path: '/inventory/queryInventory/lwIndex',
+        query: {
+          tabActive: this.type
+        }
+      })
+    },
+
+    resetItemPage() {
+      this.groupPage.datas = []
+      this.groupPage.pageNum = 1
+      this.groupPage.pageSize = 10
+      this.groupPage.total = 0
+    },
+    // 切换货主
+    tabChange() {
+      this.group = null
+      this.resetItemPage()
+
+      for (let i = 0; i < this.groupList.length; i++) {
+        if (this.groupList[i].key === this.tabActive) {
+          this.group = this.groupList[i]
+        }
+      }
+      if (!this.group) {
+        return
+      }
+
+      if (this.tabActive !== 'sn') {
+        this.paging()
+      }
+    },
+    // 分页
+    paging() {
+      if (this.type === 'sku') {
+        projectWmsQueryInventoryLocationBySku({
+          skuCode: this.group.skuCode,
+          ownerCode: this.group.ownerCode,
+          belongCompanyCode: this.group.belongCompanyCode,
+          pageNum: this.groupPage.pageNum,
+          pageSize: this.groupPage.pageSize,
+        }).then((res) => {
+          this.groupPage = res
+        })
+      } else if (this.type === 'location') {
+        projectWmsQueryInventorySkuByLocation({
+          locationCode: this.group.locationCode,
+          ownerCode: this.group.ownerCode,
+          belongCompanyCode: this.group.belongCompanyCode,
+          pageNum: this.groupPage.pageNum,
+          pageSize: this.groupPage.pageSize,
+        }).then((res) => {
+          this.groupPage = res
+        })
+      } else if (this.type === 'lot') {
+        projectWmsQueryInventorySkuLocationsByLot({
+          ...this.$route.query,
+          ownerCode: this.group.ownerCode,
+          belongCompanyCode: this.group.belongCompanyCode,
+          pageNum: this.groupPage.pageNum,
+          pageSize: this.groupPage.pageSize,
+        }).then((res) => {
+          this.groupPage = res
+        })
+      } else if (this.type === 'container') {
+        projectWmsQueryInventorySkuLocationsByContainer({
+          ...this.$route.query,
+          pageNum: this.groupPage.pageNum,
+          pageSize: this.groupPage.pageSize,
+        }).then((res) => {
+          if (!res || res.page.length <= 0) {
+            this.$lwShowErrorMsg(
+              this.$lwLanguage.get('wms_project.pda.queryInventory.inventory.notExist','库存不存在')
+            )
+
+            this.goIndex()
+          }
+
+          this.group = res
+          this.groupPage = res.page
+        })
+      }
+    },
+
+    // 打开批次弹出框
+    openLotPopup(item) {
+      this.lotPopup.item = {
+        parentQuery: this.$route.query,
+        ownerCode: item.ownerCode? item.ownerCode: this.group.ownerCode,
+        belongCompanyCode: item.belongCompanyCode? item.belongCompanyCode: this.group.belongCompanyCode,
+        ...item
+      }
+      this.lotPopup.show = true
+    },
+    clearLotPopup() {
+      this.lotPopup.show = false
+      this.lotPopup.item = null
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+
+</style>