Commit 6cd7061e by 潘际乾

单据识别替换为图片

parent f8aa68f8
...@@ -17,7 +17,14 @@ ...@@ -17,7 +17,14 @@
<div class="invoices-recognition"> <div class="invoices-recognition">
<div class="invoices-area"> <div class="invoices-area">
<div class="file-name">{{ fileName }}</div> <div class="file-name">{{ fileName }}</div>
<iframe class="pdf-file" :src="fileUrl" type="application/pdf" /> <!-- <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>
<div class="recognition-area"> <div class="recognition-area">
<el-form <el-form
...@@ -28,25 +35,35 @@ ...@@ -28,25 +35,35 @@
<el-col :span="24"> <el-col :span="24">
<el-form-item label=""> <el-form-item label="">
<c-select v-model="invoicesData.type"> <c-select v-model="invoicesData.type">
<el-option v-for="(item, idx) in invoicesTypeOptions" :key="idx" :label="item.label" :value="item.value"></el-option> <el-option
v-for="(item, idx) in invoicesTypeOptions"
:key="idx"
:label="item.label"
:value="item.value"
></el-option>
</c-select> </c-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="24"> <el-col :span="24">
<el-form-item label="发票日期"> <el-form-item label="发票日期">
<c-input type="textarea" v-model="invoicesData.date"></c-input> <c-input type="textarea" v-model="invoicesData.date"></c-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="24"> <el-col :span="24">
<el-form-item label="发票金额"> <el-form-item label="发票金额">
<c-input type="textarea" v-model="invoicesData.amount"></c-input> <c-input type="textarea" v-model="invoicesData.amount"></c-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="24"> <el-col :span="24">
<el-form-item label="是否正本"> <el-form-item label="是否正本">
<c-select v-model="invoicesData.original" style="width: 100%;"> <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> <el-option
</c-select> v-for="(item, idx) in invoicesOriginalOptions"
:key="idx"
:label="item.label"
:value="item.value"
></el-option>
</c-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-form> </el-form>
...@@ -65,7 +82,8 @@ export default { ...@@ -65,7 +82,8 @@ export default {
show: false, show: false,
fileName: "KZ3500220597AA-001.pdf", fileName: "KZ3500220597AA-001.pdf",
// fileUrl: "/invoice.pdf", // fileUrl: "/invoice.pdf",
fileUrl: "assets/invoice.pdf", fileUrl: require("~/assets/KZ3500220597AA-001.pdf.jpg"),
imgContainerHeight: 0,
invoicesTypeOptions: [ invoicesTypeOptions: [
{ label: "商业发票", value: "SYFP" }, { label: "商业发票", value: "SYFP" },
{ label: "个人发票", value: "GRFP" }, { label: "个人发票", value: "GRFP" },
...@@ -78,20 +96,34 @@ export default { ...@@ -78,20 +96,34 @@ export default {
type: "SYFP", type: "SYFP",
date: "5 DEC 2021", date: "5 DEC 2021",
amount: "USD 223000.00", amount: "USD 223000.00",
original: 1 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: { methods: {
save() { save() {
this.$emit("confirm") this.$emit("confirm");
this.close(); this.close();
}, },
close() { close() {
this.show = false this.show = false;
} },
} },
} };
</script> </script>
<style> <style>
...@@ -101,12 +133,16 @@ export default { ...@@ -101,12 +133,16 @@ export default {
flex-direction: column; flex-direction: column;
margin-bottom: unset; margin-bottom: unset;
} }
.ocr-invoices-dialog .el-dialog__header, .ocr-invoices-dialog .el-dialog__body { .ocr-invoices-dialog .el-dialog__header,
.ocr-invoices-dialog .el-dialog__body {
padding: 0; padding: 0;
} }
.ocr-invoices-dialog .el-dialog__body { .ocr-invoices-dialog .el-dialog__body {
flex: 1; flex: 1;
} }
.ocr-invoices-dialog .el-scrollbar__wrap {
overflow-x: auto;
}
</style> </style>
<style scoped> <style scoped>
...@@ -124,14 +160,17 @@ export default { ...@@ -124,14 +160,17 @@ export default {
box-sizing: border-box; box-sizing: border-box;
} }
.invoices-area { .invoices-area {
height: 100%;
width: 50%; width: 50%;
border-right: 1px solid #babec1; border-right: 1px solid #babec1;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 0 10px; padding: 0 10px;
overflow: hidden;
} }
.recognition-area { .recognition-area {
height: 100%;
width: 50%; width: 50%;
border-left: 1px solid #babec1; border-left: 1px solid #babec1;
box-sizing: border-box; box-sizing: border-box;
...@@ -144,4 +183,4 @@ export default { ...@@ -144,4 +183,4 @@ export default {
.invoices-area .pdf-file { .invoices-area .pdf-file {
flex: 1; flex: 1;
} }
</style> </style>
\ No newline at end of file
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