mom-pro2-before.git

<script lang="ts" setup>
import type { VbenFormSchema } from '#/adapter/form';
import type { MesProWorkOrderProcessApi } from '#/api/mes/pro/workorder/process';
 
import { computed, ref } from 'vue';
 
import { useVbenModal } from '@vben/common-ui';
 
import { message } from 'ant-design-vue';
 
import { useVbenForm } from '#/adapter/form';
import { getProcessSimpleList } from '#/api/mes/pro/process';
import {
  createWorkOrderProcess,
  getWorkOrderProcess,
  updateWorkOrderProcess,
} from '#/api/mes/pro/workorder/process';
import { $t } from '#/locales';
import { MdItemSelect } from '#/views/mes/md/item/components';
 
const emit = defineEmits(['success']);
const formData = ref<MesProWorkOrderProcessApi.WorkOrderProcess>();
const workOrderId = ref<number>();
const processList = ref<MesProWorkOrderProcessApi.WorkOrderProcess[]>([]);
const isCreateMode = ref(false);
 
const getTitle = computed(() => {
  return formData.value?.id
    ? $t('ui.actionTitle.edit', ['工序'])
    : $t('ui.actionTitle.create', ['工序']);
});
 
/** 加载工序选项 */
async function loadProcessOptions() {
  const list = await getProcessSimpleList();
  return (list || []).map((item) => ({
    label: item.name ?? '',
    value: item.id!,
  }));
}
 
/** 表单 schema */
async function loadSchema(): Promise<VbenFormSchema[]> {
  const processOptions = await loadProcessOptions();
  return [
    {
      fieldName: 'id',
      component: 'Input',
      dependencies: { triggerFields: [''], show: () => false },
    },
    {
      fieldName: 'workOrderId',
      component: 'Input',
      dependencies: { triggerFields: [''], show: () => false },
    },
    {
      fieldName: 'processId',
      label: '工序',
      component: 'Select',
      componentProps: {
        options: processOptions,
        placeholder: '请选择工序',
        onChange: async (value: number) => {
          const process = processOptions.find((item) => item.value === value);
          if (process) {
            await formApi.setFieldValue('processName', process.label);
          }
        },
      },
      rules: 'selectRequired',
    },
    {
      fieldName: 'processName',
      label: '工序名称',
      component: 'Input',
      componentProps: { disabled: true },
    },
    {
      fieldName: 'sort',
      label: '序号',
      component: 'InputNumber',
      componentProps: {
        class: '!w-full',
        min: 1,
        placeholder: '请输入序号',
        precision: 0,
      },
      rules: 'required',
    },
    {
      fieldName: 'linkType',
      label: '工序关系',
      component: 'Select',
      componentProps: {
        allowClear: true,
        options: [
          { label: '开始-开始', value: 0 },
          { label: '结束-结束', value: 1 },
          { label: '开始-结束', value: 2 },
          { label: '结束-开始', value: 3 },
        ],
        placeholder: '请选择工序关系',
      },
    },
    {
      fieldName: 'prepareTime',
      label: '准备时间(分钟)',
      component: 'InputNumber',
      componentProps: {
        class: '!w-full',
        min: 0,
        placeholder: '请输入准备时间',
        precision: 0,
      },
    },
    {
      fieldName: 'waitTime',
      label: '等待时间(分钟)',
      component: 'InputNumber',
      componentProps: {
        class: '!w-full',
        min: 0,
        placeholder: '请输入等待时间',
        precision: 0,
      },
    },
    {
      fieldName: 'colorCode',
      label: '甘特图颜色',
      component: 'Input',
      componentProps: {
        placeholder: '请选择颜色',
        type: 'color',
      },
    },
    {
      fieldName: 'keyFlag',
      label: '是否关键工序',
      component: 'RadioGroup',
      componentProps: {
        options: [
          { label: '否', value: false },
          { label: '是', value: true },
        ],
      },
      defaultValue: false,
    },
    {
      fieldName: 'checkFlag',
      label: '是否质检工序',
      component: 'RadioGroup',
      componentProps: {
        options: [
          { label: '否', value: false },
          { label: '是', value: true },
        ],
      },
      defaultValue: false,
    },
    {
      fieldName: 'backflushFlag',
      label: '是否倒冲',
      component: 'RadioGroup',
      componentProps: {
        options: [
          { label: '否', value: false },
          { label: '是', value: true },
        ],
      },
      defaultValue: true,
    },
    {
      fieldName: 'outputItemId',
      label: '产出物料',
      component: MdItemSelect,
      componentProps: {
        placeholder: '请选择产出物料',
      },
    },
    {
      fieldName: 'remark',
      label: '备注',
      component: 'Textarea',
      formItemClass: 'col-span-2',
      componentProps: {
        placeholder: '请输入备注',
        rows: 2,
      },
    },
  ];
}
 
const [Form, formApi] = useVbenForm({
  commonConfig: {
    componentProps: { class: 'w-full' },
    formItemClass: 'col-span-1',
    labelWidth: 130,
  },
  layout: 'horizontal',
  schema: [],
  showDefaultActions: false,
  wrapperClass: 'grid-cols-2',
});
 
const [Modal, modalApi] = useVbenModal({
  async onConfirm() {
    const { valid } = await formApi.validate();
    if (!valid) {
      return;
    }
    modalApi.lock();
    const data = (await formApi.getValues()) as MesProWorkOrderProcessApi.WorkOrderProcess;
    data.workOrderId = workOrderId.value;
 
    // 校验序号唯一
    const isSortDuplicate = processList.value.some(
      (item) => item.sort === data.sort && item.processId !== data.processId
    );
    if (isSortDuplicate) {
      message.error('序号已存在');
      modalApi.unlock();
      return;
    }
 
    // 校验关键工序唯一
    if (data.keyFlag) {
      const hasKeyProcess = processList.value.some(
        (item) => item.keyFlag && item.processId !== data.processId
      );
      if (hasKeyProcess) {
        message.error('已存在关键工序，每个工单只能有一个关键工序');
        modalApi.unlock();
        return;
      }
    }
 
    try {
      if (isCreateMode.value) {
        // 新增模式：直接返回数据给父组件
        emit('success', data, !!formData.value?.processId);
        await modalApi.close();
      } else if (formData.value?.id) {
        // 编辑模式：调用更新接口
        await updateWorkOrderProcess(data);
        emit('success', data, true);
        await modalApi.close();
        message.success($t('ui.actionMessage.operationSuccess'));
      } else {
        // 新增模式（有 workOrderId）：调用创建接口
        await createWorkOrderProcess(data);
        emit('success', data, false);
        await modalApi.close();
        message.success($t('ui.actionMessage.operationSuccess'));
      }
    } finally {
      modalApi.unlock();
    }
  },
  async onOpenChange(isOpen: boolean) {
    if (!isOpen) {
      formData.value = undefined;
      processList.value = [];
      isCreateMode.value = false;
      return;
    }
    modalApi.lock();
    try {
      const schema = await loadSchema();
      formApi.setState({ schema });
    } finally {
      modalApi.unlock();
    }
 
    const data = modalApi.getData<{
      id?: number;
      productId?: number;
      workOrderId?: number;
      row?: MesProWorkOrderProcessApi.WorkOrderProcess;
      processList?: MesProWorkOrderProcessApi.WorkOrderProcess[];
    }>();
    if (!data) {
      return;
    }
 
    workOrderId.value = data.workOrderId;
    processList.value = data.processList || [];
    isCreateMode.value = !data.workOrderId;
 
    if (data.row) {
      // 编辑临时列表中的工序
      formData.value = data.row;
      await formApi.setValues(data.row);
    } else if (data.id) {
      // 编辑已保存的工序
      modalApi.lock();
      try {
        formData.value = await getWorkOrderProcess(data.id);
        await formApi.setValues(formData.value);
      } finally {
        modalApi.unlock();
      }
    } else {
      // 新增
      formData.value = undefined;
      const maxSort = Math.max(0, ...processList.value.map((item) => item.sort || 0));
      await formApi.setValues({
        colorCode: '#00AEF3',
        sort: maxSort + 1,
      });
    }
  },
});
</script>
 
<template>
  <Modal :title="getTitle" class="w-3/5">
    <Form class="mx-4" />
  </Modal>
</template>