diff --git a/apps/web-antd/src/views/mes/pro/card/index.vue b/apps/web-antd/src/views/mes/pro/card/index.vue
new file mode 100644
index 000000000..718163f13
--- /dev/null
+++ b/apps/web-antd/src/views/mes/pro/card/index.vue
@@ -0,0 +1,197 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesProCardApi } from '#/api/mes/pro/card';
+
+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 {
+  cancelCard,
+  deleteCard,
+  exportCard,
+  getCardPage,
+} from '#/api/mes/pro/card';
+import { $t } from '#/locales';
+import { MesProCardStatusEnum } from '#/views/mes/utils/constants';
+import { PrinterLabel } 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,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建流转卡 */
+function handleCreate() {
+  formModalApi.setData({ formType: 'create' }).open();
+}
+
+/** 查看流转卡详情 */
+function handleDetail(row: MesProCardApi.Card) {
+  formModalApi.setData({ formType: 'detail', id: row.id }).open();
+}
+
+/** 编辑流转卡 */
+function handleEdit(row: MesProCardApi.Card) {
+  formModalApi.setData({ formType: 'update', id: row.id }).open();
+}
+
+/** 完成流转卡 */
+function handleFinish(row: MesProCardApi.Card) {
+  formModalApi.setData({ formType: 'finish', id: row.id }).open();
+}
+
+/** 删除流转卡 */
+async function handleDelete(row: MesProCardApi.Card) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.code]),
+    duration: 0,
+  });
+  try {
+    await deleteCard(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.code]));
+    handleRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 取消流转卡 */
+async function handleCancel(row: MesProCardApi.Card) {
+  await cancelCard(row.id!);
+  message.success('取消成功');
+  handleRefresh();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportCard(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 getCardPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MesProCardApi.Card>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【生产】生产排产、工序流转卡"
+        url="https://doc.iocoder.cn/mes/pro/schedule-card/"
+      />
+    </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-card:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['mes:pro-card: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-card:update'],
+              ifShow: row.status === MesProCardStatusEnum.PREPARE,
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['mes:pro-card:delete'],
+              ifShow: row.status === MesProCardStatusEnum.PREPARE,
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.code]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+            {
+              label: '完成',
+              type: 'link',
+              auth: ['mes:pro-card:finish'],
+              ifShow: row.status === MesProCardStatusEnum.ISSUED,
+              onClick: handleFinish.bind(null, row),
+            },
+            {
+              label: '取消',
+              type: 'link',
+              danger: true,
+              auth: ['mes:pro-card:update'],
+              ifShow: row.status === MesProCardStatusEnum.ISSUED,
+              popConfirm: {
+                title: '确认取消该流转卡？取消后不可恢复。',
+                confirm: handleCancel.bind(null, row),
+              },
+            },
+          ]"
+        />
+        <PrinterLabel :biz-code="row.code" :biz-id="row.id" biz-type="PROCARD" />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-antd/src/views/mes/pro/card/modules/form.vue b/apps/web-antd/src/views/mes/pro/card/modules/form.vue
new file mode 100644
index 000000000..32af7cc57
--- /dev/null
+++ b/apps/web-antd/src/views/mes/pro/card/modules/form.vue
@@ -0,0 +1,221 @@
+<script lang="ts" setup>
+import type { FormType } from '../data';
+
+import type { MesProCardApi } from '#/api/mes/pro/card';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Button, Divider, message, Popconfirm } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createCard,
+  finishCard,
+  getCard,
+  submitCard,
+  updateCard,
+} from '#/api/mes/pro/card';
+import { $t } from '#/locales';
+import {
+  BarcodeBizTypeEnum,
+  MesProCardStatusEnum,
+} from '#/views/mes/utils/constants';
+import { BarcodeDetail } from '#/views/mes/wm/barcode/components';
+
+import { useFormSchema } from '../data';
+import ProcessList from './process-list.vue';
+
+const emit = defineEmits(['success']);
+const formType = ref<FormType>('create');
+const formData = ref<MesProCardApi.Card>();
+const originalSnapshot = ref(''); // 表单原始数据快照，用于提交时跳过未变更的保存请求
+const barcodeDetailRef = ref<InstanceType<typeof BarcodeDetail>>(); // 条码详情弹窗
+
+const isEditable = computed(() => // 是否为编辑模式（可保存）
+  ['create', 'update'].includes(formType.value),
+);
+const isFinish = computed(() => formType.value === 'finish'); // 是否为完成模式
+const canSubmit = computed(() => // 编辑态草稿可提交
+  formType.value === 'update' &&
+  formData.value?.status === MesProCardStatusEnum.PREPARE,
+);
+// TODO @AI：标题方法的代码风格；
+const getTitle = computed(() => {
+  switch (formType.value) {
+    case 'detail': {
+      return $t('ui.actionTitle.view', ['流转卡']);
+    }
+    case 'finish': {
+      return '完成流转卡';
+    }
+    case 'update': {
+      return $t('ui.actionTitle.edit', ['流转卡']);
+    }
+    default: {
+      return $t('ui.actionTitle.create', ['流转卡']);
+    }
+  }
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-1',
+    labelWidth: 110,
+  },
+  layout: 'horizontal',
+  schema: [],
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-3',
+});
+
+/** 查看流转卡条码 */
+function handleBarcode() {
+  if (!formData.value?.id) {
+    return;
+  }
+  barcodeDetailRef.value?.openByBusiness(
+    formData.value.id,
+    BarcodeBizTypeEnum.PROCARD,
+    formData.value.code,
+  );
+}
+
+/** 提交流转卡：表单有修改时先保存，再调用提交接口 */
+async function handleSubmit() {
+  const { valid } = await formApi.validate();
+  if (!valid || !formData.value?.id) {
+    return;
+  }
+  modalApi.lock();
+  try {
+    const current = JSON.stringify(await formApi.getValues());
+    if (current !== originalSnapshot.value) {
+      const data = (await formApi.getValues()) as MesProCardApi.Card;
+      await updateCard({ ...formData.value, ...data });
+      originalSnapshot.value = current;
+    }
+    await submitCard(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 finishCard(formData.value.id);
+    message.success('完成成功');
+    await modalApi.close();
+    emit('success');
+  } finally {
+    modalApi.unlock();
+  }
+}
+
+const [Modal, modalApi] = useVbenModal({
+  // TODO @AI：检查下 onConfirm 方法的风格，是不是缺了一个 // 关闭并提示？？看看其他模块，是不是也有这个情况？
+  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 MesProCardApi.Card;
+    try {
+      if (formData.value?.id) {
+        await updateCard({ ...formData.value, ...data });
+        formData.value = { ...formData.value, ...data };
+      } else {
+        const id = await createCard(data);
+        formData.value = { ...data, id, status: MesProCardStatusEnum.PREPARE };
+        await formApi.setFieldValue('id', id);
+        await formApi.setFieldValue('status', formData.value.status);
+        formType.value = 'update';
+      }
+      originalSnapshot.value = JSON.stringify(await formApi.getValues());
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      originalSnapshot.value = '';
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<{ formType: FormType; id?: number }>();
+    formType.value = data.formType;
+    formApi.setState({ schema: useFormSchema(formType.value, formApi) });
+    modalApi.setState({ showConfirmButton: isEditable.value });
+    if (data?.id) {
+      modalApi.lock();
+      try {
+        formData.value = await getCard(data.id);
+        // 设置到 values
+        await formApi.setValues(formData.value);
+      } finally {
+        modalApi.unlock();
+      }
+    }
+    originalSnapshot.value = JSON.stringify(await formApi.getValues());
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-3/5">
+    <Form class="mx-4" />
+    <!-- 工序记录子表：非新建态展示 -->
+    <template v-if="formData?.id">
+      <Divider>工序记录</Divider>
+      <div class="mx-4">
+        <ProcessList :card-id="formData.id" :disabled="!isEditable" />
+      </div>
+    </template>
+    <template #prepend-footer>
+      <div class="flex flex-auto items-center gap-2">
+        <Popconfirm
+          v-if="canSubmit"
+          title="确认提交该流转卡？【提交后将不能修改】"
+          @confirm="handleSubmit"
+        >
+          <Button type="primary">提交</Button>
+        </Popconfirm>
+        <Popconfirm
+          v-if="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/card/modules/process-form.vue b/apps/web-antd/src/views/mes/pro/card/modules/process-form.vue
new file mode 100644
index 000000000..0711c3ed8
--- /dev/null
+++ b/apps/web-antd/src/views/mes/pro/card/modules/process-form.vue
@@ -0,0 +1,94 @@
+<script lang="ts" setup>
+import type { MesProCardProcessApi } from '#/api/mes/pro/card/process';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createCardProcess,
+  getCardProcess,
+  updateCardProcess,
+} from '#/api/mes/pro/card/process';
+import { $t } from '#/locales';
+
+import { useProcessFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<MesProCardProcessApi.CardProcess>();
+const cardId = ref<number>(); // 所属流转卡编号
+
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['工序记录'])
+    : $t('ui.actionTitle.create', ['工序记录']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-1',
+    labelWidth: 110,
+  },
+  layout: 'horizontal',
+  schema: useProcessFormSchema(),
+  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 MesProCardProcessApi.CardProcess;
+    data.cardId = cardId.value;
+    try {
+      await (formData.value?.id
+        ? updateCardProcess({ ...data, id: formData.value.id })
+        : createCardProcess(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<{ cardId: number; id?: number }>();
+    cardId.value = data.cardId;
+    if (!data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getCardProcess(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-3/5">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/mes/pro/card/modules/process-list.vue b/apps/web-antd/src/views/mes/pro/card/modules/process-list.vue
new file mode 100644
index 000000000..91191c37c
--- /dev/null
+++ b/apps/web-antd/src/views/mes/pro/card/modules/process-list.vue
@@ -0,0 +1,133 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesProCardProcessApi } from '#/api/mes/pro/card/process';
+
+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 {
+  deleteCardProcess,
+  getCardProcessPage,
+} from '#/api/mes/pro/card/process';
+import { $t } from '#/locales';
+
+import { useProcessGridColumns } from '../data';
+import ProcessForm from './process-form.vue';
+
+const props = defineProps<{
+  cardId: number;
+  disabled?: boolean;
+}>();
+
+const editable = computed(() => !props.disabled); // 是否可维护工序记录
+
+const [ProcessFormModal, processFormModalApi] = useVbenModal({
+  connectedComponent: ProcessForm,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 新增工序记录 */
+function handleCreate() {
+  processFormModalApi.setData({ cardId: props.cardId }).open();
+}
+
+/** 编辑工序记录 */
+function handleEdit(row: MesProCardProcessApi.CardProcess) {
+  processFormModalApi.setData({ cardId: props.cardId, id: row.id }).open();
+}
+
+/** 删除工序记录 */
+async function handleDelete(row: MesProCardProcessApi.CardProcess) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.processName]),
+    duration: 0,
+  });
+  try {
+    await deleteCardProcess(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.processName]));
+    handleRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useProcessGridColumns(editable.value),
+    height: 400,
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }) => {
+          if (!props.cardId) {
+            return { list: [], total: 0 };
+          }
+          return await getCardProcessPage({
+            cardId: props.cardId,
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+    },
+  } as VxeTableGridOptions<MesProCardProcessApi.CardProcess>,
+});
+</script>
+
+<template>
+  <div>
+    <ProcessFormModal @success="handleRefresh" />
+    <Grid table-title="工序记录">
+      <template v-if="editable" #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['工序记录']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.processName]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/mes/pro/card/index.vue b/apps/web-ele/src/views/mes/pro/card/index.vue
new file mode 100644
index 000000000..0bdc1b10f
--- /dev/null
+++ b/apps/web-ele/src/views/mes/pro/card/index.vue
@@ -0,0 +1,198 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesProCardApi } from '#/api/mes/pro/card';
+
+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 {
+  cancelCard,
+  deleteCard,
+  exportCard,
+  getCardPage,
+} from '#/api/mes/pro/card';
+import { $t } from '#/locales';
+import { MesProCardStatusEnum } from '#/views/mes/utils/constants';
+import { PrinterLabel } 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,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建流转卡 */
+function handleCreate() {
+  formModalApi.setData({ formType: 'create' }).open();
+}
+
+/** 查看流转卡详情 */
+function handleDetail(row: MesProCardApi.Card) {
+  formModalApi.setData({ formType: 'detail', id: row.id }).open();
+}
+
+/** 编辑流转卡 */
+function handleEdit(row: MesProCardApi.Card) {
+  formModalApi.setData({ formType: 'update', id: row.id }).open();
+}
+
+/** 完成流转卡 */
+function handleFinish(row: MesProCardApi.Card) {
+  formModalApi.setData({ formType: 'finish', id: row.id }).open();
+}
+
+/** 删除流转卡 */
+async function handleDelete(row: MesProCardApi.Card) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.code]),
+  });
+  try {
+    await deleteCard(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.code]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 取消流转卡 */
+async function handleCancel(row: MesProCardApi.Card) {
+  await cancelCard(row.id!);
+  ElMessage.success('取消成功');
+  handleRefresh();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportCard(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 getCardPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MesProCardApi.Card>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【生产】生产排产、工序流转卡"
+        url="https://doc.iocoder.cn/mes/pro/schedule-card/"
+      />
+    </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-card:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['mes:pro-card: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-card:update'],
+              ifShow: row.status === MesProCardStatusEnum.PREPARE,
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['mes:pro-card:delete'],
+              ifShow: row.status === MesProCardStatusEnum.PREPARE,
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.code]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+            {
+              label: '完成',
+              type: 'primary',
+              link: true,
+              auth: ['mes:pro-card:finish'],
+              ifShow: row.status === MesProCardStatusEnum.ISSUED,
+              onClick: handleFinish.bind(null, row),
+            },
+            {
+              label: '取消',
+              type: 'danger',
+              link: true,
+              auth: ['mes:pro-card:update'],
+              ifShow: row.status === MesProCardStatusEnum.ISSUED,
+              popConfirm: {
+                title: '确认取消该流转卡？取消后不可恢复。',
+                confirm: handleCancel.bind(null, row),
+              },
+            },
+          ]"
+        />
+        <PrinterLabel :biz-code="row.code" :biz-id="row.id" biz-type="PROCARD" />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/mes/pro/card/modules/form.vue b/apps/web-ele/src/views/mes/pro/card/modules/form.vue
new file mode 100644
index 000000000..be95bc98b
--- /dev/null
+++ b/apps/web-ele/src/views/mes/pro/card/modules/form.vue
@@ -0,0 +1,225 @@
+<script lang="ts" setup>
+import type { FormType } from '../data';
+
+import type { MesProCardApi } from '#/api/mes/pro/card';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElButton, ElDivider, ElMessage, ElPopconfirm } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createCard,
+  finishCard,
+  getCard,
+  submitCard,
+  updateCard,
+} from '#/api/mes/pro/card';
+import { $t } from '#/locales';
+import {
+  BarcodeBizTypeEnum,
+  MesProCardStatusEnum,
+} from '#/views/mes/utils/constants';
+import { BarcodeDetail } from '#/views/mes/wm/barcode/components';
+
+import { useFormSchema } from '../data';
+import ProcessList from './process-list.vue';
+
+const emit = defineEmits(['success']);
+const formType = ref<FormType>('create');
+const formData = ref<MesProCardApi.Card>();
+const originalSnapshot = ref(''); // 表单原始数据快照，用于提交时跳过未变更的保存请求
+const barcodeDetailRef = ref<InstanceType<typeof BarcodeDetail>>(); // 条码详情弹窗
+
+const isEditable = computed(() => // 是否为编辑模式（可保存）
+  ['create', 'update'].includes(formType.value),
+);
+const isFinish = computed(() => formType.value === 'finish'); // 是否为完成模式
+const canSubmit = computed(() => // 编辑态草稿可提交
+  formType.value === 'update' &&
+  formData.value?.status === MesProCardStatusEnum.PREPARE,
+);
+const getTitle = computed(() => {
+  switch (formType.value) {
+    case 'detail': {
+      return $t('ui.actionTitle.view', ['流转卡']);
+    }
+    case 'finish': {
+      return '完成流转卡';
+    }
+    case 'update': {
+      return $t('ui.actionTitle.edit', ['流转卡']);
+    }
+    default: {
+      return $t('ui.actionTitle.create', ['流转卡']);
+    }
+  }
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-1',
+    labelWidth: 110,
+  },
+  layout: 'horizontal',
+  schema: [],
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-3',
+});
+
+/** 查看流转卡条码 */
+function handleBarcode() {
+  if (!formData.value?.id) {
+    return;
+  }
+  barcodeDetailRef.value?.openByBusiness(
+    formData.value.id,
+    BarcodeBizTypeEnum.PROCARD,
+    formData.value.code,
+  );
+}
+
+/** 提交流转卡：表单有修改时先保存，再调用提交接口 */
+async function handleSubmit() {
+  const { valid } = await formApi.validate();
+  if (!valid || !formData.value?.id) {
+    return;
+  }
+  modalApi.lock();
+  try {
+    const current = JSON.stringify(await formApi.getValues());
+    if (current !== originalSnapshot.value) {
+      const data = (await formApi.getValues()) as MesProCardApi.Card;
+      await updateCard({ ...formData.value, ...data });
+      originalSnapshot.value = current;
+    }
+    await submitCard(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 finishCard(formData.value.id);
+    ElMessage.success('完成成功');
+    await modalApi.close();
+    emit('success');
+  } finally {
+    modalApi.unlock();
+  }
+}
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    if (!isEditable.value) {
+      await modalApi.close();
+      return;
+    }
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as MesProCardApi.Card;
+    try {
+      if (formData.value?.id) {
+        await updateCard({ ...formData.value, ...data });
+        formData.value = { ...formData.value, ...data };
+      } else {
+        const id = await createCard(data);
+        formData.value = { ...data, id, status: MesProCardStatusEnum.PREPARE };
+        await formApi.setFieldValue('id', id);
+        await formApi.setFieldValue('status', formData.value.status);
+        formType.value = 'update';
+      }
+      originalSnapshot.value = JSON.stringify(await formApi.getValues());
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      originalSnapshot.value = '';
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<{ formType: FormType; id?: number }>();
+    formType.value = data.formType;
+    formApi.setState({ schema: useFormSchema(formType.value, formApi) });
+    modalApi.setState({ showConfirmButton: isEditable.value });
+    if (data?.id) {
+      modalApi.lock();
+      try {
+        formData.value = await getCard(data.id);
+        // 设置到 values
+        await formApi.setValues(formData.value);
+      } finally {
+        modalApi.unlock();
+      }
+    }
+    originalSnapshot.value = JSON.stringify(await formApi.getValues());
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-3/5">
+    <Form class="mx-4" />
+    <!-- 工序记录子表：非新建态展示 -->
+    <template v-if="formData?.id">
+      <ElDivider>工序记录</ElDivider>
+      <div class="mx-4">
+        <ProcessList :card-id="formData.id" :disabled="!isEditable" />
+      </div>
+    </template>
+    <template #prepend-footer>
+      <div class="flex flex-auto items-center gap-2">
+        <ElPopconfirm
+          v-if="canSubmit"
+          title="确认提交该流转卡？【提交后将不能修改】"
+          width="280"
+          @confirm="handleSubmit"
+        >
+          <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/card/modules/process-form.vue b/apps/web-ele/src/views/mes/pro/card/modules/process-form.vue
new file mode 100644
index 000000000..cabee274d
--- /dev/null
+++ b/apps/web-ele/src/views/mes/pro/card/modules/process-form.vue
@@ -0,0 +1,94 @@
+<script lang="ts" setup>
+import type { MesProCardProcessApi } from '#/api/mes/pro/card/process';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createCardProcess,
+  getCardProcess,
+  updateCardProcess,
+} from '#/api/mes/pro/card/process';
+import { $t } from '#/locales';
+
+import { useProcessFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<MesProCardProcessApi.CardProcess>();
+const cardId = ref<number>(); // 所属流转卡编号
+
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['工序记录'])
+    : $t('ui.actionTitle.create', ['工序记录']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-1',
+    labelWidth: 110,
+  },
+  layout: 'horizontal',
+  schema: useProcessFormSchema(),
+  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 MesProCardProcessApi.CardProcess;
+    data.cardId = cardId.value;
+    try {
+      await (formData.value?.id
+        ? updateCardProcess({ ...data, id: formData.value.id })
+        : createCardProcess(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<{ cardId: number; id?: number }>();
+    cardId.value = data.cardId;
+    if (!data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getCardProcess(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-3/5">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mes/pro/card/modules/process-list.vue b/apps/web-ele/src/views/mes/pro/card/modules/process-list.vue
new file mode 100644
index 000000000..0cc8e3ad4
--- /dev/null
+++ b/apps/web-ele/src/views/mes/pro/card/modules/process-list.vue
@@ -0,0 +1,133 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesProCardProcessApi } from '#/api/mes/pro/card/process';
+
+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 {
+  deleteCardProcess,
+  getCardProcessPage,
+} from '#/api/mes/pro/card/process';
+import { $t } from '#/locales';
+
+import { useProcessGridColumns } from '../data';
+import ProcessForm from './process-form.vue';
+
+const props = defineProps<{
+  cardId: number;
+  disabled?: boolean;
+}>();
+
+const editable = computed(() => !props.disabled); // 是否可维护工序记录
+
+const [ProcessFormModal, processFormModalApi] = useVbenModal({
+  connectedComponent: ProcessForm,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 新增工序记录 */
+function handleCreate() {
+  processFormModalApi.setData({ cardId: props.cardId }).open();
+}
+
+/** 编辑工序记录 */
+function handleEdit(row: MesProCardProcessApi.CardProcess) {
+  processFormModalApi.setData({ cardId: props.cardId, id: row.id }).open();
+}
+
+/** 删除工序记录 */
+async function handleDelete(row: MesProCardProcessApi.CardProcess) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.processName]),
+  });
+  try {
+    await deleteCardProcess(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.processName]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useProcessGridColumns(editable.value),
+    height: 400,
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }) => {
+          if (!props.cardId) {
+            return { list: [], total: 0 };
+          }
+          return await getCardProcessPage({
+            cardId: props.cardId,
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+    },
+  } as VxeTableGridOptions<MesProCardProcessApi.CardProcess>,
+});
+</script>
+
+<template>
+  <div>
+    <ProcessFormModal @success="handleRefresh" />
+    <Grid table-title="工序记录">
+      <template v-if="editable" #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['工序记录']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.processName]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </div>
+</template>