feat(workorder): 添加工序投料BOM明细展开功能

云

15 小时以前 bbce6db600e6bb0cf2a3bb78bdf5ccff70b737a8

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

@@ -3,16 +3,17 @@

  import type { MesProWorkOrderApi } from "#/api/mes/pro/workorder";
  import type { MesProWorkOrderBomApi } from "#/api/mes/pro/workorder/bom";
  import type { MesProWorkOrderProcessApi } from "#/api/mes/pro/workorder/process";

  import { computed, ref } from "vue";

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

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

  import { useVbenForm } from "#/adapter/form";
  import {
@@ -22,29 +23,33 @@
    getWorkOrder,
    updateWorkOrder,
  } from "#/api/mes/pro/workorder";
  import { batchSaveWorkOrderProcess, getWorkOrderProcessListByWorkOrderId } from "#/api/mes/pro/workorder/process";
  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 ProcessList from "./process-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 originalSnapshot = ref("");
  const subTabsName = ref("bom");
  const barcodeDetailRef = ref<InstanceType<typeof BarcodeDetail>>();
  const processListRef = ref<InstanceType<typeof ProcessList>>();
  const currentProductId = ref<number>(); // 当前选中的产品 ID（用于工序加载）
  const tempProcessList = ref<MesProWorkOrderProcessApi.WorkOrderProcess[]>([]); // 临时工序列表

  const isEditable = computed(() =>
    // 是否为编辑模式（可保存）
    ["create", "update"].includes(formType.value)
  );
  const isConfirm = computed(() => formType.value === "confirm"); // 是否为确认模式
  const isFinish = computed(() => formType.value === "finish"); // 是否为完成模式
  const isConfirm = computed(() => formType.value === "confirm");
  const isFinish = computed(() => formType.value === "finish");
  const isCreateMode = computed(() => formType.value === "create");
  const canConfirm = computed(
    () =>
      // 编辑态草稿可确认
      formType.value === "update" &&
      formData.value?.status === MesProWorkOrderStatusEnum.PREPARE
  );
