From 0246fa1ebc14504a4eeb9adbb0df3ee7c8eec8b3 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sun, 17 May 2026 23:09:18 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=88wms=EF=BC=89=EF=BC=9A=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=20order=20receipt=20=E7=9A=84=E5=AE=9E=E7=8E=B0?=
 =?UTF-8?q?=EF=BC=8C=E5=AF=B9=E9=BD=90=20vue3=20+=20ep=20=E7=89=88?=
 =?UTF-8?q?=E6=9C=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/wms/order/receipt/data.ts       | 167 ++++--
 .../src/views/wms/order/receipt/index.vue     |  43 +-
 .../wms/order/receipt/modules/detail.vue      | 125 +++++
 .../views/wms/order/receipt/modules/form.vue  | 474 ++++++++++++++++++
 .../views/wms/order/receipt/modules/print.vue | 218 ++++++++
 5 files changed, 965 insertions(+), 62 deletions(-)
 create mode 100644 apps/web-antd/src/views/wms/order/receipt/modules/detail.vue
 create mode 100644 apps/web-antd/src/views/wms/order/receipt/modules/form.vue
 create mode 100644 apps/web-antd/src/views/wms/order/receipt/modules/print.vue

diff --git a/apps/web-antd/src/views/wms/order/receipt/data.ts b/apps/web-antd/src/views/wms/order/receipt/data.ts
index 335162883..84854af93 100644
--- a/apps/web-antd/src/views/wms/order/receipt/data.ts
+++ b/apps/web-antd/src/views/wms/order/receipt/data.ts
@@ -1,53 +1,29 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { DescriptionItemSchema } from '#/components/description';
 
-import { markRaw } from 'vue';
+import { h, markRaw } from 'vue';
 
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
+import { formatDate, formatDateTime } from '@vben/utils';
 
 import { z } from '#/adapter/form';
 import { getSimpleUserList } from '#/api/system/user';
+import { DictTag } from '#/components/dict-tag';
+import { buildNumberRangeSchema } from '#/components/number-range-input';
 import { getRangePickerDefaultProps } from '#/utils';
 import { WmsMerchantSelect } from '#/views/wms/md/merchant/components';
 import { WmsWarehouseSelect } from '#/views/wms/md/warehouse/components';
 import {
+  formatPrice,
+  formatQuantity,
+  formatSumPrice,
+  formatSumQuantity,
   PRICE_PRECISION,
   QUANTITY_PRECISION,
 } from '#/views/wms/utils/format';
 
-import NumberRangeInput from './modules/number-range-input.vue';
-
-function splitNumberRange(minFieldName: string, maxFieldName: string) {
-  return (
-    value: [number | undefined, number | undefined] | undefined,
-    setValue: (fieldName: string, value: any) => void,
-  ) => {
-    setValue(minFieldName, value?.[0]);
-    setValue(maxFieldName, value?.[1]);
-    return undefined;
-  };
-}
-
-function buildNumberRangeSchema(
-  label: string,
-  fieldName: string,
-  minFieldName: string,
-  maxFieldName: string,
-  precision: number,
-): VbenFormSchema {
-  return {
-    component: markRaw(NumberRangeInput),
-    componentProps: {
-      min: 0,
-      precision,
-    },
-    fieldName,
-    label,
-    valueFormat: splitNumberRange(minFieldName, maxFieldName),
-  };
-}
-
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
   return [
@@ -247,10 +223,97 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
   ];
 }
 
+/** 详情的字段 */
+export function useDetailSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'no',
+      label: '入库单号',
+      render: (val) => val || '-',
+    },
+    {
+      field: 'type',
+      label: '入库类型',
+      render: (val) =>
+        val === undefined || val === null
+          ? '-'
+          : h(DictTag, {
+              type: DICT_TYPE.WMS_RECEIPT_ORDER_TYPE,
+              value: val,
+            }),
+    },
+    {
+      field: 'warehouseName',
+      label: '仓库',
+      render: (val) => val || '-',
+    },
+    {
+      field: 'status',
+      label: '单据状态',
+      render: (val) =>
+        val === undefined || val === null
+          ? '-'
+          : h(DictTag, {
+              type: DICT_TYPE.WMS_ORDER_STATUS,
+              value: val,
+            }),
+    },
+    {
+      field: 'orderTime',
+      label: '单据日期',
+      render: (val) => formatDate(val, 'YYYY-MM-DD') || '-',
+    },
+    {
+      field: 'merchantName',
+      label: '供应商',
+      render: (val) => val || '-',
+    },
+    {
+      field: 'bizOrderNo',
+      label: '业务单号',
+      render: (val) => val || '-',
+    },
+    {
+      field: 'totalQuantity',
+      label: '总数量',
+      render: (val) => formatQuantity(val) || '-',
+    },
+    {
+      field: 'totalPrice',
+      label: '总金额',
+      render: (val) => formatPrice(val) || '-',
+    },
+    {
+      field: 'createTime',
+      label: '创建时间',
+      render: (val) => formatDateTime(val) || '-',
+    },
+    {
+      field: 'creatorName',
+      label: '创建人',
+      render: (val, data) => val || data?.creator || '-',
+    },
+    {
+      field: 'updateTime',
+      label: '更新时间',
+      render: (val) => formatDateTime(val) || '-',
+    },
+    {
+      field: 'updaterName',
+      label: '更新人',
+      render: (val, data) => val || data?.updater || '-',
+    },
+    {
+      field: 'remark',
+      label: '备注',
+      render: (val) => val || '-',
+      span: 2,
+    },
+  ];
+}
+
 /** 表单的配置项 */
