liu
4 天以前 6373c12e97dc5d52ad87271d1adb6743b0052607
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
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>