Merge remote-tracking branch 'origin/dev_pro2.0' into dev_pro2.0

gaoluyang

2026-07-10 701fdf3e7283e892324bf9eb093e1675d03ea211

Merge remote-tracking branch 'origin/dev_pro2.0' into dev_pro2.0

 src/views/itemreceipt/modules/line-list.vue

@@ -18,7 +18,7 @@
  getItemReceiptLinePage,
} from '#/api/mes/wm/itemreceipt/line';
import { $t } from '#/locales';
import { PrinterLabel } from '#/views/mes/wm/barcode/components';
import { PrinterLabel } from '#/views/wls/barcode/components';

import { useLineGridColumns } from '../data';
import DetailForm from './detail-form.vue';

 src/views/mes/dv/machinery/modules/form.vue

@@ -1,144 +1,144 @@
<script lang="ts" setup>
import type { FormType } from '../data';
  import type { FormType } from "../data";

import type { MesDvMachineryApi } from '#/api/mes/dv/machinery';
  import type { MesDvMachineryApi } from "#/api/mes/dv/machinery";

import { computed, ref } from 'vue';
  import { computed, ref } from "vue";

import { useVbenModal } from '../../../../../packages/effects/common-ui/src';
import { BarcodeBizTypeEnum } from '../../../../../packages/constants/src';
  import { useVbenModal } from "../../../../../packages/effects/common-ui/src";
  import { BarcodeBizTypeEnum } from "../../../../../packages/constants/src";

import { Button, message, Tabs } from 'ant-design-vue';
  import { Button, message, Tabs } from "ant-design-vue";

import { useVbenForm } from '#/adapter/form';
import {
  createMachinery,
  getMachinery,
  updateMachinery,
} from '#/api/mes/dv/machinery';
import { $t } from '#/locales';
import { BarcodeDetail } from '#/views/mes/wm/barcode/components';
  import { useVbenForm } from "#/adapter/form";
  import {
    createMachinery,
    getMachinery,
    updateMachinery,
  } from "#/api/mes/dv/machinery";
  import { $t } from "#/locales";
  import { BarcodeDetail } from "#/views/wls/barcode/components";

import { useFormSchema } from '../data';
import CheckRecordList from './check-record-list.vue';
import MaintenRecordList from './mainten-record-list.vue';
import RepairList from './repair-list.vue';
  import { useFormSchema } from "../data";
  import CheckRecordList from "./check-record-list.vue";
  import MaintenRecordList from "./mainten-record-list.vue";
  import RepairList from "./repair-list.vue";

const emit = defineEmits(['success']);
const formType = ref<FormType>('create'); // 表单模式
const subTabsName = ref('check'); // 当前资源页签
const formData = ref<MesDvMachineryApi.Machinery>();
const barcodeDetailRef = ref<InstanceType<typeof BarcodeDetail>>(); // 条码详情弹窗
const isDetail = computed(() => formType.value === 'detail'); // 是否查看模式
const getTitle = computed(() => {
  if (formType.value === 'detail') {
    return '查看设备';
  }
  return formType.value === 'update' ? '修改设备' : '新增设备';
});
  const emit = defineEmits(["success"]);
  const formType = ref<FormType>("create"); // 表单模式
  const subTabsName = ref("check"); // 当前资源页签
  const formData = ref<MesDvMachineryApi.Machinery>();
  const barcodeDetailRef = ref<InstanceType<typeof BarcodeDetail>>(); // 条码详情弹窗
  const isDetail = computed(() => formType.value === "detail"); // 是否查看模式
  const getTitle = computed(() => {
    if (formType.value === "detail") {
      return "查看设备";
    }
    return formType.value === "update" ? "修改设备" : "新增设备";
  });