@@ -69,6 +74,9 @@
    }
  });

  // 判断是否显示 Tab（新增模式或已有 ID）
  const showTabs = computed(() => isCreateMode.value || formData.value?.id);

  const [Form, formApi] = useVbenForm({
    commonConfig: {
      componentProps: {
@@ -81,12 +89,29 @@
    schema: [],
    showDefaultActions: false,
    wrapperClass: "grid-cols-3",
    handleValuesChange: (values, fieldsChanged) => {
      // 产品变更时，触发工序加载
      if (isCreateMode.value && fieldsChanged.includes('productId')) {
        const newProductId = values.productId;
        if (newProductId && newProductId !== currentProductId.value) {
          currentProductId.value = newProductId;
        }
      }
    },
  });

  /** 重新挂载 schema 并按表单态控制底部确认按钮 */
  /** 重新挂载 schema 并按表单态控制底部按钮 */
  function applySchema() {
    formApi.setState({ schema: useFormSchema(formType.value, formApi) });
    modalApi.setState({ showConfirmButton: isEditable.value });
    const showBtn = isEditable.value || isConfirm.value || isFinish.value;
    modalApi.setState({
      showConfirmButton: showBtn,
      confirmText: isConfirm.value || canConfirm.value
        ? '确认'
        : isFinish.value
          ? '完成'
          : undefined,
    });
  }

  /** 查看订单条码 */
@@ -102,49 +127,7 @@
    );
  }

  /** 确认订单：编辑态有修改时先保存，再确认 */
  async function handleConfirm() {
    const { valid } = await formApi.validate();
    if (!valid || !formData.value?.id) {
      return;
    }
    modalApi.lock();
    try {
      if (isEditable.value) {
        const current = JSON.stringify(await formApi.getValues());
        if (current !== originalSnapshot.value) {
          const data =
            (await formApi.getValues()) as MesProWorkOrderApi.WorkOrder;
          await updateWorkOrder({ ...formData.value, ...data });
          originalSnapshot.value = current;
        }
      }
      await confirmWorkOrder(formData.value.id);
      message.success("订单已确认");
      await modalApi.close();
      emit("success");
    } finally {
      modalApi.unlock();
    }
  }

  /** 完成订单 */
  async function handleFinish() {
    if (!formData.value?.id) {
      return;
    }
    modalApi.lock();
    try {
      await finishWorkOrder(formData.value.id);
      message.success("订单已完成");
      await modalApi.close();
      emit("success");
    } finally {
      modalApi.unlock();
    }
  }

  /** 从 BOM 物料行预填子订单：复用当前订单上下文，进入新增态 */
  /** 从 BOM 物料行预填子订单 */
  async function handleGenerateWorkOrder(
    bomRow: MesProWorkOrderBomApi.WorkOrderBom
  ) {
@@ -171,42 +154,135 @@
      type: current.type,
      vendorId: current.vendorId,
    });
    // 设置当前产品 ID，触发工序加载
    currentProductId.value = bomRow.itemId;
    originalSnapshot.value = JSON.stringify(await formApi.getValues());
    message.info("已从 BOM 物料预填子订单，请补充订单编码等信息后保存");
  }

  /** 工序列表变化回调 */
  function handleProcessListChange(list: MesProWorkOrderProcessApi.WorkOrderProcess[]) {
    tempProcessList.value = list;
  }

  const [Modal, modalApi] = useVbenModal({
    async onConfirm() {
      // ---- 确认订单模式 ----
      if (isConfirm.value || canConfirm.value) {
        const { valid } = await formApi.validate();
        if (!valid || !formData.value?.id) return;
        try {
          await confirm('确认要完成订单编制吗？确认后将不能更改。');
        } catch {
          return;
        }
        modalApi.lock();
        try {
          // 1. 保存工单信息（如果有变更）
          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;
            }
          }
          // 2. 批量保存工序（如果有）
          if (tempProcessList.value.length > 0) {
            const processList = tempProcessList.value.map(item => ({
              ...item,
              workOrderId: formData.value!.id,
            }));
            await batchSaveWorkOrderProcess(processList);
          }
          // 3. 校验是否有工序
          const processes = await getWorkOrderProcessListByWorkOrderId(formData.value.id);
          if (!processes || processes.length === 0) {
            message.warning('当前订单未配置工序，请先在工单中维护工序信息后再确认');
            return;
          }
          // 4. 确认工单
          await confirmWorkOrder(formData.value.id);
          message.success('订单已确认');
          await modalApi.close();
          emit('success');
        } finally {
          modalApi.unlock();
        }
        return;
      }
      // ---- 完成订单模式 ----
      if (isFinish.value) {
        if (!formData.value?.id) return;
        // 校验是否有工序
        const processes = await getWorkOrderProcessListByWorkOrderId(formData.value.id);
        if (!processes || processes.length === 0) {
          message.warning('当前订单未配置工序，请先在工单中维护工序信息后再完成');
          return;
        }
        try {
          await confirm('确认要完成该订单吗？');
        } catch {
          return;
        }
        modalApi.lock();
        try {
          await finishWorkOrder(formData.value.id);
          message.success('订单已完成');
          await modalApi.close();
          emit('success');
        } finally {
          modalApi.unlock();
        }
        return;
      }
      // ---- 保存（新增 / 编辑）----
      if (!isEditable.value) {
        await modalApi.close();
        return;
      }
      const { valid } = await formApi.validate();
      if (!valid) {
        return;
      }
      if (!valid) return;
      modalApi.lock();
      // 提交表单
      const data = (await formApi.getValues()) as MesProWorkOrderApi.WorkOrder;
      try {
        if (formData.value?.id) {
          // 编辑模式
          await updateWorkOrder({ ...formData.value, ...data });
          // 批量保存工序
          if (tempProcessList.value.length > 0) {
            const processList = tempProcessList.value.map(item => ({
              ...item,
              workOrderId: formData.value!.id,
            }));
            await batchSaveWorkOrderProcess(processList);
          }
          formData.value = { ...formData.value, ...data };
          emit("success");
          message.success($t("ui.actionMessage.operationSuccess"));
          await modalApi.close();
        } else {
          // 新增模式
          const id = await createWorkOrder(data);
          // 批量保存工序
          if (tempProcessList.value.length > 0) {
            const processList = tempProcessList.value.map(item => ({
              ...item,
              workOrderId: id,
            }));
            await batchSaveWorkOrderProcess(processList);
          }
          formData.value = {
            ...data,
            id,
            status: MesProWorkOrderStatusEnum.PREPARE,
          };
          formType.value = "update";
          // 创建成功后切换编辑态，重挂 schema 让「订单状态」字段显现
          applySchema();
          await formApi.setValues(formData.value);
          emit("success");
        }
        originalSnapshot.value = JSON.stringify(await formApi.getValues());
        emit("success");
        message.success($t("ui.actionMessage.operationSuccess"));
      } finally {
        modalApi.unlock();
      }
@@ -215,9 +291,10 @@
      if (!isOpen) {
        formData.value = undefined;
        originalSnapshot.value = "";
        currentProductId.value = undefined;
        tempProcessList.value = [];
        return;
      }
      // 加载数据
      const data = modalApi.getData<{
        formType: FormType;
        id?: number;
@@ -225,18 +302,18 @@
      }>();
      formType.value = data.formType;
      subTabsName.value = "bom";
      tempProcessList.value = [];
      applySchema();
      if (data?.id) {
        modalApi.lock();
        try {
          formData.value = await getWorkOrder(data.id);
          // 设置到 values
          await formApi.setValues(formData.value);
          currentProductId.value = formData.value.productId;
        } finally {
          modalApi.unlock();
        }
      } else if (data?.parentRow) {
        // 新增子订单时，预填父订单信息
        const parent = data.parentRow;
        await formApi.setValues({
          clientId: parent.clientId,
@@ -257,40 +334,47 @@
  <Modal :title="getTitle"
         class="w-3/5">
    <Form class="mx-4" />
    <!-- BOM / 物料需求 Tab：非新建态展示 -->
    <template v-if="formData?.id">
    <!-- BOM / 工序 / 物料需求 Tab -->
    <template v-if="showTabs">
      <Tabs v-model:active-key="subTabsName"
            class="mx-4">
        <Tabs.TabPane key="bom"
                      tab="订单 BOM">
          <BomList :form-type="formType"
          <BomList v-if="formData?.id"
                   :form-type="formType"
                   :work-order="formData"
                   :work-order-id="formData.id"
                   @generate-work-order="handleGenerateWorkOrder" />
          <div v-else class="text-gray-400 text-center py-8">
            请先保存工单后再配置 BOM
          </div>
        </Tabs.TabPane>
        <Tabs.TabPane key="process"
                      tab="工序">
          <ProcessList
            ref="processListRef"
            :form-type="formType"
            :work-order="formData || {}"
            :work-order-id="formData?.id"
            :product-id="currentProductId"
            @process-list-change="handleProcessListChange"
          />
        </Tabs.TabPane>
        <Tabs.TabPane key="item"
                      tab="物料需求">
          <ItemList :work-order-id="formData.id" />
          <ItemList v-if="formData?.id"
                    :work-order-id="formData.id" />
          <div v-else class="text-gray-400 text-center py-8">
            请先保存工单后再查看物料需求
          </div>
        </Tabs.TabPane>
      </Tabs>
    </template>
    <template #prepend-footer>
      <div class="flex flex-auto items-center gap-2">
        <Popconfirm v-if="canConfirm || isConfirm"
                    title="确认要完成订单编制吗？确认后将不能更改。"
                    @confirm="handleConfirm">
          <Button type="primary">确认</Button>
        </Popconfirm>
        <Popconfirm v-if="isFinish"
                    title="确认要完成该订单吗？"
                    @confirm="handleFinish">
          <Button type="primary">完成</Button>
        </Popconfirm>
        <Button v-if="formType === 'detail' && formData?.id"
                @click="handleBarcode">
          查看条码
        </Button>
      </div>
      <Button v-if="formType === 'detail' && formData?.id"
              @click="handleBarcode">
        查看条码
      </Button>
    </template>
  </Modal>
  <BarcodeDetail ref="barcodeDetailRef" />