feat(webapp): 初始化项目结构和功能

- 创建项目目录和文件结构 - 添加基础的 Vue组件和布局 - 实现简单的路由和页面切换 - 添加数据库操作相关代码 - 引入 dateutil 库并添加相关测试
2025-08-17 13:24:36 +08:00
commit 0c4e94b5af
127 changed files with 28255 additions and 0 deletions
@@ -0,0 +1,160 @@
+<template>
+  <a-layout-content>
+    <a-row  >
+      <a-col :span="15">
+<!--        <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 :span="8">
+        <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.invoiceCode" />
+        </a-form-item>
+        <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 >-->
+<!--          <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>
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import {h, ref} from 'vue';
+import {
+  UploadOutlined,
+  FileDoneOutlined,
+  FileProtectOutlined,
+  // SmileOutlined,
+} from '@ant-design/icons-vue'
+import type {StepProps} from "ant-design-vue"
+import  Check  from './Check.vue'
+import upload from './upload.vue'
+import Report from "./report.vue"
+// 步骤
+const items = [
+  {
+    title: '上传发票',
+    icon: h(UploadOutlined),
+  },
+  {
+    title: '识别发票',
+    icon: h(FileDoneOutlined),
+  },
+  {
+    title: '验证发票',
+    icon: h(FileProtectOutlined),
+  },
+] as StepProps[];
+// 文件路径
+const filePath = ref('');
+const current =  ref<number>(0);
+// 下一步
+const nextPage = () => {
+  current.value ++;
+};
+// 上一步
+const previousPage = () => {
+  current.value--;
+};
+// 保存
+const saveReport = () => {
+  console.log('保存成功')
+}
+// 表单数据
+const formState = ref<string>('');
+
+</script>
+
+<template>
+  <a-steps :current="current" :items="items"></a-steps>
+  <a-layout>
+    <a-layout-content class="container">
+      <upload v-if="current == 0" v-model:filePath="filePath" />
+      <Check v-if="current == 1" v-model:filePath="filePath"  v-model:formState="formState"/>
+      <report v-if="current == 2" v-model:filePath="filePath" v-model:formState="formState" />
+    </a-layout-content>
+    <a-layout-footer>
+      <a-row>
+        <a-col :span="12" offset="16">
+          <a-space>
+            <a-button type="default" v-if="current > 0"  @click="previousPage">上一步</a-button>
+            <a-button type="primary" v-if="current < items.length-1 " @click="nextPage">下一步</a-button>
+            <a-button type="primary" v-if="current == items.length-1" @click="saveReport">完成</a-button>
+          </a-space>
+        </a-col>
+      </a-row>
+    </a-layout-footer>
+  </a-layout>
+
+</template>
+
+<style scoped>
+.ant-steps{
+  padding: 0 20px 20px 20px;
+}
+</style>
@@ -0,0 +1,54 @@
+<template>
+  <a-layout-content>
+    <a-row  >
+      <a-col :span="8">
+        查验结果：{{formState.cyjgxx}}
+      </a-col>
+      <a-col :span="8">
+        查验次数：{{formState.inspectionAmount}}
+      </a-col>
+      <a-col :span="8">
+        查验时间：{{formState.verify_time}}
+      </a-col>
+    </a-row>
+  </a-layout-content>
+</template>
+<script lang="ts" setup>
+import {ref,onMounted } from 'vue';
+import request  from "../../utils/request.ts";
+const props = defineProps({ filePath: String });
+import {baseURL} from "../../utils/baseurl.ts";
+
+const fileType = ref<string>('img')
+onMounted(() => {
+  alert(props.filePath)
+  if(props.filePath){
+    fileType.value = props.filePath.split('.').pop() ==='pdf'?'pdf':'img'
+    request.get('/verify?filePath='+encodeURIComponent(props.filePath)).then((res) => {
+      console.log(res)
+      if(res.data){
+        formState.value = res.data
+      }else{
+        formState.value.cyjgxx ="失败"
+      }
+    })
+    fileUrl.value =  baseURL+"/"+props.filePath
+  }
+})
+
+//
+const fileUrl = ref('')
+
+let formState = ref({
+  inspectionAmount: "",
+  cyjgxx: "",
+  verify_time: "",
+});
+
+</script>
+<style scoped>
+.pdf{
+  width: 100%;
+  height: 100%;
+}
+</style>
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import type { UploadProps} from "ant-design-vue";
+import {ref} from "vue";
+import {
+  UploadOutlined
+} from '@ant-design/icons-vue';
+const fileList1 = ref<UploadProps['fileList']>([]);
+const props = defineProps({ filePath: String });
+const emit= defineEmits(['update:filePath'])
+const handleRemove = (file: UploadProps['fileList']) => {
+  console.log( file)
+  return false;
+};
+console.log(props.filePath)
+const handleUpload = (options: any) => {
+  const { file, onSuccess, onError, onProgress } = options;
+
+  // 创建 FormData 对象
+  const formData = new FormData();
+  formData.append('file', file);
+
+  // 使用 XMLHttpRequest 进行上传
+  const xhr = new XMLHttpRequest();
+
+  // 监听上传进度
+  xhr.upload.onprogress = (event) => {
+    if (event.lengthComputable) {
+      onProgress({ percent: (event.loaded / event.total) * 100 }, file);
+    }
+  };
+
+  // 上传成功回调
+  xhr.onload = () => {
+    if (xhr.status === 200 || xhr.status === 201) {
+      console.log(xhr.responseText);
+      onSuccess(xhr.responseText, file);
+      emit('update:filePath', xhr.responseText)
+    } else {
+      onError(new Error(`Upload failed with status ${xhr.status}`));
+    }
+  };
+  // 上传错误回调
+  xhr.onerror = () => {
+    onError(new Error('Network error'));
+  };
+
+  // 发送请求到服务器
+  xhr.open('POST', 'http://192.168.8.146:5000/upload');
+  xhr.send(formData);
+};
+
+</script>
+
+<template>
+  <a-layout-content class="container">
+    <a-upload
+        v-model:file-list="fileList1"
+        :customRequest="handleUpload"
+        list-type="picture"
+        class="upload-list-inline"
+        :max-count="1"
+        @remove="handleRemove"
+    >
+      <a-button >
+        <upload-outlined></upload-outlined>
+        上传发票
+      </a-button>
+    </a-upload>
+
+  </a-layout-content>
+</template>
+
+<style scoped>
+.container {
+   height: 100%;
+}
+</style>