const [Form, formApi] = useVbenForm({
  commonConfig: {
    componentProps: {
      class: 'w-full',
  const [Form, formApi] = useVbenForm({
    commonConfig: {
      componentProps: {
        class: "w-full",
      },
      formItemClass: "col-span-1",
      labelWidth: 110,
    },
    formItemClass: 'col-span-1',
    labelWidth: 110,
  },
  wrapperClass: 'grid-cols-3',
  layout: 'horizontal',
  schema: [],
  showDefaultActions: false,
});
    wrapperClass: "grid-cols-3",
    layout: "horizontal",
    schema: [],
    showDefaultActions: false,
  });

/** 查看设备条码 */
function handleBarcode() {
  if (!formData.value?.id) {
    return;
  /** 查看设备条码 */
  function handleBarcode() {
    if (!formData.value?.id) {
      return;
    }
    barcodeDetailRef.value?.openByBusiness(
      formData.value.id,
      BarcodeBizTypeEnum.MACHINERY,
      formData.value.code,
      formData.value.name
    );
  }
  barcodeDetailRef.value?.openByBusiness(
    formData.value.id,
    BarcodeBizTypeEnum.MACHINERY,
    formData.value.code,
    formData.value.name,
  );
}

const [Modal, modalApi] = useVbenModal({
  async onConfirm() {
    if (isDetail.value) {
      await modalApi.close();
      return;
    }
    const { valid } = await formApi.validate();
    if (!valid) {
      return;
    }
    modalApi.lock();
    // 提交表单
    const data = (await formApi.getValues()) as MesDvMachineryApi.Machinery;
    try {
      await (data.id ? updateMachinery(data) : createMachinery(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;
    }
    subTabsName.value = 'check';
    // 加载数据
    const data = modalApi.getData<{ formType: FormType; id?: number }>();
    formType.value = data.formType;
    formApi.setState({ schema: useFormSchema(formType.value, formApi) });
    formApi.setDisabled(formType.value === 'detail');
    modalApi.setState({ showConfirmButton: formType.value !== 'detail' });
    if (!data?.id) {
      return;
    }
    modalApi.lock();
    try {
      formData.value = await getMachinery(data.id);
      // 设置到 values
      await formApi.setValues(formData.value);
    } finally {
      modalApi.unlock();
    }
  },
});
  const [Modal, modalApi] = useVbenModal({
    async onConfirm() {
      if (isDetail.value) {
        await modalApi.close();
        return;
      }
      const { valid } = await formApi.validate();
      if (!valid) {
        return;
      }
      modalApi.lock();
      // 提交表单
      const data = (await formApi.getValues()) as MesDvMachineryApi.Machinery;
      try {
        await (data.id ? updateMachinery(data) : createMachinery(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;
      }
      subTabsName.value = "check";
      // 加载数据
      const data = modalApi.getData<{ formType: FormType; id?: number }>();
      formType.value = data.formType;
      formApi.setState({ schema: useFormSchema(formType.value, formApi) });
      formApi.setDisabled(formType.value === "detail");
      modalApi.setState({ showConfirmButton: formType.value !== "detail" });
      if (!data?.id) {
        return;
      }
      modalApi.lock();
      try {
        formData.value = await getMachinery(data.id);
        // 设置到 values
        await formApi.setValues(formData.value);
      } finally {
        modalApi.unlock();
      }
    },
  });
</script>

<template>
  <Modal :title="getTitle" class="w-4/5">
  <Modal :title="getTitle"
         class="w-4/5">
    <Form class="mx-4" />
    <Tabs
      v-if="formType !== 'create' && formData?.id"
      v-model:active-key="subTabsName"
      class="mx-4 mt-4"
    >
      <Tabs.TabPane key="check" tab="点检记录">
    <Tabs v-if="formType !== 'create' && formData?.id"
          v-model:active-key="subTabsName"
          class="mx-4 mt-4">
      <Tabs.TabPane key="check"
                    tab="点检记录">
        <CheckRecordList :machinery-id="formData.id" />
      </Tabs.TabPane>
      <Tabs.TabPane key="mainten" tab="保养记录">
      <Tabs.TabPane key="mainten"
                    tab="保养记录">
        <MaintenRecordList :machinery-id="formData.id" />
      </Tabs.TabPane>
      <Tabs.TabPane key="repair" tab="维修记录">
      <Tabs.TabPane key="repair"
                    tab="维修记录">
        <RepairList :machinery-id="formData.id" />
      </Tabs.TabPane>
    </Tabs>
    <template #prepend-footer>
      <div class="flex flex-auto items-center">
        <Button
          v-if="isDetail && formData?.id"
          type="primary"
          @click="handleBarcode"
        >
        <Button v-if="isDetail && formData?.id"
                type="primary"
                @click="handleBarcode">
          查看条码
        </Button>
      </div>

 src/views/mes/md/item/index.vue

@@ -1,149 +1,156 @@
<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { MesMdItemApi } from '#/api/mes/md/item';
import type { MesMdItemTypeApi } from '#/api/mes/md/item/type';
  import type { VxeTableGridOptions } from "#/adapter/vxe-table";
  import type { MesMdItemApi } from "#/api/mes/md/item";
  import type { MesMdItemTypeApi } from "#/api/mes/md/item/type";

import { ref } from 'vue';
  import { ref } from "vue";

import { confirm, Page, useVbenModal } from '../../../../packages/effects/common-ui/src';
import { DICT_TYPE } from '../../../../packages/constants/src';
import { getDictLabel } from '../../../../packages/effects/hooks/src';
import { downloadFileFromBlobPart } from '../../../../packages/utils/src';
  import {
    confirm,
    Page,
    useVbenModal,
  } from "../../../../packages/effects/common-ui/src";
  import { DICT_TYPE } from "../../../../packages/constants/src";
  import { getDictLabel } from "../../../../packages/effects/hooks/src";
  import { downloadFileFromBlobPart } from "../../../../packages/utils/src";

import { Button, Card, message } from 'ant-design-vue';
  import { Button, Card, message } from "ant-design-vue";

import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import {
  deleteItem,
  exportItem,
  getItemPage,
  updateItemStatus,
} from '#/api/mes/md/item';
import { $t } from '#/locales';
import { MdItemTypeTree } from '#/views/mes/md/item/type/components';
import { PrinterLabel } from '#/views/mes/wm/barcode/components';
  import { ACTION_ICON, TableAction, useVbenVxeGrid } from "#/adapter/vxe-table";
  import {
    deleteItem,
    exportItem,
    getItemPage,
    updateItemStatus,
  } from "#/api/mes/md/item";
  import { $t } from "#/locales";
  import { MdItemTypeTree } from "#/views/mes/md/item/type/components";
  import { PrinterLabel } from "#/views/wls/barcode/components";

import { useGridColumns, useGridFormSchema } from './data';
import Form from './modules/form.vue';
import ImportForm from './modules/import-form.vue';
  import { useGridColumns, useGridFormSchema } from "./data";
  import Form from "./modules/form.vue";
  import ImportForm from "./modules/import-form.vue";

const selectedItemTypeId = ref<number>(); // 当前选中的物料分类编号
  const selectedItemTypeId = ref<number>(); // 当前选中的物料分类编号

const [FormModal, formModalApi] = useVbenModal({
  connectedComponent: Form,
  destroyOnClose: true,
});

const [ImportModal, importModalApi] = useVbenModal({
  connectedComponent: ImportForm,
  destroyOnClose: true,
});

/** 刷新表格 */
function handleRefresh() {
  gridApi.query();
}

/** 创建物料 */
function handleCreate() {
  formModalApi.setData({ formType: 'create' }).open();
}

/** 查看物料 */
function handleDetail(row: MesMdItemApi.Item) {
  formModalApi.setData({ id: row.id, formType: 'detail' }).open();
}

/** 编辑物料 */
function handleEdit(row: MesMdItemApi.Item) {
  formModalApi.setData({ id: row.id, formType: 'update' }).open();
}

/** 删除物料 */
async function handleDelete(row: MesMdItemApi.Item) {
  const hideLoading = message.loading({
    content: $t('ui.actionMessage.deleting', [row.name]),
    duration: 0,
  const [FormModal, formModalApi] = useVbenModal({
    connectedComponent: Form,
    destroyOnClose: true,
  });
  try {
    await deleteItem(row.id!);
    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));

  const [ImportModal, importModalApi] = useVbenModal({
    connectedComponent: ImportForm,
    destroyOnClose: true,
  });

  /** 刷新表格 */
  function handleRefresh() {
    gridApi.query();
  }

  /** 创建物料 */
  function handleCreate() {
    formModalApi.setData({ formType: "create" }).open();
  }

  /** 查看物料 */
  function handleDetail(row: MesMdItemApi.Item) {
    formModalApi.setData({ id: row.id, formType: "detail" }).open();
  }

  /** 编辑物料 */
  function handleEdit(row: MesMdItemApi.Item) {
    formModalApi.setData({ id: row.id, formType: "update" }).open();
  }

  /** 删除物料 */
  async function handleDelete(row: MesMdItemApi.Item) {
    const hideLoading = message.loading({
      content: $t("ui.actionMessage.deleting", [row.name]),
      duration: 0,
    });
    try {
      await deleteItem(row.id!);
      message.success($t("ui.actionMessage.deleteSuccess", [row.name]));
      handleRefresh();
    } finally {
      hideLoading();
    }
  }

  /** 导出物料 */
  async function handleExport() {
    const data = await exportItem(await gridApi.formApi.getValues());
    downloadFileFromBlobPart({ fileName: "物料产品.xls", source: data });
  }

  /** 导入物料 */
  function handleImport() {
    importModalApi.open();
  }

  /** 分类树点击 */
  function handleTypeNodeClick(row: MesMdItemTypeApi.ItemType | undefined) {
    selectedItemTypeId.value = row?.id;
    handleRefresh();
  } finally {
    hideLoading();
  }
}

/** 导出物料 */
async function handleExport() {
  const data = await exportItem(await gridApi.formApi.getValues());
  downloadFileFromBlobPart({ fileName: '物料产品.xls', source: data });
}

/** 导入物料 */
function handleImport() {
  importModalApi.open();
}

/** 分类树点击 */
function handleTypeNodeClick(row: MesMdItemTypeApi.ItemType | undefined) {
  selectedItemTypeId.value = row?.id;
  handleRefresh();
}

/** 更新物料状态 */
async function handleStatusChange(
  newStatus: number,
  row: MesMdItemApi.Item,
): Promise<boolean | undefined> {
  try {
    await confirm(
      `确认要将"${row.name}"物料切换为【${getDictLabel(DICT_TYPE.COMMON_STATUS, newStatus)}】吗？`,
    );
  } catch {
    return false;
  /** 更新物料状态 */
  async function handleStatusChange(
    newStatus: number,
    row: MesMdItemApi.Item
  ): Promise<boolean | undefined> {
    try {
      await confirm(
        `确认要将"${row.name}"物料切换为【${getDictLabel(
          DICT_TYPE.COMMON_STATUS,
          newStatus
        )}】吗？`
      );
    } catch {
      return false;
    }
    await updateItemStatus(row.id!, newStatus);
    message.success($t("ui.actionMessage.operationSuccess"));
    return true;
  }
  await updateItemStatus(row.id!, newStatus);
  message.success($t('ui.actionMessage.operationSuccess'));
  return true;
}

const [Grid, gridApi] = useVbenVxeGrid({
  formOptions: {
    schema: useGridFormSchema(),
  },
  gridOptions: {
    columns: useGridColumns(handleStatusChange),
    height: 'auto',
    keepSource: true,
    proxyConfig: {
      ajax: {
        query: async ({ page }, formValues) => {
          return await getItemPage({
            pageNo: page.currentPage,
            pageSize: page.pageSize,
            ...formValues,
            itemTypeId: selectedItemTypeId.value,
          });
  const [Grid, gridApi] = useVbenVxeGrid({
    formOptions: {
      schema: useGridFormSchema(),
    },
    gridOptions: {
      columns: useGridColumns(handleStatusChange),
      height: "auto",
      keepSource: true,
      proxyConfig: {
        ajax: {
          query: async ({ page }, formValues) => {
            return await getItemPage({
              pageNo: page.currentPage,
              pageSize: page.pageSize,
              ...formValues,
              itemTypeId: selectedItemTypeId.value,
            });
          },
        },
      },
    },
    rowConfig: {
      keyField: 'id',
      isHover: true,
    },
    toolbarConfig: {
      refresh: true,
      search: true,
    },
  } as VxeTableGridOptions<MesMdItemApi.Item>,
});
      rowConfig: {
        keyField: "id",
        isHover: true,
      },
      toolbarConfig: {
        refresh: true,
        search: true,
      },
    } as VxeTableGridOptions<MesMdItemApi.Item>,
  });
</script>

<template>
  <Page auto-content-height><FormModal @success="handleRefresh" />
  <Page auto-content-height>
    <FormModal @success="handleRefresh" />
    <ImportModal @success="handleRefresh" />

    <div class="flex h-full w-full">
      <Card class="mr-4 h-full w-1/6">
        <MdItemTypeTree @node-click="handleTypeNodeClick" />
@@ -151,8 +158,7 @@
      <div class="w-5/6">
        <Grid table-title="物料产品列表">
          <template #toolbar-tools>
            <TableAction
              :actions="[
            <TableAction :actions="[
                {
                  label: $t('ui.actionTitle.create', ['物料']),
                  type: 'primary',
@@ -174,18 +180,17 @@
                  auth: ['mes:md-item:export'],
                  onClick: handleExport,
                },
              ]"
            />
              ]" />
          </template>
          <template #code="{ row }">
            <Button type="link" @click="handleDetail(row)">
            <Button type="link"
                    @click="handleDetail(row)">
              {{ row.code }}
            </Button>
          </template>
          <template #actions="{ row }">
            <div class="flex items-center justify-center">
              <TableAction
                :actions="[
              <TableAction :actions="[
                  {
                    label: $t('common.edit'),
                    type: 'link',
@@ -204,13 +209,10 @@
                      confirm: handleDelete.bind(null, row),
                    },
                  },
                ]"
              />
              <PrinterLabel
                :biz-id="row.id"
                :biz-code="row.code"
                biz-type="ITEM"
              />
                ]" />
              <PrinterLabel :biz-id="row.id"
                            :biz-code="row.code"
                            biz-type="ITEM" />
            </div>
          </template>
        </Grid>

 src/views/mes/md/item/modules/form.vue

@@ -13,7 +13,7 @@
import { useVbenForm } from '#/adapter/form';
import { createItem, getItem, updateItem } from '#/api/mes/md/item';
import { $t } from '#/locales';
import { BarcodeDetail } from '#/views/mes/wm/barcode/components';
import { BarcodeDetail } from '#/views/wls/barcode/components';

import { useFormSchema } from '../data';
import ItemBatchConfigForm from './item-batch-config-form.vue';

 src/views/mes/md/workstation/index.vue

@@ -17,7 +17,7 @@
  getWorkstationPage,
} from '#/api/mes/md/workstation';
import { $t } from '#/locales';
import { BarcodeDetail } from '#/views/mes/wm/barcode/components';
import { BarcodeDetail } from '#/views/wls/barcode/components';

import { useGridColumns, useGridFormSchema } from './data';
import Form from './modules/form.vue';

 src/views/mes/md/workstation/modules/form.vue

@@ -1,151 +1,154 @@
<script lang="ts" setup>
import type { FormType } from '../data';
  import type { FormType } from "../data";

import type { MesMdWorkstationApi } from '#/api/mes/md/workstation';
  import type { MesMdWorkstationApi } from "#/api/mes/md/workstation";

import { computed, ref } from 'vue';
  import { computed, ref } from "vue";

import { useVbenModal } from '../../../../../packages/effects/common-ui/src';
import { BarcodeBizTypeEnum } from '../../../../../packages/constants/src';
  import { useVbenModal } from "../../../../../packages/effects/common-ui/src";
  import { BarcodeBizTypeEnum } from "../../../../../packages/constants/src";

import { Button, message, Tabs } from 'ant-design-vue';
  import { Button, message, Tabs } from "ant-design-vue";

import { useVbenForm } from '#/adapter/form';
import {
  createWorkstation,
  getWorkstation,
  updateWorkstation,
} from '#/api/mes/md/workstation';
import { $t } from '#/locales';
import { BarcodeDetail } from '#/views/mes/wm/barcode/components';
  import { useVbenForm } from "#/adapter/form";
  import {
    createWorkstation,
    getWorkstation,
    updateWorkstation,
  } from "#/api/mes/md/workstation";
  import { $t } from "#/locales";
  import { BarcodeDetail } from "#/views/wls/barcode/components";

import { useFormSchema } from '../data';
import MachineList from './machine-list.vue';
import ToolList from './tool-list.vue';
import WorkerList from './worker-list.vue';
  import { useFormSchema } from "../data";
  import MachineList from "./machine-list.vue";
  import ToolList from "./tool-list.vue";
  import WorkerList from "./worker-list.vue";

const emit = defineEmits(['success']);
const formType = ref<FormType>('create'); // 表单模式
const subTabsName = ref('machine'); // 当前资源页签
const formData = ref<MesMdWorkstationApi.Workstation>();
const barcodeDetailRef = ref<InstanceType<typeof BarcodeDetail>>(); // 条码详情弹窗
  const emit = defineEmits(["success"]);
  const formType = ref<FormType>("create"); // 表单模式
  const subTabsName = ref("machine"); // 当前资源页签
  const formData = ref<MesMdWorkstationApi.Workstation>();
  const barcodeDetailRef = ref<InstanceType<typeof BarcodeDetail>>(); // 条码详情弹窗

const isDetail = computed(() => formType.value === 'detail'); // 是否查看模式
const getTitle = computed(() => {
  if (formType.value === 'detail') {
    return '查看工作站';
  }
  return formType.value === 'update' ? '修改工作站' : '新增工作站';
});
  const isDetail = computed(() => formType.value === "detail"); // 是否查看模式
  const getTitle = computed(() => {
    if (formType.value === "detail") {
      return "查看工作站";
    }
    return formType.value === "update" ? "修改工作站" : "新增工作站";
  });

const [Form, formApi] = useVbenForm({
  commonConfig: {
    componentProps: {
      class: 'w-full',
  const [Form, formApi] = useVbenForm({
    commonConfig: {
      componentProps: {
        class: "w-full",
      },
      formItemClass: "col-span-1",
      labelWidth: 110,
    },
    formItemClass: 'col-span-1',
    labelWidth: 110,
  },
  wrapperClass: 'grid-cols-3',
  layout: 'horizontal',
  schema: [],
  showDefaultActions: false,
});
    wrapperClass: "grid-cols-3",
    layout: "horizontal",
    schema: [],
    showDefaultActions: false,
  });

/** 查看工作站条码 */
function handleBarcode() {
  if (!formData.value?.id) {
    return;
  /** 查看工作站条码 */
  function handleBarcode() {
    if (!formData.value?.id) {
      return;
    }
    barcodeDetailRef.value?.openByBusiness(
      formData.value.id,
      BarcodeBizTypeEnum.WORKSTATION,
      formData.value.code,
      formData.value.name
    );
  }
  barcodeDetailRef.value?.openByBusiness(
    formData.value.id,
    BarcodeBizTypeEnum.WORKSTATION,
    formData.value.code,
    formData.value.name,
  );
}

const [Modal, modalApi] = useVbenModal({
  async onConfirm() {
    if (isDetail.value) {
      await modalApi.close();
      return;
    }
    const { valid } = await formApi.validate();
    if (!valid) {
      return;
    }
    modalApi.lock();
    // 提交表单
    const data = (await formApi.getValues()) as MesMdWorkstationApi.Workstation;
    try {
      if (formType.value === 'create') {
        const id = await createWorkstation(data);
        formData.value = { ...data, id };
        await formApi.setFieldValue('id', id);
        formType.value = 'update';
      } else {
        await updateWorkstation(data);
        formData.value = { ...formData.value, ...data };
  const [Modal, modalApi] = useVbenModal({
    async onConfirm() {
      if (isDetail.value) {
        await modalApi.close();
        return;
      }
      emit('success');
      message.success($t('ui.actionMessage.operationSuccess'));
    } finally {
      modalApi.unlock();
    }
  },
  async onOpenChange(isOpen: boolean) {
    if (!isOpen) {
      formData.value = undefined;
      return;
    }
    subTabsName.value = 'machine';
    // 加载数据
    const data = modalApi.getData<{ formType: FormType; id?: number }>();
    formType.value = data.formType;
    formApi.setState({ schema: useFormSchema(data.formType, formApi) });
    formApi.setDisabled(formType.value === 'detail');
    modalApi.setState({ showConfirmButton: formType.value !== 'detail' });
    if (!data?.id) {
      return;
    }
    modalApi.lock();
    try {
      formData.value = await getWorkstation(data.id);
      // 设置到 values
      await formApi.setValues(formData.value);
    } finally {
      modalApi.unlock();
    }
  },
});
      const { valid } = await formApi.validate();
      if (!valid) {
        return;
      }
      modalApi.lock();
      // 提交表单
      const data = (await formApi.getValues()) as MesMdWorkstationApi.Workstation;
      try {
        if (formType.value === "create") {
          const id = await createWorkstation(data);
          formData.value = { ...data, id };
          await formApi.setFieldValue("id", id);
          formType.value = "update";
        } else {
          await updateWorkstation(data);
          formData.value = { ...formData.value, ...data };
        }
        emit("success");
        message.success($t("ui.actionMessage.operationSuccess"));
      } finally {
        modalApi.unlock();
      }
    },
    async onOpenChange(isOpen: boolean) {
      if (!isOpen) {
        formData.value = undefined;
        return;
      }
      subTabsName.value = "machine";
      // 加载数据
      const data = modalApi.getData<{ formType: FormType; id?: number }>();
      formType.value = data.formType;
      formApi.setState({ schema: useFormSchema(data.formType, formApi) });
      formApi.setDisabled(formType.value === "detail");
      modalApi.setState({ showConfirmButton: formType.value !== "detail" });
      if (!data?.id) {
        return;
      }
      modalApi.lock();
      try {
        formData.value = await getWorkstation(data.id);
        // 设置到 values
        await formApi.setValues(formData.value);
      } finally {
        modalApi.unlock();
      }
    },
  });
</script>

<template>
  <Modal :title="getTitle" class="w-4/5">
  <Modal :title="getTitle"
         class="w-4/5">
    <Form class="mx-4" />
    <Tabs
      v-if="formType !== 'create' && formData?.id"
      v-model:active-key="subTabsName"
      class="mx-4 mt-4"
    >
      <Tabs.TabPane key="machine" tab="设备资源">
        <MachineList :form-type="formType" :workstation-id="formData.id" />
    <Tabs v-if="formType !== 'create' && formData?.id"
          v-model:active-key="subTabsName"
          class="mx-4 mt-4">
      <Tabs.TabPane key="machine"
                    tab="设备资源">
        <MachineList :form-type="formType"
                     :workstation-id="formData.id" />
      </Tabs.TabPane>
      <Tabs.TabPane key="tool" tab="工装夹具">
        <ToolList :form-type="formType" :workstation-id="formData.id" />
      <Tabs.TabPane key="tool"
                    tab="工装夹具">
        <ToolList :form-type="formType"
                  :workstation-id="formData.id" />
      </Tabs.TabPane>
      <Tabs.TabPane key="worker" tab="人力资源">
        <WorkerList :form-type="formType" :workstation-id="formData.id" />
      <Tabs.TabPane key="worker"
                    tab="人力资源">
        <WorkerList :form-type="formType"
                    :workstation-id="formData.id" />
      </Tabs.TabPane>
    </Tabs>
    <template #prepend-footer>
      <div class="flex flex-auto items-center">
        <Button
          v-if="isDetail && formData?.id"
          type="primary"
          @click="handleBarcode"
        >
        <Button v-if="isDetail && formData?.id"
                type="primary"
                @click="handleBarcode">
          查看条码
        </Button>
      </div>

 src/views/mes/md/workstation/workshop/modules/form.vue

@@ -1,119 +1,121 @@
<script lang="ts" setup>
import type { FormType } from '../data';
  import type { FormType } from "../data";

import type { MesMdWorkshopApi } from '#/api/mes/md/workstation/workshop';
  import type { MesMdWorkshopApi } from "#/api/mes/md/workstation/workshop";

import { computed, ref } from 'vue';
  import { computed, ref } from "vue";

import { useVbenModal } from '../../../../../../packages/effects/common-ui/src';
import { BarcodeBizTypeEnum } from '../../../../../../packages/constants/src';
  import { useVbenModal } from "../../../../../../packages/effects/common-ui/src";
  import { BarcodeBizTypeEnum } from "../../../../../../packages/constants/src";

import { Button, message } from 'ant-design-vue';
  import { Button, message } from "ant-design-vue";

import { useVbenForm } from '#/adapter/form';
import {
  createWorkshop,
  getWorkshop,
  updateWorkshop,
} from '#/api/mes/md/workstation/workshop';
import { $t } from '#/locales';
import { BarcodeDetail } from '#/views/mes/wm/barcode/components';
  import { useVbenForm } from "#/adapter/form";
  import {
    createWorkshop,
    getWorkshop,
    updateWorkshop,
  } from "#/api/mes/md/workstation/workshop";
  import { $t } from "#/locales";
  import { BarcodeDetail } from "#/views/wls/barcode/components";

import { useFormSchema } from '../data';
  import { useFormSchema } from "../data";

const emit = defineEmits(['success']);
const formType = ref<FormType>('create'); // 表单模式
const formData = ref<MesMdWorkshopApi.Workshop>();
const barcodeDetailRef = ref<InstanceType<typeof BarcodeDetail>>(); // 条码详情弹窗
  const emit = defineEmits(["success"]);
  const formType = ref<FormType>("create"); // 表单模式
  const formData = ref<MesMdWorkshopApi.Workshop>();
  const barcodeDetailRef = ref<InstanceType<typeof BarcodeDetail>>(); // 条码详情弹窗

const isDetail = computed(() => formType.value === 'detail'); // 是否查看模式
const getTitle = computed(() => {
  if (formType.value === 'detail') {
    return '查看车间';
  }
  return formType.value === 'update' ? '修改车间' : '新增车间';
});
  const isDetail = computed(() => formType.value === "detail"); // 是否查看模式
  const getTitle = computed(() => {
    if (formType.value === "detail") {
      return "查看车间";
    }
    return formType.value === "update" ? "修改车间" : "新增车间";
  });

const [Form, formApi] = useVbenForm({
  commonConfig: {
    componentProps: {
      class: 'w-full',
  const [Form, formApi] = useVbenForm({
    commonConfig: {
      componentProps: {
        class: "w-full",
      },
      formItemClass: "col-span-1",
      labelWidth: 100,
    },
    formItemClass: 'col-span-1',
    labelWidth: 100,
  },
  wrapperClass: 'grid-cols-2',
  layout: 'horizontal',
  schema: [],
  showDefaultActions: false,
});
    wrapperClass: "grid-cols-2",
    layout: "horizontal",
    schema: [],
    showDefaultActions: false,
  });

/** 查看车间条码 */
function handleBarcode() {
  if (!formData.value?.id) {
    return;
  /** 查看车间条码 */
  function handleBarcode() {
    if (!formData.value?.id) {
      return;
    }
    barcodeDetailRef.value?.openByBusiness(
      formData.value.id,
      BarcodeBizTypeEnum.WORKSHOP,
      formData.value.code,
      formData.value.name
    );
  }
  barcodeDetailRef.value?.openByBusiness(
    formData.value.id,
    BarcodeBizTypeEnum.WORKSHOP,
    formData.value.code,
    formData.value.name,
  );
}

const [Modal, modalApi] = useVbenModal({
  async onConfirm() {
    if (isDetail.value) {
      await modalApi.close();
      return;
    }
    const { valid } = await formApi.validate();
    if (!valid) {
      return;
    }
    modalApi.lock();
    // 提交表单
    const data = (await formApi.getValues()) as MesMdWorkshopApi.Workshop;
    try {
      await (formData.value?.id ? updateWorkshop(data) : createWorkshop(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<{ formType: FormType; id?: number }>();
    formType.value = data.formType;
    formApi.setState({ schema: useFormSchema(data.formType, formApi) });
    formApi.setDisabled(formType.value === 'detail');
    modalApi.setState({ showConfirmButton: formType.value !== 'detail' });
    if (!data?.id) {
      return;
    }
    modalApi.lock();
    try {
      formData.value = await getWorkshop(data.id);
      // 设置到 values
      await formApi.setValues(formData.value);
    } finally {
      modalApi.unlock();
    }
  },
});
  const [Modal, modalApi] = useVbenModal({
    async onConfirm() {
      if (isDetail.value) {
        await modalApi.close();
        return;
      }
      const { valid } = await formApi.validate();
      if (!valid) {
        return;
      }
      modalApi.lock();
      // 提交表单
      const data = (await formApi.getValues()) as MesMdWorkshopApi.Workshop;
      try {
        await (formData.value?.id ? updateWorkshop(data) : createWorkshop(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<{ formType: FormType; id?: number }>();
      formType.value = data.formType;
      formApi.setState({ schema: useFormSchema(data.formType, formApi) });
      formApi.setDisabled(formType.value === "detail");
      modalApi.setState({ showConfirmButton: formType.value !== "detail" });
      if (!data?.id) {
        return;
      }
      modalApi.lock();
      try {
        formData.value = await getWorkshop(data.id);
        // 设置到 values
        await formApi.setValues(formData.value);
      } finally {
        modalApi.unlock();
      }
    },
  });
</script>

<template>
  <Modal :title="getTitle" class="w-1/2">
  <Modal :title="getTitle"
         class="w-1/2">
    <Form class="mx-4" />
    <template v-if="isDetail && formData?.id" #prepend-footer>
    <template v-if="isDetail && formData?.id"
              #prepend-footer>
      <div class="flex flex-auto items-center">
        <Button @click="handleBarcode">查看条码</Button>
      </div>

 src/views/mes/pro/card/index.vue

@@ -16,7 +16,7 @@
  getCardPage,
} from '#/api/mes/pro/card';
import { $t } from '#/locales';
import { PrinterLabel } from '#/views/mes/wm/barcode/components';
import { PrinterLabel } from '#/views/wls/barcode/components';

import { useGridColumns, useGridFormSchema } from './data';
import Form from './modules/form.vue';

 src/views/mes/pro/card/modules/form.vue

@@ -19,7 +19,7 @@
  updateCard,
} from '#/api/mes/pro/card';
import { $t } from '#/locales';
import { BarcodeDetail } from '#/views/mes/wm/barcode/components';
import { BarcodeDetail } from '#/views/wls/barcode/components';

import { useFormSchema } from '../data';
import ProcessList from './process-list.vue';

 src/views/mes/pro/workorder/index.vue

@@ -1,152 +1,151 @@
<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { MesProWorkOrderApi } from '#/api/mes/pro/workorder';
<script lang="ts" setup>
  import type { VxeTableGridOptions } from "#/adapter/vxe-table";
  import type { MesProWorkOrderApi } from "#/api/mes/pro/workorder";

import { ref } from 'vue';
  import { ref } from "vue";

import { Page, useVbenModal } from '../../../../packages/effects/common-ui/src';
import {
  BarcodeBizTypeEnum,
  MesProWorkOrderStatusEnum,
  MesProWorkOrderTypeEnum,
} from '../../../../packages/constants/src';
import { downloadFileFromBlobPart } from '../../../../packages/utils/src';
  import { Page, useVbenModal } from "../../../../packages/effects/common-ui/src";
  import {
    BarcodeBizTypeEnum,
    MesProWorkOrderStatusEnum,
    MesProWorkOrderTypeEnum,
  } from "../../../../packages/constants/src";
  import { downloadFileFromBlobPart } from "../../../../packages/utils/src";

import { Button, message } from 'ant-design-vue';
  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 { BarcodeDetail } from '#/views/mes/wm/barcode/components';
  import { ACTION_ICON, TableAction, useVbenVxeGrid } from "#/adapter/vxe-table";
  import {
    cancelWorkOrder,
    deleteWorkOrder,
    exportWorkOrder,
    getWorkOrderPage,
  } from "#/api/mes/pro/workorder";
  import { $t } from "#/locales";
  import { BarcodeDetail } from "#/views/wls/barcode/components";

import { useGridColumns, useGridFormSchema } from './data';
import Form from './modules/form.vue';
  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,
  const [FormModal, formModalApi] = useVbenModal({
    connectedComponent: Form,
    destroyOnClose: true,
  });
  try {
    await deleteWorkOrder(row.id!);
    message.success($t('ui.actionMessage.deleteSuccess', [row.code]));
    handleRefresh();
  } finally {
    hideLoading();

  const barcodeDetailRef = ref<InstanceType<typeof BarcodeDetail>>(); // 条码详情弹窗

  /** 刷新表格 */
  function handleRefresh() {
    gridApi.query();
  }
}

/** 取消订单 */
async function handleCancel(row: MesProWorkOrderApi.WorkOrder) {
  await cancelWorkOrder(row.id!);
  message.success('订单已取消');
  handleRefresh();
}
  /** 创建订单 */
  function handleCreate() {
    formModalApi.setData({ formType: "create" }).open();
  }

/** 查看订单条码 */
function handleBarcode(row: MesProWorkOrderApi.WorkOrder) {
  barcodeDetailRef.value?.openByBusiness(
    row.id!,
    BarcodeBizTypeEnum.WORKORDER,
    row.code,
    row.name,
  );
}
  /** 新增子订单 */
  function handleAddChild(row: MesProWorkOrderApi.WorkOrder) {
    formModalApi.setData({ formType: "create", parentRow: row }).open();
  }

/** 导出表格 */
async function handleExport() {
  const data = await exportWorkOrder(await gridApi.formApi.getValues());
  downloadFileFromBlobPart({ fileName: '生产订单.xls', source: data });
}
  /** 查看订单详情 */
  function handleDetail(row: MesProWorkOrderApi.WorkOrder) {
    formModalApi.setData({ formType: "detail", id: row.id }).open();
  }

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,
          });
  /** 编辑订单 */
  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>,
});
      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><FormModal @success="handleRefresh" />

  <Page auto-content-height>
    <FormModal @success="handleRefresh" />
    <Grid table-title="生产订单列表">
      <template #toolbar-tools>
        <TableAction
          :actions="[
        <TableAction :actions="[
            {
              label: $t('ui.actionTitle.create', ['订单']),
              type: 'primary',
@@ -161,17 +160,16 @@
              auth: ['mes:pro-work-order:export'],
              onClick: handleExport,
            },
          ]"
        />
          ]" />
      </template>
      <template #code="{ row }">
        <Button type="link" @click="handleDetail(row)">
        <Button type="link"
                @click="handleDetail(row)">
          {{ row.code }}
        </Button>
      </template>
      <template #actions="{ row }">
        <TableAction
          :actions="[
        <TableAction :actions="[
            {
              label: $t('common.edit'),
              type: 'link',
@@ -225,8 +223,7 @@
              auth: ['mes:pro-work-order:query'],
              onClick: handleBarcode.bind(null, row),
            },
          ]"
        />
          ]" />
      </template>
    </Grid>
    <BarcodeDetail ref="barcodeDetailRef" />

 src/views/mes/pro/workorder/modules/form.vue

@@ -1,292 +1,293 @@
<script lang="ts" setup>
import type { FormType } from '../data';
<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 type { MesProWorkOrderApi } from "#/api/mes/pro/workorder";
  import type { MesProWorkOrderBomApi } from "#/api/mes/pro/workorder/bom";

import { computed, ref } from 'vue';
  import { computed, ref } from "vue";

import { useVbenModal } from '../../../../../packages/effects/common-ui/src';
import { BarcodeBizTypeEnum, MesProWorkOrderStatusEnum } from '../../../../../packages/constants/src';
  import { useVbenModal } from "../../../../../packages/effects/common-ui/src";
  import {
    BarcodeBizTypeEnum,
    MesProWorkOrderStatusEnum,
  } from "../../../../../packages/constants/src";

import { Button, message, Popconfirm, Tabs } from 'ant-design-vue';
  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 { BarcodeDetail } from '#/views/mes/wm/barcode/components';
  import { useVbenForm } from "#/adapter/form";
  import {
    confirmWorkOrder,
    createWorkOrder,
    finishWorkOrder,
    getWorkOrder,
    updateWorkOrder,
  } from "#/api/mes/pro/workorder";
  import { $t } from "#/locales";
  import { BarcodeDetail } from "#/views/wls/barcode/components";

import { useFormSchema } from '../data';
import BomList from './bom-list.vue';
import ItemList from './item-list.vue';
  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 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,
  const isEditable = computed(() =>
    // 是否为编辑模式（可保存）
    ["create", "update"].includes(formType.value)
  );
}

/** 确认订单：编辑态有修改时先保存，再确认 */
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;
  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", ["订单"]);
      }
    }
    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();
  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) {
    if (!valid || !formData.value?.id) {
      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);
      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;
        }
      }
      originalSnapshot.value = JSON.stringify(await formApi.getValues());
      emit('success');
      message.success($t('ui.actionMessage.operationSuccess'));
      await confirmWorkOrder(formData.value.id);
      message.success("订单已确认");
      await modalApi.close();
      emit("success");
    } finally {
      modalApi.unlock();
    }
  },
  async onOpenChange(isOpen: boolean) {
    if (!isOpen) {
      formData.value = undefined;
      originalSnapshot.value = '';
  }

  /** 完成订单 */
  async function handleFinish() {
    if (!formData.value?.id) {
      return;
    }
    // 加载数据
    const data = modalApi.getData<{
      formType: FormType;
      id?: number;
      parentRow?: MesProWorkOrderApi.WorkOrder;
    }>();
    formType.value = data.formType;
    subTabsName.value = 'bom';
    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();
    if (data?.id) {
    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 {
        formData.value = await getWorkOrder(data.id);
        // 设置到 values
        await formApi.setValues(formData.value);
        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();
      }
    } 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());
  },
});
    },
    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">
  <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 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="物料需求">
        <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"
        >
        <Popconfirm v-if="canConfirm || isConfirm"
                    title="确认要完成订单编制吗？确认后将不能更改。"
                    @confirm="handleConfirm">
          <Button type="primary">确认</Button>
        </Popconfirm>
        <Popconfirm
          v-if="isFinish"
          title="确认要完成该订单吗？"
          @confirm="handleFinish"
        >
        <Popconfirm v-if="isFinish"
                    title="确认要完成该订单吗？"
                    @confirm="handleFinish">
          <Button type="primary">完成</Button>
        </Popconfirm>
        <Button
          v-if="formType === 'detail' && formData?.id"
          @click="handleBarcode"
        >
        <Button v-if="formType === 'detail' && formData?.id"
                @click="handleBarcode">
          查看条码
        </Button>
      </div>

 src/views/mes/tm/tool/modules/form.vue

