From 990d0a78fb30dcff39d429c473c800fdbe3564a9 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 30 May 2026 09:04:41 +0800
Subject: [PATCH] =?UTF-8?q?feat(mes):=20=E6=8F=90=E4=BA=A4=20wm=20outsourc?=
 =?UTF-8?q?e=20=E7=9B=B8=E5=85=B3=E7=9A=84=E8=BF=81=E7=A7=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/mes/wm/outsourceissue/index.vue | 209 +++++++
 .../wm/outsourceissue/modules/detail-form.vue | 104 ++++
 .../wm/outsourceissue/modules/detail-list.vue | 103 ++++
 .../mes/wm/outsourceissue/modules/form.vue    | 240 ++++++++
 .../wm/outsourceissue/modules/line-form.vue   |  97 ++++
 .../wm/outsourceissue/modules/line-list.vue   | 223 +++++++
 .../src/views/mes/wm/outsourcereceipt/data.ts | 542 +++++++++++++++++
 .../views/mes/wm/outsourcereceipt/index.vue   | 209 +++++++
 .../outsourcereceipt/modules/detail-form.vue  | 103 ++++
 .../outsourcereceipt/modules/detail-list.vue  | 123 ++++
 .../mes/wm/outsourcereceipt/modules/form.vue  | 230 ++++++++
 .../wm/outsourcereceipt/modules/line-form.vue |  99 ++++
 .../wm/outsourcereceipt/modules/line-list.vue | 233 ++++++++
 apps/web-ele/src/api/mes/pro/card/index.ts    |  35 ++
 apps/web-ele/src/api/mes/pro/task/index.ts    |  27 +
 .../src/api/mes/pro/workorder/index.ts        |  84 ++-
 apps/web-ele/src/views/mes/utils/constants.ts |   6 +
 .../src/views/mes/wm/outsourceissue/data.ts   | 491 ++++++++++++++++
 .../src/views/mes/wm/outsourceissue/index.vue | 211 +++++++
 .../wm/outsourceissue/modules/detail-form.vue | 104 ++++
 .../wm/outsourceissue/modules/detail-list.vue | 103 ++++
 .../mes/wm/outsourceissue/modules/form.vue    | 247 ++++++++
 .../wm/outsourceissue/modules/line-form.vue   |  97 ++++
 .../wm/outsourceissue/modules/line-list.vue   | 223 +++++++
 .../src/views/mes/wm/outsourcereceipt/data.ts | 546 ++++++++++++++++++
 .../views/mes/wm/outsourcereceipt/index.vue   | 211 +++++++
 .../outsourcereceipt/modules/detail-form.vue  | 104 ++++
 .../outsourcereceipt/modules/detail-list.vue  | 122 ++++
 .../mes/wm/outsourcereceipt/modules/form.vue  | 238 ++++++++
 .../wm/outsourcereceipt/modules/line-form.vue |  98 ++++
 .../wm/outsourcereceipt/modules/line-list.vue | 234 ++++++++
 31 files changed, 5677 insertions(+), 19 deletions(-)
 create mode 100644 apps/web-antd/src/views/mes/wm/outsourceissue/index.vue
 create mode 100644 apps/web-antd/src/views/mes/wm/outsourceissue/modules/detail-form.vue
 create mode 100644 apps/web-antd/src/views/mes/wm/outsourceissue/modules/detail-list.vue
 create mode 100644 apps/web-antd/src/views/mes/wm/outsourceissue/modules/form.vue
 create mode 100644 apps/web-antd/src/views/mes/wm/outsourceissue/modules/line-form.vue
 create mode 100644 apps/web-antd/src/views/mes/wm/outsourceissue/modules/line-list.vue
 create mode 100644 apps/web-antd/src/views/mes/wm/outsourcereceipt/data.ts
 create mode 100644 apps/web-antd/src/views/mes/wm/outsourcereceipt/index.vue
 create mode 100644 apps/web-antd/src/views/mes/wm/outsourcereceipt/modules/detail-form.vue
 create mode 100644 apps/web-antd/src/views/mes/wm/outsourcereceipt/modules/detail-list.vue
 create mode 100644 apps/web-antd/src/views/mes/wm/outsourcereceipt/modules/form.vue
 create mode 100644 apps/web-antd/src/views/mes/wm/outsourcereceipt/modules/line-form.vue
 create mode 100644 apps/web-antd/src/views/mes/wm/outsourcereceipt/modules/line-list.vue
 create mode 100644 apps/web-ele/src/views/mes/wm/outsourceissue/data.ts
 create mode 100644 apps/web-ele/src/views/mes/wm/outsourceissue/index.vue
 create mode 100644 apps/web-ele/src/views/mes/wm/outsourceissue/modules/detail-form.vue
 create mode 100644 apps/web-ele/src/views/mes/wm/outsourceissue/modules/detail-list.vue
 create mode 100644 apps/web-ele/src/views/mes/wm/outsourceissue/modules/form.vue
 create mode 100644 apps/web-ele/src/views/mes/wm/outsourceissue/modules/line-form.vue
 create mode 100644 apps/web-ele/src/views/mes/wm/outsourceissue/modules/line-list.vue
 create mode 100644 apps/web-ele/src/views/mes/wm/outsourcereceipt/data.ts
 create mode 100644 apps/web-ele/src/views/mes/wm/outsourcereceipt/index.vue
 create mode 100644 apps/web-ele/src/views/mes/wm/outsourcereceipt/modules/detail-form.vue
 create mode 100644 apps/web-ele/src/views/mes/wm/outsourcereceipt/modules/detail-list.vue
 create mode 100644 apps/web-ele/src/views/mes/wm/outsourcereceipt/modules/form.vue
 create mode 100644 apps/web-ele/src/views/mes/wm/outsourcereceipt/modules/line-form.vue
 create mode 100644 apps/web-ele/src/views/mes/wm/outsourcereceipt/modules/line-list.vue

