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

- 创建项目目录和文件结构
- 添加基础的 Vue组件和布局
- 实现简单的路由和页面切换
- 添加数据库操作相关代码
- 引入 dateutil 库并添加相关测试
This commit is contained in:
liuxiaoqing
2025-08-17 13:24:36 +08:00
commit 0c4e94b5af
127 changed files with 28255 additions and 0 deletions
+24
View File
@@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
+5
View File
@@ -0,0 +1,5 @@
# Vue 3 + TypeScript + Vite
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
+13
View File
@@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue + TS</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
File diff suppressed because it is too large Load Diff
+26
View File
@@ -0,0 +1,26 @@
{
"name": "vite-project",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vue-tsc -b && vite build",
"preview": "vite preview"
},
"dependencies": {
"ant-design-vue": "^4.2.6",
"axios": "^1.11.0",
"konva": "^9.3.22",
"querystring": "^0.2.1",
"vue": "^3.5.17",
"vue-konva": "^3.2.2"
},
"devDependencies": {
"@vitejs/plugin-vue": "^6.0.0",
"@vue/tsconfig": "^0.7.0",
"typescript": "~5.8.3",
"vite": "^7.0.4",
"vue-tsc": "^2.2.12"
}
}
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

+55
View File
@@ -0,0 +1,55 @@
<script setup lang="ts">
import { ref } from 'vue';
import index from './components/check/index.vue'
import manage from './pages/manage.vue'
const selectedKeys1 = ref (['1']);
let activeItem = ref(1);
const handleSelectd= (e: any) => {
console.log('click ', e);
activeItem.value = e.key;
};
</script>
<template>
<a-layout class="container">
<a-layout-header class="header">
<div class="logo" />
<a-menu
v-model:selectedKeys="selectedKeys1"
theme="dark"
mode="horizontal"
:style="{ lineHeight: '64px' }"
@select="handleSelectd"
>
<a-menu-item key="1">发票查验</a-menu-item>
<a-menu-item key="2">发票管理</a-menu-item>
<a-menu-item key="3">发票复验</a-menu-item>
<a-menu-item key="4">发票统计</a-menu-item>
</a-menu>
</a-layout-header>
<a-layout-content style="padding: 0 10px">
<a-layout style="padding: 24px 0; background: #fff">
<index v-if="activeItem == 1" />
<manage v-if="activeItem == 2" />
</a-layout>
</a-layout-content>
</a-layout>
</template>
<style scoped>
#components-layout-demo-top-side .logo {
float: left;
height: 31px;
margin: 16px 24px 16px 0;
background: rgba(255, 255, 255, 0.3);
}
.ant-row-rtl #components-layout-demo-top-side .logo {
float: right;
margin: 16px 0 16px 24px;
}
.container {
height: 100%;
}
</style>
Binary file not shown.

After

Width:  |  Height:  |  Size: 70 KiB

+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

After

Width:  |  Height:  |  Size: 496 B

@@ -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>
+11
View File
@@ -0,0 +1,11 @@
import { createApp } from 'vue'
import Antd from 'ant-design-vue';
import './style.css'
import App from './App.vue'
import 'ant-design-vue/dist/reset.css';
import VueKonva from 'vue-konva';
const app = createApp(App)
app.use(Antd);
app.use(VueKonva);
app.mount('#app')
+73
View File
@@ -0,0 +1,73 @@
<script setup lang="ts">
import {ref} from "vue";
const columns = [
// {
// title: '发票代码',
// dataIndex: 'invoiceCode',
// key: 'invoiceCode',
// },
{
title: '发票号码',
dataIndex: 'invoiceNumber',
key: 'invoiceNumber',
},
{
title: '不含税金额',
dataIndex: 'invoiceAmountPreTax',
key: 'invoiceAmountPreTax',
},
{
title: '税额',
dataIndex: 'invoiceTax',
key: 'invoiceTax',
},
{
title: '价税合计',
dataIndex: 'totalAmount',
key: 'totalAmount',
},
{
title: '开票日期',
dataIndex: 'invoiceDate',
key: 'invoiceDate',
},
{
title: '销方名称',
dataIndex: 'sellerName',
key: 'sellerName',
},
{
title: '销方税号',
dataIndex: 'sellerTaxNumber',
key: 'sellerTaxNumber',
},
{
title: '查验结果',
dataIndex: 'cyjgxx',
key: 'cyjgxx',
},
{
title: '查验次数',
dataIndex: 'inspectionAmount',
key: 'inspectionAmount',
},
{
title: '查验时间',
dataIndex: 'verify_time',
key: 'verify_time',
}
]
let data = ref( [])
</script>
<template>
<a-table :columns="columns" :data-source="data">
</a-table>
</template>
<style scoped>
</style>
+81
View File
@@ -0,0 +1,81 @@
:root {
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
.card {
padding: 2em;
}
#app {
max-width: 1280px;
width: 100%;
height: 100%;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}
+1
View File
@@ -0,0 +1 @@
export const baseURL = "http://192.168.8.146:5000"
+12
View File
@@ -0,0 +1,12 @@
/* request.ts 这里博主用的是 TypeScript */
// 引入 Axios 库的功能,AxiosInstance 是 Axios 中自带的接口类型
import axios, {type AxiosInstance} from 'axios';
import {baseURL} from "./baseurl.ts";
const service: AxiosInstance = axios.create({
baseURL: baseURL,
timeout: 5000,
});
// 导出 axios 实例
export default service;
+1
View File
@@ -0,0 +1 @@
/// <reference types="vite/client" />
+15
View File
@@ -0,0 +1,15 @@
{
"extends": "@vue/tsconfig/tsconfig.dom.json",
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"erasableSyntaxOnly": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true
},
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
}
+7
View File
@@ -0,0 +1,7 @@
{
"files": [],
"references": [
{ "path": "./tsconfig.app.json" },
{ "path": "./tsconfig.node.json" }
]
}
+25
View File
@@ -0,0 +1,25 @@
{
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
"target": "ES2023",
"lib": ["ES2023"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"verbatimModuleSyntax": true,
"moduleDetection": "force",
"noEmit": true,
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"erasableSyntaxOnly": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true
},
"include": ["vite.config.ts"]
}
+20
View File
@@ -0,0 +1,20 @@
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vite.dev/config/
export default defineConfig({
plugins: [vue()],
server: {
host: '0.0.0.0',
port: 5173
},
resolve: {
alias: {
'#': '/src'
}
},
build: {
outDir: '../../alibabacloud_sample/templates'
},
})