@@ -1,123 +1,122 @@
<script lang="ts" setup>
import type { FormType } from '../data';
  import type { FormType } from "../data";

import type { MesTmToolApi } from '#/api/mes/tm/tool';
  import type { MesTmToolApi } from "#/api/mes/tm/tool";

import { computed, ref } from 'vue';
  import { computed, ref } from "vue";

import { useVbenModal } from '../../../../../packages/effects/common-ui/src';
import { BarcodeBizTypeEnum } from '../../../../../packages/constants/src';
  import { useVbenModal } from "../../../../../packages/effects/common-ui/src";
  import { BarcodeBizTypeEnum } from "../../../../../packages/constants/src";

import { Button, message } from 'ant-design-vue';
  import { Button, message } from "ant-design-vue";

import { useVbenForm } from '#/adapter/form';
import { createTool, getTool, updateTool } from '#/api/mes/tm/tool';
import { $t } from '#/locales';
import { BarcodeDetail } from '#/views/mes/wm/barcode/components';
  import { useVbenForm } from "#/adapter/form";
  import { createTool, getTool, updateTool } from "#/api/mes/tm/tool";
  import { $t } from "#/locales";
  import { BarcodeDetail } from "#/views/wls/barcode/components";

import { useFormSchema } from '../data';
  import { useFormSchema } from "../data";

