VerifVATInvoice/webapp/vite-project/src/components/check/Check.vue

<template>
  <a-layout-content>
    <a-row  >
      <a-col :mx="15" :sm="24">
<!--        <v-stage v-if="fileType === 'img'" :config="stageConfig">-->
<!--          <v-layer>-->
<!--&lt;!&ndash;            <v-image :config="{image: image,x:0,y:0}" />&ndash;&gt;-->
<!--            <v-shape :config="{x: 100, y: 100, width: 100, height: 100, fill: 'red'}" />-->

<!--          </v-layer>-->

<!--        </v-stage>-->
        <img v-if="fileType === 'img'" :src="fileUrl" alt=""  class="pdf" />
        <iframe v-if="fileType==='pdf'" :src="fileUrl"  class="pdf">
        </iframe>
      </a-col>
      <a-col :mx="8" :sm="24">
        <a-form
            :model="formState"
            name="basic"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 16 }"
            autocomplete="off"
            @finish="onFinish"
            @finishFailed="onFinishFailed"
        >

        <a-form-item label="发票类型">
          <a-input v-model:value="formState.invoiceType" />
        </a-form-item>
        <a-form-item label="发票号码">
          <a-input v-model:value="formState.invoiceNumber" />
        </a-form-item>
        <a-form-item label="开票日期">
          <a-input v-model:value="formState.invoiceDate" />
        </a-form-item>
        <a-form-item label="不含税金额">
          <a-input v-model:value="formState.invoiceAmountPreTax" />
        </a-form-item>
        <a-form-item label="税额">
          <a-input v-model:value="formState.invoiceTax" />
        </a-form-item>
        <a-form-item label="价税合计">
          <a-input v-model:value="formState.totalAmount" />
        </a-form-item>
        <a-form-item label="销方名称">
          <a-input v-model:value="formState.sellerName" />
        </a-form-item>
        <a-form-item label="销方税号">
          <a-input v-model:value="formState.sellerTaxNumber" />
        </a-form-item>
        <a-form-item label="购方名称">
          <a-input v-model:value="formState.purchaserName" />
        </a-form-item>
        <a-form-item label="购方税号">
          <a-input v-model:value="formState.purchaserTaxNumber" />
        </a-form-item>
        <a-form-item label="发票代码">
          <a-input v-model:value="formState.invoiceCode" />
        </a-form-item>
<!--        <a-form-item >-->
<!--          <a-row>-->
<!--            <a-col :span="12" offset="24">-->
<!--              <a-space>-->
<!--                <a-button type="primary" html-type="submit">识别发票</a-button>-->
<!--              </a-space>-->
<!--            </a-col>-->
<!--          </a-row>-->
<!--        </a-form-item>-->
        </a-form>
      </a-col>
    </a-row>
  </a-layout-content>
</template>
<script lang="ts" setup>
import {ref,onMounted } from 'vue';
import request  from "../../utils/request.ts";
import {baseURL} from "../../utils/baseurl.ts";

export type FormState = {
  "invoiceCode": string,//发票代码
  "invoiceNumber": string,//发票号码
  "invoiceDate": string,//开票日期
  "purchaserName": string,//购方名称
  "purchaserTaxNumber": string,//购方税号
  "invoiceAmountPreTax": number,//不含税金额
  "invoiceTax": number,//税额
  "totalAmount": number,//价税合计
  "sellerName": string,//销方名称
  "sellerTaxNumber": string,//销方税号
  "sellerContactInfo": string,//销方联系方式
  "sellerBankAccountInfo": string,
  "drawer": string,//开票人
  "remarks": string,//备注
  "title": string,//标题
  "invoiceType": string,//发票类型
  "specialTag": string,//特殊标记
  "invoiceDetails": [{
    "itemName": string,//项目名称
    "amount": number,//金额
    "taxRate": number,//税率
    "tax": number//税额
  }]
}
const props = defineProps({ filePath: String,formState: String,});
const emit= defineEmits(['update:formState'])

const fileType = ref<string>('img')
onMounted(() => {
  // alert(props.filePath)
  if(props.filePath){
    fileType.value = props.filePath.split('.').pop() ==='pdf'?'pdf':'img'
    request.get('/recognize?filePath='+encodeURIComponent(props.filePath)).then((res) => {
      console.log(res.data)
      formState.value = res.data
      emit('update:formState', JSON.stringify(res.data))
    })
    fileUrl.value =  baseURL+"/"+props.filePath
  }
})

//
const fileUrl = ref('')



let formState = ref<FormState>({
  drawer: "",
  invoiceAmountPreTax: 0,
  invoiceCode: "",
  invoiceDate: "",
  invoiceDetails: [{amount: 0, itemName: "", tax: 0, taxRate: 0}],
  invoiceNumber: "",
  invoiceTax: 0,
  invoiceType: "",
  purchaserName: "",
  purchaserTaxNumber: "",
  remarks: "",
  sellerBankAccountInfo: "",
  sellerContactInfo: "",
  sellerName: "",
  sellerTaxNumber: "",
  specialTag: "",
  title: "",
  totalAmount: 0
});
const onFinish = (values: any) => {
  console.log('Success:', values);
};

const onFinishFailed = (errorInfo: any) => {
  console.log('Failed:', errorInfo);
};

</script>
<style scoped>
.pdf{
  width: 100%;
  height: 100%;
}
</style>