diff --git a/apps/web-antd/src/views/mes/wm/outsourceissue/index.vue b/apps/web-antd/src/views/mes/wm/outsourceissue/index.vue
new file mode 100644
index 000000000..4e80842d9
--- /dev/null
+++ b/apps/web-antd/src/views/mes/wm/outsourceissue/index.vue
@@ -0,0 +1,209 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesWmOutsourceIssueApi } from '#/api/mes/wm/outsourceissue';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { Button, message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  cancelOutsourceIssue,
+  deleteOutsourceIssue,
+  exportOutsourceIssue,
+  getOutsourceIssuePage,
+} from '#/api/mes/wm/outsourceissue';
+import { $t } from '#/locales';
+import { MesWmOutsourceIssueStatusEnum } from '#/views/mes/utils/constants';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建外协发料单 */
+function handleCreate() {
+  formModalApi.setData({ formType: 'create' }).open();
+}
+
+/** 查看外协发料单 */
+function handleDetail(row: MesWmOutsourceIssueApi.OutsourceIssue) {
+  formModalApi.setData({ formType: 'detail', id: row.id }).open();
+}
+
+/** 编辑外协发料单 */
+function handleEdit(row: MesWmOutsourceIssueApi.OutsourceIssue) {
+  formModalApi.setData({ formType: 'update', id: row.id }).open();
+}
+
+/** 执行拣货 */
+function handleStock(row: MesWmOutsourceIssueApi.OutsourceIssue) {
+  formModalApi.setData({ formType: 'stock', id: row.id }).open();
+}
+
+/** 执行领出 */
+function handleFinish(row: MesWmOutsourceIssueApi.OutsourceIssue) {
+  formModalApi.setData({ formType: 'finish', id: row.id }).open();
+}
+
+/** 删除外协发料单 */
+async function handleDelete(row: MesWmOutsourceIssueApi.OutsourceIssue) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.code]),
+    duration: 0,
+  });
+  try {
+    await deleteOutsourceIssue(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.code]));
+    handleRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 取消外协发料单 */
+async function handleCancel(row: MesWmOutsourceIssueApi.OutsourceIssue) {
+  await cancelOutsourceIssue(row.id!);
+  message.success('取消成功');
+  handleRefresh();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportOutsourceIssue(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '外协发料单.xls', source: data });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getOutsourceIssuePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MesWmOutsourceIssueApi.OutsourceIssue>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【仓库】外协发料、外协入库"
+        url="https://doc.iocoder.cn/mes/wm/outsource/"
+      />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+
+    <Grid table-title="外协发料单列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['外协发料单']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['mes:wm-outsource-issue:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['mes:wm-outsource-issue:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #code="{ row }">
+        <Button type="link" @click="handleDetail(row)">
+          {{ row.code }}
+        </Button>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['mes:wm-outsource-issue:update'],
+              ifShow: row.status === MesWmOutsourceIssueStatusEnum.PREPARE,
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['mes:wm-outsource-issue:delete'],
+              ifShow: row.status === MesWmOutsourceIssueStatusEnum.PREPARE,
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.code]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+            {
+              label: '执行拣货',
+              type: 'link',
+              auth: ['mes:wm-outsource-issue:update'],
+              ifShow: row.status === MesWmOutsourceIssueStatusEnum.APPROVING,
+              onClick: handleStock.bind(null, row),
+            },
+            {
+              label: '执行领出',
+              type: 'link',
+              auth: ['mes:wm-outsource-issue:finish'],
+              ifShow: row.status === MesWmOutsourceIssueStatusEnum.APPROVED,
+              onClick: handleFinish.bind(null, row),
+            },
+            {
+              label: '取消',
+              type: 'link',
+              danger: true,
+              auth: ['mes:wm-outsource-issue:update'],
+              ifShow:
+                row.status === MesWmOutsourceIssueStatusEnum.APPROVING ||
+                row.status === MesWmOutsourceIssueStatusEnum.APPROVED,
+              popConfirm: {
+                title: '确认取消该外协发料单？取消后不可恢复。',
+                confirm: handleCancel.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-antd/src/views/mes/wm/outsourceissue/modules/detail-form.vue b/apps/web-antd/src/views/mes/wm/outsourceissue/modules/detail-form.vue
new file mode 100644
index 000000000..16504ff2c
--- /dev/null
+++ b/apps/web-antd/src/views/mes/wm/outsourceissue/modules/detail-form.vue
@@ -0,0 +1,104 @@
+<script lang="ts" setup>
+import type { MesWmOutsourceIssueDetailApi } from '#/api/mes/wm/outsourceissue/detail';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createOutsourceIssueDetail,
+  getOutsourceIssueDetail,
+  updateOutsourceIssueDetail,
+} from '#/api/mes/wm/outsourceissue/detail';
+import { $t } from '#/locales';
+
+import { useDetailFormSchema } from '../data';
+
+const emit = defineEmits<{ success: [lineId: number] }>();
+const formData = ref<MesWmOutsourceIssueDetailApi.OutsourceIssueDetail>();
+const issueId = ref<number>(); // 所属发料单编号
+const lineId = ref<number>(); // 所属发料单行编号
+
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['发料明细'])
+    : $t('ui.actionTitle.create', ['发料明细']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-1',
+    labelWidth: 90,
+  },
+  layout: 'horizontal',
+  schema: useDetailFormSchema(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-3',
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as MesWmOutsourceIssueDetailApi.OutsourceIssueDetail;
+    data.issueId = issueId.value;
+    data.lineId = lineId.value;
+    try {
+      await (formData.value?.id
+        ? updateOutsourceIssueDetail({ ...data, id: formData.value.id })
+        : createOutsourceIssueDetail(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success', lineId.value!);
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    formApi.setState({ schema: useDetailFormSchema(formApi) });
+    // 加载数据
+    const data = modalApi.getData<{
+      detailId?: number;
+      issueId: number;
+      itemId?: number;
+      lineId: number;
+    }>();
+    issueId.value = data.issueId;
+    lineId.value = data.lineId;
+    if (data.detailId) {
+      modalApi.lock();
+      try {
+        formData.value = await getOutsourceIssueDetail(data.detailId);
+        // 设置到 values
+        await formApi.setValues(formData.value);
+      } finally {
+        modalApi.unlock();
+      }
+    } else if (data.itemId) {
+      await formApi.setFieldValue('itemId', data.itemId);
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-3/5">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/mes/wm/outsourceissue/modules/detail-list.vue b/apps/web-antd/src/views/mes/wm/outsourceissue/modules/detail-list.vue
new file mode 100644
index 000000000..69633aa49
--- /dev/null
+++ b/apps/web-antd/src/views/mes/wm/outsourceissue/modules/detail-list.vue
@@ -0,0 +1,103 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesWmOutsourceIssueDetailApi } from '#/api/mes/wm/outsourceissue/detail';
+
+import { computed, watch } from 'vue';
+
+import { message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteOutsourceIssueDetail } from '#/api/mes/wm/outsourceissue/detail';
+import { $t } from '#/locales';
+
+import { type FormType, useDetailGridColumns } from '../data';
+
+const props = defineProps<{
+  details: MesWmOutsourceIssueDetailApi.OutsourceIssueDetail[];
+  formType: FormType;
+}>();
+
+const emit = defineEmits<{
+  edit: [detailId: number];
+  refresh: [];
+}>();
+
+const isStock = computed(() => props.formType === 'stock'); // 是否为拣货模式
+
+/** 编辑发料明细 */
+function handleEdit(row: MesWmOutsourceIssueDetailApi.OutsourceIssueDetail) {
+  emit('edit', row.id!);
+}
+
+/** 删除发料明细 */
+async function handleDelete(
+  row: MesWmOutsourceIssueDetailApi.OutsourceIssueDetail,
+) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.warehouseName]),
+    duration: 0,
+  });
+  try {
+    await deleteOutsourceIssueDetail(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.warehouseName]));
+    emit('refresh');
+  } finally {
+    hideLoading();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    border: true,
+    columns: useDetailGridColumns(isStock.value),
+    data: props.details,
+    pagerConfig: {
+      enabled: false,
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    size: 'small',
+    toolbarConfig: {
+      enabled: false,
+    },
+  } as VxeTableGridOptions<MesWmOutsourceIssueDetailApi.OutsourceIssueDetail>,
+});
+
+watch(
+  () => props.details,
+  (details) => gridApi.setGridOptions({ data: details }),
+);
+</script>
+
+<template>
+  <div class="px-4 py-2">
+    <Grid>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [
+                  row.warehouseName,
+                ]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </div>
+</template>
diff --git a/apps/web-antd/src/views/mes/wm/outsourceissue/modules/form.vue b/apps/web-antd/src/views/mes/wm/outsourceissue/modules/form.vue
new file mode 100644
index 000000000..160e932af
--- /dev/null
+++ b/apps/web-antd/src/views/mes/wm/outsourceissue/modules/form.vue
@@ -0,0 +1,240 @@
+<script lang="ts" setup>
+import type { FormType } from '../data';
+
+import type { MesWmOutsourceIssueApi } from '#/api/mes/wm/outsourceissue';
+
+import { computed, ref } from 'vue';
+
+import { confirm, useVbenModal } from '@vben/common-ui';
+
+import { Button, Divider, message, Popconfirm } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  checkOutsourceIssueQuantity,
+  createOutsourceIssue,
+  finishOutsourceIssue,
+  getOutsourceIssue,
+  stockOutsourceIssue,
+  submitOutsourceIssue,
+  updateOutsourceIssue,
+} from '#/api/mes/wm/outsourceissue';
+import { $t } from '#/locales';
+import { MesWmOutsourceIssueStatusEnum } from '#/views/mes/utils/constants';
+
+import { useFormSchema } from '../data';
+import LineList from './line-list.vue';
+
+const emit = defineEmits(['success']);
+const formType = ref<FormType>('create');
+const formData = ref<MesWmOutsourceIssueApi.OutsourceIssue>();
+const originalSnapshot = ref(''); // 表单原始数据快照，用于提交时跳过未变更的保存请求
+const isEditable = computed(() => // 是否为编辑模式（可保存）
+  ['create', 'update'].includes(formType.value),
+);
+const isStock = computed(() => formType.value === 'stock'); // 是否为拣货模式
+const isFinish = computed(() => formType.value === 'finish'); // 是否为执行领出模式
+const canSubmit = computed(() => // 是否可提交
+  formType.value === 'update' &&
+  formData.value?.status === MesWmOutsourceIssueStatusEnum.PREPARE,
+);
+// TODO @AI：标题的代码风格；
+const getTitle = computed(() => {
+  switch (formType.value) {
+    case 'detail': {
+      return $t('ui.actionTitle.view', ['外协发料单']);
+    }
+    case 'finish': {
+      return '执行领出';
+    }
+    case 'stock': {
+      return '执行拣货';
+    }
+    case 'update': {
+      return $t('ui.actionTitle.edit', ['外协发料单']);
+    }
+    default: {
+      return $t('ui.actionTitle.create', ['外协发料单']);
+    }
+  }
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-1',
+    labelWidth: 110,
+  },
+  layout: 'horizontal',
+  schema: [],
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-3',
+});
+
+/** 提交发料单：表单有修改时先保存，再调用提交接口 */
+async function handleSubmit() {
+  const { valid } = await formApi.validate();
+  if (!valid || !formData.value?.id) {
+    return;
+  }
+  modalApi.lock();
+  try {
+    const current = JSON.stringify(await formApi.getValues());
+    if (current !== originalSnapshot.value) {
+      const data =
+        (await formApi.getValues()) as MesWmOutsourceIssueApi.OutsourceIssue;
+      await updateOutsourceIssue({ ...formData.value, ...data });
+      originalSnapshot.value = current;
+    }
+    await submitOutsourceIssue(formData.value.id);
+    message.success('提交成功');
+    await modalApi.close();
+    emit('success');
+  } finally {
+    modalApi.unlock();
+  }
+}
+
+/** 执行拣货：拣货数量与发料数量不一致时二次确认 */
+async function handleStock() {
+  if (!formData.value?.id) {
+    return;
+  }
+  const quantityMatch = await checkOutsourceIssueQuantity(formData.value.id);
+  if (!quantityMatch) {
+    try {
+      await confirm('发料数量与拣货数量不一致，确认执行拣货？');
+    } catch {
+      return;
+    }
+  }
+  modalApi.lock();
+  try {
+    await stockOutsourceIssue(formData.value.id);
+    message.success('拣货成功');
+    await modalApi.close();
+    emit('success');
+  } finally {
+    modalApi.unlock();
+  }
+}
+
+/** 执行领出 */
+async function handleFinish() {
+  if (!formData.value?.id) {
+    return;
+  }
+  modalApi.lock();
+  try {
+    await finishOutsourceIssue(formData.value.id);
+    message.success('领出成功');
+    await modalApi.close();
+    emit('success');
+  } finally {
+    modalApi.unlock();
+  }
+}
+
+const [Modal, modalApi] = useVbenModal({
+  // TODO @AI：方法注释，缺少“// 关闭并提示”；看看其他 form.vue 或者 xxx-form.vue 有没类似的情况；
+  async onConfirm() {
+    if (!isEditable.value) {
+      await modalApi.close();
+      return;
+    }
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as MesWmOutsourceIssueApi.OutsourceIssue;
+    try {
+      if (formData.value?.id) {
+        await updateOutsourceIssue({ ...formData.value, ...data });
+        formData.value = { ...formData.value, ...data };
+      } else {
+        const id = await createOutsourceIssue(data);
+        formData.value = {
+          ...data,
+          id,
+          status: MesWmOutsourceIssueStatusEnum.PREPARE,
+        };
+        await formApi.setFieldValue('id', id);
+        await formApi.setFieldValue('status', formData.value.status);
+        formType.value = 'update';
+      }
+      originalSnapshot.value = JSON.stringify(await formApi.getValues());
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      originalSnapshot.value = '';
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<{ formType: FormType; id?: number }>();
+    formType.value = data.formType;
+    formApi.setState({ schema: useFormSchema(formType.value, formApi) });
+    formApi.setDisabled(!isEditable.value);
+    modalApi.setState({ showConfirmButton: isEditable.value });
+    if (data?.id) {
+      modalApi.lock();
+      try {
+        formData.value = await getOutsourceIssue(data.id);
+        // 设置到 values
+        await formApi.setValues(formData.value);
+      } finally {
+        modalApi.unlock();
+      }
+    }
+    originalSnapshot.value = JSON.stringify(await formApi.getValues());
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-3/5">
+    <Form class="mx-4" />
+    <!-- 非新建模式展示物料信息 -->
+    <template v-if="formData?.id">
+      <Divider>物料信息</Divider>
+      <div class="mx-4">
+        <LineList :form-type="formType" :issue-id="formData.id" />
+      </div>
+    </template>
+    <template #prepend-footer>
+      <div class="flex flex-auto items-center gap-2">
+        <Popconfirm
+          v-if="canSubmit"
+          title="确认提交该外协发料单？【提交后将不能修改】"
+          @confirm="handleSubmit"
+        >
+          <Button type="primary">提交</Button>
+        </Popconfirm>
+        <Popconfirm
+          v-if="isStock"
+          title="确认执行拣货？"
+          @confirm="handleStock"
+        >
+          <Button type="primary">执行拣货</Button>
+        </Popconfirm>
+        <Popconfirm
+          v-if="isFinish"
+          title="确认执行领出？执行后将扣减库存，且无法撤销。"
+          @confirm="handleFinish"
+        >
+          <Button type="primary">执行领出</Button>
+        </Popconfirm>
+      </div>
+    </template>
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/mes/wm/outsourceissue/modules/line-form.vue b/apps/web-antd/src/views/mes/wm/outsourceissue/modules/line-form.vue
new file mode 100644
index 000000000..b0f8f6da0
--- /dev/null
+++ b/apps/web-antd/src/views/mes/wm/outsourceissue/modules/line-form.vue
@@ -0,0 +1,97 @@
+<script lang="ts" setup>
+import type { MesWmOutsourceIssueLineApi } from '#/api/mes/wm/outsourceissue/line';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createOutsourceIssueLine,
+  getOutsourceIssueLine,
+  updateOutsourceIssueLine,
+} from '#/api/mes/wm/outsourceissue/line';
+import { $t } from '#/locales';
+
+import { useLineFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<MesWmOutsourceIssueLineApi.OutsourceIssueLine>();
+const issueId = ref<number>(); // 所属发料单编号
+
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['物料发料单行'])
+    : $t('ui.actionTitle.create', ['物料发料单行']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-1',
+    labelWidth: 90,
+  },
+  layout: 'horizontal',
+  schema: useLineFormSchema(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-3',
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as MesWmOutsourceIssueLineApi.OutsourceIssueLine;
+    data.issueId = issueId.value;
+    try {
+      await (formData.value?.id
+        ? updateOutsourceIssueLine({ ...data, id: formData.value.id })
+        : createOutsourceIssueLine(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<{
+      id?: number;
+      issueId: number;
+    }>();
+    issueId.value = data.issueId;
+    if (!data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getOutsourceIssueLine(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-3/5">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/mes/wm/outsourceissue/modules/line-list.vue b/apps/web-antd/src/views/mes/wm/outsourceissue/modules/line-list.vue
new file mode 100644
index 000000000..30548696d
--- /dev/null
+++ b/apps/web-antd/src/views/mes/wm/outsourceissue/modules/line-list.vue
@@ -0,0 +1,223 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesWmOutsourceIssueDetailApi } from '#/api/mes/wm/outsourceissue/detail';
+import type { MesWmOutsourceIssueLineApi } from '#/api/mes/wm/outsourceissue/line';
+
+import { computed, reactive } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getOutsourceIssueDetailListByLineId } from '#/api/mes/wm/outsourceissue/detail';
+import {
+  deleteOutsourceIssueLine,
+  getOutsourceIssueLinePage,
+} from '#/api/mes/wm/outsourceissue/line';
+import { $t } from '#/locales';
+
+import { type FormType, useLineGridColumns } from '../data';
+import DetailForm from './detail-form.vue';
+import DetailList from './detail-list.vue';
+import LineForm from './line-form.vue';
+
+const props = defineProps<{
+  formType: FormType;
+  issueId: number;
+}>();
+
+// TODO @AI：// 是否可编辑明细行 拿到 “computed(() =>”；
+const isEditable = computed(() =>
+  ['create', 'update'].includes(props.formType),
+); // 是否可编辑明细行
+const isStock = computed(() => props.formType === 'stock'); // 是否为拣货模式
+const detailMap = reactive<
+  Record<number, MesWmOutsourceIssueDetailApi.OutsourceIssueDetail[]>
+>({}); // 已展开行的发料明细缓存
+
+const [LineFormModal, lineFormModalApi] = useVbenModal({
+  connectedComponent: LineForm,
+  destroyOnClose: true,
+});
+
+const [DetailFormModal, detailFormModalApi] = useVbenModal({
+  connectedComponent: DetailForm,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  for (const id of Object.keys(detailMap)) {
+    delete detailMap[Number(id)];
+  }
+  gridApi.query();
+}
+
+/** 添加物料 */
+function handleCreate() {
+  lineFormModalApi.setData({ issueId: props.issueId }).open();
+}
+
+/** 编辑物料 */
+function handleEdit(row: MesWmOutsourceIssueLineApi.OutsourceIssueLine) {
+  lineFormModalApi.setData({ id: row.id, issueId: props.issueId }).open();
+}
+
+/** 删除物料 */
+async function handleDelete(
+  row: MesWmOutsourceIssueLineApi.OutsourceIssueLine,
+) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.itemName]),
+    duration: 0,
+  });
+  try {
+    await deleteOutsourceIssueLine(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.itemName]));
+    handleRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 拣货：直接打开明细创建表单 */
+function handlePicking(row: MesWmOutsourceIssueLineApi.OutsourceIssueLine) {
+  openDetailForm(row.id!, row.itemId);
+}
+
+/** 打开发料明细表单 */
+function openDetailForm(lineId: number, itemId?: number, detailId?: number) {
+  detailFormModalApi
+    .setData({ detailId, issueId: props.issueId, itemId, lineId })
+    .open();
+}
+
+/** 获取已展开行的发料明细 */
+function getExpandedDetails(row: MesWmOutsourceIssueLineApi.OutsourceIssueLine) {
+  return detailMap[row.id!] || [];
+}
+
+/** 加载指定行的发料明细 */
+async function loadLineDetails(lineId: number) {
+  detailMap[lineId] = await getOutsourceIssueDetailListByLineId(lineId);
+}
+
+/** 展开行时懒加载发料明细 */
+async function handleExpandChange(
+  row: MesWmOutsourceIssueLineApi.OutsourceIssueLine,
+  expanded: boolean,
+) {
+  if (!expanded) {
+    return;
+  }
+  await loadLineDetails(row.id!);
+}
+
+/** 明细表单提交成功后，刷新对应行已展开的明细 */
+async function handleDetailSuccess(lineId: number) {
+  await loadLineDetails(lineId);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useLineGridColumns(isEditable.value, isStock.value),
+    expandConfig: {
+      padding: true,
+    },
+    height: 400,
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }) => {
+          if (!props.issueId) {
+            return { list: [], total: 0 };
+          }
+          return await getOutsourceIssueLinePage({
+            issueId: props.issueId,
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+    },
+  } as VxeTableGridOptions<MesWmOutsourceIssueLineApi.OutsourceIssueLine>,
+  gridEvents: {
+    toggleRowExpand: ({
+      expanded,
+      row,
+    }: {
+      expanded: boolean;
+      row: MesWmOutsourceIssueLineApi.OutsourceIssueLine;
+    }) => {
+      handleExpandChange(row, expanded);
+    },
+  },
+});
+</script>
+
+<template>
+  <div>
+    <LineFormModal @success="handleRefresh" />
+    <DetailFormModal @success="handleDetailSuccess" />
+    <Grid table-title="物料信息">
+      <template v-if="isEditable" #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: '添加物料',
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #detail="{ row }">
+        <DetailList
+          :details="getExpandedDetails(row)"
+          :form-type="formType"
+          @edit="(detailId) => openDetailForm(row.id!, row.itemId, detailId)"
+          @refresh="loadLineDetails(row.id!)"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              ifShow: isEditable,
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              ifShow: isEditable,
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.itemName]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+            {
+              label: '拣货',
+              type: 'link',
+              ifShow: isStock,
+              onClick: handlePicking.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </div>
+</template>
diff --git a/apps/web-antd/src/views/mes/wm/outsourcereceipt/data.ts b/apps/web-antd/src/views/mes/wm/outsourcereceipt/data.ts
new file mode 100644
index 000000000..a4b96f1db
--- /dev/null
+++ b/apps/web-antd/src/views/mes/wm/outsourcereceipt/data.ts
@@ -0,0 +1,542 @@
+import type { VbenFormApi, VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesProWorkOrderApi } from '#/api/mes/pro/workorder';
+import type { MesWmOutsourceReceiptApi } from '#/api/mes/wm/outsourcereceipt';
+import type { MesWmOutsourceReceiptDetailApi } from '#/api/mes/wm/outsourcereceipt/detail';
+import type { MesWmOutsourceReceiptLineApi } from '#/api/mes/wm/outsourcereceipt/line';
+
+import { h, markRaw } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { Button } from 'ant-design-vue';
+
+import { z } from '#/adapter/form';
+import { generateAutoCode } from '#/api/mes/md/autocode/record';
+import { getRangePickerDefaultProps } from '#/utils';
+import MdItemSelect from '#/views/mes/md/item/components/md-item-select.vue';
+import MdVendorSelect from '#/views/mes/md/vendor/components/md-vendor-select.vue';
+import ProWorkOrderSelect from '#/views/mes/pro/workorder/components/pro-work-order-select.vue';
+import {
+  MesAutoCodeRuleCode,
+  MesProWorkOrderStatusEnum,
+  MesProWorkOrderTypeEnum,
+} from '#/views/mes/utils/constants';
+import {
+  WmWarehouseAreaSelect,
+  WmWarehouseLocationSelect,
+  WmWarehouseSelect,
+} from '#/views/mes/wm/warehouse/components';
+
+/** 表单类型 */
+export type FormType = 'create' | 'detail' | 'finish' | 'stock' | 'update';
+
+/** 表单头部是否只读（上架、详情、完成态） */
+function isHeaderReadonly(formType: FormType): boolean {
+  return (
+    formType === 'detail' || formType === 'finish' || formType === 'stock'
+  );
+}
+
+/** 新增/修改的表单 */
+export function useFormSchema(
+  formType: FormType,
+  formApi?: VbenFormApi,
+): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'status',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'code',
+      label: '入库单编号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入入库单编号',
+      },
+      rules: 'required',
+      suffix: isHeaderReadonly(formType)
+        ? undefined
+        : () =>
+            h(
+              Button,
+              {
+                type: 'default',
+                onClick: async () => {
+                  const code = await generateAutoCode(
+                    MesAutoCodeRuleCode.WM_OUTSOURCE_RECEIPT_CODE,
+                  );
+                  await formApi?.setFieldValue('code', code);
+                },
+              },
+              { default: () => '生成' },
+            ),
+    },
+    {
+      fieldName: 'name',
+      label: '入库单名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入入库单名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'workOrderId',
+      label: '外协工单',
+      component: markRaw(ProWorkOrderSelect),
+      componentProps: {
+        // 选择外协工单后，自动回填供应商
+        onChange: async (workOrder?: MesProWorkOrderApi.WorkOrder) => {
+          await formApi?.setFieldValue('vendorId', workOrder?.vendorId);
+        },
+        status: MesProWorkOrderStatusEnum.CONFIRMED,
+        type: MesProWorkOrderTypeEnum.OUTSOURCE,
+      },
+      rules: 'selectRequired',
+    },
+    {
+      fieldName: 'vendorId',
+      label: '供应商',
+      component: markRaw(MdVendorSelect),
+      componentProps: {
+        placeholder: '请选择供应商',
+      },
+    },
+    {
+      fieldName: 'receiptDate',
+      label: '入库日期',
+      component: 'DatePicker',
+      componentProps: {
+        format: 'YYYY-MM-DD',
+        placeholder: '请选择入库日期',
+        valueFormat: 'x',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      formItemClass: 'col-span-3',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 3,
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'code',
+      label: '入库单编号',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入入库单编号',
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '入库单名称',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入入库单名称',
+      },
+    },
+    {
+      fieldName: 'workOrderCode',
+      label: '外协工单号',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入外协工单号',
+      },
+    },
+    {
+      fieldName: 'vendorId',
+      label: '供应商',
+      component: markRaw(MdVendorSelect),
+      componentProps: {
+        placeholder: '请选择供应商',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(
+          DICT_TYPE.MES_WM_OUTSOURCE_RECEIPT_STATUS,
+          'number',
+        ),
+        placeholder: '请选择单据状态',
+      },
+    },
+    {
+      fieldName: 'receiptDate',
+      label: '入库日期',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions<MesWmOutsourceReceiptApi.OutsourceReceipt>['columns'] {
+  return [
+    {
+      field: 'code',
+      title: '入库单编号',
+      minWidth: 160,
+      slots: { default: 'code' },
+    },
+    {
+      field: 'name',
+      title: '入库单名称',
+      minWidth: 150,
+    },
+    {
+      field: 'workOrderCode',
+      title: '外协工单号',
+      minWidth: 140,
+    },
+    {
+      field: 'vendorName',
+      title: '供应商名称',
+      minWidth: 120,
+    },
+    {
+      field: 'receiptDate',
+      title: '入库日期',
+      width: 180,
+      formatter: 'formatDate',
+    },
+    {
+      field: 'status',
+      title: '单据状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MES_WM_OUTSOURCE_RECEIPT_STATUS },
+      },
+    },
+    {
+      title: '操作',
+      width: 240,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 入库单行子表的字段 */
+export function useLineGridColumns(
+  editable: boolean,
+  stockable: boolean,
+): VxeTableGridOptions<MesWmOutsourceReceiptLineApi.OutsourceReceiptLine>['columns'] {
+  return [
+    {
+      type: 'expand',
+      width: 48,
+      slots: { content: 'detail' },
+    },
+    {
+      field: 'itemCode',
+      title: '物料编码',
+      minWidth: 120,
+    },
+    {
+      field: 'itemName',
+      title: '物料名称',
+      minWidth: 140,
+    },
+    {
+      field: 'specification',
+      title: '规格型号',
+      minWidth: 120,
+    },
+    {
+      field: 'unitMeasureName',
+      title: '单位',
+      width: 80,
+    },
+    {
+      field: 'quantity',
+      title: '入库数量',
+      width: 100,
+    },
+    {
+      field: 'batchCode',
+      title: '批次号',
+      minWidth: 120,
+    },
+    {
+      field: 'iqcCheckFlag',
+      title: '是否检验',
+      width: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
+      },
+    },
+    {
+      field: 'qualityStatus',
+      title: '质量状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MES_WM_QUALITY_STATUS },
+      },
+    },
+    ...(editable || stockable
+      ? [
+          {
+            title: '操作',
+            width: 180,
+            fixed: 'right',
+            slots: { default: 'actions' },
+          } as const,
+        ]
+      : []),
+  ];
+}
+
+/** 入库单行新增/修改的表单 */
+export function useLineFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'itemId',
+      label: '物料',
+      component: markRaw(MdItemSelect),
+      componentProps: {
+        placeholder: '请选择物料',
+      },
+      rules: 'selectRequired',
+    },
+    {
+      fieldName: 'quantity',
+      label: '入库数量',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        min: 0,
+        placeholder: '请输入入库数量',
+        precision: 2,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'batchCode',
+      label: '批次号',
+      component: 'Input',
+      componentProps: {
+        disabled: true,
+        placeholder: '系统自动生成',
+      },
+    },
+    {
+      fieldName: 'productionDate',
+      label: '生产日期',
+      component: 'DatePicker',
+      componentProps: {
+        class: '!w-full',
+        format: 'YYYY-MM-DD',
+        placeholder: '请选择生产日期',
+        valueFormat: 'x',
+      },
+    },
+    {
+      fieldName: 'expireDate',
+      label: '有效期',
+      component: 'DatePicker',
+      componentProps: {
+        class: '!w-full',
+        format: 'YYYY-MM-DD',
+        placeholder: '请选择有效期',
+        valueFormat: 'x',
+      },
+    },
+    {
+      fieldName: 'lotNumber',
+      label: '批号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入批号',
+      },
+    },
+    {
+      fieldName: 'iqcCheckFlag',
+      label: '是否质检',
+      component: 'Switch',
+      rules: z.boolean().default(false),
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      formItemClass: 'col-span-3',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 3,
+      },
+    },
+  ];
+}
+
+/** 入库明细子表的字段 */
+export function useDetailGridColumns(
+  editable: boolean,
+): VxeTableGridOptions<MesWmOutsourceReceiptDetailApi.OutsourceReceiptDetail>['columns'] {
+  return [
+    {
+      field: 'warehouseName',
+      title: '仓库名称',
+      minWidth: 100,
+    },
+    {
+      field: 'locationName',
+      title: '库区名称',
+      minWidth: 100,
+    },
+    {
+      field: 'areaName',
+      title: '库位名称',
+      minWidth: 100,
+    },
+    {
+      field: 'quantity',
+      title: '数量',
+      width: 100,
+    },
+    ...(editable
+      ? [
+          {
+            title: '操作',
+            width: 120,
+            fixed: 'right',
+            slots: { default: 'actions' },
+          } as const,
+        ]
+      : []),
+  ];
+}
+
+/** 入库明细新增/修改的表单 */
+export function useDetailFormSchema(formApi?: VbenFormApi): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'itemId',
+      label: '物料',
+      component: markRaw(MdItemSelect),
+      componentProps: {
+        disabled: true,
+      },
+    },
+    {
+      fieldName: 'batchCode',
+      label: '批次号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入批次号',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'warehouseId',
+      label: '入库仓库',
+      component: markRaw(WmWarehouseSelect),
+      componentProps: {
+        // 切换仓库后清空库区和库位
+        onChange: async () => {
+          await formApi?.setValues({
+            areaId: undefined,
+            locationId: undefined,
+          });
+        },
+        placeholder: '请选择仓库',
+      },
+      rules: 'selectRequired',
+    },
+    {
+      fieldName: 'locationId',
+      label: '库区',
+      component: markRaw(WmWarehouseLocationSelect),
+      componentProps: {
+        placeholder: '请选择库区',
+      },
+      rules: 'selectRequired',
+      dependencies: {
+        triggerFields: ['warehouseId'],
+        componentProps: (values) => ({
+          // 切换库区后清空库位
+          onChange: async () => {
+            await formApi?.setFieldValue('areaId', undefined);
+          },
+          placeholder: '请选择库区',
+          warehouseId: values.warehouseId,
+        }),
+      },
+    },
+    {
+      fieldName: 'areaId',
+      label: '库位',
+      component: markRaw(WmWarehouseAreaSelect),
+      componentProps: {
+        placeholder: '请选择库位',
+      },
+      rules: 'selectRequired',
+      dependencies: {
+        triggerFields: ['locationId'],
+        componentProps: (values) => ({
+          locationId: values.locationId,
+          placeholder: '请选择库位',
+        }),
+      },
+    },
+    {
+      fieldName: 'quantity',
+      label: '数量',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        min: 0,
+        placeholder: '请输入数量',
+        precision: 2,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      formItemClass: 'col-span-2',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 3,
+      },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/mes/wm/outsourcereceipt/index.vue b/apps/web-antd/src/views/mes/wm/outsourcereceipt/index.vue
new file mode 100644
index 000000000..ae1def5f0
--- /dev/null
+++ b/apps/web-antd/src/views/mes/wm/outsourcereceipt/index.vue
@@ -0,0 +1,209 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesWmOutsourceReceiptApi } from '#/api/mes/wm/outsourcereceipt';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { Button, message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  cancelOutsourceReceipt,
+  deleteOutsourceReceipt,
+  exportOutsourceReceipt,
+  getOutsourceReceiptPage,
+} from '#/api/mes/wm/outsourcereceipt';
+import { $t } from '#/locales';
+import { MesWmOutsourceReceiptStatusEnum } from '#/views/mes/utils/constants';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建外协入库单 */
+function handleCreate() {
+  formModalApi.setData({ formType: 'create' }).open();
+}
+
+/** 查看外协入库单 */
+function handleDetail(row: MesWmOutsourceReceiptApi.OutsourceReceipt) {
+  formModalApi.setData({ formType: 'detail', id: row.id }).open();
+}
+
+/** 编辑外协入库单 */
+function handleEdit(row: MesWmOutsourceReceiptApi.OutsourceReceipt) {
+  formModalApi.setData({ formType: 'update', id: row.id }).open();
+}
+
+/** 执行上架 */
+function handleStock(row: MesWmOutsourceReceiptApi.OutsourceReceipt) {
+  formModalApi.setData({ formType: 'stock', id: row.id }).open();
+}
+
+/** 完成入库 */
+function handleFinish(row: MesWmOutsourceReceiptApi.OutsourceReceipt) {
+  formModalApi.setData({ formType: 'finish', id: row.id }).open();
+}
+
+/** 删除外协入库单 */
+async function handleDelete(row: MesWmOutsourceReceiptApi.OutsourceReceipt) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.code]),
+    duration: 0,
+  });
+  try {
+    await deleteOutsourceReceipt(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.code]));
+    handleRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 取消外协入库单 */
+async function handleCancel(row: MesWmOutsourceReceiptApi.OutsourceReceipt) {
+  await cancelOutsourceReceipt(row.id!);
+  message.success('取消成功');
+  handleRefresh();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportOutsourceReceipt(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '外协入库单.xls', source: data });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getOutsourceReceiptPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MesWmOutsourceReceiptApi.OutsourceReceipt>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【仓库】外协发料、外协入库"
+        url="https://doc.iocoder.cn/mes/wm/outsource/"
+      />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+
+    <Grid table-title="外协入库单列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['外协入库单']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['mes:wm-outsource-receipt:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['mes:wm-outsource-receipt:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #code="{ row }">
+        <Button type="link" @click="handleDetail(row)">
+          {{ row.code }}
+        </Button>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['mes:wm-outsource-receipt:update'],
+              ifShow: row.status === MesWmOutsourceReceiptStatusEnum.PREPARE,
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['mes:wm-outsource-receipt:delete'],
+              ifShow: row.status === MesWmOutsourceReceiptStatusEnum.PREPARE,
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.code]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+            {
+              label: '执行上架',
+              type: 'link',
+              auth: ['mes:wm-outsource-receipt:update'],
+              ifShow: row.status === MesWmOutsourceReceiptStatusEnum.APPROVING,
+              onClick: handleStock.bind(null, row),
+            },
+            {
+              label: '完成入库',
+              type: 'link',
+              auth: ['mes:wm-outsource-receipt:finish'],
+              ifShow: row.status === MesWmOutsourceReceiptStatusEnum.APPROVED,
+              onClick: handleFinish.bind(null, row),
+            },
+            {
+              label: '取消',
+              type: 'link',
+              danger: true,
+              auth: ['mes:wm-outsource-receipt:update'],
+              ifShow:
+                row.status === MesWmOutsourceReceiptStatusEnum.APPROVING ||
+                row.status === MesWmOutsourceReceiptStatusEnum.APPROVED,
+              popConfirm: {
+                title: '确认取消该外协入库单？取消后不可恢复。',
+                confirm: handleCancel.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-antd/src/views/mes/wm/outsourcereceipt/modules/detail-form.vue b/apps/web-antd/src/views/mes/wm/outsourcereceipt/modules/detail-form.vue
new file mode 100644
index 000000000..750185705
--- /dev/null
+++ b/apps/web-antd/src/views/mes/wm/outsourcereceipt/modules/detail-form.vue
@@ -0,0 +1,103 @@
+<script lang="ts" setup>
+import type { MesWmOutsourceReceiptDetailApi } from '#/api/mes/wm/outsourcereceipt/detail';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createOutsourceReceiptDetail,
+  getOutsourceReceiptDetail,
+  updateOutsourceReceiptDetail,
+} from '#/api/mes/wm/outsourcereceipt/detail';
+import { $t } from '#/locales';
+
+import { useDetailFormSchema } from '../data';
+
+const emit = defineEmits<{ success: [lineId: number] }>();
+const formData = ref<MesWmOutsourceReceiptDetailApi.OutsourceReceiptDetail>();
+const receiptId = ref<number>(); // 所属入库单编号
+const lineId = ref<number>(); // 所属入库单行编号
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['收货明细'])
+    : $t('ui.actionTitle.create', ['收货明细']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-1',
+    labelWidth: 90,
+  },
+  layout: 'horizontal',
+  schema: useDetailFormSchema(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2',
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as MesWmOutsourceReceiptDetailApi.OutsourceReceiptDetail;
+    data.receiptId = receiptId.value;
+    data.lineId = lineId.value;
+    try {
+      await (formData.value?.id
+        ? updateOutsourceReceiptDetail({ ...data, id: formData.value.id })
+        : createOutsourceReceiptDetail(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success', lineId.value!);
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    formApi.setState({ schema: useDetailFormSchema(formApi) });
+    // 加载数据
+    const data = modalApi.getData<{
+      detailId?: number;
+      itemId?: number;
+      lineId: number;
+      receiptId: number;
+    }>();
+    receiptId.value = data.receiptId;
+    lineId.value = data.lineId;
+    if (data.detailId) {
+      modalApi.lock();
+      try {
+        formData.value = await getOutsourceReceiptDetail(data.detailId);
+        // 设置到 values
+        await formApi.setValues(formData.value);
+      } finally {
+        modalApi.unlock();
+      }
+    } else if (data.itemId) {
+      await formApi.setFieldValue('itemId', data.itemId);
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-1/2">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/mes/wm/outsourcereceipt/modules/detail-list.vue b/apps/web-antd/src/views/mes/wm/outsourcereceipt/modules/detail-list.vue
new file mode 100644
index 000000000..8fc1718d9
--- /dev/null
+++ b/apps/web-antd/src/views/mes/wm/outsourcereceipt/modules/detail-list.vue
@@ -0,0 +1,123 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesWmOutsourceReceiptDetailApi } from '#/api/mes/wm/outsourcereceipt/detail';
+
+import { computed, watch } from 'vue';
+
+import { message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteOutsourceReceiptDetail } from '#/api/mes/wm/outsourcereceipt/detail';
+import { $t } from '#/locales';
+
+import { type FormType, useDetailGridColumns } from '../data';
+
+const props = defineProps<{
+  details: MesWmOutsourceReceiptDetailApi.OutsourceReceiptDetail[];
+  formType: FormType;
+}>();
+
+const emit = defineEmits<{
+  edit: [detailId?: number];
+  refresh: [];
+}>();
+
+// TODO @AI：放到  “// 是否可维护收货明细（编辑或上架态）” 到 computed( 后面
+const isEditable = computed(
+  () => ['create', 'stock', 'update'].includes(props.formType),
+); // 是否可维护收货明细（编辑或上架态）
+
+/** 添加收货明细 */
+function handleCreate() {
+  emit('edit', undefined);
+}
+
+/** 编辑收货明细 */
+function handleEdit(row: MesWmOutsourceReceiptDetailApi.OutsourceReceiptDetail) {
+  emit('edit', row.id!);
+}
+
+/** 删除收货明细 */
+async function handleDelete(
+  row: MesWmOutsourceReceiptDetailApi.OutsourceReceiptDetail,
+) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.warehouseName]),
+    duration: 0,
+  });
+  try {
+    await deleteOutsourceReceiptDetail(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.warehouseName]));
+    emit('refresh');
+  } finally {
+    hideLoading();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    border: true,
+    columns: useDetailGridColumns(isEditable.value),
+    data: props.details,
+    pagerConfig: {
+      enabled: false,
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    size: 'small',
+    toolbarConfig: {
+      enabled: false,
+    },
+  } as VxeTableGridOptions<MesWmOutsourceReceiptDetailApi.OutsourceReceiptDetail>,
+});
+
+watch(
+  () => props.details,
+  (details) => gridApi.setGridOptions({ data: details }),
+);
+</script>
+
+<template>
+  <div class="px-4 py-2">
+    <TableAction
+      v-if="isEditable"
+      class="mb-2"
+      :actions="[
+        {
+          label: '添加明细',
+          type: 'primary',
+          icon: ACTION_ICON.ADD,
+          onClick: handleCreate,
+        },
+      ]"
+    />
+    <Grid>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [
+                  row.warehouseName,
+                ]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </div>
+</template>
diff --git a/apps/web-antd/src/views/mes/wm/outsourcereceipt/modules/form.vue b/apps/web-antd/src/views/mes/wm/outsourcereceipt/modules/form.vue
new file mode 100644
index 000000000..76879cb67
--- /dev/null
+++ b/apps/web-antd/src/views/mes/wm/outsourcereceipt/modules/form.vue
@@ -0,0 +1,230 @@
+<script lang="ts" setup>
+import type { FormType } from '../data';
+
+import type { MesWmOutsourceReceiptApi } from '#/api/mes/wm/outsourcereceipt';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Button, Divider, message, Popconfirm } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createOutsourceReceipt,
+  finishOutsourceReceipt,
+  getOutsourceReceipt,
+  stockOutsourceReceipt,
+  submitOutsourceReceipt,
+  updateOutsourceReceipt,
+} from '#/api/mes/wm/outsourcereceipt';
+import { $t } from '#/locales';
+import { MesWmOutsourceReceiptStatusEnum } from '#/views/mes/utils/constants';
+
+import { useFormSchema } from '../data';
+import LineList from './line-list.vue';
+
+const emit = defineEmits(['success']);
+const formType = ref<FormType>('create');
+const formData = ref<MesWmOutsourceReceiptApi.OutsourceReceipt>();
+const originalSnapshot = ref(''); // 表单原始数据快照，用于提交时跳过未变更的保存请求
+const isEditable = computed(() => // 是否为编辑模式（可保存）
+  ['create', 'update'].includes(formType.value),
+);
+const isStock = computed(() => formType.value === 'stock'); // 是否为上架模式
+const isFinish = computed(() => formType.value === 'finish'); // 是否为完成入库模式
+const canSubmit = computed(() => // 是否可提交
+  formType.value === 'update' &&
+  formData.value?.status === MesWmOutsourceReceiptStatusEnum.PREPARE,
+);
+// TODO @AI：方法的代码风格；
+const getTitle = computed(() => {
+  switch (formType.value) {
+    case 'detail': {
+      return $t('ui.actionTitle.view', ['外协入库单']);
+    }
+    case 'finish': {
+      return '完成入库';
+    }
+    case 'stock': {
+      return '执行上架';
+    }
+    case 'update': {
+      return $t('ui.actionTitle.edit', ['外协入库单']);
+    }
+    default: {
+      return $t('ui.actionTitle.create', ['外协入库单']);
+    }
+  }
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-1',
+    labelWidth: 110,
+  },
+  layout: 'horizontal',
+  schema: [],
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-3',
+});
+
+/** 提交入库单：表单有修改时先保存，再调用提交接口 */
+async function handleSubmit() {
+  const { valid } = await formApi.validate();
+  if (!valid || !formData.value?.id) {
+    return;
+  }
+  modalApi.lock();
+  try {
+    const current = JSON.stringify(await formApi.getValues());
+    if (current !== originalSnapshot.value) {
+      const data =
+        (await formApi.getValues()) as MesWmOutsourceReceiptApi.OutsourceReceipt;
+      await updateOutsourceReceipt({ ...formData.value, ...data });
+      originalSnapshot.value = current;
+    }
+    await submitOutsourceReceipt(formData.value.id);
+    message.success('提交成功');
+    await modalApi.close();
+    emit('success');
+  } finally {
+    modalApi.unlock();
+  }
+}
+
+/** 执行上架 */
+async function handleStock() {
+  if (!formData.value?.id) {
+    return;
+  }
+  modalApi.lock();
+  try {
+    await stockOutsourceReceipt(formData.value.id);
+    message.success('上架成功');
+    await modalApi.close();
+    emit('success');
+  } finally {
+    modalApi.unlock();
+  }
+}
+
+/** 完成入库 */
+async function handleFinish() {
+  if (!formData.value?.id) {
+    return;
+  }
+  modalApi.lock();
+  try {
+    await finishOutsourceReceipt(formData.value.id);
+    message.success('入库成功');
+    await modalApi.close();
+    emit('success');
+  } finally {
+    modalApi.unlock();
+  }
+}
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    if (!isEditable.value) {
+      await modalApi.close();
+      return;
+    }
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as MesWmOutsourceReceiptApi.OutsourceReceipt;
+    try {
+      if (formData.value?.id) {
+        await updateOutsourceReceipt({ ...formData.value, ...data });
+        formData.value = { ...formData.value, ...data };
+      } else {
+        const id = await createOutsourceReceipt(data);
+        formData.value = {
+          ...data,
+          id,
+          status: MesWmOutsourceReceiptStatusEnum.PREPARE,
+        };
+        await formApi.setFieldValue('id', id);
+        await formApi.setFieldValue('status', formData.value.status);
+        formType.value = 'update';
+      }
+      originalSnapshot.value = JSON.stringify(await formApi.getValues());
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      originalSnapshot.value = '';
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<{ formType: FormType; id?: number }>();
+    formType.value = data.formType;
+    formApi.setState({ schema: useFormSchema(formType.value, formApi) });
+    formApi.setDisabled(!isEditable.value);
+    modalApi.setState({ showConfirmButton: isEditable.value });
+    if (data?.id) {
+      modalApi.lock();
+      try {
+        formData.value = await getOutsourceReceipt(data.id);
+        // 设置到 values
+        await formApi.setValues(formData.value);
+      } finally {
+        modalApi.unlock();
+      }
+    }
+    originalSnapshot.value = JSON.stringify(await formApi.getValues());
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-3/5">
+    <Form class="mx-4" />
+    <!-- 非新建模式展示物料信息 -->
+    <template v-if="formData?.id">
+      <Divider>物料信息</Divider>
+      <div class="mx-4">
+        <LineList :form-type="formType" :receipt-id="formData.id" />
+      </div>
+    </template>
+    <template #prepend-footer>
+      <div class="flex flex-auto items-center gap-2">
+        <Popconfirm
+          v-if="canSubmit"
+          title="确认提交该外协入库单？【提交后将不能修改】"
+          @confirm="handleSubmit"
+        >
+          <Button type="primary">提交</Button>
+        </Popconfirm>
+        <Popconfirm
+          v-if="isStock"
+          title="确认执行上架？"
+          @confirm="handleStock"
+        >
+          <Button type="primary">执行上架</Button>
+        </Popconfirm>
+        <Popconfirm
+          v-if="isFinish"
+          title="确认完成入库？完成后将更新库存台账。"
+          @confirm="handleFinish"
+        >
+          <Button type="primary">完成入库</Button>
+        </Popconfirm>
+      </div>
+    </template>
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/mes/wm/outsourcereceipt/modules/line-form.vue b/apps/web-antd/src/views/mes/wm/outsourcereceipt/modules/line-form.vue
new file mode 100644
index 000000000..e2b9d6541
--- /dev/null
+++ b/apps/web-antd/src/views/mes/wm/outsourcereceipt/modules/line-form.vue
@@ -0,0 +1,99 @@
+<script lang="ts" setup>
+import type { MesWmOutsourceReceiptLineApi } from '#/api/mes/wm/outsourcereceipt/line';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createOutsourceReceiptLine,
+  getOutsourceReceiptLine,
+  updateOutsourceReceiptLine,
+} from '#/api/mes/wm/outsourcereceipt/line';
+import { $t } from '#/locales';
+
+import { useLineFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<MesWmOutsourceReceiptLineApi.OutsourceReceiptLine>();
+const receiptId = ref<number>(); // 所属入库单编号
+
+// TODO @AI：如果 getTitle 方法的前面，也是 const 变量，不用空行？是不是更符合项目规范？如果是，写到 style vue 文件里；
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['外协入库单行'])
+    : $t('ui.actionTitle.create', ['外协入库单行']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-1',
+    labelWidth: 90,
+  },
+  layout: 'horizontal',
+  schema: useLineFormSchema(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-3',
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单（批次号由后端自动生成，不提交）
+    const data =
+      (await formApi.getValues()) as MesWmOutsourceReceiptLineApi.OutsourceReceiptLine;
+    data.receiptId = receiptId.value;
+    delete data.batchCode;
+    try {
+      await (formData.value?.id
+        ? updateOutsourceReceiptLine({ ...data, id: formData.value.id })
+        : createOutsourceReceiptLine(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<{
+      id?: number;
+      receiptId: number;
+    }>();
+    receiptId.value = data.receiptId;
+    if (!data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getOutsourceReceiptLine(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-3/5">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/mes/wm/outsourcereceipt/modules/line-list.vue b/apps/web-antd/src/views/mes/wm/outsourcereceipt/modules/line-list.vue
new file mode 100644
index 000000000..23e00bf2e
--- /dev/null
+++ b/apps/web-antd/src/views/mes/wm/outsourcereceipt/modules/line-list.vue
@@ -0,0 +1,233 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesWmOutsourceReceiptDetailApi } from '#/api/mes/wm/outsourcereceipt/detail';
+import type { MesWmOutsourceReceiptLineApi } from '#/api/mes/wm/outsourcereceipt/line';
+
+import { computed, reactive } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getOutsourceReceiptDetailListByLineId } from '#/api/mes/wm/outsourcereceipt/detail';
+import {
+  deleteOutsourceReceiptLine,
+  getOutsourceReceiptLinePage,
+} from '#/api/mes/wm/outsourcereceipt/line';
+import { $t } from '#/locales';
+import { PrinterLabel } from '#/views/mes/wm/barcode/components';
+
+import { type FormType, useLineGridColumns } from '../data';
+import DetailForm from './detail-form.vue';
+import DetailList from './detail-list.vue';
+import LineForm from './line-form.vue';
+
+const props = defineProps<{
+  formType: FormType;
+  receiptId: number;
+}>();
+
+const isEditable = computed(() =>
+  ['create', 'update'].includes(props.formType),
+); // 是否可编辑明细行
+const isStock = computed(() => props.formType === 'stock'); // 是否为上架模式
+const detailMap = reactive<
+  Record<number, MesWmOutsourceReceiptDetailApi.OutsourceReceiptDetail[]>
+>({}); // 已展开行的收货明细缓存
+
+const [LineFormModal, lineFormModalApi] = useVbenModal({
+  connectedComponent: LineForm,
+  destroyOnClose: true,
+});
+
+const [DetailFormModal, detailFormModalApi] = useVbenModal({
+  connectedComponent: DetailForm,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  for (const id of Object.keys(detailMap)) {
+    delete detailMap[Number(id)];
+  }
+  gridApi.query();
+}
+
+/** 添加物料 */
+function handleCreate() {
+  lineFormModalApi.setData({ receiptId: props.receiptId }).open();
+}
+
+/** 编辑物料 */
+function handleEdit(row: MesWmOutsourceReceiptLineApi.OutsourceReceiptLine) {
+  lineFormModalApi.setData({ id: row.id, receiptId: props.receiptId }).open();
+}
+
+/** 删除物料 */
+async function handleDelete(
+  row: MesWmOutsourceReceiptLineApi.OutsourceReceiptLine,
+) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.itemName]),
+    duration: 0,
+  });
+  try {
+    await deleteOutsourceReceiptLine(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.itemName]));
+    handleRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 上架：直接打开明细创建表单 */
+function handlePicking(row: MesWmOutsourceReceiptLineApi.OutsourceReceiptLine) {
+  openDetailForm(row.id!, row.itemId);
+}
+
+/** 打开收货明细表单 */
+function openDetailForm(lineId: number, itemId?: number, detailId?: number) {
+  detailFormModalApi
+    .setData({ detailId, itemId, lineId, receiptId: props.receiptId })
+    .open();
+}
+
+/** 获取已展开行的收货明细 */
+function getExpandedDetails(
+  row: MesWmOutsourceReceiptLineApi.OutsourceReceiptLine,
+) {
+  return detailMap[row.id!] || [];
+}
+
+/** 加载指定行的收货明细 */
+async function loadLineDetails(lineId: number) {
+  detailMap[lineId] = await getOutsourceReceiptDetailListByLineId(lineId);
+}
+
+/** 展开行时懒加载收货明细 */
+async function handleExpandChange(
+  row: MesWmOutsourceReceiptLineApi.OutsourceReceiptLine,
+  expanded: boolean,
+) {
+  if (!expanded) {
+    return;
+  }
+  await loadLineDetails(row.id!);
+}
+
+/** 明细表单提交成功后，刷新对应行已展开的明细 */
+async function handleDetailSuccess(lineId: number) {
+  await loadLineDetails(lineId);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useLineGridColumns(isEditable.value, isStock.value),
+    expandConfig: {
+      padding: true,
+    },
+    height: 400,
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }) => {
+          if (!props.receiptId) {
+            return { list: [], total: 0 };
+          }
+          return await getOutsourceReceiptLinePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            receiptId: props.receiptId,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+    },
+  } as VxeTableGridOptions<MesWmOutsourceReceiptLineApi.OutsourceReceiptLine>,
+  gridEvents: {
+    toggleRowExpand: ({
+      expanded,
+      row,
+    }: {
+      expanded: boolean;
+      row: MesWmOutsourceReceiptLineApi.OutsourceReceiptLine;
+    }) => {
+      handleExpandChange(row, expanded);
+    },
+  },
+});
+</script>
+
+<template>
+  <div>
+    <LineFormModal @success="handleRefresh" />
+    <DetailFormModal @success="handleDetailSuccess" />
+    <Grid table-title="物料信息">
+      <template v-if="isEditable" #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: '添加物料',
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #detail="{ row }">
+        <DetailList
+          :details="getExpandedDetails(row)"
+          :form-type="formType"
+          @edit="(detailId) => openDetailForm(row.id!, row.itemId, detailId)"
+          @refresh="loadLineDetails(row.id!)"
+        />
+      </template>
+      <template #actions="{ row }">
+        <div class="flex items-center justify-center">
+          <TableAction
+            :actions="[
+              {
+                label: $t('common.edit'),
+                type: 'link',
+                icon: ACTION_ICON.EDIT,
+                ifShow: isEditable,
+                onClick: handleEdit.bind(null, row),
+              },
+              {
+                label: $t('common.delete'),
+                type: 'link',
+                danger: true,
+                icon: ACTION_ICON.DELETE,
+                ifShow: isEditable,
+                popConfirm: {
+                  title: $t('ui.actionMessage.deleteConfirm', [row.itemName]),
+                  confirm: handleDelete.bind(null, row),
+                },
+              },
+              {
+                label: '上架',
+                type: 'link',
+                ifShow: isStock,
+                onClick: handlePicking.bind(null, row),
+              },
+            ]"
+          />
+          <PrinterLabel
+            v-if="isStock"
+            :biz-code="row.batchCode"
+            :biz-id="row.batchId"
+            biz-type="BATCH"
+          />
+        </div>
+      </template>
+    </Grid>
+  </div>
+</template>
diff --git a/apps/web-ele/src/api/mes/pro/card/index.ts b/apps/web-ele/src/api/mes/pro/card/index.ts
index 06c6cb04f..a9d123cc3 100644
--- a/apps/web-ele/src/api/mes/pro/card/index.ts
+++ b/apps/web-ele/src/api/mes/pro/card/index.ts
@@ -42,3 +42,38 @@ export function getCardPage(params: MesProCardApi.PageParams) {
 export function getCard(id: number) {
   return requestClient.get<MesProCardApi.Card>(`/mes/pro/card/get?id=${id}`);
 }
+
+/** 新增生产流转卡 */
+export function createCard(data: MesProCardApi.Card) {
+  return requestClient.post<number>('/mes/pro/card/create', data);
+}
+
+/** 修改生产流转卡 */
+export function updateCard(data: MesProCardApi.Card) {
+  return requestClient.put('/mes/pro/card/update', data);
+}
+
+/** 删除生产流转卡 */
+export function deleteCard(id: number) {
+  return requestClient.delete(`/mes/pro/card/delete?id=${id}`);
+}
+
+/** 导出生产流转卡 */
+export function exportCard(params: any) {
+  return requestClient.download('/mes/pro/card/export-excel', { params });
+}
+
+/** 提交生产流转卡 */
+export function submitCard(id: number) {
+  return requestClient.put(`/mes/pro/card/submit?id=${id}`);
+}
+
+/** 完成生产流转卡 */
+export function finishCard(id: number) {
+  return requestClient.put(`/mes/pro/card/finish?id=${id}`);
+}
+
+/** 取消生产流转卡 */
+export function cancelCard(id: number) {
+  return requestClient.put(`/mes/pro/card/cancel?id=${id}`);
+}
diff --git a/apps/web-ele/src/api/mes/pro/task/index.ts b/apps/web-ele/src/api/mes/pro/task/index.ts
index d7bfd2f5e..5e160c840 100644
--- a/apps/web-ele/src/api/mes/pro/task/index.ts
+++ b/apps/web-ele/src/api/mes/pro/task/index.ts
@@ -48,6 +48,8 @@ export namespace MesProTaskApi {
     name?: string;
     workOrderId?: number;
     workstationId?: number;
+    routeId?: number;
+    processId?: number;
     itemId?: number;
     statuses?: number[];
     status?: number;
@@ -66,3 +68,28 @@ export function getTaskPage(params: MesProTaskApi.PageParams) {
 export function getTask(id: number) {
   return requestClient.get<MesProTaskApi.Task>(`/mes/pro/task/get?id=${id}`);
 }
+
+/** 新增生产任务 */
+export function createTask(data: MesProTaskApi.Task) {
+  return requestClient.post('/mes/pro/task/create', data);
+}
+
+/** 修改生产任务 */
+export function updateTask(data: MesProTaskApi.Task) {
+  return requestClient.put('/mes/pro/task/update', data);
+}
+
+/** 删除生产任务 */
+export function deleteTask(id: number) {
+  return requestClient.delete(`/mes/pro/task/delete?id=${id}`);
+}
+
+/** 导出生产任务 */
+export function exportTask(params: any) {
+  return requestClient.download('/mes/pro/task/export-excel', { params });
+}
+
+/** 查询甘特图任务列表（非分页） */
+export function getGanttTaskList(params: any) {
+  return requestClient.get<any[]>('/mes/pro/task/gantt-list', { params });
+}
diff --git a/apps/web-ele/src/api/mes/pro/workorder/index.ts b/apps/web-ele/src/api/mes/pro/workorder/index.ts
index 24de7d057..c4c0a152a 100644
--- a/apps/web-ele/src/api/mes/pro/workorder/index.ts
+++ b/apps/web-ele/src/api/mes/pro/workorder/index.ts
@@ -5,37 +5,48 @@ import { requestClient } from '#/api/request';
 export namespace MesProWorkOrderApi {
   /** MES 生产工单 */
   export interface WorkOrder {
-    id?: number;
+    id?: number; // 编号
     code?: string; // 工单编码
     name?: string; // 工单名称
     type?: number; // 工单类型
-    status?: number; // 工单状态
-    sourceType?: number;
-    productId?: number; // 产品物料编号
-    productCode?: string;
-    productName?: string;
-    productSpecification?: string;
-    quantity?: number;
-    unitName?: string;
-    routeId?: number;
-    routeName?: string;
-    clientId?: number;
-    clientName?: string;
+    orderSourceType?: number; // 来源类型
+    orderSourceCode?: string; // 来源单据编号
+    productId?: number; // 产品编号
+    productName?: string; // 产品名称
+    productCode?: string; // 产品编码
+    productSpecification?: string; // 规格型号
+    unitMeasureName?: string; // 单位名称
+    quantity?: number; // 生产数量
+    quantityProduced?: number; // 已生产数量
+    quantityChanged?: number; // 调整数量
+    quantityScheduled?: number; // 已排产数量
+    clientId?: number; // 客户编号
+    clientCode?: string; // 客户编码
+    clientName?: string; // 客户名称
     vendorId?: number; // 供应商编号
     vendorName?: string; // 供应商名称
-    planStartTime?: number | string;
-    planEndTime?: number | string;
-    actualStartTime?: number | string;
-    actualEndTime?: number | string;
-    remark?: string;
-    createTime?: number | string;
+    vendorCode?: string; // 供应商编码
+    batchCode?: string; // 批次号
+    requestDate?: number; // 需求日期
+    parentId?: number; // 父工单编号
+    parentCode?: string; // 父工单编码
+    finishDate?: number; // 完成时间
+    cancelDate?: number; // 取消时间
+    status?: number; // 工单状态
+    remark?: string; // 备注
+    createTime?: number; // 创建时间
   }
 
+  /** MES 生产工单分页查询参数 */
   export interface PageParams extends PageParam {
     code?: string;
     name?: string;
+    orderSourceCode?: string;
+    productId?: number;
+    clientId?: number;
     status?: number;
     type?: number;
+    requestDate?: number[];
   }
 }
 
@@ -53,3 +64,38 @@ export function getWorkOrder(id: number) {
     `/mes/pro/work-order/get?id=${id}`,
   );
 }
+
+/** 新增生产工单 */
+export function createWorkOrder(data: MesProWorkOrderApi.WorkOrder) {
+  return requestClient.post<number>('/mes/pro/work-order/create', data);
+}
+
+/** 修改生产工单 */
+export function updateWorkOrder(data: MesProWorkOrderApi.WorkOrder) {
+  return requestClient.put('/mes/pro/work-order/update', data);
+}
+
+/** 删除生产工单 */
+export function deleteWorkOrder(id: number) {
+  return requestClient.delete(`/mes/pro/work-order/delete?id=${id}`);
+}
+
+/** 导出生产工单 */
+export function exportWorkOrder(params: any) {
+  return requestClient.download('/mes/pro/work-order/export-excel', { params });
+}
+
+/** 完成工单 */
+export function finishWorkOrder(id: number) {
+  return requestClient.put(`/mes/pro/work-order/finish?id=${id}`);
+}
+
+/** 取消工单 */
+export function cancelWorkOrder(id: number) {
+  return requestClient.put(`/mes/pro/work-order/cancel?id=${id}`);
+}
+
+/** 确认工单 */
+export function confirmWorkOrder(id: number) {
+  return requestClient.put(`/mes/pro/work-order/confirm?id=${id}`);
+}
diff --git a/apps/web-ele/src/views/mes/utils/constants.ts b/apps/web-ele/src/views/mes/utils/constants.ts
index 19315fc41..08b97af14 100644
--- a/apps/web-ele/src/views/mes/utils/constants.ts
+++ b/apps/web-ele/src/views/mes/utils/constants.ts
@@ -225,6 +225,12 @@ export const MesProWorkOrderTypeEnum = {
   PURCHASE: 3, // 采购
 } as const;
 
+/** MES 工单来源类型枚举 */
+export const MesProWorkOrderSourceTypeEnum = {
+  ORDER: 1, // 客户订单
+  STORE: 2, // 库存备货
+} as const;
+
 /** MES 生产任务状态枚举 */
 export const MesProTaskStatusEnum = {
   PREPARE: MesOrderStatusConstants.DRAFT,
diff --git a/apps/web-ele/src/views/mes/wm/outsourceissue/data.ts b/apps/web-ele/src/views/mes/wm/outsourceissue/data.ts
new file mode 100644
index 000000000..67abe167e
--- /dev/null
+++ b/apps/web-ele/src/views/mes/wm/outsourceissue/data.ts
@@ -0,0 +1,491 @@
+import type { VbenFormApi, VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesProWorkOrderApi } from '#/api/mes/pro/workorder';
+import type { MesWmMaterialStockApi } from '#/api/mes/wm/materialstock';
+import type { MesWmOutsourceIssueApi } from '#/api/mes/wm/outsourceissue';
+import type { MesWmOutsourceIssueDetailApi } from '#/api/mes/wm/outsourceissue/detail';
+import type { MesWmOutsourceIssueLineApi } from '#/api/mes/wm/outsourceissue/line';
+
+import { h, markRaw } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+
+import { ElButton } from 'element-plus';
+
+import { generateAutoCode } from '#/api/mes/md/autocode/record';
+import { getRangePickerDefaultProps } from '#/utils';
+import MdItemSelect from '#/views/mes/md/item/components/md-item-select.vue';
+import MdVendorSelect from '#/views/mes/md/vendor/components/md-vendor-select.vue';
+import ProWorkOrderSelect from '#/views/mes/pro/workorder/components/pro-work-order-select.vue';
+import {
+  MesAutoCodeRuleCode,
+  MesProWorkOrderStatusEnum,
+  MesProWorkOrderTypeEnum,
+} from '#/views/mes/utils/constants';
+import { WmMaterialStockSelect } from '#/views/mes/wm/materialstock/components';
+import {
+  WmWarehouseAreaSelect,
+  WmWarehouseLocationSelect,
+  WmWarehouseSelect,
+} from '#/views/mes/wm/warehouse/components';
+
+/** 表单类型 */
+export type FormType = 'create' | 'detail' | 'finish' | 'stock' | 'update';
+
+/** 表单头部是否只读（拣货、详情、领出态） */
+function isHeaderReadonly(formType: FormType): boolean {
+  return (
+    formType === 'detail' || formType === 'finish' || formType === 'stock'
+  );
+}
+
+/** 新增/修改的表单 */
+export function useFormSchema(
+  formType: FormType,
+  formApi?: VbenFormApi,
+): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'status',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'code',
+      label: '发料单编号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入发料单编号',
+      },
+      rules: 'required',
+      suffix: isHeaderReadonly(formType)
+        ? undefined
+        : () =>
+            h(
+              ElButton,
+              {
+                onClick: async () => {
+                  const code = await generateAutoCode(
+                    MesAutoCodeRuleCode.WM_OUTSOURCE_ISSUE_CODE,
+                  );
+                  await formApi?.setFieldValue('code', code);
+                },
+              },
+              { default: () => '生成' },
+            ),
+    },
+    {
+      fieldName: 'name',
+      label: '发料单名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入发料单名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'issueDate',
+      label: '发料日期',
+      component: 'DatePicker',
+      componentProps: {
+        format: 'YYYY-MM-DD',
+        placeholder: '请选择发料日期',
+        type: 'date',
+        valueFormat: 'x',
+      },
+    },
+    {
+      fieldName: 'workOrderId',
+      label: '外协工单',
+      component: markRaw(ProWorkOrderSelect),
+      componentProps: {
+        // 选择外协工单后，自动回填供应商
+        onChange: async (workOrder?: MesProWorkOrderApi.WorkOrder) => {
+          await formApi?.setFieldValue('vendorId', workOrder?.vendorId);
+        },
+        status: MesProWorkOrderStatusEnum.CONFIRMED,
+        type: MesProWorkOrderTypeEnum.OUTSOURCE,
+      },
+      rules: 'selectRequired',
+    },
+    {
+      fieldName: 'vendorId',
+      label: '供应商',
+      component: markRaw(MdVendorSelect),
+      componentProps: {
+        placeholder: '请选择供应商',
+      },
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      formItemClass: 'col-span-3',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 3,
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'code',
+      label: '发料单编号',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入发料单编号',
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '发料单名称',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入发料单名称',
+      },
+    },
+    {
+      fieldName: 'vendorId',
+      label: '供应商',
+      component: markRaw(MdVendorSelect),
+      componentProps: {
+        placeholder: '请选择供应商',
+      },
+    },
+    {
+      fieldName: 'issueDate',
+      label: '发料日期',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        clearable: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions<MesWmOutsourceIssueApi.OutsourceIssue>['columns'] {
+  return [
+    {
+      field: 'code',
+      title: '发料单编号',
+      minWidth: 160,
+      slots: { default: 'code' },
+    },
+    {
+      field: 'name',
+      title: '发料单名称',
+      minWidth: 150,
+    },
+    {
+      field: 'workOrderCode',
+      title: '生产工单号',
+      minWidth: 140,
+    },
+    {
+      field: 'vendorName',
+      title: '供应商名称',
+      minWidth: 120,
+    },
+    {
+      field: 'issueDate',
+      title: '发料日期',
+      width: 180,
+      formatter: 'formatDate',
+    },
+    {
+      field: 'status',
+      title: '单据状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MES_WM_OUTSOURCE_ISSUE_STATUS },
+      },
+    },
+    {
+      title: '操作',
+      width: 240,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 发料单行子表的字段 */
+export function useLineGridColumns(
+  editable: boolean,
+  stockable: boolean,
+): VxeTableGridOptions<MesWmOutsourceIssueLineApi.OutsourceIssueLine>['columns'] {
+  return [
+    {
+      type: 'expand',
+      width: 48,
+      slots: { content: 'detail' },
+    },
+    {
+      field: 'itemCode',
+      title: '物料编码',
+      minWidth: 120,
+    },
+    {
+      field: 'itemName',
+      title: '物料名称',
+      minWidth: 140,
+    },
+    {
+      field: 'specification',
+      title: '规格型号',
+      minWidth: 120,
+    },
+    {
+      field: 'unitMeasureName',
+      title: '单位',
+      width: 80,
+    },
+    {
+      field: 'quantity',
+      title: '领料数量',
+      width: 100,
+    },
+    {
+      field: 'batchCode',
+      title: '批次号',
+      minWidth: 120,
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 150,
+    },
+    ...(editable || stockable
+      ? [
+          {
+            title: '操作',
+            width: 160,
+            fixed: 'right',
+            slots: { default: 'actions' },
+          } as const,
+        ]
+      : []),
+  ];
+}
+
+/** 发料单行新增/修改的表单 */
+export function useLineFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'itemId',
+      label: '物料',
+      component: markRaw(MdItemSelect),
+      componentProps: {
+        placeholder: '请选择物料',
+      },
+      rules: 'selectRequired',
+    },
+    {
+      fieldName: 'quantity',
+      label: '发料数量',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        controlsPosition: 'right',
+        min: 0,
+        placeholder: '请输入发料数量',
+        precision: 2,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'batchCode',
+      label: '批次号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入批次号',
+      },
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      formItemClass: 'col-span-3',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 3,
+      },
+    },
+  ];
+}
+
+/** 发料明细子表的字段 */
+export function useDetailGridColumns(
+  stockable: boolean,
+): VxeTableGridOptions<MesWmOutsourceIssueDetailApi.OutsourceIssueDetail>['columns'] {
+  return [
+    {
+      field: 'warehouseName',
+      title: '仓库名称',
+      minWidth: 100,
+    },
+    {
+      field: 'locationName',
+      title: '库区名称',
+      minWidth: 100,
+    },
+    {
+      field: 'areaName',
+      title: '库位名称',
+      minWidth: 100,
+    },
+    {
+      field: 'quantity',
+      title: '数量',
+      width: 100,
+    },
+    ...(stockable
+      ? [
+          {
+            title: '操作',
+            width: 120,
+            fixed: 'right',
+            slots: { default: 'actions' },
+          } as const,
+        ]
+      : []),
+  ];
+}
+
+/** 发料明细新增/修改的表单 */
+export function useDetailFormSchema(formApi?: VbenFormApi): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'quantityMax',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'materialStockId',
+      label: '库存记录',
+      component: markRaw(WmMaterialStockSelect),
+      componentProps: {
+        // 选择库存记录后，自动回填仓库/库区/库位/批次/数量
+        onChange: async (stock?: MesWmMaterialStockApi.MaterialStock) => {
+          await formApi?.setValues({
+            areaId: stock?.areaId,
+            batchCode: stock?.batchCode,
+            batchId: stock?.batchId,
+            locationId: stock?.locationId,
+            quantity: stock?.quantity,
+            quantityMax: stock?.quantity,
+            warehouseId: stock?.warehouseId,
+          });
+        },
+      },
+      rules: 'selectRequired',
+      dependencies: {
+        triggerFields: ['itemId'],
+        componentProps: (values) => ({
+          itemId: values.itemId,
+        }),
+      },
+    },
+    {
+      fieldName: 'itemId',
+      label: '物料',
+      component: markRaw(MdItemSelect),
+      componentProps: {
+        disabled: true,
+      },
+    },
+    {
+      fieldName: 'quantity',
+      label: '数量',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        controlsPosition: 'right',
+        min: 0,
+        placeholder: '请输入数量',
+        precision: 2,
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['quantityMax'],
+        componentProps: (values) => ({
+          class: '!w-full',
+          controlsPosition: 'right',
+          max: values.quantityMax,
+          min: 0,
+          placeholder: '请输入数量',
+          precision: 2,
+        }),
+      },
+    },
+    {
+      fieldName: 'warehouseId',
+      label: '发料仓库',
+      component: markRaw(WmWarehouseSelect),
+      componentProps: {
+        disabled: true,
+      },
+    },
+    {
+      fieldName: 'locationId',
+      label: '库区',
+      component: markRaw(WmWarehouseLocationSelect),
+      componentProps: {
+        disabled: true,
+      },
+      dependencies: {
+        triggerFields: ['warehouseId'],
+        componentProps: (values) => ({
+          disabled: true,
+          warehouseId: values.warehouseId,
+        }),
+      },
+    },
+    {
+      fieldName: 'areaId',
+      label: '库位',
+      component: markRaw(WmWarehouseAreaSelect),
+      componentProps: {
+        disabled: true,
+      },
+      dependencies: {
+        triggerFields: ['locationId'],
+        componentProps: (values) => ({
+          disabled: true,
+          locationId: values.locationId,
+        }),
+      },
+    },
+    {
+      fieldName: 'batchCode',
+      label: '批次号',
+      component: 'Input',
+      componentProps: {
+        disabled: true,
+      },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/mes/wm/outsourceissue/index.vue b/apps/web-ele/src/views/mes/wm/outsourceissue/index.vue
new file mode 100644
index 000000000..c241d9808
--- /dev/null
+++ b/apps/web-ele/src/views/mes/wm/outsourceissue/index.vue
@@ -0,0 +1,211 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesWmOutsourceIssueApi } from '#/api/mes/wm/outsourceissue';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { ElButton, ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  cancelOutsourceIssue,
+  deleteOutsourceIssue,
+  exportOutsourceIssue,
+  getOutsourceIssuePage,
+} from '#/api/mes/wm/outsourceissue';
+import { $t } from '#/locales';
+import { MesWmOutsourceIssueStatusEnum } from '#/views/mes/utils/constants';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建外协发料单 */
+function handleCreate() {
+  formModalApi.setData({ formType: 'create' }).open();
+}
+
+/** 查看外协发料单 */
+function handleDetail(row: MesWmOutsourceIssueApi.OutsourceIssue) {
+  formModalApi.setData({ formType: 'detail', id: row.id }).open();
+}
+
+/** 编辑外协发料单 */
+function handleEdit(row: MesWmOutsourceIssueApi.OutsourceIssue) {
+  formModalApi.setData({ formType: 'update', id: row.id }).open();
+}
+
+/** 执行拣货 */
+function handleStock(row: MesWmOutsourceIssueApi.OutsourceIssue) {
+  formModalApi.setData({ formType: 'stock', id: row.id }).open();
+}
+
+/** 执行领出 */
+function handleFinish(row: MesWmOutsourceIssueApi.OutsourceIssue) {
+  formModalApi.setData({ formType: 'finish', id: row.id }).open();
+}
+
+/** 删除外协发料单 */
+async function handleDelete(row: MesWmOutsourceIssueApi.OutsourceIssue) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.code]),
+  });
+  try {
+    await deleteOutsourceIssue(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.code]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 取消外协发料单 */
+async function handleCancel(row: MesWmOutsourceIssueApi.OutsourceIssue) {
+  await cancelOutsourceIssue(row.id!);
+  ElMessage.success('取消成功');
+  handleRefresh();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportOutsourceIssue(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '外协发料单.xls', source: data });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getOutsourceIssuePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MesWmOutsourceIssueApi.OutsourceIssue>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【仓库】外协发料、外协入库"
+        url="https://doc.iocoder.cn/mes/wm/outsource/"
+      />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+
+    <Grid table-title="外协发料单列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['外协发料单']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['mes:wm-outsource-issue:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['mes:wm-outsource-issue:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #code="{ row }">
+        <ElButton link type="primary" @click="handleDetail(row)">
+          {{ row.code }}
+        </ElButton>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['mes:wm-outsource-issue:update'],
+              ifShow: row.status === MesWmOutsourceIssueStatusEnum.PREPARE,
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['mes:wm-outsource-issue:delete'],
+              ifShow: row.status === MesWmOutsourceIssueStatusEnum.PREPARE,
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.code]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+            {
+              label: '执行拣货',
+              type: 'primary',
+              link: true,
+              auth: ['mes:wm-outsource-issue:update'],
+              ifShow: row.status === MesWmOutsourceIssueStatusEnum.APPROVING,
+              onClick: handleStock.bind(null, row),
+            },
+            {
+              label: '执行领出',
+              type: 'primary',
+              link: true,
+              auth: ['mes:wm-outsource-issue:finish'],
+              ifShow: row.status === MesWmOutsourceIssueStatusEnum.APPROVED,
+              onClick: handleFinish.bind(null, row),
+            },
+            {
+              label: '取消',
+              type: 'danger',
+              link: true,
+              auth: ['mes:wm-outsource-issue:update'],
+              ifShow:
+                row.status === MesWmOutsourceIssueStatusEnum.APPROVING ||
+                row.status === MesWmOutsourceIssueStatusEnum.APPROVED,
+              popConfirm: {
+                title: '确认取消该外协发料单？取消后不可恢复。',
+                confirm: handleCancel.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/mes/wm/outsourceissue/modules/detail-form.vue b/apps/web-ele/src/views/mes/wm/outsourceissue/modules/detail-form.vue
new file mode 100644
index 000000000..803fb3c7a
--- /dev/null
+++ b/apps/web-ele/src/views/mes/wm/outsourceissue/modules/detail-form.vue
@@ -0,0 +1,104 @@
+<script lang="ts" setup>
+import type { MesWmOutsourceIssueDetailApi } from '#/api/mes/wm/outsourceissue/detail';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createOutsourceIssueDetail,
+  getOutsourceIssueDetail,
+  updateOutsourceIssueDetail,
+} from '#/api/mes/wm/outsourceissue/detail';
+import { $t } from '#/locales';
+
+import { useDetailFormSchema } from '../data';
+
+const emit = defineEmits<{ success: [lineId: number] }>();
+const formData = ref<MesWmOutsourceIssueDetailApi.OutsourceIssueDetail>();
+const issueId = ref<number>(); // 所属发料单编号
+const lineId = ref<number>(); // 所属发料单行编号
+
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['发料明细'])
+    : $t('ui.actionTitle.create', ['发料明细']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-1',
+    labelWidth: 90,
+  },
+  layout: 'horizontal',
+  schema: useDetailFormSchema(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-3',
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as MesWmOutsourceIssueDetailApi.OutsourceIssueDetail;
+    data.issueId = issueId.value;
+    data.lineId = lineId.value;
+    try {
+      await (formData.value?.id
+        ? updateOutsourceIssueDetail({ ...data, id: formData.value.id })
+        : createOutsourceIssueDetail(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success', lineId.value!);
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    formApi.setState({ schema: useDetailFormSchema(formApi) });
+    // 加载数据
+    const data = modalApi.getData<{
+      detailId?: number;
+      issueId: number;
+      itemId?: number;
+      lineId: number;
+    }>();
+    issueId.value = data.issueId;
+    lineId.value = data.lineId;
+    if (data.detailId) {
+      modalApi.lock();
+      try {
+        formData.value = await getOutsourceIssueDetail(data.detailId);
+        // 设置到 values
+        await formApi.setValues(formData.value);
+      } finally {
+        modalApi.unlock();
+      }
+    } else if (data.itemId) {
+      await formApi.setFieldValue('itemId', data.itemId);
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-3/5">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mes/wm/outsourceissue/modules/detail-list.vue b/apps/web-ele/src/views/mes/wm/outsourceissue/modules/detail-list.vue
new file mode 100644
index 000000000..f574b338f
--- /dev/null
+++ b/apps/web-ele/src/views/mes/wm/outsourceissue/modules/detail-list.vue
@@ -0,0 +1,103 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesWmOutsourceIssueDetailApi } from '#/api/mes/wm/outsourceissue/detail';
+
+import { computed, watch } from 'vue';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteOutsourceIssueDetail } from '#/api/mes/wm/outsourceissue/detail';
+import { $t } from '#/locales';
+
+import { type FormType, useDetailGridColumns } from '../data';
+
+const props = defineProps<{
+  details: MesWmOutsourceIssueDetailApi.OutsourceIssueDetail[];
+  formType: FormType;
+}>();
+
+const emit = defineEmits<{
+  edit: [detailId: number];
+  refresh: [];
+}>();
+
+const isStock = computed(() => props.formType === 'stock'); // 是否为拣货模式
+
+/** 编辑发料明细 */
+function handleEdit(row: MesWmOutsourceIssueDetailApi.OutsourceIssueDetail) {
+  emit('edit', row.id!);
+}
+
+/** 删除发料明细 */
+async function handleDelete(
+  row: MesWmOutsourceIssueDetailApi.OutsourceIssueDetail,
+) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.warehouseName]),
+  });
+  try {
+    await deleteOutsourceIssueDetail(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.warehouseName]));
+    emit('refresh');
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    border: true,
+    columns: useDetailGridColumns(isStock.value),
+    data: props.details,
+    pagerConfig: {
+      enabled: false,
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    size: 'small',
+    toolbarConfig: {
+      enabled: false,
+    },
+  } as VxeTableGridOptions<MesWmOutsourceIssueDetailApi.OutsourceIssueDetail>,
+});
+
+watch(
+  () => props.details,
+  (details) => gridApi.setGridOptions({ data: details }),
+);
+</script>
+
+<template>
+  <div class="px-4 py-2">
+    <Grid>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [
+                  row.warehouseName,
+                ]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/mes/wm/outsourceissue/modules/form.vue b/apps/web-ele/src/views/mes/wm/outsourceissue/modules/form.vue
new file mode 100644
index 000000000..708935fa0
--- /dev/null
+++ b/apps/web-ele/src/views/mes/wm/outsourceissue/modules/form.vue
@@ -0,0 +1,247 @@
+<script lang="ts" setup>
+import type { FormType } from '../data';
+
+import type { MesWmOutsourceIssueApi } from '#/api/mes/wm/outsourceissue';
+
+import { computed, ref } from 'vue';
+
+import { confirm, useVbenModal } from '@vben/common-ui';
+
+import { ElButton, ElDivider, ElMessage, ElPopconfirm } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  checkOutsourceIssueQuantity,
+  createOutsourceIssue,
+  finishOutsourceIssue,
+  getOutsourceIssue,
+  stockOutsourceIssue,
+  submitOutsourceIssue,
+  updateOutsourceIssue,
+} from '#/api/mes/wm/outsourceissue';
+import { $t } from '#/locales';
+import { MesWmOutsourceIssueStatusEnum } from '#/views/mes/utils/constants';
+
+import { useFormSchema } from '../data';
+import LineList from './line-list.vue';
+
+const emit = defineEmits(['success']);
+const formType = ref<FormType>('create');
+const formData = ref<MesWmOutsourceIssueApi.OutsourceIssue>();
+const originalSnapshot = ref(''); // 表单原始数据快照，用于提交时跳过未变更的保存请求
+const isEditable = computed(() => // 是否为编辑模式（可保存）
+  ['create', 'update'].includes(formType.value),
+);
+const isStock = computed(() => formType.value === 'stock'); // 是否为拣货模式
+const isFinish = computed(() => formType.value === 'finish'); // 是否为执行领出模式
+const canSubmit = computed(() => // 是否可提交
+  formType.value === 'update' &&
+  formData.value?.status === MesWmOutsourceIssueStatusEnum.PREPARE,
+);
+const getTitle = computed(() => {
+  switch (formType.value) {
+    case 'detail': {
+      return $t('ui.actionTitle.view', ['外协发料单']);
+    }
+    case 'finish': {
+      return '执行领出';
+    }
+    case 'stock': {
+      return '执行拣货';
+    }
+    case 'update': {
+      return $t('ui.actionTitle.edit', ['外协发料单']);
+    }
+    default: {
+      return $t('ui.actionTitle.create', ['外协发料单']);
+    }
+  }
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-1',
+    labelWidth: 110,
+  },
+  layout: 'horizontal',
+  schema: [],
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-3',
+});
+
+/** 提交发料单：表单有修改时先保存，再调用提交接口 */
+async function handleSubmit() {
+  const { valid } = await formApi.validate();
+  if (!valid || !formData.value?.id) {
+    return;
+  }
+  modalApi.lock();
+  try {
+    const current = JSON.stringify(await formApi.getValues());
+    if (current !== originalSnapshot.value) {
+      const data =
+        (await formApi.getValues()) as MesWmOutsourceIssueApi.OutsourceIssue;
+      await updateOutsourceIssue({ ...formData.value, ...data });
+      originalSnapshot.value = current;
+    }
+    await submitOutsourceIssue(formData.value.id);
+    ElMessage.success('提交成功');
+    await modalApi.close();
+    emit('success');
+  } finally {
+    modalApi.unlock();
+  }
+}
+
+/** 执行拣货：拣货数量与发料数量不一致时二次确认 */
+async function handleStock() {
+  if (!formData.value?.id) {
+    return;
+  }
+  const quantityMatch = await checkOutsourceIssueQuantity(formData.value.id);
+  if (!quantityMatch) {
+    try {
+      await confirm('发料数量与拣货数量不一致，确认执行拣货？');
+    } catch {
+      return;
+    }
+  }
+  modalApi.lock();
+  try {
+    await stockOutsourceIssue(formData.value.id);
+    ElMessage.success('拣货成功');
+    await modalApi.close();
+    emit('success');
+  } finally {
+    modalApi.unlock();
+  }
+}
+
+/** 执行领出 */
+async function handleFinish() {
+  if (!formData.value?.id) {
+    return;
+  }
+  modalApi.lock();
+  try {
+    await finishOutsourceIssue(formData.value.id);
+    ElMessage.success('领出成功');
+    await modalApi.close();
+    emit('success');
+  } finally {
+    modalApi.unlock();
+  }
+}
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    if (!isEditable.value) {
+      await modalApi.close();
+      return;
+    }
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as MesWmOutsourceIssueApi.OutsourceIssue;
+    try {
+      if (formData.value?.id) {
+        await updateOutsourceIssue({ ...formData.value, ...data });
+        formData.value = { ...formData.value, ...data };
+      } else {
+        const id = await createOutsourceIssue(data);
+        formData.value = {
+          ...data,
+          id,
+          status: MesWmOutsourceIssueStatusEnum.PREPARE,
+        };
+        await formApi.setFieldValue('id', id);
+        await formApi.setFieldValue('status', formData.value.status);
+        formType.value = 'update';
+      }
+      originalSnapshot.value = JSON.stringify(await formApi.getValues());
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      originalSnapshot.value = '';
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<{ formType: FormType; id?: number }>();
+    formType.value = data.formType;
+    formApi.setState({ schema: useFormSchema(formType.value, formApi) });
+    formApi.setDisabled(!isEditable.value);
+    modalApi.setState({ showConfirmButton: isEditable.value });
+    if (data?.id) {
+      modalApi.lock();
+      try {
+        formData.value = await getOutsourceIssue(data.id);
+        // 设置到 values
+        await formApi.setValues(formData.value);
+      } finally {
+        modalApi.unlock();
+      }
+    }
+    originalSnapshot.value = JSON.stringify(await formApi.getValues());
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-3/5">
+    <Form class="mx-4" />
+    <!-- 非新建模式展示物料信息 -->
+    <template v-if="formData?.id">
+      <ElDivider>物料信息</ElDivider>
+      <div class="mx-4">
+        <LineList :form-type="formType" :issue-id="formData.id" />
+      </div>
+    </template>
+    <template #prepend-footer>
+      <div class="flex flex-auto items-center gap-2">
+        <ElPopconfirm
+          v-if="canSubmit"
+          title="确认提交该外协发料单？【提交后将不能修改】"
+          width="260"
+          @confirm="handleSubmit"
+        >
+          <template #reference>
+            <ElButton type="primary">提交</ElButton>
+          </template>
+        </ElPopconfirm>
+        <ElPopconfirm
+          v-if="isStock"
+          title="确认执行拣货？"
+          width="220"
+          @confirm="handleStock"
+        >
+          <template #reference>
+            <ElButton type="primary">执行拣货</ElButton>
+          </template>
+        </ElPopconfirm>
+        <ElPopconfirm
+          v-if="isFinish"
+          title="确认执行领出？执行后将扣减库存，且无法撤销。"
+          width="300"
+          @confirm="handleFinish"
+        >
+          <template #reference>
+            <ElButton type="primary">执行领出</ElButton>
+          </template>
+        </ElPopconfirm>
+      </div>
+    </template>
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mes/wm/outsourceissue/modules/line-form.vue b/apps/web-ele/src/views/mes/wm/outsourceissue/modules/line-form.vue
new file mode 100644
index 000000000..d692a5883
--- /dev/null
+++ b/apps/web-ele/src/views/mes/wm/outsourceissue/modules/line-form.vue
@@ -0,0 +1,97 @@
+<script lang="ts" setup>
+import type { MesWmOutsourceIssueLineApi } from '#/api/mes/wm/outsourceissue/line';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createOutsourceIssueLine,
+  getOutsourceIssueLine,
+  updateOutsourceIssueLine,
+} from '#/api/mes/wm/outsourceissue/line';
+import { $t } from '#/locales';
+
+import { useLineFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<MesWmOutsourceIssueLineApi.OutsourceIssueLine>();
+const issueId = ref<number>(); // 所属发料单编号
+
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['物料发料单行'])
+    : $t('ui.actionTitle.create', ['物料发料单行']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-1',
+    labelWidth: 90,
+  },
+  layout: 'horizontal',
+  schema: useLineFormSchema(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-3',
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as MesWmOutsourceIssueLineApi.OutsourceIssueLine;
+    data.issueId = issueId.value;
+    try {
+      await (formData.value?.id
+        ? updateOutsourceIssueLine({ ...data, id: formData.value.id })
+        : createOutsourceIssueLine(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<{
+      id?: number;
+      issueId: number;
+    }>();
+    issueId.value = data.issueId;
+    if (!data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getOutsourceIssueLine(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-3/5">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mes/wm/outsourceissue/modules/line-list.vue b/apps/web-ele/src/views/mes/wm/outsourceissue/modules/line-list.vue
new file mode 100644
index 000000000..a8ba2b4f3
--- /dev/null
+++ b/apps/web-ele/src/views/mes/wm/outsourceissue/modules/line-list.vue
@@ -0,0 +1,223 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesWmOutsourceIssueDetailApi } from '#/api/mes/wm/outsourceissue/detail';
+import type { MesWmOutsourceIssueLineApi } from '#/api/mes/wm/outsourceissue/line';
+
+import { computed, reactive } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getOutsourceIssueDetailListByLineId } from '#/api/mes/wm/outsourceissue/detail';
+import {
+  deleteOutsourceIssueLine,
+  getOutsourceIssueLinePage,
+} from '#/api/mes/wm/outsourceissue/line';
+import { $t } from '#/locales';
+
+import { type FormType, useLineGridColumns } from '../data';
+import DetailForm from './detail-form.vue';
+import DetailList from './detail-list.vue';
+import LineForm from './line-form.vue';
+
+const props = defineProps<{
+  formType: FormType;
+  issueId: number;
+}>();
+
+const isEditable = computed(() =>
+  ['create', 'update'].includes(props.formType),
+); // 是否可编辑明细行
+const isStock = computed(() => props.formType === 'stock'); // 是否为拣货模式
+const detailMap = reactive<
+  Record<number, MesWmOutsourceIssueDetailApi.OutsourceIssueDetail[]>
+>({}); // 已展开行的发料明细缓存
+
+const [LineFormModal, lineFormModalApi] = useVbenModal({
+  connectedComponent: LineForm,
+  destroyOnClose: true,
+});
+
+const [DetailFormModal, detailFormModalApi] = useVbenModal({
+  connectedComponent: DetailForm,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  for (const id of Object.keys(detailMap)) {
+    delete detailMap[Number(id)];
+  }
+  gridApi.query();
+}
+
+/** 添加物料 */
+function handleCreate() {
+  lineFormModalApi.setData({ issueId: props.issueId }).open();
+}
+
+/** 编辑物料 */
+function handleEdit(row: MesWmOutsourceIssueLineApi.OutsourceIssueLine) {
+  lineFormModalApi.setData({ id: row.id, issueId: props.issueId }).open();
+}
+
+/** 删除物料 */
+async function handleDelete(
+  row: MesWmOutsourceIssueLineApi.OutsourceIssueLine,
+) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.itemName]),
+  });
+  try {
+    await deleteOutsourceIssueLine(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.itemName]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 拣货：直接打开明细创建表单 */
+function handlePicking(row: MesWmOutsourceIssueLineApi.OutsourceIssueLine) {
+  openDetailForm(row.id!, row.itemId);
+}
+
+/** 打开发料明细表单 */
+function openDetailForm(lineId: number, itemId?: number, detailId?: number) {
+  detailFormModalApi
+    .setData({ detailId, issueId: props.issueId, itemId, lineId })
+    .open();
+}
+
+/** 获取已展开行的发料明细 */
+function getExpandedDetails(row: MesWmOutsourceIssueLineApi.OutsourceIssueLine) {
+  return detailMap[row.id!] || [];
+}
+
+/** 加载指定行的发料明细 */
+async function loadLineDetails(lineId: number) {
+  detailMap[lineId] = await getOutsourceIssueDetailListByLineId(lineId);
+}
+
+/** 展开行时懒加载发料明细 */
+async function handleExpandChange(
+  row: MesWmOutsourceIssueLineApi.OutsourceIssueLine,
+  expanded: boolean,
+) {
+  if (!expanded) {
+    return;
+  }
+  await loadLineDetails(row.id!);
+}
+
+/** 明细表单提交成功后，刷新对应行已展开的明细 */
+async function handleDetailSuccess(lineId: number) {
+  await loadLineDetails(lineId);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useLineGridColumns(isEditable.value, isStock.value),
+    expandConfig: {
+      padding: true,
+    },
+    height: 400,
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }) => {
+          if (!props.issueId) {
+            return { list: [], total: 0 };
+          }
+          return await getOutsourceIssueLinePage({
+            issueId: props.issueId,
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+    },
+  } as VxeTableGridOptions<MesWmOutsourceIssueLineApi.OutsourceIssueLine>,
+  gridEvents: {
+    toggleRowExpand: ({
+      expanded,
+      row,
+    }: {
+      expanded: boolean;
+      row: MesWmOutsourceIssueLineApi.OutsourceIssueLine;
+    }) => {
+      handleExpandChange(row, expanded);
+    },
+  },
+});
+</script>
+
+<template>
+  <div>
+    <LineFormModal @success="handleRefresh" />
+    <DetailFormModal @success="handleDetailSuccess" />
+    <Grid table-title="物料信息">
+      <template v-if="isEditable" #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: '添加物料',
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #detail="{ row }">
+        <DetailList
+          :details="getExpandedDetails(row)"
+          :form-type="formType"
+          @edit="(detailId) => openDetailForm(row.id!, row.itemId, detailId)"
+          @refresh="loadLineDetails(row.id!)"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              ifShow: isEditable,
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              ifShow: isEditable,
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.itemName]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+            {
+              label: '拣货',
+              type: 'primary',
+              link: true,
+              ifShow: isStock,
+              onClick: handlePicking.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/mes/wm/outsourcereceipt/data.ts b/apps/web-ele/src/views/mes/wm/outsourcereceipt/data.ts
new file mode 100644
index 000000000..c908feff8
--- /dev/null
+++ b/apps/web-ele/src/views/mes/wm/outsourcereceipt/data.ts
@@ -0,0 +1,546 @@
+import type { VbenFormApi, VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesProWorkOrderApi } from '#/api/mes/pro/workorder';
+import type { MesWmOutsourceReceiptApi } from '#/api/mes/wm/outsourcereceipt';
+import type { MesWmOutsourceReceiptDetailApi } from '#/api/mes/wm/outsourcereceipt/detail';
+import type { MesWmOutsourceReceiptLineApi } from '#/api/mes/wm/outsourcereceipt/line';
+
+import { h, markRaw } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { ElButton } from 'element-plus';
+
+import { z } from '#/adapter/form';
+import { generateAutoCode } from '#/api/mes/md/autocode/record';
+import { getRangePickerDefaultProps } from '#/utils';
+import MdItemSelect from '#/views/mes/md/item/components/md-item-select.vue';
+import MdVendorSelect from '#/views/mes/md/vendor/components/md-vendor-select.vue';
+import ProWorkOrderSelect from '#/views/mes/pro/workorder/components/pro-work-order-select.vue';
+import {
+  MesAutoCodeRuleCode,
+  MesProWorkOrderStatusEnum,
+  MesProWorkOrderTypeEnum,
+} from '#/views/mes/utils/constants';
+import {
+  WmWarehouseAreaSelect,
+  WmWarehouseLocationSelect,
+  WmWarehouseSelect,
+} from '#/views/mes/wm/warehouse/components';
+
+/** 表单类型 */
+export type FormType = 'create' | 'detail' | 'finish' | 'stock' | 'update';
+
+/** 表单头部是否只读（上架、详情、完成态） */
+function isHeaderReadonly(formType: FormType): boolean {
+  return (
+    formType === 'detail' || formType === 'finish' || formType === 'stock'
+  );
+}
+
+/** 新增/修改的表单 */
+export function useFormSchema(
+  formType: FormType,
+  formApi?: VbenFormApi,
+): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'status',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'code',
+      label: '入库单编号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入入库单编号',
+      },
+      rules: 'required',
+      suffix: isHeaderReadonly(formType)
+        ? undefined
+        : () =>
+            h(
+              ElButton,
+              {
+                onClick: async () => {
+                  const code = await generateAutoCode(
+                    MesAutoCodeRuleCode.WM_OUTSOURCE_RECEIPT_CODE,
+                  );
+                  await formApi?.setFieldValue('code', code);
+                },
+              },
+              { default: () => '生成' },
+            ),
+    },
+    {
+      fieldName: 'name',
+      label: '入库单名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入入库单名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'workOrderId',
+      label: '外协工单',
+      component: markRaw(ProWorkOrderSelect),
+      componentProps: {
+        // 选择外协工单后，自动回填供应商
+        onChange: async (workOrder?: MesProWorkOrderApi.WorkOrder) => {
+          await formApi?.setFieldValue('vendorId', workOrder?.vendorId);
+        },
+        status: MesProWorkOrderStatusEnum.CONFIRMED,
+        type: MesProWorkOrderTypeEnum.OUTSOURCE,
+      },
+      rules: 'selectRequired',
+    },
+    {
+      fieldName: 'vendorId',
+      label: '供应商',
+      component: markRaw(MdVendorSelect),
+      componentProps: {
+        placeholder: '请选择供应商',
+      },
+    },
+    {
+      fieldName: 'receiptDate',
+      label: '入库日期',
+      component: 'DatePicker',
+      componentProps: {
+        format: 'YYYY-MM-DD',
+        placeholder: '请选择入库日期',
+        type: 'date',
+        valueFormat: 'x',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      formItemClass: 'col-span-3',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 3,
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'code',
+      label: '入库单编号',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入入库单编号',
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '入库单名称',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入入库单名称',
+      },
+    },
+    {
+      fieldName: 'workOrderCode',
+      label: '外协工单号',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入外协工单号',
+      },
+    },
+    {
+      fieldName: 'vendorId',
+      label: '供应商',
+      component: markRaw(MdVendorSelect),
+      componentProps: {
+        placeholder: '请选择供应商',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        clearable: true,
+        options: getDictOptions(
+          DICT_TYPE.MES_WM_OUTSOURCE_RECEIPT_STATUS,
+          'number',
+        ),
+        placeholder: '请选择单据状态',
+      },
+    },
+    {
+      fieldName: 'receiptDate',
+      label: '入库日期',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        clearable: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions<MesWmOutsourceReceiptApi.OutsourceReceipt>['columns'] {
+  return [
+    {
+      field: 'code',
+      title: '入库单编号',
+      minWidth: 160,
+      slots: { default: 'code' },
+    },
+    {
+      field: 'name',
+      title: '入库单名称',
+      minWidth: 150,
+    },
+    {
+      field: 'workOrderCode',
+      title: '外协工单号',
+      minWidth: 140,
+    },
+    {
+      field: 'vendorName',
+      title: '供应商名称',
+      minWidth: 120,
+    },
+    {
+      field: 'receiptDate',
+      title: '入库日期',
+      width: 180,
+      formatter: 'formatDate',
+    },
+    {
+      field: 'status',
+      title: '单据状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MES_WM_OUTSOURCE_RECEIPT_STATUS },
+      },
+    },
+    {
+      title: '操作',
+      width: 240,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 入库单行子表的字段 */
+export function useLineGridColumns(
+  editable: boolean,
+  stockable: boolean,
+): VxeTableGridOptions<MesWmOutsourceReceiptLineApi.OutsourceReceiptLine>['columns'] {
+  return [
+    {
+      type: 'expand',
+      width: 48,
+      slots: { content: 'detail' },
+    },
+    {
+      field: 'itemCode',
+      title: '物料编码',
+      minWidth: 120,
+    },
+    {
+      field: 'itemName',
+      title: '物料名称',
+      minWidth: 140,
+    },
+    {
+      field: 'specification',
+      title: '规格型号',
+      minWidth: 120,
+    },
+    {
+      field: 'unitMeasureName',
+      title: '单位',
+      width: 80,
+    },
+    {
+      field: 'quantity',
+      title: '入库数量',
+      width: 100,
+    },
+    {
+      field: 'batchCode',
+      title: '批次号',
+      minWidth: 120,
+    },
+    {
+      field: 'iqcCheckFlag',
+      title: '是否检验',
+      width: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
+      },
+    },
+    {
+      field: 'qualityStatus',
+      title: '质量状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MES_WM_QUALITY_STATUS },
+      },
+    },
+    ...(editable || stockable
+      ? [
+          {
+            title: '操作',
+            width: 180,
+            fixed: 'right',
+            slots: { default: 'actions' },
+          } as const,
+        ]
+      : []),
+  ];
+}
+
+/** 入库单行新增/修改的表单 */
+export function useLineFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'itemId',
+      label: '物料',
+      component: markRaw(MdItemSelect),
+      componentProps: {
+        placeholder: '请选择物料',
+      },
+      rules: 'selectRequired',
+    },
+    {
+      fieldName: 'quantity',
+      label: '入库数量',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        controlsPosition: 'right',
+        min: 0,
+        placeholder: '请输入入库数量',
+        precision: 2,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'batchCode',
+      label: '批次号',
+      component: 'Input',
+      componentProps: {
+        disabled: true,
+        placeholder: '系统自动生成',
+      },
+    },
+    {
+      fieldName: 'productionDate',
+      label: '生产日期',
+      component: 'DatePicker',
+      componentProps: {
+        class: '!w-full',
+        format: 'YYYY-MM-DD',
+        placeholder: '请选择生产日期',
+        type: 'date',
+        valueFormat: 'x',
+      },
+    },
+    {
+      fieldName: 'expireDate',
+      label: '有效期',
+      component: 'DatePicker',
+      componentProps: {
+        class: '!w-full',
+        format: 'YYYY-MM-DD',
+        placeholder: '请选择有效期',
+        type: 'date',
+        valueFormat: 'x',
+      },
+    },
+    {
+      fieldName: 'lotNumber',
+      label: '批号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入批号',
+      },
+    },
+    {
+      fieldName: 'iqcCheckFlag',
+      label: '是否质检',
+      component: 'Switch',
+      rules: z.boolean().default(false),
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      formItemClass: 'col-span-3',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 3,
+      },
+    },
+  ];
+}
+
+/** 入库明细子表的字段 */
+export function useDetailGridColumns(
+  editable: boolean,
+): VxeTableGridOptions<MesWmOutsourceReceiptDetailApi.OutsourceReceiptDetail>['columns'] {
+  return [
+    {
+      field: 'warehouseName',
+      title: '仓库名称',
+      minWidth: 100,
+    },
+    {
+      field: 'locationName',
+      title: '库区名称',
+      minWidth: 100,
+    },
+    {
+      field: 'areaName',
+      title: '库位名称',
+      minWidth: 100,
+    },
+    {
+      field: 'quantity',
+      title: '数量',
+      width: 100,
+    },
+    ...(editable
+      ? [
+          {
+            title: '操作',
+            width: 120,
+            fixed: 'right',
+            slots: { default: 'actions' },
+          } as const,
+        ]
+      : []),
+  ];
+}
+
+/** 入库明细新增/修改的表单 */
+export function useDetailFormSchema(formApi?: VbenFormApi): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'itemId',
+      label: '物料',
+      component: markRaw(MdItemSelect),
+      componentProps: {
+        disabled: true,
+      },
+    },
+    {
+      fieldName: 'batchCode',
+      label: '批次号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入批次号',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'warehouseId',
+      label: '入库仓库',
+      component: markRaw(WmWarehouseSelect),
+      componentProps: {
+        // 切换仓库后清空库区和库位
+        onChange: async () => {
+          await formApi?.setValues({
+            areaId: undefined,
+            locationId: undefined,
+          });
+        },
+        placeholder: '请选择仓库',
+      },
+      rules: 'selectRequired',
+    },
+    {
+      fieldName: 'locationId',
+      label: '库区',
+      component: markRaw(WmWarehouseLocationSelect),
+      componentProps: {
+        placeholder: '请选择库区',
+      },
+      rules: 'selectRequired',
+      dependencies: {
+        triggerFields: ['warehouseId'],
+        componentProps: (values) => ({
+          // 切换库区后清空库位
+          onChange: async () => {
+            await formApi?.setFieldValue('areaId', undefined);
+          },
+          placeholder: '请选择库区',
+          warehouseId: values.warehouseId,
+        }),
+      },
+    },
+    {
+      fieldName: 'areaId',
+      label: '库位',
+      component: markRaw(WmWarehouseAreaSelect),
+      componentProps: {
+        placeholder: '请选择库位',
+      },
+      rules: 'selectRequired',
+      dependencies: {
+        triggerFields: ['locationId'],
+        componentProps: (values) => ({
+          locationId: values.locationId,
+          placeholder: '请选择库位',
+        }),
+      },
+    },
+    {
+      fieldName: 'quantity',
+      label: '数量',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        controlsPosition: 'right',
+        min: 0,
+        placeholder: '请输入数量',
+        precision: 2,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      formItemClass: 'col-span-2',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 3,
+      },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/mes/wm/outsourcereceipt/index.vue b/apps/web-ele/src/views/mes/wm/outsourcereceipt/index.vue
new file mode 100644
index 000000000..ce3808463
--- /dev/null
+++ b/apps/web-ele/src/views/mes/wm/outsourcereceipt/index.vue
@@ -0,0 +1,211 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesWmOutsourceReceiptApi } from '#/api/mes/wm/outsourcereceipt';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { ElButton, ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  cancelOutsourceReceipt,
+  deleteOutsourceReceipt,
+  exportOutsourceReceipt,
+  getOutsourceReceiptPage,
+} from '#/api/mes/wm/outsourcereceipt';
+import { $t } from '#/locales';
+import { MesWmOutsourceReceiptStatusEnum } from '#/views/mes/utils/constants';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建外协入库单 */
+function handleCreate() {
+  formModalApi.setData({ formType: 'create' }).open();
+}
+
+/** 查看外协入库单 */
+function handleDetail(row: MesWmOutsourceReceiptApi.OutsourceReceipt) {
+  formModalApi.setData({ formType: 'detail', id: row.id }).open();
+}
+
+/** 编辑外协入库单 */
+function handleEdit(row: MesWmOutsourceReceiptApi.OutsourceReceipt) {
+  formModalApi.setData({ formType: 'update', id: row.id }).open();
+}
+
+/** 执行上架 */
+function handleStock(row: MesWmOutsourceReceiptApi.OutsourceReceipt) {
+  formModalApi.setData({ formType: 'stock', id: row.id }).open();
+}
+
+/** 完成入库 */
+function handleFinish(row: MesWmOutsourceReceiptApi.OutsourceReceipt) {
+  formModalApi.setData({ formType: 'finish', id: row.id }).open();
+}
+
+/** 删除外协入库单 */
+async function handleDelete(row: MesWmOutsourceReceiptApi.OutsourceReceipt) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.code]),
+  });
+  try {
+    await deleteOutsourceReceipt(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.code]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 取消外协入库单 */
+async function handleCancel(row: MesWmOutsourceReceiptApi.OutsourceReceipt) {
+  await cancelOutsourceReceipt(row.id!);
+  ElMessage.success('取消成功');
+  handleRefresh();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportOutsourceReceipt(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '外协入库单.xls', source: data });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getOutsourceReceiptPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MesWmOutsourceReceiptApi.OutsourceReceipt>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【仓库】外协发料、外协入库"
+        url="https://doc.iocoder.cn/mes/wm/outsource/"
+      />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+
+    <Grid table-title="外协入库单列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['外协入库单']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['mes:wm-outsource-receipt:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['mes:wm-outsource-receipt:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #code="{ row }">
+        <ElButton link type="primary" @click="handleDetail(row)">
+          {{ row.code }}
+        </ElButton>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['mes:wm-outsource-receipt:update'],
+              ifShow: row.status === MesWmOutsourceReceiptStatusEnum.PREPARE,
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['mes:wm-outsource-receipt:delete'],
+              ifShow: row.status === MesWmOutsourceReceiptStatusEnum.PREPARE,
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.code]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+            {
+              label: '执行上架',
+              type: 'primary',
+              link: true,
+              auth: ['mes:wm-outsource-receipt:update'],
+              ifShow: row.status === MesWmOutsourceReceiptStatusEnum.APPROVING,
+              onClick: handleStock.bind(null, row),
+            },
+            {
+              label: '完成入库',
+              type: 'primary',
+              link: true,
+              auth: ['mes:wm-outsource-receipt:finish'],
+              ifShow: row.status === MesWmOutsourceReceiptStatusEnum.APPROVED,
+              onClick: handleFinish.bind(null, row),
+            },
+            {
+              label: '取消',
+              type: 'danger',
+              link: true,
+              auth: ['mes:wm-outsource-receipt:update'],
+              ifShow:
+                row.status === MesWmOutsourceReceiptStatusEnum.APPROVING ||
+                row.status === MesWmOutsourceReceiptStatusEnum.APPROVED,
+              popConfirm: {
+                title: '确认取消该外协入库单？取消后不可恢复。',
+                confirm: handleCancel.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/mes/wm/outsourcereceipt/modules/detail-form.vue b/apps/web-ele/src/views/mes/wm/outsourcereceipt/modules/detail-form.vue
new file mode 100644
index 000000000..c0b3b3572
--- /dev/null
+++ b/apps/web-ele/src/views/mes/wm/outsourcereceipt/modules/detail-form.vue
@@ -0,0 +1,104 @@
+<script lang="ts" setup>
+import type { MesWmOutsourceReceiptDetailApi } from '#/api/mes/wm/outsourcereceipt/detail';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createOutsourceReceiptDetail,
+  getOutsourceReceiptDetail,
+  updateOutsourceReceiptDetail,
+} from '#/api/mes/wm/outsourcereceipt/detail';
+import { $t } from '#/locales';
+
+import { useDetailFormSchema } from '../data';
+
+const emit = defineEmits<{ success: [lineId: number] }>();
+const formData = ref<MesWmOutsourceReceiptDetailApi.OutsourceReceiptDetail>();
+const receiptId = ref<number>(); // 所属入库单编号
+const lineId = ref<number>(); // 所属入库单行编号
+
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['收货明细'])
+    : $t('ui.actionTitle.create', ['收货明细']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-1',
+    labelWidth: 90,
+  },
+  layout: 'horizontal',
+  schema: useDetailFormSchema(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2',
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as MesWmOutsourceReceiptDetailApi.OutsourceReceiptDetail;
+    data.receiptId = receiptId.value;
+    data.lineId = lineId.value;
+    try {
+      await (formData.value?.id
+        ? updateOutsourceReceiptDetail({ ...data, id: formData.value.id })
+        : createOutsourceReceiptDetail(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success', lineId.value!);
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    formApi.setState({ schema: useDetailFormSchema(formApi) });
+    // 加载数据
+    const data = modalApi.getData<{
+      detailId?: number;
+      itemId?: number;
+      lineId: number;
+      receiptId: number;
+    }>();
+    receiptId.value = data.receiptId;
+    lineId.value = data.lineId;
+    if (data.detailId) {
+      modalApi.lock();
+      try {
+        formData.value = await getOutsourceReceiptDetail(data.detailId);
+        // 设置到 values
+        await formApi.setValues(formData.value);
+      } finally {
+        modalApi.unlock();
+      }
+    } else if (data.itemId) {
+      await formApi.setFieldValue('itemId', data.itemId);
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-1/2">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mes/wm/outsourcereceipt/modules/detail-list.vue b/apps/web-ele/src/views/mes/wm/outsourcereceipt/modules/detail-list.vue
new file mode 100644
index 000000000..cabac9479
--- /dev/null
+++ b/apps/web-ele/src/views/mes/wm/outsourcereceipt/modules/detail-list.vue
@@ -0,0 +1,122 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesWmOutsourceReceiptDetailApi } from '#/api/mes/wm/outsourcereceipt/detail';
+
+import { computed, watch } from 'vue';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteOutsourceReceiptDetail } from '#/api/mes/wm/outsourcereceipt/detail';
+import { $t } from '#/locales';
+
+import { type FormType, useDetailGridColumns } from '../data';
+
+const props = defineProps<{
+  details: MesWmOutsourceReceiptDetailApi.OutsourceReceiptDetail[];
+  formType: FormType;
+}>();
+
+const emit = defineEmits<{
+  edit: [detailId?: number];
+  refresh: [];
+}>();
+
+const isEditable = computed(
+  () => ['create', 'stock', 'update'].includes(props.formType),
+); // 是否可维护收货明细（编辑或上架态）
+
+/** 添加收货明细 */
+function handleCreate() {
+  emit('edit', undefined);
+}
+
+/** 编辑收货明细 */
+function handleEdit(row: MesWmOutsourceReceiptDetailApi.OutsourceReceiptDetail) {
+  emit('edit', row.id!);
+}
+
+/** 删除收货明细 */
+async function handleDelete(
+  row: MesWmOutsourceReceiptDetailApi.OutsourceReceiptDetail,
+) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.warehouseName]),
+  });
+  try {
+    await deleteOutsourceReceiptDetail(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.warehouseName]));
+    emit('refresh');
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    border: true,
+    columns: useDetailGridColumns(isEditable.value),
+    data: props.details,
+    pagerConfig: {
+      enabled: false,
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    size: 'small',
+    toolbarConfig: {
+      enabled: false,
+    },
+  } as VxeTableGridOptions<MesWmOutsourceReceiptDetailApi.OutsourceReceiptDetail>,
+});
+
+watch(
+  () => props.details,
+  (details) => gridApi.setGridOptions({ data: details }),
+);
+</script>
+
+<template>
+  <div class="px-4 py-2">
+    <TableAction
+      v-if="isEditable"
+      class="mb-2"
+      :actions="[
+        {
+          label: '添加明细',
+          type: 'primary',
+          icon: ACTION_ICON.ADD,
+          onClick: handleCreate,
+        },
+      ]"
+    />
+    <Grid>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [
+                  row.warehouseName,
+                ]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/mes/wm/outsourcereceipt/modules/form.vue b/apps/web-ele/src/views/mes/wm/outsourcereceipt/modules/form.vue
new file mode 100644
index 000000000..52678831f
--- /dev/null
+++ b/apps/web-ele/src/views/mes/wm/outsourcereceipt/modules/form.vue
@@ -0,0 +1,238 @@
+<script lang="ts" setup>
+import type { FormType } from '../data';
+
+import type { MesWmOutsourceReceiptApi } from '#/api/mes/wm/outsourcereceipt';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElButton, ElDivider, ElMessage, ElPopconfirm } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createOutsourceReceipt,
+  finishOutsourceReceipt,
+  getOutsourceReceipt,
+  stockOutsourceReceipt,
+  submitOutsourceReceipt,
+  updateOutsourceReceipt,
+} from '#/api/mes/wm/outsourcereceipt';
+import { $t } from '#/locales';
+import { MesWmOutsourceReceiptStatusEnum } from '#/views/mes/utils/constants';
+
+import { useFormSchema } from '../data';
+import LineList from './line-list.vue';
+
+const emit = defineEmits(['success']);
+const formType = ref<FormType>('create');
+const formData = ref<MesWmOutsourceReceiptApi.OutsourceReceipt>();
+const originalSnapshot = ref(''); // 表单原始数据快照，用于提交时跳过未变更的保存请求
+const isEditable = computed(() => // 是否为编辑模式（可保存）
+  ['create', 'update'].includes(formType.value),
+);
+const isStock = computed(() => formType.value === 'stock'); // 是否为上架模式
+const isFinish = computed(() => formType.value === 'finish'); // 是否为完成入库模式
+const canSubmit = computed(() => // 是否可提交
+  formType.value === 'update' &&
+  formData.value?.status === MesWmOutsourceReceiptStatusEnum.PREPARE,
+);
+const getTitle = computed(() => {
+  switch (formType.value) {
+    case 'detail': {
+      return $t('ui.actionTitle.view', ['外协入库单']);
+    }
+    case 'finish': {
+      return '完成入库';
+    }
+    case 'stock': {
+      return '执行上架';
+    }
+    case 'update': {
+      return $t('ui.actionTitle.edit', ['外协入库单']);
+    }
+    default: {
+      return $t('ui.actionTitle.create', ['外协入库单']);
+    }
+  }
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-1',
+    labelWidth: 110,
+  },
+  layout: 'horizontal',
+  schema: [],
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-3',
+});
+
+/** 提交入库单：表单有修改时先保存，再调用提交接口 */
+async function handleSubmit() {
+  const { valid } = await formApi.validate();
+  if (!valid || !formData.value?.id) {
+    return;
+  }
+  modalApi.lock();
+  try {
+    const current = JSON.stringify(await formApi.getValues());
+    if (current !== originalSnapshot.value) {
+      const data =
+        (await formApi.getValues()) as MesWmOutsourceReceiptApi.OutsourceReceipt;
+      await updateOutsourceReceipt({ ...formData.value, ...data });
+      originalSnapshot.value = current;
+    }
+    await submitOutsourceReceipt(formData.value.id);
+    ElMessage.success('提交成功');
+    await modalApi.close();
+    emit('success');
+  } finally {
+    modalApi.unlock();
+  }
+}
+
+/** 执行上架 */
+async function handleStock() {
+  if (!formData.value?.id) {
+    return;
+  }
+  modalApi.lock();
+  try {
+    await stockOutsourceReceipt(formData.value.id);
+    ElMessage.success('上架成功');
+    await modalApi.close();
+    emit('success');
+  } finally {
+    modalApi.unlock();
+  }
+}
+
+/** 完成入库 */
+async function handleFinish() {
+  if (!formData.value?.id) {
+    return;
+  }
+  modalApi.lock();
+  try {
+    await finishOutsourceReceipt(formData.value.id);
+    ElMessage.success('入库成功');
+    await modalApi.close();
+    emit('success');
+  } finally {
+    modalApi.unlock();
+  }
+}
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    if (!isEditable.value) {
+      await modalApi.close();
+      return;
+    }
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as MesWmOutsourceReceiptApi.OutsourceReceipt;
+    try {
+      if (formData.value?.id) {
+        await updateOutsourceReceipt({ ...formData.value, ...data });
+        formData.value = { ...formData.value, ...data };
+      } else {
+        const id = await createOutsourceReceipt(data);
+        formData.value = {
+          ...data,
+          id,
+          status: MesWmOutsourceReceiptStatusEnum.PREPARE,
+        };
+        await formApi.setFieldValue('id', id);
+        await formApi.setFieldValue('status', formData.value.status);
+        formType.value = 'update';
+      }
+      originalSnapshot.value = JSON.stringify(await formApi.getValues());
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      originalSnapshot.value = '';
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<{ formType: FormType; id?: number }>();
+    formType.value = data.formType;
+    formApi.setState({ schema: useFormSchema(formType.value, formApi) });
+    formApi.setDisabled(!isEditable.value);
+    modalApi.setState({ showConfirmButton: isEditable.value });
+    if (data?.id) {
+      modalApi.lock();
+      try {
+        formData.value = await getOutsourceReceipt(data.id);
+        // 设置到 values
+        await formApi.setValues(formData.value);
+      } finally {
+        modalApi.unlock();
+      }
+    }
+    originalSnapshot.value = JSON.stringify(await formApi.getValues());
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-3/5">
+    <Form class="mx-4" />
+    <!-- 非新建模式展示物料信息 -->
+    <template v-if="formData?.id">
+      <ElDivider>物料信息</ElDivider>
+      <div class="mx-4">
+        <LineList :form-type="formType" :receipt-id="formData.id" />
+      </div>
+    </template>
+    <template #prepend-footer>
+      <div class="flex flex-auto items-center gap-2">
+        <ElPopconfirm
+          v-if="canSubmit"
+          title="确认提交该外协入库单？【提交后将不能修改】"
+          width="260"
+          @confirm="handleSubmit"
+        >
+          <template #reference>
+            <ElButton type="primary">提交</ElButton>
+          </template>
+        </ElPopconfirm>
+        <ElPopconfirm
+          v-if="isStock"
+          title="确认执行上架？"
+          width="220"
+          @confirm="handleStock"
+        >
+          <template #reference>
+            <ElButton type="primary">执行上架</ElButton>
+          </template>
+        </ElPopconfirm>
+        <ElPopconfirm
+          v-if="isFinish"
+          title="确认完成入库？完成后将更新库存台账。"
+          width="300"
+          @confirm="handleFinish"
+        >
+          <template #reference>
+            <ElButton type="primary">完成入库</ElButton>
+          </template>
+        </ElPopconfirm>
+      </div>
+    </template>
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mes/wm/outsourcereceipt/modules/line-form.vue b/apps/web-ele/src/views/mes/wm/outsourcereceipt/modules/line-form.vue
new file mode 100644
index 000000000..a080867d2
--- /dev/null
+++ b/apps/web-ele/src/views/mes/wm/outsourcereceipt/modules/line-form.vue
@@ -0,0 +1,98 @@
+<script lang="ts" setup>
+import type { MesWmOutsourceReceiptLineApi } from '#/api/mes/wm/outsourcereceipt/line';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createOutsourceReceiptLine,
+  getOutsourceReceiptLine,
+  updateOutsourceReceiptLine,
+} from '#/api/mes/wm/outsourcereceipt/line';
+import { $t } from '#/locales';
+
+import { useLineFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<MesWmOutsourceReceiptLineApi.OutsourceReceiptLine>();
+const receiptId = ref<number>(); // 所属入库单编号
+
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['外协入库单行'])
+    : $t('ui.actionTitle.create', ['外协入库单行']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-1',
+    labelWidth: 90,
+  },
+  layout: 'horizontal',
+  schema: useLineFormSchema(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-3',
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单（批次号由后端自动生成，不提交）
+    const data =
+      (await formApi.getValues()) as MesWmOutsourceReceiptLineApi.OutsourceReceiptLine;
+    data.receiptId = receiptId.value;
+    delete data.batchCode;
+    try {
+      await (formData.value?.id
+        ? updateOutsourceReceiptLine({ ...data, id: formData.value.id })
+        : createOutsourceReceiptLine(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<{
+      id?: number;
+      receiptId: number;
+    }>();
+    receiptId.value = data.receiptId;
+    if (!data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getOutsourceReceiptLine(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-3/5">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mes/wm/outsourcereceipt/modules/line-list.vue b/apps/web-ele/src/views/mes/wm/outsourcereceipt/modules/line-list.vue
new file mode 100644
index 000000000..362c06a38
--- /dev/null
+++ b/apps/web-ele/src/views/mes/wm/outsourcereceipt/modules/line-list.vue
@@ -0,0 +1,234 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesWmOutsourceReceiptDetailApi } from '#/api/mes/wm/outsourcereceipt/detail';
+import type { MesWmOutsourceReceiptLineApi } from '#/api/mes/wm/outsourcereceipt/line';
+
+import { computed, reactive } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getOutsourceReceiptDetailListByLineId } from '#/api/mes/wm/outsourcereceipt/detail';
+import {
+  deleteOutsourceReceiptLine,
+  getOutsourceReceiptLinePage,
+} from '#/api/mes/wm/outsourcereceipt/line';
+import { $t } from '#/locales';
+import { PrinterLabel } from '#/views/mes/wm/barcode/components';
+
+import { type FormType, useLineGridColumns } from '../data';
+import DetailForm from './detail-form.vue';
+import DetailList from './detail-list.vue';
+import LineForm from './line-form.vue';
+
+const props = defineProps<{
+  formType: FormType;
+  receiptId: number;
+}>();
+
+const isEditable = computed(() =>
+  ['create', 'update'].includes(props.formType),
+); // 是否可编辑明细行
+const isStock = computed(() => props.formType === 'stock'); // 是否为上架模式
+const detailMap = reactive<
+  Record<number, MesWmOutsourceReceiptDetailApi.OutsourceReceiptDetail[]>
+>({}); // 已展开行的收货明细缓存
+
+const [LineFormModal, lineFormModalApi] = useVbenModal({
+  connectedComponent: LineForm,
+  destroyOnClose: true,
+});
+
+const [DetailFormModal, detailFormModalApi] = useVbenModal({
+  connectedComponent: DetailForm,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  for (const id of Object.keys(detailMap)) {
+    delete detailMap[Number(id)];
+  }
+  gridApi.query();
+}
+
+/** 添加物料 */
+function handleCreate() {
+  lineFormModalApi.setData({ receiptId: props.receiptId }).open();
+}
+
+/** 编辑物料 */
+function handleEdit(row: MesWmOutsourceReceiptLineApi.OutsourceReceiptLine) {
+  lineFormModalApi.setData({ id: row.id, receiptId: props.receiptId }).open();
+}
+
+/** 删除物料 */
+async function handleDelete(
+  row: MesWmOutsourceReceiptLineApi.OutsourceReceiptLine,
+) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.itemName]),
+  });
+  try {
+    await deleteOutsourceReceiptLine(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.itemName]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 上架：直接打开明细创建表单 */
+function handlePicking(row: MesWmOutsourceReceiptLineApi.OutsourceReceiptLine) {
+  openDetailForm(row.id!, row.itemId);
+}
+
+/** 打开收货明细表单 */
+function openDetailForm(lineId: number, itemId?: number, detailId?: number) {
+  detailFormModalApi
+    .setData({ detailId, itemId, lineId, receiptId: props.receiptId })
+    .open();
+}
+
+/** 获取已展开行的收货明细 */
+function getExpandedDetails(
+  row: MesWmOutsourceReceiptLineApi.OutsourceReceiptLine,
+) {
+  return detailMap[row.id!] || [];
+}
+
+/** 加载指定行的收货明细 */
+async function loadLineDetails(lineId: number) {
+  detailMap[lineId] = await getOutsourceReceiptDetailListByLineId(lineId);
+}
+
+/** 展开行时懒加载收货明细 */
+async function handleExpandChange(
+  row: MesWmOutsourceReceiptLineApi.OutsourceReceiptLine,
+  expanded: boolean,
+) {
+  if (!expanded) {
+    return;
+  }
+  await loadLineDetails(row.id!);
+}
+
+/** 明细表单提交成功后，刷新对应行已展开的明细 */
+async function handleDetailSuccess(lineId: number) {
+  await loadLineDetails(lineId);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useLineGridColumns(isEditable.value, isStock.value),
+    expandConfig: {
+      padding: true,
+    },
+    height: 400,
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }) => {
+          if (!props.receiptId) {
+            return { list: [], total: 0 };
+          }
+          return await getOutsourceReceiptLinePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            receiptId: props.receiptId,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+    },
+  } as VxeTableGridOptions<MesWmOutsourceReceiptLineApi.OutsourceReceiptLine>,
+  gridEvents: {
+    toggleRowExpand: ({
+      expanded,
+      row,
+    }: {
+      expanded: boolean;
+      row: MesWmOutsourceReceiptLineApi.OutsourceReceiptLine;
+    }) => {
+      handleExpandChange(row, expanded);
+    },
+  },
+});
+</script>
+
+<template>
+  <div>
+    <LineFormModal @success="handleRefresh" />
+    <DetailFormModal @success="handleDetailSuccess" />
+    <Grid table-title="物料信息">
+      <template v-if="isEditable" #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: '添加物料',
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #detail="{ row }">
+        <DetailList
+          :details="getExpandedDetails(row)"
+          :form-type="formType"
+          @edit="(detailId) => openDetailForm(row.id!, row.itemId, detailId)"
+          @refresh="loadLineDetails(row.id!)"
+        />
+      </template>
+      <template #actions="{ row }">
+        <div class="flex items-center justify-center">
+          <TableAction
+            :actions="[
+              {
+                label: $t('common.edit'),
+                type: 'primary',
+                link: true,
+                icon: ACTION_ICON.EDIT,
+                ifShow: isEditable,
+                onClick: handleEdit.bind(null, row),
+              },
+              {
+                label: $t('common.delete'),
+                type: 'danger',
+                link: true,
+                icon: ACTION_ICON.DELETE,
+                ifShow: isEditable,
+                popConfirm: {
+                  title: $t('ui.actionMessage.deleteConfirm', [row.itemName]),
+                  confirm: handleDelete.bind(null, row),
+                },
+              },
+              {
+                label: '上架',
+                type: 'primary',
+                link: true,
+                ifShow: isStock,
+                onClick: handlePicking.bind(null, row),
+              },
+            ]"
+          />
+          <PrinterLabel
+            v-if="isStock"
+            :biz-code="row.batchCode"
+            :biz-id="row.batchId"
+            biz-type="BATCH"
+          />
+        </div>
+      </template>
+    </Grid>
+  </div>
+</template>