src/views/erp/purchase/invoice/modules/form.vue
¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,139 @@
<script lang="ts" setup>
import type { FormType } from '../data';
import type { ErpPurchaseInvoiceApi } from '#/api/erp/purchase/invoice';
import type { ErpPurchaseInvoiceAiApi } from '#/api/erp/purchase/invoice/ai';
import { computed, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { Alert, message } from 'ant-design-vue';
import { useVbenForm } from '#/adapter/form';
import {
  createPurchaseInvoice,
  getPurchaseInvoice,
  updatePurchaseInvoice,
} from '#/api/erp/purchase/invoice';
import { $t } from '#/locales';
import { useFormSchema } from '../data';
const emit = defineEmits(['success']);
const formData = ref<ErpPurchaseInvoiceApi.PurchaseInvoice>();
const formType = ref<FormType>('create');
const ocrSupplierName = ref('');
const orderRemainInvoicePrice = ref<number>(); // æ‰€é€‰é‡‡è´­è®¢å•剩余可开票金额(未开票金额,用于提示与校验)
const getTitle = computed(() => {
  if (formType.value === 'create') {
    return $t('ui.actionTitle.create', ['来票']);
  } else if (formType.value === 'edit') {
    return $t('ui.actionTitle.edit', ['来票']);
  } else {
    return '来票详情';
  }
});
const [Form, formApi] = useVbenForm({
  commonConfig: {
    componentProps: {
      class: 'w-full',
    },
    labelWidth: 120,
  },
  wrapperClass: 'grid-cols-2',
  layout: 'horizontal',
  schema: useFormSchema(orderRemainInvoicePrice),
  showDefaultActions: false,
});
const [Modal, modalApi] = useVbenModal({
  async onConfirm() {
    const { valid } = await formApi.validate();
    if (!valid) {
      return;
    }
    modalApi.lock();
    const data = (await formApi.getValues()) as ErpPurchaseInvoiceApi.PurchaseInvoice;
    if (formData.value?.id) {
      data.id = formData.value.id;
    }
    try {
      await (formData.value?.id
        ? updatePurchaseInvoice(data)
        : createPurchaseInvoice(data));
      await modalApi.close();
      emit('success');
      message.success($t('ui.actionMessage.operationSuccess'));
    } finally {
      modalApi.unlock();
    }
  },
  async onOpenChange(isOpen: boolean) {
    if (!isOpen) {
      formData.value = undefined;
      ocrSupplierName.value = '';
      orderRemainInvoicePrice.value = undefined;
      return;
    }
    const data = modalApi.getData<{
      formType: FormType;
      id?: number;
      ocrData?: ErpPurchaseInvoiceAiApi.OcrResultVO;
    }>();
    formType.value = data.formType;
    formApi.setDisabled(formType.value === 'detail');
    formApi.updateSchema(useFormSchema(orderRemainInvoicePrice));
    await formApi.resetForm();
    // OCR è¯†åˆ«æ•°æ®é¢„填(新建场景,编辑/详情不处理)
    const ocr = data?.ocrData;
    ocrSupplierName.value = ocr?.supplierName || '';
    if (ocr) {
      await formApi.setValues({
        invoiceNo: ocr.invoiceNo,
        invoiceTitle: ocr.invoiceTitle,
        price: ocr.price,
        invoiceTime: ocr.invoiceTime,
        remark: ocr.remark,
      });
    }
    if (!data || !data.id) {
      return;
    }
    modalApi.lock();
    try {
      formData.value = await getPurchaseInvoice(data.id);
      if (formData.value?.attachmentList?.length) {
        // è½¬ä¸ºä¸Šä¼ ç»„件的文件对象;提交时 formApi ä¼šæŒ‰ valueKey æå–附件 ID
        (formData.value as Record<string, unknown>).blobIds =
          formData.value.attachmentList.map((item) => ({
            uid: String(item.id),
            name: item.name || '',
            url: item.url || '',
            status: 'done',
            id: item.id,
          }));
      }
      await formApi.setValues(formData.value as any);
    } finally {
      modalApi.unlock();
    }
  },
});
</script>
<template>
  <Modal :title="getTitle" class="w-3/5">
    <Alert
      v-if="ocrSupplierName"
      type="info"
      show-icon
      class="mx-4 mb-4"
      message="识别到销售方名称,请选择采购订单并核对订单供应商是否一致"
      :description="`识别结果:${ocrSupplierName}`"
    />
    <Form class="mx-4" />
  </Modal>
</template>