From f1523e417b56beca6617a829439a5e014b8f2c51 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Fri, 29 May 2026 23:39:32 +0800
Subject: [PATCH] =?UTF-8?q?feat(mes):=20=E8=BF=81=E7=A7=BB=EF=BC=88wm-pack?=
 =?UTF-8?q?ages=EF=BC=89=E7=9B=B8=E5=85=B3=E8=BF=81=E7=A7=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/mes/wm/packages/components/index.ts |   2 +
 .../components/wm-package-select-dialog.vue   | 228 +++++++
 .../packages/components/wm-package-select.vue | 145 ++++
 .../src/views/mes/wm/packages/data.ts         | 639 +++++++++++++++++
 .../src/views/mes/wm/packages/index.vue       | 172 +++++
 .../views/mes/wm/packages/modules/form.vue    | 194 ++++++
 .../mes/wm/packages/modules/line-form.vue     |  92 +++
 .../wm/packages/modules/package-line-list.vue | 132 ++++
 .../wm/packages/modules/sub-package-list.vue  | 126 ++++
 .../views/mes/wm/packages/components/index.ts |   2 +
 .../components/wm-package-select-dialog.vue   | 232 +++++++
 .../packages/components/wm-package-select.vue | 143 ++++
 .../web-ele/src/views/mes/wm/packages/data.ts | 646 ++++++++++++++++++
 .../src/views/mes/wm/packages/index.vue       | 172 +++++
 .../views/mes/wm/packages/modules/form.vue    | 189 +++++
 .../mes/wm/packages/modules/line-form.vue     |  93 +++
 .../wm/packages/modules/package-line-list.vue | 132 ++++
 .../wm/packages/modules/sub-package-list.vue  | 126 ++++
 18 files changed, 3465 insertions(+)
 create mode 100644 apps/web-antd/src/views/mes/wm/packages/components/index.ts
 create mode 100644 apps/web-antd/src/views/mes/wm/packages/components/wm-package-select-dialog.vue
 create mode 100644 apps/web-antd/src/views/mes/wm/packages/components/wm-package-select.vue
 create mode 100644 apps/web-antd/src/views/mes/wm/packages/data.ts
 create mode 100644 apps/web-antd/src/views/mes/wm/packages/index.vue
 create mode 100644 apps/web-antd/src/views/mes/wm/packages/modules/form.vue
 create mode 100644 apps/web-antd/src/views/mes/wm/packages/modules/line-form.vue
 create mode 100644 apps/web-antd/src/views/mes/wm/packages/modules/package-line-list.vue
 create mode 100644 apps/web-antd/src/views/mes/wm/packages/modules/sub-package-list.vue
 create mode 100644 apps/web-ele/src/views/mes/wm/packages/components/index.ts
 create mode 100644 apps/web-ele/src/views/mes/wm/packages/components/wm-package-select-dialog.vue
 create mode 100644 apps/web-ele/src/views/mes/wm/packages/components/wm-package-select.vue
 create mode 100644 apps/web-ele/src/views/mes/wm/packages/data.ts
 create mode 100644 apps/web-ele/src/views/mes/wm/packages/index.vue
 create mode 100644 apps/web-ele/src/views/mes/wm/packages/modules/form.vue
 create mode 100644 apps/web-ele/src/views/mes/wm/packages/modules/line-form.vue
 create mode 100644 apps/web-ele/src/views/mes/wm/packages/modules/package-line-list.vue
 create mode 100644 apps/web-ele/src/views/mes/wm/packages/modules/sub-package-list.vue

