zhangwencui
8 天以前 d171971461713d9d6d9ccb989fa2195d7d9ee1c6
src/views/basicData/mdm/modules/form.vue
@@ -1,80 +1,82 @@
<script lang="ts" setup>
import type { MdmItemApi } from '#/api/mdm/item';
  import type { MdmItemApi } from "#/api/mdm/item";
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 { message } from 'ant-design-vue';
  import { message } from "ant-design-vue";
import { useVbenForm } from '#/adapter/form';
import { createItem, getItem, updateItem } from '#/api/mdm/item';
import { $t } from '#/locales';
  import { useVbenForm } from "#/adapter/form";
  import { createItem, getItem, updateItem } from "#/api/mdm/item";
  import { $t } from "#/locales";
import { useFormSchema } from '../data';
  import { useFormSchema } from "../data";
defineOptions({ name: 'ItemForm' });
  defineOptions({ name: "ItemForm" });
const emit = defineEmits(['success']);
const formData = ref<MdmItemApi.Item>();
const getTitle = computed(() => {
  return formData.value?.id
    ? $t('ui.actionTitle.edit', ['物料'])
    : $t('ui.actionTitle.create', ['物料']);
});
  const emit = defineEmits(["success"]);
  const formData = ref<MdmItemApi.Item>();
  const getTitle = computed(() => {
    return formData.value?.id
      ? $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",
      },
      labelWidth: 110,
    },
    labelWidth: 110,
  },
  layout: 'horizontal',
  schema: useFormSchema(),
  showDefaultActions: false,
  wrapperClass: 'grid-cols-2',
});
    layout: "horizontal",
    schema: useFormSchema(),
    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 MdmItemApi.Item;
    try {
      await (formData.value?.id ? updateItem(data) : createItem(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<MdmItemApi.Item>();
    if (!data || !data.id) {
      return;
    }
    modalApi.lock();
    try {
      formData.value = await getItem(data.id);
      await formApi.setValues(formData.value);
    } finally {
      modalApi.unlock();
    }
  },
});
  const [Modal, modalApi] = useVbenModal({
    async onConfirm() {
      const { valid } = await formApi.validate();
      if (!valid) {
        return;
      }
      modalApi.lock();
      const data = (await formApi.getValues()) as MdmItemApi.Item;
      try {
        await (formData.value?.id ? updateItem(data) : createItem(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<MdmItemApi.Item>();
      if (!data || !data.id) {
        return;
      }
      modalApi.lock();
      try {
        formData.value = await getItem(data.id);
        // 编辑回显时,syncMes 默认为 false
        await formApi.setValues({ ...formData.value, syncMes: false });
      } finally {
        modalApi.unlock();
      }
    },
  });
</script>
<template>
  <Modal class="w-[1000px]" :title="getTitle">
  <Modal class="w-[1000px]"
         :title="getTitle">
    <Form class="mx-4" />
  </Modal>
</template>