Skip to content

V
vue-gjjs
Commit 74777364 by 潘际乾
Options

单据识别类型切换

parent c0d5f405
Showing with 335 additions and 190 deletions
src/views/Business/Ditdck/Docpre.vue
......@@ -227,7 +227,7 @@
</span>
</el-dialog>
</c-col>
<OcrInvoicesRecognition ref="ocrInvoices" v-on:confirm="selectGridPDF"></OcrInvoicesRecognition>
<OcrRecognition ref="ocrRecognition" v-on:confirm="selectGridPDF"></OcrRecognition>
</div>
</template>
<script>
......@@ -236,13 +236,13 @@ import commonProcess from "~/mixin/commonProcess";
import CodeTable from "~/config/CodeTable";
import Event from "~/model/Ditdck/Event";
import OcrInvoicesRecognition from "./OcrInvoicesRecognition.vue";
import OcrRecognition from "./OcrRecognition.vue";
export default {
inject: ["root"],
props: ["model", "codes"],
mixins: [commonProcess],
components: { OcrInvoicesRecognition },
components: { OcrRecognition },
data() {
return {
addDialogVisible: false,
......@@ -363,7 +363,7 @@ export default {
this.selectPDFData = idx;
},
openPdfDialog(id, idx) {
this.$refs.ocrInvoices.show = true
this.$refs.ocrRecognition.show = true
this.selectedPdf.id = id;
this.selectedPdf.index = idx;
},
......
src/views/Business/Ditdck/OcrInvoicesRecognition.vue deleted 100644 → 0
<template>
<!-- OCR 单据智能识别 -->
<el-dialog
custom-class="ocr-invoices-dialog"
:visible.sync="show"
:show-close="false"
width="80%"
top="10vh"
>
<div slot="title" class="ocr-title">
<span style="font-weight: bold;">OCR智能识别</span>
<div>
<c-button type="primary" @click="save">保存</c-button>
<c-button type="primary" @click="close">关闭</c-button>
</div>
</div>
<div class="invoices-recognition">
<div class="invoices-area">
<div class="file-name">{{ fileName }}</div>
<!-- <iframe class="pdf-file" :src="fileUrl" type="application/pdf" /> -->
<div class="pdf-file">
<el-scrollbar :style="{ height: imgContainerHeight + 'px' }">
<div style="height: 100%;display: flex;justify-content: center;">
<img :src="fileUrl" alt="单据" style="display: block;" />
</div>
</el-scrollbar>
</div>
</div>
<div class="recognition-area">
<el-form
v-model="invoicesData"
label-width="100px"
label-position="right"
>
<el-col :span="24">
<el-form-item label="">
<c-select v-model="invoicesData.type">
<el-option
v-for="(item, idx) in invoicesTypeOptions"
:key="idx"
:label="item.label"
:value="item.value"
></el-option>
</c-select>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="发票日期">
<c-input type="textarea" v-model="invoicesData.date"></c-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="发票金额">
<c-input type="textarea" v-model="invoicesData.amount"></c-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="是否正本">
<c-select v-model="invoicesData.original" style="width: 100%;">
<el-option
v-for="(item, idx) in invoicesOriginalOptions"
:key="idx"
:label="item.label"
:value="item.value"
></el-option>
</c-select>
</el-form-item>
</el-col>
</el-form>
</div>
</div>
</el-dialog>
</template>
<script>
import invoicePdf from "~/assets/invoice.pdf";
export default {
name: "OcrInvoicesRecognition",
data() {
return {
show: false,
fileName: "KZ3500220597AA-001.pdf",
// fileUrl: "/invoice.pdf",
fileUrl: require("~/assets/KZ3500220597AA-001.pdf.jpg"),
imgContainerHeight: 0,
invoicesTypeOptions: [
{ label: "商业发票", value: "SYFP" },
{ label: "个人发票", value: "GRFP" },
],
invoicesOriginalOptions: [
{ label: "是", value: 1 },
{ label: "否", value: 0 },
],
invoicesData: {
type: "SYFP",
date: "5 DEC 2021",
amount: "USD 223000.00",
original: 1,
},
};
},
watch: {
show(newVal, oldVal) {
if (!this.imgContainerHeight) {
if (newVal) {
this.$nextTick(() => {
const ele = this.$el.querySelector(
".invoices-recognition .invoices-area .pdf-file"
);
this.imgContainerHeight = ele.clientHeight;
});
}
}
},
},
methods: {
save() {
this.$emit("confirm");
this.close();
},
close() {
this.show = false;
},
},
};
</script>
<style>
.ocr-invoices-dialog {
height: 85%;
display: flex;
flex-direction: column;
margin-bottom: unset;
}
.ocr-invoices-dialog .el-dialog__header,
.ocr-invoices-dialog .el-dialog__body {
padding: 0;
}
.ocr-invoices-dialog .el-dialog__body {
flex: 1;
}
.ocr-invoices-dialog .el-scrollbar__wrap {
overflow-x: auto;
}
</style>
<style scoped>
.ocr-title {
display: flex;
justify-content: space-between;
padding: 5px 10px 5px 20px;
border-bottom: 1px solid #dadbdd;
}
.invoices-recognition {
height: 100%;
display: flex;
background-color: #f6fbff;
padding: 20px;
box-sizing: border-box;
}
.invoices-area {
height: 100%;
width: 50%;
border-right: 1px solid #babec1;
box-sizing: border-box;
display: flex;
flex-direction: column;
padding: 0 10px;
overflow: hidden;
}
.recognition-area {
height: 100%;
width: 50%;
border-left: 1px solid #babec1;
box-sizing: border-box;
}
.invoices-area .file-name {
padding-bottom: 10px;
text-align: center;
}
.invoices-area .pdf-file {
flex: 1;
}
</style>
src/views/Business/Ditdck/OcrRecognition.vue 0 → 100644
<template>
<!-- OCR 单据智能识别 -->
<el-dialog
custom-class="ocr-invoices-dialog"
:visible.sync="show"
:show-close="false"
width="80%"
top="10vh"
>
<div slot="title" class="ocr-title">
<span style="font-weight: bold;">OCR智能识别</span>
<div>
<c-button type="primary" @click="save">保存</c-button>
<c-button type="primary" @click="close">关闭</c-button>
</div>
</div>
<div class="invoices-recognition">
<div class="invoices-area">
<div class="file-name">{{ fileName }}</div>
<!-- <iframe class="pdf-file" :src="fileUrl" type="application/pdf" /> -->
<div class="pdf-file">
<el-scrollbar :style="{ height: imgContainerHeight + 'px' }">
<div style="height: 100%;display: flex;justify-content: center;">
<img :src="fileUrl" alt="单据" style="display: block;" />
</div>
</el-scrollbar>
</div>
</div>
<div class="recognition-area">
<el-scrollbar :style="{ height: imgContainerHeight + 'px' }">
<el-form
v-model="formData"
label-width="100px"
label-position="right"
>
<c-col :span="24">
<el-form-item label="">
<c-select v-model="formData.type" @change="fileTypeChangeEvent">
<el-option
v-for="(item, idx) in fileType"
:key="idx"
:label="item.label"
:value="item.value"
></el-option>
</c-select>
</el-form-item>
</c-col>
<!-- 商业发票 -->
<c-col :span="24" v-if="formData.type === 'commercial_invoice'">
<c-col :span="24">
<el-form-item label="发票日期">
<c-input type="textarea" v-model="formData.invoices.date"></c-input>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="发票金额">
<c-input type="textarea" v-model="formData.invoices.amount"></c-input>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="是否正本">
<c-select v-model="formData.invoices.original" style="width: 100%;">
<el-option
v-for="(item, idx) in invoicesOriginalOptions"
:key="idx"
:label="item.label"
:value="item.value"
></el-option>
</c-select>
</el-form-item>
</c-col>
</c-col>
<!-- 提货单 -->
<c-col :span="24" v-if="formData.type === 'bill_of_lading'">
<c-col :span="24">
<el-form-item label="发货人">
<c-input type="textarea" v-model="formData.lading.shipper"></c-input>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="收货人">
<c-input type="textarea" v-model="formData.lading.consignee"></c-input>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="通知地址">
<c-input type="textarea" v-model="formData.lading.address"></c-input>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="船舶">
<c-input type="textarea" v-model="formData.lading.vessel"></c-input>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="装货港">
<c-input type="textarea" v-model="formData.lading.loading"></c-input>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="卸货港">
<c-input type="textarea" v-model="formData.lading.loading"></c-input>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="托运人的货物描述">
<c-input type="textarea" v-model="formData.lading.description"></c-input>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="毛重">
<c-input type="textarea" v-model="formData.lading.gross_weight"></c-input>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="据称重量">
<c-input type="textarea" v-model="formData.lading.said_to_weigh"></c-input>
</el-form-item>
</c-col>
</c-col>
<!-- 海运货物证书 -->
<c-col :span="24" v-if="formData.type === 'marine_cargo_certificate'">
<c-col :span="24">
<el-form-item label="证书号码">
<c-input type="textarea" v-model="formData.marine.certificate"></c-input>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="预约保险单编号">
<c-input type="textarea" v-model="formData.marine.policy"></c-input>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="帐号">
<c-input type="textarea" v-model="formData.marine.account"></c-input>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="被保险人">
<c-input type="textarea" v-model="formData.marine.assured"></c-input>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="保险金额">
<c-input type="textarea" v-model="formData.marine.sum_insured"></c-input>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="航次">
<c-input type="textarea" v-model="formData.marine.voyage"></c-input>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="参考编号">
<c-input type="textarea" v-model="formData.marine.reference"></c-input>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="航班号">
<c-input type="textarea" v-model="formData.marine.airline"></c-input>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="出发日期">
<c-input type="textarea" v-model="formData.marine.departing"></c-input>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="达到日期">
<c-input type="textarea" v-model="formData.marine.arrival"></c-input>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="空运单编号">
<c-input type="textarea" v-model="formData.marine.airway"></c-input>
</el-form-item>
</c-col>
</c-col>
</el-form>
</el-scrollbar>
</div>
</div>
</el-dialog>
</template>
<script>
import bill_of_ladingPdf from "~/assets/demo-files/bill_of_lading.pdf";
import commercial_invoicePdf from "~/assets/demo-files/commercial_invoice.pdf";
import marine_cargo_certificatePdf from "~/assets/demo-files/marine_cargo_certificate.pdf";
export default {
name: "OcrRecognition",
data() {
return {
show: false,
fileName: "KZ3500220597AA-001.pdf",
// fileUrl: "/invoice.pdf",
// fileUrl: require("~/assets/demo-files/bill_of_lading.png"),
fileUrl: require("~/assets/demo-files/commercial_invoice.png"),
// fileUrl: require("~/assets/demo-files/marine_cargo_certificate.png"),
imgContainerHeight: 0,
fileType: [
{ label: "商业发票", value: "commercial_invoice" },
{ label: "提货单", value: "bill_of_lading" },
{ label: "海运货物证书", value: "marine_cargo_certificate" },
],
invoicesOriginalOptions: [
{ label: "是", value: 1 },
{ label: "否", value: 0 },
],
formData: {
type: 'commercial_invoice',
invoices: {
date: '5 DEC 2021',
amount: "USD 223000.00",
original: 1
},
lading: {
shipper: 'HAMERSLEY IRON PTY.LIMITED\rA.B.N. 49 004 558 276',
consignee: 'TO ORDER',
address: '',
vessel: 'BULK INGENUITY',
loading: 'DAMPIER, WESTERN\rAUSTRALIA',
discharge: 'MAIN PORT(S), CHINA',
description: 'NO MARKS IN BULK',
gross_weight: 'SP10L',
said_to_weigh: '81,599\rWMT'
},
marine: {
certificate: '01-M0549399-CAN',
policy: '01-M0542662-0CP',
account: '01-5120005-H0K0792',
assured: 'ELECTRONIC SCIENTIFIC ENGINEERING LIMITED',
sum_insured: 'USD 24.530.00',
voyage: 'From Hong Kong Alrport to Belling Capltal\rInternatlonal AlrportP.R.China',
reference: 'C411121104',
airline: 'CX368',
departing: '02-Dec-2021',
arrival: '05-Dec-2021',
airway: 'HKAE-002054'
}
}
};
},
watch: {
show(newVal, oldVal) {
if (!this.imgContainerHeight) {
if (newVal) {
this.$nextTick(() => {
const ele = this.$el.querySelector(
".invoices-recognition .invoices-area .pdf-file"
);
this.imgContainerHeight = ele.clientHeight;
});
}
}
},
},
methods: {
save() {
this.$emit("confirm");
this.close();
},
close() {
this.show = false;
},
fileTypeChangeEvent(val) {
this.fileUrl = require(`~/assets/demo-files/${val}.png`)
}
},
};
</script>
<style>
.ocr-invoices-dialog {
height: 85%;
display: flex;
flex-direction: column;
margin-bottom: unset;
}
.ocr-invoices-dialog .el-dialog__header,
.ocr-invoices-dialog .el-dialog__body {
padding: 0;
}
.ocr-invoices-dialog .el-dialog__body {
flex: 1;
}
.ocr-invoices-dialog .el-scrollbar__wrap {
overflow-x: auto;
}
</style>
<style scoped>
.ocr-title {
display: flex;
justify-content: space-between;
padding: 5px 10px 5px 20px;
border-bottom: 1px solid #dadbdd;
}
.invoices-recognition {
height: 100%;
display: flex;
background-color: #f6fbff;
padding: 20px;
box-sizing: border-box;
}
.invoices-area {
height: 100%;
width: 50%;
border-right: 1px solid #babec1;
box-sizing: border-box;
display: flex;
flex-direction: column;
padding: 0 10px;
overflow: hidden;
}
.recognition-area {
height: 100%;
width: 50%;
border-left: 1px solid #babec1;
box-sizing: border-box;
}
.invoices-area .file-name {
padding-bottom: 10px;
text-align: center;
}
.invoices-area .pdf-file {
flex: 1;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment