mes基础参数/参数模版接口调用

zhangwencui

2026-07-10 8d6b574a04d1cba911465aabb042c093ab2f646c

 src/views/mes/process-design/template/modules/form.vue

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

import type { MesPdParameterApi } from '#/api/mes/pro/processdesign/parameter';
import type { MesPdTemplateApi } from '#/api/mes/pro/processdesign/template';
  import type { MesPdParameterApi } from "#/api/mes/pro/processdesign/parameter";
  import type { MesPdTemplateApi } from "#/api/mes/pro/processdesign/template";

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

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

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

import { useVbenForm } from '#/adapter/form';
import {
  createTemplate,
  getTemplate,
  updateTemplate,
} from '#/api/mes/pro/processdesign/template';
import { $t } from '#/locales';
  import { useVbenForm } from "#/adapter/form";
  import {
    createTemplate,
    getTemplate,
    updateTemplate,
  } from "#/api/mes/pro/processdesign/template";
  import { $t } from "#/locales";

import { useFormSchema } from '../data';
import ParameterSelectDialog from './parameter-select-dialog.vue';
  import { useFormSchema } from "../data";
  import ParameterSelectDialog from "./parameter-select-dialog.vue";

const emit = defineEmits(['success']);
const formType = ref<FormType>('create');
const formData = ref<MesPdTemplateApi.Template>();
  const emit = defineEmits(["success"]);
  const formType = ref<FormType>("create");
  const formData = ref<MesPdTemplateApi.Template>();

/** 已选参数列表（用于页面展示） */
const selectedParameters = ref<MesPdParameterApi.Parameter[]>([]);
const parameterSelectDialogRef = ref<InstanceType<typeof ParameterSelectDialog>>();
  /** 已选参数列表（用于页面展示） */
  const selectedDetails = ref<MesPdTemplateApi.TemplateDetail[]>([]);
  const parameterSelectDialogRef =
    ref<InstanceType<typeof ParameterSelectDialog>>();

const isDetail = computed(() => formType.value === 'detail');
const getTitle = computed(() => {
  if (formType.value === 'detail') {
    return $t('ui.actionTitle.detail', ['工艺参数模板']);
  }
  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.detail", ["工艺参数模板"]);
    }
    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: 100,
    },
    formItemClass: 'col-span-1',
    labelWidth: 100,
  },
  layout: 'horizontal',
  schema: [],
  showDefaultActions: false,
  wrapperClass: 'grid-cols-2',
});
    layout: "horizontal",
    schema: [],
    showDefaultActions: false,
    wrapperClass: "grid-cols-2",
  });

/** 打开工艺参数选择弹窗 */
function handleSelectParameters() {
  parameterSelectDialogRef.value?.open(
    selectedParameters.value
      .map((p) => p.id)
      .filter((id): id is number => id !== undefined),
  );
}
  /** 打开工艺参数选择弹窗 */
  function handleSelectParameters() {
    parameterSelectDialogRef.value?.open(
      selectedDetails.value
        .map(d => d.processParamId)
        .filter((id): id is number => id !== undefined)
    );
  }

/** 接收选中的参数 */
function onParametersSelected(rows: MesPdParameterApi.Parameter[]) {
  selectedParameters.value = rows;
}
  /** 接收选中的参数 */
  function onParametersSelected(rows: MesPdParameterApi.Parameter[]) {
    selectedDetails.value = rows.map(row => ({
      processParamId: row.id,
      paramCode: row.paramCode,
      paramName: row.paramName,
      paramType: row.paramType,
      unitMeasureName: row.unitMeasureName,
      required: row.required,
      remark: row.remark,
    }));
  }

/** 移除已选参数 */
function removeParameter(param: MesPdParameterApi.Parameter) {
  selectedParameters.value = selectedParameters.value.filter(
    (p) => p.id !== param.id,
  );
}
  /** 移除已选参数 */
  function removeParameter(index: number) {
    selectedDetails.value.splice(index, 1);
  }

const [Modal, modalApi] = useVbenModal({
  async onConfirm() {
    if (isDetail.value) {
      await modalApi.close();
      return;
    }
    const { valid } = await formApi.validate();
    if (!valid) {
      return;
    }
    if (selectedParameters.value.length === 0) {
      message.warning('请至少选择一个工艺参数');
      return;
    }
    modalApi.lock();
    const data = (await formApi.getValues()) as MesPdTemplateApi.Template;
    data.parameterIds = selectedParameters.value
      .map((p) => p.id)
      .filter((id): id is number => id !== undefined);
    try {
      await (formData.value?.id ? updateTemplate(data) : createTemplate(data));
      await modalApi.close();
      emit('success');
      message.success($t('ui.actionMessage.operationSuccess'));
    } finally {
      modalApi.unlock();
    }
  },
  async onOpenChange(isOpen: boolean) {
    if (!isOpen) {
      formData.value = undefined;
      selectedParameters.value = [];
      return;
    }
    formApi.setState({ schema: useFormSchema() });
    const data = modalApi.getData<{ formType: FormType; id?: number }>();
    formType.value = data.formType;
    formApi.setDisabled(formType.value === 'detail');
    modalApi.setState({ showConfirmButton: formType.value !== 'detail' });
    if (!data?.id) {
      return;
    }
    modalApi.lock();
    try {
      formData.value = await getTemplate(data.id);
      await formApi.setValues(formData.value);
      // 回显已选参数（从详情接口返回的参数列表中获取）
      if (formData.value.parameterIds) {
        // parameterIds 已由后端返回，selectedParameters 在详情模式下展示
  const [Modal, modalApi] = useVbenModal({
    async onConfirm() {
      if (isDetail.value) {
        await modalApi.close();
        return;
      }
    } finally {
      modalApi.unlock();
    }
  },
});
      const { valid } = await formApi.validate();
      if (!valid) {
        return;
      }
      if (selectedDetails.value.length === 0) {
        message.warning("请至少选择一个工艺参数");
        return;
      }
      modalApi.lock();
      const data = (await formApi.getValues()) as MesPdTemplateApi.Template;
      data.details = selectedDetails.value.map(d => ({
        ...d,
        processParamId: d.processParamId,
        required: d.required,
        remark: d.remark,
      }));
      try {
        await (formData.value?.id ? updateTemplate(data) : createTemplate(data));
        await modalApi.close();
        emit("success");
        message.success($t("ui.actionMessage.operationSuccess"));
      } finally {
        modalApi.unlock();
      }
    },
    async onOpenChange(isOpen: boolean) {
      if (!isOpen) {
        formData.value = undefined;
        selectedDetails.value = [];
        return;
      }
      formApi.setState({ schema: useFormSchema() });
      const data = modalApi.getData<{ formType: FormType; id?: number }>();
      formType.value = data.formType;
      formApi.setDisabled(formType.value === "detail");
      modalApi.setState({ showConfirmButton: formType.value !== "detail" });
      if (!data?.id) {
        return;
      }
      modalApi.lock();
      try {
        formData.value = await getTemplate(data.id);
        await formApi.setValues(formData.value);
        // 回显已选参数（从详情接口返回的参数列表中获取）
        if (formData.value.details) {
          selectedDetails.value = [...formData.value.details];
        }
      } finally {
        modalApi.unlock();
      }
    },
  });
</script>

<template>
  <Modal :title="getTitle" class="w-4/5">
  <Modal :title="getTitle"
         class="w-4/5">
    <Form class="mx-4" />
    <!-- 关联参数选择区域 -->
    <!-- 模板明细区域 -->
    <div class="mx-4 mt-4">
      <div class="mb-2 flex items-center justify-between">
        <span class="text-sm font-medium">关联工艺参数</span>
        <Button
          v-if="!isDetail"
          type="primary"
          size="small"
          @click="handleSelectParameters"
        >
          选择参数
        <span class="text-sm font-medium">模板明细</span>
        <Button v-if="!isDetail"
                type="primary"
                size="small"
                @click="handleSelectParameters">
          添加参数
        </Button>
      </div>
      <div
        v-if="selectedParameters.length > 0"
        class="min-h-10 rounded border border-gray-200 p-2"
      >
        <Tag
          v-for="param in selectedParameters"
          :key="param.id"
          :closable="!isDetail"
          class="mb-1 mr-1"
          @close="removeParameter(param)"
        >
          {{ param.name }}({{ param.code }})
        </Tag>
      <div v-if="selectedDetails.length > 0"
           class="rounded border border-gray-200">
        <div class="grid grid-cols-12 gap-2 border-b border-gray-200 bg-gray-50 p-2 text-xs font-medium">
          <div class="col-span-3">参数名称</div>
          <div class="col-span-2">参数编码</div>
          <div class="col-span-2">单位</div>
          <div class="col-span-2 text-center">是否必填</div>
          <div class="col-span-2">备注</div>
          <div v-if="!isDetail"
               class="col-span-1 text-center">操作</div>
        </div>
        <div v-for="(detail, index) in selectedDetails"
             :key="detail.processParamId || index"
             class="grid grid-cols-12 gap-2 border-b border-gray-100 p-2">
          <div class="col-span-3 text-sm">{{ detail.paramName }}</div>
          <div class="col-span-2 text-sm text-gray-500">{{ detail.paramCode }}</div>
          <div class="col-span-2 text-sm">{{ detail.unitMeasureName }}</div>
          <div class="col-span-2 flex items-center justify-center">
            <Switch v-model:checked="detail.required"
                    :disabled="isDetail"
                    size="small" />
          </div>
          <div class="col-span-2">
            <Input v-model:value="detail.remark"
                   :disabled="isDetail"
                   placeholder="备注"
                   size="small" />
          </div>
          <div v-if="!isDetail"
               class="col-span-1 flex items-center justify-center">
            <Button type="text"
                    danger
                    size="small"
                    @click="removeParameter(index)">
              删除
            </Button>
          </div>
        </div>
      </div>
      <div v-else class="rounded border border-dashed border-gray-300 p-4 text-center text-gray-400">
      <div v-else
           class="rounded border border-dashed border-gray-300 p-4 text-center text-gray-400">
        暂未选择参数
      </div>
    </div>
    <ParameterSelectDialog
      ref="parameterSelectDialogRef"
      @selected="onParametersSelected"
    />
    <ParameterSelectDialog ref="parameterSelectDialogRef"
                           @selected="onParametersSelected" />
  </Modal>
</template>