feat（wms）：增加 inventory

src/utils/dict.ts

@@ -218,6 +218,7 @@ export enum DICT_TYPE {
 
   // ========== WMS - 仓库管理模块 ==========
   WMS_MERCHANT_TYPE = 'merchant_type', // WMS 往来企业类型
+  WMS_INVENTORY_HISTORY_TYPE = 'wms_inventory_history_type', // WMS 库存记录类型
 
   // ========== AI - 人工智能模块  ==========
   AI_PLATFORM = 'ai_platform', // AI 平台

src/views/wms/inventory/statistics/index.vue

@@ -0,0 +1,342 @@
+<!-- WMS 库存统计 -->
+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      ref="queryFormRef"
+      :inline="true"
+      :model="queryParams"
+      class="-mb-15px"
+      label-width="68px"
+    >
+      <el-form-item label="统计维度" prop="type">
+        <el-radio-group v-model="queryParams.type" class="!w-240px" @change="handleTypeChange">
+          <el-radio-button
+            v-for="item in dimensionOptions"
+            :key="item.value"
+            :label="item.value"
+          >
+            {{ item.label }}
+          </el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="仓库" prop="warehouseId">
+        <WarehouseSelect
+          v-model="queryParams.warehouseId"
+          class="!w-240px"
+          @change="handleWarehouseChange"
+        />
+      </el-form-item>
+      <el-form-item v-if="AREA_ENABLE" label="库区" prop="areaId">
+        <WarehouseAreaSelect
+          v-model="queryParams.areaId"
+          :warehouse-id="queryParams.warehouseId"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="商品名称" prop="itemName">
+        <el-input
+          v-model="queryParams.itemName"
+          class="!w-240px"
+          clearable
+          placeholder="请输入商品名称"
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="商品编号" prop="itemCode">
+        <el-input
+          v-model="queryParams.itemCode"
+          class="!w-240px"
+          clearable
+          placeholder="请输入商品编号"
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="规格名称" prop="skuName">
+        <el-input
+          v-model="queryParams.skuName"
+          class="!w-240px"
+          clearable
+          placeholder="请输入规格名称"
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="规格编号" prop="skuCode">
+        <el-input
+          v-model="queryParams.skuCode"
+          class="!w-240px"
+          clearable
+          placeholder="请输入规格编号"
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery">
+          <Icon class="mr-5px" icon="ep:search" />
+          搜索
+        </el-button>
+        <el-button @click="resetQuery">
+          <Icon class="mr-5px" icon="ep:refresh" />
+          重置
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 库存列表 -->
+  <ContentWrap>
+    <div class="mb-12px flex items-center justify-between">
+      <span class="text-16px font-500">库存统计</span>
+      <el-checkbox v-model="filterZero" @change="handleFilterZeroChange">
+        过滤掉库存为0的商品
+      </el-checkbox>
+    </div>
+    <el-table
+      v-loading="loading"
+      :cell-class-name="'wms-inventory-statistics-cell'"
+      :data="list"
+      :show-overflow-tooltip="true"
+      :span-method="spanMethod"
+      border
+    >
+      <template v-if="warehouseDimensionList.includes(queryParams.type)">
+        <el-table-column label="仓库" min-width="160" prop="warehouseId">
+          <template #default="scope">
+            {{ scope.row.warehouseName || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          v-if="queryParams.type === INVENTORY_DIMENSION.AREA"
+          label="库区"
+          min-width="160"
+          prop="areaId"
+        >
+          <template #default="scope">
+            {{ scope.row.areaName || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="商品信息"
+          min-width="240"
+          :prop="
+            queryParams.type === INVENTORY_DIMENSION.WAREHOUSE ? 'warehouseItemId' : 'areaItemId'
+          "
+        >
+          <template #default="scope">
+            <div>{{ scope.row.itemName || '-' }}</div>
+            <div v-if="scope.row.itemCode" class="text-12px text-gray-500">
+              商品编号：{{ scope.row.itemCode }}
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="规格信息" min-width="220" prop="skuId">
+          <template #default="scope">
+            <div>{{ scope.row.skuName || '-' }}</div>
+            <div v-if="scope.row.skuCode" class="text-12px text-gray-500">
+              规格编号：{{ scope.row.skuCode }}
+            </div>
+          </template>
+        </el-table-column>
+      </template>
+      <template v-else>
+        <el-table-column label="商品信息" min-width="240" prop="itemId">
+          <template #default="scope">
+            <div>{{ scope.row.itemName || '-' }}</div>
+            <div v-if="scope.row.itemCode" class="text-12px text-gray-500">
+              商品编号：{{ scope.row.itemCode }}
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="规格信息" min-width="220" prop="skuId">
+          <template #default="scope">
+            <div>{{ scope.row.skuName || '-' }}</div>
+            <div v-if="scope.row.skuCode" class="text-12px text-gray-500">
+              规格编号：{{ scope.row.skuCode }}
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="仓库" min-width="160" prop="skuWarehouseId">
+          <template #default="scope">
+            {{ scope.row.warehouseName || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column v-if="AREA_ENABLE" label="所属库区" min-width="160" prop="areaId">
+          <template #default="scope">
+            {{ scope.row.areaName || '-' }}
+          </template>
+        </el-table-column>
+      </template>
+      <el-table-column align="right" label="库存" min-width="130" prop="quantity">
+        <template #default="scope">
+          {{ formatNumber(scope.row.quantity, 2) }}
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      v-model:limit="queryParams.pageSize"
+      v-model:page="queryParams.pageNo"
+      :total="total"
+      @pagination="getList"
+    />
+  </ContentWrap>
+</template>
+
+<script lang="ts" setup>
+import { InventoryApi, InventoryVO } from '@/api/wms/inventory'
+import WarehouseAreaSelect from '@/views/wms/md/warehouse/components/WarehouseAreaSelect.vue'
+import WarehouseSelect from '@/views/wms/md/warehouse/components/WarehouseSelect.vue'
+import { AREA_ENABLE } from '@/views/wms/utils/config'
+import { formatNumber } from '@/views/wms/utils/format'
+
+/** WMS 库存统计 */
+defineOptions({ name: 'WmsInventoryStatistics' })
+
+const INVENTORY_DIMENSION = {
+  WAREHOUSE: 'warehouse',
+  AREA: 'area',
+  ITEM: 'item'
+} as const
+type InventoryDimension = (typeof INVENTORY_DIMENSION)[keyof typeof INVENTORY_DIMENSION]
+
+const dimensionOptions = computed(() => [
+  { label: '仓库', value: INVENTORY_DIMENSION.WAREHOUSE },
+  ...(AREA_ENABLE ? [{ label: '库区', value: INVENTORY_DIMENSION.AREA }] : []),
+  { label: '商品', value: INVENTORY_DIMENSION.ITEM }
+])
+const warehouseDimensionList = [INVENTORY_DIMENSION.WAREHOUSE, INVENTORY_DIMENSION.AREA]
+
+interface InventoryRow extends InventoryVO {
+  warehouseItemId?: string
+  areaItemId?: string
+  skuWarehouseId?: string
+}
+
+interface SpanMethodProps {
+  column: {
+    property?: string
+  }
+  rowIndex: number
+}
+
+const loading = ref(true) // 列表的加载中
+const list = ref<InventoryRow[]>([]) // 列表的数据
+const total = ref(0) // 列表的总页数
+const filterZero = ref(false) // 是否过滤库存为 0 的商品
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  type: INVENTORY_DIMENSION.WAREHOUSE as InventoryDimension,
+  itemCode: undefined as string | undefined,
+  itemName: undefined as string | undefined,
+  skuCode: undefined as string | undefined,
+  skuName: undefined as string | undefined,
+  warehouseId: undefined as number | undefined,
+  areaId: undefined as number | undefined
+})
+const queryFormRef = ref() // 搜索的表单
+
+/** 查询库存列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await InventoryApi.getInventoryPage({
+      ...queryParams,
+      areaId: AREA_ENABLE ? queryParams.areaId : undefined,
+      minQuantity: filterZero.value ? 1 : undefined
+    })
+    list.value = data.list.map((item: InventoryVO) => ({
+      ...item,
+      // 展示字段
+      warehouseItemId: `${item.warehouseId || 0}-${item.itemId || 0}`,
+      areaItemId: `${item.areaId || 0}-${item.itemId || 0}`,
+      skuWarehouseId: `${item.skuId || 0}-${item.warehouseId || 0}`
+    }))
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  queryParams.type = INVENTORY_DIMENSION.WAREHOUSE
+  filterZero.value = false
+  handleQuery()
+}
+
+/** 统计维度变化 */
+const handleTypeChange = () => {
+  queryParams.pageNo = 1
+  if (queryParams.type === INVENTORY_DIMENSION.WAREHOUSE) {
+    queryParams.areaId = undefined
+  }
+  getList()
+}
+
+/** 是否过滤零库存变化 */
+const handleFilterZeroChange = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 仓库变化 */
+const handleWarehouseChange = () => {
+  queryParams.areaId = undefined
+}
+
+/** 合并库存统计的维度单元格 */
+const spanMethod = ({ column, rowIndex }: SpanMethodProps) => {
+  const property = column.property
+  if (!property || !getRowSpanProperties().includes(property)) {
+    return { rowspan: 1, colspan: 1 }
+  }
+  const row = list.value[rowIndex]
+  if (
+    rowIndex > 0 &&
+    getRowPropertyValue(list.value[rowIndex - 1], property) === getRowPropertyValue(row, property)
+  ) {
+    return { rowspan: 0, colspan: 0 }
+  }
+  let rowspan = 1
+  for (let index = rowIndex + 1; index < list.value.length; index++) {
+    if (getRowPropertyValue(list.value[index], property) !== getRowPropertyValue(row, property)) {
+      break
+    }
+    rowspan++
+  }
+  return { rowspan, colspan: 1 }
+}
+
+const getRowPropertyValue = (row: InventoryRow | undefined, property: string) => {
+  return row?.[property as keyof InventoryRow]
+}
+
+const getRowSpanProperties = () => {
+  if (queryParams.type === INVENTORY_DIMENSION.ITEM) {
+    return ['itemId', 'skuId', 'skuWarehouseId']
+  }
+  if (queryParams.type === INVENTORY_DIMENSION.AREA) {
+    return ['warehouseId', 'areaId', 'areaItemId']
+  }
+  return ['warehouseId', 'warehouseItemId']
+}
+
+/** 初始化 */
+onMounted(async () => {
+  await getList()
+})
+</script>
+
+<style scoped>
+:deep(.wms-inventory-statistics-cell) {
+  vertical-align: top;
+}
+</style>

src/views/wms/md/warehouse/area/WarehouseAreaForm.vue

@@ -9,14 +9,7 @@
       label-width="100px"
     >
       <el-form-item label="所属仓库" prop="warehouseId">
-        <el-select v-model="formData.warehouseId" class="!w-1/1" placeholder="请选择所属仓库">
+        <WarehouseSelect v-model="formData.warehouseId" placeholder="请选择所属仓库" />
-          <el-option
-            v-for="warehouse in selectableWarehouseList"
-            :key="warehouse.id"
-            :label="warehouse.name"
-            :value="warehouse.id"
-          />
-        </el-select>
       </el-form-item>
       <el-form-item label="库区名称" prop="name">
         <el-input v-model="formData.name" maxlength="60" placeholder="请输入库区名称" />
@@ -41,8 +34,8 @@
 </template>
 
 <script lang="ts" setup>
-import { WarehouseApi, WarehouseVO } from '@/api/wms/md/warehouse'
 import { WarehouseAreaApi, WarehouseAreaVO } from '@/api/wms/md/warehouse/area'
+import WarehouseSelect from '@/views/wms/md/warehouse/components/WarehouseSelect.vue'
 
 /** WMS 库区表单 */
 defineOptions({ name: 'WmsWarehouseAreaForm' })
@@ -54,12 +47,6 @@ const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formType = ref('') // 表单的类型：create - 新增；update - 修改
-const warehouseList = ref<WarehouseVO[]>([]) // 仓库精简列表
-const selectableWarehouseList = computed(() =>
-  warehouseList.value.filter(
-    (warehouse): warehouse is WarehouseVO & { id: number } => !!warehouse.id
-  )
-)
 const formData = ref<WarehouseAreaVO>({
   id: undefined,
   code: undefined,
@@ -80,7 +67,6 @@ const open = async (type: string, id?: number, warehouseId?: number) => {
   dialogTitle.value = t('action.' + type)
   formType.value = type
   resetForm()
-  await getWarehouseList()
   if (warehouseId) {
     formData.value.warehouseId = warehouseId
   }
@@ -96,11 +82,6 @@ const open = async (type: string, id?: number, warehouseId?: number) => {
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
-/** 查询仓库精简列表 */
-const getWarehouseList = async () => {
-  warehouseList.value = await WarehouseApi.getWarehouseSimpleList()
-}
-
 /** 提交表单 */
 const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
 const submitForm = async () => {

src/views/wms/md/warehouse/area/index.vue

@@ -10,19 +10,12 @@
       label-width="68px"
     >
       <el-form-item label="所属仓库" prop="warehouseId">
-        <el-select
+        <WarehouseSelect
           v-model="queryParams.warehouseId"
           class="!w-240px"
           placeholder="请选择所属仓库"
           @change="warehouseChange"
-        >
+        />
-          <el-option
-            v-for="warehouse in selectableWarehouseList"
-            :key="warehouse.id"
-            :label="warehouse.name"
-            :value="warehouse.id"
-          />
-        </el-select>
       </el-form-item>
       <el-form-item label="库区名称" prop="name">
         <el-input
@@ -131,6 +124,7 @@ import { dateFormatter } from '@/utils/formatTime'
 import { WarehouseApi, WarehouseVO } from '@/api/wms/md/warehouse'
 import { WarehouseAreaApi, WarehouseAreaVO } from '@/api/wms/md/warehouse/area'
 import WarehouseAreaForm from './WarehouseAreaForm.vue'
+import WarehouseSelect from '@/views/wms/md/warehouse/components/WarehouseSelect.vue'
 import download from '@/utils/download'
 
 /** WMS 库区管理 */
@@ -153,11 +147,6 @@ const queryParams = reactive({
 const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中
 const warehouseList = ref<WarehouseVO[]>([]) // 仓库精简列表
-const selectableWarehouseList = computed(() =>
-  warehouseList.value.filter(
-    (warehouse): warehouse is WarehouseVO & { id: number } => !!warehouse.id
-  )
-)
 
 /** 查询库区列表 */
 const getList = async () => {

src/views/wms/md/warehouse/components/WarehouseAreaSelect.vue

@@ -0,0 +1,83 @@
+<!-- WMS 库区选择器 -->
+<template>
+  <el-select
+    v-bind="$attrs"
+    v-model="selectValue"
+    :clearable="clearable"
+    :disabled="disabled"
+    :filter-method="handleFilter"
+    :placeholder="placeholder"
+    class="w-1/1"
+    filterable
+    @change="handleChange"
+  >
+    <el-option v-for="area in filteredList" :key="area.id!" :label="area.name" :value="area.id!" />
+  </el-select>
+</template>
+
+<script lang="ts" setup>
+import { WarehouseAreaApi, WarehouseAreaVO } from '@/api/wms/md/warehouse/area'
+
+/** WMS 库区选择器 */
+defineOptions({ name: 'WmsWarehouseAreaSelect', inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: number
+    warehouseId?: number
+    disabled?: boolean
+    clearable?: boolean
+    placeholder?: string
+  }>(),
+  {
+    disabled: false,
+    clearable: true,
+    placeholder: '请选择库区'
+  }
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [value: number | undefined]
+  change: [area: WarehouseAreaVO | undefined]
+}>()
+
+const areaList = ref<WarehouseAreaVO[]>([]) // 库区列表
+const filteredList = ref<WarehouseAreaVO[]>([]) // 过滤后的库区列表
+
+const selectValue = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value)
+})
+
+/** 前端过滤 */
+const handleFilter = (query: string) => {
+  if (!query) {
+    filteredList.value = areaList.value
+    return
+  }
+  const keyword = query.toLowerCase()
+  filteredList.value = areaList.value.filter((area) => area.name?.toLowerCase().includes(keyword))
+}
+
+/** 选中变化 */
+const handleChange = (value: number | undefined) => {
+  emit(
+    'change',
+    areaList.value.find((area) => area.id === value)
+  )
+}
+
+/** 获得库区列表 */
+const getAreaList = async () => {
+  try {
+    areaList.value = await WarehouseAreaApi.getWarehouseAreaSimpleList(props.warehouseId)
+    filteredList.value = areaList.value
+  } catch {
+    areaList.value = []
+    filteredList.value = []
+  }
+}
+
+/** 监听仓库变化 */
+watch(() => props.warehouseId, getAreaList, { immediate: true })
+</script>

src/views/wms/md/warehouse/components/WarehouseSelect.vue

@@ -0,0 +1,81 @@
+<!-- WMS 仓库选择器 -->
+<template>
+  <el-select
+    v-bind="$attrs"
+    v-model="selectValue"
+    :clearable="clearable"
+    :disabled="disabled"
+    :filter-method="handleFilter"
+    :placeholder="placeholder"
+    class="w-1/1"
+    filterable
+    @change="handleChange"
+  >
+    <el-option
+      v-for="warehouse in filteredList"
+      :key="warehouse.id!"
+      :label="warehouse.name"
+      :value="warehouse.id!"
+    />
+  </el-select>
+</template>
+
+<script lang="ts" setup>
+import { WarehouseApi, WarehouseVO } from '@/api/wms/md/warehouse'
+
+/** WMS 仓库选择器 */
+defineOptions({ name: 'WmsWarehouseSelect', inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: number
+    disabled?: boolean
+    clearable?: boolean
+    placeholder?: string
+  }>(),
+  {
+    disabled: false,
+    clearable: true,
+    placeholder: '请选择仓库'
+  }
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [value: number | undefined]
+  change: [warehouse: WarehouseVO | undefined]
+}>()
+
+const warehouseList = ref<WarehouseVO[]>([]) // 仓库列表
+const filteredList = ref<WarehouseVO[]>([]) // 过滤后的仓库列表
+
+const selectValue = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value)
+})
+
+/** 前端过滤 */
+const handleFilter = (query: string) => {
+  if (!query) {
+    filteredList.value = warehouseList.value
+    return
+  }
+  const keyword = query.toLowerCase()
+  filteredList.value = warehouseList.value.filter((warehouse) =>
+    warehouse.name?.toLowerCase().includes(keyword)
+  )
+}
+
+/** 选中变化 */
+const handleChange = (value: number | undefined) => {
+  emit(
+    'change',
+    warehouseList.value.find((warehouse) => warehouse.id === value)
+  )
+}
+
+/** 初始化 */
+onMounted(async () => {
+  warehouseList.value = await WarehouseApi.getWarehouseSimpleList()
+  filteredList.value = warehouseList.value
+})
+</script>