diff --git a/apps/web-antd/src/views/mes/pro/workorder/components/pro-work-order-select-dialog.vue b/apps/web-antd/src/views/mes/pro/workorder/components/pro-work-order-select-dialog.vue
new file mode 100644
index 000000000..5f618b637
--- /dev/null
+++ b/apps/web-antd/src/views/mes/pro/workorder/components/pro-work-order-select-dialog.vue
@@ -0,0 +1,232 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesProWorkOrderApi } from '#/api/mes/pro/workorder';
+
+import { computed, nextTick, ref } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictLabel } from '@vben/hooks';
+
+import { Alert, Button, message, Modal } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getWorkOrderPage } from '#/api/mes/pro/workorder';
+
+import {
+  useWorkOrderSelectGridColumns,
+  useWorkOrderSelectGridFormSchema,
+} from '../data';
+
+const props = withDefaults(
+  defineProps<{
+    status?: number;
+    type?: number;
+  }>(),
+  {
+    status: undefined,
+    type: undefined,
+  },
+);
+const emit = defineEmits<{
+  selected: [rows: MesProWorkOrderApi.WorkOrder[]];
+}>();
+
+const open = ref(false); // 弹窗是否打开
+const multiple = ref(false); // 是否多选；默认按单选选择器使用
+const selectedRows = ref<MesProWorkOrderApi.WorkOrder[]>([]); // 已选工单列表
+const preSelectedIds = ref<number[]>([]); // 预选工单编号列表
+
+const typeTip = computed(() => {
+  if (props.type == null) {
+    return '';
+  }
+  return `仅展示【${getDictLabel(DICT_TYPE.MES_PRO_WORK_ORDER_TYPE, props.type)}】类型的工单`;
+});
+
+/** 获取多选记录，包含 VXE reserve 跨页记录 */
+function getMultipleSelectedRows() {
+  const selectedMap = new Map<number, MesProWorkOrderApi.WorkOrder>();
+  const records = [
+    ...(gridApi.grid.getCheckboxReserveRecords?.() ?? []),
+    ...(gridApi.grid.getCheckboxRecords?.() ?? []),
+  ] as MesProWorkOrderApi.WorkOrder[];
+  records.forEach((row) => {
+    const rowId = row.id;
+    if (rowId !== undefined) {
+      selectedMap.set(rowId, row);
+    }
+  });
+  return [...selectedMap.values()];
+}
+
+/** 处理多选勾选变化 */
+function handleCheckboxSelectChange() {
+  selectedRows.value = getMultipleSelectedRows();
+}
+
+/** 处理单选切换 */
+function handleRadioChange(row: MesProWorkOrderApi.WorkOrder) {
+  selectedRows.value = [row];
+}
+
+/** 多选模式下切换行勾选 */
+async function toggleMultipleRow(row: MesProWorkOrderApi.WorkOrder) {
+  const selected = gridApi.grid.isCheckedByCheckboxRow(row);
+  await gridApi.grid.setCheckboxRow(row, !selected);
+  selectedRows.value = getMultipleSelectedRows();
+}
+
+/** 处理行双击：单选直接确认，多选切换勾选 */
+async function handleCellDblclick({ row }: { row: MesProWorkOrderApi.WorkOrder }) {
+  if (multiple.value) {
+    await toggleMultipleRow(row);
+    return;
+  }
+  selectedRows.value = [row];
+  await gridApi.grid.setRadioRow(row);
+  handleConfirm();
+}
+
+/** 回显预选工单 */
+async function applyPreSelection() {
+  if (preSelectedIds.value.length === 0) {
+    return;
+  }
+  const rows = gridApi.grid.getData() as MesProWorkOrderApi.WorkOrder[];
+  for (const row of rows) {
+    if (row.id === undefined || !preSelectedIds.value.includes(row.id)) {
+      continue;
+    }
+    if (multiple.value) {
+      await gridApi.grid.setCheckboxRow(row, true);
+    } else {
+      await gridApi.grid.setRadioRow(row);
+      selectedRows.value = [row];
+      return;
+    }
+  }
+  if (multiple.value) {
+    selectedRows.value = getMultipleSelectedRows();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useWorkOrderSelectGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useWorkOrderSelectGridColumns(false),
+    height: 520,
+    keepSource: true,
+    checkboxConfig: {
+      highlight: true,
+      range: true,
+      reserve: true,
+    },
+    radioConfig: {
+      highlight: true,
+      trigger: 'row',
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getWorkOrderPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            type: props.type,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MesProWorkOrderApi.WorkOrder>,
+  gridEvents: {
+    cellDblclick: handleCellDblclick,
+    checkboxAll: handleCheckboxSelectChange,
+    checkboxChange: handleCheckboxSelectChange,
+    radioChange: ({ row }: { row: MesProWorkOrderApi.WorkOrder }) => {
+      handleRadioChange(row);
+    },
+  },
+});
+
+/** 重置查询和选择状态，保留外部传入的默认状态过滤 */
+async function resetQueryState() {
+  selectedRows.value = [];
+  await gridApi.grid.clearCheckboxRow();
+  await gridApi.grid.clearCheckboxReserve();
+  await gridApi.grid.clearRadioRow();
+  await gridApi.formApi.resetForm();
+  if (props.status != null) {
+    await gridApi.formApi.setFieldValue('status', props.status);
+  }
+}
+
+/** 打开工单选择弹窗 */
+async function openModal(
+  selectedIds?: number[],
+  options?: { multiple?: boolean },
+) {
+  open.value = true;
+  multiple.value = options?.multiple ?? false;
+  preSelectedIds.value = selectedIds || [];
+  await nextTick();
+  gridApi.setGridOptions({
+    columns: useWorkOrderSelectGridColumns(multiple.value),
+  });
+  await resetQueryState();
+  await gridApi.query();
+  await nextTick();
+  await applyPreSelection();
+}
+
+/** 关闭工单选择弹窗 */
+function closeModal() {
+  open.value = false;
+}
+
+/** 确认选择工单 */
+function handleConfirm() {
+  const rows = multiple.value ? getMultipleSelectedRows() : selectedRows.value;
+  if (rows.length === 0) {
+    message.warning(multiple.value ? '请至少选择一条数据' : '请选择一条数据');
+    return;
+  }
+  emit('selected', multiple.value ? rows : [rows[0]!]);
+  open.value = false;
+}
+
+defineExpose({ open: openModal });
+</script>
+
+<template>
+  <Modal
+    v-model:open="open"
+    title="生产工单选择"
+    width="80%"
+    :destroy-on-close="true"
+    @ok="handleConfirm"
+    @cancel="closeModal"
+  >
+    <Alert
+      v-if="typeTip"
+      :message="typeTip"
+      type="info"
+      show-icon
+      class="!mb-3"
+    />
+    <Grid table-title="生产工单列表" />
+    <template #footer>
+      <Button @click="closeModal">取消</Button>
+      <Button type="primary" @click="handleConfirm">确定</Button>
+    </template>
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/mes/pro/workorder/data.ts b/apps/web-antd/src/views/mes/pro/workorder/data.ts
new file mode 100644
index 000000000..7ec534676
--- /dev/null
+++ b/apps/web-antd/src/views/mes/pro/workorder/data.ts
@@ -0,0 +1,733 @@
+import type { VbenFormApi, VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesMdProductBomApi } from '#/api/mes/md/item/productBom';
+import type { MesProWorkOrderApi } from '#/api/mes/pro/workorder';
+import type { MesProWorkOrderBomApi } from '#/api/mes/pro/workorder/bom';
+
+import { h, markRaw } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { Button } from 'ant-design-vue';
+
+import { generateAutoCode } from '#/api/mes/md/autocode/record';
+import { getRangePickerDefaultProps } from '#/utils';
+import MdClientSelect from '#/views/mes/md/client/components/md-client-select.vue';
+import { MdItemSelect, MdProductBomSelect } from '#/views/mes/md/item/components';
+import MdVendorSelect from '#/views/mes/md/vendor/components/md-vendor-select.vue';
+import {
+  MesAutoCodeRuleCode,
+  MesProWorkOrderSourceTypeEnum,
+  MesProWorkOrderTypeEnum,
+} from '#/views/mes/utils/constants';
+
+/** 表单类型 */
+export type FormType = 'confirm' | 'create' | 'detail' | 'finish' | 'update';
+
+/** 表头是否只读（确认、完成、详情态） */
+function isHeaderReadonly(formType: FormType): boolean {
+  return ['confirm', 'detail', 'finish'].includes(formType);
+}
+
+/** 新增/修改的表单 */
+export function useFormSchema(
+  formType: FormType,
+  formApi?: VbenFormApi,
+): VbenFormSchema[] {
+  const headerReadonly = isHeaderReadonly(formType);
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'parentId',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '工单状态',
+      component: 'Select',
+      componentProps: {
+        disabled: true,
+        options: getDictOptions(DICT_TYPE.MES_PRO_WORK_ORDER_STATUS, 'number'),
+      },
+      dependencies: {
+        triggerFields: [''],
+        show: () => formType !== 'create',
+      },
+    },
+    {
+      fieldName: 'code',
+      label: '工单编码',
+      component: 'Input',
+      componentProps: {
+        disabled: headerReadonly,
+        placeholder: '请输入工单编码',
+      },
+      rules: 'required',
+      suffix:
+        formType === 'create' || formType === 'update'
+          ? () =>
+              h(
+                Button,
+                {
+                  type: 'default',
+                  onClick: async () => {
+                    const code = await generateAutoCode(
+                      MesAutoCodeRuleCode.PRO_WORK_ORDER_CODE,
+                    );
+                    await formApi?.setFieldValue('code', code);
+                  },
+                },
+                { default: () => '生成' },
+              )
+          : undefined,
+    },
+    {
+      fieldName: 'name',
+      label: '工单名称',
+      component: 'Input',
+      componentProps: {
+        disabled: headerReadonly,
+        placeholder: '请输入工单名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'orderSourceType',
+      label: '工单来源',
+      component: 'Select',
+      componentProps: {
+        disabled: headerReadonly,
+        options: getDictOptions(
+          DICT_TYPE.MES_PRO_WORK_ORDER_SOURCE_TYPE,
+          'number',
+        ),
+        placeholder: '请选择工单来源',
+        // 工单来源变更：非客户订单时清空来源单据编号和客户
+        onChange: async (value: number) => {
+          if (value !== MesProWorkOrderSourceTypeEnum.ORDER) {
+            await formApi?.setValues({
+              clientId: undefined,
+              orderSourceCode: undefined,
+            });
+          }
+        },
+      },
+      rules: 'selectRequired',
+    },
+    {
+      fieldName: 'orderSourceCode',
+      label: '来源单据编号',
+      component: 'Input',
+      componentProps: {
+        disabled: headerReadonly,
+        placeholder: '请输入来源单据编号',
+      },
+      dependencies: {
+        triggerFields: ['orderSourceType'],
+        show: (values) =>
+          values.orderSourceType === MesProWorkOrderSourceTypeEnum.ORDER,
+      },
+    },
+    {
+      fieldName: 'type',
+      label: '工单类型',
+      component: 'Select',
+      componentProps: {
+        disabled: headerReadonly,
+        options: getDictOptions(DICT_TYPE.MES_PRO_WORK_ORDER_TYPE, 'number'),
+        placeholder: '请选择工单类型',
+        // 工单类型变更：非代工/采购时清空供应商
+        onChange: async (value: number) => {
+          if (
+            value !== MesProWorkOrderTypeEnum.OUTSOURCE &&
+            value !== MesProWorkOrderTypeEnum.PURCHASE
+          ) {
+            await formApi?.setFieldValue('vendorId', undefined);
+          }
+        },
+      },
+      rules: 'selectRequired',
+    },
+    {
+      fieldName: 'productId',
+      label: '产品',
+      component: markRaw(MdItemSelect),
+      componentProps: {
+        disabled: headerReadonly,
+        placeholder: '请选择产品',
+      },
+      rules: 'selectRequired',
+    },
+    {
+      fieldName: 'quantity',
+      label: '工单数量',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        disabled: headerReadonly,
+        min: 1,
+        placeholder: '请输入工单数量',
+        precision: 2,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'clientId',
+      label: '客户',
+      component: markRaw(MdClientSelect),
+      componentProps: {
+        disabled: headerReadonly,
+        placeholder: '请选择客户',
+      },
+      dependencies: {
+        triggerFields: ['orderSourceType'],
+        show: (values) =>
+          values.orderSourceType === MesProWorkOrderSourceTypeEnum.ORDER,
+      },
+    },
+    {
+      fieldName: 'vendorId',
+      label: '供应商',
+      component: markRaw(MdVendorSelect),
+      componentProps: {
+        disabled: headerReadonly,
+        placeholder: '请选择供应商',
+      },
+      dependencies: {
+        triggerFields: ['type'],
+        show: (values) =>
+          values.type === MesProWorkOrderTypeEnum.OUTSOURCE ||
+          values.type === MesProWorkOrderTypeEnum.PURCHASE,
+      },
+    },
+    {
+      fieldName: 'batchCode',
+      label: '批次号',
+      component: 'Input',
+      componentProps: {
+        disabled: headerReadonly,
+        placeholder: '请输入批次号',
+      },
+    },
+    {
+      fieldName: 'requestDate',
+      label: '需求日期',
+      component: 'DatePicker',
+      componentProps: {
+        class: '!w-full',
+        disabled: headerReadonly,
+        format: 'YYYY-MM-DD',
+        placeholder: '请选择需求日期',
+        valueFormat: 'x',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      formItemClass: 'col-span-3',
+      componentProps: {
+        disabled: headerReadonly,
+        placeholder: '请输入备注',
+        rows: 3,
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'code',
+      label: '工单编码',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入工单编码',
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '工单名称',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入工单名称',
+      },
+    },
+    {
+      fieldName: 'orderSourceCode',
+      label: '来源单据',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入来源单据编号',
+      },
+    },
+    {
+      fieldName: 'productId',
+      label: '产品',
+      component: markRaw(MdItemSelect),
+      componentProps: {
+        placeholder: '请选择产品',
+      },
+    },
+    {
+      fieldName: 'clientId',
+      label: '客户',
+      component: markRaw(MdClientSelect),
+      componentProps: {
+        placeholder: '请选择客户',
+      },
+    },
+    {
+      fieldName: 'type',
+      label: '工单类型',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.MES_PRO_WORK_ORDER_TYPE, 'number'),
+        placeholder: '请选择工单类型',
+      },
+    },
+    {
+      fieldName: 'requestDate',
+      label: '需求日期',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions<MesProWorkOrderApi.WorkOrder>['columns'] {
+  return [
+    {
+      field: 'code',
+      title: '工单编码',
+      fixed: 'left',
+      width: 200,
+      treeNode: true,
+      slots: { default: 'code' },
+    },
+    {
+      field: 'name',
+      title: '工单名称',
+      minWidth: 150,
+    },
+    {
+      field: 'type',
+      title: '工单类型',
+      width: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MES_PRO_WORK_ORDER_TYPE },
+      },
+    },
+    {
+      field: 'orderSourceType',
+      title: '工单来源',
+      width: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MES_PRO_WORK_ORDER_SOURCE_TYPE },
+      },
+    },
+    {
+      field: 'orderSourceCode',
+      title: '来源单据编号',
+      width: 140,
+    },
+    {
+      field: 'productCode',
+      title: '产品编码',
+      width: 120,
+    },
+    {
+      field: 'productName',
+      title: '产品名称',
+      minWidth: 120,
+    },
+    {
+      field: 'productSpecification',
+      title: '规格型号',
+      width: 120,
+    },
+    {
+      field: 'unitMeasureName',
+      title: '单位',
+      width: 80,
+    },
+    {
+      field: 'quantity',
+      title: '工单数量',
+      width: 100,
+    },
+    {
+      field: 'quantityProduced',
+      title: '已生产数量',
+      width: 100,
+    },
+    {
+      field: 'clientCode',
+      title: '客户编码',
+      width: 120,
+    },
+    {
+      field: 'clientName',
+      title: '客户名称',
+      width: 120,
+    },
+    {
+      field: 'requestDate',
+      title: '需求日期',
+      width: 180,
+      formatter: 'formatDate',
+    },
+    {
+      field: 'status',
+      title: '工单状态',
+      width: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MES_PRO_WORK_ORDER_STATUS },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 240,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 工单 BOM 子表的字段 */
+export function useBomGridColumns(
+  editable: boolean,
+  generatable: boolean,
+): VxeTableGridOptions<MesProWorkOrderBomApi.WorkOrderBom>['columns'] {
+  return [
+    {
+      field: 'itemCode',
+      title: 'BOM 物料编码',
+      width: 120,
+    },
+    {
+      field: 'itemName',
+      title: 'BOM 物料名称',
+      minWidth: 150,
+    },
+    {
+      field: 'itemSpecification',
+      title: '规格型号',
+      width: 120,
+    },
+    {
+      field: 'unitMeasureName',
+      title: '单位',
+      width: 80,
+    },
+    {
+      field: 'itemOrProduct',
+      title: '物料/产品',
+      width: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MES_MD_ITEM_OR_PRODUCT },
+      },
+    },
+    {
+      field: 'quantity',
+      title: '预计使用量',
+      width: 120,
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 120,
+    },
+    ...(editable || generatable
+      ? [
+          {
+            title: '操作',
+            width: 160,
+            fixed: 'right',
+            slots: { default: 'actions' },
+          } as const,
+        ]
+      : []),
+  ];
+}
+
+/** 工单 BOM 新增/修改的表单 */
+export function useBomFormSchema(
+  isCreate: boolean,
+  productId?: number,
+  formApi?: VbenFormApi,
+): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'itemId',
+      label: '物料',
+      component: markRaw(MdProductBomSelect),
+      componentProps: {
+        itemId: productId,
+        placeholder: '请选择物料',
+        // BOM 物料选中后自动回填预计使用量
+        onChange: async (bom?: MesMdProductBomApi.ProductBom) => {
+          await formApi?.setFieldValue('quantity', bom?.quantity ?? undefined);
+        },
+      },
+      rules: 'selectRequired',
+      dependencies: {
+        triggerFields: [''],
+        show: () => isCreate,
+      },
+    },
+    {
+      fieldName: 'itemName',
+      label: '物料',
+      component: 'Input',
+      componentProps: {
+        disabled: true,
+      },
+      dependencies: {
+        triggerFields: [''],
+        show: () => !isCreate,
+      },
+    },
+    {
+      fieldName: 'unitMeasureName',
+      label: '单位',
+      component: 'Input',
+      componentProps: {
+        disabled: true,
+      },
+      dependencies: {
+        triggerFields: [''],
+        show: () => !isCreate,
+      },
+    },
+    {
+      fieldName: 'quantity',
+      label: '预计使用量',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        min: 0,
+        placeholder: '请输入预计使用量',
+        precision: 2,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 3,
+      },
+    },
+  ];
+}
+
+/** 工单选择弹窗的搜索表单 */
+export function useWorkOrderSelectGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'code',
+      label: '工单编码',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入工单编码',
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '工单名称',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入工单名称',
+      },
+    },
+    {
+      fieldName: 'productId',
+      label: '产品',
+      component: markRaw(MdItemSelect),
+      componentProps: {
+        placeholder: '请选择产品',
+      },
+    },
+    {
+      fieldName: 'clientId',
+      label: '客户',
+      component: markRaw(MdClientSelect),
+      componentProps: {
+        placeholder: '请选择客户',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '工单状态',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.MES_PRO_WORK_ORDER_STATUS, 'number'),
+        placeholder: '请选择工单状态',
+      },
+    },
+  ];
+}
+
+/** 工单选择弹窗的字段 */
+export function useWorkOrderSelectGridColumns(
+  multiple = false,
+): VxeTableGridOptions<MesProWorkOrderApi.WorkOrder>['columns'] {
+  return [
+    {
+      type: multiple ? 'checkbox' : 'radio',
+      width: 50,
+    },
+    {
+      field: 'code',
+      title: '工单编码',
+      width: 180,
+    },
+    {
+      field: 'name',
+      title: '工单名称',
+      minWidth: 180,
+    },
+    {
+      field: 'orderSourceType',
+      title: '工单来源',
+      width: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MES_PRO_WORK_ORDER_SOURCE_TYPE },
+      },
+    },
+    {
+      field: 'orderSourceCode',
+      title: '订单编号',
+      width: 140,
+    },
+    {
+      field: 'productCode',
+      title: '产品编号',
+      width: 120,
+    },
+    {
+      field: 'productName',
+      title: '产品名称',
+      minWidth: 150,
+    },
+    {
+      field: 'productSpecification',
+      title: '规格型号',
+      minWidth: 120,
+    },
+    {
+      field: 'unitMeasureName',
+      title: '单位',
+      width: 80,
+    },
+    {
+      field: 'quantity',
+      title: '工单数量',
+      width: 100,
+    },
+    {
+      field: 'clientCode',
+      title: '客户编码',
+      width: 120,
+    },
+    {
+      field: 'clientName',
+      title: '客户名称',
+      minWidth: 120,
+    },
+    {
+      field: 'status',
+      title: '工单状态',
+      width: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MES_PRO_WORK_ORDER_STATUS },
+      },
+    },
+    {
+      field: 'requestDate',
+      title: '需求日期',
+      width: 120,
+      formatter: 'formatDate',
+    },
+  ];
+}
+
+/** 工单物料需求子表的字段（只读） */
+export function useItemGridColumns(): VxeTableGridOptions<MesProWorkOrderBomApi.WorkOrderBom>['columns'] {
+  return [
+    {
+      field: 'itemCode',
+      title: '物料编码',
+      width: 120,
+    },
+    {
+      field: 'itemName',
+      title: '物料名称',
+      minWidth: 150,
+    },
+    {
+      field: 'itemSpecification',
+      title: '规格型号',
+      width: 120,
+    },
+    {
+      field: 'unitMeasureName',
+      title: '单位',
+      width: 80,
+    },
+    {
+      field: 'itemOrProduct',
+      title: '物料/产品',
+      width: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MES_MD_ITEM_OR_PRODUCT },
+      },
+    },
+    {
+      field: 'quantity',
+      title: '需求数量',
+      width: 120,
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/mes/pro/workorder/index.vue b/apps/web-antd/src/views/mes/pro/workorder/index.vue
new file mode 100644
index 000000000..904cc96ed
--- /dev/null
+++ b/apps/web-antd/src/views/mes/pro/workorder/index.vue
@@ -0,0 +1,242 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesProWorkOrderApi } from '#/api/mes/pro/workorder';
+
+import { ref } from 'vue';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { Button, message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  cancelWorkOrder,
+  deleteWorkOrder,
+  exportWorkOrder,
+  getWorkOrderPage,
+} from '#/api/mes/pro/workorder';
+import { $t } from '#/locales';
+import {
+  BarcodeBizTypeEnum,
+  MesProWorkOrderStatusEnum,
+  MesProWorkOrderTypeEnum,
+} from '#/views/mes/utils/constants';
+import { BarcodeDetail } from '#/views/mes/wm/barcode/components';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const barcodeDetailRef = ref<InstanceType<typeof BarcodeDetail>>(); // 条码详情弹窗
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建工单 */
+function handleCreate() {
+  formModalApi.setData({ formType: 'create' }).open();
+}
+
+/** 新增子工单 */
+function handleAddChild(row: MesProWorkOrderApi.WorkOrder) {
+  formModalApi.setData({ formType: 'create', parentRow: row }).open();
+}
+
+/** 查看工单详情 */
+function handleDetail(row: MesProWorkOrderApi.WorkOrder) {
+  formModalApi.setData({ formType: 'detail', id: row.id }).open();
+}
+
+/** 编辑工单 */
+function handleEdit(row: MesProWorkOrderApi.WorkOrder) {
+  formModalApi.setData({ formType: 'update', id: row.id }).open();
+}
+
+/** 完成工单 */
+function handleFinish(row: MesProWorkOrderApi.WorkOrder) {
+  formModalApi.setData({ formType: 'finish', id: row.id }).open();
+}
+
+/** 删除工单 */
+async function handleDelete(row: MesProWorkOrderApi.WorkOrder) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.code]),
+    duration: 0,
+  });
+  try {
+    await deleteWorkOrder(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.code]));
+    handleRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 取消工单 */
+async function handleCancel(row: MesProWorkOrderApi.WorkOrder) {
+  await cancelWorkOrder(row.id!);
+  message.success('工单已取消');
+  handleRefresh();
+}
+
+/** 查看工单条码 */
+function handleBarcode(row: MesProWorkOrderApi.WorkOrder) {
+  barcodeDetailRef.value?.openByBusiness(
+    row.id!,
+    BarcodeBizTypeEnum.WORKORDER,
+    row.code,
+    row.name,
+  );
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportWorkOrder(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '生产工单.xls', source: data });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getWorkOrderPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+    treeConfig: {
+      parentField: 'parentId',
+      rowField: 'id',
+      transform: true,
+      expandAll: true,
+      reserve: true,
+    },
+  } as VxeTableGridOptions<MesProWorkOrderApi.WorkOrder>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【生产】生产工单"
+        url="https://doc.iocoder.cn/mes/pro/work-order/"
+      />
+    </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:pro-work-order:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['mes:pro-work-order:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #code="{ row }">
+        <Button type="link" @click="handleDetail(row)">
+          {{ row.code }}
+        </Button>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['mes:pro-work-order:update'],
+              ifShow: row.status === MesProWorkOrderStatusEnum.PREPARE,
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['mes:pro-work-order:delete'],
+              ifShow: row.status === MesProWorkOrderStatusEnum.PREPARE,
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.code]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+            {
+              label: $t('common.create'),
+              type: 'link',
+              auth: ['mes:pro-work-order:create'],
+              ifShow:
+                row.status === MesProWorkOrderStatusEnum.CONFIRMED &&
+                row.type === MesProWorkOrderTypeEnum.SELF,
+              onClick: handleAddChild.bind(null, row),
+            },
+            {
+              label: '完成',
+              type: 'link',
+              auth: ['mes:pro-work-order:update'],
+              ifShow: row.status === MesProWorkOrderStatusEnum.CONFIRMED,
+              onClick: handleFinish.bind(null, row),
+            },
+            {
+              label: '取消',
+              type: 'link',
+              danger: true,
+              auth: ['mes:pro-work-order:update'],
+              ifShow: row.status === MesProWorkOrderStatusEnum.CONFIRMED,
+              popConfirm: {
+                title: '确认要取消该工单吗？取消后不可恢复。',
+                confirm: handleCancel.bind(null, row),
+              },
+            },
+            {
+              label: '条码',
+              type: 'link',
+              auth: ['mes:pro-work-order:query'],
+              onClick: handleBarcode.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+    <BarcodeDetail ref="barcodeDetailRef" />
+  </Page>
+</template>
diff --git a/apps/web-antd/src/views/mes/pro/workorder/modules/bom-form.vue b/apps/web-antd/src/views/mes/pro/workorder/modules/bom-form.vue
new file mode 100644
index 000000000..847e4b3e1
--- /dev/null
+++ b/apps/web-antd/src/views/mes/pro/workorder/modules/bom-form.vue
@@ -0,0 +1,101 @@
+<script lang="ts" setup>
+import type { MesProWorkOrderBomApi } from '#/api/mes/pro/workorder/bom';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createWorkOrderBom,
+  getWorkOrderBom,
+  updateWorkOrderBom,
+} from '#/api/mes/pro/workorder/bom';
+import { $t } from '#/locales';
+
+import { useBomFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<MesProWorkOrderBomApi.WorkOrderBom>();
+const workOrderId = ref<number>(); // 所属工单编号
+
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['BOM 物料'])
+    : $t('ui.actionTitle.create', ['BOM 物料']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 100,
+  },
+  layout: 'horizontal',
+  schema: [],
+  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 MesProWorkOrderBomApi.WorkOrderBom;
+    data.workOrderId = workOrderId.value;
+    try {
+      await (formData.value?.id
+        ? updateWorkOrderBom({ ...data, id: formData.value.id })
+        : createWorkOrderBom(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;
+      productId?: number;
+      workOrderId: number;
+    }>();
+    workOrderId.value = data.workOrderId;
+    formApi.setState({
+      schema: useBomFormSchema(!data.id, data.productId, formApi),
+    });
+    if (!data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getWorkOrderBom(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-2/5">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/mes/pro/workorder/modules/bom-list.vue b/apps/web-antd/src/views/mes/pro/workorder/modules/bom-list.vue
new file mode 100644
index 000000000..cdc69a198
--- /dev/null
+++ b/apps/web-antd/src/views/mes/pro/workorder/modules/bom-list.vue
@@ -0,0 +1,181 @@
+<script lang="ts" setup>
+import type { FormType } from '../data';
+
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesProWorkOrderApi } from '#/api/mes/pro/workorder';
+import type { MesProWorkOrderBomApi } from '#/api/mes/pro/workorder/bom';
+
+import { computed } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteWorkOrderBom,
+  getWorkOrderBomPage,
+} from '#/api/mes/pro/workorder/bom';
+import { $t } from '#/locales';
+import {
+  MesProWorkOrderStatusEnum,
+  MesProWorkOrderTypeEnum,
+} from '#/views/mes/utils/constants';
+
+import { useBomGridColumns } from '../data';
+import BomForm from './bom-form.vue';
+
+const props = defineProps<{
+  formType: FormType;
+  workOrder: MesProWorkOrderApi.WorkOrder;
+  workOrderId: number;
+}>();
+
+const emit = defineEmits<{
+  generateWorkOrder: [row: MesProWorkOrderBomApi.WorkOrderBom];
+}>();
+
+const isEditable = computed(() => // 编辑态草稿可增删改 BOM
+  ['create', 'update'].includes(props.formType) &&
+  props.workOrder.status === MesProWorkOrderStatusEnum.PREPARE,
+);
+const isConfirmed = computed(() => // 已确认态可生成子工单
+  props.workOrder.status === MesProWorkOrderStatusEnum.CONFIRMED,
+);
+
+const [BomFormModal, bomFormModalApi] = useVbenModal({
+  connectedComponent: BomForm,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 添加 BOM 物料 */
+function handleCreate() {
+  bomFormModalApi
+    .setData({ productId: props.workOrder.productId, workOrderId: props.workOrderId })
+    .open();
+}
+
+/** 编辑 BOM 物料 */
+function handleEdit(row: MesProWorkOrderBomApi.WorkOrderBom) {
+  bomFormModalApi
+    .setData({
+      id: row.id,
+      productId: props.workOrder.productId,
+      workOrderId: props.workOrderId,
+    })
+    .open();
+}
+
+/** 删除 BOM 物料 */
+async function handleDelete(row: MesProWorkOrderBomApi.WorkOrderBom) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.itemName]),
+    duration: 0,
+  });
+  try {
+    await deleteWorkOrderBom(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.itemName]));
+    handleRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 从 BOM 行生成子工单（通知父组件） */
+function handleGenerateWorkOrder(row: MesProWorkOrderBomApi.WorkOrderBom) {
+  emit('generateWorkOrder', row);
+}
+
+/** 是否展示生成子工单按钮：已确认 + 自制 + 产品类型 BOM 行 */
+function showGenerate(row: MesProWorkOrderBomApi.WorkOrderBom) {
+  return (
+    isConfirmed.value &&
+    props.workOrder.type === MesProWorkOrderTypeEnum.SELF &&
+    row.itemOrProduct === 'PRODUCT'
+  );
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useBomGridColumns(isEditable.value, isConfirmed.value),
+    height: 400,
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }) => {
+          if (!props.workOrderId) {
+            return { list: [], total: 0 };
+          }
+          return await getWorkOrderBomPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            workOrderId: props.workOrderId,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+    },
+  } as VxeTableGridOptions<MesProWorkOrderBomApi.WorkOrderBom>,
+});
+</script>
+
+<template>
+  <div>
+    <BomFormModal @success="handleRefresh" />
+    <Grid table-title="工单 BOM">
+      <template v-if="isEditable" #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: '添加物料',
+              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: isEditable,
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              ifShow: isEditable,
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.itemName]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+            {
+              label: '生成工单',
+              type: 'link',
+              ifShow: showGenerate(row),
+              onClick: handleGenerateWorkOrder.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </div>
+</template>
diff --git a/apps/web-antd/src/views/mes/pro/workorder/modules/form.vue b/apps/web-antd/src/views/mes/pro/workorder/modules/form.vue
new file mode 100644
index 000000000..4a01f16db
--- /dev/null
+++ b/apps/web-antd/src/views/mes/pro/workorder/modules/form.vue
@@ -0,0 +1,295 @@
+<script lang="ts" setup>
+import type { FormType } from '../data';
+
+import type { MesProWorkOrderApi } from '#/api/mes/pro/workorder';
+import type { MesProWorkOrderBomApi } from '#/api/mes/pro/workorder/bom';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Button, message, Popconfirm, Tabs } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  confirmWorkOrder,
+  createWorkOrder,
+  finishWorkOrder,
+  getWorkOrder,
+  updateWorkOrder,
+} from '#/api/mes/pro/workorder';
+import { $t } from '#/locales';
+import {
+  BarcodeBizTypeEnum,
+  MesProWorkOrderStatusEnum,
+} from '#/views/mes/utils/constants';
+import { BarcodeDetail } from '#/views/mes/wm/barcode/components';
+
+import { useFormSchema } from '../data';
+import BomList from './bom-list.vue';
+import ItemList from './item-list.vue';
+
+const emit = defineEmits(['success']);
+const formType = ref<FormType>('create');
+const formData = ref<MesProWorkOrderApi.WorkOrder>();
+const originalSnapshot = ref(''); // 表单原始数据快照，用于确认时跳过未变更的保存请求
+const subTabsName = ref('bom'); // 当前选中的子表 Tab
+const barcodeDetailRef = ref<InstanceType<typeof BarcodeDetail>>(); // 条码详情弹窗
+
+const isEditable = computed(() => // 是否为编辑模式（可保存）
+  ['create', 'update'].includes(formType.value),
+);
+const isConfirm = computed(() => formType.value === 'confirm'); // 是否为确认模式
+const isFinish = computed(() => formType.value === 'finish'); // 是否为完成模式
+const canConfirm = computed(() => // 编辑态草稿可确认
+  formType.value === 'update' &&
+  formData.value?.status === MesProWorkOrderStatusEnum.PREPARE,
+);
+const getTitle = computed(() => {
+  const isChild = !!formData.value?.parentId;
+  switch (formType.value) {
+    case 'confirm': {
+      return '确认工单';
+    }
+    case 'detail': {
+      return $t('ui.actionTitle.view', ['工单']);
+    }
+    case 'finish': {
+      return '完成工单';
+    }
+    case 'update': {
+      return isChild ? '编辑子工单' : $t('ui.actionTitle.edit', ['工单']);
+    }
+    default: {
+      return isChild ? '新增子工单' : $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',
+});
+
+/** 重新挂载 schema 并按表单态控制底部确认按钮 */
+function applySchema() {
+  formApi.setState({ schema: useFormSchema(formType.value, formApi) });
+  modalApi.setState({ showConfirmButton: isEditable.value });
+}
+
+/** 查看工单条码 */
+function handleBarcode() {
+  if (!formData.value?.id) {
+    return;
+  }
+  barcodeDetailRef.value?.openByBusiness(
+    formData.value.id,
+    BarcodeBizTypeEnum.WORKORDER,
+    formData.value.code,
+    formData.value.name,
+  );
+}
+
+/** 确认工单：编辑态有修改时先保存，再确认 */
+async function handleConfirm() {
+  const { valid } = await formApi.validate();
+  if (!valid || !formData.value?.id) {
+    return;
+  }
+  modalApi.lock();
+  try {
+    if (isEditable.value) {
+      const current = JSON.stringify(await formApi.getValues());
+      if (current !== originalSnapshot.value) {
+        const data = (await formApi.getValues()) as MesProWorkOrderApi.WorkOrder;
+        await updateWorkOrder({ ...formData.value, ...data });
+        originalSnapshot.value = current;
+      }
+    }
+    await confirmWorkOrder(formData.value.id);
+    message.success('工单已确认');
+    await modalApi.close();
+    emit('success');
+  } finally {
+    modalApi.unlock();
+  }
+}
+
+/** 完成工单 */
+async function handleFinish() {
+  if (!formData.value?.id) {
+    return;
+  }
+  modalApi.lock();
+  try {
+    await finishWorkOrder(formData.value.id);
+    message.success('工单已完成');
+    await modalApi.close();
+    emit('success');
+  } finally {
+    modalApi.unlock();
+  }
+}
+
+/** 从 BOM 物料行预填子工单：复用当前工单上下文，进入新增态 */
+async function handleGenerateWorkOrder(
+  bomRow: MesProWorkOrderBomApi.WorkOrderBom,
+) {
+  const current = formData.value;
+  if (!current) {
+    return;
+  }
+  formData.value = undefined;
+  formType.value = 'create';
+  subTabsName.value = 'bom';
+  applySchema();
+  await formApi.resetForm();
+  await formApi.setValues({
+    clientId: current.clientId,
+    name: `${bomRow.itemName}【${bomRow.quantity}】${bomRow.unitMeasureName || ''}`,
+    orderSourceCode: current.orderSourceCode,
+    orderSourceType: current.orderSourceType,
+    parentId: current.id,
+    productId: bomRow.itemId,
+    quantity: bomRow.quantity,
+    requestDate: current.requestDate,
+    type: current.type,
+    vendorId: current.vendorId,
+  });
+  originalSnapshot.value = JSON.stringify(await formApi.getValues());
+  message.info('已从 BOM 物料预填子工单，请补充工单编码等信息后保存');
+}
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    if (!isEditable.value) {
+      await modalApi.close();
+      return;
+    }
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as MesProWorkOrderApi.WorkOrder;
+    try {
+      if (formData.value?.id) {
+        await updateWorkOrder({ ...formData.value, ...data });
+        formData.value = { ...formData.value, ...data };
+      } else {
+        const id = await createWorkOrder(data);
+        formData.value = {
+          ...data,
+          id,
+          status: MesProWorkOrderStatusEnum.PREPARE,
+        };
+        formType.value = 'update';
+        // 创建成功后切换编辑态，重挂 schema 让「工单状态」字段显现
+        applySchema();
+        await formApi.setValues(formData.value);
+      }
+      originalSnapshot.value = JSON.stringify(await formApi.getValues());
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      originalSnapshot.value = '';
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<{
+      formType: FormType;
+      id?: number;
+      parentRow?: MesProWorkOrderApi.WorkOrder;
+    }>();
+    formType.value = data.formType;
+    subTabsName.value = 'bom';
+    applySchema();
+    if (data?.id) {
+      modalApi.lock();
+      try {
+        formData.value = await getWorkOrder(data.id);
+        // 设置到 values
+        await formApi.setValues(formData.value);
+      } finally {
+        modalApi.unlock();
+      }
+    } else if (data?.parentRow) {
+      // 新增子工单时，预填父工单信息
+      const parent = data.parentRow;
+      await formApi.setValues({
+        clientId: parent.clientId,
+        orderSourceCode: parent.orderSourceCode,
+        orderSourceType: parent.orderSourceType,
+        parentId: parent.id,
+        requestDate: parent.requestDate,
+        type: parent.type,
+        vendorId: parent.vendorId,
+      });
+    }
+    originalSnapshot.value = JSON.stringify(await formApi.getValues());
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-3/5">
+    <Form class="mx-4" />
+    <!-- BOM / 物料需求 Tab：非新建态展示 -->
+    <template v-if="formData?.id">
+      <Tabs v-model:active-key="subTabsName" class="mx-4">
+        <Tabs.TabPane key="bom" tab="工单 BOM">
+          <BomList
+            :form-type="formType"
+            :work-order="formData"
+            :work-order-id="formData.id"
+            @generate-work-order="handleGenerateWorkOrder"
+          />
+        </Tabs.TabPane>
+        <Tabs.TabPane key="item" tab="物料需求">
+          <ItemList :work-order-id="formData.id" />
+        </Tabs.TabPane>
+      </Tabs>
+    </template>
+    <template #prepend-footer>
+      <div class="flex flex-auto items-center gap-2">
+        <Popconfirm
+          v-if="canConfirm || isConfirm"
+          title="确认要完成工单编制吗？确认后将不能更改。"
+          @confirm="handleConfirm"
+        >
+          <Button type="primary">确认</Button>
+        </Popconfirm>
+        <Popconfirm
+          v-if="isFinish"
+          title="确认要完成该工单吗？"
+          @confirm="handleFinish"
+        >
+          <Button type="primary">完成</Button>
+        </Popconfirm>
+        <Button
+          v-if="formType === 'detail' && formData?.id"
+          @click="handleBarcode"
+        >
+          查看条码
+        </Button>
+      </div>
+    </template>
+  </Modal>
+  <BarcodeDetail ref="barcodeDetailRef" />
+</template>
diff --git a/apps/web-antd/src/views/mes/pro/workorder/modules/item-list.vue b/apps/web-antd/src/views/mes/pro/workorder/modules/item-list.vue
new file mode 100644
index 000000000..7832dd209
--- /dev/null
+++ b/apps/web-antd/src/views/mes/pro/workorder/modules/item-list.vue
@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesProWorkOrderBomApi } from '#/api/mes/pro/workorder/bom';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getWorkOrderBomItemListByWorkOrderId } from '#/api/mes/pro/workorder/bom';
+
+import { useItemGridColumns } from '../data';
+
+const props = defineProps<{
+  workOrderId: number;
+}>();
+
+const [Grid] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useItemGridColumns(),
+    height: 400,
+    keepSource: true,
+    pagerConfig: {
+      enabled: false,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async () => {
+          if (!props.workOrderId) {
+            return [];
+          }
+          return await getWorkOrderBomItemListByWorkOrderId(props.workOrderId);
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+    },
+  } as VxeTableGridOptions<MesProWorkOrderBomApi.WorkOrderBom>,
+});
+</script>
+
+<template>
+  <Grid table-title="物料需求" />
+</template>
diff --git a/apps/web-ele/src/views/mes/pro/workorder/components/pro-work-order-select-dialog.vue b/apps/web-ele/src/views/mes/pro/workorder/components/pro-work-order-select-dialog.vue
new file mode 100644
index 000000000..3e0d61c62
--- /dev/null
+++ b/apps/web-ele/src/views/mes/pro/workorder/components/pro-work-order-select-dialog.vue
@@ -0,0 +1,226 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesProWorkOrderApi } from '#/api/mes/pro/workorder';
+
+import { computed, nextTick, ref } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictLabel } from '@vben/hooks';
+
+import { ElAlert, ElButton, ElDialog, ElMessage } from 'element-plus';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getWorkOrderPage } from '#/api/mes/pro/workorder';
+
+import {
+  useWorkOrderSelectGridColumns,
+  useWorkOrderSelectGridFormSchema,
+} from '../data';
+
+const props = withDefaults(
+  defineProps<{
+    status?: number;
+    type?: number;
+  }>(),
+  {
+    status: undefined,
+    type: undefined,
+  },
+);
+const emit = defineEmits<{
+  selected: [rows: MesProWorkOrderApi.WorkOrder[]];
+}>();
+
+const open = ref(false); // 弹窗是否打开
+const multiple = ref(false); // 是否多选；默认按单选选择器使用
+const selectedRows = ref<MesProWorkOrderApi.WorkOrder[]>([]); // 已选工单列表
+const preSelectedIds = ref<number[]>([]); // 预选工单编号列表
+
+const typeTip = computed(() => {
+  if (props.type == null) {
+    return '';
+  }
+  return `仅展示【${getDictLabel(DICT_TYPE.MES_PRO_WORK_ORDER_TYPE, props.type)}】类型的工单`;
+});
+
+/** 获取多选记录，包含 VXE reserve 跨页记录 */
+function getMultipleSelectedRows() {
+  const selectedMap = new Map<number, MesProWorkOrderApi.WorkOrder>();
+  const records = [
+    ...(gridApi.grid.getCheckboxReserveRecords?.() ?? []),
+    ...(gridApi.grid.getCheckboxRecords?.() ?? []),
+  ] as MesProWorkOrderApi.WorkOrder[];
+  records.forEach((row) => {
+    const rowId = row.id;
+    if (rowId !== undefined) {
+      selectedMap.set(rowId, row);
+    }
+  });
+  return [...selectedMap.values()];
+}
+
+/** 处理多选勾选变化 */
+function handleCheckboxSelectChange() {
+  selectedRows.value = getMultipleSelectedRows();
+}
+
+/** 处理单选切换 */
+function handleRadioChange(row: MesProWorkOrderApi.WorkOrder) {
+  selectedRows.value = [row];
+}
+
+/** 多选模式下切换行勾选 */
+async function toggleMultipleRow(row: MesProWorkOrderApi.WorkOrder) {
+  const selected = gridApi.grid.isCheckedByCheckboxRow(row);
+  await gridApi.grid.setCheckboxRow(row, !selected);
+  selectedRows.value = getMultipleSelectedRows();
+}
+
+/** 处理行双击：单选直接确认，多选切换勾选 */
+async function handleCellDblclick({ row }: { row: MesProWorkOrderApi.WorkOrder }) {
+  if (multiple.value) {
+    await toggleMultipleRow(row);
+    return;
+  }
+  selectedRows.value = [row];
+  await gridApi.grid.setRadioRow(row);
+  handleConfirm();
+}
+
+/** 回显预选工单 */
+async function applyPreSelection() {
+  if (preSelectedIds.value.length === 0) {
+    return;
+  }
+  const rows = gridApi.grid.getData() as MesProWorkOrderApi.WorkOrder[];
+  for (const row of rows) {
+    if (row.id === undefined || !preSelectedIds.value.includes(row.id)) {
+      continue;
+    }
+    if (multiple.value) {
+      await gridApi.grid.setCheckboxRow(row, true);
+    } else {
+      await gridApi.grid.setRadioRow(row);
+      selectedRows.value = [row];
+      return;
+    }
+  }
+  if (multiple.value) {
+    selectedRows.value = getMultipleSelectedRows();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useWorkOrderSelectGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useWorkOrderSelectGridColumns(false),
+    height: 520,
+    keepSource: true,
+    checkboxConfig: {
+      highlight: true,
+      range: true,
+      reserve: true,
+    },
+    radioConfig: {
+      highlight: true,
+      trigger: 'row',
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getWorkOrderPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            type: props.type,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MesProWorkOrderApi.WorkOrder>,
+  gridEvents: {
+    cellDblclick: handleCellDblclick,
+    checkboxAll: handleCheckboxSelectChange,
+    checkboxChange: handleCheckboxSelectChange,
+    radioChange: ({ row }: { row: MesProWorkOrderApi.WorkOrder }) => {
+      handleRadioChange(row);
+    },
+  },
+});
+
+/** 重置查询和选择状态，保留外部传入的默认状态过滤 */
+async function resetQueryState() {
+  selectedRows.value = [];
+  await gridApi.grid.clearCheckboxRow();
+  await gridApi.grid.clearCheckboxReserve();
+  await gridApi.grid.clearRadioRow();
+  await gridApi.formApi.resetForm();
+  if (props.status != null) {
+    await gridApi.formApi.setFieldValue('status', props.status);
+  }
+}
+
+/** 打开工单选择弹窗 */
+async function openModal(
+  selectedIds?: number[],
+  options?: { multiple?: boolean },
+) {
+  open.value = true;
+  multiple.value = options?.multiple ?? false;
+  preSelectedIds.value = selectedIds || [];
+  await nextTick();
+  gridApi.setGridOptions({
+    columns: useWorkOrderSelectGridColumns(multiple.value),
+  });
+  await resetQueryState();
+  await gridApi.query();
+  await nextTick();
+  await applyPreSelection();
+}
+
+/** 关闭工单选择弹窗 */
+function closeModal() {
+  open.value = false;
+}
+
+/** 确认选择工单 */
+function handleConfirm() {
+  const rows = multiple.value ? getMultipleSelectedRows() : selectedRows.value;
+  if (rows.length === 0) {
+    ElMessage.warning(multiple.value ? '请至少选择一条数据' : '请选择一条数据');
+    return;
+  }
+  emit('selected', multiple.value ? rows : [rows[0]!]);
+  open.value = false;
+}
+
+defineExpose({ open: openModal });
+</script>
+
+<template>
+  <ElDialog v-model="open" title="生产工单选择" width="80%">
+    <ElAlert
+      v-if="typeTip"
+      :closable="false"
+      :title="typeTip"
+      class="!mb-3"
+      show-icon
+      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/pro/workorder/data.ts b/apps/web-ele/src/views/mes/pro/workorder/data.ts
new file mode 100644
index 000000000..1c0884d47
--- /dev/null
+++ b/apps/web-ele/src/views/mes/pro/workorder/data.ts
@@ -0,0 +1,734 @@
+import type { VbenFormApi, VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesMdProductBomApi } from '#/api/mes/md/item/productBom';
+import type { MesProWorkOrderApi } from '#/api/mes/pro/workorder';
+import type { MesProWorkOrderBomApi } from '#/api/mes/pro/workorder/bom';
+
+import { h, markRaw } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { ElButton } from 'element-plus';
+
+import { generateAutoCode } from '#/api/mes/md/autocode/record';
+import { getRangePickerDefaultProps } from '#/utils';
+import MdClientSelect from '#/views/mes/md/client/components/md-client-select.vue';
+import { MdItemSelect, MdProductBomSelect } from '#/views/mes/md/item/components';
+import MdVendorSelect from '#/views/mes/md/vendor/components/md-vendor-select.vue';
+import {
+  MesAutoCodeRuleCode,
+  MesProWorkOrderSourceTypeEnum,
+  MesProWorkOrderTypeEnum,
+} from '#/views/mes/utils/constants';
+
+/** 表单类型 */
+export type FormType = 'confirm' | 'create' | 'detail' | 'finish' | 'update';
+
+/** 表头是否只读（确认、完成、详情态） */
+function isHeaderReadonly(formType: FormType): boolean {
+  return ['confirm', 'detail', 'finish'].includes(formType);
+}
+
+/** 新增/修改的表单 */
+export function useFormSchema(
+  formType: FormType,
+  formApi?: VbenFormApi,
+): VbenFormSchema[] {
+  const headerReadonly = isHeaderReadonly(formType);
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'parentId',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '工单状态',
+      component: 'Select',
+      componentProps: {
+        disabled: true,
+        options: getDictOptions(DICT_TYPE.MES_PRO_WORK_ORDER_STATUS, 'number'),
+      },
+      dependencies: {
+        triggerFields: [''],
+        show: () => formType !== 'create',
+      },
+    },
+    {
+      fieldName: 'code',
+      label: '工单编码',
+      component: 'Input',
+      componentProps: {
+        disabled: headerReadonly,
+        placeholder: '请输入工单编码',
+      },
+      rules: 'required',
+      suffix:
+        formType === 'create' || formType === 'update'
+          ? () =>
+              h(
+                ElButton,
+                {
+                  onClick: async () => {
+                    const code = await generateAutoCode(
+                      MesAutoCodeRuleCode.PRO_WORK_ORDER_CODE,
+                    );
+                    await formApi?.setFieldValue('code', code);
+                  },
+                },
+                { default: () => '生成' },
+              )
+          : undefined,
+    },
+    {
+      fieldName: 'name',
+      label: '工单名称',
+      component: 'Input',
+      componentProps: {
+        disabled: headerReadonly,
+        placeholder: '请输入工单名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'orderSourceType',
+      label: '工单来源',
+      component: 'Select',
+      componentProps: {
+        disabled: headerReadonly,
+        options: getDictOptions(
+          DICT_TYPE.MES_PRO_WORK_ORDER_SOURCE_TYPE,
+          'number',
+        ),
+        placeholder: '请选择工单来源',
+        // 工单来源变更：非客户订单时清空来源单据编号和客户
+        onChange: async (value: number) => {
+          if (value !== MesProWorkOrderSourceTypeEnum.ORDER) {
+            await formApi?.setValues({
+              clientId: undefined,
+              orderSourceCode: undefined,
+            });
+          }
+        },
+      },
+      rules: 'selectRequired',
+    },
+    {
+      fieldName: 'orderSourceCode',
+      label: '来源单据编号',
+      component: 'Input',
+      componentProps: {
+        disabled: headerReadonly,
+        placeholder: '请输入来源单据编号',
+      },
+      dependencies: {
+        triggerFields: ['orderSourceType'],
+        show: (values) =>
+          values.orderSourceType === MesProWorkOrderSourceTypeEnum.ORDER,
+      },
+    },
+    {
+      fieldName: 'type',
+      label: '工单类型',
+      component: 'Select',
+      componentProps: {
+        disabled: headerReadonly,
+        options: getDictOptions(DICT_TYPE.MES_PRO_WORK_ORDER_TYPE, 'number'),
+        placeholder: '请选择工单类型',
+        // 工单类型变更：非代工/采购时清空供应商
+        onChange: async (value: number) => {
+          if (
+            value !== MesProWorkOrderTypeEnum.OUTSOURCE &&
+            value !== MesProWorkOrderTypeEnum.PURCHASE
+          ) {
+            await formApi?.setFieldValue('vendorId', undefined);
+          }
+        },
+      },
+      rules: 'selectRequired',
+    },
+    {
+      fieldName: 'productId',
+      label: '产品',
+      component: markRaw(MdItemSelect),
+      componentProps: {
+        disabled: headerReadonly,
+        placeholder: '请选择产品',
+      },
+      rules: 'selectRequired',
+    },
+    {
+      fieldName: 'quantity',
+      label: '工单数量',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        controlsPosition: 'right',
+        disabled: headerReadonly,
+        min: 1,
+        placeholder: '请输入工单数量',
+        precision: 2,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'clientId',
+      label: '客户',
+      component: markRaw(MdClientSelect),
+      componentProps: {
+        disabled: headerReadonly,
+        placeholder: '请选择客户',
+      },
+      dependencies: {
+        triggerFields: ['orderSourceType'],
+        show: (values) =>
+          values.orderSourceType === MesProWorkOrderSourceTypeEnum.ORDER,
+      },
+    },
+    {
+      fieldName: 'vendorId',
+      label: '供应商',
+      component: markRaw(MdVendorSelect),
+      componentProps: {
+        disabled: headerReadonly,
+        placeholder: '请选择供应商',
+      },
+      dependencies: {
+        triggerFields: ['type'],
+        show: (values) =>
+          values.type === MesProWorkOrderTypeEnum.OUTSOURCE ||
+          values.type === MesProWorkOrderTypeEnum.PURCHASE,
+      },
+    },
+    {
+      fieldName: 'batchCode',
+      label: '批次号',
+      component: 'Input',
+      componentProps: {
+        disabled: headerReadonly,
+        placeholder: '请输入批次号',
+      },
+    },
+    {
+      fieldName: 'requestDate',
+      label: '需求日期',
+      component: 'DatePicker',
+      componentProps: {
+        class: '!w-full',
+        disabled: headerReadonly,
+        placeholder: '请选择需求日期',
+        type: 'date',
+        valueFormat: 'x',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      formItemClass: 'col-span-3',
+      componentProps: {
+        disabled: headerReadonly,
+        placeholder: '请输入备注',
+        rows: 3,
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'code',
+      label: '工单编码',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入工单编码',
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '工单名称',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入工单名称',
+      },
+    },
+    {
+      fieldName: 'orderSourceCode',
+      label: '来源单据',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入来源单据编号',
+      },
+    },
+    {
+      fieldName: 'productId',
+      label: '产品',
+      component: markRaw(MdItemSelect),
+      componentProps: {
+        placeholder: '请选择产品',
+      },
+    },
+    {
+      fieldName: 'clientId',
+      label: '客户',
+      component: markRaw(MdClientSelect),
+      componentProps: {
+        placeholder: '请选择客户',
+      },
+    },
+    {
+      fieldName: 'type',
+      label: '工单类型',
+      component: 'Select',
+      componentProps: {
+        clearable: true,
+        options: getDictOptions(DICT_TYPE.MES_PRO_WORK_ORDER_TYPE, 'number'),
+        placeholder: '请选择工单类型',
+      },
+    },
+    {
+      fieldName: 'requestDate',
+      label: '需求日期',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        clearable: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions<MesProWorkOrderApi.WorkOrder>['columns'] {
+  return [
+    {
+      field: 'code',
+      title: '工单编码',
+      fixed: 'left',
+      width: 200,
+      treeNode: true,
+      slots: { default: 'code' },
+    },
+    {
+      field: 'name',
+      title: '工单名称',
+      minWidth: 150,
+    },
+    {
+      field: 'type',
+      title: '工单类型',
+      width: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MES_PRO_WORK_ORDER_TYPE },
+      },
+    },
+    {
+      field: 'orderSourceType',
+      title: '工单来源',
+      width: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MES_PRO_WORK_ORDER_SOURCE_TYPE },
+      },
+    },
+    {
+      field: 'orderSourceCode',
+      title: '来源单据编号',
+      width: 140,
+    },
+    {
+      field: 'productCode',
+      title: '产品编码',
+      width: 120,
+    },
+    {
+      field: 'productName',
+      title: '产品名称',
+      minWidth: 120,
+    },
+    {
+      field: 'productSpecification',
+      title: '规格型号',
+      width: 120,
+    },
+    {
+      field: 'unitMeasureName',
+      title: '单位',
+      width: 80,
+    },
+    {
+      field: 'quantity',
+      title: '工单数量',
+      width: 100,
+    },
+    {
+      field: 'quantityProduced',
+      title: '已生产数量',
+      width: 100,
+    },
+    {
+      field: 'clientCode',
+      title: '客户编码',
+      width: 120,
+    },
+    {
+      field: 'clientName',
+      title: '客户名称',
+      width: 120,
+    },
+    {
+      field: 'requestDate',
+      title: '需求日期',
+      width: 180,
+      formatter: 'formatDate',
+    },
+    {
+      field: 'status',
+      title: '工单状态',
+      width: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MES_PRO_WORK_ORDER_STATUS },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 240,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 工单 BOM 子表的字段 */
+export function useBomGridColumns(
+  editable: boolean,
+  generatable: boolean,
+): VxeTableGridOptions<MesProWorkOrderBomApi.WorkOrderBom>['columns'] {
+  return [
+    {
+      field: 'itemCode',
+      title: 'BOM 物料编码',
+      width: 120,
+    },
+    {
+      field: 'itemName',
+      title: 'BOM 物料名称',
+      minWidth: 150,
+    },
+    {
+      field: 'itemSpecification',
+      title: '规格型号',
+      width: 120,
+    },
+    {
+      field: 'unitMeasureName',
+      title: '单位',
+      width: 80,
+    },
+    {
+      field: 'itemOrProduct',
+      title: '物料/产品',
+      width: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MES_MD_ITEM_OR_PRODUCT },
+      },
+    },
+    {
+      field: 'quantity',
+      title: '预计使用量',
+      width: 120,
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 120,
+    },
+    ...(editable || generatable
+      ? [
+          {
+            title: '操作',
+            width: 160,
+            fixed: 'right',
+            slots: { default: 'actions' },
+          } as const,
+        ]
+      : []),
+  ];
+}
+
+/** 工单 BOM 新增/修改的表单 */
+export function useBomFormSchema(
+  isCreate: boolean,
+  productId?: number,
+  formApi?: VbenFormApi,
+): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'itemId',
+      label: '物料',
+      component: markRaw(MdProductBomSelect),
+      componentProps: {
+        itemId: productId,
+        placeholder: '请选择物料',
+        // BOM 物料选中后自动回填预计使用量
+        onChange: async (bom?: MesMdProductBomApi.ProductBom) => {
+          await formApi?.setFieldValue('quantity', bom?.quantity ?? undefined);
+        },
+      },
+      rules: 'selectRequired',
+      dependencies: {
+        triggerFields: [''],
+        show: () => isCreate,
+      },
+    },
+    {
+      fieldName: 'itemName',
+      label: '物料',
+      component: 'Input',
+      componentProps: {
+        disabled: true,
+      },
+      dependencies: {
+        triggerFields: [''],
+        show: () => !isCreate,
+      },
+    },
+    {
+      fieldName: 'unitMeasureName',
+      label: '单位',
+      component: 'Input',
+      componentProps: {
+        disabled: true,
+      },
+      dependencies: {
+        triggerFields: [''],
+        show: () => !isCreate,
+      },
+    },
+    {
+      fieldName: 'quantity',
+      label: '预计使用量',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        controlsPosition: 'right',
+        min: 0,
+        placeholder: '请输入预计使用量',
+        precision: 2,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 3,
+      },
+    },
+  ];
+}
+
+/** 工单选择弹窗的搜索表单 */
+export function useWorkOrderSelectGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'code',
+      label: '工单编码',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入工单编码',
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '工单名称',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入工单名称',
+      },
+    },
+    {
+      fieldName: 'productId',
+      label: '产品',
+      component: markRaw(MdItemSelect),
+      componentProps: {
+        placeholder: '请选择产品',
+      },
+    },
+    {
+      fieldName: 'clientId',
+      label: '客户',
+      component: markRaw(MdClientSelect),
+      componentProps: {
+        placeholder: '请选择客户',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '工单状态',
+      component: 'Select',
+      componentProps: {
+        clearable: true,
+        options: getDictOptions(DICT_TYPE.MES_PRO_WORK_ORDER_STATUS, 'number'),
+        placeholder: '请选择工单状态',
+      },
+    },
+  ];
+}
+
+/** 工单选择弹窗的字段 */
+export function useWorkOrderSelectGridColumns(
+  multiple = false,
+): VxeTableGridOptions<MesProWorkOrderApi.WorkOrder>['columns'] {
+  return [
+    {
+      type: multiple ? 'checkbox' : 'radio',
+      width: 50,
+    },
+    {
+      field: 'code',
+      title: '工单编码',
+      width: 180,
+    },
+    {
+      field: 'name',
+      title: '工单名称',
+      minWidth: 180,
+    },
+    {
+      field: 'orderSourceType',
+      title: '工单来源',
+      width: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MES_PRO_WORK_ORDER_SOURCE_TYPE },
+      },
+    },
+    {
+      field: 'orderSourceCode',
+      title: '订单编号',
+      width: 140,
+    },
+    {
+      field: 'productCode',
+      title: '产品编号',
+      width: 120,
+    },
+    {
+      field: 'productName',
+      title: '产品名称',
+      minWidth: 150,
+    },
+    {
+      field: 'productSpecification',
+      title: '规格型号',
+      minWidth: 120,
+    },
+    {
+      field: 'unitMeasureName',
+      title: '单位',
+      width: 80,
+    },
+    {
+      field: 'quantity',
+      title: '工单数量',
+      width: 100,
+    },
+    {
+      field: 'clientCode',
+      title: '客户编码',
+      width: 120,
+    },
+    {
+      field: 'clientName',
+      title: '客户名称',
+      minWidth: 120,
+    },
+    {
+      field: 'status',
+      title: '工单状态',
+      width: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MES_PRO_WORK_ORDER_STATUS },
+      },
+    },
+    {
+      field: 'requestDate',
+      title: '需求日期',
+      width: 120,
+      formatter: 'formatDate',
+    },
+  ];
+}
+
+/** 工单物料需求子表的字段（只读） */
+export function useItemGridColumns(): VxeTableGridOptions<MesProWorkOrderBomApi.WorkOrderBom>['columns'] {
+  return [
+    {
+      field: 'itemCode',
+      title: '物料编码',
+      width: 120,
+    },
+    {
+      field: 'itemName',
+      title: '物料名称',
+      minWidth: 150,
+    },
+    {
+      field: 'itemSpecification',
+      title: '规格型号',
+      width: 120,
+    },
+    {
+      field: 'unitMeasureName',
+      title: '单位',
+      width: 80,
+    },
+    {
+      field: 'itemOrProduct',
+      title: '物料/产品',
+      width: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MES_MD_ITEM_OR_PRODUCT },
+      },
+    },
+    {
+      field: 'quantity',
+      title: '需求数量',
+      width: 120,
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/mes/pro/workorder/index.vue b/apps/web-ele/src/views/mes/pro/workorder/index.vue
new file mode 100644
index 000000000..3f7e02c25
--- /dev/null
+++ b/apps/web-ele/src/views/mes/pro/workorder/index.vue
@@ -0,0 +1,245 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesProWorkOrderApi } from '#/api/mes/pro/workorder';
+
+import { ref } from 'vue';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { ElButton, ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  cancelWorkOrder,
+  deleteWorkOrder,
+  exportWorkOrder,
+  getWorkOrderPage,
+} from '#/api/mes/pro/workorder';
+import { $t } from '#/locales';
+import {
+  BarcodeBizTypeEnum,
+  MesProWorkOrderStatusEnum,
+  MesProWorkOrderTypeEnum,
+} from '#/views/mes/utils/constants';
+import { BarcodeDetail } from '#/views/mes/wm/barcode/components';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const barcodeDetailRef = ref<InstanceType<typeof BarcodeDetail>>(); // 条码详情弹窗
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建工单 */
+function handleCreate() {
+  formModalApi.setData({ formType: 'create' }).open();
+}
+
+/** 新增子工单 */
+function handleAddChild(row: MesProWorkOrderApi.WorkOrder) {
+  formModalApi.setData({ formType: 'create', parentRow: row }).open();
+}
+
+/** 查看工单详情 */
+function handleDetail(row: MesProWorkOrderApi.WorkOrder) {
+  formModalApi.setData({ formType: 'detail', id: row.id }).open();
+}
+
+/** 编辑工单 */
+function handleEdit(row: MesProWorkOrderApi.WorkOrder) {
+  formModalApi.setData({ formType: 'update', id: row.id }).open();
+}
+
+/** 完成工单 */
+function handleFinish(row: MesProWorkOrderApi.WorkOrder) {
+  formModalApi.setData({ formType: 'finish', id: row.id }).open();
+}
+
+/** 删除工单 */
+async function handleDelete(row: MesProWorkOrderApi.WorkOrder) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.code]),
+  });
+  try {
+    await deleteWorkOrder(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.code]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 取消工单 */
+async function handleCancel(row: MesProWorkOrderApi.WorkOrder) {
+  await cancelWorkOrder(row.id!);
+  ElMessage.success('工单已取消');
+  handleRefresh();
+}
+
+/** 查看工单条码 */
+function handleBarcode(row: MesProWorkOrderApi.WorkOrder) {
+  barcodeDetailRef.value?.openByBusiness(
+    row.id!,
+    BarcodeBizTypeEnum.WORKORDER,
+    row.code,
+    row.name,
+  );
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportWorkOrder(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '生产工单.xls', source: data });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getWorkOrderPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+    treeConfig: {
+      parentField: 'parentId',
+      rowField: 'id',
+      transform: true,
+      expandAll: true,
+      reserve: true,
+    },
+  } as VxeTableGridOptions<MesProWorkOrderApi.WorkOrder>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【生产】生产工单"
+        url="https://doc.iocoder.cn/mes/pro/work-order/"
+      />
+    </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:pro-work-order:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['mes:pro-work-order:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #code="{ row }">
+        <ElButton link type="primary" @click="handleDetail(row)">
+          {{ row.code }}
+        </ElButton>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['mes:pro-work-order:update'],
+              ifShow: row.status === MesProWorkOrderStatusEnum.PREPARE,
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['mes:pro-work-order:delete'],
+              ifShow: row.status === MesProWorkOrderStatusEnum.PREPARE,
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.code]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+            {
+              label: $t('common.create'),
+              type: 'primary',
+              link: true,
+              auth: ['mes:pro-work-order:create'],
+              ifShow:
+                row.status === MesProWorkOrderStatusEnum.CONFIRMED &&
+                row.type === MesProWorkOrderTypeEnum.SELF,
+              onClick: handleAddChild.bind(null, row),
+            },
+            {
+              label: '完成',
+              type: 'primary',
+              link: true,
+              auth: ['mes:pro-work-order:update'],
+              ifShow: row.status === MesProWorkOrderStatusEnum.CONFIRMED,
+              onClick: handleFinish.bind(null, row),
+            },
+            {
+              label: '取消',
+              type: 'danger',
+              link: true,
+              auth: ['mes:pro-work-order:update'],
+              ifShow: row.status === MesProWorkOrderStatusEnum.CONFIRMED,
+              popConfirm: {
+                title: '确认要取消该工单吗？取消后不可恢复。',
+                confirm: handleCancel.bind(null, row),
+              },
+            },
+            {
+              label: '条码',
+              type: 'primary',
+              link: true,
+              auth: ['mes:pro-work-order:query'],
+              onClick: handleBarcode.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+    <BarcodeDetail ref="barcodeDetailRef" />
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/mes/pro/workorder/modules/bom-form.vue b/apps/web-ele/src/views/mes/pro/workorder/modules/bom-form.vue
new file mode 100644
index 000000000..69df71ce0
--- /dev/null
+++ b/apps/web-ele/src/views/mes/pro/workorder/modules/bom-form.vue
@@ -0,0 +1,101 @@
+<script lang="ts" setup>
+import type { MesProWorkOrderBomApi } from '#/api/mes/pro/workorder/bom';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createWorkOrderBom,
+  getWorkOrderBom,
+  updateWorkOrderBom,
+} from '#/api/mes/pro/workorder/bom';
+import { $t } from '#/locales';
+
+import { useBomFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<MesProWorkOrderBomApi.WorkOrderBom>();
+const workOrderId = ref<number>(); // 所属工单编号
+
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['BOM 物料'])
+    : $t('ui.actionTitle.create', ['BOM 物料']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 100,
+  },
+  layout: 'horizontal',
+  schema: [],
+  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 MesProWorkOrderBomApi.WorkOrderBom;
+    data.workOrderId = workOrderId.value;
+    try {
+      await (formData.value?.id
+        ? updateWorkOrderBom({ ...data, id: formData.value.id })
+        : createWorkOrderBom(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;
+      productId?: number;
+      workOrderId: number;
+    }>();
+    workOrderId.value = data.workOrderId;
+    formApi.setState({
+      schema: useBomFormSchema(!data.id, data.productId, formApi),
+    });
+    if (!data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getWorkOrderBom(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-2/5">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mes/pro/workorder/modules/bom-list.vue b/apps/web-ele/src/views/mes/pro/workorder/modules/bom-list.vue
new file mode 100644
index 000000000..7b8e63476
--- /dev/null
+++ b/apps/web-ele/src/views/mes/pro/workorder/modules/bom-list.vue
@@ -0,0 +1,182 @@
+<script lang="ts" setup>
+import type { FormType } from '../data';
+
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesProWorkOrderApi } from '#/api/mes/pro/workorder';
+import type { MesProWorkOrderBomApi } from '#/api/mes/pro/workorder/bom';
+
+import { computed } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteWorkOrderBom,
+  getWorkOrderBomPage,
+} from '#/api/mes/pro/workorder/bom';
+import { $t } from '#/locales';
+import {
+  MesProWorkOrderStatusEnum,
+  MesProWorkOrderTypeEnum,
+} from '#/views/mes/utils/constants';
+
+import { useBomGridColumns } from '../data';
+import BomForm from './bom-form.vue';
+
+const props = defineProps<{
+  formType: FormType;
+  workOrder: MesProWorkOrderApi.WorkOrder;
+  workOrderId: number;
+}>();
+
+const emit = defineEmits<{
+  generateWorkOrder: [row: MesProWorkOrderBomApi.WorkOrderBom];
+}>();
+
+const isEditable = computed(() => // 编辑态草稿可增删改 BOM
+  ['create', 'update'].includes(props.formType) &&
+  props.workOrder.status === MesProWorkOrderStatusEnum.PREPARE,
+);
+const isConfirmed = computed(() => // 已确认态可生成子工单
+  props.workOrder.status === MesProWorkOrderStatusEnum.CONFIRMED,
+);
+
+const [BomFormModal, bomFormModalApi] = useVbenModal({
+  connectedComponent: BomForm,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 添加 BOM 物料 */
+function handleCreate() {
+  bomFormModalApi
+    .setData({ productId: props.workOrder.productId, workOrderId: props.workOrderId })
+    .open();
+}
+
+/** 编辑 BOM 物料 */
+function handleEdit(row: MesProWorkOrderBomApi.WorkOrderBom) {
+  bomFormModalApi
+    .setData({
+      id: row.id,
+      productId: props.workOrder.productId,
+      workOrderId: props.workOrderId,
+    })
+    .open();
+}
+
+/** 删除 BOM 物料 */
+async function handleDelete(row: MesProWorkOrderBomApi.WorkOrderBom) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.itemName]),
+  });
+  try {
+    await deleteWorkOrderBom(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.itemName]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 从 BOM 行生成子工单（通知父组件） */
+function handleGenerateWorkOrder(row: MesProWorkOrderBomApi.WorkOrderBom) {
+  emit('generateWorkOrder', row);
+}
+
+/** 是否展示生成子工单按钮：已确认 + 自制 + 产品类型 BOM 行 */
+function showGenerate(row: MesProWorkOrderBomApi.WorkOrderBom) {
+  return (
+    isConfirmed.value &&
+    props.workOrder.type === MesProWorkOrderTypeEnum.SELF &&
+    row.itemOrProduct === 'PRODUCT'
+  );
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useBomGridColumns(isEditable.value, isConfirmed.value),
+    height: 400,
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }) => {
+          if (!props.workOrderId) {
+            return { list: [], total: 0 };
+          }
+          return await getWorkOrderBomPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            workOrderId: props.workOrderId,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+    },
+  } as VxeTableGridOptions<MesProWorkOrderBomApi.WorkOrderBom>,
+});
+</script>
+
+<template>
+  <div>
+    <BomFormModal @success="handleRefresh" />
+    <Grid table-title="工单 BOM">
+      <template v-if="isEditable" #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: '添加物料',
+              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: isEditable,
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              ifShow: isEditable,
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.itemName]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+            {
+              label: '生成工单',
+              type: 'primary',
+              link: true,
+              ifShow: showGenerate(row),
+              onClick: handleGenerateWorkOrder.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/mes/pro/workorder/modules/form.vue b/apps/web-ele/src/views/mes/pro/workorder/modules/form.vue
new file mode 100644
index 000000000..79be48a28
--- /dev/null
+++ b/apps/web-ele/src/views/mes/pro/workorder/modules/form.vue
@@ -0,0 +1,307 @@
+<script lang="ts" setup>
+import type { FormType } from '../data';
+
+import type { MesProWorkOrderApi } from '#/api/mes/pro/workorder';
+import type { MesProWorkOrderBomApi } from '#/api/mes/pro/workorder/bom';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import {
+  ElButton,
+  ElMessage,
+  ElPopconfirm,
+  ElTabPane,
+  ElTabs,
+} from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  confirmWorkOrder,
+  createWorkOrder,
+  finishWorkOrder,
+  getWorkOrder,
+  updateWorkOrder,
+} from '#/api/mes/pro/workorder';
+import { $t } from '#/locales';
+import {
+  BarcodeBizTypeEnum,
+  MesProWorkOrderStatusEnum,
+} from '#/views/mes/utils/constants';
+import { BarcodeDetail } from '#/views/mes/wm/barcode/components';
+
+import { useFormSchema } from '../data';
+import BomList from './bom-list.vue';
+import ItemList from './item-list.vue';
+
+const emit = defineEmits(['success']);
+const formType = ref<FormType>('create');
+const formData = ref<MesProWorkOrderApi.WorkOrder>();
+const originalSnapshot = ref(''); // 表单原始数据快照，用于确认时跳过未变更的保存请求
+const subTabsName = ref('bom'); // 当前选中的子表 Tab
+const barcodeDetailRef = ref<InstanceType<typeof BarcodeDetail>>(); // 条码详情弹窗
+
+const isEditable = computed(() => // 是否为编辑模式（可保存）
+  ['create', 'update'].includes(formType.value),
+);
+const isConfirm = computed(() => formType.value === 'confirm'); // 是否为确认模式
+const isFinish = computed(() => formType.value === 'finish'); // 是否为完成模式
+const canConfirm = computed(() => // 编辑态草稿可确认
+  formType.value === 'update' &&
+  formData.value?.status === MesProWorkOrderStatusEnum.PREPARE,
+);
+const getTitle = computed(() => {
+  const isChild = !!formData.value?.parentId;
+  switch (formType.value) {
+    case 'confirm': {
+      return '确认工单';
+    }
+    case 'detail': {
+      return $t('ui.actionTitle.view', ['工单']);
+    }
+    case 'finish': {
+      return '完成工单';
+    }
+    case 'update': {
+      return isChild ? '编辑子工单' : $t('ui.actionTitle.edit', ['工单']);
+    }
+    default: {
+      return isChild ? '新增子工单' : $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',
+});
+
+/** 重新挂载 schema 并按表单态控制底部确认按钮 */
+function applySchema() {
+  formApi.setState({ schema: useFormSchema(formType.value, formApi) });
+  modalApi.setState({ showConfirmButton: isEditable.value });
+}
+
+/** 查看工单条码 */
+function handleBarcode() {
+  if (!formData.value?.id) {
+    return;
+  }
+  barcodeDetailRef.value?.openByBusiness(
+    formData.value.id,
+    BarcodeBizTypeEnum.WORKORDER,
+    formData.value.code,
+    formData.value.name,
+  );
+}
+
+/** 确认工单：编辑态有修改时先保存，再确认 */
+async function handleConfirm() {
+  const { valid } = await formApi.validate();
+  if (!valid || !formData.value?.id) {
+    return;
+  }
+  modalApi.lock();
+  try {
+    if (isEditable.value) {
+      const current = JSON.stringify(await formApi.getValues());
+      if (current !== originalSnapshot.value) {
+        const data = (await formApi.getValues()) as MesProWorkOrderApi.WorkOrder;
+        await updateWorkOrder({ ...formData.value, ...data });
+        originalSnapshot.value = current;
+      }
+    }
+    await confirmWorkOrder(formData.value.id);
+    ElMessage.success('工单已确认');
+    await modalApi.close();
+    emit('success');
+  } finally {
+    modalApi.unlock();
+  }
+}
+
+/** 完成工单 */
+async function handleFinish() {
+  if (!formData.value?.id) {
+    return;
+  }
+  modalApi.lock();
+  try {
+    await finishWorkOrder(formData.value.id);
+    ElMessage.success('工单已完成');
+    await modalApi.close();
+    emit('success');
+  } finally {
+    modalApi.unlock();
+  }
+}
+
+/** 从 BOM 物料行预填子工单：复用当前工单上下文，进入新增态 */
+async function handleGenerateWorkOrder(
+  bomRow: MesProWorkOrderBomApi.WorkOrderBom,
+) {
+  const current = formData.value;
+  if (!current) {
+    return;
+  }
+  formData.value = undefined;
+  formType.value = 'create';
+  subTabsName.value = 'bom';
+  applySchema();
+  await formApi.resetForm();
+  await formApi.setValues({
+    clientId: current.clientId,
+    name: `${bomRow.itemName}【${bomRow.quantity}】${bomRow.unitMeasureName || ''}`,
+    orderSourceCode: current.orderSourceCode,
+    orderSourceType: current.orderSourceType,
+    parentId: current.id,
+    productId: bomRow.itemId,
+    quantity: bomRow.quantity,
+    requestDate: current.requestDate,
+    type: current.type,
+    vendorId: current.vendorId,
+  });
+  originalSnapshot.value = JSON.stringify(await formApi.getValues());
+  ElMessage.info('已从 BOM 物料预填子工单，请补充工单编码等信息后保存');
+}
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    if (!isEditable.value) {
+      await modalApi.close();
+      return;
+    }
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as MesProWorkOrderApi.WorkOrder;
+    try {
+      if (formData.value?.id) {
+        await updateWorkOrder({ ...formData.value, ...data });
+        formData.value = { ...formData.value, ...data };
+      } else {
+        const id = await createWorkOrder(data);
+        formData.value = {
+          ...data,
+          id,
+          status: MesProWorkOrderStatusEnum.PREPARE,
+        };
+        formType.value = 'update';
+        // 创建成功后切换编辑态，重挂 schema 让「工单状态」字段显现
+        applySchema();
+        await formApi.setValues(formData.value);
+      }
+      originalSnapshot.value = JSON.stringify(await formApi.getValues());
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      originalSnapshot.value = '';
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<{
+      formType: FormType;
+      id?: number;
+      parentRow?: MesProWorkOrderApi.WorkOrder;
+    }>();
+    formType.value = data.formType;
+    subTabsName.value = 'bom';
+    applySchema();
+    if (data?.id) {
+      modalApi.lock();
+      try {
+        formData.value = await getWorkOrder(data.id);
+        // 设置到 values
+        await formApi.setValues(formData.value);
+      } finally {
+        modalApi.unlock();
+      }
+    } else if (data?.parentRow) {
+      // 新增子工单时，预填父工单信息
+      const parent = data.parentRow;
+      await formApi.setValues({
+        clientId: parent.clientId,
+        orderSourceCode: parent.orderSourceCode,
+        orderSourceType: parent.orderSourceType,
+        parentId: parent.id,
+        requestDate: parent.requestDate,
+        type: parent.type,
+        vendorId: parent.vendorId,
+      });
+    }
+    originalSnapshot.value = JSON.stringify(await formApi.getValues());
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-3/5">
+    <Form class="mx-4" />
+    <!-- BOM / 物料需求 Tab：非新建态展示 -->
+    <template v-if="formData?.id">
+      <ElTabs v-model="subTabsName" class="mx-4">
+        <ElTabPane label="工单 BOM" name="bom">
+          <BomList
+            :form-type="formType"
+            :work-order="formData"
+            :work-order-id="formData.id"
+            @generate-work-order="handleGenerateWorkOrder"
+          />
+        </ElTabPane>
+        <ElTabPane label="物料需求" name="item">
+          <ItemList :work-order-id="formData.id" />
+        </ElTabPane>
+      </ElTabs>
+    </template>
+    <template #prepend-footer>
+      <div class="flex flex-auto items-center gap-2">
+        <ElPopconfirm
+          v-if="canConfirm || isConfirm"
+          title="确认要完成工单编制吗？确认后将不能更改。"
+          width="280"
+          @confirm="handleConfirm"
+        >
+          <template #reference>
+            <ElButton type="primary">确认</ElButton>
+          </template>
+        </ElPopconfirm>
+        <ElPopconfirm
+          v-if="isFinish"
+          title="确认要完成该工单吗？"
+          width="220"
+          @confirm="handleFinish"
+        >
+          <template #reference>
+            <ElButton type="primary">完成</ElButton>
+          </template>
+        </ElPopconfirm>
+        <ElButton
+          v-if="formType === 'detail' && formData?.id"
+          @click="handleBarcode"
+        >
+          查看条码
+        </ElButton>
+      </div>
+    </template>
+  </Modal>
+  <BarcodeDetail ref="barcodeDetailRef" />
+</template>
diff --git a/apps/web-ele/src/views/mes/pro/workorder/modules/item-list.vue b/apps/web-ele/src/views/mes/pro/workorder/modules/item-list.vue
new file mode 100644
index 000000000..7832dd209
--- /dev/null
+++ b/apps/web-ele/src/views/mes/pro/workorder/modules/item-list.vue
@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesProWorkOrderBomApi } from '#/api/mes/pro/workorder/bom';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getWorkOrderBomItemListByWorkOrderId } from '#/api/mes/pro/workorder/bom';
+
+import { useItemGridColumns } from '../data';
+
+const props = defineProps<{
+  workOrderId: number;
+}>();
+
+const [Grid] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useItemGridColumns(),
+    height: 400,
+    keepSource: true,
+    pagerConfig: {
+      enabled: false,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async () => {
+          if (!props.workOrderId) {
+            return [];
+          }
+          return await getWorkOrderBomItemListByWorkOrderId(props.workOrderId);
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+    },
+  } as VxeTableGridOptions<MesProWorkOrderBomApi.WorkOrderBom>,
+});
+</script>
+
+<template>
+  <Grid table-title="物料需求" />
+</template>