const emit = defineEmits(['success']);
const formType = ref<FormType>('create'); // 表单模式
const formData = ref<MesTmToolApi.Tool>();
const barcodeDetailRef = ref<InstanceType<typeof BarcodeDetail>>(); // 条码详情弹窗
  const emit = defineEmits(["success"]);
  const formType = ref<FormType>("create"); // 表单模式
  const formData = ref<MesTmToolApi.Tool>();
  const barcodeDetailRef = ref<InstanceType<typeof BarcodeDetail>>(); // 条码详情弹窗

const isDetail = computed(() => formType.value === 'detail'); // 是否查看模式
const getTitle = computed(() => {
  if (formType.value === 'detail') {
    return $t('ui.actionTitle.view', ['工具']);
  }
  return formType.value === 'update'
    ? $t('ui.actionTitle.edit', ['工具'])
    : $t('ui.actionTitle.create', ['工具']);
});
  const isDetail = computed(() => formType.value === "detail"); // 是否查看模式
  const getTitle = computed(() => {
    if (formType.value === "detail") {
      return $t("ui.actionTitle.view", ["工具"]);
    }
    return formType.value === "update"
      ? $t("ui.actionTitle.edit", ["工具"])
      : $t("ui.actionTitle.create", ["工具"]);
  });

const [Form, formApi] = useVbenForm({
  commonConfig: {
    componentProps: {
      class: 'w-full',
  const [Form, formApi] = useVbenForm({
    commonConfig: {
      componentProps: {
        class: "w-full",
      },
      formItemClass: "col-span-1",
      labelWidth: 110,
    },
    formItemClass: 'col-span-1',
    labelWidth: 110,
  },
  wrapperClass: 'grid-cols-3',
  layout: 'horizontal',
  schema: [],
  showDefaultActions: false,
});
    wrapperClass: "grid-cols-3",
    layout: "horizontal",
    schema: [],
    showDefaultActions: false,
  });

/** 查看工具条码 */
function handleBarcode() {
  if (!formData.value?.id) {
    return;
  /** 查看工具条码 */
  function handleBarcode() {
    if (!formData.value?.id) {
      return;
    }
    barcodeDetailRef.value?.openByBusiness(
      formData.value.id,
      BarcodeBizTypeEnum.TOOL,
      formData.value.code,
      formData.value.name
    );
  }
  barcodeDetailRef.value?.openByBusiness(
    formData.value.id,
    BarcodeBizTypeEnum.TOOL,
    formData.value.code,
    formData.value.name,
  );
}

const [Modal, modalApi] = useVbenModal({
  async onConfirm() {
    if (isDetail.value) {
      await modalApi.close();
      return;
    }
    const { valid } = await formApi.validate();
    if (!valid) {
      return;
    }
    modalApi.lock();
    // 提交表单
    const data = (await formApi.getValues()) as MesTmToolApi.Tool;
    try {
      await (data.id ? updateTool(data) : createTool(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<{ formType: FormType; id?: number }>();
    formType.value = data.formType;
    formApi.setState({ schema: useFormSchema(data.formType, formApi) });
    formApi.setDisabled(formType.value === 'detail');
    modalApi.setState({ showConfirmButton: formType.value !== 'detail' });
    if (!data?.id) {
      return;
    }
    modalApi.lock();
    try {
      formData.value = await getTool(data.id);
      // 设置到 values
      await formApi.setValues(formData.value);
    } finally {
      modalApi.unlock();
    }
  },
});
  const [Modal, modalApi] = useVbenModal({
    async onConfirm() {
      if (isDetail.value) {
        await modalApi.close();
        return;
      }
      const { valid } = await formApi.validate();
      if (!valid) {
        return;
      }
      modalApi.lock();
      // 提交表单
      const data = (await formApi.getValues()) as MesTmToolApi.Tool;
      try {
        await (data.id ? updateTool(data) : createTool(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<{ formType: FormType; id?: number }>();
      formType.value = data.formType;
      formApi.setState({ schema: useFormSchema(data.formType, formApi) });
      formApi.setDisabled(formType.value === "detail");
      modalApi.setState({ showConfirmButton: formType.value !== "detail" });
      if (!data?.id) {
        return;
      }
      modalApi.lock();
      try {
        formData.value = await getTool(data.id);
        // 设置到 values
        await formApi.setValues(formData.value);
      } finally {
        modalApi.unlock();
      }
    },
  });
</script>

<template>
  <Modal :title="getTitle" class="w-4/5">
  <Modal :title="getTitle"
         class="w-4/5">
    <Form class="mx-4" />
    <template #prepend-footer>
      <div class="flex flex-auto items-center">
        <Button
          v-if="isDetail && formData?.id"
          type="primary"
          @click="handleBarcode"
        >
        <Button v-if="isDetail && formData?.id"
                type="primary"
                @click="handleBarcode">
          查看条码
        </Button>
      </div>

 src/views/outsourcereceipt/modules/line-list.vue

@@ -18,7 +18,7 @@
  getOutsourceReceiptLinePage,
} from '#/api/mes/wm/outsourcereceipt/line';
import { $t } from '#/locales';
import { PrinterLabel } from '#/views/mes/wm/barcode/components';
import { PrinterLabel } from '#/views/wls/barcode/components';

import { useLineGridColumns } from '../data';
import DetailForm from './detail-form.vue';

 src/views/productreceipt/modules/line-list.vue

@@ -19,7 +19,7 @@
  getProductReceiptLinePage,
} from '#/api/mes/wm/productreceipt/line';
import { $t } from '#/locales';
import { BarcodeDetail, PrinterLabel } from '#/views/mes/wm/barcode/components';
import { BarcodeDetail, PrinterLabel } from '#/views/wls/barcode/components';

import { useLineGridColumns } from '../data';
import DetailForm from './detail-form.vue';

 src/views/returnissue/modules/line-list.vue

@@ -19,7 +19,7 @@
  getReturnIssueLinePage,
} from '#/api/mes/wm/returnissue/line';
import { $t } from '#/locales';
import { BarcodeDetail, PrinterLabel } from '#/views/mes/wm/barcode/components';
import { BarcodeDetail, PrinterLabel } from '#/views/wls/barcode/components';

import { useLineGridColumns } from '../data';
import DetailForm from './detail-form.vue';

 src/views/returnsales/modules/line-list.vue

@@ -18,7 +18,7 @@
  getReturnSalesLinePage,
} from '#/api/mes/wm/returnsales/line';
import { $t } from '#/locales';
import { PrinterLabel } from '#/views/mes/wm/barcode/components';
import { PrinterLabel } from '#/views/wls/barcode/components';

import { useLineGridColumns } from '../data';
import DetailForm from './detail-form.vue';

 src/views/returnvendor/modules/line-list.vue

@@ -18,7 +18,7 @@
  getReturnVendorLinePage,
} from '#/api/mes/wm/returnvendor/line';
import { $t } from '#/locales';
import { PrinterLabel } from '#/views/mes/wm/barcode/components';
import { PrinterLabel } from '#/views/wls/barcode/components';

import { useLineGridColumns } from '../data';
import DetailForm from './detail-form.vue';

 src/views/sn/modules/detail.vue

@@ -11,7 +11,7 @@

import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { getSnListByUuid } from '#/api/mes/wm/sn';
import { BarcodeDetail } from '#/views/mes/wm/barcode/components';
import { BarcodeDetail } from '#/views/wls/barcode/components';

import { useDetailGridColumns } from '../data';


 src/views/transfer/modules/line-list.vue

@@ -18,7 +18,7 @@
  getTransferLineList,
} from '#/api/mes/wm/transfer/line';
import { $t } from '#/locales';
import { PrinterLabel } from '#/views/mes/wm/barcode/components';
import { PrinterLabel } from '#/views/wls/barcode/components';

import { useLineGridColumns } from '../data';
import DetailForm from './detail-form.vue';

 src/views/warehouse/area/modules/form.vue

@@ -18,7 +18,7 @@
} from '#/api/mes/wm/warehouse/area';
import { getWarehouseLocation } from '#/api/mes/wm/warehouse/location';
import { $t } from '#/locales';
import { BarcodeDetail } from '#/views/mes/wm/barcode/components';
import { BarcodeDetail } from '#/views/wls/barcode/components';

import { useFormSchema } from '../data';


 src/views/warehouse/location/modules/form.vue

@@ -18,7 +18,7 @@
  updateWarehouseLocation,
} from '#/api/mes/wm/warehouse/location';
import { $t } from '#/locales';
import { BarcodeDetail } from '#/views/mes/wm/barcode/components';
import { BarcodeDetail } from '#/views/wls/barcode/components';

import { useFormSchema } from '../data';


 src/views/warehouse/modules/form.vue

@@ -17,7 +17,7 @@
  updateWarehouse,
} from '#/api/mes/wm/warehouse';
import { $t } from '#/locales';
import { BarcodeDetail } from '#/views/mes/wm/barcode/components';
import { BarcodeDetail } from '#/views/wls/barcode/components';

import { useFormSchema } from '../data';