feat(webapp): 初始化项目结构和功能
- 创建项目目录和文件结构 - 添加基础的 Vue组件和布局 - 实现简单的路由和页面切换 - 添加数据库操作相关代码 - 引入 dateutil 库并添加相关测试
This commit is contained in:
liuxiaoqing
@@ -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 |
@@ -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>-->
|
||||
<!--<!– <v-image :config="{image: image,x:0,y:0}" />–>-->
|
||||
<!-- <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>
|
||||
@@ -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')
|
||||
@@ -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>
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export const baseURL = "http://192.168.8.146:5000"
|
||||
@@ -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
@@ -0,0 +1 @@
|
||||
/// <reference types="vite/client" />
|
||||
Reference in New Issue
Block a user