feat(erp): 采购来票新增发票OCR识别录入功能

liu

3 天以前 0496b0e8078775203d51d62765766c5db3ebeb71

 src/views/erp/purchase/invoice/index.vue

@@ -1,34 +1,34 @@
<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { ErpPurchaseInvoiceApi } from '#/api/erp/purchase/invoice';

import { useRouter } from 'vue-router';
import type { ErpPurchaseInvoiceAiApi } from '#/api/erp/purchase/invoice/ai';

import { Page, useVbenModal } from '@vben/common-ui';
import { downloadFileFromBlobPart } from '@vben/utils';

import { Button, message, Tag } from 'ant-design-vue';
import { nextTick, ref } from 'vue';

import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import {
  deletePurchaseInvoice,
  exportPurchaseInvoice,
  getPurchaseInvoicePage,
  submitPurchaseInvoice,
} from '#/api/erp/purchase/invoice';
import { $t } from '#/locales';

import { useGridColumns, useGridFormSchema } from './data';
import Form from './modules/form.vue';
import OcrUpload from './modules/ocr-upload.vue';

defineOptions({ name: 'ErpPurchaseInvoice' });

const { push } = useRouter();

const [FormModal, formModalApi] = useVbenModal({
  connectedComponent: Form,
  destroyOnClose: true,
});

const ocrUploadRef = ref<InstanceType<typeof OcrUpload>>();

/** 刷新表格 */
function handleRefresh() {
@@ -45,6 +45,18 @@
/** 创建来票 */
function handleCreate() {
  formModalApi.setData({ formType: 'create' }).open();
}

/** 识别录入 */
function handleOcrCreate() {
  ocrUploadRef.value?.open();
}

/** OCR 识别结果确认 */
function handleOcrSuccess(data: ErpPurchaseInvoiceAiApi.OcrResultVO) {
  nextTick(() => {
    formModalApi.setData({ formType: 'create', ocrData: data } as any).open();
  });
}

/** 编辑来票 */
@@ -70,29 +82,6 @@
  } finally {
    hideLoading();
  }
}

/** 提交审核 */
async function handleSubmit(row: ErpPurchaseInvoiceApi.PurchaseInvoice) {
  const hideLoading = message.loading({
    content: '提交审核中...',
    duration: 0,
  });
  try {
    await submitPurchaseInvoice(row.id!);
    message.success('提交审核成功');
    handleRefresh();
  } finally {
    hideLoading();
  }
}

/** 查看审批详情 */
function handleProcessDetail(row: ErpPurchaseInvoiceApi.PurchaseInvoice) {
  push({
    name: 'BpmProcessInstanceDetail',
    query: { id: row.processInstanceId },
  });
}

const [Grid, gridApi] = useVbenVxeGrid({
@@ -129,6 +118,7 @@
<template>
  <Page auto-content-height>
    <FormModal @success="handleRefresh" />
    <OcrUpload ref="ocrUploadRef" @success="handleOcrSuccess" />
    <Grid table-title="来票列表">
      <template #toolbar-tools>
        <TableAction
@@ -139,6 +129,12 @@
              icon: ACTION_ICON.ADD,
              auth: ['erp:purchase-invoice:create'],
              onClick: handleCreate,
            },
            {
              label: '识别录入',
              type: 'primary',
              auth: ['erp:purchase-invoice:create'],
              onClick: handleOcrCreate,
            },
            {
              label: $t('ui.actionTitle.export'),
@@ -162,13 +158,6 @@
        <Tag v-if="!row.hasAttachment" color="warning">未上传</Tag>
        <Tag v-else color="success">已上传</Tag>
      </template>
      <template #auditStatus="{ row }">
        <Tag v-if="row.auditStatus === 0" color="default">未提交</Tag>
        <Tag v-else-if="row.auditStatus === 10" color="warning">审批中</Tag>
        <Tag v-else-if="row.auditStatus === 20" color="success">审核通过</Tag>
        <Tag v-else-if="row.auditStatus === 30" color="error">审核不通过</Tag>
        <Tag v-else-if="row.auditStatus === 40" color="default">已作废</Tag>
      </template>
      <template #actions="{ row }">
        <TableAction
          :actions="[
@@ -184,22 +173,7 @@
              type: 'link',
              icon: ACTION_ICON.EDIT,
              auth: ['erp:purchase-invoice:update'],
              ifShow: row.auditStatus === 0,
              onClick: handleEdit.bind(null, row),
            },
            {
              label: '提交审核',
              type: 'link',
              auth: ['erp:purchase-invoice:update'],
              onClick: handleSubmit.bind(null, row),
              ifShow: row.auditStatus === 0,
            },
            {
              label: '查看审批',
              type: 'link',
              auth: ['erp:purchase-invoice:query'],
              onClick: handleProcessDetail.bind(null, row),
              ifShow: row.auditStatus !== 0 && !!row.processInstanceId,
            },
            {
              label: $t('common.delete'),
@@ -207,7 +181,6 @@
              danger: true,
              icon: ACTION_ICON.DELETE,
              auth: ['erp:purchase-invoice:delete'],
              ifShow: row.auditStatus !== 20,
              popConfirm: {
                title: $t('ui.actionMessage.deleteConfirm', [row.no]),
                confirm: handleDelete.bind(null, row),