-export function useFormSchema(
-  handleWarehouseChange: () => Promise<void> | void,
-): VbenFormSchema[] {
+export function useFormSchema(): VbenFormSchema[] {
   return [
     {
       component: 'Input',
@@ -283,9 +346,6 @@ export function useFormSchema(
     },
     {
       component: markRaw(WmsWarehouseSelect),
-      componentProps: {
-        onChange: handleWarehouseChange,
-      },
       fieldName: 'warehouseId',
       label: '仓库',
       rules: 'required',
@@ -332,3 +392,32 @@ export function useFormSchema(
     },
   ];
 }
+
+interface ReceiptOrderDetailFooterRow {
+  quantity?: number;
+  totalPrice?: number;
+}
+
+/** 明细表格的合计行 */
+export function getDetailFooter({
+  columns,
+  data,
+}: {
+  columns: Array<{ field?: string }>;
+  data: ReceiptOrderDetailFooterRow[];
+}) {
+  return [
+    columns.map((column, index) => {
+      if (index === 0) {
+        return '合计';
+      }
+      if (column.field === 'quantity') {
+        return formatSumQuantity(data, (detail) => detail.quantity);
+      }
+      if (column.field === 'totalPrice') {
+        return formatSumPrice(data, (detail) => detail.totalPrice);
+      }
+      return '';
+    }),
+  ];
+}
diff --git a/apps/web-antd/src/views/wms/order/receipt/index.vue b/apps/web-antd/src/views/wms/order/receipt/index.vue
index 0b226fcb0..10ec0ef9d 100644
--- a/apps/web-antd/src/views/wms/order/receipt/index.vue
+++ b/apps/web-antd/src/views/wms/order/receipt/index.vue
@@ -3,9 +3,6 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { WmsReceiptOrderApi } from '#/api/wms/order/receipt';
 import type { WmsReceiptOrderDetailApi } from '#/api/wms/order/receipt/detail';
 
-// TODO @AI：对齐 system user index.vue 的界面，function 上必要的注释，需要加；
-// TODO @AI：row。id 这种防御性编程，建议都去掉，不存在这个情况；；；
-
 import { reactive, ref } from 'vue';
 
 import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
@@ -56,27 +53,24 @@ const [DetailModal, detailModalApi] = useVbenModal({
   destroyOnClose: true,
 });
 
+/** 刷新表格 */
 function handleRefresh() {
   gridApi.query();
 }
 
+/** 创建入库单 */
 function handleCreate() {
   formModalApi.setData({ type: 'create' }).open();
 }
 
+/** 编辑入库单 */
 function handleEdit(row: WmsReceiptOrderApi.ReceiptOrder) {
-  formModalApi.setData({ id: row.id, type: 'update' }).open();
+  formModalApi.setData({ id: row.id!, type: 'update' }).open();
 }
 
+/** 查看入库单详情 */
 function handleDetail(row: WmsReceiptOrderApi.ReceiptOrder) {
-  detailModalApi.setData({ id: row.id }).open();
-}
-
-function handlePrint(row: WmsReceiptOrderApi.ReceiptOrder) {
-  // TODO @AI：不用过度封装；
-  if (row.id) {
-    printRef.value?.print(row.id);
-  }
+  detailModalApi.setData({ id: row.id! }).open();
 }
 
 /** 计算单据明细金额 */
@@ -86,31 +80,34 @@ function getDetailTotalPrice(
   return detail.totalPrice ?? multiplyPrice(detail.quantity, detail.price);
 }
 
+/** 获取已展开行的明细 */
 function getExpandedDetails(row: WmsReceiptOrderApi.ReceiptOrder) {
-  return row.id ? detailMap[row.id] || [] : [];
+  return detailMap[row.id!] || [];
 }
 
 /** 展开列表行时懒加载入库明细 */
-// TODO @AI：点击 > 才展开，不用整行点击都展开；
 async function handleExpandChange(
   row: WmsReceiptOrderApi.ReceiptOrder,
   expanded: boolean,
 ) {
-  if (!row.id || !expanded) {
+  if (!expanded) {
     return;
   }
-  delete detailMap[row.id];
-  detailMap[row.id] = await getReceiptOrderDetailListByOrderId(row.id);
+  delete detailMap[row.id!];
+  detailMap[row.id!] = await getReceiptOrderDetailListByOrderId(row.id!);
 }
 
+/** 判断入库单是否可修改 */
 function canUpdateReceiptOrder(status?: number) {
   return status !== undefined && OrderUpdateStatusList.includes(status);
 }
 
+/** 判断入库单是否可删除 */
 function canDeleteReceiptOrder(status?: number) {
   return status !== undefined && OrderDeleteStatusList.includes(status);
 }
 
+/** 获取修改按钮禁用提示 */
 function getReceiptOrderUpdateTip(status?: number) {
   if (canUpdateReceiptOrder(status)) {
     return undefined;
@@ -124,6 +121,7 @@ function getReceiptOrderUpdateTip(status?: number) {
   return '当前状态无法修改';
 }
 
+/** 获取删除按钮禁用提示 */
 function getReceiptOrderDeleteTip(status?: number) {
   if (canDeleteReceiptOrder(status)) {
     return undefined;
@@ -134,16 +132,14 @@ function getReceiptOrderDeleteTip(status?: number) {
   return '当前状态无法删除';
 }
 
+/** 删除入库单 */
 async function handleDelete(row: WmsReceiptOrderApi.ReceiptOrder) {
-  if (!row.id) {
-    return;
-  }
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.no]),
     duration: 0,
   });
   try {
-    await deleteReceiptOrder(row.id);
+    await deleteReceiptOrder(row.id!);
     message.success($t('ui.actionMessage.deleteSuccess', [row.no]));
     handleRefresh();
   } finally {
@@ -151,6 +147,7 @@ async function handleDelete(row: WmsReceiptOrderApi.ReceiptOrder) {
   }
 }
 
+/** 导出入库单 */
 async function handleExport() {
   const data = await exportReceiptOrder(await gridApi.formApi.getValues());
   downloadFileFromBlobPart({ fileName: '入库单.xls', source: data });
@@ -165,7 +162,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     columns: useGridColumns(),
     expandConfig: {
       padding: true,
-      trigger: 'row',
+      trigger: 'default',
     },
     height: 'auto',
     keepSource: true,
@@ -331,7 +328,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
               label: '打印',
               type: 'link',
               auth: ['wms:receipt-order:query'],
-              onClick: handlePrint.bind(null, row),
+              onClick: () => printRef?.print(row.id!),
             },
           ]"
         />
diff --git a/apps/web-antd/src/views/wms/order/receipt/modules/detail.vue b/apps/web-antd/src/views/wms/order/receipt/modules/detail.vue
new file mode 100644
index 000000000..a9ea3dda1
--- /dev/null
+++ b/apps/web-antd/src/views/wms/order/receipt/modules/detail.vue
@@ -0,0 +1,125 @@
+<script lang="ts" setup>
+import type { WmsReceiptOrderApi } from '#/api/wms/order/receipt';
+import type { WmsReceiptOrderDetailApi } from '#/api/wms/order/receipt/detail';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { VxeColumn, VxeTable } from '#/adapter/vxe-table';
+import {
+  getReceiptOrder,
+  getReceiptOrderDetailListByOrderId,
+} from '#/api/wms/order/receipt';
+import { useDescription } from '#/components/description';
+import {
+  formatPrice,
+  formatQuantity,
+  formatSumPrice,
+  formatSumQuantity,
+  multiplyPrice,
+} from '#/views/wms/utils/format';
+
+import { useDetailSchema } from '../data';
+
+interface DetailRow extends WmsReceiptOrderDetailApi.ReceiptOrderDetail {
+  totalPrice?: number;
+}
+
+defineOptions({ name: 'WmsReceiptOrderDetail' });
+
+const detailData = ref<WmsReceiptOrderApi.ReceiptOrder>({});
+
+const detailRows = computed<DetailRow[]>(() =>
+  (detailData.value.details || []).map((detail) => ({
+    ...detail,
+    totalPrice: detail.totalPrice ?? multiplyPrice(detail.quantity, detail.price),
+  })),
+);
+
+const [Descriptions] = useDescription({
+  bordered: true,
+  column: 2,
+  schema: useDetailSchema(),
+  useCard: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      detailData.value = {};
+      return;
+    }
+    const data = modalApi.getData<{ id?: number }>();
+    if (!data?.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      const order = await getReceiptOrder(data.id);
+      const details =
+        order.details || (await getReceiptOrderDetailListByOrderId(data.id));
+      detailData.value = { ...order, details };
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal
+    title="入库单详情"
+    class="w-2/3"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+  >
+    <div class="mx-4 space-y-4">
+      <Descriptions :data="detailData" />
+      <VxeTable
+        :data="detailRows"
+        border
+        empty-text="暂无商品明细"
+        :show-overflow="true"
+        size="small"
+      >
+        <VxeColumn title="商品信息" min-width="220">
+          <template #default="{ row }">
+            <div>{{ row.itemName || '-' }}</div>
+            <div v-if="row.itemCode" class="text-xs text-gray-500">
+              商品编号：{{ row.itemCode }}
+            </div>
+          </template>
+        </VxeColumn>
+        <VxeColumn title="规格信息" min-width="220">
+          <template #default="{ row }">
+            <div>{{ row.skuName || '-' }}</div>
+            <div v-if="row.skuCode" class="text-xs text-gray-500">
+              规格编号：{{ row.skuCode }}
+            </div>
+          </template>
+        </VxeColumn>
+        <VxeColumn title="数量" align="right" width="120">
+          <template #default="{ row }">
+            {{ formatQuantity(row.quantity) || '-' }}
+          </template>
+        </VxeColumn>
+        <VxeColumn field="unit" title="单位" align="center" width="100" />
+        <VxeColumn title="单价" align="right" width="140">
+          <template #default="{ row }">
+            {{ formatPrice(row.price) || '-' }}
+          </template>
+        </VxeColumn>
+        <VxeColumn title="总价" align="right" width="140">
+          <template #default="{ row }">
+            {{ formatPrice(row.totalPrice) || '-' }}
+          </template>
+        </VxeColumn>
+      </VxeTable>
+      <div class="flex justify-end gap-6 text-sm">
+        <span>合计数量：{{ formatSumQuantity(detailRows, (detail) => detail.quantity) }}</span>
+        <span>合计金额：{{ formatSumPrice(detailRows, (detail) => detail.totalPrice) }}</span>
+      </div>
+    </div>
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/wms/order/receipt/modules/form.vue b/apps/web-antd/src/views/wms/order/receipt/modules/form.vue
new file mode 100644
index 000000000..e7980994c
--- /dev/null
+++ b/apps/web-antd/src/views/wms/order/receipt/modules/form.vue
@@ -0,0 +1,474 @@
+<script lang="ts" setup>
+import type { VxeTableInstance } from '#/adapter/vxe-table';
+import type { WmsItemSkuApi } from '#/api/wms/md/item/sku';
+import type { WmsReceiptOrderApi } from '#/api/wms/order/receipt';
+import type { WmsReceiptOrderDetailApi } from '#/api/wms/order/receipt/detail';
+
+import { computed, nextTick, ref } from 'vue';
+
+import { confirm, useVbenModal } from '@vben/common-ui';
+
+import { InputNumber, message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { TableAction, VxeColumn, VxeTable } from '#/adapter/vxe-table';
+import {
+  cancelReceiptOrder,
+  completeReceiptOrder,
+  createReceiptOrder,
+  getReceiptOrder,
+  getReceiptOrderDetailListByOrderId,
+  updateReceiptOrder,
+} from '#/api/wms/order/receipt';
+import { $t } from '#/locales';
+import { WmsItemSkuSelect } from '#/views/wms/md/item/sku/components';
+import {
+  OrderStatusEnum,
+  OrderUpdateStatusList,
+} from '#/views/wms/utils/constants';
+import {
+  dividePrice,
+  multiplyPrice,
+  PRICE_PRECISION,
+  QUANTITY_PRECISION,
+} from '#/views/wms/utils/format';
+import { generateOrderNo } from '#/views/wms/utils/order';
+
+import { getDetailFooter, useFormSchema } from '../data';
+
+interface DetailRow extends WmsReceiptOrderDetailApi.ReceiptOrderDetail {
+  seq: number;
+}
+
+type FormMode = 'create' | 'update';
+
+defineOptions({ name: 'WmsReceiptOrderForm' });
+
+const emit = defineEmits(['success']);
+
+const formData = ref<WmsReceiptOrderApi.ReceiptOrder>();
+const formMode = ref<FormMode>('create');
+const originalSubmitData = ref('');
+const details = ref<DetailRow[]>([]);
+const detailTableRef = ref<VxeTableInstance>();
+const skuSelectRef = ref<InstanceType<typeof WmsItemSkuSelect>>();
+let detailSeq = 0; // 明细行可能还没有后端 id，使用本地序号作为 VXE 行操作的稳定标识
+
+const getTitle = computed(() => {
+  return formMode.value === 'update'
+    ? $t('ui.actionTitle.edit', ['入库单'])
+    : $t('ui.actionTitle.create', ['入库单']);
+});
+
+const isPrepareOrder = computed(() => {
+  return (
+    !formData.value?.id ||
+    (formData.value.status !== undefined &&
+      OrderUpdateStatusList.includes(formData.value.status))
+  );
+});
+const isSavedPrepareOrder = computed(() => {
+  return (
+    !!formData.value?.id &&
+    formData.value.status !== undefined &&
+    OrderUpdateStatusList.includes(formData.value.status)
+  );
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    labelWidth: 100,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-3',
+});
+
+/** 标准化明细行，补齐本地序号和金额 */
+function normalizeDetail(
+  detail: WmsReceiptOrderDetailApi.ReceiptOrderDetail,
+): DetailRow {
+  detailSeq += 1;
+  return {
+    ...detail,
+    seq: detailSeq,
+    totalPrice: detail.totalPrice ?? multiplyPrice(detail.quantity, detail.price),
+  };
+}
+
+/** 根据商品 SKU 构建新的入库明细 */
+function buildDetail(sku: WmsItemSkuApi.ItemSku): DetailRow {
+  return normalizeDetail({
+    id: undefined,
+    itemCode: sku.itemCode,
+    itemId: sku.itemId,
+    itemName: sku.itemName,
+    price: undefined,
+    quantity: undefined,
+    skuCode: sku.code,
+    skuId: sku.id,
+    skuName: sku.name,
+    totalPrice: undefined,
+    unit: sku.unit,
+  });
+}
+
+/** 设置入库明细 */
+function setDetails(list?: WmsReceiptOrderDetailApi.ReceiptOrderDetail[]) {
+  details.value = (list || []).map((detail) => normalizeDetail(detail));
+  void refreshDetailFooter();
+}
+
+/** 刷新明细合计行 */
+async function refreshDetailFooter() {
+  await nextTick();
+  await detailTableRef.value?.updateFooter();
+}
+
+/** 获取已选择的 SKU 编号，避免重复选择 */
+function getSelectedSkuIds() {
+  return details.value
+    .map((detail) => detail.skuId)
+    .filter((id): id is number => !!id);
+}
+
+/** 添加商品明细 */
+async function handleAddDetail() {
+  const values = (await formApi.getValues()) as WmsReceiptOrderApi.ReceiptOrder;
+  if (!values.warehouseId) {
+    message.warning('请先选择仓库');
+    return;
+  }
+  skuSelectRef.value?.open(getSelectedSkuIds());
+}
+
+/** 选择商品 SKU */
+function handleSelectSku(skus: WmsItemSkuApi.ItemSku[]) {
+  if (skus.length === 0) {
+    return;
+  }
+  const selectedSkuIds = new Set(getSelectedSkuIds());
+  let changed = false;
+  for (const sku of skus) {
+    if (!sku.id || selectedSkuIds.has(sku.id)) {
+      continue;
+    }
+    details.value.push(buildDetail(sku));
+    selectedSkuIds.add(sku.id);
+    changed = true;
+  }
+  if (changed) {
+    void refreshDetailFooter();
+  }
+}
+
+/** 删除商品明细 */
+function handleDeleteDetail(row: DetailRow) {
+  const index = details.value.findIndex((detail) => detail.seq === row.seq);
+  if (index !== -1) {
+    details.value.splice(index, 1);
+    void refreshDetailFooter();
+  }
+}
+
+/** 明细数量变化 */
+function handleDetailQuantityChange(detail: DetailRow) {
+  if (detail.price !== undefined && detail.price !== null) {
+    detail.totalPrice = multiplyPrice(detail.quantity, detail.price);
+    void refreshDetailFooter();
+    return;
+  }
+  detail.price = dividePrice(detail.totalPrice, detail.quantity);
+  void refreshDetailFooter();
+}
+
+/** 明细单价变化 */
+function handleDetailPriceChange(detail: DetailRow) {
+  detail.totalPrice = multiplyPrice(detail.quantity, detail.price);
+  void refreshDetailFooter();
+}
+
+/** 明细金额变化 */
+function handleDetailTotalPriceChange(detail: DetailRow) {
+  detail.price = dividePrice(detail.totalPrice, detail.quantity);
+  void refreshDetailFooter();
+}
+
+/** 校验商品明细 */
+function validateDetails(required = false) {
+  if (details.value.length === 0) {
+    if (required) {
+      message.error('至少包含一条入库明细');
+      return false;
+    }
+    return true;
+  }
+  for (let index = 0; index < details.value.length; index += 1) {
+    const detail = details.value[index]!;
+    if (!detail.skuId) {
+      message.error(`第 ${index + 1} 行明细请选择商品规格`);
+      return false;
+    }
+    if (!detail.quantity || detail.quantity <= 0) {
+      message.error(`第 ${index + 1} 行明细入库数量必须大于 0`);
+      return false;
+    }
+  }
+  return true;
+}
+
+/** 构建提交用的明细数据 */
+function buildSubmitDetails() {
+  return details.value.map((row) => {
+    const { seq: _seq, ...detail } = row;
+    return detail;
+  });
+}
+
+/** 构建提交用的单据数据 */
+async function buildSubmitData(): Promise<WmsReceiptOrderApi.ReceiptOrder> {
+  const values = (await formApi.getValues()) as WmsReceiptOrderApi.ReceiptOrder;
+  const {
+    details: _details,
+    totalPrice: _totalPrice,
+    totalQuantity: _totalQuantity,
+    ...order
+  } = formData.value || {};
+  return {
+    ...order,
+    ...values,
+    details: buildSubmitDetails(),
+  };
+}
+
+/** 完成入库 */
+async function handleFormComplete() {
+  const { valid } = await formApi.validate();
+  if (!valid || !validateDetails(true) || !formData.value?.id) {
+    return;
+  }
+  await confirm('确认完成入库？完成后将更新库存。');
+  modalApi.lock();
+  try {
+    const data = await buildSubmitData();
+    if (JSON.stringify(data) !== originalSubmitData.value) {
+      await updateReceiptOrder(data);
+    }
+    await completeReceiptOrder(formData.value.id);
+    await modalApi.close();
+    emit('success');
+    message.success('入库成功');
+  } finally {
+    modalApi.unlock();
+  }
+}
+
+/** 作废入库单 */
+async function handleFormCancel() {
+  if (!formData.value?.id) {
+    return;
+  }
+  await confirm('确认作废该入库单？作废后不可恢复。');
+  modalApi.lock();
+  try {
+    await cancelReceiptOrder(formData.value.id);
+    await modalApi.close();
+    emit('success');
+    message.success('作废成功');
+  } finally {
+    modalApi.unlock();
+  }
+}
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid || !validateDetails(false) || !isPrepareOrder.value) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = await buildSubmitData();
+    try {
+      await (formMode.value === 'update'
+        ? updateReceiptOrder(data)
+        : createReceiptOrder(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      originalSubmitData.value = '';
+      setDetails([]);
+      return;
+    }
+    await formApi.resetForm();
+    const data = modalApi.getData<{
+      id?: number;
+      type?: FormMode;
+    }>();
+    formMode.value = data?.type || (data?.id ? 'update' : 'create');
+    if (data?.id) {
+      modalApi.lock();
+      try {
+        // 加载数据
+        const order = await getReceiptOrder(data.id);
+        const orderDetails =
+          order.details || (await getReceiptOrderDetailListByOrderId(data.id));
+        formData.value = { ...order, details: orderDetails };
+        setDetails(orderDetails);
+        // 设置到 values
+        await formApi.setValues(formData.value);
+        originalSubmitData.value = JSON.stringify(await buildSubmitData());
+      } finally {
+        modalApi.unlock();
+      }
+      return;
+    }
+    // 初始化新增表单
+    formData.value = {
+      details: [],
+      no: generateOrderNo('RK'),
+      status: OrderStatusEnum.PREPARE,
+    };
+    setDetails([]);
+    await formApi.setValues(formData.value);
+    originalSubmitData.value = JSON.stringify(await buildSubmitData());
+    await nextTick();
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-3/4">
+    <div class="mx-4">
+      <Form />
+      <div class="mt-4">
+        <div class="mb-3 flex items-center justify-between">
+          <span class="text-sm font-semibold">入库明细</span>
+          <TableAction
+            :actions="[
+              {
+                label: '添加商品',
+                onClick: handleAddDetail,
+                type: 'primary',
+              },
+            ]"
+          />
+        </div>
+        <VxeTable
+          ref="detailTableRef"
+          :data="details"
+          border
+          empty-text="暂无商品明细"
+          :footer-method="getDetailFooter"
+          :show-overflow="true"
+          show-footer
+          size="small"
+        >
+          <VxeColumn title="商品信息" min-width="220">
+            <template #default="{ row }">
+              <div>{{ row.itemName || '-' }}</div>
+              <div v-if="row.itemCode" class="text-xs text-gray-500">
+                商品编号：{{ row.itemCode }}
+              </div>
+            </template>
+          </VxeColumn>
+          <VxeColumn title="规格信息" min-width="220">
+            <template #default="{ row }">
+              <div>{{ row.skuName || '-' }}</div>
+              <div v-if="row.skuCode" class="text-xs text-gray-500">
+                规格编号：{{ row.skuCode }}
+              </div>
+            </template>
+          </VxeColumn>
+          <VxeColumn field="quantity" title="入库数量" width="150">
+            <template #default="{ row }">
+              <InputNumber
+                v-model:value="row.quantity"
+                :controls="false"
+                :min="0"
+                :precision="QUANTITY_PRECISION"
+                class="!w-full"
+                placeholder="数量"
+                @change="handleDetailQuantityChange(row)"
+              />
+            </template>
+          </VxeColumn>
+          <VxeColumn field="price" title="单价(元)" width="150">
+            <template #default="{ row }">
+              <InputNumber
+                v-model:value="row.price"
+                :controls="false"
+                :min="0"
+                :precision="PRICE_PRECISION"
+                class="!w-full"
+                placeholder="单价"
+                @change="handleDetailPriceChange(row)"
+              />
+            </template>
+          </VxeColumn>
+          <VxeColumn field="totalPrice" title="金额(元)" width="150">
+            <template #default="{ row }">
+              <InputNumber
+                v-model:value="row.totalPrice"
+                :controls="false"
+                :min="0"
+                :precision="PRICE_PRECISION"
+                class="!w-full"
+                placeholder="金额"
+                @change="handleDetailTotalPriceChange(row)"
+              />
+            </template>
+          </VxeColumn>
+          <VxeColumn title="操作" align="center" fixed="right" width="90">
+            <template #default="{ row }">
+              <TableAction
+                :actions="[
+                  {
+                    label: '删除',
+                    type: 'link',
+                    danger: true,
+                    onClick: handleDeleteDetail.bind(null, row),
+                  },
+                ]"
+              />
+            </template>
+          </VxeColumn>
+        </VxeTable>
+      </div>
+    </div>
+    <template #prepend-footer>
+      <div v-if="isSavedPrepareOrder" class="flex flex-auto items-center gap-2">
+        <TableAction
+          :actions="[
+            {
+              label: '完成入库',
+              type: 'primary',
+              auth: ['wms:receipt-order:complete'],
+              onClick: handleFormComplete,
+            },
+            {
+              label: '作废',
+              type: 'primary',
+              danger: true,
+              auth: ['wms:receipt-order:cancel'],
+              onClick: handleFormCancel,
+            },
+          ]"
+        />
+      </div>
+    </template>
+    <WmsItemSkuSelect ref="skuSelectRef" @change="handleSelectSku" />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/wms/order/receipt/modules/print.vue b/apps/web-antd/src/views/wms/order/receipt/modules/print.vue
new file mode 100644
index 000000000..a0b98775d
--- /dev/null
+++ b/apps/web-antd/src/views/wms/order/receipt/modules/print.vue
@@ -0,0 +1,218 @@
+<script lang="ts" setup>
+import type { WmsReceiptOrderApi } from '#/api/wms/order/receipt';
+import type { WmsReceiptOrderDetailApi } from '#/api/wms/order/receipt/detail';
+
+import { computed, nextTick, ref } from 'vue';
+
+import { Barcode, BarcodeFormatEnum } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictLabel } from '@vben/hooks';
+import { formatDate, formatDateTime } from '@vben/utils';
+
+import {
+  getReceiptOrder,
+  getReceiptOrderDetailListByOrderId,
+} from '#/api/wms/order/receipt';
+import {
+  formatPrice,
+  formatQuantity,
+  formatSumPrice,
+  formatSumQuantity,
+  multiplyPrice,
+} from '#/views/wms/utils/format';
+
+interface PrintRow extends WmsReceiptOrderDetailApi.ReceiptOrderDetail {
+  totalPrice?: number;
+}
+
+defineOptions({ name: 'WmsReceiptOrderPrint' });
+
+const printData = ref<WmsReceiptOrderApi.ReceiptOrder>({});
+const tableColumnCount = 5;
+
+const printRows = computed<PrintRow[]>(() =>
+  (printData.value.details || []).map((detail) => ({
+    ...detail,
+    totalPrice: detail.totalPrice ?? multiplyPrice(detail.quantity, detail.price),
+  })),
+);
+
+function waitForPaint() {
+  return new Promise<void>((resolve) => {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => resolve());
+    });
+  });
+}
+
+function removePrintMode() {
+  document.body.classList.remove('wms-receipt-order-printing');
+}
+
+function getPrintDictLabel(dictType: string, value?: number) {
+  if (value === undefined || value === null) {
+    return '-';
+  }
+  return getDictLabel(dictType, value) || '-';
+}
+
+async function print(id: number) {
+  const order = await getReceiptOrder(id);
+  const details = order.details || (await getReceiptOrderDetailListByOrderId(id));
+  printData.value = { ...order, details };
+  await nextTick();
+  await waitForPaint();
+  document.body.classList.add('wms-receipt-order-printing');
+  window.addEventListener('afterprint', removePrintMode, { once: true });
+  window.print();
+}
+
+defineExpose({ print });
+</script>
+
+<template>
+  <div
+    id="wmsReceiptOrderPrint"
+    class="wms-receipt-order-print pointer-events-none fixed left-0 top-0 z-[-1] w-full bg-white p-6 text-[#303133] opacity-0"
+  >
+    <div class="relative mb-2">
+      <h2 class="m-0 text-center text-[1.5em] font-bold leading-[1.2]">
+        入库单
+      </h2>
+      <div v-if="printData.no" class="absolute right-0 top-0">
+        <Barcode
+          :content="printData.no"
+          :display-value="false"
+          :format="BarcodeFormatEnum.CODE39"
+          :height="40"
+          :width="180"
+        />
+      </div>
+    </div>
+    <div class="mb-3 grid grid-cols-3 gap-x-6 gap-y-2 text-sm leading-[1.5]">
+      <div>入库单号：{{ printData.no || '-' }}</div>
+      <div>
+        入库类型：{{ getPrintDictLabel(DICT_TYPE.WMS_RECEIPT_ORDER_TYPE, printData.type) }}
+      </div>
+      <div>仓库：{{ printData.warehouseName || '-' }}</div>
+      <div>
+        入库状态：{{ getPrintDictLabel(DICT_TYPE.WMS_ORDER_STATUS, printData.status) }}
+      </div>
+      <div>单据日期：{{ formatDate(printData.orderTime, 'YYYY-MM-DD') || '-' }}</div>
+      <div>供应商：{{ printData.merchantName || '-' }}</div>
+      <div>业务单号：{{ printData.bizOrderNo || '-' }}</div>
+      <div>总数量：{{ formatQuantity(printData.totalQuantity) || '-' }}</div>
+      <div>总金额：{{ formatPrice(printData.totalPrice) || '-' }}</div>
+      <div class="col-span-3 grid grid-cols-2 gap-x-6">
+        <div>
+          创建：{{ formatDateTime(printData.createTime) || '-' }} /
+          {{ printData.creatorName || printData.creator || '-' }}
+        </div>
+        <div>
+          更新：{{ formatDateTime(printData.updateTime) || '-' }} /
+          {{ printData.updaterName || printData.updater || '-' }}
+        </div>
+      </div>
+      <div class="col-span-3">备注：{{ printData.remark || '-' }}</div>
+    </div>
+    <table class="w-full border-collapse text-[13px] leading-[1.5]">
+      <thead>
+        <tr>
+          <th class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-left font-bold">
+            商品信息
+          </th>
+          <th class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-left font-bold">
+            规格信息
+          </th>
+          <th class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-left font-bold">
+            数量
+          </th>
+          <th class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-left font-bold">
+            单价(元)
+          </th>
+          <th class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-left font-bold">
+            金额(元)
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="detail in printRows" :key="detail.id || detail.skuId">
+          <td class="border border-solid border-[#dcdfe6] p-2">
+            <div>{{ detail.itemName || '-' }}</div>
+            <div v-if="detail.itemCode" class="text-xs">
+              编号：{{ detail.itemCode }}
+            </div>
+          </td>
+          <td class="border border-solid border-[#dcdfe6] p-2">
+            <div>{{ detail.skuName || '-' }}</div>
+            <div v-if="detail.skuCode" class="text-xs">
+              编号：{{ detail.skuCode }}
+            </div>
+          </td>
+          <td class="border border-solid border-[#dcdfe6] p-2 text-right">
+            {{ formatQuantity(detail.quantity) || '-' }}
+          </td>
+          <td class="border border-solid border-[#dcdfe6] p-2 text-right">
+            {{ formatPrice(detail.price) || '-' }}
+          </td>
+          <td class="border border-solid border-[#dcdfe6] p-2 text-right">
+            {{ formatPrice(detail.totalPrice) || '-' }}
+          </td>
+        </tr>
+        <tr v-if="printRows.length > 0">
+          <td
+            class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2"
+            colspan="2"
+          >
+            合计
+          </td>
+          <td class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-right">
+            {{ formatSumQuantity(printRows, (detail) => detail.quantity) }}
+          </td>
+          <td class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-right"></td>
+          <td class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-right">
+            {{ formatSumPrice(printRows, (detail) => detail.totalPrice) }}
+          </td>
+        </tr>
+        <tr v-if="printRows.length === 0">
+          <td
+            class="border border-solid border-[#dcdfe6] p-2 text-center"
+            :colspan="tableColumnCount"
+          >
+            暂无明细
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style scoped>
+@media print {
+  :global(body.wms-receipt-order-printing) {
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+
+  :global(body.wms-receipt-order-printing *) {
+    visibility: hidden !important;
+  }
+
+  :global(body.wms-receipt-order-printing .wms-receipt-order-print),
+  :global(body.wms-receipt-order-printing .wms-receipt-order-print *) {
+    visibility: visible !important;
+  }
+
+  :global(body.wms-receipt-order-printing .wms-receipt-order-print) {
+    pointer-events: auto;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: auto;
+    width: 100%;
+    margin: 0 !important;
+    padding: 24px;
+    opacity: 1;
+  }
+}
+</style>