diff --git a/apps/web-antd/src/views/mes/wm/packages/components/index.ts b/apps/web-antd/src/views/mes/wm/packages/components/index.ts
new file mode 100644
index 000000000..18bbc399e
--- /dev/null
+++ b/apps/web-antd/src/views/mes/wm/packages/components/index.ts
@@ -0,0 +1,2 @@
+export { default as WmPackageSelectDialog } from './wm-package-select-dialog.vue';
+export { default as WmPackageSelect } from './wm-package-select.vue';
diff --git a/apps/web-antd/src/views/mes/wm/packages/components/wm-package-select-dialog.vue b/apps/web-antd/src/views/mes/wm/packages/components/wm-package-select-dialog.vue
new file mode 100644
index 000000000..23a821409
--- /dev/null
+++ b/apps/web-antd/src/views/mes/wm/packages/components/wm-package-select-dialog.vue
@@ -0,0 +1,228 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesWmPackageApi } from '#/api/mes/wm/packages';
+
+import { nextTick, ref } from 'vue';
+
+import { Alert, message, Modal } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getPackagePage } from '#/api/mes/wm/packages';
+import { MesWmPackageStatusEnum } from '#/views/mes/utils/constants';
+
+import { useSelectGridColumns, useSelectGridFormSchema } from '../data';
+
+const props = withDefaults(
+  defineProps<{
+    childableOnly?: boolean; // 只展示可作为子箱的装箱单（无父箱 + 已完成状态）
+    excludeId?: number; // 排除的编号（避免选择自己作为父箱）
+  }>(),
+  {
+    childableOnly: false,
+    excludeId: undefined,
+  },
+);
+
+const emit = defineEmits<{
+  selected: [rows: MesWmPackageApi.Package[]];
+}>();
+
+const open = ref(false); // 弹窗是否打开
+const multiple = ref(true); // 是否多选
+const syncingSingleSelection = ref(false); // 单选模式同步勾选标记
+const selectedRows = ref<MesWmPackageApi.Package[]>([]); // 已选装箱单
+const preSelectedIds = ref<number[]>([]); // 预选装箱单编号
+
+/** 单选模式同步 VXE 勾选状态 */
+async function syncSingleSelection(row?: MesWmPackageApi.Package) {
+  syncingSingleSelection.value = true;
+  await nextTick();
+  await gridApi.grid.clearCheckboxRow();
+  if (row) {
+    await gridApi.grid.setCheckboxRow(row, true);
+  }
+  await nextTick();
+  syncingSingleSelection.value = false;
+}
+
+/** 处理勾选变化 */
+async function handleCheckboxChange({
+  checked,
+  records,
+  row,
+}: {
+  checked: boolean;
+  records: MesWmPackageApi.Package[];
+  row?: MesWmPackageApi.Package;
+}) {
+  if (syncingSingleSelection.value) {
+    return;
+  }
+  if (!multiple.value) {
+    const selected = checked && row ? [row] : [];
+    selectedRows.value = selected;
+    await syncSingleSelection(selected[0]);
+    return;
+  }
+  selectedRows.value = records;
+}
+
+/** 处理全选变化 */
+function handleCheckboxAll({
+  records,
+}: {
+  records: MesWmPackageApi.Package[];
+}) {
+  if (syncingSingleSelection.value) {
+    return;
+  }
+  selectedRows.value = records;
+}
+
+/** 双击行：单选直接确认；多选切换勾选 */
+async function handleRowDblclick({ row }: { row: MesWmPackageApi.Package }) {
+  if (multiple.value) {
+    const checked = !gridApi.grid.isCheckedByCheckboxRow(row);
+    await gridApi.grid.setCheckboxRow(row, checked);
+    handleCheckboxChange({
+      checked,
+      records:
+        gridApi.grid.getCheckboxRecords() as MesWmPackageApi.Package[],
+      row,
+    });
+    return;
+  }
+  selectedRows.value = [row];
+  await syncSingleSelection(row);
+  handleConfirm();
+}
+
+/** 回显预选 */
+function applyPreSelection() {
+  if (preSelectedIds.value.length === 0) {
+    return;
+  }
+  const rows = gridApi.grid.getData() as MesWmPackageApi.Package[];
+  for (const row of rows) {
+    if (row.id && preSelectedIds.value.includes(row.id)) {
+      gridApi.grid.setCheckboxRow(row, true);
+      if (!multiple.value) {
+        selectedRows.value = [row];
+      }
+    }
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useSelectGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useSelectGridColumns(),
+    height: 480,
+    keepSource: true,
+    checkboxConfig: {
+      highlight: true,
+      range: true,
+      reserve: true,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          const data = await getPackagePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+            // childableOnly 模式：固定过滤无父箱 + 已完成状态
+            parentId: props.childableOnly ? 0 : undefined,
+            status: props.childableOnly
+              ? MesWmPackageStatusEnum.FINISHED
+              : undefined,
+          });
+          // 排除指定编号，避免选择自己作为父箱
+          const list = props.excludeId
+            ? (data.list || []).filter((item) => item.id !== props.excludeId)
+            : data.list || [];
+          return { list, total: data.total };
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MesWmPackageApi.Package>,
+  gridEvents: {
+    cellDblclick: handleRowDblclick,
+    checkboxAll: handleCheckboxAll,
+    checkboxChange: handleCheckboxChange,
+  },
+});
+
+/** 重置查询和选择状态 */
+async function resetQueryState() {
+  selectedRows.value = [];
+  await gridApi.grid.clearCheckboxRow();
+  await gridApi.formApi.resetForm();
+}
+
+/** 打开弹窗 */
+async function openModal(
+  selectedIds?: number[],
+  options?: { multiple?: boolean },
+) {
+  open.value = true;
+  multiple.value = options?.multiple ?? true;
+  preSelectedIds.value = selectedIds || [];
+  await nextTick();
+  await resetQueryState();
+  await gridApi.query();
+  await nextTick();
+  applyPreSelection();
+}
+
+/** 关闭弹窗 */
+async function closeModal() {
+  open.value = false;
+  await resetQueryState();
+}
+
+/** 确认选择 */
+function handleConfirm() {
+  if (selectedRows.value.length === 0) {
+    message.warning(multiple.value ? '请至少选择一条数据' : '请选择一条数据');
+    return;
+  }
+  emit(
+    'selected',
+    multiple.value ? selectedRows.value : [selectedRows.value[0]!],
+  );
+  open.value = false;
+}
+
+defineExpose({ open: openModal });
+</script>
+
+<template>
+  <Modal
+    v-model:open="open"
+    :destroy-on-close="true"
+    title="装箱单选择"
+    width="80%"
+    @cancel="closeModal"
+    @ok="handleConfirm"
+  >
+    <Alert
+      v-if="childableOnly"
+      class="mb-3"
+      message="仅展示可作为子箱的装箱单（无父箱 + 已完成）"
+      show-icon
+      type="info"
+    />
+    <Grid table-title="装箱单列表" />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/mes/wm/packages/components/wm-package-select.vue b/apps/web-antd/src/views/mes/wm/packages/components/wm-package-select.vue
new file mode 100644
index 000000000..3055aceab
--- /dev/null
+++ b/apps/web-antd/src/views/mes/wm/packages/components/wm-package-select.vue
@@ -0,0 +1,145 @@
+<script lang="ts" setup>
+import type { MesWmPackageApi } from '#/api/mes/wm/packages';
+
+import { computed, ref, useAttrs, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Input, Tooltip } from 'ant-design-vue';
+
+import { getPackage } from '#/api/mes/wm/packages';
+
+import WmPackageSelectDialog from './wm-package-select-dialog.vue';
+
+defineOptions({ name: 'WmPackageSelect', inheritAttrs: false });
+
+const props = withDefaults(
+  defineProps<{
+    allowClear?: boolean;
+    childableOnly?: boolean; // 只展示可作为子箱的装箱单（无父箱 + 已完成状态）
+    disabled?: boolean;
+    excludeId?: number; // 排除的编号（避免选择自己作为父箱）
+    modelValue?: number;
+    placeholder?: string;
+  }>(),
+  {
+    allowClear: true,
+    childableOnly: false,
+    disabled: false,
+    excludeId: undefined,
+    modelValue: undefined,
+    placeholder: '请选择装箱单',
+  },
+);
+
+const emit = defineEmits<{
+  change: [item: MesWmPackageApi.Package | undefined];
+  'update:modelValue': [value: number | undefined];
+}>();
+
+const attrs = useAttrs();
+const dialogRef = ref<InstanceType<typeof WmPackageSelectDialog>>();
+const hovering = ref(false);
+const selectedItem = ref<MesWmPackageApi.Package>();
+
+const displayLabel = computed(() => selectedItem.value?.code ?? '');
+
+const showClear = computed(
+  () =>
+    props.allowClear &&
+    !props.disabled &&
+    hovering.value &&
+    props.modelValue != null,
+);
+
+/** 根据编号单条查询装箱单信息（用于编辑回显） */
+async function resolveItemById(id: number | undefined) {
+  if (id == null) {
+    selectedItem.value = undefined;
+    return;
+  }
+  if (selectedItem.value?.id === id) {
+    return;
+  }
+  try {
+    selectedItem.value = await getPackage(id);
+  } catch (error) {
+    console.error('[WmPackageSelect] resolveItemById failed:', error);
+  }
+}
+
+watch(() => props.modelValue, resolveItemById, { immediate: true });
+
+/** 清空已选装箱单 */
+function clearSelected() {
+  selectedItem.value = undefined;
+  emit('update:modelValue', undefined);
+  emit('change', undefined);
+}
+
+/** 打开装箱单选择弹窗 */
+function handleClick(event: MouseEvent) {
+  if (props.disabled) {
+    return;
+  }
+  const target = event.target as HTMLElement;
+  if (showClear.value && target.closest('.ant-input-suffix')) {
+    event.stopPropagation();
+    clearSelected();
+    return;
+  }
+  const selectedIds = props.modelValue == null ? [] : [props.modelValue];
+  dialogRef.value?.open(selectedIds, { multiple: false });
+}
+
+/** 弹窗选中回调 */
+function handleSelected(rows: MesWmPackageApi.Package[]) {
+  const item = rows[0];
+  if (!item) {
+    return;
+  }
+  selectedItem.value = item;
+  emit('update:modelValue', item.id);
+  emit('change', item);
+}
+</script>
+
+<template>
+  <div
+    v-bind="attrs"
+    class="w-full"
+    :class="disabled ? 'cursor-not-allowed' : 'cursor-pointer'"
+    @click="handleClick"
+    @mouseenter="hovering = true"
+    @mouseleave="hovering = false"
+  >
+    <Tooltip :mouse-enter-delay="0.5" :open="selectedItem ? undefined : false">
+      <template #title>
+        <div v-if="selectedItem" class="leading-6">
+          <div>编号：{{ selectedItem.code || '-' }}</div>
+          <div>客户：{{ selectedItem.clientName || '-' }}</div>
+          <div>销售订单：{{ selectedItem.salesOrderCode || '-' }}</div>
+        </div>
+      </template>
+      <Input
+        :disabled="disabled"
+        :placeholder="placeholder"
+        :value="displayLabel"
+        readonly
+      >
+        <template #suffix>
+          <IconifyIcon
+            class="size-4"
+            :icon="showClear ? 'lucide:circle-x' : 'lucide:search'"
+          />
+        </template>
+      </Input>
+    </Tooltip>
+  </div>
+  <WmPackageSelectDialog
+    ref="dialogRef"
+    :childable-only="childableOnly"
+    :exclude-id="excludeId"
+    @selected="handleSelected"
+  />
+</template>
diff --git a/apps/web-antd/src/views/mes/wm/packages/data.ts b/apps/web-antd/src/views/mes/wm/packages/data.ts
new file mode 100644
index 000000000..4470de2fe
--- /dev/null
+++ b/apps/web-antd/src/views/mes/wm/packages/data.ts
@@ -0,0 +1,639 @@
+import type { VbenFormApi, VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesWmPackageApi } from '#/api/mes/wm/packages';
+import type { MesWmPackageLineApi } from '#/api/mes/wm/packages/line';
+
+import { h, markRaw } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+
+import { Button } from 'ant-design-vue';
+
+import { generateAutoCode } from '#/api/mes/md/autocode/record';
+import { getSimpleUserList } from '#/api/system/user';
+import MdClientSelect from '#/views/mes/md/client/components/md-client-select.vue';
+import MdItemSelect from '#/views/mes/md/item/components/md-item-select.vue';
+import { MdUnitMeasureSelect } from '#/views/mes/md/unitmeasure/components';
+import ProWorkOrderSelect from '#/views/mes/pro/workorder/components/pro-work-order-select.vue';
+import {
+  MesAutoCodeRuleCode,
+  MesProWorkOrderStatusEnum,
+} from '#/views/mes/utils/constants';
+
+/** 表单类型 */
+export type FormType = 'create' | 'detail' | 'update';
+
+/** 新增/修改的表单 */
+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:
+        formType === 'detail'
+          ? undefined
+          : () =>
+              h(
+                Button,
+                {
+                  type: 'default',
+                  onClick: async () => {
+                    const code = await generateAutoCode(
+                      MesAutoCodeRuleCode.WM_PACKAGE_CODE,
+                    );
+                    await formApi?.setFieldValue('code', code);
+                  },
+                },
+                { default: () => '生成' },
+              ),
+    },
+    {
+      fieldName: 'packageDate',
+      label: '装箱日期',
+      component: 'DatePicker',
+      componentProps: {
+        format: 'YYYY-MM-DD',
+        placeholder: '请选择装箱日期',
+        valueFormat: 'x',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'inspectorUserId',
+      label: '检查员',
+      component: 'ApiSelect',
+      componentProps: {
+        allowClear: true,
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        placeholder: '请选择检查员',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'salesOrderCode',
+      label: '销售订单编号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入销售订单编号',
+      },
+    },
+    {
+      fieldName: 'invoiceCode',
+      label: '发票编号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入发票编号',
+      },
+    },
+    {
+      fieldName: 'clientId',
+      label: '客户',
+      component: markRaw(MdClientSelect),
+      componentProps: {
+        placeholder: '请选择客户',
+      },
+    },
+    {
+      fieldName: 'sizeUnitId',
+      label: '尺寸单位',
+      component: markRaw(MdUnitMeasureSelect),
+      componentProps: {
+        placeholder: '请选择尺寸单位',
+      },
+    },
+    {
+      fieldName: 'length',
+      label: '箱长度',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        min: 0,
+        placeholder: '请输入箱长度',
+        precision: 2,
+      },
+    },
+    {
+      fieldName: 'width',
+      label: '箱宽度',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        min: 0,
+        placeholder: '请输入箱宽度',
+        precision: 2,
+      },
+    },
+    {
+      fieldName: 'height',
+      label: '箱高度',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        min: 0,
+        placeholder: '请输入箱高度',
+        precision: 2,
+      },
+    },
+    {
+      fieldName: 'weightUnitId',
+      label: '重量单位',
+      component: markRaw(MdUnitMeasureSelect),
+      componentProps: {
+        placeholder: '请选择重量单位',
+      },
+    },
+    {
+      fieldName: 'netWeight',
+      label: '净重',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        min: 0,
+        placeholder: '请输入净重',
+        precision: 2,
+      },
+    },
+    {
+      fieldName: 'grossWeight',
+      label: '毛重',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        min: 0,
+        placeholder: '请输入毛重',
+        precision: 2,
+      },
+    },
+    {
+      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: 'salesOrderCode',
+      label: '销售订单编号',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入销售订单编号',
+      },
+    },
+    {
+      fieldName: 'clientId',
+      label: '客户',
+      component: markRaw(MdClientSelect),
+      componentProps: {
+        placeholder: '请选择客户',
+      },
+    },
+    {
+      fieldName: 'inspectorUserId',
+      label: '检查员',
+      component: 'ApiSelect',
+      componentProps: {
+        allowClear: true,
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        placeholder: '请选择检查员',
+        valueField: 'id',
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions<MesWmPackageApi.Package>['columns'] {
+  return [
+    {
+      field: 'code',
+      title: '装箱单编号',
+      minWidth: 250,
+      fixed: 'left',
+      treeNode: true,
+      slots: { default: 'code' },
+    },
+    {
+      field: 'packageDate',
+      title: '装箱日期',
+      width: 120,
+      formatter: 'formatDate',
+    },
+    {
+      field: 'salesOrderCode',
+      title: '销售订单编号',
+      minWidth: 140,
+    },
+    {
+      field: 'invoiceCode',
+      title: '发票编号',
+      minWidth: 120,
+    },
+    {
+      field: 'clientCode',
+      title: '客户编码',
+      minWidth: 100,
+    },
+    {
+      field: 'clientName',
+      title: '客户名称',
+      minWidth: 120,
+    },
+    {
+      field: 'length',
+      title: '箱长度',
+      width: 80,
+    },
+    {
+      field: 'width',
+      title: '箱宽度',
+      width: 80,
+    },
+    {
+      field: 'height',
+      title: '箱高度',
+      width: 80,
+    },
+    {
+      field: 'sizeUnitName',
+      title: '尺寸单位',
+      width: 90,
+    },
+    {
+      field: 'netWeight',
+      title: '净重',
+      width: 80,
+    },
+    {
+      field: 'grossWeight',
+      title: '毛重',
+      width: 80,
+    },
+    {
+      field: 'weightUnitName',
+      title: '重量单位',
+      width: 90,
+    },
+    {
+      field: 'inspectorName',
+      title: '检查员',
+      minWidth: 100,
+    },
+    {
+      field: 'status',
+      title: '单据状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MES_WM_PACKAGE_STATUS },
+      },
+    },
+    {
+      title: '操作',
+      width: 160,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 子箱列表的字段 */
+export function useSubPackageGridColumns(): VxeTableGridOptions<MesWmPackageApi.Package>['columns'] {
+  return [
+    {
+      field: 'code',
+      title: '装箱单编号',
+      minWidth: 160,
+      fixed: 'left',
+    },
+    {
+      field: 'packageDate',
+      title: '装箱日期',
+      width: 120,
+      formatter: 'formatDate',
+    },
+    {
+      field: 'salesOrderCode',
+      title: '销售订单编号',
+      minWidth: 140,
+    },
+    {
+      field: 'invoiceCode',
+      title: '发票编号',
+      minWidth: 120,
+    },
+    {
+      field: 'clientCode',
+      title: '客户编码',
+      minWidth: 100,
+    },
+    {
+      field: 'clientName',
+      title: '客户名称',
+      minWidth: 120,
+    },
+    {
+      field: 'netWeight',
+      title: '净重',
+      width: 80,
+    },
+    {
+      field: 'grossWeight',
+      title: '毛重',
+      width: 80,
+    },
+    {
+      field: 'weightUnitName',
+      title: '重量单位',
+      width: 90,
+    },
+    {
+      field: 'inspectorName',
+      title: '检查员',
+      minWidth: 100,
+    },
+    {
+      field: 'status',
+      title: '单据状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MES_WM_PACKAGE_STATUS },
+      },
+    },
+    {
+      title: '操作',
+      width: 100,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 装箱明细的表单 */
+export function useLineFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'workOrderId',
+      label: '生产工单',
+      component: markRaw(ProWorkOrderSelect),
+      componentProps: {
+        placeholder: '请选择生产工单',
+        status: MesProWorkOrderStatusEnum.CONFIRMED,
+      },
+      rules: 'selectRequired',
+    },
+    {
+      fieldName: 'itemId',
+      label: '产品物料',
+      component: markRaw(MdItemSelect),
+      componentProps: {
+        placeholder: '请选择产品物料',
+      },
+      rules: 'selectRequired',
+    },
+    {
+      fieldName: 'quantity',
+      label: '装箱数量',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        min: 0.01,
+        placeholder: '请输入装箱数量',
+        precision: 2,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'expireDate',
+      label: '有效期',
+      component: 'DatePicker',
+      componentProps: {
+        format: 'YYYY-MM-DD',
+        placeholder: '请选择有效期',
+        valueFormat: 'x',
+      },
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      formItemClass: 'col-span-2',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 3,
+      },
+    },
+  ];
+}
+
+/** 装箱明细列表的字段 */
+export function useLineGridColumns(): VxeTableGridOptions<MesWmPackageLineApi.PackageLine>['columns'] {
+  return [
+    {
+      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: 'workOrderCode',
+      title: '生产工单编号',
+      minWidth: 140,
+    },
+    {
+      field: 'batchCode',
+      title: '批次号',
+      minWidth: 120,
+    },
+    {
+      field: 'expireDate',
+      title: '有效期',
+      width: 120,
+      formatter: 'formatDate',
+    },
+    {
+      title: '操作',
+      width: 120,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 选择弹窗的搜索表单 */
+export function useSelectGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'code',
+      label: '装箱单编号',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入装箱单编号',
+      },
+    },
+    {
+      fieldName: 'salesOrderCode',
+      label: '销售订单编号',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入销售订单编号',
+      },
+    },
+    {
+      fieldName: 'clientId',
+      label: '客户',
+      component: markRaw(MdClientSelect),
+      componentProps: {
+        placeholder: '请选择客户',
+      },
+    },
+    {
+      fieldName: 'inspectorUserId',
+      label: '检查员',
+      component: 'ApiSelect',
+      componentProps: {
+        allowClear: true,
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        placeholder: '请选择检查员',
+        valueField: 'id',
+      },
+    },
+  ];
+}
+
+/** 选择弹窗的字段 */
+export function useSelectGridColumns(): VxeTableGridOptions<MesWmPackageApi.Package>['columns'] {
+  return [
+    {
+      type: 'checkbox',
+      width: 50,
+    },
+    {
+      field: 'code',
+      title: '装箱单编号',
+      minWidth: 160,
+    },
+    {
+      field: 'packageDate',
+      title: '装箱日期',
+      width: 120,
+      formatter: 'formatDate',
+    },
+    {
+      field: 'salesOrderCode',
+      title: '销售订单编号',
+      minWidth: 140,
+    },
+    {
+      field: 'invoiceCode',
+      title: '发票编号',
+      minWidth: 120,
+    },
+    {
+      field: 'clientCode',
+      title: '客户编码',
+      minWidth: 100,
+    },
+    {
+      field: 'clientName',
+      title: '客户名称',
+      minWidth: 120,
+    },
+    {
+      field: 'netWeight',
+      title: '净重',
+      width: 80,
+    },
+    {
+      field: 'grossWeight',
+      title: '毛重',
+      width: 80,
+    },
+    {
+      field: 'weightUnitName',
+      title: '重量单位',
+      width: 90,
+    },
+    {
+      field: 'inspectorName',
+      title: '检查员',
+      minWidth: 100,
+    },
+    {
+      field: 'status',
+      title: '单据状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MES_WM_PACKAGE_STATUS },
+      },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/mes/wm/packages/index.vue b/apps/web-antd/src/views/mes/wm/packages/index.vue
new file mode 100644
index 000000000..1216ff763
--- /dev/null
+++ b/apps/web-antd/src/views/mes/wm/packages/index.vue
@@ -0,0 +1,172 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesWmPackageApi } from '#/api/mes/wm/packages';
+
+import { ref } from 'vue';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+
+import { Button, message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deletePackage, getPackagePage } from '#/api/mes/wm/packages';
+import { $t } from '#/locales';
+import { MesWmPackageStatusEnum } from '#/views/mes/utils/constants';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const isExpanded = ref(true); // 树形表格是否展开
+
+/** 切换树形展开/收缩状态 */
+function handleExpand() {
+  isExpanded.value = !isExpanded.value;
+  gridApi.grid.setAllTreeExpand(isExpanded.value);
+}
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建装箱单 */
+function handleCreate() {
+  formModalApi.setData({ formType: 'create' }).open();
+}
+
+/** 查看装箱单 */
+function handleDetail(row: MesWmPackageApi.Package) {
+  formModalApi.setData({ formType: 'detail', id: row.id }).open();
+}
+
+/** 编辑装箱单 */
+function handleEdit(row: MesWmPackageApi.Package) {
+  formModalApi.setData({ formType: 'update', id: row.id }).open();
+}
+
+/** 删除装箱单 */
+async function handleDelete(row: MesWmPackageApi.Package) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.code]),
+    duration: 0,
+  });
+  try {
+    await deletePackage(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.code]));
+    handleRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    pagerConfig: {
+      enabled: false,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async (_, formValues) => {
+          const data = await getPackagePage({
+            pageNo: 1,
+            pageSize: 100,
+            ...formValues,
+          });
+          return { list: data.list || [] };
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+    treeConfig: {
+      parentField: 'parentId',
+      rowField: 'id',
+      transform: true,
+      expandAll: true,
+      reserve: true,
+    },
+  } as VxeTableGridOptions<MesWmPackageApi.Package>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【仓库】调拨单、装箱管理"
+        url="https://doc.iocoder.cn/mes/wm/transfer/"
+      />
+    </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-package:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: isExpanded ? '收缩' : '展开',
+              type: 'primary',
+              onClick: handleExpand,
+            },
+          ]"
+        />
+      </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-package:update'],
+              ifShow: row.status === MesWmPackageStatusEnum.PREPARE,
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['mes:wm-package:delete'],
+              ifShow: row.status === MesWmPackageStatusEnum.PREPARE,
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.code]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-antd/src/views/mes/wm/packages/modules/form.vue b/apps/web-antd/src/views/mes/wm/packages/modules/form.vue
new file mode 100644
index 000000000..b3a4d1b90
--- /dev/null
+++ b/apps/web-antd/src/views/mes/wm/packages/modules/form.vue
@@ -0,0 +1,194 @@
+<script lang="ts" setup>
+import type { FormType } from '../data';
+
+import type { MesWmPackageApi } from '#/api/mes/wm/packages';
+
+import { computed, ref } from 'vue';
+
+import { confirm, useVbenModal } from '@vben/common-ui';
+
+import { Button, message, Tabs } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createPackage,
+  finishPackage,
+  getPackage,
+  updatePackage,
+} from '#/api/mes/wm/packages';
+import { $t } from '#/locales';
+import { MesWmPackageStatusEnum } from '#/views/mes/utils/constants';
+
+import { useFormSchema } from '../data';
+import PackageLineList from './package-line-list.vue';
+import SubPackageList from './sub-package-list.vue';
+
+const emit = defineEmits(['success']);
+const formType = ref<FormType>('create');
+const formData = ref<MesWmPackageApi.Package>();
+const subTabsName = ref('subPackage'); // 子表当前 tab
+const originalSnapshot = ref(''); // 表单原始数据快照，用于 finish 时跳过未变更的保存请求
+
+const isEditable = computed(() =>
+  ['create', 'update'].includes(formType.value),
+);
+// TODO @AI：这种 ( 可以不折行么？
+const canFinish = computed(
+  () =>
+    formType.value === 'update' &&
+    formData.value?.status === MesWmPackageStatusEnum.PREPARE,
+);
+const getTitle = computed(() => {
+  if (formType.value === 'detail') {
+    return $t('ui.actionTitle.view', ['装箱单']);
+  }
+  return formType.value === 'update'
+    ? $t('ui.actionTitle.edit', ['装箱单'])
+    : $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',
+});
+
+/** 提交表单（create/update），新增成功后切换为编辑态以继续维护子表 */
+async function handleSubmit(): Promise<boolean> {
+  const { valid } = await formApi.validate();
+  if (!valid) {
+    return false;
+  }
+  const data = (await formApi.getValues()) as MesWmPackageApi.Package;
+  if (formData.value?.id) {
+    await updatePackage({ ...data, id: formData.value.id });
+    formData.value = { ...formData.value, ...data };
+  } else {
+    const id = await createPackage(data);
+    formData.value = {
+      ...data,
+      id,
+      status: MesWmPackageStatusEnum.PREPARE,
+    };
+    await formApi.setFieldValue('id', id);
+    await formApi.setFieldValue('status', MesWmPackageStatusEnum.PREPARE);
+    formType.value = 'update';
+  }
+  // 刷新快照，下次 finish 用于判断是否需要再保存
+  originalSnapshot.value = JSON.stringify(await formApi.getValues());
+  return true;
+}
+
+/** 完成装箱单：编辑态有修改时先保存，再调用完成接口 */
+async function handleFinish() {
+  const id = formData.value?.id;
+  if (!id) {
+    return;
+  }
+  try {
+    await confirm('确认完成该装箱单？完成后将不可编辑。');
+  } catch {
+    return;
+  }
+  const { valid } = await formApi.validate();
+  if (!valid) {
+    return;
+  }
+  modalApi.lock();
+  try {
+    const current = JSON.stringify(await formApi.getValues());
+    if (current !== originalSnapshot.value) {
+      const data = (await formApi.getValues()) as MesWmPackageApi.Package;
+      await updatePackage({ ...data, id });
+      originalSnapshot.value = current;
+    }
+    await finishPackage(id);
+    message.success('完成成功');
+    await modalApi.close();
+    emit('success');
+  } finally {
+    modalApi.unlock();
+  }
+}
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    if (formType.value === 'detail') {
+      await modalApi.close();
+      return;
+    }
+    modalApi.lock();
+    try {
+      // 提交表单
+      const ok = await handleSubmit();
+      if (!ok) {
+        return;
+      }
+      // 关闭并提示
+      message.success($t('ui.actionMessage.operationSuccess'));
+      emit('success');
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      originalSnapshot.value = '';
+      return;
+    }
+    subTabsName.value = 'subPackage';
+    // 加载数据
+    const data = modalApi.getData<{ formType: FormType; id?: number }>();
+    formType.value = data.formType;
+    formApi.setState({ schema: useFormSchema(formType.value, formApi) });
+    formApi.setDisabled(formType.value === 'detail');
+    modalApi.setState({ showConfirmButton: formType.value !== 'detail' });
+    if (data?.id) {
+      modalApi.lock();
+      try {
+        formData.value = await getPackage(data.id);
+        // 设置到 values
+        await formApi.setValues(formData.value);
+      } finally {
+        modalApi.unlock();
+      }
+    }
+    // 记录初始快照，后续 finish 用于判断是否需要再保存
+    originalSnapshot.value = JSON.stringify(await formApi.getValues());
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-4/5">
+    <Form class="mx-4" />
+    <Tabs
+      v-if="formData?.id"
+      v-model:active-key="subTabsName"
+      class="mx-4 mt-4"
+    >
+      <Tabs.TabPane key="subPackage" tab="子箱">
+        <SubPackageList :editable="isEditable" :package-id="formData.id" />
+      </Tabs.TabPane>
+      <Tabs.TabPane key="packageLine" tab="装箱清单">
+        <PackageLineList :editable="isEditable" :package-id="formData.id" />
+      </Tabs.TabPane>
+    </Tabs>
+    <template #prepend-footer>
+      <div class="flex flex-auto items-center gap-2">
+        <Button v-if="canFinish" type="primary" @click="handleFinish">
+          完成
+        </Button>
+      </div>
+    </template>
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/mes/wm/packages/modules/line-form.vue b/apps/web-antd/src/views/mes/wm/packages/modules/line-form.vue
new file mode 100644
index 000000000..3b00e7f08
--- /dev/null
+++ b/apps/web-antd/src/views/mes/wm/packages/modules/line-form.vue
@@ -0,0 +1,92 @@
+<script lang="ts" setup>
+import type { MesWmPackageLineApi } from '#/api/mes/wm/packages/line';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createPackageLine,
+  getPackageLine,
+  updatePackageLine,
+} from '#/api/mes/wm/packages/line';
+import { $t } from '#/locales';
+
+import { useLineFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<MesWmPackageLineApi.PackageLine>();
+const packageId = ref<number>(); // TODO @AI：尾注释；
+const getTitle = computed(() =>
+  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: 100,
+  },
+  layout: 'horizontal',
+  schema: useLineFormSchema(),
+  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 MesWmPackageLineApi.PackageLine;
+    data.packageId = packageId.value;
+    try {
+      await (formData.value?.id
+        ? updatePackageLine({ ...data, id: formData.value.id })
+        : createPackageLine(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; packageId: number }>();
+    packageId.value = data.packageId;
+    if (!data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getPackageLine(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-2/5">
+    <Form />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/mes/wm/packages/modules/package-line-list.vue b/apps/web-antd/src/views/mes/wm/packages/modules/package-line-list.vue
new file mode 100644
index 000000000..14be50523
--- /dev/null
+++ b/apps/web-antd/src/views/mes/wm/packages/modules/package-line-list.vue
@@ -0,0 +1,132 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesWmPackageLineApi } from '#/api/mes/wm/packages/line';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deletePackageLine,
+  getPackageLinePage,
+} from '#/api/mes/wm/packages/line';
+import { $t } from '#/locales';
+
+import { useLineGridColumns } from '../data';
+import LineForm from './line-form.vue';
+
+const props = defineProps<{
+  editable: boolean; // 是否可编辑（草稿态）
+  packageId: number; // 所属装箱单编号
+}>();
+
+const [LineFormModal, lineFormModalApi] = useVbenModal({
+  connectedComponent: LineForm,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 添加装箱明细 */
+function handleCreate() {
+  lineFormModalApi.setData({ packageId: props.packageId }).open();
+}
+
+/** 编辑装箱明细 */
+function handleEdit(row: MesWmPackageLineApi.PackageLine) {
+  lineFormModalApi.setData({ id: row.id, packageId: props.packageId }).open();
+}
+
+/** 删除装箱明细 */
+async function handleDelete(row: MesWmPackageLineApi.PackageLine) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.itemName]),
+    duration: 0,
+  });
+  try {
+    await deletePackageLine(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.itemName]));
+    handleRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useLineGridColumns(),
+    height: 360,
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }) => {
+          if (!props.packageId) {
+            return { list: [], total: 0 };
+          }
+          return await getPackageLinePage({
+            packageId: props.packageId,
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+    },
+  } as VxeTableGridOptions<MesWmPackageLineApi.PackageLine>,
+});
+</script>
+
+<template>
+  <div>
+    <LineFormModal @success="handleRefresh" />
+    <Grid table-title="装箱清单">
+      <template #toolbar-tools>
+        <TableAction
+          v-if="editable"
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['装箱明细']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              ifShow: editable,
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              ifShow: editable,
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.itemName]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </div>
+</template>
diff --git a/apps/web-antd/src/views/mes/wm/packages/modules/sub-package-list.vue b/apps/web-antd/src/views/mes/wm/packages/modules/sub-package-list.vue
new file mode 100644
index 000000000..b5183ce4c
--- /dev/null
+++ b/apps/web-antd/src/views/mes/wm/packages/modules/sub-package-list.vue
@@ -0,0 +1,126 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesWmPackageApi } from '#/api/mes/wm/packages';
+
+import { ref } from 'vue';
+
+import { message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  addChildPackage,
+  getPackagePage,
+  removeChildPackage,
+} from '#/api/mes/wm/packages';
+import { $t } from '#/locales';
+
+import WmPackageSelectDialog from '../components/wm-package-select-dialog.vue';
+import { useSubPackageGridColumns } from '../data';
+
+const props = defineProps<{
+  editable: boolean; // 是否可编辑（草稿态）
+  packageId: number; // 父箱编号
+}>();
+
+const dialogRef = ref<InstanceType<typeof WmPackageSelectDialog>>();
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 打开装箱单选择弹窗添加子箱 */
+function handleAddChild() {
+  dialogRef.value?.open([], { multiple: false });
+}
+
+/** 选中回调：将选中的装箱单添加为子箱 */
+async function handleSelected(rows: MesWmPackageApi.Package[]) {
+  const child = rows[0];
+  if (!child?.id) {
+    return;
+  }
+  await addChildPackage(props.packageId, child.id);
+  message.success($t('ui.actionMessage.operationSuccess'));
+  handleRefresh();
+}
+
+/** 移除子箱：将子箱的父箱编号清空 */
+async function handleRemoveChild(row: MesWmPackageApi.Package) {
+  await removeChildPackage(row.id!);
+  message.success('移除成功');
+  handleRefresh();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useSubPackageGridColumns(),
+    height: 360,
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }) => {
+          if (!props.packageId) {
+            return { list: [], total: 0 };
+          }
+          return await getPackagePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            parentId: props.packageId,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+    },
+  } as VxeTableGridOptions<MesWmPackageApi.Package>,
+});
+</script>
+
+<template>
+  <div>
+    <WmPackageSelectDialog
+      ref="dialogRef"
+      childable-only
+      :exclude-id="packageId"
+      @selected="handleSelected"
+    />
+    <Grid table-title="子箱列表">
+      <template #toolbar-tools>
+        <TableAction
+          v-if="editable"
+          :actions="[
+            {
+              label: '添加子箱',
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              onClick: handleAddChild,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '移除',
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              ifShow: editable,
+              popConfirm: {
+                title: '确认将该装箱单从子箱列表中移除？',
+                confirm: handleRemoveChild.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/mes/wm/packages/components/index.ts b/apps/web-ele/src/views/mes/wm/packages/components/index.ts
new file mode 100644
index 000000000..18bbc399e
--- /dev/null
+++ b/apps/web-ele/src/views/mes/wm/packages/components/index.ts
@@ -0,0 +1,2 @@
+export { default as WmPackageSelectDialog } from './wm-package-select-dialog.vue';
+export { default as WmPackageSelect } from './wm-package-select.vue';
diff --git a/apps/web-ele/src/views/mes/wm/packages/components/wm-package-select-dialog.vue b/apps/web-ele/src/views/mes/wm/packages/components/wm-package-select-dialog.vue
new file mode 100644
index 000000000..3aab57f0b
--- /dev/null
+++ b/apps/web-ele/src/views/mes/wm/packages/components/wm-package-select-dialog.vue
@@ -0,0 +1,232 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesWmPackageApi } from '#/api/mes/wm/packages';
+
+import { nextTick, ref } from 'vue';
+
+import { ElAlert, ElButton, ElDialog, ElMessage } from 'element-plus';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getPackagePage } from '#/api/mes/wm/packages';
+import { MesWmPackageStatusEnum } from '#/views/mes/utils/constants';
+
+import { useSelectGridColumns, useSelectGridFormSchema } from '../data';
+
+const props = withDefaults(
+  defineProps<{
+    childableOnly?: boolean; // 只展示可作为子箱的装箱单（无父箱 + 已完成状态）
+    excludeId?: number; // 排除的编号（避免选择自己作为父箱）
+  }>(),
+  {
+    childableOnly: false,
+    excludeId: undefined,
+  },
+);
+
+const emit = defineEmits<{
+  selected: [rows: MesWmPackageApi.Package[]];
+}>();
+
+const open = ref(false); // 弹窗是否打开
+const multiple = ref(true); // 是否多选
+const syncingSingleSelection = ref(false); // 单选模式同步勾选标记
+const selectedRows = ref<MesWmPackageApi.Package[]>([]); // 已选装箱单
+const preSelectedIds = ref<number[]>([]); // 预选装箱单编号
+
+/** 单选模式同步 VXE 勾选状态 */
+async function syncSingleSelection(row?: MesWmPackageApi.Package) {
+  syncingSingleSelection.value = true;
+  await nextTick();
+  await gridApi.grid.clearCheckboxRow();
+  if (row) {
+    await gridApi.grid.setCheckboxRow(row, true);
+  }
+  await nextTick();
+  syncingSingleSelection.value = false;
+}
+
+/** 处理勾选变化 */
+async function handleCheckboxChange({
+  checked,
+  records,
+  row,
+}: {
+  checked: boolean;
+  records: MesWmPackageApi.Package[];
+  row?: MesWmPackageApi.Package;
+}) {
+  if (syncingSingleSelection.value) {
+    return;
+  }
+  if (!multiple.value) {
+    const selected = checked && row ? [row] : [];
+    selectedRows.value = selected;
+    await syncSingleSelection(selected[0]);
+    return;
+  }
+  selectedRows.value = records;
+}
+
+/** 处理全选变化 */
+function handleCheckboxAll({
+  records,
+}: {
+  records: MesWmPackageApi.Package[];
+}) {
+  if (syncingSingleSelection.value) {
+    return;
+  }
+  selectedRows.value = records;
+}
+
+/** 双击行：单选直接确认；多选切换勾选 */
+async function handleRowDblclick({ row }: { row: MesWmPackageApi.Package }) {
+  if (multiple.value) {
+    const checked = !gridApi.grid.isCheckedByCheckboxRow(row);
+    await gridApi.grid.setCheckboxRow(row, checked);
+    handleCheckboxChange({
+      checked,
+      records:
+        gridApi.grid.getCheckboxRecords() as MesWmPackageApi.Package[],
+      row,
+    });
+    return;
+  }
+  selectedRows.value = [row];
+  await syncSingleSelection(row);
+  handleConfirm();
+}
+
+/** 回显预选 */
+function applyPreSelection() {
+  if (preSelectedIds.value.length === 0) {
+    return;
+  }
+  const rows = gridApi.grid.getData() as MesWmPackageApi.Package[];
+  for (const row of rows) {
+    if (row.id && preSelectedIds.value.includes(row.id)) {
+      gridApi.grid.setCheckboxRow(row, true);
+      if (!multiple.value) {
+        selectedRows.value = [row];
+      }
+    }
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useSelectGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useSelectGridColumns(),
+    height: 480,
+    keepSource: true,
+    checkboxConfig: {
+      highlight: true,
+      range: true,
+      reserve: true,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          const data = await getPackagePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+            // childableOnly 模式：固定过滤无父箱 + 已完成状态
+            parentId: props.childableOnly ? 0 : undefined,
+            status: props.childableOnly
+              ? MesWmPackageStatusEnum.FINISHED
+              : undefined,
+          });
+          // 排除指定编号，避免选择自己作为父箱
+          const list = props.excludeId
+            ? (data.list || []).filter((item) => item.id !== props.excludeId)
+            : data.list || [];
+          return { list, total: data.total };
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MesWmPackageApi.Package>,
+  gridEvents: {
+    cellDblclick: handleRowDblclick,
+    checkboxAll: handleCheckboxAll,
+    checkboxChange: handleCheckboxChange,
+  },
+});
+
+/** 重置查询和选择状态 */
+async function resetQueryState() {
+  selectedRows.value = [];
+  await gridApi.grid.clearCheckboxRow();
+  await gridApi.formApi.resetForm();
+}
+
+/** 打开弹窗 */
+async function openModal(
+  selectedIds?: number[],
+  options?: { multiple?: boolean },
+) {
+  open.value = true;
+  multiple.value = options?.multiple ?? true;
+  preSelectedIds.value = selectedIds || [];
+  await nextTick();
+  await resetQueryState();
+  await gridApi.query();
+  await nextTick();
+  applyPreSelection();
+}
+
+/** 关闭弹窗 */
+async function closeModal() {
+  open.value = false;
+  await resetQueryState();
+}
+
+/** 确认选择 */
+function handleConfirm() {
+  if (selectedRows.value.length === 0) {
+    ElMessage.warning(multiple.value ? '请至少选择一条数据' : '请选择一条数据');
+    return;
+  }
+  emit(
+    'selected',
+    multiple.value ? selectedRows.value : [selectedRows.value[0]!],
+  );
+  open.value = false;
+}
+
+defineExpose({ open: openModal });
+</script>
+
+<template>
+  <ElDialog
+    v-model="open"
+    destroy-on-close
+    title="装箱单选择"
+    width="80%"
+    @close="closeModal"
+  >
+    <ElAlert
+      v-if="childableOnly"
+      class="mb-3"
+      :closable="false"
+      show-icon
+      title="仅展示可作为子箱的装箱单（无父箱 + 已完成）"
+      type="info"
+    />
+    <Grid table-title="装箱单列表" />
+    <template #footer>
+      <ElButton @click="closeModal">取消</ElButton>
+      <ElButton type="primary" @click="handleConfirm">确定</ElButton>
+    </template>
+  </ElDialog>
+</template>
diff --git a/apps/web-ele/src/views/mes/wm/packages/components/wm-package-select.vue b/apps/web-ele/src/views/mes/wm/packages/components/wm-package-select.vue
new file mode 100644
index 000000000..f732877ce
--- /dev/null
+++ b/apps/web-ele/src/views/mes/wm/packages/components/wm-package-select.vue
@@ -0,0 +1,143 @@
+<script lang="ts" setup>
+import type { MesWmPackageApi } from '#/api/mes/wm/packages';
+
+import { computed, ref, useAttrs, watch } from 'vue';
+
+import { CircleX, Search } from '@vben/icons';
+
+import { ElInput, ElTooltip } from 'element-plus';
+
+import { getPackage } from '#/api/mes/wm/packages';
+
+import WmPackageSelectDialog from './wm-package-select-dialog.vue';
+
+defineOptions({ name: 'WmPackageSelect', inheritAttrs: false });
+
+const props = withDefaults(
+  defineProps<{
+    childableOnly?: boolean; // 只展示可作为子箱的装箱单（无父箱 + 已完成状态）
+    clearable?: boolean;
+    disabled?: boolean;
+    excludeId?: number; // 排除的编号（避免选择自己作为父箱）
+    modelValue?: number;
+    placeholder?: string;
+  }>(),
+  {
+    childableOnly: false,
+    clearable: true,
+    disabled: false,
+    excludeId: undefined,
+    modelValue: undefined,
+    placeholder: '请选择装箱单',
+  },
+);
+
+const emit = defineEmits<{
+  change: [item: MesWmPackageApi.Package | undefined];
+  'update:modelValue': [value: number | undefined];
+}>();
+
+const attrs = useAttrs();
+const dialogRef = ref<InstanceType<typeof WmPackageSelectDialog>>();
+const hovering = ref(false);
+const selectedItem = ref<MesWmPackageApi.Package>();
+
+const displayLabel = computed(() => selectedItem.value?.code ?? '');
+
+const showClear = computed(
+  () =>
+    props.clearable &&
+    !props.disabled &&
+    hovering.value &&
+    props.modelValue != null,
+);
+
+/** 根据编号单条查询装箱单信息（用于编辑回显） */
+async function resolveItemById(id: number | undefined) {
+  if (id == null) {
+    selectedItem.value = undefined;
+    return;
+  }
+  if (selectedItem.value?.id === id) {
+    return;
+  }
+  try {
+    selectedItem.value = await getPackage(id);
+  } catch (error) {
+    console.error('[WmPackageSelect] resolveItemById failed:', error);
+  }
+}
+
+watch(() => props.modelValue, resolveItemById, { immediate: true });
+
+/** 清空已选装箱单 */
+function clearSelected() {
+  selectedItem.value = undefined;
+  emit('update:modelValue', undefined);
+  emit('change', undefined);
+}
+
+/** 打开装箱单选择弹窗 */
+function handleClick(event: MouseEvent) {
+  if (props.disabled) {
+    return;
+  }
+  const target = event.target as HTMLElement;
+  if (showClear.value && target.closest('.el-input__suffix')) {
+    event.stopPropagation();
+    clearSelected();
+    return;
+  }
+  const selectedIds = props.modelValue == null ? [] : [props.modelValue];
+  dialogRef.value?.open(selectedIds, { multiple: false });
+}
+
+/** 弹窗选中回调 */
+function handleSelected(rows: MesWmPackageApi.Package[]) {
+  const item = rows[0];
+  if (!item) {
+    return;
+  }
+  selectedItem.value = item;
+  emit('update:modelValue', item.id);
+  emit('change', item);
+}
+</script>
+
+<template>
+  <div
+    v-bind="attrs"
+    class="w-full"
+    :class="disabled ? 'cursor-not-allowed' : 'cursor-pointer'"
+    @click="handleClick"
+    @mouseenter="hovering = true"
+    @mouseleave="hovering = false"
+  >
+    <ElTooltip :disabled="!selectedItem" placement="top" :show-after="500">
+      <template #content>
+        <div v-if="selectedItem" class="leading-6">
+          <div>编号：{{ selectedItem.code || '-' }}</div>
+          <div>客户：{{ selectedItem.clientName || '-' }}</div>
+          <div>销售订单：{{ selectedItem.salesOrderCode || '-' }}</div>
+        </div>
+      </template>
+      <ElInput
+        :disabled="disabled"
+        :model-value="displayLabel"
+        :placeholder="placeholder"
+        readonly
+      >
+        <template #suffix>
+          <CircleX v-if="showClear" class="size-4" />
+          <Search v-else class="size-4" />
+        </template>
+      </ElInput>
+    </ElTooltip>
+  </div>
+  <WmPackageSelectDialog
+    ref="dialogRef"
+    :childable-only="childableOnly"
+    :exclude-id="excludeId"
+    @selected="handleSelected"
+  />
+</template>
diff --git a/apps/web-ele/src/views/mes/wm/packages/data.ts b/apps/web-ele/src/views/mes/wm/packages/data.ts
new file mode 100644
index 000000000..30372310d
--- /dev/null
+++ b/apps/web-ele/src/views/mes/wm/packages/data.ts
@@ -0,0 +1,646 @@
+import type { VbenFormApi, VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesWmPackageApi } from '#/api/mes/wm/packages';
+import type { MesWmPackageLineApi } from '#/api/mes/wm/packages/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 { getSimpleUserList } from '#/api/system/user';
+import MdClientSelect from '#/views/mes/md/client/components/md-client-select.vue';
+import MdItemSelect from '#/views/mes/md/item/components/md-item-select.vue';
+import { MdUnitMeasureSelect } from '#/views/mes/md/unitmeasure/components';
+import ProWorkOrderSelect from '#/views/mes/pro/workorder/components/pro-work-order-select.vue';
+import {
+  MesAutoCodeRuleCode,
+  MesProWorkOrderStatusEnum,
+} from '#/views/mes/utils/constants';
+
+/** 表单类型 */
+export type FormType = 'create' | 'detail' | 'update';
+
+/** 新增/修改的表单 */
+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:
+        formType === 'detail'
+          ? undefined
+          : () =>
+              h(
+                ElButton,
+                {
+                  onClick: async () => {
+                    const code = await generateAutoCode(
+                      MesAutoCodeRuleCode.WM_PACKAGE_CODE,
+                    );
+                    await formApi?.setFieldValue('code', code);
+                  },
+                },
+                { default: () => '生成' },
+              ),
+    },
+    {
+      fieldName: 'packageDate',
+      label: '装箱日期',
+      component: 'DatePicker',
+      componentProps: {
+        format: 'YYYY-MM-DD',
+        placeholder: '请选择装箱日期',
+        type: 'date',
+        valueFormat: 'x',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'inspectorUserId',
+      label: '检查员',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleUserList,
+        clearable: true,
+        labelField: 'nickname',
+        placeholder: '请选择检查员',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'salesOrderCode',
+      label: '销售订单编号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入销售订单编号',
+      },
+    },
+    {
+      fieldName: 'invoiceCode',
+      label: '发票编号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入发票编号',
+      },
+    },
+    {
+      fieldName: 'clientId',
+      label: '客户',
+      component: markRaw(MdClientSelect),
+      componentProps: {
+        placeholder: '请选择客户',
+      },
+    },
+    {
+      fieldName: 'sizeUnitId',
+      label: '尺寸单位',
+      component: markRaw(MdUnitMeasureSelect),
+      componentProps: {
+        placeholder: '请选择尺寸单位',
+      },
+    },
+    {
+      fieldName: 'length',
+      label: '箱长度',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        controlsPosition: 'right',
+        min: 0,
+        placeholder: '请输入箱长度',
+        precision: 2,
+      },
+    },
+    {
+      fieldName: 'width',
+      label: '箱宽度',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        controlsPosition: 'right',
+        min: 0,
+        placeholder: '请输入箱宽度',
+        precision: 2,
+      },
+    },
+    {
+      fieldName: 'height',
+      label: '箱高度',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        controlsPosition: 'right',
+        min: 0,
+        placeholder: '请输入箱高度',
+        precision: 2,
+      },
+    },
+    {
+      fieldName: 'weightUnitId',
+      label: '重量单位',
+      component: markRaw(MdUnitMeasureSelect),
+      componentProps: {
+        placeholder: '请选择重量单位',
+      },
+    },
+    {
+      fieldName: 'netWeight',
+      label: '净重',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        controlsPosition: 'right',
+        min: 0,
+        placeholder: '请输入净重',
+        precision: 2,
+      },
+    },
+    {
+      fieldName: 'grossWeight',
+      label: '毛重',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        controlsPosition: 'right',
+        min: 0,
+        placeholder: '请输入毛重',
+        precision: 2,
+      },
+    },
+    {
+      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: 'salesOrderCode',
+      label: '销售订单编号',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入销售订单编号',
+      },
+    },
+    {
+      fieldName: 'clientId',
+      label: '客户',
+      component: markRaw(MdClientSelect),
+      componentProps: {
+        placeholder: '请选择客户',
+      },
+    },
+    {
+      fieldName: 'inspectorUserId',
+      label: '检查员',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleUserList,
+        clearable: true,
+        labelField: 'nickname',
+        placeholder: '请选择检查员',
+        valueField: 'id',
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions<MesWmPackageApi.Package>['columns'] {
+  return [
+    {
+      field: 'code',
+      title: '装箱单编号',
+      minWidth: 250,
+      fixed: 'left',
+      treeNode: true,
+      slots: { default: 'code' },
+    },
+    {
+      field: 'packageDate',
+      title: '装箱日期',
+      width: 120,
+      formatter: 'formatDate',
+    },
+    {
+      field: 'salesOrderCode',
+      title: '销售订单编号',
+      minWidth: 140,
+    },
+    {
+      field: 'invoiceCode',
+      title: '发票编号',
+      minWidth: 120,
+    },
+    {
+      field: 'clientCode',
+      title: '客户编码',
+      minWidth: 100,
+    },
+    {
+      field: 'clientName',
+      title: '客户名称',
+      minWidth: 120,
+    },
+    {
+      field: 'length',
+      title: '箱长度',
+      width: 80,
+    },
+    {
+      field: 'width',
+      title: '箱宽度',
+      width: 80,
+    },
+    {
+      field: 'height',
+      title: '箱高度',
+      width: 80,
+    },
+    {
+      field: 'sizeUnitName',
+      title: '尺寸单位',
+      width: 90,
+    },
+    {
+      field: 'netWeight',
+      title: '净重',
+      width: 80,
+    },
+    {
+      field: 'grossWeight',
+      title: '毛重',
+      width: 80,
+    },
+    {
+      field: 'weightUnitName',
+      title: '重量单位',
+      width: 90,
+    },
+    {
+      field: 'inspectorName',
+      title: '检查员',
+      minWidth: 100,
+    },
+    {
+      field: 'status',
+      title: '单据状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MES_WM_PACKAGE_STATUS },
+      },
+    },
+    {
+      title: '操作',
+      width: 160,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 子箱列表的字段 */
+export function useSubPackageGridColumns(): VxeTableGridOptions<MesWmPackageApi.Package>['columns'] {
+  return [
+    {
+      field: 'code',
+      title: '装箱单编号',
+      minWidth: 160,
+      fixed: 'left',
+    },
+    {
+      field: 'packageDate',
+      title: '装箱日期',
+      width: 120,
+      formatter: 'formatDate',
+    },
+    {
+      field: 'salesOrderCode',
+      title: '销售订单编号',
+      minWidth: 140,
+    },
+    {
+      field: 'invoiceCode',
+      title: '发票编号',
+      minWidth: 120,
+    },
+    {
+      field: 'clientCode',
+      title: '客户编码',
+      minWidth: 100,
+    },
+    {
+      field: 'clientName',
+      title: '客户名称',
+      minWidth: 120,
+    },
+    {
+      field: 'netWeight',
+      title: '净重',
+      width: 80,
+    },
+    {
+      field: 'grossWeight',
+      title: '毛重',
+      width: 80,
+    },
+    {
+      field: 'weightUnitName',
+      title: '重量单位',
+      width: 90,
+    },
+    {
+      field: 'inspectorName',
+      title: '检查员',
+      minWidth: 100,
+    },
+    {
+      field: 'status',
+      title: '单据状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MES_WM_PACKAGE_STATUS },
+      },
+    },
+    {
+      title: '操作',
+      width: 100,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 装箱明细的表单 */
+export function useLineFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'workOrderId',
+      label: '生产工单',
+      component: markRaw(ProWorkOrderSelect),
+      componentProps: {
+        placeholder: '请选择生产工单',
+        status: MesProWorkOrderStatusEnum.CONFIRMED,
+      },
+      rules: 'selectRequired',
+    },
+    {
+      fieldName: 'itemId',
+      label: '产品物料',
+      component: markRaw(MdItemSelect),
+      componentProps: {
+        placeholder: '请选择产品物料',
+      },
+      rules: 'selectRequired',
+    },
+    {
+      fieldName: 'quantity',
+      label: '装箱数量',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        controlsPosition: 'right',
+        min: 0.01,
+        placeholder: '请输入装箱数量',
+        precision: 2,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'expireDate',
+      label: '有效期',
+      component: 'DatePicker',
+      componentProps: {
+        format: 'YYYY-MM-DD',
+        placeholder: '请选择有效期',
+        type: 'date',
+        valueFormat: 'x',
+      },
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      formItemClass: 'col-span-2',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 3,
+      },
+    },
+  ];
+}
+
+/** 装箱明细列表的字段 */
+export function useLineGridColumns(): VxeTableGridOptions<MesWmPackageLineApi.PackageLine>['columns'] {
+  return [
+    {
+      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: 'workOrderCode',
+      title: '生产工单编号',
+      minWidth: 140,
+    },
+    {
+      field: 'batchCode',
+      title: '批次号',
+      minWidth: 120,
+    },
+    {
+      field: 'expireDate',
+      title: '有效期',
+      width: 120,
+      formatter: 'formatDate',
+    },
+    {
+      title: '操作',
+      width: 120,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 选择弹窗的搜索表单 */
+export function useSelectGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'code',
+      label: '装箱单编号',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入装箱单编号',
+      },
+    },
+    {
+      fieldName: 'salesOrderCode',
+      label: '销售订单编号',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入销售订单编号',
+      },
+    },
+    {
+      fieldName: 'clientId',
+      label: '客户',
+      component: markRaw(MdClientSelect),
+      componentProps: {
+        placeholder: '请选择客户',
+      },
+    },
+    {
+      fieldName: 'inspectorUserId',
+      label: '检查员',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleUserList,
+        clearable: true,
+        labelField: 'nickname',
+        placeholder: '请选择检查员',
+        valueField: 'id',
+      },
+    },
+  ];
+}
+
+/** 选择弹窗的字段 */
+export function useSelectGridColumns(): VxeTableGridOptions<MesWmPackageApi.Package>['columns'] {
+  return [
+    {
+      type: 'checkbox',
+      width: 50,
+    },
+    {
+      field: 'code',
+      title: '装箱单编号',
+      minWidth: 160,
+    },
+    {
+      field: 'packageDate',
+      title: '装箱日期',
+      width: 120,
+      formatter: 'formatDate',
+    },
+    {
+      field: 'salesOrderCode',
+      title: '销售订单编号',
+      minWidth: 140,
+    },
+    {
+      field: 'invoiceCode',
+      title: '发票编号',
+      minWidth: 120,
+    },
+    {
+      field: 'clientCode',
+      title: '客户编码',
+      minWidth: 100,
+    },
+    {
+      field: 'clientName',
+      title: '客户名称',
+      minWidth: 120,
+    },
+    {
+      field: 'netWeight',
+      title: '净重',
+      width: 80,
+    },
+    {
+      field: 'grossWeight',
+      title: '毛重',
+      width: 80,
+    },
+    {
+      field: 'weightUnitName',
+      title: '重量单位',
+      width: 90,
+    },
+    {
+      field: 'inspectorName',
+      title: '检查员',
+      minWidth: 100,
+    },
+    {
+      field: 'status',
+      title: '单据状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MES_WM_PACKAGE_STATUS },
+      },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/mes/wm/packages/index.vue b/apps/web-ele/src/views/mes/wm/packages/index.vue
new file mode 100644
index 000000000..2a4808790
--- /dev/null
+++ b/apps/web-ele/src/views/mes/wm/packages/index.vue
@@ -0,0 +1,172 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesWmPackageApi } from '#/api/mes/wm/packages';
+
+import { ref } from 'vue';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+
+import { ElButton, ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deletePackage, getPackagePage } from '#/api/mes/wm/packages';
+import { $t } from '#/locales';
+import { MesWmPackageStatusEnum } from '#/views/mes/utils/constants';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const isExpanded = ref(true); // 树形表格是否展开
+
+/** 切换树形展开/收缩状态 */
+function handleExpand() {
+  isExpanded.value = !isExpanded.value;
+  gridApi.grid.setAllTreeExpand(isExpanded.value);
+}
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建装箱单 */
+function handleCreate() {
+  formModalApi.setData({ formType: 'create' }).open();
+}
+
+/** 查看装箱单 */
+function handleDetail(row: MesWmPackageApi.Package) {
+  formModalApi.setData({ formType: 'detail', id: row.id }).open();
+}
+
+/** 编辑装箱单 */
+function handleEdit(row: MesWmPackageApi.Package) {
+  formModalApi.setData({ formType: 'update', id: row.id }).open();
+}
+
+/** 删除装箱单 */
+async function handleDelete(row: MesWmPackageApi.Package) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.code]),
+  });
+  try {
+    await deletePackage(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.code]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    pagerConfig: {
+      enabled: false,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async (_, formValues) => {
+          const data = await getPackagePage({
+            pageNo: 1,
+            pageSize: 100,
+            ...formValues,
+          });
+          return { list: data.list || [] };
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+    treeConfig: {
+      parentField: 'parentId',
+      rowField: 'id',
+      transform: true,
+      expandAll: true,
+      reserve: true,
+    },
+  } as VxeTableGridOptions<MesWmPackageApi.Package>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【仓库】调拨单、装箱管理"
+        url="https://doc.iocoder.cn/mes/wm/transfer/"
+      />
+    </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-package:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: isExpanded ? '收缩' : '展开',
+              type: 'primary',
+              onClick: handleExpand,
+            },
+          ]"
+        />
+      </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-package:update'],
+              ifShow: row.status === MesWmPackageStatusEnum.PREPARE,
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['mes:wm-package:delete'],
+              ifShow: row.status === MesWmPackageStatusEnum.PREPARE,
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.code]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/mes/wm/packages/modules/form.vue b/apps/web-ele/src/views/mes/wm/packages/modules/form.vue
new file mode 100644
index 000000000..18453128c
--- /dev/null
+++ b/apps/web-ele/src/views/mes/wm/packages/modules/form.vue
@@ -0,0 +1,189 @@
+<script lang="ts" setup>
+import type { FormType } from '../data';
+
+import type { MesWmPackageApi } from '#/api/mes/wm/packages';
+
+import { computed, ref } from 'vue';
+
+import { confirm, useVbenModal } from '@vben/common-ui';
+
+import { ElButton, ElMessage, ElTabPane, ElTabs } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createPackage,
+  finishPackage,
+  getPackage,
+  updatePackage,
+} from '#/api/mes/wm/packages';
+import { $t } from '#/locales';
+import { MesWmPackageStatusEnum } from '#/views/mes/utils/constants';
+
+import { useFormSchema } from '../data';
+import PackageLineList from './package-line-list.vue';
+import SubPackageList from './sub-package-list.vue';
+
+const emit = defineEmits(['success']);
+const formType = ref<FormType>('create');
+const formData = ref<MesWmPackageApi.Package>();
+const subTabsName = ref('subPackage'); // 子表当前 tab
+const originalSnapshot = ref(''); // 表单原始数据快照，用于 finish 时跳过未变更的保存请求
+
+const isEditable = computed(() =>
+  ['create', 'update'].includes(formType.value),
+);
+const canFinish = computed(
+  () =>
+    formType.value === 'update' &&
+    formData.value?.status === MesWmPackageStatusEnum.PREPARE,
+);
+const getTitle = computed(() => {
+  if (formType.value === 'detail') {
+    return $t('ui.actionTitle.view', ['装箱单']);
+  }
+  return formType.value === 'update'
+    ? $t('ui.actionTitle.edit', ['装箱单'])
+    : $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',
+});
+
+/** 提交表单（create/update），新增成功后切换为编辑态以继续维护子表 */
+async function handleSubmit(): Promise<boolean> {
+  const { valid } = await formApi.validate();
+  if (!valid) {
+    return false;
+  }
+  const data = (await formApi.getValues()) as MesWmPackageApi.Package;
+  if (formData.value?.id) {
+    await updatePackage({ ...data, id: formData.value.id });
+    formData.value = { ...formData.value, ...data };
+  } else {
+    const id = await createPackage(data);
+    formData.value = {
+      ...data,
+      id,
+      status: MesWmPackageStatusEnum.PREPARE,
+    };
+    await formApi.setFieldValue('id', id);
+    await formApi.setFieldValue('status', MesWmPackageStatusEnum.PREPARE);
+    formType.value = 'update';
+  }
+  // 刷新快照，下次 finish 用于判断是否需要再保存
+  originalSnapshot.value = JSON.stringify(await formApi.getValues());
+  return true;
+}
+
+/** 完成装箱单：编辑态有修改时先保存，再调用完成接口 */
+async function handleFinish() {
+  const id = formData.value?.id;
+  if (!id) {
+    return;
+  }
+  try {
+    await confirm('确认完成该装箱单？完成后将不可编辑。');
+  } catch {
+    return;
+  }
+  const { valid } = await formApi.validate();
+  if (!valid) {
+    return;
+  }
+  modalApi.lock();
+  try {
+    const current = JSON.stringify(await formApi.getValues());
+    if (current !== originalSnapshot.value) {
+      const data = (await formApi.getValues()) as MesWmPackageApi.Package;
+      await updatePackage({ ...data, id });
+      originalSnapshot.value = current;
+    }
+    await finishPackage(id);
+    ElMessage.success('完成成功');
+    await modalApi.close();
+    emit('success');
+  } finally {
+    modalApi.unlock();
+  }
+}
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    if (formType.value === 'detail') {
+      await modalApi.close();
+      return;
+    }
+    modalApi.lock();
+    try {
+      // 提交表单
+      const ok = await handleSubmit();
+      if (!ok) {
+        return;
+      }
+      // 关闭并提示
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+      emit('success');
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      originalSnapshot.value = '';
+      return;
+    }
+    subTabsName.value = 'subPackage';
+    // 加载数据
+    const data = modalApi.getData<{ formType: FormType; id?: number }>();
+    formType.value = data.formType;
+    formApi.setState({ schema: useFormSchema(formType.value, formApi) });
+    formApi.setDisabled(formType.value === 'detail');
+    modalApi.setState({ showConfirmButton: formType.value !== 'detail' });
+    if (data?.id) {
+      modalApi.lock();
+      try {
+        formData.value = await getPackage(data.id);
+        // 设置到 values
+        await formApi.setValues(formData.value);
+      } finally {
+        modalApi.unlock();
+      }
+    }
+    // 记录初始快照，后续 finish 用于判断是否需要再保存
+    originalSnapshot.value = JSON.stringify(await formApi.getValues());
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-4/5">
+    <Form class="mx-4" />
+    <ElTabs v-if="formData?.id" v-model="subTabsName" class="mx-4 mt-4">
+      <ElTabPane label="子箱" name="subPackage">
+        <SubPackageList :editable="isEditable" :package-id="formData.id" />
+      </ElTabPane>
+      <ElTabPane label="装箱清单" name="packageLine">
+        <PackageLineList :editable="isEditable" :package-id="formData.id" />
+      </ElTabPane>
+    </ElTabs>
+    <template #prepend-footer>
+      <div class="flex flex-auto items-center gap-2">
+        <ElButton v-if="canFinish" type="primary" @click="handleFinish">
+          完成
+        </ElButton>
+      </div>
+    </template>
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mes/wm/packages/modules/line-form.vue b/apps/web-ele/src/views/mes/wm/packages/modules/line-form.vue
new file mode 100644
index 000000000..da9950e77
--- /dev/null
+++ b/apps/web-ele/src/views/mes/wm/packages/modules/line-form.vue
@@ -0,0 +1,93 @@
+<script lang="ts" setup>
+import type { MesWmPackageLineApi } from '#/api/mes/wm/packages/line';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createPackageLine,
+  getPackageLine,
+  updatePackageLine,
+} from '#/api/mes/wm/packages/line';
+import { $t } from '#/locales';
+
+import { useLineFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<MesWmPackageLineApi.PackageLine>();
+const packageId = ref<number>();
+
+const getTitle = computed(() =>
+  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: 100,
+  },
+  layout: 'horizontal',
+  schema: useLineFormSchema(),
+  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 MesWmPackageLineApi.PackageLine;
+    data.packageId = packageId.value;
+    try {
+      await (formData.value?.id
+        ? updatePackageLine({ ...data, id: formData.value.id })
+        : createPackageLine(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; packageId: number }>();
+    packageId.value = data.packageId;
+    if (!data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getPackageLine(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-2/5">
+    <Form />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mes/wm/packages/modules/package-line-list.vue b/apps/web-ele/src/views/mes/wm/packages/modules/package-line-list.vue
new file mode 100644
index 000000000..45711d17e
--- /dev/null
+++ b/apps/web-ele/src/views/mes/wm/packages/modules/package-line-list.vue
@@ -0,0 +1,132 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesWmPackageLineApi } from '#/api/mes/wm/packages/line';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deletePackageLine,
+  getPackageLinePage,
+} from '#/api/mes/wm/packages/line';
+import { $t } from '#/locales';
+
+import { useLineGridColumns } from '../data';
+import LineForm from './line-form.vue';
+
+const props = defineProps<{
+  editable: boolean; // 是否可编辑（草稿态）
+  packageId: number; // 所属装箱单编号
+}>();
+
+const [LineFormModal, lineFormModalApi] = useVbenModal({
+  connectedComponent: LineForm,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 添加装箱明细 */
+function handleCreate() {
+  lineFormModalApi.setData({ packageId: props.packageId }).open();
+}
+
+/** 编辑装箱明细 */
+function handleEdit(row: MesWmPackageLineApi.PackageLine) {
+  lineFormModalApi.setData({ id: row.id, packageId: props.packageId }).open();
+}
+
+/** 删除装箱明细 */
+async function handleDelete(row: MesWmPackageLineApi.PackageLine) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.itemName]),
+  });
+  try {
+    await deletePackageLine(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.itemName]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useLineGridColumns(),
+    height: 360,
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }) => {
+          if (!props.packageId) {
+            return { list: [], total: 0 };
+          }
+          return await getPackageLinePage({
+            packageId: props.packageId,
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+    },
+  } as VxeTableGridOptions<MesWmPackageLineApi.PackageLine>,
+});
+</script>
+
+<template>
+  <div>
+    <LineFormModal @success="handleRefresh" />
+    <Grid table-title="装箱清单">
+      <template #toolbar-tools>
+        <TableAction
+          v-if="editable"
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['装箱明细']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              ifShow: editable,
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              ifShow: editable,
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.itemName]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/mes/wm/packages/modules/sub-package-list.vue b/apps/web-ele/src/views/mes/wm/packages/modules/sub-package-list.vue
new file mode 100644
index 000000000..8180fa3fe
--- /dev/null
+++ b/apps/web-ele/src/views/mes/wm/packages/modules/sub-package-list.vue
@@ -0,0 +1,126 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesWmPackageApi } from '#/api/mes/wm/packages';
+
+import { ref } from 'vue';
+
+import { ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  addChildPackage,
+  getPackagePage,
+  removeChildPackage,
+} from '#/api/mes/wm/packages';
+import { $t } from '#/locales';
+
+import WmPackageSelectDialog from '../components/wm-package-select-dialog.vue';
+import { useSubPackageGridColumns } from '../data';
+
+const props = defineProps<{
+  editable: boolean; // 是否可编辑（草稿态）
+  packageId: number; // 父箱编号
+}>();
+
+const dialogRef = ref<InstanceType<typeof WmPackageSelectDialog>>();
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 打开装箱单选择弹窗添加子箱 */
+function handleAddChild() {
+  dialogRef.value?.open([], { multiple: false });
+}
+
+/** 选中回调：将选中的装箱单添加为子箱 */
+async function handleSelected(rows: MesWmPackageApi.Package[]) {
+  const child = rows[0];
+  if (!child?.id) {
+    return;
+  }
+  await addChildPackage(props.packageId, child.id);
+  ElMessage.success($t('ui.actionMessage.operationSuccess'));
+  handleRefresh();
+}
+
+/** 移除子箱：将子箱的父箱编号清空 */
+async function handleRemoveChild(row: MesWmPackageApi.Package) {
+  await removeChildPackage(row.id!);
+  ElMessage.success('移除成功');
+  handleRefresh();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useSubPackageGridColumns(),
+    height: 360,
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }) => {
+          if (!props.packageId) {
+            return { list: [], total: 0 };
+          }
+          return await getPackagePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            parentId: props.packageId,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+    },
+  } as VxeTableGridOptions<MesWmPackageApi.Package>,
+});
+</script>
+
+<template>
+  <div>
+    <WmPackageSelectDialog
+      ref="dialogRef"
+      childable-only
+      :exclude-id="packageId"
+      @selected="handleSelected"
+    />
+    <Grid table-title="子箱列表">
+      <template #toolbar-tools>
+        <TableAction
+          v-if="editable"
+          :actions="[
+            {
+              label: '添加子箱',
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              onClick: handleAddChild,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '移除',
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              ifShow: editable,
+              popConfirm: {
+                title: '确认将该装箱单从子箱列表中移除？',
+                confirm: handleRemoveChild.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </div>
+</template>