From 3ef4e8424fe1958b6a49437223320f413e4015f6 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Tue, 12 May 2026 23:30:06 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=88wms=EF=BC=89=EF=BC=9A=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E5=85=A5=E5=BA=93=E5=88=97=E8=A1=A8=E7=9A=84=E8=AF=84?=
 =?UTF-8?q?=E5=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../wms/order/receipt/ReceiptOrderDetail.vue  | 173 +++++
 .../wms/order/receipt/ReceiptOrderPrint.vue   | 133 ++++
 src/views/wms/order/receipt/index.vue         | 613 ++++++++++++++++++
 3 files changed, 919 insertions(+)
 create mode 100644 src/views/wms/order/receipt/ReceiptOrderDetail.vue
 create mode 100644 src/views/wms/order/receipt/ReceiptOrderPrint.vue
 create mode 100644 src/views/wms/order/receipt/index.vue

diff --git a/src/views/wms/order/receipt/ReceiptOrderDetail.vue b/src/views/wms/order/receipt/ReceiptOrderDetail.vue
new file mode 100644
index 000000000..fee28e295
--- /dev/null
+++ b/src/views/wms/order/receipt/ReceiptOrderDetail.vue
@@ -0,0 +1,173 @@
+<!-- WMS 入库单详情 -->
+<template>
+  <Dialog v-model="dialogVisible" title="入库单详情" width="1200px">
+    <div v-loading="loading">
+      <div class="mb-16px text-18px font-bold">单据信息</div>
+      <el-descriptions :column="2" border>
+        <el-descriptions-item label="入库单号">{{ detailData.no || '-' }}</el-descriptions-item>
+        <el-descriptions-item label="单据状态">
+          <dict-tag
+            v-if="detailData.status !== undefined"
+            :type="DICT_TYPE.WMS_ORDER_STATUS"
+            :value="detailData.status"
+          />
+          <span v-else>-</span>
+        </el-descriptions-item>
+        <el-descriptions-item label="入库类型">
+          <dict-tag
+            v-if="detailData.type !== undefined"
+            :type="DICT_TYPE.WMS_RECEIPT_ORDER_TYPE"
+            :value="detailData.type"
+          />
+          <span v-else>-</span>
+        </el-descriptions-item>
+        <el-descriptions-item label="仓库">
+          {{ detailData.warehouseName || '-' }}
+        </el-descriptions-item>
+        <el-descriptions-item label="供应商">
+          {{ detailData.merchantName || '-' }}
+        </el-descriptions-item>
+        <el-descriptions-item label="业务单号">
+          {{ detailData.bizOrderNo || '-' }}
+        </el-descriptions-item>
+        <el-descriptions-item v-if="AREA_ENABLE" label="库区">
+          {{ detailData.areaName || '-' }}
+        </el-descriptions-item>
+        <el-descriptions-item label="总数量">
+          {{ formatQuantity(detailData.totalQuantity) || '-' }}
+        </el-descriptions-item>
+        <el-descriptions-item label="总金额">
+          {{ formatPrice(detailData.totalAmount) || '-' }}
+        </el-descriptions-item>
+        <el-descriptions-item label="创建时间">
+          {{ formatNullableDate(detailData.createTime) || '-' }}
+        </el-descriptions-item>
+        <el-descriptions-item label="创建人">
+          {{ detailData.creatorName || detailData.creator || '-' }}
+        </el-descriptions-item>
+        <el-descriptions-item label="更新时间">
+          {{ formatNullableDate(detailData.updateTime) || '-' }}
+        </el-descriptions-item>
+        <el-descriptions-item label="更新人">
+          {{ detailData.updaterName || detailData.updater || '-' }}
+        </el-descriptions-item>
+        <el-descriptions-item :span="2" label="备注">
+          {{ detailData.remark || '-' }}
+        </el-descriptions-item>
+      </el-descriptions>
+
+      <div class="mb-16px mt-24px text-18px font-bold">商品明细</div>
+      <el-table :data="detailRows" :summary-method="getSummaries" border show-summary>
+        <el-table-column label="商品名称" min-width="180" prop="itemName">
+          <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="180" prop="skuName">
+          <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 v-if="AREA_ENABLE" label="库区" min-width="140" prop="areaName" />
+        <el-table-column v-if="BATCH_ENABLE" label="批号" min-width="140" prop="batchNo" />
+        <el-table-column v-if="BATCH_ENABLE" label="生产日期" width="140">
+          <template #default="scope">
+            {{ formatNullableDate(scope.row.productionDate, 'YYYY-MM-DD') || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column v-if="BATCH_ENABLE" label="过期日期" width="140">
+          <template #default="scope">
+            {{ formatNullableDate(scope.row.expirationDate, 'YYYY-MM-DD') || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column align="right" label="数量" prop="quantity" width="120">
+          <template #default="scope">
+            {{ formatQuantity(scope.row.quantity) || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="单位" prop="unit" width="100" />
+        <el-table-column align="right" label="单价" prop="unitPrice" width="140">
+          <template #default="scope">
+            {{ formatPrice(scope.row.unitPrice) || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column align="right" label="总价" prop="amount" width="140">
+          <template #default="scope">
+            {{ formatPrice(scope.row.amount) || '-' }}
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </Dialog>
+</template>
+
+<script lang="ts" setup>
+import { formatDate } from '@/utils/formatTime'
+import { DICT_TYPE } from '@/utils/dict'
+import { ReceiptOrderApi, ReceiptOrderVO } from '@/api/wms/order/receipt'
+import { ReceiptOrderDetailVO } from '@/api/wms/order/receipt/detail'
+import { AREA_ENABLE, BATCH_ENABLE } from '@/views/wms/utils/config'
+import {
+  formatPrice,
+  formatQuantity,
+  formatSumPrice,
+  formatSumQuantity
+} from '@/views/wms/utils/format'
+
+/** WMS 入库单详情 */
+defineOptions({ name: 'WmsReceiptOrderDetail' })
+
+interface DetailRow extends ReceiptOrderDetailVO {
+  unitPrice?: number
+}
+
+const loading = ref(false) // 加载中
+const dialogVisible = ref(false) // 弹窗的是否展示
+const detailData = ref<ReceiptOrderVO>({}) // 详情数据
+const detailRows = computed<DetailRow[]>(() =>
+  (detailData.value.details || []).map((detail) => ({
+    ...detail,
+    unitPrice:
+      detail.amount != null && detail.quantity
+        ? Number(detail.amount) / Number(detail.quantity)
+        : undefined
+  }))
+)
+
+// TODO @AI：抽到 date 或者 time ts 全局的工具里。
+const formatNullableDate = (value?: Date | string, format?: string) => {
+  return value ? formatDate(value as Date, format) : ''
+}
+
+const getSummaries = ({ columns, data }: { columns: any[]; data: DetailRow[] }) =>
+  columns.map((column, index) => {
+    if (index === 0) {
+      return '合计'
+    }
+    if (column.property === 'quantity') {
+      return formatSumQuantity(data, (detail) => detail.quantity)
+    }
+    if (column.property === 'amount') {
+      return formatSumPrice(data, (detail) => detail.amount)
+    }
+    return ''
+  })
+
+/** 打开弹窗 */
+const open = async (id: number) => {
+  dialogVisible.value = true
+  loading.value = true
+  try {
+    detailData.value = await ReceiptOrderApi.getReceiptOrder(id)
+  } finally {
+    loading.value = false
+  }
+}
+defineExpose({ open })
+</script>
diff --git a/src/views/wms/order/receipt/ReceiptOrderPrint.vue b/src/views/wms/order/receipt/ReceiptOrderPrint.vue
new file mode 100644
index 000000000..6a2062d21
--- /dev/null
+++ b/src/views/wms/order/receipt/ReceiptOrderPrint.vue
@@ -0,0 +1,133 @@
+<!-- WMS 入库单打印 -->
+<template>
+  <div class="hidden">
+    <button ref="printButtonRef" v-print="printObj" type="button"></button>
+    <div id="wmsReceiptOrderPrint" class="color-#303133">
+      <h2 class="text-center">入库单</h2>
+      <div class="mb-12px grid grid-cols-3 gap-x-24px gap-y-8px text-14px">
+        <div>入库单号：{{ printData.no || '-' }}</div>
+        <div>
+          入库类型：{{ getDictLabel(DICT_TYPE.WMS_RECEIPT_ORDER_TYPE, printData.type) || '-' }}
+        </div>
+        <div>入库状态：{{ getDictLabel(DICT_TYPE.WMS_ORDER_STATUS, printData.status) || '-' }}</div>
+        <div>供应商：{{ printData.merchantName || '-' }}</div>
+        <div>业务单号：{{ printData.bizOrderNo || '-' }}</div>
+        <div>仓库：{{ printData.warehouseName || '-' }}</div>
+        <div v-if="AREA_ENABLE">库区：{{ printData.areaName || '-' }}</div>
+        <div>总数量：{{ formatQuantity(printData.totalQuantity) || '-' }}</div>
+        <div>总金额：{{ formatPrice(printData.totalAmount) || '-' }}</div>
+        <div>创建时间：{{ formatNullableDate(printData.createTime) || '-' }}</div>
+        <div class="col-span-3">备注：{{ printData.remark || '-' }}</div>
+      </div>
+      <table class="w-full border-collapse text-13px">
+        <thead>
+          <tr>
+            <th class="border border-solid border-#dcdfe6 bg-#f5f7fa p-8px text-left">商品信息</th>
+            <th class="border border-solid border-#dcdfe6 bg-#f5f7fa p-8px text-left">规格信息</th>
+            <th
+              v-if="AREA_ENABLE"
+              class="border border-solid border-#dcdfe6 bg-#f5f7fa p-8px text-left"
+            >
+              库区
+            </th>
+            <th
+              v-if="BATCH_ENABLE"
+              class="border border-solid border-#dcdfe6 bg-#f5f7fa p-8px text-left"
+            >
+              批号
+            </th>
+            <th
+              v-if="BATCH_ENABLE"
+              class="border border-solid border-#dcdfe6 bg-#f5f7fa p-8px text-left"
+            >
+              生产日期
+            </th>
+            <th
+              v-if="BATCH_ENABLE"
+              class="border border-solid border-#dcdfe6 bg-#f5f7fa p-8px text-left"
+            >
+              过期日期
+            </th>
+            <th class="border border-solid border-#dcdfe6 bg-#f5f7fa p-8px text-left">数量</th>
+            <th class="border border-solid border-#dcdfe6 bg-#f5f7fa p-8px text-left">金额(元)</th>
+            <th class="border border-solid border-#dcdfe6 bg-#f5f7fa p-8px text-left">备注</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="detail in printData.details || []" :key="detail.id">
+            <td class="border border-solid border-#dcdfe6 p-8px">
+              <div>{{ detail.itemName || '-' }}</div>
+              <div v-if="detail.itemCode" class="text-12px">编号：{{ detail.itemCode }}</div>
+            </td>
+            <td class="border border-solid border-#dcdfe6 p-8px">
+              <div>{{ detail.skuName || '-' }}</div>
+              <div v-if="detail.skuCode" class="text-12px">编号：{{ detail.skuCode }}</div>
+            </td>
+            <td v-if="AREA_ENABLE" class="border border-solid border-#dcdfe6 p-8px">
+              {{ detail.areaName || '-' }}
+            </td>
+            <td v-if="BATCH_ENABLE" class="border border-solid border-#dcdfe6 p-8px">
+              {{ detail.batchNo || '-' }}
+            </td>
+            <td v-if="BATCH_ENABLE" class="border border-solid border-#dcdfe6 p-8px">
+              {{ formatNullableDate(detail.productionDate, 'YYYY-MM-DD') || '-' }}
+            </td>
+            <td v-if="BATCH_ENABLE" class="border border-solid border-#dcdfe6 p-8px">
+              {{ formatNullableDate(detail.expirationDate, 'YYYY-MM-DD') || '-' }}
+            </td>
+            <td class="border border-solid border-#dcdfe6 p-8px text-right">
+              {{ formatQuantity(detail.quantity) || '-' }}
+            </td>
+            <td class="border border-solid border-#dcdfe6 p-8px text-right">
+              {{ formatPrice(detail.amount) || '-' }}
+            </td>
+            <td class="border border-solid border-#dcdfe6 p-8px">{{ detail.remark || '-' }}</td>
+          </tr>
+          <tr v-if="!printData.details?.length">
+            <td
+              class="border border-solid border-#dcdfe6 p-8px text-center"
+              :colspan="tableColumnCount"
+            >
+              暂无明细
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { formatDate } from '@/utils/formatTime'
+import { DICT_TYPE, getDictLabel } from '@/utils/dict'
+import { ReceiptOrderApi, ReceiptOrderVO } from '@/api/wms/order/receipt'
+import { AREA_ENABLE, BATCH_ENABLE } from '@/views/wms/utils/config'
+import { formatPrice, formatQuantity } from '@/views/wms/utils/format'
+
+/** WMS 入库单打印 */
+defineOptions({ name: 'WmsReceiptOrderPrint' })
+
+const printData = ref<ReceiptOrderVO>({}) // 打印数据
+const printButtonRef = ref<HTMLButtonElement>() // 打印按钮
+const tableColumnCount = computed(() => 5 + (AREA_ENABLE ? 1 : 0) + (BATCH_ENABLE ? 3 : 0))
+const printObj = ref({
+  id: 'wmsReceiptOrderPrint',
+  popTitle: '&nbsp',
+  extraCss: '/print.css',
+  extraHead: '',
+  zIndex: 20003
+})
+
+// TODO @AI：抽到 date 或者 time ts 全局的工具里。
+const formatNullableDate = (value?: Date | string, format?: string) => {
+  return value ? formatDate(value as Date, format) : ''
+}
+
+/** 打印入库单 */
+const print = async (id: number) => {
+  printData.value = await ReceiptOrderApi.getReceiptOrder(id)
+  await nextTick()
+  printButtonRef.value?.click()
+}
+defineExpose({ print })
+</script>
diff --git a/src/views/wms/order/receipt/index.vue b/src/views/wms/order/receipt/index.vue
new file mode 100644
index 000000000..7a486c9a0
--- /dev/null
+++ b/src/views/wms/order/receipt/index.vue
@@ -0,0 +1,613 @@
+<!-- WMS 入库单 -->
+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      ref="queryFormRef"
+      :inline="true"
+      :model="queryParams"
+      class="-mb-15px"
+      label-width="80px"
+    >
+      <el-form-item label="入库单号" prop="no">
+        <el-input
+          v-model="queryParams.no"
+          class="!w-240px"
+          clearable
+          placeholder="请输入入库单号"
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="单据状态" prop="status">
+        <el-select
+          v-model="queryParams.status"
+          class="!w-240px"
+          clearable
+          placeholder="请选择单据状态"
+        >
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.WMS_ORDER_STATUS)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </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 label="供应商" prop="merchantId">
+        <MerchantSelect
+          v-model="queryParams.merchantId"
+          class="!w-240px"
+          placeholder="请选择供应商"
+          supplier
+        />
+      </el-form-item>
+      <el-form-item label="单据日期" prop="orderDate">
+        <el-date-picker
+          v-model="queryParams.orderDate"
+          :shortcuts="defaultShortcuts"
+          class="!w-240px"
+          end-placeholder="结束时间"
+          start-placeholder="开始时间"
+          type="datetimerange"
+          value-format="YYYY-MM-DD HH:mm:ss"
+        />
+      </el-form-item>
+      <el-form-item label="数量" prop="totalQuantityMin">
+        <div class="flex w-240px items-center gap-8px">
+          <el-input-number
+            v-model="queryParams.totalQuantityMin"
+            :controls="false"
+            :min="0"
+            :precision="QUANTITY_PRECISION"
+            class="!w-105px"
+            placeholder="最小值"
+          />
+          <span>至</span>
+          <el-input-number
+            v-model="queryParams.totalQuantityMax"
+            :controls="false"
+            :min="0"
+            :precision="QUANTITY_PRECISION"
+            class="!w-105px"
+            placeholder="最大值"
+          />
+        </div>
+      </el-form-item>
+      <el-form-item label="总金额" prop="totalAmountMin">
+        <div class="flex w-240px items-center gap-8px">
+          <el-input-number
+            v-model="queryParams.totalAmountMin"
+            :controls="false"
+            :min="0"
+            :precision="PRICE_PRECISION"
+            class="!w-105px"
+            placeholder="最小值"
+          />
+          <span>至</span>
+          <el-input-number
+            v-model="queryParams.totalAmountMax"
+            :controls="false"
+            :min="0"
+            :precision="PRICE_PRECISION"
+            class="!w-105px"
+            placeholder="最大值"
+          />
+        </div>
+      </el-form-item>
+      <el-form-item label="入库类型" prop="type">
+        <el-select
+          v-model="queryParams.type"
+          class="!w-240px"
+          clearable
+          placeholder="请选择入库类型"
+        >
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.WMS_RECEIPT_ORDER_TYPE)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="创建用户" prop="creator">
+        <UserSelectV2
+          v-model="queryParams.creator"
+          class="!w-240px"
+          placeholder="请选择创建用户"
+        />
+      </el-form-item>
+      <el-form-item label="更新用户" prop="updater">
+        <UserSelectV2
+          v-model="queryParams.updater"
+          class="!w-240px"
+          placeholder="请选择更新用户"
+        />
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker
+          v-model="queryParams.createTime"
+          :shortcuts="defaultShortcuts"
+          class="!w-240px"
+          end-placeholder="结束时间"
+          start-placeholder="开始时间"
+          type="datetimerange"
+          value-format="YYYY-MM-DD HH:mm:ss"
+        />
+      </el-form-item>
+      <el-form-item label="更新时间" prop="updateTime">
+        <el-date-picker
+          v-model="queryParams.updateTime"
+          :shortcuts="defaultShortcuts"
+          class="!w-240px"
+          end-placeholder="结束时间"
+          start-placeholder="开始时间"
+          type="datetimerange"
+          value-format="YYYY-MM-DD HH:mm:ss"
+        />
+      </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-popover
+          popper-class="wms-receipt-order-table-setting-popover"
+          trigger="click"
+          width="520"
+        >
+          <template #reference>
+            <el-button>
+              <Icon class="mr-5px" icon="ep:setting" />
+              表格设置
+            </el-button>
+          </template>
+          <el-checkbox-group
+            v-model="checkedTableColumns"
+            class="wms-receipt-order-table-setting grid grid-cols-3 gap-y-14px rounded p-16px"
+          >
+            <el-checkbox
+              v-for="column in tableColumnOptions"
+              :key="column.value"
+              :label="column.value"
+            >
+              {{ column.label }}
+            </el-checkbox>
+          </el-checkbox-group>
+        </el-popover>
+        <el-button
+          v-hasPermi="['wms:receipt-order:create']"
+          plain
+          type="primary"
+          @click="openForm('create')"
+        >
+          <Icon class="mr-5px" icon="ep:plus" />
+          新增
+        </el-button>
+        <el-button
+          v-hasPermi="['wms:receipt-order:export']"
+          :loading="exportLoading"
+          plain
+          type="success"
+          @click="handleExport"
+        >
+          <Icon class="mr-5px" icon="ep:download" />
+          导出
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 入库单列表 -->
+  <ContentWrap>
+    <el-table
+      v-loading="loading"
+      :cell-class-name="'wms-receipt-order-cell'"
+      :data="list"
+      :show-overflow-tooltip="true"
+      border
+      @expand-change="handleExpandChange"
+    >
+      <el-table-column type="expand" width="48">
+        <template #default="scope">
+          <el-table :data="detailMap[scope.row.id] || []" border>
+            <el-table-column label="商品信息" min-width="220">
+              <template #default="detailScope">
+                <div>{{ detailScope.row.itemName || '-' }}</div>
+                <div v-if="detailScope.row.itemCode" class="text-12px text-gray-500">
+                  商品编号：{{ detailScope.row.itemCode }}
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column label="规格信息" min-width="220">
+              <template #default="detailScope">
+                <div>{{ detailScope.row.skuName || '-' }}</div>
+                <div v-if="detailScope.row.skuCode" class="text-12px text-gray-500">
+                  规格编号：{{ detailScope.row.skuCode }}
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="AREA_ENABLE"
+              align="center"
+              label="库区"
+              min-width="140"
+              prop="areaName"
+            />
+            <el-table-column
+              v-if="BATCH_ENABLE"
+              align="center"
+              label="批号"
+              min-width="140"
+              prop="batchNo"
+            />
+            <el-table-column v-if="BATCH_ENABLE" label="生产日期/过期日期" min-width="180">
+              <template #default="detailScope">
+                <div v-if="detailScope.row.productionDate">
+                  生产日期：{{ formatDate(detailScope.row.productionDate, 'YYYY-MM-DD') }}
+                </div>
+                <div v-if="detailScope.row.expirationDate">
+                  过期日期：{{ formatDate(detailScope.row.expirationDate, 'YYYY-MM-DD') }}
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column align="right" label="入库数量" width="120">
+              <template #default="detailScope">
+                {{ formatQuantity(detailScope.row.quantity) }}
+              </template>
+            </el-table-column>
+            <el-table-column align="right" label="金额(元)" width="120">
+              <template #default="detailScope">
+                {{ formatPrice(detailScope.row.amount) || '-' }}
+              </template>
+            </el-table-column>
+            <el-table-column label="备注" min-width="160" prop="remark" />
+          </el-table>
+        </template>
+      </el-table-column>
+      <el-table-column v-if="isTableColumnVisible('no')" fixed="left" label="单号/业务单号" width="210">
+        <template #default="scope">
+          <div>
+            单号：
+            <el-button link type="primary" @click="openDetail(scope.row.id)">
+              {{ scope.row.no }}
+            </el-button>
+          </div>
+          <div v-if="scope.row.bizOrderNo" class="text-12px text-gray-500">
+            业务：{{ scope.row.bizOrderNo }}
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column
+        v-if="isTableColumnVisible('status')"
+        align="center"
+        fixed="left"
+        label="入库状态"
+        width="110"
+      >
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.WMS_ORDER_STATUS" :value="scope.row.status" />
+        </template>
+      </el-table-column>
+      <el-table-column
+        v-if="isTableColumnVisible('type')"
+        align="center"
+        label="入库类型"
+        width="120"
+      >
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.WMS_RECEIPT_ORDER_TYPE" :value="scope.row.type" />
+        </template>
+      </el-table-column>
+      <el-table-column
+        v-if="isTableColumnVisible('warehouse')"
+        :label="AREA_ENABLE ? '仓库/库区' : '仓库'"
+        min-width="160"
+      >
+        <template #default="scope">
+          <template v-if="AREA_ENABLE">
+            <div>仓库：{{ scope.row.warehouseName || '-' }}</div>
+            <div>库区：{{ scope.row.areaName || '-' }}</div>
+          </template>
+          <template v-else>
+            {{ scope.row.warehouseName || '-' }}
+          </template>
+        </template>
+      </el-table-column>
+      <el-table-column
+        v-if="isTableColumnVisible('quantityAmount')"
+        label="总数量/总金额(元)"
+        min-width="180"
+      >
+        <template #default="scope">
+          <div class="flex items-center justify-between">
+            <span>数量：</span>
+            <span>{{ formatQuantity(scope.row.totalQuantity) }}</span>
+          </div>
+          <div class="flex items-center justify-between">
+            <span>金额：</span>
+            <span>{{ formatPrice(scope.row.totalAmount) }}</span>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column
+        v-if="isTableColumnVisible('merchant')"
+        label="供应商"
+        min-width="160"
+        prop="merchantName"
+      />
+      <el-table-column
+        v-if="isTableColumnVisible('operateTime')"
+        label="操作时间"
+        min-width="160"
+      >
+        <template #default="scope">
+          <div>创建：{{ formatNullableTime(scope.row.createTime) }}</div>
+          <div>更新：{{ formatNullableTime(scope.row.updateTime) }}</div>
+        </template>
+      </el-table-column>
+      <el-table-column v-if="isTableColumnVisible('operator')" label="操作人" min-width="120">
+        <template #default="scope">
+          <div>创建：{{ scope.row.creatorName || scope.row.creator || '-' }}</div>
+          <div>更新：{{ scope.row.updaterName || scope.row.updater || '-' }}</div>
+        </template>
+      </el-table-column>
+      <el-table-column v-if="isTableColumnVisible('remark')" label="备注" min-width="160" prop="remark" />
+      <el-table-column align="center" fixed="right" label="操作" width="180">
+        <template #default="scope">
+          <el-button
+            v-if="scope.row.status === OrderStatusEnum.PREPARE"
+            v-hasPermi="['wms:receipt-order:update']"
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+          >
+            修改
+          </el-button>
+          <el-button
+            v-hasPermi="['wms:receipt-order:print']"
+            link
+            type="primary"
+            @click="handlePrint(scope.row.id)"
+          >
+            打印
+          </el-button>
+          <el-button
+            v-if="scope.row.status === OrderStatusEnum.PREPARE"
+            v-hasPermi="['wms:receipt-order:delete']"
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      v-model:limit="queryParams.pageSize"
+      v-model:page="queryParams.pageNo"
+      :total="total"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <ReceiptOrderForm ref="formRef" @success="getList" />
+  <ReceiptOrderDetail ref="detailRef" />
+  <ReceiptOrderPrint ref="printRef" />
+</template>
+
+<script lang="ts" setup>
+import { defaultShortcuts, formatDate } from '@/utils/formatTime'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { ReceiptOrderApi, ReceiptOrderVO } from '@/api/wms/order/receipt'
+import { ReceiptOrderDetailVO } from '@/api/wms/order/receipt/detail'
+import MerchantSelect from '@/views/wms/md/merchant/components/MerchantSelect.vue'
+import WarehouseSelect from '@/views/wms/md/warehouse/components/WarehouseSelect.vue'
+import { AREA_ENABLE, BATCH_ENABLE } from '@/views/wms/utils/config'
+import { OrderStatusEnum } from '@/views/wms/utils/constants'
+import { formatPrice, formatQuantity, PRICE_PRECISION, QUANTITY_PRECISION } from '@/views/wms/utils/format'
+import UserSelectV2 from '@/views/system/user/components/UserSelectV2.vue'
+import ReceiptOrderDetail from './ReceiptOrderDetail.vue'
+import ReceiptOrderForm from './ReceiptOrderForm.vue'
+import ReceiptOrderPrint from './ReceiptOrderPrint.vue'
+import download from '@/utils/download'
+
+/** WMS 入库单 */
+defineOptions({ name: 'WmsReceiptOrder' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+type TableColumnKey =
+  | 'no'
+  | 'status'
+  | 'type'
+  | 'warehouse'
+  | 'quantityAmount'
+  | 'merchant'
+  | 'operateTime'
+  | 'operator'
+  | 'remark'
+
+const tableColumnOptions: Array<{ label: string; value: TableColumnKey }> = [
+  { label: '单号/业务单号', value: 'no' },
+  { label: '入库状态', value: 'status' },
+  { label: '入库类型', value: 'type' },
+  { label: '仓库', value: 'warehouse' },
+  { label: '数量/金额(元)', value: 'quantityAmount' },
+  { label: '供应商', value: 'merchant' },
+  { label: '操作时间', value: 'operateTime' },
+  { label: '操作人', value: 'operator' },
+  { label: '备注', value: 'remark' }
+]
+const checkedTableColumns = ref<TableColumnKey[]>([
+  'no',
+  'status',
+  'type',
+  'warehouse',
+  'quantityAmount',
+  'merchant',
+  'operateTime',
+  'operator',
+  'remark'
+])
+const isTableColumnVisible = (column: TableColumnKey) => checkedTableColumns.value.includes(column)
+
+const loading = ref(true) // 列表的加载中
+const list = ref<ReceiptOrderVO[]>([]) // 列表的数据
+const total = ref(0) // 列表的总页数
+const getDefaultQueryParams = () => ({
+  pageNo: 1,
+  pageSize: 10,
+  no: undefined as string | undefined,
+  status: undefined as number | undefined,
+  warehouseId: undefined as number | undefined,
+  merchantId: undefined as number | undefined,
+  orderDate: undefined as string[] | undefined,
+  totalQuantityMin: undefined as number | undefined,
+  totalQuantityMax: undefined as number | undefined,
+  totalAmountMin: undefined as number | undefined,
+  totalAmountMax: undefined as number | undefined,
+  type: undefined as number | undefined,
+  bizOrderNo: undefined as string | undefined,
+  creator: undefined as number | undefined,
+  updater: undefined as number | undefined,
+  createTime: undefined as string[] | undefined,
+  updateTime: undefined as string[] | undefined
+})
+const queryParams = reactive(getDefaultQueryParams())
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+const detailMap = reactive<Record<number, ReceiptOrderDetailVO[]>>({}) // 入库单明细缓存
+
+/** 格式化列表时间 */
+// TODO @AI：抽到 date 或者 time ts 全局的工具里。
+const formatNullableTime = (value?: Date | string) => {
+  return value ? formatDate(value as Date, 'MM-DD HH:mm') : '-'
+}
+
+/** 查询入库单列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await ReceiptOrderApi.getReceiptOrderPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  Object.assign(queryParams, getDefaultQueryParams())
+  handleQuery()
+}
+
+/** 仓库变化 */
+const handleWarehouseChange = () => {
+  handleQuery()
+}
+
+/** 展开明细 */
+const handleExpandChange = async (row: ReceiptOrderVO) => {
+  if (!row.id || detailMap[row.id]) {
+    return
+  }
+  detailMap[row.id] = await ReceiptOrderApi.getReceiptOrderDetailListByOrderId(row.id)
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/** 查看入库单详情 */
+const detailRef = ref()
+const openDetail = (id: number) => {
+  detailRef.value.open(id)
+}
+
+/** 打印入库单 */
+const printRef = ref()
+const handlePrint = (id: number) => {
+  printRef.value.print(id)
+}
+
+/** 删除入库单 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await ReceiptOrderApi.deleteReceiptOrder(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await ReceiptOrderApi.exportReceiptOrder(queryParams)
+    download.excel(data, '入库单.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+/** 初始化 */
+onMounted(async () => {
+  await getList()
+})
+</script>
+
+<style scoped>
+:deep(.wms-receipt-order-cell) {
+  vertical-align: top;
+}
+
+:global(.wms-receipt-order-table-setting-popover) {
+  padding: 12px;
+}
+
+:global(.wms-receipt-order-table-setting) {
+  background-color: var(--el-fill-color-light);
+}
+
+:global(.wms-receipt-order-table-setting .el-checkbox) {
+  height: 28px;
+  margin-right: 0;
+}
+
+:global(.wms-receipt-order-table-setting .el-checkbox__label) {
+  font-size: 16px;
+  font-weight: 600;
+}
+</style>